Содержание
Задача. Необходимо вставить игру (на движке Unity) в страницу сайта. После того, как пользователь сыграет в игру, результат должен отправиться на сервер для обработки.
Решение. На странице сайта разместить iframe с приложением, добавить скрипт для отправки AJAX-запроса. Перед сохранением в Unity, нужно добавить в скрипт нашего WebGL-приложения функцию, которая будет вызвать функцию AJAX-запроса которая будет находиться на сайте (не в игре). В принципе, способ подходит не только для WordPress, а и для любой реализации сайта.
Алгоритм сохранения и добвления приложения Unity на сайт
1. Вызвать JS-функцию при завершении игрового процесса
Если у нас есть готовый проект приложения в Unity, то нам необходимо добавить в скрипт C# фнкцию, которая будет вызывать нашу JavaScript-функцию на сайте для отправки каких-то данных из игры на сервер. Для этого в Unity есть метод Application.ExternalEval("customJsFunction()")
. Здесь customJsFunction — JavaScript-функция, которая будет вызываться из документа страницы. Пример в Код 1.1.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//... //if currentQuestionIndex is less that total available questions if (currentQuestionIndex < questionDataScriptable.questions.Count ) { Invoke("SetQuestion", 0.5f); //go to next question } else { Application.ExternalEval("window.top.sendResaultUnity(true)"); // вызываем JS-функцию с сайта Debug.Log("Game Complete"); //else game is complete gameComplete.SetActive(true); } //... |
В Код 1 приведен пример кода из квиз-игры, где смысл такой — мы ответили на вопрос, если есть еще вопросы, то продолжаем, а если вопросов больше нет, то запустить JS-функцию sendResaultUnity(true)
и далее — скрипт завершения игры. Если условия завершения игры разные, например, проиграл или выиграл, то можно вызвать функци в зависимости от условия и передать в нее разные параметры.
window.top.sendResaultUnity(true)
, т.к. приложение на сайте будет находиться в iframe
, а функция отправки данных вне фрейма. 2. Создание сборки игры для WebGL
File — Build Settings, добавить сцены, выбрать платформу WebGL и запустить процесс сборки «Build and Run». Настройки для сборки в Изображении 1.1. Не у верен, но отключал «Compression Format» в «Player Settings» (Изображении 1.2).
3. Загрузка сборки игры на сервер
Создаем на сервере папку для игры, например в корне сайта — «my-unity-game». И загружаем в нее файлы сборки. В моем случае получилось, как в Изображении 3.
4. Вывод приложения Unity на сайте
Выводим игру через iframe на странице или шаблоне сайта — Код №4.
1 2 3 |
<iframe src="/my-unity-game/index.html" width="900" height="600"></iframe> |
5. Скрипт AJAX-запроса отправки данных на сервер
Создаем функцию sendResaultUnity
из п.1, которая будет отправлять данные на сервер о результате игры (Код №5). Ее мы должны были уже добавить на вызов при завершении игры в самом приложении. Файл (/wp-admin/admin-ajax.php
) для AJAX-запрос.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* Отправка данных на сервер */ function sendResaultUnity(value){ jQuery( function( $ ){ $.ajax({ url: 'https://mysite.net/wp-admin/admin-ajax.php', // php-файл обработки запроса type: 'POST', // Метод запроса data: 'action=unity_ajax¶m=' + value, // Передаем параметр из приложения и action beforeSend: function( xhr ) { // Необязательно. Вывод в консоль перед отправкой console.log( 'value= ' + value ); }, success: function( data ) { // Вывод в консоль ответа php-файла после отправки console.log( data ); } }); }); } |
6. Обработка AJAX-запроса
Чтобы создать обработчик запроса для всех пользователей: авторизованных и нет необходимо использовать два хука wp_ajax_(action)
и wp_ajax_nopriv_(action)
(action
— это ‘unity_ajax’, который передаем в запросе вместе с параметром). К ним будет цепляться наша функция, которая будет обрабатывать запрос. Вставляем Код №6 в functions.php
. Здесь, для примера, мы просто проверяем переданный параметр и в зависимости от его значения отправляем обратно — пройден тест или нет.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
add_action('wp_ajax_unity_ajax', 'qfurs_unity_ajax'); add_action('wp_ajax_nopriv_unity_ajax', 'qfurs_unity_ajax'); function qfurs_unity_ajax(){ if ($_POST['param']){ echo 'Тест пройден'; } else { echo 'Не пройден'; } wp_die(); } |