Самопроизвольная стрельба из катапульты

Случилась у меня фигня — катапульта в одной игре сама по себе стреляла.

2018-06-18_113939

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

Лечение: в коллбэке на событие onUp передается объект pointer, у него можно проверять свойство withinGame. Вот так

А onUp (вместо onDown) используется тут для того, чтобы удобно было играть на тачскринах — свайпом наводишь луч, а когда поднимаешь палец — катапульта стреляет.

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

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

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

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 уже заботливо вложен код для генерации случайного целого числа:

 

Из владельца автомагазина — в геймдев

На vc.ru в комментариях рассказали волшебное:

«Помню в конце 2013 года был у меня небольшой магазинчик автозапчастей. И был у меня кредит на бизнес, я его успешно выплатил и тут же в темных коридорах ведущего банка меня отводят в сторону и говорят, что мол у нас там пертурбация грядет, вы можете взять сейчас без проблем в 3 раза больше, чем брали, а то потом сложно будет взять.

Я был молод и глуп. Взял, а в 2014 году пришла такая жопа, что половина автомобильных магазинов закрылась в нашем маленьком славном городке. Населения обнищало в один миг. В итоге и я все закрыл. 5 лет ушло на выплату этого долга, а мог бы купить квартиру…

Взял я около 1 млн. Как вы уже подметили размер нашего городка, он маленький и для него это довольно большая сумма. Цена квартир начинается от 600 тыс.

Все деньги были вложены в товар и на расширение торговой площади.

На что я рассчитывал? До этого я проработал 5 лет в этой области. Знал всех поставщиков, наладил связи, был большой опыт. Как я уже говорил один кредит я вернул. Дела шли неплохо. На момент взятия злополучного кредита магазину было 2,5 года.

Когда бакс умножился на два, то цены поставщиков умножились на 3, а в период скачка бакса и в 4 и в 5 раз. Народ заходя за запчастями и видя цену говорил фразы в духе: «проволокой подмотаю и еще поезжу» или «стучит стойка/наконечник/линк и т.д. путь еще постучит». Народ был реально в шоке от цен.

Торговцы пожирнее и побогаче, без кредитный начинаний начали крутить на товар 5-10% максимум. А такие бедные как я крутили больше, потому что уже на тот момент вся выручка (не прибыль) уходила на погашение кредита. А ведь еще аренда, налоги, покушать, хоз нужды.

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

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

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

Я продал ее за 13 тыс. рублей. Это были первые серьезные деньги с геймдева. Тогда я начал верить в себя.

И вот закрыв бизнес, у меня появилось 2 варианта: идти работать куда-то за 15-20тыс. рублей или делать игру и попробовать заработать на ней (у меня уже были некоторые наработки). В итоге я нашел работу с неполным рабочим днем: приходил в обед домой и до 12 ночи делал игру.

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

В течении 8 месяцев пока банк судился со мной, а приставы арестовывали мои счета, я учился рисовать, вникал в основы геймдев маркетинга и пилил игру и в конце концов зарелизился. В итоге, ровно за 6 месяцев я рассчитался со всеми долгами.»

(c) Источник (в комментах)

LinDuo — Обучалка английским словам

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

Отзывы по проекту можно оставлять в этой форме — http://lin-duo.com/page/contact_us_ru

Скриншоты

Читать далее

Дизайн уровней Match 3

В субботу допилил движок match 3 до способности отражать фигурные уровни, а не только прямоугольные. Решил так — добавил в набор фишек специальную, неактивную фишку «пустоты». В алгоритмах везде проставил случаи для исключения этой фишки из движухи — она не образует комбинации, не движется, не меняет свои позиции.

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

Дизайн уровней match 3 игры

Рисовал так — сделал в Fireworks группу 8 на 8 серых прямоугольников. Скопировал эту группу 20 раз, по числу уровней.  Затем просто менял им цвет, используя попеременно то пипетку, то инструмент выделения. Такой прием можно использовать во всех векторных редакторах, где можно быстро переключаться между инструментами и снимать цвет пипеткой. По ощущениям — как будто рисовал. Но у меня хоткеи Fireworks давно в пальцах сидят, я давно в этом редакторе работаю.

У меня старая версия, 2003 года, мне хватает ее возможностей, она запускается быстро и не требовательная к ресурсам. Если бы не Fireworks, то, пожалуй, сделал бы в Иллюстраторе или Inkscape.

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

PS: частично для вдохновения использовал эту статью  — http://cargocollective.com/lucienchen923/Match-3-Game-Breakdown

Кликер по Майнкрафту оценивается игроками как нормальная игра

Размещал рекламу кликера по Майнкрафту в паблике ВК по Майнкрафту для сайта, с которым сотрудничаю. Что удивило — высокое число лайков, обычно у рекламы в пабликах мало лайков, а тут было наравне с обычными постами в том сообществе.

Один школьник вылез с претензией — «что за фуфло! Играйте в нормальный Майн». Я не вмешивался, хозяин паблика тоже. Через N минут появились ответы от других школьников — «Нормальная это игра!».

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

Сам кликер выглядит так:

Майнкрафт Кликер

Ссылка на Майнкрафт Кликер

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

Геймплей

На игровом поле расположены ресурсы, предметы, NPС и мобы из реального Майнкрафта. Кликаем на первой ячейке (дерево), пока не накопится достаточное число дерева для крафта других ресурсов, далее по восходящей.

Я сам долго пока не играл, исправлю это попозже. Автопрокачки, то есть элементов Idle, пока не заметил. Система крафта по числам совпадает с реальной игрой.

Официальный клон или пиратка?

Игра опубликована на портале GameDistribution.com, насколько я понял, это европейская контора, то есть с законами должно быть все серьезно. Если бы был китайский или нигерийский портал — понятно, что там игнорят все законы. Но если игра опубликована тут — значит, Microsoft пока не преследует столь явное клонирование образов из своей игрушки.  Вообще я много видел игр, в том числе и говна откровенного, которые используют такие же текстурки и картинки, что и Minecraft.  Значит, пока это возможно.

Выводы

Школьники считают кликеры нормальными играми. Особенно, если они похожи на Майнкрафт )
Надо пилить кликеры. Но сначала — прокачаю матч3

Развернуть все спойлеры на странице Хабра

На страницах Хабра иногда бывает много спойлеров, как тут. Аж сорок штук. А я хотел сразу сохранить в Scrapbook, то есть развернуть все. Может, на Хабре какой-то официальный прием есть или горячая клавиша, но я не нашел, и написал свой код

вставлять в адресную строку или сделать закладку на панели браузера (что я и сделал)

PS: если там есть официальный хоткей — так и скажите.

Опубликовал игру на Itch.io

Опубликовал свой Happy Winter Match 3 на портале itch.io. Думаю, когда наберусь опыта — буду метать и на Newgrounds, и на Kong. Пусть порталы не казуальные, но ссылка на Гугл плей лишней не будет.

update: опубликовал игру также в ВК. Это очень просто, но была лишь проблема, что у меня не было свободного сайта с HTTPS, переезд большого сайта на SSL — ЖОПА. Зарегил сайт, поставил туда сертификат от LetsEncrypt бесплатный на три месяца — заработало, в ВК игра появилась.

update2: игра доступна по ссылке, но в свой каталог ВК отказался добавлять, написал мне, что без социальных функций он не добавляет игры туда. Значит, надо будет добавить минимальный соц.функционал — хоть таблицу рейтингов и рекомендации какие-нибудь. Мне самому интересно.

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

Хотя, вероятно, это сильно зависит еще от текста в описании игры на Google Play. У меня есть пачка приложений, на них количество инсталлов не меняется неделями.

Недавно сбрасывали ссылку на мега-историю, как человек заказал клон Флэппи Берд у программиста и художника. Потратил баксов — больше, чем Эльспер за месяц зарабытывает — а выхлоп около нуля. «Игра на рынке уже 7 месяцев. За всё время игру скачали 3000 раз» — цитата.

ouchybird-570x321»

Я вот думаю, что помимо качества графики и самой идеи, в том Флэппи Берде тупо надо было текста накидать — там описание содержит около нуля интересных ключевиков и фич.

Happy Winter Match 3 — первая моя игра в match3

На прошлой неделе, 17 декабря 2017 года, выложил в Google Play свою первую игру, клон Bejeweled, классический match3. Назвал ее для русскоязычных «Дед Мороз и три в ряд», а для остальных языков — смотри заголовок и скриншоты.

Стартовый скрин

Стартовый скрин

Фичи

Это одноэкранка, то есть все крутится вокруг основного экрана, где на поле 8 на 8 выложено 8 фишек (довольно казуальный и приятный баланс, играется довольно долго, много комбинаций).

happy winter match3 screens_RU_gameplay_02

Есть всплывающие попапы — настройки, выбор языка, таблица рекордов, стартовый скрин — которые реализованы как группы в Phaser. Реализованы они не без греха — хотя я заблочил реакцию на другие кнопки при всплывающем окне, кнопки эти все равно нажимаются. Как эффективно включать «заморозку» экрана под попапом — еще не дотумкал. Game.paused в Phaser замораживает все подряд, включая кнопки в самом попапе, что хреново.

Зато есть локализация на турецкий и голландский (google translate, хотя его нейронные артефакты меня пугают — мне все теперь кажется, что иногда он несет полную чушь)

Локализация за турецкий

Но кстати за турецкий я более-менее спокоен — еще когда с flash-играми возился, базовые турецкие идиомы в играх запомнил (само слова «игра» — oyun, к примеру).  Турки до недавнего времени, пока Флеш цвел, очень много пиратили брендов — по мультикам и фильмам со всякими феями Винкс штамповали кучи очень простых, но качественных в плане графики одевалок и раскрасок, что вполне меня удовлетворяло, точнее, девочек, которые шли ко мне на сайт.

О ключах и сайтах

Вспомнил смешное — как Данила Маул назвал ключевик «игры для девочек» фейковым, накрученным биржами. Я тогда со смеха чуть со стула не упал (шутка, сидел крепко, просто усмехнулся) — этот ключевик был реальным и нес тонны траффика, весьма неплохого в плане баннеров. Хоть там и давали цент-два за клик, зато девки ходили по сайтам как в реальной жизни по магазинам — долго, вдумчиво, изучая кучи игр.  Топовые сайты с этим траффиком (не мои) имели по 12 просмотров на человека, у меня было до 6-7 доходило, в 2011 я как сыр в масле катался (и ничего не делал) — эээх! как же меня сейчас это все разбередило ))  Короче, потерял я позиции по этим ключам. Но он до сих пор жив, а турецкий запомнил.

Хотя пиратить бренды я сейчас точно не советую — появились компании-охотники, которые абузят хостера, если ты вешаешь на сайт игры по брендам. К примеру, за «Губку Боба» и «Дору-путешественницу» мне прилетали абузы как веб-мастеру от такого bounty hunter-а. Я потом прогуглил — он сам прав не имеет, но его нанимают, потому что у него есть софт, которые автоматизированно сканирует кучу сайтов в поисковой выдаче и кидает предъявы соответствующим владельцам и хостерам сразу.

В Google Play же я изначально не советую ничего такого не пиратить — так как корпорация добра абузит жестко и сразу. Читал историю про чувака, который примерно в 2011-2013 наштамповал кучи простых игрушек для Андроида по Винксам и прочим брендам, жил как пармезан или даже дорблюе в плесени, а потом ему пришло уведомление от Google, что он выиграл главный в жизни разработчика приз — почетный бан с голубой ленточкой. Роботы, как и роботы в Ютубе, теперь стоят на страже.

Об алгоритмах

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

Графоний

Графику я беру на сток-биржах. Это минус, так как самые лучшие наборы для match3 покупают десятками. Но в свою защиту что хочу сказать:

  1. 8 баксов за набор сексуальных фишек — это восемь баксов!
  2. Перед публикацией я смотрю обычно, не выдает ли по запросу на первой странице игру с похожими фишками. Пока не было. Делать ничего не буду, просто наблюдаю
  3. В дизайне игры стараюсь не повторять точно то же, что нарисовал дизайнер (в kit-ах, то есть наборах графики, часто рисуют все экраны в полном дизайне). Кстати, это разумно еще и по той причине, что дизайнеры иногда не совсем понимают, как это будет смотреться в игре. К примеру, одна художница сделал набор с фиолетовыми и желтыми фишками на клетчатом поле. А поле — в желтую и фиолетовую крапинку. Она в своем дизайне, в презентации положила фишки так, чтобы они выглядели контрастно, но в реальности-то они часто сливаются с полем (желтые с желтым и тд).
  4. Когда деньги будут и траффик — буду покупать эксклюзивы. Хотя в match3, возможно, это и бессмысленно — посмотрите скрины по match3 в Google Play — хотя видно, что фишки разные, но они все очень похожи.

Короче, с этим надо будет еще бороться.

Монетизация

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

Траффик и ретеншен

Итоги первых четырех дней — 10 установок, пять удалений. По сути, статистики еще нет. Монетизации, соответственно тоже.

Публикация веб-версии

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

В веб-версию внизу я поставил баннер на андроид-версию, в Google Play — в расчете на дополнительное мясо за счет насекомых, как говорили в нашей школьной столовой.

Кроме GameDistribution, надо выложить еще на пару сайтов — один из них знакомых, другой свой, третий itch.io (если пустят такую казуальщину). Все это, в основном, без монетизации, просто для баннера и ссылок на мобильную версию.  Этим сейчас и займусь.

Что дальше

Сейчас пилю на базе этого же движка match3 следующую итерацию. Фишки и графоний уже прикупил и частично прикрутил, думаю, как продвинуть логику, чтобы сделать ее более интересной, чем одноэкранка. От попапов решил отказаться, будут делать разные экраны на разных state Phaser (минус в том, что при переходе на игровой экран на слабых телефонах становится заметна легкая пауза при генерации уровня — в Happy Winter Match 3 она происходит только один раз за игру, тут каждый раз при переходе).

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

2017-12-22_123347

В любом случае цель — выкатить игру до Нового года или в первых днях 2018 года. Кодовое название — что-то в духе Fruit Candy Shugar Crush Fruitmania Blast (это не является, похоже, пока брендированными сочетаниями — в гуглплее выдается куча игр с названием Fruitmania, к примеру, хотя бы в качестве составного).

PS: шоколадные фишки нарисовал сам. А иконки стандартные, «материальный дизайн» — это даже не пиратство, а стандарт.

Шоколадные кнопки

 

Делаем 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-файлы на свой сервер. Ни в коем случае.

Делал простой match3 — аналог игры Bejeweled

Последние недели — практически большую часть времени с предыдущего поста про мой алхимический кликер — я пилил игру в жанре match3 по туториалу Феронато — Complete Bejeweled prototype made with jQuery. Кстати, Феронато — абсолютно бомбовый (в значении классный) чувак, который пишет тонны простых статей и туториалов для нубов.

Статья про то, как сделать на JQuery. Я делал на Phaser (и то, и то JavaScript — примечания для потомков). Отсюда первые затруднения — перенос кода. Но это не главное, а главное то, что у меня другие алгоритмы. Эмануэль (не знаю, как точно его зовут) сделал клон Bejeweled, в котором есть комбинации только по вертикальным и горизонтальным линиям. Я хотел сделать групповые.

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

Сделал прототип на квадратах в виде компонента и выложил его как рабочее демо сюда. Выглядит вот так:
2017-12-09_165703Сейчас навожу полиш, дизайн другой. Прицепил фишки на тему Нового года — купил их на бирже ассетов GraphicRiver. Нашел музыку и эффекты на OpenGameArt.org, вставил.
Сейчас полирую баги и делаю минимальную обвязку — таблицу рекордов, настройки.

Проекции для спрайтов в играх

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

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

Сегодня прочитал заметки по психологии восприятия в блоге Playrix (отечественный king, можно сказать, по казуальным и мобильным играм). Все нормально, пишут они. Можно объединять проекции — психология позволяет. Даны ссылки на египетские фрески, на советских художников, на далматинцев в саду.

a82c90c4f658ae419967082c258b3a8a

Смотрите — большинство фишек плоские, айсберг и вулкан — изометрические, с объемом.

Следующий пример вообще выглядит как мои «солянки» из разных наборов.

aa0582735e3e21dc509cb0a3d08f05d0

Предметы объемные, котики и собаки — плоские. Плюс, похоже, котики и собаки в разном стиле. И это не говоря уже о фоне, у которого совсем другая перспектива!

Финальный аргумент — это скриншоты из очень популярных игр Playrix, за ретеншеном которых очень внимательно следят. А значит, разносольная графика действительно не помеха.

Хотя не буду скрывать — мне лично все же хотелось бы, чтобы все спрайты были в одном стиле, в одной проекции. Но с разными стилями — все-таки можно.

Главное — сделать игру как конечный продукт, а графику в случае успеха можно будет и обновить.

Tween addOnce arguments

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

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

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

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

Полная замена не является заменой

Расскажу про смешное — менял два объекта, ничего не менялось. Я проверил — менялось все, абсолютно все.

Так вот, мораль в том, что если вы меняете все — координаты, тип, внешность — для наблюдателя со стороны не меняется ничего.  Красная кнопка в тех же координатах. Синяя кнопка по-прежнему торчит в углу. Ну да, по факту, это разные объекты, но они обменялись (swap) всеми своими параметрами.

Если нужен заметный эффект обмена — оставьте часть параметров нетронутыми.

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

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

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

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

2017-11-24_204025

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

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

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

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

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

 

Универсальный Pool для JavaScript объектов

Вторая итерация паттерна Pool для JavaScript. Вкратце, Pool — это место для хранения объектов, которые то появляются, то исчезают. Pool позволяет создать их заранее в нужном количестве, а затем повторно использовать, избегая вызова Garbage Collector.  Паттерн, который необходим для гейм-девелопинга во всех языках с автоматической сборкой мусора.

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

Пример использования Pool

Для всплывающих пузырьков в кликере — сначала создаю пул с пузырьками

При запуске эффекта всплывания

 

Phaser Tween To

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

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

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

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

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

Стало

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

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

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

Истории успеха: 2048 City и Space Invaders

У меня в Firefox стоит плагин Scrapbook, который позволяет сохранять все, что найду в сети (можно сказать, предок Evernote). Я там завел специальный раздел, куда сохраняю истории успеха и взлета мобильных игра. Вот две свежих.

2048 Cities

Нашел эту историю случайно тут. Звучит она так:

«мой бывший коллега взял и сделал клон игры 2048, назвал его 2048 cities. В итоге получил 1,5 млн органических загрузок за два месяца. Монетизирована игра была на видеорекламе. Деньги он получил, возможно, не очень большие, но для инди-разработчика неплохие. Сейчас он уехал из Mail.Ru Group в деревню, делает там другие игры»

Я сначала подумал, что так каждый может. Потом посмотрел на саму эту игрушку — нет, это не тупой клон. Мужик реально придумал свежую подачу.

2048city

Ниже -  обычный клон 2048. Они одинаковы, как яйца, даже цвета в оттенках совпадают у разных разработчиков — и как странно, что Гугл Плей не банит их. Видимо, 2048 не брендовый ключевик.

2048 orig

Поэтому парень, который сделал из математической головоломки почти SimCity — молодец.
PS: хотя на скриншоте и в статье разные названия, по линку в статье указана именно эта игра — City 2048.

Вторая история про то, как другому парню просто повезло

Корявый клон игры из 80х — и 20 тысяч долларов

Один парень сделал клон игры Space Invaders, без особых целей монетизации, просто чтобы изучить игровой фреймворк. Выглядит игрушка так.

space invaders

На его счастье, его игра попала в обзор ретро-игр. Итоги: 23 тысячи долларов с этой игры и с его улучшенной версии.

Выводы

Жирный непатентованный ключевик + оригинальный подход (дизайн) при той же базовой идее — выглядит как рецепт.

Ссылки с хорошего обзора для игры, сделанной по туториалу — как удача.

Idle Click — шаг 2

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

Идея игры в первой итерации похожа на шахту Эльспера. Только вместо шахты — хижина алхимика / ведьмы, которая варит зелья. В первом приближении дизайн выглядит примерно так:

design

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

prototype

Этот прототип сделан, посмотреть его работающую копию можно тут.

Код экрана (Phaser, JavaScript)

Это обычный State из Phaser, в котором в фазе create я вызываю билдер — отдельный объект, который создает мне все элементы на экране. Я просто передаю ему координаты для этих элементов и функции, которые должны срабатывать при нажатии кнопок.

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

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

Всплывающие пузыри реализует объект floatingLoot, отображение добытых зелий — uiLoot.

Рабочее демо экрана

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

Пиление на мелкие классы — это в чем-то геморрой. Но зато они очень легко меняются, так как длина их составляет максимум 100 строк (с комментариями).  Я думаю, что абстрактный первый экран потом использую в других кликерах — ведь, по сути, в нем для изменения впечатлений надо поменять только графику. И координаты в State.

Для справки — как выглядит известный кликер Clicker Heroes

 clicker heroes

Очень аскетично, но апробировано. Моему дизайну не хватает «полиша», то есть шлифовки. Но самое главное — мне теперь надо наконец сесть и придумать логику апгрейдов и нарисовать схематично хотя бы другие экраны.

HTML5 издатели

Последний год на свой игровой сайт добавлял уже HTML5-игры. Что понравилось — появился ряд агрегаторов, к которым можно просто зайти и взять игры из каталога.

Что не понравилось — по сравнению с Flash, все HTML5 игры у издателей распространяются как вставка через iframe. То есть игра лежит на их сервере. Это только кажется, что это плюс. Если издатель гикнется — все игрушки на сайте, стало быть накроются медным тазом. У нас уже был такой случай — когда был когда-то огромный издатель Flash-игр под названием Mochi. Там можно было вставлять флешки через iframe или ссылку на их сервере.

Потом внезапно Mochi сказал — «Извините, я накрылся медным тазом». Ну и соответственно, пара сайтов, где лежали тысячи игр с ссылками на чужой сервер, накрылись у меня тоже. По правде, я мог их наверное, успеть выкачать — но поскольку они не приносили дохода, на тот момент я не стал заморачиваться.

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

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

Вот эти издатели:

  1. GamePix.com
  2. famobi.com
  3. gamedistribution.com

На Kongregate.com и Newground.com тоже есть вроде своя партнерка, но здесь их не привожу, потому что это сайты другого типа — там может опубликоваться всякий и без рекламы, без условий, это порталы — коммюнити для разработчиков. А вот, чтобы попасть к GamePix и другим «настоящим» издателям — надо выполнить особый квест, условия которого можно прочесть на их сайтах.

PS: Emanuele Feronato, итальянский блоггер-разработчик, написал, что GameDistribution довольно легко интегрируется в готовую HTML5 игру. Но он только тестил, я так понял, не издавался еще по настоящему.