Текущий проект — Кликер

Текущее состояние проекта: верстка. Сегодня верстал магазин, работы мелкой много. Но по чесноку, я последние дни и не каждый день работал по этому проекту.

photo_2018-03-24_20-23-26

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

photo_2018-03-24_20-24-32

к примеру, сделал z.image(frame) вместо game.add.image(тонна параметров), кучу сеттеров и прочий синтаксический сахар

и кстати, не знаю в чем прикол, но потребление памяти резко снизилось. Может быть, нечаянно что-то оптимизировал. В целом-то объектов значительно прибавилось. Было по 18 мегабайт минимум.

photo_2018-03-24_20-25-18

Может, хром обновился, а может, сработало то, что я в одном месте переписал создание картинок с нуля. У меня там было создание bitmapData(обычный HTML5 canvas, дополнительный к рабочему). Так вот, раньше я там не вызывал bitmapData.destroy по окончании рисования, а по документации — надо было.

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

Общий рабочий чат с единомышленниками — не панацея (не чудо, не волшебная палочка!). Но это вполне рабочий стимул — один из хороших инструментов.

 

Скроллящийся список для магазинов в HTML5 игре

Минимализм. Простой рабочий путь. Вот о чем мне надо помнить.

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

Для решения — «магазин как всплывающий экран» — это вполне будет минималистичным рабочим решением.

Ну так и быть, раз сделал свой список, буду верстать в Phaser, не минималистично ))

Всплывающий текст

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

float

Пример кода

Недостатки

1. в такие штуки надо сразу добавлять пул, чтобы не гонять garbage collector туда-сюда. Но это уже вручную можно самому легко написать, через группу Phaser

2. библиотека использует обычные шрифты, не bitmapText — это плохо. Нужно будет допилить опцию под BitmapText

Достоинства

Перед нами объект с уже настроенными 4 годными эффектами всплывания. На хорошие анимации требуется много времени в плане настройки. Тут они готовые. После допиливания (пула и bitmapText) я буду просто вызывать одной строчкой готовый эффект.

Генерация уровней в Phaser как в Minecraft

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

То есть его можно использовать

  1. для генерации уровней по заданному числу (как в Minecraft, число seed позволяет создавать одинаковые миры на разных компьютерах, если его ввести при создании новой игры)
  2. для создания одинаковых «случайных» последовательностей у игроков в мультиплеере!

Вот кстати, о последнем никогда не задумывался — полезный фактик.

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

 

Делаем Android-игру из HTML5 — или Config.xml для Phaser / Build.Phonegap

Андрей, автор HTML5 Game, посоветовал мне Crosswalk, чтобы решить проблемы совместимости со старыми телефонами. Crosswalk — это альтернативный браузер, в который можно завернуть свою HTML5-игру для публикации на Android.

У меня была проблема, что Phaser не воспроизводит звуки при заворачивании в обычный WebView (или Phonegap) на Android 4.4. Завернул в Crosswalk — звуки появились, все норм. Размер дистрибутива увеличился 25 мегабайт — ладно, потерплю.

Для превращения HTML5-игры в APK для Android я использую build.phonegap.com. Это облачный сервис от Adobe. Плюсы:
1. не надо ставить все на свой компьютер
2. очень быстрый билд — буквально секунды (Cocoon в данный момент гораздо дольше билдит)
3. можно работать с разных компьютеров
4. Бесплатный режим

Минусы:
1. Можно деградировать.
2. Исходники надо заливать на GitHub в открытые репозитории — может быть некомфортно, если вам тревожно за свой код.

В защиту вашей тревожности могу сказать, что HTML5-игры действительно легко крадутся — я сам недавно нашел одну игрушку (Шарики-стрелялки) на HTML5, быстро скачал все ее исходники (прямо с Web-страницы), прочитал и понял. Впрочем, там разработчики сами виноваты — никакой обфускации.

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

Процесс создания мобильной игры через Build.phonegap

  1. Пишем HTML5 игру/приложение как обычно, как для web
  2. Бросаем в корень config.xml (исходник ниже)
  3. Пушим все на GitHub в открытый репозитарий (разобраться с Git/Github — дело одного вечера даже для полного нуба)
  4. Заходим на build.phonegap.com через Adobe.id (регистрация — дело пяти минут)
  5. Выбираем бесплатный план, добавляем приложение, указываем в настройках адрес своего репозитария
  6. Ждем, пока перестанет мигать индикатор около значка билда ( рядом с полем No key selected на скриншоте)
  7. Скачиваем готовый APK по клику на кнопке APK

html5 phaser phonegap

Config.xml для HTML5 игры под build.phonegap.com

Я не использую всю мощь Phonegap/Cordova, поэтому настройки у меня простые — указать иконку, версию приложения, пакет (идентификатор приложения). Ну и добавить Crosswalk — чтобы звуки играли на старых телефонах. Через пару лет, думаю, или даже в 2018 от строчки с crosswalk думаю отказаться.

It`s enough!

звук в HTML5 играх на Android до 5 версии

На Андроиде до 5 версии HTML5-игры не могли в звук. Дефект нативного WebView. Проблема возникает, когда хочешь воспроизвести звук с локальных файлов в ассетах. С интернета все идет нормально.

Игра, которую я делаю на Phaser, не воспроизводит звук на моем телефоне с четвертым андроидом. На пятом уже хорошо.

Обходные варианты:
1. забить на четвертый андроид, билдить дальше через обычный Phonegap и иметь дистрибутив от полмегабайта.
2. подключить альтернативный браузер (Crosswalk, решения Cocoon.io) и иметь улучшенную скорость, но дистрибутив от 20 мегабайт (у кукуна меньше, он разбивает на интел- и ARM-дистрибутивы отдельно).
3. эксклюзивное решение — положить все mp3-файлы на свой сервер. Ни в коем случае.

Tween addOnce arguments

В документации на Tween.addOnce в Phaser CE 2.9.1 сказано, что в конце можно добавлять свои произвольные аргументы для listener

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

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

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

ImageBuilder (велосипед для полноценных прямоугольников в Phaser)

У меня был простой глобальный объект для создания прямоугольников на лету. Он использовал Phaser.Graphics для рисования, а затем рендерил текстурку. Все было хорошо, но когда я захотел собрать из текстурок индикатор — пошла такая невыносимая и тупая пурга, что хотелось напиться.

Оказалось, что Phaser.graphics, когда рисует и рендерит — создает текстурку размером во весь экран. И пофиг, что у вас там крохотный прямоугольник, в свойствах все равно будет FullHD. Пришлось переделать генератор на BitmapData. Выглядит он сейчас таким образом:

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

2017-11-24_204025

Я создаю фон и полоску  с помощью ImageBuilder

И когда меняю показания — меняю масштаб полоски

На этом изменении масштаба все и ломалось раньше. Теперь все норм, полоски работают.

Странно, что в игровых фреймворках часто нет таких элементарных вещей, как сгенерировать цветной квадрат на правах полноценного объекта. Плохо, когда куча времени уходит на борьбу с недокументированной фигней.

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

 

Phaser Tween To

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

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

Я уже хотел написать горящий велосипед — свой менеджер анимаций. И несколько раз его уже написал-вставил, но меня все мучало, что я меняю горящую карусель на горящий велосипед.

В итоге понял, что Tween.to в Phaser — добавляет новую анимацию в цепочку анимаций при каждом вызове.

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

Стало

Поставил в клике только start

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

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