2017-03-10

Авто-генерация атласов

Работая над карточной игрой мне часто приходилось создавать разные атласы, объедененные с bitmap-шрифтами. В какой то момент мне надоело каждый раз руками пересобирать атласы, и я решил этот процесс максимально автоматизировать. В итоге родился python-скрипт, который умеет объеденять изображения и шрифты в один атлас, причем делает это по заранее загатовленным настройкам в json-файле, а еще он умеет сжимать изображения с помощю сервиса tinypng. Итак, давайте сперва разберем с чем имеем дело. Слева исходные файлы, а справа - то что хотим в итоге получить, файлы кликабельные, можно открыть и посмотреть:

./content/

fonts/

textures/
- ui/
  - buttons/
    - cry_normal.png
    - cry_over.png
  - coins/
    - coin1.png
    - coin2.png
  - timer/
    - back.png
    - shadow.png
  - temp.jpg
- animation/
  - flash/

>>

./res/

ui/

ui.plist

ui.png

ScoreNums.fnt

Tahoma14.fnt

anim/

FlashAnimation.plist

FlashAnimation.png

Этот скрипт я использую для сборки атласов для Cocos2d JS проекта, но его можно использовать в любом другом, если немного подправить код обработки файла с bitmap-шрифтом.

2017-03-01

Cocos2d

Оптимизация текстур + автоматизация сборки

Всем привет. Давайте немного поговорим об оптимизации, я часто слышу от разных людей что преждевременная оптимизация это зло, но тем не менее лучше сразу использовать базовые правила оптимизации, чтобы потом не переписывать много кода. О чем будет статья? Начнем с основ, как и зачем объеденять изображения в атласы, как объеденить атласы с bitmap-шрифтом, как сжать png-файлы без сильной патери качества, ну и на последок как все эти процессы автоматизировать с помощью python скрипта, который можно запускать на любой ОС. Примеры будут написаны на Cocos2d, но в целом эти правила применимы для любого webgl-движка.

2017-02-12

Cocos2d

Примеры шейдеров для Cocos2d-JS

Всем привет. Будучи флешером, меня всегда волновала тема написания шейдеров, к сожалению на флеше не было возможности писать полноценные шейдеры, только AGAL-жалкое подобие. В webgl вы можете и должны писать шейдеры на языке GLSL. В каждой библиотеке, будь то Cocos2d или PIXI, существуют свои небольшие правила и соглашения, которым надо следовать для написания шейдера. В этой статье я хочу показать несколько примеров того, как написать шейдер для фреймфорка Cocos2d-JS. Будут рассмотрены примеры реализации следующих фильтров:

Чтобы легче было представить чем будем заниматься, вот превью фильтров:

Если вам лень читать нудятину которую я тут собираюсь писать, и вам легче воспринимать информацию читая код, вот репозиторий с готовым проектом: https://github.com/abdulgalimov/Cocos2d-Shader-Examples . Только имейте ввиду, что коды шейдеров в этом примере написаны для изучения темы и они написаны довольно универсально, что, как правило, приводит к падению производительности, поэтому для использования в продакшине желательно их немного оптимизировать для конкретных нужд.

2017-01-23

nodejs

Создаем бота для телеграм на nodejs

Вы пишите или собираетесь писать игру на JavaScript, и вас мучают вопросы как быть с сервером игры, или как написать бота чтобы опубликовать свою игру в Telegram или другом мессенджере? Спешу обрадовать, на JavaScript вы можете писать серверные приложения, в том числе полноценные сервер с http/сокет соединением и ботов для любых мессенджеров. Может быть в будущем я как нибудь расскажу как написать сокет сервер, в этой же я покажу вам пошагово как создать бота в Telegram, а в следующей как создать свою первую игру и опубликовать в мессенджере Telegram. Статья разделена на несколько частей:

Если вы знакомы с каким либо пунктом, можете сразу приступить к следующему. Погнали…

2017-01-09

Cocos2d

Cocos2d продолжение знакомства

Эйфория после первого знакомства с Cocos2d закончилась, новогодние праздники прошли… наступили суровые будни разработчика. В процессе разработки моей первой игры на Cocos2d JS, я периодически натыкался на разные проблемы, которые мне показались не очень тривиальными. Попробую рассказать о них:

2016-12-27

Cocos2d

Hello Cocos2d

Друзья, я тут решил между делом познакомитсья с Cocos2d-JS, и мое первое впечатление:

1	"АААА, зачем я столько лет писал на флеше....!?"

Это мега удобный движок, если вы его не пробовали, настоятельно рекомендую пощупать. На данный момент я не утверждаю что он лучший, поэтому прошу не разводить холивара. Я еще буду пробовать другие JS-движки и фреймворки, и возможно в будущем буду писать сравнительные статьи, но если вы пишите игры на флеше или JS - вам однозначно надо хотя бы попробовать Cocos2d. Хотя бы потому он один из не многих кто позволяет компилировать сразу на все платформы, т.е. вы пишите игру на JavaScript, и получаете сборку сразу на платформы web, desktop, mobile. Вот прототип карточной игры, который я собрал на Cocos2d-JS:

2016-12-19

Загрузка анимации в JS

В прошлой статье я рассказывал как можно конвертировать флешовую скелетную анимацию в HTML5/Canvas формат, на выходе у нас должен был получится JS файл с описанием анимации, и png атлас для скинования скелетной анимации. Что бы вы лучше понимали что мы будем делать вот пример того что в итоге мы должны получить:

Собирается такая анимация на JavaScript из двух файлов:

JS файл с описанием скелета анимации
png скин для скелета

Как это загрузить в и отобразить в браузере, читайте далее…

2016-12-18

convert

Экспорт анимации

В прошлой статье мы разбирали как экспортировать из флеша простой контент: изображения, анимации в png-sequence, и т.п. Если же у вас есть скелетная анимация, с большим количеством кадров, экспортировать такую анимацию в png-sequence - это не решение проблемы. В этой ситуации мы можем конвертировать анимацию в HTML5/Canvas с помощью Adobe Animate. В это статье я расскажу как это сделать руками в редакторе, и какие сложности могут возникнуть при написании JSFL-скрипта.

2016-12-18

convert

Экспорт контента

Я очень долго занимался разработкой на Flash, сделано много проектов на флеше. Теперь возникла необходимость переделать флешь игры на JavaScript. Блог посвящен разработке на JS, поэтому очень хочется приступить к написанию статей посвященных именно ему. Но я все таки решил сперва рассказать как конвертировать существующий flash-контент в JS формат, чтобы нам было с чем работать :). Конвертирование контента может происходить в несколько этапов, и выполняется разными способами, в зависимости от того, что вы конвертируете: картинки, анимации, звуки… В этой статье я расскажу как можно извлечь изображения из .fla файла и скомпилированного .swf.

2016-12-16

Hello World

Приветствую, друзья!

В своей первой статье в этом блоге я решил рассказать немного о себе. Чем я занимаюсь и о чем буду писать в этом блоге.
Последние 10 лет я разрабатывал браузерный игры на флеше, но флешь технология отмирает а разрабатывать игры всегда нравилось, поэтому решил попробовать себя в языке JavaScript и писать иры на Canvas/WebGL.

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

Погнали…