что такое дудл джамп
Создание игры 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
Его уже нужно запускать либо в эмуляторе, либо установить на реальное устройство.
Для лучшего понимания процесса разработки прикладываю видео:
Doodle Jump 2 4+
ВНИМАНИЕ: безумно затягивает!
Lima Sky
Снимки экрана (iPhone)
Описание
Запрыгивайте на платформы и собирайте звезды, чтобы разблокировать новых крутых персонажей и захватывающие новые локации.
Разблокируйте все уровни и соберите всех персонажей! Побейте рекорды своих друзей и станьте новым королем прыжков Doodle!
— Мир пещерных людей с тираннозаврами, трицератопсами, падающими камнями, доисторическими черепахами…
— Пустынный мир с зыбучими песками, джиннами, скорпионами, пустынными монстрами…
— Сонный мир с блеющими овцами, монстрами-подушками, светлячками, подушками-платформами…
— Мир авиаторов с вертолетами, реактивными платформами, винтовыми платформами…
— Космический мир с платформами из лунного сыра, платформами, пожирающими чудовищ, космическими кораблями, роботами, ракетными циклопами…
— Дождливый мир с грязью и лужами на платформах, ливнем, монстрами в плащах…
— Мир дискотек с дискотечными платформами, диско-шар монстрами…
Doodle Jump 4+
Lima Sky
Для iPhone
Снимки экрана
Описание
From prime-time sitcoms (BIG BANG THEORY) to late night TV (JIMMY FALLON) to a fashion accessory for pop stars (LADY GAGA), Doodle Jump is EVERYWHERE! It’s a cultural craze, a hot new trend!
iTunes reviews (US)
*************
«I just got dumped cuz I wouldn’t put this game down! And I just kept playing while she walked away. ITS THAT GOOD!»
«Somehow it’s better than sleep for me. I am sick, sleep deprived, and achy, and yet I cannot put it down»
«Coming from someone who owns a PS3, Wii, and Xbox 360, I play this game more!! This game is amazing!!»
So, what is it?
****
In Doodle Jump, you guide Doodle the Doodler—using some of the most subtle and accurate tilt controls in existence—on a springy journey up, up, up a sheet of graph paper, picking up jet packs, avoiding black holes, and blasting baddies with nose balls along the way.
Laugh with delight as Doodle™ blows past other players’ actual score markers scribbled in the margins. And be warned: this game is insanely addictive.
FEATURES:
— 11 incredible worlds + 3 SECRET easter eggs
— broken, moving, disappearing, moveable, and EXPLODING platforms
— JET PACKs, PROPELLER HATS, ROCKETS, and springs that fly you higher
— UFOs, black holes, monsters, bear traps!
— jump on monsters to bring them down MARIO-style
— share your scores
— race agains friends!
— global leaderboards, achievements!
How to play:
Tilt to move left or right, tap the screen to shoot.
—————————————————
*Please don’t Doodle Jump and drive, and BE WARNED: Doodle Jump is Insanely Addictive!
Создание Doodle jump на HTML5
Здравствуйте, Хабражители!
В этом топике я хочу рассказать о том, как я создал браузерную игру «DoodleJump» на HTML5 без использования каких либо то фреймворков. Для тех кто не знает, DoodleJump — это популярная мобильная игра где главный герой «doodler» бесконечно прыгает вверх по платформам, преодолевая различные препятствия, и собирая бонусы. Эта игра широко распространена почти на всех мобильных платформах, но приличной браузерной версии этой игры нет, поэтому я и решили написать браузерную версию этой игры, пусть даже управляемую клавишами а не гироскопом.
Итак, начнем. Для начало обозначим сцену, где и будет все происходить:
и применяем к ней стили:
Теперь надо применить стили к нашим объектам, залить их спрайтами, задать ширину и высоту объектам, а также сделать им абсолютное позиционирование, для того чтобы мы смогли размещать каждый объект не зависимо от других объектов на сцене.
Я подготовил несколько спрайтов и картинок для раскраски нашей игры:
Вот пример стилей к элементу doodler:
Зная координаты расположения элементов на спрайте, мы можем залить все объекты по образцу выше.
А вот стили к пружинками и платформам будут немного отличаться, так как они лежат в контейнере, и остальные параметры к ним будут задаваться из java-скрипта:
После того как мы создали все объекты на сцене и придал им стили, мы можем приступать к написанию java скрипта. Сначала для удобства написания кода игры, мы запихнем селекторы объектов в переменные:
Как я и говорил ранее, div’ы — контейнеры такие как: platforms и objects мы заполняем ява циклом:
где numPlatform — это количество платформ в контейнере (максимальное количество платформ, умещаемых на сцене, в нашем случае их 16). Для удобства можно создать функцию для перемещения платформ:
Теперь можно легко переместить любую платформу на желаемое место на сцене, и изменять её тип:
создадим еще несколько подобных функций:
Создадим несколько глобальных переменных и массивов, которые нам понадобятся в дальнейшем.
Вот некоторые из них:
Теперь рассмотрим основную часть ява-скрипта самой игры, бóльшая часть кода будет находится в функции frame(), и запускается 100 раз в секунду. Внутри этой функции дудлер будет постоянно проверятся на столкновение с монстрами и бонусами, а так же там будет находится цикл, внутри которого мы будим проверять дудлера на столкновение с каждой платформой по отдельности:
Что бы обеспечить падение сломанных платформ пишем:
Поэтому все платформы которые вышли за область видимости мы ставим на 30 пикселей выше предыдущей скрываемой платформы:
В зависимости от того, на какой бонус натыкается дудлер — выполняется одно из следующих условий: например если дудлер падает на пружинку:
Вот что происходит когда дудлер натыкается на другие бонусы:
Конечно это не все, осталось много всего необъясненного, но ведь мы рассматривали основную часть нашей работы. Думаю принцип понятен, далее нам оставалось сделать так чтобы сложность игры увеличивалась в зависимости от набранных очков:
далее мы добавили заставку (с возможностью пропуска), меню, рекорды, справку, меню паузы, звуковое сопровождение, и информацию о достижениях после падения дудлера:
При запуске игры, она обращается к серверу и получает список результатов, который доступен по кнопке «Рекорды». Если пользователь преодолевает минимальный рекорд, (расположенный в списе на 16-ой строчке), то игра спрашивает его никнэйм, далее в зависимости от набранных очков располагает его на определенной позиции, смещая меньшие рекорды вниз.
Lima Sky
Снимки экрана
Описание
Играйте в эту БЕСПЛАТНУЮ версию мега-хита Doodle Jump и узнайте сами, что уже знают миллионы игроков по всему миру:
DOODLE JUMP это БЕЗУМНО ЗАХВАТЫВАЮЩАЯ ИГРА!
В Doodle Jump Вы управляете персонажем, называемым Doodler—используя некоторые из самых тонких и точных элементов управления наклоном Вашего устройства—Вы двигаетесь в прыжке выше, выше и выше по листу бумаги в клетку, собирая реактивные ранцы, уклоняясь от черных дыр и стреляя в злодеев из носа по всему пути.
Можно восторженно смеяться, наблюдая как мимо проплывают очки других игроков, появляющиеся на полях сбоку. И будьте осторожны: эта игра безумно захватывает.
11 невероятных миров
сломанные, перемещающиеся, исчезающие, подвижные, и ЛОМАЮЩИЕСЯ платформы для прыжков
РЕАКТИВНЫЕ РАНЦЫ, ШАПКИ С ПРОПЕЛЛЕРОМ, РАКЕТЫ и пружины, на которых Вы можете взлететь выше
НЛО, черные дыры, монстры, капканы на медведей!
прыжки на монстрах в стиле MARIO
возможность делиться очками с Вашими друзьями!
соревнования против друзей!
таблицы лидер ов и достижений!
Как играть: Наклоняйте устройство влево или вправо, касайтесь экрана для выстрелов.
Пожалуйста, не играйте в Doodle Jump, когда Вы управляете автомобилем и помните: Doodle Jump это Безумно Захватывающая Игра!
* Это ПОЛНАЯ, БЕСПЛАТНАЯ версия Doodle Jump поддерживаемая рекламой.