[C2 Multiplayer] Создание игры для двоих игроков (ajax)

уроки, мануалы, советы по Construct 2

Сообщение [C2 Multiplayer] Создание игры для двоих игроков (ajax)
» 22 сен 2013, 07:10

Хотел сделать пример (как просили) обезьянки + гранаты. Но, как обычно, под влиянием просмотра иконок - приходят новые идеи. Итак, идея игры: У нас будет 2 персонажа в социальных сетях, у которых есть по 30 друзей. Каждый ход они будут "делать гадости" и отнимать друзей. У кого останется 0 друзей - тот и проиграл.
Сразу скажу, что сильно подробно объяснять некоторые моменты заведомо не буду. Для начала ознакомьтесь со статьей viewtopic.php?f=4&t=524 - и вам станет понятно как работать с php-файлами, как создать базу, выполнить запрос итп.
 1. Подготовка проекта
1.1.Нам нужны иконки для 2-х персонажей: despicable-me-2-minion-icons - отсюда я взял картинки для персонажей(игроков)
1.2.нужен хостинг, куда можно выкладывать ваши php-файлы. Я работаю на denwer , поэтому для тестирования игры нет необходимости в хостинге.
1.3.создаем чистый проект. Первый layout переименовываем в Menu, а его sheet - в Menu script. Создаем еще один layout: Game. Его sheet - Game script. В настройках проекта выставляем: First layout - Menu.

 2. Создание проекта - Menu
2.1.Добавляем 2 персонажа в Menu. Переименовываем их. Слева - player1, справа - player2. Каждому добавляем локальную переменную friends, число по-умолчанию: 30. Это - количество друзей у каждого игрока в начале игры.
2.2.Под игроками создаем 2 кнопки: StartPlayer1 и StartPlayer2. Первая кнопка - для создания новой игры, а вторая - для подключения к последней созданной игре. Таким образом, если выложить игру на сайт - то пользователи смогут создавать свои игры, если хотят поиграть вдвоём. Делаем просто для примера, особо не заморачиваясь по поводу защиты - всё необходимое вы сможете доделать "под себя". Чуть ниже делаем текстовое поле join_log с текстом "Загрузка игры". Ставим Invisible.
Вот что получилось:
01.jpg

 3.Создание дополнительных объектов (для всего проекта)
Для работы с AJAX нам необходимы дополнительные плагины, добавляем их в проект:
- AJAX - будет отправлять запросы и принимать ответы
- Function - для сокращения кода, а также - это удобно (во всяком случае, мне)
- Dictionary - Очень удобно для хранения данных типа "ключ"-"значение" (как и Webstorage). Нам их нужно 2:
1.Создаем под названием GameInfo - будет хранить глобальные данные (вмест использования глобальных переменных)
2.Создаем под названием GameInfoAjax - будет получать временные данные от AJAX-ответов

 4. Создание проекта - Menu script
4.1. Переходим к Menu script. Создаем глобальную (постоянную!) переменную SERVER_NAME - здесь будет хранится адрес к файлу-обработчику. Поскольку мы создадим кросс-доменный php-файл, то не обязательно игра должна быть расположена там же, где и php-скрипт. Поскольку я работаю на денвере и я создал свой хост http://miniongame/ , то вписываю именно его: http://miniongame/index.php
02.jpg

4.2. При старте Menu создаем ключи для GameInfo:
"MyPlayer"-"" - будет хранить название моего игрока (player1 или player2)
"EnemyPlayer"-"" - будет хранить название противника (player1 или player2)
"game_id"-0 - будет хранить ID игры из базы игр
"player_turn"-"player1" - будет хранить информацию о том, чей сейчас ход. Ходит у нас всегда первый игрок (который создавал игру) - значит пишем player1
Вот что получилось:
03.jpg

4.3 Теперь создаем операцию по входу первого пользователя в игру, то есть по сути - первый участник создает новую игру.
При нажатии на кнопку StartPlayer1 - отключаем обе кнопки (чтобы нельзя было нажимать, пока выполняется ajax запрос), выставляем сообщение join_log видимым. В GameInfo заносим информацию об игроках. Мой игрок - player1, игрок противника (соответственно) - player2. Еще выполняем ajax post-запрос для получения ID игры. Тег "makegame" - понятно, что для создания игры. В php-файле будут такие же разделы, для простоты понимания. URL указываем SERVER_NAME, информацию указываем:
"to=makegame&myplayer=" & GameInfo.Get("MyPlayer") & "&enemyplayer=" & GameInfo.Get("EnemyPlayer")
это значит, что передаем:
to=makegame - в php-файле обрабатываем раздел makegame, куда передаем текущую информацию (уже добавленную в GameInfo):
myplayer - выводим из GameInfo, где информация лежит под ключом "MyPlayer"
enemyplayer - выводим из GameInfo, где информация лежит под ключом "EnemyPlayer"
04.jpg

При получении данных от запроса тегом "makegame" получаем свежую информацию во временный GameInfoAjax. Если в этой информации есть ключ "status"="ok" - то обновляем в нашем GameInfo ключ "game_id" и переходим в комнату Game. Всё это дело оборачиваем в группу Player1
05.jpg

4.4. Создаем операцию по входу второго игрока в игру. Второй игрок будет подключатся к последней созданной игре. Для этого он должен получить game_id игры, а также чей ход игрока происходит в данный момент. Ну и количество друзей у игроков (вдруг первый игрок уже успел атаковать вас?!)
При нажатии на кнопку StartPlayer2 - отключаем обе кнопки , выставляем сообщение join_log видимым. В GameInfo заносим информацию об игроках. Мой игрок - player2, игрок противника (соответственно) - player1. Еще выполняем ajax post-запрос для получения информации об игре. Тег "loadgame" - понятно, что для загрузки игры. URL указываем SERVER_NAME, информацию указываем: "to=loadgame"
При получении данных от запроса тегом "loadgame" получаем свежую информацию во временный GameInfoAjax. Если в этой информации есть ключ "status"="ok" - то обновляем в нашем GameInfo ключ "game_id","player_turn", выставляем полученное количество друзей по игрокам и переходим в комнату Game. И не забываем, что если произошла ошибка с любым из ajax-запросов - то выдаем ошибку. И Всё это дело оборачиваем в группу Player2
06.jpg

 5. Создание проекта - Game
5.1.Добавляем 2 персонажа в Game. Слева - player1, справа - player2. Над ними создаем 2 текстовых поля с названиями: Player1_hp и Player2_hp и текстом "друзья: 0", чтобы было видно, у кого сколько друзей.
5.2.Сверху создаем текстовое поле с информацией о том, чей сейчас ход. Название: info_player_turn, текст: "Сейчас ходит:"
5.3.Под игроками делаем текстовое поле для счетчика. Название: game_counter, текст: "Осталось: XX секунд"
5.4.Под счетчиком создаем кнопку "btn_attack" с текстом "Attack!" Эта кнопка позволяет атаковать противника.
5.5.Под кнопкой создаем текстовое поле для информации о логе боя. Название и текст: battle_log
5.6.Под логом боя создаем текстовое поля для отладочной информации. Название и текст: txt_debug
Вот что получилось:
07.jpg

 6. Создание проекта - Game script
6.1.Создаем глобальную (постоянную!) переменную COUNTERTIME - задаем число 10. Это - количество секунд между обновлениями информации (ajax-запросами). Если хотите изменить время между обновлениями - меняем это число.
6.2.Создаем переменную TimeRemainingInSeconds - задаем число 10. По-умолчанию сколько секунд (собственно, в этом переменной и хранится оставшееся время до следующего обновления)
6.3.Every tick - задаем число друзей у игроков, а также информация кто сейчас ходит и отладочная информация в txt_debug
08.jpg

6.4.Задаем условия для хода игрока. Если сейчас ходит игрок - включаем кнопку для атаки, выводим счетчик и текст, сообщающий, что сейчас ход игрока.
Подусловие 1: каждую секунду отнимаем от счетчика 1 секунду.
Подусловие 2: если время вышло (значит игрок не успел походить) - передаем ход противнику, включаем заново счетчик и выводим отладочный текст.
09.jpg

6.5.Добавляем объект Function в проект. При нажатии на кнопку "Атаковать" вызываем функцию "attacking_enemy", которая у нас отвечает за процесс атаки.
6.6.Состав функции "attacking_enemy": отключаем кнопку "атаковать", выполняем ajax-запрос с тегом "attack" (передаем нужную информацию на сервер)
6.7.При выполнении ajax-запроса "attack" подгружаем информацию с сервера во временный GameInfoAjax, передаем ход противнику и обновляем счетчик. Если запрос прошел успешно ("status"="ok") - выводим лог боя, а также изменяем количество друзей у игроков.
10.jpg

6.8. Оборачиваем это всё в группу My turn (Мой ход) и создаем группу Enemy turn (Ход противника)
6.9.Ход противника - почти всё тоже самое, только: отключена кнопка атаки и по окончании счетчика выполняем функцию "update_stats", которая выполняет запрос "defend" (из информации нам нужен только game_id). Если всё прошло успешно - обновляем количество друзей у игроков и передаем ход тому, чей сейчас ход идет (указан в БД)
11.jpg

6.10. Создаем группу Results. Тут всё просто. Если у кого-то стало 0 друзей - отключаем кнопку атака, не даем никому право хода и выдаем отладочную информацию.
12.jpg

 Тестирование
7.1.Экспортируем проект, грузим его вместе с файлом index.php (файл продокументирован) на хостинг, прописываем в нем доступ к БД.
7.2.В БД импортируем таблицу из файла baza.sql
7.3.Открываем ваш сайт (www.вашсайт.ru/index.html) в двух разных браузерах и проверяем: в одном - создаете игру, в другом - подключаетесь.
Если у вас вместо index.html грузится index.php (это вы увидите, если будет загружена пустая страница) - то переименуйте файл index.php во что-то другое (например, script.php). Только не забудьте изменить название файла в проекте в переменной SERVER_NAME

Ссылка на готовый архив:
files.zip
(142.28 КБ) Скачиваний: 1691

На этом экспресс-урок окончен. Вопросы, пожелания и критика приветствуются.
Аватара пользователя

Администратор
Сообщений: 2350
Я тут с 06 сен 2012
Откуда: Санкт-Петербург, Южно-Сахалинск
Skype: sirg1987
Репутация 254 [ ? ]

Сообщение Re: [C2 Multiplayer] Создание игры для двоих игроков (ajax)
» 22 сен 2013, 09:54

хороший урок! :good:
Аватара пользователя

Администратор
Сообщений: 5619
Я тут с 05 сен 2012
Двиг: Construct2
Лицензия: Personal
Skype: c2community
VK: gabrielsailergray
Репутация 371 [ ? ]

Сообщение Re: [C2 Multiplayer] Создание игры для двоих игроков (ajax)
» 22 сен 2013, 09:55

Супер! Но у меня есть вопросы: если игру выложить, к примеру, на Google Drive или Dropbox вместе с index.php, то она будет работать? Я нубище в этом, как понимаете.
Последний раз редактировалось RACR2 22 сен 2013, 10:13, всего редактировалось 1 раз.
Сейчас в разработке: "Bleak". Процент готовности: ~16% / Подробности: vk.com/RACRDouble
Аватара пользователя

Участник
Сообщений: 7
Я тут с 07 окт 2012
Откуда: Сургут
Репутация 1 [ ? ]

Сообщение Re: [C2 Multiplayer] Создание игры для двоих игроков (ajax)
» 22 сен 2013, 10:10

RACR2 писал(а):если игру выложить, к примеру, на Google Drive или Dropbox вместе с index.php, то она будет работать?

вам нужен хостинг, где есть поддержка php (чтобы ваш файл php мог выполнятся), а также доступ к базе данных MySQL.
RACR2 писал(а):что имеется в виду под "прописать index.php доступ к базе данных"?

откройте файл, в самом верху будут указанные данные для доступа к базе данных. вам нужно будет указать свои (которые вам выдаст хостинг). Чтобы получить больше информации - прочитайте урок, ссылку на который я указал в начале статьи.
Аватара пользователя

Администратор
Сообщений: 2350
Я тут с 06 сен 2012
Откуда: Санкт-Петербург, Южно-Сахалинск
Skype: sirg1987
Репутация 254 [ ? ]

Сообщение Re: [C2 Multiplayer] Создание игры для двоих игроков (ajax)
» 22 сен 2013, 13:28

Все делал на (ajax), а где тогда WebSocket. Ладно я уже нашел другой пример который.
Если у нас 5 т ползователя и он зависнет сервер. Нагрузка будет.
Аватара пользователя

Участник
Сообщений: 1068
Я тут с 30 мар 2013
Репутация 41 [ ? ]

Сообщение Re: [C2 Multiplayer] Создание игры для двоих игроков (ajax)
» 22 сен 2013, 13:51

тут с аяксом народу сложно разобратся, а ты хочешь пример с вебсокетами..потерпи, не всё сразу.
Аватара пользователя

Администратор
Сообщений: 2350
Я тут с 06 сен 2012
Откуда: Санкт-Петербург, Южно-Сахалинск
Skype: sirg1987
Репутация 254 [ ? ]

Сообщение Re: [C2 Multiplayer] Создание игры для двоих игроков (ajax)
» 04 окт 2013, 19:29

неплохо бы еще список сторонних плагинов вбить)) :ok:
Аватара пользователя

Игродел
Сообщений: 405
Я тут с 08 янв 2013
Откуда: Мск
Репутация 207 [ ? ]

Сообщение Re: [C2 Multiplayer] Создание игры для двоих игроков (ajax)
» 07 окт 2013, 08:23

Ilyko96, не понял твою мысль. Подробнее расскажи )
Аватара пользователя

Администратор
Сообщений: 2350
Я тут с 06 сен 2012
Откуда: Санкт-Петербург, Южно-Сахалинск
Skype: sirg1987
Репутация 254 [ ? ]

Сообщение Re: [C2 Multiplayer] Создание игры для двоих игроков (ajax)
» 12 окт 2013, 00:21

Изображение
Аватара пользователя

Игродел
Сообщений: 405
Я тут с 08 янв 2013
Откуда: Мск
Репутация 207 [ ? ]

Сообщение [C2 Multiplayer] Создание игры для двоих игроков (ajax)
» 05 апр 2014, 18:23

Пожайлуста помоги у меня в Event , GameInfo : Key "status"="ok" у меня ничего не получаеться !
Аватара пользователя

Участник
Сообщений: 1
Я тут с 05 апр 2014
Репутация 0 [ ? ]



Вернуться в Уроки по Construct 2

Сейчас эту тему просматривают

Зарегистрированные пользователи: нет зарегистрированных пользователей

Наверх