Создание html5 приложений с помощью CreateJS

2494
views

html5-games

После того как Apple, объявили о прекращении поддержки flash, нам открылся новый рынок с широкими горизонтами, а именно разработка новых и портирование уже существующих игр на html5. Даже малым веб-студиям начали сыпаться заказы на портирование игр и именно поэтому я представляю вводный курс в весьма известный и многофункциональный фреймворк CreateJS, который включает в себя такие пакеты: EaselJS, TweenJS, SoundJS и PreloadJS.

Гайд по использованию EaselJS, Tween JS and SoundJS

Easel.js

Элемент canvas — очень мощный инструмент, но работа с ним может показаться сложной. Так как отображение графических элементов в canvas весьма специфичное и при изменении состояния требуется ручное обновление так называемой сцены. Библиотека EaselJS позволяет легче начать работу новичкам и flash программистам.

EaselJS использует такой же синтаксис как ActionScript. Он содержит лист отображаемых элементов, сцену (Stage), объекты графики и даже фильтров, это позволят легче начать работу flash-разработчикам.

В дополнение к этому пакету, мы можем использовать библиотеки TweenJS и SoundJS, для работы с анимациями и звуком.

Иерархия отображения

var canvas = document.getElementById('canvas'),
    myStage = new createjs.Stage('canvas');
//Родителю myStage присваивается myChild
myStage.addChild(myChild);

В данном коде переменная myStage привязана к элементу canvas. А переменная myChild будет содержать элементы, которые необходимо отобразить. Пример мы рассмотрим ниже.

События

Навесить событие очень просто:

btn.on('click', function (e){
 console.log('clicked');
});

Текст

Добавить текстовый элемент тоже не составит труда:

var myText = new createjs.Text('Golosay.net', 'Bold 15px Helvetica', #FFF);
 
myText.x = 25;
myText.y = 25;
 
myStage.addChild(myText);
myStage.update();

В данном примере мы обновили сцену вручную. Но EaselJS уже содержит метод обновления сцены в автоматическом режиме:

Таймер (Ticker)

Метод ticker — это пульс нашего приложения. Выполняет такую же функцию, как и ActionScript3 Timer.

createjs.Ticker.setFPS(60);
createjs.Ticker.on('tick', function (e){
   game.stage.update();
});

Анимации с TweenJS

var animation = createjs.Tween.get;
animation(element).to({ scaleX: 0.8,scaleY: 0.8,x: 20, y: 45 }, 1500).call(callback);

Где в метод to() передаются новые параметры элемента, продолжительность анимации и прочие настройки. Также анимацию можно приостановить, задержать и вызывать по завершению колбэк.

Звук с SoundJS

var play_sound = createjs.Sound.registerSound("path_to_music_file", "play");
//теперь мы в любой момент времени можем воспроизвести данный звук
play_sound = createjs.Sound.play("play");

Hello world!

Какой же это гайд к библиотеке без примера hello world?!

Для начала подготовим наш минимально базовый html документ, который необходим для нашего html5 приложения.

Шаг 1: html структура

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>

  </body>
</html>

Шаг 2: Скрыть подсветку на мобильных устройствах.

Данное действие не является обязательным, но оно скроет подсветку элементов при касании на мобильных устройства на движке  webkit (safari, chrome).

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>
  </head>
  <body>

  </body>
</html>

Шаг 3: JavaScript библиотеки

Следующий код подключит необходимые библиотеки и файлы к нашему приложению.

<!DOCTYPE html>
<html>
 <head>
 <title>Hello World</title>
 
 <style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>
 
 <script src="easel.js"></script>
 <script src="Tween.js"></script>
 <script src="HelloWorld.js"></script>
 </head>
 <body>
 </body>
</html>

Шаг 4: Вызов главной функции

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

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
         
        <style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>
 
        <script src="easel.js"></script>
        <script src="Tween.js"></script>
        <script src="HelloWorld.js"></script>
 
    </head>
    <body onload="Main();">
    </body>
</html>

Шаг 5: Элемент canvas

Добавим в нашу верстку html5 элемент canvas, в котором будет отображаться наше приложение.

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>

<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>

<script src="easel.js"></script>
<script src="Tween.js"></script>
<script src="HelloWorld.js"></script>

</head>
<body onload="Main();">
  <canvas id="HelloWorld" width="480" height="320"></canvas>
</body>
</html>

Шаг 6: Основа приложения

/* Объявим базовые переменные */

var canvas;
var stage;

/* Фон */

var bgSrc = new Image(); //эта переменная будет хранить исходное изображение
var bg; // объект bitmap object,который будет использовать easeljs

Теперь наше приложение будет выглядеть так:

html5 приложение с фоном

Шаг 7: Интерфейс

/* Кнопка */

var btnSrc = new Image();
var btn;

/* Variables */

var centerX = 275; //центр нашей сцены
var centerY = 150;
var gfxLoaded = 0; //preloader

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

Шаг 8: Главная функция-конструктор

Конструктор — это функция, которая запускается после создания объекта класса. В нашем случае функция будет запущена как только наш апп загрузится.

function Main()
{
    //код...
}

 Шаг 9: Подключение canvas

В данном коде мы задаем canvas элемент и создаем в нем сцену, подключив ее к классу EaselJS Stage.

/* подключим Canvas */
     
canvas = document.getElementById('HelloWorld');
stage = new createjs.Stage(canvas);

 Шаг 10: Включение события ховера мыши

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

stage.enableMouseOver();

 Шаг 11: Подключение графики

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

/* Загрузка графики */
 
 bgSrc.src = 'bg.png';
 bgSrc.name = 'bg';
 bgSrc.onload = loadGfx;
  
 btnSrc.src = 'button.png';
 btnSrc.name = 'button';
 btnSrc.onload = loadGfx;

 Шаг 12: Установка тикера

Для того, что бы приложение было не статичным, а живым главной сцене нужно задать частоту обновления. Специальный класс TweenJS будет слушать его и обновлять элементы/воспроизводить анимации с определенной частотой кадров в секунду.

/* Тикер */
 
 createjs.Ticker.setFPS(30);
 createjs.Ticker.addEventListener("tick", handleTick);
 function handleTick(event) {
 // код, который будет выполняться при тике
    stage.update();
 }

 Шаг 13: Предзагрузка графики

Каждый раз, когда новый графический элемент подключен будет вызываться данная функция. Она будет назначать новый объект bitmap с проверкой, что ресурс полностью загрузился.

function loadGfx(e)
{
    if(e.target.name = 'bg'){bg = new Bitmap(bgSrc);}
    if(e.target.name = 'button'){btn = new Bitmap(btnSrc);}
     
    gfxLoaded++;
     
    /* Отображение только после полной загрузки */
     
    if(gfxLoaded == 2)
    {
        buildInterface();
    }
}

Шаг 14: Расположение графических элементов

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

function buildInterface()
{
 btn.x = centerX - 40;
 btn.y = centerY - 12;
 btn.cursor = "pointer";

 /* Create Text */
 
 msg = new createjs.Text('Hello World!', 'Bold 25px Arial', '#fff');
 msg.x = centerX - 70;
 msg.y = centerY - 30;
 msg.alpha = 0; //Сделаем прозрачным и при клике отобразим
 stage.addChild(bg,btn,msg);

 stage.update(); // Очень важно обновить сцену
 
 /* Add button listener */
 
 btn.on('click', function (e){
   showText();
 });
}

Шаг 18: Функция при клике

Эта функция будет вызываться при клике перемещая кнопку ниже и показывая с анимацией текст «Hello world!».

function showText()
{
  console.log('Тыкнули');
  
  /* Удалим обработчик кликов */
  
  btn.onPress = null;
  
  /* Анимация элементов */
  
  createjs.Tween.get(btn).to({y:centerY + 50}, 300);
  createjs.Tween.get(msg).wait(400).to({alpha:1}, 400);
}

Ну вот и все. Теперь мы создали простейшее  html5 canvas приложение с помощью библиотеки CreateJS.

Финальное демо приложения hello world.