Как сделать игру дудл джамп
Создание игры Doodle Jump для Android в Intel XDK за 2 часа на JavaScript с нуля
Непривычно для меня писать статьи спустя такое долгое время, так как я привык к записи материала на видео, где можно свободно что-либо рассказывать. И так уж получилось, что решил написать статью об Intel XDK, но не просто обзор возможностей, а разобрать среду на примере вполне конкретного проекта. Проектом таким для меня стал «клон» игры «Doodle Jump».
Часть 1. Подготовка проекта
Разработку я буду вести на JavaScript с использованием движка PointJS (если что, в гугле находится за минуту).
Самое начало создать новый пустой проект. Тут в принципе все достаточно просто:
2. 1. Внизу находим кнопку «Start a new project», и затем во вкладке «Templates» выбираем «Standart HTML5», и жмем «Create».
2. Теперь хитрым щелчком перейдем в настройки проекта (да-да, жать по этой синей папке):
3. Дальше в целом все логически понятно:
Поясню некоторые пункты:
App ID — это уникальный идентификатор вашего приложения, или же Company Domain
Whitelist — разрешенные запросы, которые приложению будет разрешено совершать
Developer Certificate — сертификат приложения. Если он отсутствует, создайте с помощью этого выпадающего меню:
Заполните достоверными данными, во избежание дальнейших проблем.
После заполнения сертификата его можно будет выбрать в качестве сертификата приложения.
Crosswalk Runtime — Определяет, будет ли Cordova интегрирована в ваше приложения (Embedded), или нет (Shared)
4. Заполните иконки:
Помните, что размеры и формат должны строго соответствовать требованием среды.
По поводу Splash Screen, это экраны загрузки вашего приложения, которые отображаются пользователю, пока ваше приложение грудится. Как правило это занимает обычно чуть менее 2-х секунд, но за это время вы можете показать, например, логотип чего-нибудь или вставить рекламу.
Так как игру мы делаем для Android, остальные ОС и платформы мы отключаем:
На этом с настройкой приложения мы закончили. Переходим к подготовке самого проекта.
Часть 2. Подготовка файлов
Я для создания игры воспользуюсь игровым движком PointJS, удобная штука весом в 60кб, полностью кроссплатформенная и неплохо оптимизированная. Подготовим проект:
1. Откроем папку проекта в ОС (Show in OS):
Затем перейдем в папку «www», это и есть наша рабочая папка. Удаляем из нее все, и вставляем движок и с файлом index.html:
Эти файлы я скачал с сайта PointJS.
Во вкладке «Develop» мы с вами попадаем в (для кого-то привычный) редактор Brackets, и в файле index.html видим следующий код:
Тут уже добавлены какие-то переменные, что-то определено заранее (читаем комментарии в коде). В графе «Emulate» настраиваем понравившийся нам телефон и его ориентацию с масштабированием, заодно убеждаемся, что все работает:
С файлами разобрались, проект запускается, все хорошо, переходим к основным этапам создания игры.
Часть 3. Создание игры
Наверное заметно, что у нас много объявлений разных ссылок и переменных, вынесем их в отдельный файл (новые строки прокомментированы):
Фоном в игре «Doodle Jump» служит «тетрадный лист», то есть клеточки, для создания такого эффекта создадим файл grid.js со следующим содержанием:
Помним, что фон у нас закрашивается серым цветом, потому, если отрисовать белые прямоугольники на расстоянии 5px друг от друга, то из-за этих промежутков между ними и получится сеточка.
Теперь, чтобы отрисовать сетку, нам достаточно в любом игровом цикле вызвать функцию drawGrid() и у нас фон зальется сеткой:
Хорошо, заливать фон сеткой, это конечно хорошо, но мы ведь игру делаем! Поэтому идем дальше!
Теперь, хорошо бы, сделать меню для игры, чтобы игрок видел свой рекорд, видел сколько он набрал за один уровень и смог начать игру сначала, если проиграет (при проигрыше выкидывать в это же меню). Для этого создадим еще один файл и заполним его:
Но мы помним, что файле index у нас запускается сразу цикл «game», давайте это исправим:
Смотрим на результат:
При нажатии на «Новая игра» у нас возникает ошибка, ведь у нас не определен игровой цикл «game» и нет функции «createLevel», но нас это пока не волнует, создадим с вами игровой цикл «game» и временно поставим запуск игры на него, подправив команду «startLoop».
Опишем игровой цикл:
Сейчас, если игру запустить, у нас полетят ошибки, поэтому функцию drawLevel пока закомментируем, а вот функцию «drawPlayer» сейчас опишем. Создаем новый файл:
Сначала картинка игрока:
Функцию смещения камеры вы можете посмотреть в API к движку. Кратко скажу, что мы плавно двигаем камеру к позиции игрока, при этом слегка сместив камеру ниже на 500*del пикселей, чтобы он был немного внизу. При этом влево и вправо камеру не двигаем, её центр всегда смотрит на половину ширины экрана (width/2).
Если запустим, то увидим следующую картину:
Теперь пришло время раскоммментировать функции «createLevel» и «drawLevel», если вы их комментировали. Создадим еще один файл, и заполним его:
Вот и все, больше никаких файлов создавать не нужно. Игра в своем минимальном виде готова:
Теперь пояснения:
del — это делитель который множитель, который используется для домножения на него всех значений в пикселях. Так ак высота экрана может быть разной, то и этот множитель на разных экранах меняется, делая и остальные объекты, которые домножат свои размеры на него — динамически масштабируемыми.
Delta-Time, он же переменная dt, это временной фактор. Время в милисекундах, прошедшее от последнего отрисованного кадра до текущего, используется для сгалживания анимации и скоростей при движении, когда игра запускается на устройствах с разной мощностью.
Теперь о компиляции. Она происходит на сервере intel XDK, что хорошо для тех, у кого слабые компьютеры. И плохо для тех, кто точно знает, что каждый второй хочет украсть его идею
В целом тут сложностей возникнуть не должно, есть вкладка «Build», на которой вы просто выбираете для какой ОС собирать проект, указываете пароль от сертификата, и, это всё. После компиляции вам придет ссылка на загрузку готового проекта на почту, и так же скачать можно прямо из программы. После загрузки файлов с сервера они удаляются.
Скачать исходник проекта: Скачать архив
Для запуска можете открыть файл index.html в Google Chrome, открыть консоль (CTRL+SHIFT+J) и включить режим эмуляции сенсорного экрана, это позволит попробовать поиграть в игру без установки intel XDK.
Скачать готовый APK: Скачать APK
Его уже нужно запускать либо в эмуляторе, либо установить на реальное устройство.
Для лучшего понимания процесса разработки прикладываю видео:
Первый час разработки:
Второй час разработки:
Intel XDK уроки, Создание игры Doodle Jump для Android
P.S. я не автор видео
Дубликаты не найдены
Лига Разработчиков Видеоигр
3.7K пост 17.9K подписчик
Правила сообщества
-Уважайте чужой труд и используйте конструктивную критику
-Не употребляйте мат без необходимости
-Не занимайтесь саморекламой, пишите качественные и интересные посты
-Обучающие посты, туториалы
-Интервью с именитыми разработчиками
-Анонсы бесплатных мероприятий для разработчиков и истории их посещения;
-Ваши работы, если Вы художник/композитор и хотите поделиться ими на безвозмездной основе
НЕ НУЖНО ПУБЛИКОВАТЬ:
-Только гифки/арты/скриншоты из игры. Такие материалы могут сопровождать рассказ об игре или обучающий туториал, но не должны являться основой поста
-Посты, не относящиеся к тематике сообщества
Подобные посты по решению администрации могут быть перемещены из сообщества в общую ленту.
-Публиковать бессодержательный пост с рекламой Вашего проекта (см. следующий пункт), а также все прочие посты, содержащие рекламу/рекламные интеграции
-Выдавать чужой труд за свой
Подобные посты будут удалены, а авторы таких постов будут внесены в игнор-лист сообщества.
Ссылка на сторонний ресурс, связанный с игрой, допускается только при следующих условиях:
-Пост должен быть содержательным и интересным для пользователей
-Ссылка должна размещаться непосредственно в начале или конце поста и только один раз.
-Cсылка размещается в формате: «Страница игры в Steam: URL»
Один мальчик писал все на JavaScript, и клиент, и сервер, говорил что нравится, удобно, читабельно. Потом его в дурку забрали, конечно.
Начало видоса «перезапускаем, теперь вроде готово» поверг меня в крайнюю степень удивления «какого фига видос не с самого начала» 😀
Романтика разработки RTS Часть 2 (Новая графика)
Я начал писать вторую часть сразу после первой части. Но потом занимался релизом игры, а после релиза 3 месяца очень активно пилил недостающие фичи.
Пожалуй, еще сразу покажу трейлер, над которым я очень заморочился. Он отражает идею игры.
Почему же я решил менять графику? Причин несколько:
1. Игра выглядела блекло и не выделялась, выглядела второсортно
2. Графика далека от трендов мобильного рынка
3. Трудно найти ассеты, попадающие в стиль
Поэтому, я решил пойти путем инди и делать что-то low-poly. Но тогда это была лишь идея, я не был уверен что буду вообще продолжать разработку.
В конце 2018 года мы с женой переехали в Минск, для работы. Я устроился в Wargaming программистом движка WoT Blitz. И на какое-то время забросил свою игру, погрузившись с головой в новую работу.
В начале 2019 на зимних праздниках я вернулся к игре и начал воплощать задумку по переработке графики в жизнь.
Сначала я взялся делать здания. Я не стал брать готовые ассеты, так как во первых, не смог найти, а во вторых хотел гибкости, вдруг какого-то нужного домика в ассетах не будет? Ну и пожалуй нужно все-таки нужно что-то привнести графику, чтобы это был не просто бездушный кусок софта, а игра.
Вот такие домики получились (половина из них до сих пор присутствует в игре):
Потом под стиль зданий я нашел готовый пак юнитов в AssetStore за
Когда я заменил юнитов и здания в игре, сначала получилось как-то не очень.
Тут у нас используется Standard PBR шейдер и стандартный террайн, до релиза еще 1 год и 3 месяца. Оптимизации нет, на телефоне около. 20 FPS вообще без юнитов на сцене.
Пол года я в основном совершенствовал графику, рисовал домики, работал вяло. Параллельно я пописывал свой игровой движок и сделал генератор рефлексии для C++.
Важным прорывом был переход от enum к использованию guid префабов для сохранения и загрузки юнитов. Этот же механизм позволил привязывать иконки к любым префабам игровых объектов и автоматически рендерить иконки.
К лету 2019 ситуация следующая:
2. Все иконки юнитов и домов генерируются автоматически
3. Я не смог найти надежной информации, но на сколько я помню, туториал тоже появился где-то весной 2019 года
Этот скриншот долго украшал группу ВК, так как выглядел наиболее прилично
Я был все еще не очень доволен графикой. Мне не нравилось, как гладкий террайн сочетается с низкополигональными домиками.
В отпуск я поехал на малую родину в «поселок городского типа Морозовск» и там на волне вдохновения сделал следующий рывок в разработке. Во первых, появилась идея заменить террайн на воксели. Первый прототип выглядел так:
Мне это понравилось, это делало игру как-то строже и придавало ей какой-то уникальный вид. Поэтому, я стал развивать эту идею, сделал редактор для террайна и полностью переделал все карты на новый террайн.
Примерно в то же время я занялся оптимизацией и отказался от использования стандартных коллайдеров для поиска пересечений объектов и полностью отключил симуляцию в настройках проекта. Хорошо помню, как на волне вдохновения от поездки выкидывал физику отовсюду, пока ждал ночной рейс из Ростова-на-Дону в Минск.
На тот момент удалось добиться стабильного FPS при
Я продолжил заниматься графикой.
Эффектов в игре не много:
1. Мультяшные тени
На облака меня вдохновили две игры, Civilization V и Egypt: Old Kingdom. У меня облака это просто Шум Перлина с небольшим скроллингом, ничего особого.
Про тени пожалуй нужно писать отдельную статью, но они не отражают форму объекта, поэтому очень шустро работают. Пена на воде по сути тоже тени, просто на воде другой шейдер.
В общем, этой картинкой я долго гордился, для меня это был первый опыт графического программирования и оптимизации графики.
Игре не хватало какой-то киллер фичи. В GooglePlay ведь уже есть RTS, но ни в одной небыло стен. Поэтому, я решил сделать стены, на которые можно было бы заходить, примерно как в Stronghold.
Со стенами были сложности, я не смог сделать их строительство, так как для этого приходилось бы перестраивать NavMesh. Я до сих пор использую NavMesh юнити, и только сейчас я научился перестраивать в параллельном потоке, без фризов игры. Так что строительство стен тоже скоро появится.
Еще недельку я подкручивал цвета и пришел к тому, что фон нужно делать более блеклым. Прийти к этому мне помогли художники из чатиков про инди-игры в ВК и супруга. Теперь я был более-менее доволен картинкой. Она не была сильно сочной, но с этим можно было двигаться дальше.
На этом моменте, нам предстоял очередной переезд, на этот раз, из Беларуси в Россию и из России в Токио. Я старался как можно больше уделять времени игре, и финальные штрихи делались в суете и сумбуре.
В этот период мне (наконец!) пришло осознание, что в игре мало расставить деревья, нужен какой-то декор. Пеньки, камешки, тропинки. В итоге, все это было добавлено и игра стала выглядеть насыщенной.
Еще долго оставалась проблема с тем, что тени не показывались под юнитами на стенах. 18 апреля 2020 года эта проблема и был сделан этот скриншот. С этих пор графика не менялась.
На скриншоте есть абсолютно все аспекты игры и ее графики, так что я считаю его показательным.
Игра появилась в GooglePlay 31 мая 2020 года. Однако, на релизе работа не закончилась, я продолжаю делать обновления каждые пару недель и исправлять ошибки. Когда все миссии будут готовы, планирую релиз на iOS. Надеюсь, там игроки тоже оценят игру.
Я собираюсь сделать еще одну часть, про фичи, которые были добавлены с релиза. Когда ее ждать даже сам не знаю. Может скоро, может нет. 🙂
Буду рад критике и фидбеку! Спасибо! 🙂
Сделал игру, но кажется в ней незначительный баг.
Совсем небольшой глитч
Как я сделал свою первую игру
Всем привет. В этом посте я расскажу вам, как я сделал свою первую игру, постараюсь поделиться полученным за время разработки опытом, ну и расскажу об игре.
Полтора года назад я понял, что просто играть в видеоигры для меня недостаточно, что мне нужно самому их делать. В свободное от работы время, я начал изучать основы программирования на C# и Unity 3D. В первую очередь за знаниями я полез в You Tube, через пару недель понял, что это полный шлак, за тридцатиминутный ролик пишешь три строчки кода, а заэкранный гуру толком объяснить не может, что только что написал. Потом были уроки в docs.microsoft.com и еще что-то подобное, здесь уже получше, но для новичка сложновато. Лучшее что я нашел для человека без опыта программирования, при этом применительно к Unity, была книга Джереми Гибсона Бонда “Unity и C Шарп. Геймдев от идеи до реализации”. Товарищ Бонд на пальцах объясняет, что такое C#, что такое Unity, как писать код, что писать, все это с примерами и пояснениями, полно практических заданий, в том числе создание прототипов игр, так же много написано об игровой индустрии и геймдеве. Сразу скажу, даже с такой разжёванной информацией, за месяц, два, три, возможно полгода, программистом вы не станете. Более того, я стал понимать, что там вообще в этом коде написано, только через год (возможно, если бы я уделял учебе больше времени, и не делал длительные перерывы, это случилось бы быстрее). За этот год я дважды прочитал эту книгу, дважды выполнил большую часть заданий оттуда, прочитал и выполнил задания еще из одной книги.
В феврале этого года, разбитая тачка и надвигающийся коронокарантин, мягко намекнули мне, что хватит заниматься всякой ерундой (работать) и пора взяться за геймдев основательно.
Так как опыта у меня, по сути, было ноль, я решил сделать максимально простую игру для смартфонов. Задачи, которые я поставил перед собой: игра не должна быть похожа на какую-либо уже существующую и известную мне игру, то есть нужно было самому придумать геймплейные механики; геймплей должен быть простой, чтобы я сам мог полностью написать код; так как мне больше интересен дизайн, а не программирование, сделать упор на визуальную составляющую; и самое главное, сделать нормальную игру, не халтуру, и тем более не откровенное д****о, а просто нормальную, казуальную игру. Кое-какие наработки тогда у меня уже были, я выбрал игру, которая как раз была мне по силам. Суть игры: в игре есть пять лунок, напротив каждой пролетает шарик, нужно вовремя нажимать на экран, когда шарик пролетает мимо лунки. Быстренько придумал пять режимов движения шаров, для каждого режима задумал отдельное визуальное оформление, и приступил к рисованию спрайтов. Вообще, изначально я задумывал игру с минималистичной графикой (минимализм нынче в почете. ), но поэкспериментировав с цветами, градиентами и тенями, подумал: “тварь ли я дрожащая или рисовальщик”. В общем, было решено рисовать в более реалистичном стиле, это решение продлило разработку месяца на полтора, потому как я рисовал и одновременно учился рисовать. В итоге получилось слишком реалистично. Сейчас могу сказать, что реалистичный стиль для таких игр не очень удачное решение, лучше использовать более привычную для мобильных игр графику, например как в Angry Birds, хотя то, что нарисовал я, на мой скромный взгляд выглядит симпатично. Еще я понял, насколько важны концепт-арты. Раньше я садился рисовать примерно представляя, что мне нужно, но рисовал уже как окончательный вариант, в плане качества, в какой-то момент понимал, что это не то, стирал все, или перерисовывал какие-то части. Все это занимало уйму времени, лучше изначально нарисовать хоть какой-нибудь рукож**ый концепт-арт, главное, чтобы была видна общая картина происходящего в игре, и как элементы сочетаются друг с другом. Потом сел писать код, тут ничего интересного сказать не могу. Попутно с написанием кода собирал саму игру. Выделил пять глав. Проходишь все уровни в главе, открывается следующая глава, а также бесконечный уровень для пройденной главы, каждая глава отличается визуально и схемой движения шаров. Еще есть шестая глава, в ней пять бесконечных уровней, каждый уровень посвящен одной из пройденных глав, то есть вы можете выбрать визуальное оформление, какое вам больше по вкусу, но геймплей в них одинаковый, сочетает схемы движения шаров всех пяти глав, то как будет двигаться шар определяется рандомно. Если честно, в шестую главу мне больше всего нравилось играть. Звуки для игры использовал из бесплатных ассетов, с музыкой у меня вообще не очень. Собрал игру, воткнул в нее Unity ADS, придумал название “HitEra”, игра готова, пора и в мир отправлять. На все про все ушло около 4 месяцев, очень много страдал фигней, и мало времени уделял разработке, плюс недостаток опыта сыграл свою роль, в следующий раз надеюсь пошустрее справлюсь.
На гифке шестая глава, на сколько я знаю, до нее так никто и не добрался.