Самый простой способ создания игры (но это не точно)

Привет, Хабр! Сегодня у нас заключительная статья из серии по разработке игры с программированием без написания кода. Кстати, все это на базе платформы Clickteam Fusion 2.5. Рассмотрим реальный проект по созданию платформера и расскажем о публикации в Microsoft Store. Заглядывайте под кат!

qqdr8e1hqw_-irywx_r8nk-ji7w.jpeg


Передаю слово автору.

Продолжаем разработку


11. Теперь можно начинать заниматься самой «вкусной» частью разработки — самой игрой. Перейдем на фрейм с первым уровнем игры и увеличим ширину нашего фрейма через Properties до 5000

9k9tj3vdcdz7t_iywbkyrrti5kg.png

eryyyblogp1ar35guzrst15rqge.png

12. Добавим на нашу сцену платформы, по которым будет передвигаться персонаж. Для этого нам вновь понадобится объект Active

7pj3awfa9hrijpv1dqae8pxafbm.png

Принцип не меняется — рисуем спрайт (ы) и загружаем в актив (ы) (в зависимости от того, как вы их используете. Главное помните — для оптимизации нужно использовать объекты рационально)

j7ooyna5tqp4s2eaxjm5zzzy7jy.png

13. Пора добавлять персонажа! На этот же слой добавляем еще один активный объект, после чего выделяем его и переходим к окну Properties (вкладка Movement)

nnawm_znru94f5l3uy8wlshwkgc.png

И в пункте Type выбираем Platform

yakrtohgb56jjjaxbom8wvhq5vu.png

После чего идем в Event Editor

ea8-xm5imugvcqo4lzdcz1rknmm.png

И создаем событие, которое говорит: «Если происходит столкновение персонажа с дорогой, то он останавливается».

Для этого нажимаем New condition — выбираем нашего персонажа — ПКМ — Collisions — Another object

ht6joxsyjzzk_kpwjpxbsueveve.png

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

zuibo8m7rn00grgl-hx1sbrsrsc.png

И в колонке нашего персонажа (не спутать с дорогой) нажимаем ПКМ — Movement — Stop

smpmitrcfyzhmpfz_gnwy0n1eas.png

Что нам это дало? Персонаж не будет проваливаться «под землю» и сможет спокойно передвигаться по данному объекту

Для наглядности


Вариант с только что созданным событием:

mxhbfik-x7kimzgmhwhssi7kom8.gif

Вариант без этого события:

2emydf-difhutfsegtitn6tx1p0.gif

Теперь можно заняться анимацией персонажа. В представленном случае, в роли персонажа выступит существо похожее на мяч (я ж художник… это ж фича…). Для этого перейдем в окно редактирования объекта

5tbio-5fnhbcj-lzqgluaiq0qle.png

Обратите внимание — теперь мы будем работать с нижней частью этого окна, поскольку именно в ней расположены параметры для создания анимации. Как можно заметить на иллюстрации ниже, у нас есть 4 основных окна — Animations, окно со стрелкой, Direction Options и Frames

ixprjou7brzfrwwkmmuu1_fch5q.png

Разберем их кратко


Animations — отвечает за анимацию при выполнении определенного условия (т.е. как будет выглядеть анимация, когда объект стоит, идет, бежит, прыгает и т.д.).

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

Direction Options — отвечает за скорость воспроизведения и повтор анимации.

Frames — кадры нашей анимации.

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

j6zfoazpc0_sh_9sxji8miqa5xy.png

После загрузки кадров переходим в Direction Options и настраиваем скорость воспроизведения и повтор анимации. Тут уже сугубо индивидуально. Чтобы проверить, как будет выглядеть анимация — нажмите Play.

Дальше переключаемся на противоположную сторону (клик по левому квадратику) и переносим все свои кадры, попутно их разворачивая через Flip horizontally

bxznzpmsdgffqv8qu7jm2jlu3sa.png

Отлично. Теперь можно проверять

9b-vr_aelcu4u8qufyo1wtgcxhk.png

z7yensgtnolx9c8hl-o_qogsrsw.gif

Заметили, что анимация проигрывается, когда персонаж движется (и это при том, что у нас кадры выставлялись в пункте Stopped)? Чтобы такого не было, перейдем в пункт Walking и разместим в нем кадры анимации передвижения.

Результат:

uxlbsumv393xaiximw3tqzyusoo.gif

При желании можно еще поиграть с анимацией. Настроить анимацию при прыжке, падении и т.д.

Продолжая настраивать персонажа, предлагаю сделать ему нормальный прыжок. Для этого снова выделяем объект персонажа и переходим в Properties (вкладка Movement), выставляя Gravity на 35

yluqkxebdolecw-hjip7du1be1s.png

Результат:

85qzy9lmtx6qsq43omxmzmbi6yi.gif

И теперь ограничим передвижение персонажа краями фрейма, чтобы он не улетал за пределы сцены:

c6x9f9rp3d393gctnvl4_nchafg.png

xwzayzn4a0gj3qeyrfoxafs8mfa.png

9ry77dljabsad17eduladp9jrnm.png

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

6ikzozkzec5anfmjgtnpvmrxtae.png

d96y4f59gtgxksmnubomk9hstae.png

После этого откроется окно «Center window position in frame», и нужно будет выделить нашего персонажа. Жмем «ОК».

ijnumadcdigddosdpxmnlywy6es.png

14. С персонажем закончили. Теперь создадим условие победы. Например: если игрок доходит до финиша, то его кидает на фрейм с надписью «You win!».

Для этого предварительно создадим фрейм «Win» и на фрейме с уровнем еще один активный объект (разместим в конце сцены) и стилизуем его. Он будет служить триггером, который будет перекидывать на победный фрейм. Стилизовать можно на ваше усмотрение. Т.к. у меня белый фон, то я просто перекрасил объект в белый цвет и растянул

wcgcmiedrx9fmhedv6d1uonfjxi.png

И создадим событие, при котором будет происходить смена фрейма.

mnlr3qb2cynpionrjsjkmwifipy.png

rcrvwbualtibvcl344xa8eohgb4.png

iwzprq5ilguxmts7ogi-gktzafg.png

На самом же фрейме («Win») разместим большую надпись «You win!» и добавим событие перехода в меню по нажатию Esc.

15. Продолжаем дорабатывать наш первый уровень. Добавим разнообразия. Движущиеся платформы. И вновь нам нужен активный объект, а также спрайт для самой платформы.

После их добавления переходим в Properties (вкладка Movement) и в пункте Type выбираем Path

_pjd6lfx2g5dnwklu1slbzxiynu.png

Нажимаем Edit и настраиваем путь платформы

0taniqukh_-zed-9pwf4qg9yalg.png

Результат:

grcnxjbropluqap5m13vo60ix6k.gif

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

wwqg-0ddnzvxcnc9h27rzt2kgu8.gif

16. В завершение создания игры сделаем игру полноэкранной. Для этого перейдем в редактор событий первого фрейма и создадим событие, которое будет это выполнять

axm_o5_olf74zd2klrxmmla_fh0.png

coyj0g31mez99hkpjtaz_t-2ufm.png

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

Сборка и публикация для Microsoft Store


1. Первым делом на данном этапе необходимо выставить свойства проекта. Для этого нужно перейти к окну Properties самого приложения (не отдельного фрейма) и при необходимости заполнить его — иконки и т.д. Особо расписывать окно свойств смысла нет — там все предельно понятно.

По завершению можно переходить к сборке проекта. File — Build — Application.

arqiixpllvw99jhydw626trlrha.png

Появляется окно, в котором надо указать (если вы не указали этого ранее) имя и путь проекта

qctszfborndq6i1gvorhrbdzpik.png

Нажимаем «ОК» и идем в нашу папку

x5bbgt3v0-mmkone3tmrvowzzmg.png

Внутри будет что-то вроде этого:

0jrp1c3gjvvur85evf29m6avpgo.png

Нас интересует файл с расширением .sln (также известный как Microsoft Visual Studio Solution). Открываем его в Visual Studio.

В обозревателе решений первым делом находим файл манифеста и заполняем его (ЛКМ на название файла)

coco-n85xuv-_o7gvczd3kmgmwi.png

После чего воспроизводим следующий порядок действий: ПКМ на (в моем случае) Ball (Universal Windows) → Магазин → Создать пакеты приложения:

imvwomwgreqegks-o3tift7_o-c.png

После чего должно появиться следующее окно:

tuqjn4k29dl5mtdaacm6xbkslds.png

В нем нужно оставить все как есть (т.е. нажать на «Да») и перейти дальше, нажав «Далее».

После этого будет предложено выбрать или зарезервировать имя приложения. Если оно у вас уже зарезервировано, то выберите его и нажмите «Далее», если же нет, то просто введите название в соответствующее окно и нажмите «Зарезервировать»:

xbaks_oubz9a3oputcdzkx42nfk.png

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

Дальше предложен выбор настроек. Сборка может занять некоторое время, так что не волнуемся и ждем. По дефолту будет стоять архитектура Neutral. Меняем ее на x86, x64 и ARM.

7ctgtjhabdjfjot_bvvsko6pzmm.png

Обратите внимание — конфигурация стоит Release, а не Master. Я этот момент отмечаю отдельно, чтобы не было путаницы при сравнении с моей прошлой статьей, где рассматривался способ публикации в Microsoft Store игр сделанных на Unity, поскольку в случае Unity ставится Master.

Дальше нужно сделать выбор. Либо запустить набор сертификации и узнать, пройдет ли игра в Microsoft Store. Либо попробовать отправить ее сразу в Microsoft Store. Но выбор здесь относительный, поскольку если игра не может пройти сертификацию, то и к публикации ее не допустят. Разница лишь во времени. Можно либо потратить несколько минут на сертификацию, либо до трёх дней (столько занимает процесс публикации продукта со всеми проверками).

rr_kttzzjff2xjbgpjbgxddmyus.png

Запустив набор сертификации, спустя пару секунд появится следующее окно:

y8lzld1dxkdzonacmpvbbyz-hq0.png

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

jmtu7kgluursnvc-2hpuyyqbzjo.png

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

t08ou8izjxrs5i4k7j-8jl_ojj4.png

2. По завершению проверки набором сертификации следует перейти к файлу APPXUPLOAD.

hft6jszibqnyoahgi7upt9vvtnc.png

Дальнейшие шаги уже описывались в этой статье. За полной информацией по публикации в Microsoft Store обращайтесь к ней.

Об авторе


mohxycyvyyjsatckb_c_gvs0vo4.pngЛев Буланов — студент Чайковского индустриального колледжа и Удмуртского государственного университета, Microsoft Student Partner, C#-разработчик, CF2.5-разработчик, Unity-разработчик, оператор ЭВМ (5 разряд). Основная сфера интересов — разработка мини-игр, утилит и MR-проектов.

© Habrahabr.ru