8 программ и онлайн-сервисов для создания игр без программирования

8 программ и онлайн-сервисов для создания игр без программирования

Во времена, когда трава была зеленее, а вода мокрее, родился интернет-мем «Можно грабить корованы». Его принято использовать для обозначения бесполезности ПО или скучного геймплея. Появился он после публикации письма, направленного в компанию «Мистленд», которая занималась разработкой компьютерных игр. В нем школьник просил студию сделать игру его мечты.

Когда Кирилл писал письмо, создать собственную игру было действительно сложно. В первую очередь по причине отсутствия средств разработки, которые не требуют навыков программирования. Но сегодня каждый может сделать игру своей мечты и не ждать ее «джва года». Потому что появилось множество программ для создания игр, процесс работы с которыми не требует специальных знаний и навыков. Если вы, как и автор упомянутого письма, устали ожидать выхода идеальной игры и решили сделать ее самостоятельно, эта статья будет вам полезна.

1. Программы для создания игр
2. Что такое игровой движок
3. Kodu Game Lab
4. Construct 2
5. Torque 3D
6. RPGMaker
7. Ren’Py
8. Онлайн сервисы для создания игр
9. Factile
10. ProProfs
11. Gamefroot

Как создать игру, ничего не умея. Часть первая: модели и анимации

Привет, меня зовут Павел, и я разработчик игр. На идею рассказать о разработке игр людьми, которые ничего не умеют, но горят желанием, меня натолкнул мой брат.

— Я придумал игру, создай мне её.
— А почему ты сам её не создашь?
— Я не умею.

И я задумался, а так ли сложно что-то создать с нынешним количеством уроков и тем по созданию игр в интернете?

С чего начать?

Для начала нам нужна идея, что за игру мы будем создавать, благо у меня была идея брата. Рассмотрим её поближе.

1. Это РПГ в средневековом стиле (банально, не правда ли? =) )
2. Она должна быть 3D, а не 2D (тут, кстати, довольно интересно, потому как в основном весь интернет пестрит роликами с 2D играми)
3. Вид камеры от третьго лица
4. Характеристики изменяются сами с повышением уровня, с упором на используемое оружие.
5. Лимит уровней — 30
6. Предметы привязаны к уровню персонажа (персонаж четвертого уровня не сможет использовать предмет пятого уровня)
7. Движок, на котором всё будет работать (в моём случае это Unity: по работе с ним самое большое количество уроков на мой взгляд)

Думаю, что данный план вполне подойдёт для создания шедевра ААА класса =).

Начнём создавать шедевр

В первую очередь регистрируемся на сайте Unity, скачиваем и устанавливаем движок последней версии. Далее перевоплощаемся в человека, который совершенно ничего не знает о движке и о создании игр.

Идём в интернет и спрашиваем «как нам начать использовать Unity?».

Запускаем Unity Hub.

Выбираем NEW и далее 3D проект, пишем название и местоположение проекта.

И открывается сама программа.

И тут, наверное, знатоки начнут кидаться картошкой со словами «Зачем столько воды? Все и так это знают» НО! Материал предназначен в первую очередь для тех, кто ничего не умеет, а не для гуру геймдева =).

Дальше снова идём в интернет либо проходим туториал в самой программе, чтобы научиться основам работы с движком. Для того, чтобы воспользоваться туториалом в программе, нужно в окне Unity Hub нажать на строчку Learn и выбрать любой из проектов. Я советую пройти все уроки и посмотреть несколько роликов по созданию игр.

Как создать модели для игры?

1. Научиться моделированию (сложно, долго, но интересно)
2. Купить готовый пак моделей (быстро и просто, но за деньги)

Я выбрал второй вариант. Отправляемся в AssetStore. Если у вас не активировалась ваша учетная запись, повторно входим в личный кабинет. И начинаем искать подходящие паки. Я нашел то, что нужно, примерно за 3 минуты по поиску knight. В паке, помимо моделей самих персонажей, были модели окружения. Купил за 10 долларов, нажал Import, поставил все галочки, и пропала проблема, неумения моделировать. 1/4 игры готово.

Сцена

Дальше начинается самое нудное. Нужно собрать рабочую зону (scene, сцену, кому как привычнее называть).

Я привык сначала прописывать персонажей, анимацию, и прочую ненужную (очень нужную) ерунду в начале работы, а уже после того как основные механики готовы, я собираю уровень (локацию, игровую зону). Для начала давайте в сцену поставим кусок земли, на которой будет стоять наш персонаж, и начнём работать с анимацией.

Поскольку мы с вами в этом деле новички, снова лезем в интернет и смотрим, как нам поставить поверхность в игровую зону. Выбираем GameObject -> 3D Object -> Cube, после масштабируем его до простой площадки.

Далее добавляем персонажа (рыцаря, демона, ниндзю, тяночку, или кто вам больше по душе). Персонажа берем из папки Prefabs: мы уже знаем (вспоминаем, чему нас научили во вкладке Learn), что туда сохраняют полностью готовые объекты, персонажей и так далее.

И вот он, наш герой, который будет покорять всех и вся.

Анимация

Помните в рейде «Цитадель Ночи» в World of Warcraft был босс Алуриэль? Когда она произносила заклинания, то кричала «Аннигиляция, репликация, детонация, АНИМАЦИЯ. ». Нам необходимо с криком «Анимация!» наброситься на интернет и понять, как её сделать.

Изучаю кучу материала по созданию анимации, и…, либо я дурак, либо лыжи забыл. Реально перелопатил полтора часа материала, но так ничего более-менее подходящего не нашел. Поэтому я решил объединить несколько уроков в один и собрать простой способ анимации.

1. Идём на сайт www.mixamo.com
2. Регистрируемся
3. Получаем огромное количество анимации на все случаи жизни

Что нужно в первую очередь? По мне — так научиться ходить и бегать. Возьмём анимацию ходьбы и бега.

• В поисковике анимации набираем walking, выбираем понравившуюся анимацию, и ставим галочку In Place
• Далее нам нужно подгрузить FBX модель от купленного пака для того, чтобы анимация не баговала (иногда такой модели может не быть в паке, но сейчас 99% разработчиков дают модель при покупке любого пака бесплатно либо она может лежать на официальном сайте). Тыкаем на upload character и загружаем модель FBX со смешным названием Mixamo_Guy_Naked.fbx.
• Видим, что наш FBX заменил стандартную модель миксамо, и при желании можно кастомизировать анимацию, но этого делать мы, конечно же, не будем. Меня всё устраивает. Я жмякаю кнопку Download, выбираю Frames per Second 60 — анимация ходьбы готова.
• Проделываем туже процедуру с анимацией бега (и другими, в зависимости от того, сколько вы их хотите добавить в данный момент)

Теперь создаём папку Animation в Unity и добавляем туда нашу анимацию. Начинаем настройку.

• Выбираем анимацию, в inspector переходим на вкладку Rig, в строке Animation Type выбираем Humanoid и тыкаем Apply.
• 
• Заходим во вкладку Configure, если выползет окно, нажимаем save. В первую очередь нажимаем на вкладку Head, и в строке Jaw вместо Eyebrows ставим none (на вопрос «Почему?» скажу, что у нас просто нет бровей). Далее выбираем Left Hand и в строку Little Proximal, Little Intermediate, Little Distal ставим none, далее Middle Proximal — Finger_01, Middle Intermediate — Finger_02, Middle Distal — Finger_03. Мы делаем это, потому что у нашей FBX модели есть только указательный палец, а остальные три идут как один.
• 
• Проделываем всё то же самое с Right Hand, пальцы там будут иметь названия Finger_011, Finger_021, Finger_031, Apply, Done.
• Повторяем всё выше написанное с каждой новой анимацией.
• В Inspector анимации переходим во вкладку Animation. В строке Clips выбираем mixamo.com, меняем название над Source Take на Walking, выставляем галочки напротив Loop Time, Bake into Pose(Y,XZ), Apply. С анимацией Running проделываем то же самое, НО! Не забываем поменять название на Running.
• 
• Создаём Animator Controller, тыкаем правой кнопкой, в диалоговом окне выбираем Create -> Animator Controller
• 
• Заходим в Animator Controller, тыкаем правой кнопкой Create State -> Empty, выбираем появившийся бочонок New State, Смотрим в inspector и в строке Motion выбираем анимацию ходьбы walking, добавляем второй бочонок и в нём выбираем анимацию Running. И тут я понимаю, что у меня нет анимации бездействия (стоять на месте), быстро бегу в миксамо, выбираю анимацию бездействия Idle и добавляю её в проект =)
• Сейчас необходимо правильно объединить анимацию. Бочонок Idle должен быть первым, чтобы персонаж без действий проигрывал анимацию Idle. Тыкнем по бочонку правой кнопкой и выберем Set as Layer Default State. Как видим, он теперь стал желтый и идёт сразу после Entry. Теперь подключаем анимацию Walking и Running, используем Make Transition и протягиваем стрелочки от бочонков друг к другу.
• 
• И лайфхак: чтобы не было задержек между переходами анимации, заходим в настройки транзисторов (белых стрелочек) и убираем галочки Has Exit Time, жмякаем на Setting и выставляем Transition Duration(s), Transition Offset на 0.
• Смотрим в параметры Animator — туда где написано List is Empty, нажимаем на плюсик, добавляем Bool и переименовываем его в Idle, создаем второй Bool и называем его Running.
• Выбираем транзистор, который идёт от Idle к Running, справа в строке Conditions нажимаем плюс и добавляем Idle = false, на обратном транзисторе Idle = true. С транзисторами Idle — Walking проделываем ту же процедуру. С транзисторами Running — Walking проделываем аналогичную процедуру, но в этот раз используем параметр Running.
• 

Вот мы и победили нашу анимацию! УРА! Теперь нам нужно подключить её к нашему персонажу. Вперед, к финишной прямой!

Выбираем персонажа, inspector, окно Animator, и в строке Controller нажимаем на кругляшок. Появится выбор, где мы и увидим нашу Animation, выбираем её и нажимаем на кнопку Play в Unity. Если вы всё сделали правильно, то сейчас должны наблюдать как ваш персонаж стоит, и у него проигрывается анимация Idle. То есть, он стоит и немного покачивается.

С анимацией разобрались, пора включать снова человека, который ничего не умеет =)

Скрипт W A S D

Анимация у нас есть, теперь нужно заставить нашего персонажа двигаться. Покопавшись в интернете, я узнал, что можно просто добавить компонент Character Controller. Так и сделаем — тыкнем Add Component, в поиск вбиваем Character Controller и добавляем его, в строке Center выставляем Y=1 (нужно, чтобы «яйцо» покрывало всего персонажа. Если у вас получилось меньше или больше, то просто настройте его вручную).

И снова прочесав гигантской расческой интернет, я всё же нашел скрипт, который у меня заработал. Значит, пора его добавить в Unity. Жмякаем правой кнопкой, Create -> C# Script. Назовём его Move. Добавим туда такой код:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Move: MonoBehaviour
<

public float speed = 3.0F;
public float rotateSpeed = 3.0F;
void Update()
<
float horizontal = Input.GetAxis(«Horizontal»);
float vertical = Input.GetAxis(«Vertical»);

CharacterController controller = GetComponent ();
transform.Rotate(0, horizontal * rotateSpeed, 0);
Vector3 forward = transform.TransformDirection(Vector3.forward);
float curSpeed = speed * vertical;
controller.SimpleMove(forward * curSpeed);

Тут я немного поясню скрипт.

Верхние четыре строчки — это подключение библиотек, public class — название скрипта. Если у Вас скрипт называется Moving или что-то в этом роде, то поменяйте название. Учтите, к регистру скрипт тоже придирчив.

public float speed = 3.0F; public float rotateSpeed = 3.0F; — это скорость персонажа, настраивается по желанию. Далее идёт подключение управления Character Controller и, соответственно, анимации.

Перетаскиваем скрипт в Inspector персонажа и проверяем. It’s ALIVE.

Но есть нюанс: поворачивается наш персонаж слишком быстро и не подключена анимация бега. Скорость поворота лечится просто — выставляем в строке Rotate Speed 0.5, и наш персонаж больше не использует чит-крутилку из CS GO. Теперь сделаем, чтобы наш персонаж все-таки побежал. Снова интернет, хотя, по мне, тут можно и логически додумать, как всё провернуть, но всё же я нашел строчку кода, чтобы всё заработало. Добавляем в наш код такую строчку

Если у Вас возникли вопросы, что такое Fire3, то ответ прост: это LShift, а проверить это можно, зайдя File->Build Setting->Player Setting->Input Manager. Эту информацию также не составило труда найти в интернете.

После проверки наш персонаж при нажатии клавиши LShift сменил свою анимацию на бег, но при этом его скорость никак не изменилась. Снова уже по протоптанной дорожке идём сами знаете куда, и я снова нашел строчку кода, которая мне подошла и оказалась полностью рабочей.

В итоге весь скрипт у нас получился такого вида

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Move: MonoBehaviour
<

public float speed = 3.0F;
public float rotateSpeed = 3.0F;
void Update()
<
float horizontal = Input.GetAxis(«Horizontal»);
float vertical = Input.GetAxis(«Vertical»);

CharacterController controller = GetComponent ();
transform.Rotate(0, horizontal * rotateSpeed, 0);
Vector3 forward = transform.TransformDirection(Vector3.forward);
float curSpeed = speed * vertical;
controller.SimpleMove(forward * curSpeed);

if (Input.GetKey(KeyCode.LeftShift))
<
speed = 6.0f;
>
else
<
speed = 3.0f;
>

Всё проверили, всё работает, осталось только прикрепить камеру к персонажу. Без заморочек просто перетаскиваем Main Camera в нашего персонажа, далее её настраиваем как нам удобно, проверяем и празднуем ПОБЕДУ!

Заключение

Думаю, что на этом можно этот пост закончить, но впереди еще много работы: создание локации, проработка боя, квесты, предметы, музыка, и еще бесконечное количество вещей, которые можно сделать. Я пока не решил, буду ли в следующей статье строить город или же займусь боевой системой — всё будет зависеть от настроения.

Я считаю, что не имея никаких знаний и денег, а только немного терпения, можно самому создать свою игру. Если вас смущает покупка пака из Asset Store, то всегда можно найти бесплатные паки. Я порылся в интернете и нашел как минимум 6 ресурсов, которые их предоставляют. Советую помимо интернета начать изучение какого-либо направления гейм дева.

Все описанное в этой статье было собрано без специальных знаний с помощью интернета.

2. Сборки/параметры проекта

Как сказано выше, для сборки проекта мы используем менеджер модулей Webpack. Давайте взглянем на нашу конфигурацию Webpack:

webpack.common.js:

Самыми важными здесь являются следующие строки:

• src/client/index.js — это входная точка клиента Javascript (JS). Webpack будет начинать отсюда и станет рекурсивно искать другие импортированные файлы.
• Выходной JS нашей сборки Webpack будет располагаться в каталоге dist/ . Я буду называть этот файл нашим пакетом JS.
• Мы используем Babel, и в частности конфигурацию @babel/preset-env для транспиляции (transpiling) нашего кода JS для старых браузеров.
• Мы используем плагин для извлечения всех CSS, на которые ссылаются файлы JS, и для объединения их в одном месте. Я буду называть его нашим пакетом CSS.

Вы могли заметить странные имена файлов пакетов ‘[name].[contenthash].ext’ . В них содержатся подстановки имён файлов Webpack: [name] будет заменён на имя входной точки (в нашем случае это game ), а [contenthash] будет заменён на хеш содержимого файла. Мы делаем это, чтобы оптимизировать проект для хеширования — можно приказать браузерам бесконечно кешировать наши пакеты JS, потому что если пакет изменяется, то меняется и его имя файла (изменяется contenthash ). Готовым результатом будет имя файла вида game.dbeee76e91a97d0c7207.js .

Файл webpack.common.js — это базовый файл конфигурации, который мы импортируем в конфигурации разработки и готового проекта. Вот, например, конфигурация разработки:

webpack.dev.js

Для эффективности мы используем в процессе разработки webpack.dev.js , и переключается на webpack.prod.js , чтобы оптимизировать размеры пакетов при развёртывании в продакшен.

Локальная настройка

Рекомендую устанавливать проект на локальной машине, чтобы вы могли следовать за этапами, перечисленными в этом посте. Настройка проста: во-первых, в системе должны быть установлены Node и NPM. Далее нужно выполнить

и вы готовы к работе! Для запуска сервера разработки достаточно выполнить

и зайти в веб-браузере на localhost:3000. Сервер разработки будет автоматически пересобирать заново пакеты JS и CSS в процессе изменения кода — просто обновите страницу, чтобы увидеть все изменения!

Разработка браузерной онлайн-игры

Привет, хабровчане. Меня зовут Евгений, по профессии я backend-разработчик и пишу я на языке c# в сегменте enterprise приложений. В этой публикации я хочу рассказать вам о своём опыте в не совсем профильной для меня сфере — разработке видеоигр, а конкретнее — о разработке браузерной онлайн-игры.

Я привык относить себя к тем везучим людям, у которых хобби совпадает с работой — я люблю разработку ПО. Поэтому для меня абсолютно нормально, вернувшись домой, вновь сесть за компьютер, открыть Visual Studio и продолжить что-то разрабатывать — отдых от этой деятельности мне не нужен. Проблема лишь одна — нужен проект, который мне интересен и который я смог бы осилить один в свободное время — по вечерам и в выходные дни.

Примерно год назад мне показали довольно популярную браузерную онлайн-игру — слитерио. После ознакомления у меня появилась навязчивая идея — мне захотелось сделать что-то похожее по подходу, но с чуть более продвинутым геймплеем. Спустя пару месяцев идея сформировалась в тему этой публикации — игру World of Frogs.

Суть игры — вы управляете лягушкой, можете нападать на других игроков, а также на управляемые компьютером объекты — мух, тараканов, болотных лягушек. Мухи не умеют нападать и умирают с одного удара, тараканы нападают лишь обороняясь, болотные же лягушки нападают как на мух, так и на игроков.

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

Основные пункты, от которых я отталкивался:

1. С клиентской стороны никакого Flash, только html + js;
2. Одна машина должна тянуть как можно больший онлайн игроков;
3. Возможность горизонтального масштабирования;
4. Низкий порог вхождения в игру и быстрый старт;
5. Чуть более разнообразный геймплей, чем в слитерио;
6. Красивый и запоминающийся домен;

Далее, подробней по каждому из пунктов.

1) Клиентский код

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

Изначально взгляд упал на pixi.js — это движок, по которому немало документации, о котором положительно отзываются в плане производительности и вообще всячески хвалят.
Однако углубившись в поиски, я остановился на phaser.js (о нём уже были статьи на хабре) — это более высокоуровневая библиотека, которая позволила мне забыть о многих нюансах и сосредоточиться непосредственно на игровой логике.

Движок позволил без особых проблем прикрутить анимации, бэкграунд текстуру, камеру, границы мира и многое другое. И всё бы хорошо, но когда настало время проверять работу на других компьютерах, с другими операционными системами, выявились следующие проблемы:

1.1 Главная из проблем — фоновая текстура (tilesprite) жутко тормозит на windows 7
Выяснил я это с рабочего компьютера после первого деплоя на хостинг — ФПС был очень и очень низким — в районе 5. И так было во всех браузерах кроме, на удивление, IE — в нём всё работало вполне прилично, пускай и не идеально.

До того, что тормозит бэкграунд я додумался далеко не сразу — первым делом, я, методом тыка выяснил, что игра резко перестаёт тормозить при уменьшении размера окна браузера. Нагуглить по что-то по таким симптомам мне не удалось, поэтому я, профилактики ради, решил внедрить часть практик, которые советуют ребята из Mozilla — в частности, использование Object Pool (переиспользование игровых объектов). Особых успехов такого рода оптимизациями я не достиг, а профилировщик по-прежнему показывал что больше всего ресурсов съедает рендеринг.

Тогда, прибегнув к постепенному отключению отображения различных элементов игры я и выявил виновника — tilesprite.

Погуглив по tilesprite я выяснил, что такая проблема не у меня одного, и причина кроется в том, что canvas перерисовывается полностью при любом изменении — т.е. маленький объект сдвинулся — перерисоываем весь канвас, включая фон, что даёт нам высокий расход на отрисовку.

В попытке решить эту проблему я вынес фон на отдельный канвас с меньшим z-index, чтобы он перерисовывался отдельно, независимо от движущихся объектов — особых результатов это не дало.

В конечном итоге я решил отказаться от phaser.js и работать напрямую с canvas, созданным для отрисовки фона — в результате ФПС вырос примерно до 20.

1.2 Разные версии phaser — разная производительность в разных операционках
После изменения принципа отрисовки фона с производительностью всё стало намного лучше, но 20 ФПС — это всё ещё не желаемые 60 — было над чем поработать. Путём тыканья пальцем в небо было выяснено, что phaser версии 2.4.6 работает быстрее на windows 7, а версии 2.6.2 быстрее на windows 10. На линухе и маке обе версии показали себя одинаково хорошо.

Пришлось добавить условие, которое подключало ту или иную версию библиотеки в зависимости от браузера пользователя — это повысило ФПС на моей рабочей машине до 25-30. Выше поднять ФПС у меня так и не получилось — на этом я решил остановиться, т.к. после опроса друзей/знакомых, у которых стоит семёрка, сложилось впечатление, что проблема редкая, да и уже не такая серьёзная как изначально.

Описанное в этих двух пунктах — это не единственные, но основные и наиболее запомнившиеся проблемы, связанные с phaser.js — всё остальное прошло в общем-то гладко.

Также стоит отметить, что на разных машинах с windows 7 производительность была разной — кое-где и без всех моих телодвижений всё было хорошо, где-то же наблюдались проблемы аналогичные тем, что я наблюдал — какой-либо корреляции я установить не смог

2) Производительность одного инстанса игрового сервера

Здесь начать стоит с того, какая в целом архитектура у приложения, которое служит как игровой сервер. Было решено использовать следующую схему:

Параллельно от разных игроков принимаются сообщения по websocket и закладываются на обработку основному потоку, который обновляет игровую логику. Основной поток работает итерациями по 40мс, в рамках которых обновляет передвижение, видимость, респавн NPC, прогресс использования способностей и т.п.

Запись данных в базу происходит асинхронно — поток обновления игровой логики закладывает сообщения в очередь другому фоновому потоку, который их группирует и пачками пишет в базу.

Сериализация и отправка сообщений игрокам тоже происходит асинхронно — этим занимается очередной фоновый тред, которому сообщения в очередь для обработки пишутся в рамках выполнения итерации, а в конце итерации сообщения группируются для каждого пользователя и пачкой отправляются на клиент.

Если отобразить на схеме, то верхнеуровнево серверная архитектура выглядит так:

Т.к. с бэкендом у меня опыта прилично больше, здесь каких-то особо запомнившихся трудностей не было — неоптимальные места я отлавливал профилировщиком — где-то применял микрооптимизации вычислений, где-то кэширование, где-то оптимизации иного рода.

Самым серьёзным бустом к производительности был отказ от использования SignalR, т.к. он не поддерживает бинарный протокол, а на сериализацию в json уходило вычислительных ресурсов больше, чем на всю остальную логику игрового сервера вместе взятую. Остановился в итоге на использовании Fleck, т.к. он поддерживает бинарный формат, а также позволяет отключить алгоритм Нэйгла.

3) Возможность горизонтального масштабирования

Будучи оптимистом я решил заранее заложиться на то, что игра всем понравится и в неё захочет играть множество людей. В рамках одной машины можно долго заниматься оптимизациями, можно бесконечно апгрейдить железо, можно переписать приложение на чистом си с ассемблерными вставками для микрооптимизаций, но всё равно рано или поздно упрёшься в потолок. Было решено иметь архитектуру, позволяющую иметь множество серверов малой мощности, на каждом из которых потолок по онлайну в районе 200-300 человек.

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

На текущий момент в выборе сервера из пула используются простая логика — берётся сервер с минимальным онлайном. В дальнейшем планируется также добавить логику учёта местоположения клиента и сервера.

4) Низкий порог вхождения в игру и быстрый старт

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

Я хотел обеспечить вход по одному клику мыши с главной страницы, т.е. никакой обязательной регистрации. В том же слитерио используется похожий подход, за одной небольшой разницей — от игрока всё же хотят, чтобы он ввёл ник.

Т.к. онлайн игра как правило предполагает возможность отличать одного игрока от другого, я решил использовать подход никогенерации — при входе в игру берётся случайное прилагательное из заранее заданного списка и комбинируется с случайным существительным, что выдаёт ники вида Неспящий Бугай, Жадный Бурундук, Могучий Валенок и т.п…

В дальнейшем, если игроку понравилась игра, ему предоставляется возможность зарегистрироваться, сохранив за собой прогресс, а также сменив ник на что-то более вменяемое.

Для более быстрого погружения на главную страницу было добавлено обучающее видео, а в саму игру были добавлены тултипы, выплывающие при изучении новых способностей.

5) Чуть более разнообразный геймплей, чем в слитерио

Как бывший поклонник игры WoW, я хотел разнообразить игру, внеся в неё такие элементы как набор опыта, рост по уровням, получение новых способностей по мере роста, PvE, PvP.

Игроку доступно к использованию 6 способностей (1-я доступна сразу, 2-4 становятся доступны по мере роста по уровням, а 5-6 оформлены как одноразовые поверапы — их можно поднять на игровом поле):

1. Удар языком — лягушка выстреливает языком и наносит малый урон первой цели на пути;
2. Прыжок — лягушка прыгает в указанном направлении и в месте приземления наносит высокий урон. Высокий урон способности компенсируется сложностью попадания, а также длительной задержкой между использованиями;
3. Щит — в течение 3-х секунд поглощает 2 следующие вражеские атаки;
4. Плевок — лягушка выплёвывает снаряд, который наносит средние повреждения всем врагам на траектории движения);
5. Лечение — восстанавливает половину жизни;
6. Ускорение — увеличивает скорость передвижения на 100% на 4 секунды;

Для возможности немного выделиться была добавлена возможность выбрать другую модель игрового персонажа.

6) Красивый и запоминающийся домен;

Изначально в планах было разместить игру на домене .io, аналогично слитерио, агарио и многим другим играм такого формата. Банальные frog.io и frogs.io были заняты, а чего-то более подходящего в .io подобрать не удалось. Играясь с доменами, содержащими frog, наткнулся на весьма удачный вариант — frogs.world, на котором сейчас проект и живёт. Довольно-таки непривычный домен первого уровня, но зато легко запоминается.

Спасибо за внимание. Надеюсь, что кому-то мой опыт будет полезен.

GODOT

Игровой движок с открытым исходным кодом для создания 2D-и 3D-игр. Отличается простотой в освоении и подходит для совместной работы целой команды.

Фото: github.com

Для разработки: 2D- и 3D-игр.

Платформы: Windows, macOS и Linux.

Языки программирования: GDScript, C# и визуальный скриптинг.

Стоимость: Бесплатно.

Обучение: У Godot есть обширное пошаговое руководство по использованию их редактора, а также бесплатные текстовые руководства, охватывающие более конкретные аспекты, такие как реализация виртуальной реальности, использование скелетов для 2D-анимации и создание процедурной геометрии.

Основные инструменты Gamefroot

После создания аккаунта вам доступна контрольная панель (Dashboard), где вы можете создать игру с чистого листа или оценить возможности платформы, выбрав Game Kits — готовые игровые наборы, либо Tutorial Games — учебные игры.

Например, выбираем Maia the Brave и попадаем в заготовку лесной бродилки с персонажем-девушкой. Выглядит неплохо, правда?

Возможностей графики хватает для создания приличных бродилок. В левой части экрана имеются различные объекты, которые можем добавлять в игру простым перетаскиванием. Имеются три раздела Media, Code и Levels — отвечающие за объекты, код игры и ее уровни — естественно, можно делать многоуровневую бродилку со сложной логикой и скриптами. Кроме того, имеется маркетплейс — страница, где можно приобретать (Premium) или скачивать бесплатно (Free) разнообразные наборы предметов для игры и тому подобное. Это очень облегчает создание игры. Собственных персонажей можно создавать при помощи кнопки Character Creator, постепенно «собирая» их.

В середине находится игровой экран, а также карта всего «царства» (уровня), масштаб которого можно менять кнопками — и +.

Справа расположено окно, в котором платформа предоставляет возможность работать со слоями (Layers), создавать достаточно сложную логику поведения объектов — это реализовано при нажатии на них правой кнопкой. Для удобства окно Layers можно перетащить в любое место экрана, если оно закрывает какую-то нужную в данный момент часть.

Посмотрим, как работает слой с главным персонажем. Для этого выберем строку «Player», и вокруг девушки возникнет синий прямоугольник. С помощью него ее можно менять в размерах, вращать, перемещать.

Далее мы видим слой Park objects, к которому относятся объекты парка — в данном случае это деревья. Их также можно двигать и модифицировать. Ниже находится слой Collectibles, самый вожделенный для любителей игр. В него можно добавлять те самые предметы, которые требуется собирать: монеты, шоколадки, одним словом, клад (gem). В левой части экрана есть выбор из 6 таких предметов. Они имеют статус pre-scripted asset — то есть предмет, имеющий заданное скриптом заранее поведение.

Следующий слой Non-Player — это другие персонажи, не относящиеся к главному. Здесь это некоторые животные. Их тоже можно перетащить на основной экран и добавить в игру. Например, это Dr. Peck — птичка в стиле Angry Birds, расхаживающая туда-сюда. Выглядит это просто потрясающе, в лучших традициях бродилок. Что особенно приятно, процесс расхаживания птички можно редактировать в редакторе анимации Animation Editor, управляя ей покадрово. Для этого надо нажать на птичку правой кнопкой и выбрать Dr. Peck -> View Animation. А при контакте девушки с птичкой появляется сообщение, либо можно запрограммировать другую логику на ваш вкус. Также есть слои с водоемами (Water), дорожками (Paths) и насаждениями (Hedges). Их можно включать или отключать, по аналогии с Adobe Photoshop.

Слой Background отвечает за фон игры. Также важным моментом является добавление нового слоя. Это можно сделать, нажав плюсик справа от надписи Layers. На выбор будет два варианта: New Layer (добавление нового слоя) и New Tile Map (добавление сетки для выравнивания элементов). Последнее требуется для того, чтобы расположить элементы ровно по сетке.

Проверить, как работает игра в режиме предпросмотра можно, нажав кнопку Play. Разрешение игры меняется в разделе Game Settings. По умолчанию это 960×540. А общий размер игрового мира находится в разделе Levels, по умолчанию это 2800×2880, довольно масштабная бродилочка.

В разделе Scripts можно создавать обработчики событий по нажатию на клавишу и все в таком роде — полное управление событиями в игре. Слева цветами выделены разные категории — можно управлять звуком, физикой, анимацией, событиями, переменными и так далее. То есть назначать те или иные действия при запуске игры, достижении уровня и так далее. Например, задавать кнопки управления, скорость бега. Возможностей очень много, можно импортировать и экспортировать скрипты. Этот раздел наиболее сложный для освоения, но с помощью обучающих примеров можно разобраться. Для начала можно попрактиковаться на готовых примерах, в которых уже встроены скрипты.

Платформа имеет свое сообщество и учебные руководства. Правда, интерфейс пока на английском языке и русскоязычный не предусмотрен. Gamefroot позволяет сохранять и публиковать проекты онлайн, в PRO-версии возможно скачать все файлы игры.

С помощью Gamefroot можно встроить игру на собственный сайт, предоставляется embed-код. Получится вот такая игра (на третьем слайде нажмите Play):

Читайте также

Вёрстка страницы с игрой

Для начала нужно создать страницу, на которой будет отображаться холст. Для этого потребуется совсем немного HTML:

Теперь нужно добавить стили:

Обратите внимание, что в HTML элементу canvas были заданы нулевые ширина и высота, в то время как в CSS указано 100%. В этом плане холст ведёт себя как изображение. У него есть фактическое и видимое разрешение.

С помощью стилей меняется видимое разрешение. Однако при этом размеры картинки останутся прежними: она просто растянется или сожмётся. Поэтому фактические ширина и высота будут указаны позже — через скрипт.

Варианты общего хостинга

Все перечисленные здесь опции также являются управляемым хостингом. Вам не нужно будет слишком беспокоиться о настройке, так как она должна быть относительно простой.

Gameservers.com: Очень дешевые серверы для небольших проектов, так как вы платите за необходимое количество игровых слотов. Достойная панель управления, но без защиты DDOS.
Friendhosting.net: Преимущества выделенного сервера и гибкости настроек виртуального хостинга по доступной цене, а также на сёрче хорошие отзывы о Friendhosting.net.
Low.ms: компромисс между выделенным и общим сервером, но в то же время обеспечивающий хорошую панель управления для большинства игр. Вы будете знать, какие спецификации вы получаете, но вам придется доплатить за выделенную ветку. Они также добавляют брендинг в заголовок вашего сервера.
Nodecraft: поставщик общего хостинга, который не взимает плату за слот. Они имеют разные уровни, сегментированные по ОЗУ и количеству экземпляров, которые вы можете запустить. Фактически, вы можете разместить несколько серверов на одном уровне, если позволяет оперативная память.

Создание игры с помощью Construct 2

Применение Construct 2 подразумевает назначение ряда переменных. Но это осуществляется через «Меню», без использования фактического кодирования. Перед началом работы следует нажать «New Project». Программа уже имеет несколько включенных вариантов игровых шаблонов.

Используя функцию «Properties», можно настроить размер экрана и добавить информацию об авторе. С помощью вкладки «Tiled background» задают тот или иной фон игры. Готовый фон фиксируют кнопкой «Padlock». Для создания дополнительных слоев используют «Layers».

Для добавления объектов в игру нужно дважды щелкнуть на макет и выбрать функцию «Sprite». Редактор изображения позволит загрузить существующий объект или создать новый. Чтобы изменить поведение и свойства объекта, достаточно щелкнуть по нему и выбрать «Добавить / Изменить» в разделе «Поведение». Здесь же задают объекту те или иные функции, в зависимости от выбранной клавиши клавиатуры. Возможные события, которые будут происходить с объектом, добавляются с помощью «System».

В Construct 2 необходимо создавать переменные. Это могут быть глобальные переменные (приписанные всей игре) или переменные отдельного объекта. Для установки глобальной переменной используют лист событий, для переменных экземпляра — раздел «Properties».

Интерфейс игры лучше делать на новом слое, защищенном от прокрутки. При создании используют текстовые поля, в которых отражаются данные игры (например, о здоровье герое, об оставшихся боеприпасах).

После того, как первые объекты и события игры будут готовы, можно переходить к тестированию. При обнаружении каких-либо недочетов и недоработок, возвращаются к редактированию. Чтобы полностью готовый вариант игры переместить в сеть, в меню «Файл» выбирают функцию «Экспортировать». Размещать игру следует на сайтах, позволяющих загрузку игр HTML5.