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

Почему Колобок

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

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

В-третьих, сама сказка довольно короткая, поэтому создание игры на её основе не должен занять более года?

Как я готоволю Колобка

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

Т.к. всё, что видно на экране, является спрайтом (изображением), то желаемый элемент игры я:

• сначала рисую на обычном листе бумаги
• фотографирую нарисованные каракули на телефон
• обрезаю изображение в GIMP
• сохраняю изображение в PNG
• создаю в GDevelop новый спрайт на основе изображения PNG

Самым сложным элементом на текущий момент являлся кот, т.к. мне нужно было несколько состояний кота:

• сидит без эмоций;
• сидит недовольный;
• спрыгивает с подоконника;
• лижет пролитое молоко.

Пришлось пошерстить интернет в поисках хороших примеров, и после нескольких попыток такой пример был найден. Творческий поиск на бумаге выглядел примерно так:

Ближе к делу

Основная идея текущей сцены в том, чтобы колобок через окно смог удрать из избы.

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

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

Если у вас зачесались руки, то добро пожаловать в уютную группу Discord.

Если зачесались не сильно, то жду предложений в комментариях хабра :)

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

Рассказываю, что произошло с проектом за прошедшие две недели.

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

К счастью, нормальных людей всё-таки значительно больше и они предлагают дельные мысли по доработке игры. Например, вот лишь несколько идей из комментариев и личной переписки:

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

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

Не все предложения я могу воплотить в жизнь быстро, т.к. на проект мне удаётся в среднем уделять лишь около 7 часов в неделю. Тем не менее, идеи и предложения мне жизненно необходимы, поэтому прошу продолжать делиться ими в комментариях, личной переписке и уютной группе Discord.

Продолжение следует...

PS: Список публикаций на текущий момент:

• 1. Приглашаю к созданию русской народной игры Колобок
• 2. О ходе создания русской народной игры Колобок в феврале

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

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

Для создания анимаций разработчики GDevelop рекомендуют использовать Spriter.
Сам принцип создания анимации следующий:

• создать элементы-картинки, например, кончик хвоста, промежуточные части и его основание;
• каждому элементу сопоставить так называемую кость;
• кости привязать друг к другу, чтобы движение родительских влияло на дочерних;
• потратить много времени на несколько ключевых кадров, чтобы разместить эти кости в необходимых позициях в нужные моменты времени;
• сохранить созданную анимацию в виде набора картинок, последовательная смена которых визуально воспроизводит анимацию;
• добавить этот набор картинок в GDevelop.

Примерно так выглядит хвост бурёнки сейчас в Spriter:

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

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

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

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

Продолжение следует...

PS: Список публикаций на текущий момент:

• 1. Приглашаю к созданию русской народной игры Колобок
• 2. О ходе создания русской народной игры Колобок в феврале
• 3. О промежуточных мартовских итогах создания русской народной игры Колобок

На апрель выпал переезд с GDevelop на Phaser, к которому пришлось прибегнуть после опроса в предыдущей мартовской статье, где мы определили приоритеты реализации возможностей, которые стоит добавить в игру:

• 38.5%: дополнительный способ выбраться как из дома, так и со двора;
• 26.9%: враги в виде бабульки (дома) и козы-дерезы (во вдоре), которые как-либо мешают управлению колобком;
• 26.9%: диалоги колобка с живыми существами котом и коровой;
• 7.7%: сбор звёздочек в труднодоступных местах с последующим неким вознаграждением тех, кто собрал все.

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

Первым делом я начал реализацию маршрута в подпол:

Затем я решил ввести врагов в виде пауков, которых подглядел в Dizzy (спасибо prilichny за рекомендацию). Столкновение с пауками должно отключать платформы лишь для колобка, чтобы он не смог взбираться вверх. Но платформы должны продолжать действовать для других персонажей, например, кота, чтобы он не свалился просто так с печки. К сожалению, сделать отключение платформ для части персонажей в Gdevelop оказалось нельзя.

К этому моменту я несколько устал от визуального программирования в Gdevelop, позиционирующего себя как инструмент, не требующий программирования. Поэтому решил проверить, осилит ли задачу с платформами Phaser (спасибо kaisd за рекомендацию). Phaser осилил.

Невозможность реализовать нужную функциональность и желание программировать по-человечески, т.е. используя привычные переменные, массивы, циклы, подтолкнули меня к переходу с Gdevelop на Phaser. Переход оказался не так быстр, как это представлялось, ведь API новый и ещё малоизученный мной. Тем не менее, на текущий момент удалось реализовать врагов в виде пауков и мышей, которые отключают платформы и уменьшают прыгучесть колобка, что хорошо видно в первом видео.

Проверить текущую версию "Колобка" на своих компьютерах, планшетах и мобилках можно по этой ссылке. Отзывы, комментарии и замечания приветствуются. Самых смелых приглашаю в уютную группу Discord.

P.S.: Список публикаций на текущий момент:

• 1. Приглашаю к созданию русской народной игры Колобок
• 2. О ходе создания русской народной игры Колобок в феврале
• 3. О промежуточных мартовских итогах создания русской народной игры Колобок
• 4. О ходе создания игры Колобок в апреле

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

Итак, краткая история создания "Колобка" на текущий момент выглядит следующим образом:

• 13.02
  
  • начало разработки на GDevelop
• 21.02
  
  • есть печка, стол, окно, кот, банка молока
  • прыжок по банке молока опрокидывает её на пол и разливает
  • на разлитую лужу молока телепортируется кот, до этого сидевший на подоконнике
• 19.03
  
  • есть заставка
  • появились лук, стрела, крышка подпола
  • банку молока теперь можно разлить на печке
  • подпол пуст, но в него можно провалиться
  • окно можно разбить одной стрелой
  • через разбитое окно пройти во двор
  • во дворе есть пугало, лестница, бурёнка с анимированным хвостом
  • лук нужно использовать для того, чтобы добраться до лестницы на крыше
  • при прыжке по лестнице она падает на пугало
• 26.04
  
  • переезд с GDevelop на Phaser
  • появление врагов в виде мышей и пауков
  • столкновение с врагом приводит к падению с печки и прочих платформ, а также уменьшает прыгучесть на несколько секунд
• 30.05
  
  • восстановление стрел и повреждения окна
  • теперь стрелу вместо появления из ниоткуда нужно доставать из кучи стрел на столе
  • самовар тоже теперь можно двигать
  • крышку в подпол снова можно открыть
  • в подпол нужно скинуть самовар, чтобы забраться там на высокую полку

В прошлой статье я описал проблемы, побудившие меня отказаться от GDevelop.
После двух месяцев работы с Phaser пора описать проблемы и этого инструмента:

• отсутствие редактора сцены, как следствие очень долгая расстановка элементов сцены
• куцая аркадная физика, как следствие необходимость допиливать, например, возможность таскать предметы
• слишком сложно для обучения ребят ввиду того, что это лишь API без редактора

Т.к. ни GDevelop, ни Phaser меня не устроили, последующую разработку "Колобка" я решил вести на собственном инструменте, который предстоит сделать в сжатые сроки. Пока лишь ясно, что инструмент будет на основе физической библиотеки Matter.js и стандартных HTML/CSS.

Потрогать последнюю версию "Колобка" на Phaser можно по этой ссылке. Отзывы, комментарии и замечания по-прежнему приветствуются.

P.S.: Список публикаций на текущий момент:

• 1. Приглашаю к созданию русской народной игры Колобок
• 2. О ходе создания русской народной игры Колобок в феврале
• 3. О промежуточных мартовских итогах создания русской народной игры Колобок
• 4. О ходе создания игры Колобок в апреле
• 5. О ходе создания игры Колобок в мае