Використання CreateJS - EaselJS

() translation by (you can also view the original English article)

У цьому посібнику ми будемо розглядати набір бібліотек CreateJS. CreateJS – це набір бібліотек JavaScript і бібліотек для створення багатого, інтерактивного досвіду користування за допомогою HTML5. Цей набір складається з 4-х бібліотек:

EaselJS – полегшує роботу з canvas (* елемент HTML5, призначений для створення растрового двовимірного зображення за допомогою JavaScript. Тут і надалі примітка перекладача).
TweenJS – використовується для твінінгу (* побудування проміжних відображень; плавний перехід від одного ключового кадру до іншого з [автоматичним] створенням проміжних кадрів (в анімації)).
SoundJS – полегшує роботу з HTML5 Audio
PreloadJS – дозволяє вам керувати та погоджувати завантаження ресурсів.

Перша бібліотека, яку ми розглянемо, – це EaselJs. Давайте почнемо!

Як працювати з EaselJS

EaselJS – бібліотека для роботи з canvas HTML5. Вона складається з повного ієрархічного дисплейного списку (* набір векторів, використовуваних для побудови зображення на екрані), базової моделі взаємодії та допоміжних класів для значного полегшення роботи з Canvas. Почати роботу з EaselJS дуже просто. Вам необхідно буде визначити елемент canvas у вашому HTML та послатися на нього у вашому JavaScript. EaselJS використовує концепцію Stage (* сцени), що є Container найвищого рівня для дисплейного списку (сценою буде ваш елемент canvas). Нижче наводиться фрагмент HTML та відповідний код JavaScript, необхідний для налаштування EaselJS.

1	<canvas id="testCanvas" width="600" height="300"></canvas>

Для того, щоб послатися на canvas вище, ви би використовували наступний код:

1	var canvas = document.getElementById("testCanvas");
2	var stage = new createjs.Stage(canvas);

Рисування за допомогою класів Graphics и Shape

У EaselJS є клас Graphics, що надає легкий у використанні API для створення інструкцій векторного рисунка та прорисовування їх на зазначений контекст. Команди дуже подібні до тих, що використовуються у звичайному Canvas HTML5, а також у EaselJs є деякі власні команди для роботи з Canvas. Якщо ви не знайомі з HTML5 та командами для рисування, можливо, ви захочете подивитися курс, що недавно вийшов, – Canvas Essentials. Звичайно ви не будете використовувати сам клас Graphics, а скоріше звернетеся до нього за допомогою класу Shape. Нижче наводиться JSFiddle (* онлайн редактор коду для тестування JavaScript, HTML та CSS), у якому використовується той самий клас Shape для рисування деяких фігур.

Як ви можете побачити в коді вище, команди можна причіпляти одна до одної ShapeObject.graphics.setStrokeStyle(1).beginStroke("rgba(0,0,0,1) тощо.. Також ви могли помітити виклик stage.addChild() усередині функцій. Кожного разу, коли ви хочете прорисувати щось на canvas, ви повинні викликати stage.addChild(). Усередині функції drawShapes() є виклик stage.update(). Для того, щоб побачити зроблені зміни, ви повинні викликати stage.update() після того, як робите кожну з них на canvas. Цієї необхідності можна уникнути за допомогою класу Ticker. Ticker надає централізований крок чи ритм, що розсилається по заданому інтервалу. Обробники подій можуть підписуватися на подію tick, щоб отримати повідомлення про те, що заданий проміжок часу вийшов. Нижче показано, як би ви використовували клас Ticker для автоматичного оновлення сцени.

1	createjs.Ticker.addEventListener("tick", handleTick);
2	function handleTick(event) {
3	stage.update()
4	}

Клас Shape має повний комплект властивостей, які ви можете контролювати, такі як x, y positions, alpha, scaleX, scaleY і доволі багато інших. Нижче наводиться демоверсія, на якій показано використання деяких із них.

Усередині drawTheShapes() ми створюємо 15 кіл із лінією, що прорисована через них. Завдяки можливості зчеплення інструкцій для рисування зробити це дуже просто. Потім ми рандомізуємо (* надаємо випадкового характеру) shapes position (* положення фігур), scale (* масштаб), rotation (* поворот) и alpha (* четвертий компонент коліру, використовуваний для контролю змішування кольорів з фоном або підлеглим об'єктом. У цьому разі його значення, що дорівнює 1,0, означає цілковиту непрозорість, а 0,0 - цілковиту прозорість об'єкта).

Ви можете додати можливість реагувати на події, такі як click, mousedown/over/out тощо за допомогою методу on(). У цій демоверсії, коли ви натискаєте по одній із фігур, то вискакує попередження, а при mouseout виводиться повідомлення до консолі. Для того, щоб зробити можливим реагування на подію mouse (mousedown/over/out тощо) на сцені, вам необхідно викликати stage.enableMouseOver(frequency), де frequency – число разів за секунду, яке повинні бути розіслані події mouse. Це можливість, що споживає багато ресурсів, так що за налаштуванням вона відключена.

Клас Text

У EaselJS є клас Text, за допомогою якого можна легко створювати текст та змінювати його властивості. Ви викликаєте конструктор, передаючи текст шрифт та колір, тобто new createjs.Text("Hello World", "20px Arial", "#ff7700"). Як і класу Shape, у Text є багато методів та властивостей. Нижче наводиться демоверсія, у якій використовується клас Text.

Подібно до попередньої демоверсії ми створюємо 25 TextFields та застосовуємо деякі випадкові значення для їх властивостей.

Демонстраційний проект – Hangman (* «Шибениця»)

Нижче наводиться демоверсія – hangman game (* ігра «Шибениця»), створена за допомогою класів Shape та Text, які ми на цей момент розглянули у цьому посібнику.

Для прорисовування шибениці та тулуба ми використовуємо комьбінацію lineTo() и moveTo(), а для прорисовування голови – метод arc(). Усередині функції drawCanvas() ми викликаємо метод clear() hangmanShape.graphics, за допомогою якого видаляються раніше нарисовані елементи фігури. Ми змінюємо колір TextFields залежно від того, виграв чи програв гравець свою гру.

Bitmaps

Ви можете використовувати зображення за допомогою класу Bitmap (* bitmap – бітове (растрове) відображення графічного об'єкта). Bitmap представляє зображення, canvas чи відео у дисплейному списку. Йому можна присвоїти значення завдяки існуючому елементу HTML чи рядку (у кодуванні Base64). Наприклад, new createjs.Bitmap("imagePath.jpg").

Подібно до попередніх демоверсій ми створюємо тут три зображення та задаємо випадкові значення їх властивостей.

Ми використовуємо клас Shadow для створення декількох тіней. Клас Shadow приймає у якості параметрів колір, offsetX, offsetY, величину эфекту розмиття тощо myImage.shadow = new createjs.Shadow("#000000", 5, 5, 10). Ви можете створити тіні для будь-якого Display Object, так що це можливо і для тексту.

Sprite і SpriteSheets (* спрайт; легко переміщуваний по екрану растровий графічний елемент (наприклад, куля або ракета), який часто реалізують за допомогою апаратних засобів)

Sprite відображує кадр або послідовність кадрів (подібно до анімації) зі зразка SpriteSheet. Sprite sheet – це серія зображень (звичайно кадрів анімації), скомбінованих у єдине зображення. Наприклад, анімація, що складається з 8 зображень розміром 100x100, може бути згрупована у sprite sheet розміром 400x200 (шириною в 4 кадри та висотою у 2). Ви можете відобразити індивідуальні кадри, показати їх у вигляді анімації та навіть програти ряд анімацій. Для ініціалізації зразка Sprite ви передаєте SpriteSheet і, як необов'язкові параметри, число кадрів або необхідний вам тип анімації, наприклад, new createjs.Sprite(spriteSheet,"run"). Дані, що передаються до конструктора SpriteSheet, визначають три важливі частини інформації:

Зображення або зображення, які необхідно використовувати.
Розташування окремих кадрів зображень. Ці дані можуть буди представлені двома способами: у вигляді регулярної сітки (решітки) (* двовимірна сітка у вигляді безлічі точок, розташованих з певним однаковим кроком у робочому вікні) послідовних, рівновеликих кадрів або у вигляді кадрів різних розмірів, властивості яких задані індивідуально і які розташовані нерегулярним (непослідовним) способом.
Подібно до попередніх даних анімації можуть бути представлені двома способами: у вигляді серії послідовних кадрів, початок та кінець яких визначається початковим та кінцевим кадром [0,3], або ж у вигляді списку кадрів [0,1,2,3].

Нижче наводиться приклад коду, за допомогою якого відбувається ініціалізація спрайту «персонажа».

var data = new createjs.SpriteSheet({
"images": ["path/to/image.png"],
"frames": {"regX": 0, "height": 96, "count": 10, "regY": 0, "width": 75},
"animations": {"walk": [0, 9]}
});
character = new createjs.Sprite(data, "walk");
character.play();

Нижче наводиться демоверсія, в якій використовується класи Sprite та SpriteSheet. Вам необхідно клацнути по сцені, і потім ви можете використовувати клавіши "A" для руху наліво і «D», щоб рухатися направо. Особливістю, на яку необхідно звернути увагу у цій демоверсії, є те, що зображення закодовані у кодуванні Base64 та підключаються "imagestrings.js" (з зовнішнього ресурсу). Оскільки ми використовуємо SpriteSheet та взаємодіємо з мишею, то canvas підпадає під обмеження політики міждоменного обміну зображеннями (CORS (Cross-Origin Resource Sharing) – міждоменний обмін ресурсами). Завдяки використанню рядків у Base64 ми можемо подолати це обмеження. Якщо б це було розташовано на нашому власному домені, то ми би використовували клас Bitmap як звичайно, передаючи йому елемент чи путь.

Усередині функції setup() ми створюємо spritesheet. У якості значення для властивості "images" я передаю characterImage – закодований у кодуванні Base64 рядок. У якості значення для властивості «frames» використовуються зображення висотою 96px, шириною 75px; і в нас є 10 кадрів (окремих зображень). Нижче наводиться зображення, яке ми використовуємо для spritesheet, так що ви можете уявити, як воно виглядає.

У якості значення для властивості "animation" ми визначаємо тип "run", при якому кадри програються від 0 до 9. У кінці ми створюємо character із spritesheet.

Коли ви рухаєте персонажа наліво чи направо, ми викликаємо character.play(), а при завершенні руху ми викликаємо character.gotoAndStop(0). Оскільки ми маємо тільки одну анімацію, то ми можемо просто викликати play() і gotoAndStop(); якщо б у вас була серія анімацій, то ви би використовували комбінацію цих двох та gotoAndPlay().

Container

Клас Container – гніздовий дисплейний список, завдяки якому ви можете працювати зі складними елементами зображення. Наприклад, ви можете згрупувати зразки Bitmap для руки, ноги, тулуба та голови у Person Container і далі перетворювати їх як групу, при цьому маючи можливість переміщувати окремі частини відносно один одного. У дочірніх елементів є свої власні властивості transform и alpha, що зціплені з їх батьківським Container. Нижче наводиться демоверсія, у якій використовується клас Container. Клацніть по сцені для переміщення контейнеру на 20px.

Тут ми створюємо три растрових зображення та додаємо їх до container; далі в нас є можливість переміщувати їх усі разом за допомогою переміщення container, проте не зважаючи на те, що всі знаходяться у контейнері, ми все одно можемо переміщувати кожний із них окремо.

Cache()

При використанні метода cache() об'єкта відображення він прорисовується на новий canvas, що потім використовується для подальших прорисовувань. Для складного контенту, що змінюється рідко (наприклад, Container із багатьма дочірніми елементами, що не рухаються, або Shape на основі комплексного вектора), завдяки цьому методу може бути досягнуто більш швидкіше відображення, оскільки контент не повинен заново відображатися при кожному кроку.

Поміщений до кеша об'єкт відображення можна вільно рухати, вертіти, видаляти тощо, проте при зміні його контенту вам необхідно буде власноручно оновити кеш за допомогою повторного виклику updateCache() або cache(). Вам необхідно задати область для кешування через параметри x, y, w та h. Завдяки їй визначається прямокутник, що буде відображено та поміщено до кеша на основі координат об'єкта відображення. Звичайно кешування не варто використовувати для класу Bitmap, оскільки через це може знизитися продуктивність, проте якщо ви хочете використовувати фільтр для Bitmap, то його варто помістити до кеша.

Через обмежень розміру для підключень на JSFiddle я не буду надавати демоверсію для цього методу, проте дам вам посилання на демоверсію на сайті CreateJs.

Filters (* фільтри)

Класс Filter – це базовий клас, від якого повинні успадкувати властивості всі інші фільтри. Фільтри повинні бути застосовані до об'єктів, які було поміщено до кеша за допомогою методу cache. Якщо об'єкт змінюється, то вам необхідно буде помістити його до кеша знову або використовувати updateCache(). Зверніть увагу, що фільтри повинно бути застосовано перед поміщенням до кеша. EaselJS надає серію заздалегідь створених фільтрів. Зверніть увагу, що окремі фільтри не скомпільовані до мініфікованої версії EaselJS. Для того , щоб їх використовувати, вам необхідно підключити їх уручну в HTML.

AlphaMapFilter : підключає шкалу яскравості (* півтонове зображення, що представляє тільки плавний перехід від чорного через сірий до білого та дозволяє оцінити кількість одночасно відображених відтінків сірого кольору) до каналу alpha об'єкта відображення
AlphaMapFilter: підключає канал alpha зображення до каналу alpha об'єкта відображення
BlurFilter: застосовує вертикальне та горизонтальне розмиття до об'єктів відображення
ColorFilter: трансформує колір об'єкта відображення
ColorMatrixFilter: трансформує зображення за допомогою ColorMatrix

У демоверсії нижче використовується Color Filter; при кліку по сцені завдяки йому відбувається видалення зеленого каналу зі сцени. Color Filter має наступні параметри:

1	ColorFilter( [redMultiplier=1] [greenMultiplier=1] [blueMultiplier=1] [alphaMultiplier=1] [redOffset=0] [greenOffset=0] [blueOffset=0] [alphaOffset=0])

Припускається, що Multipliers red, green, blue та alpha будуть числами від 0 до 1, а Offset red, green, blue та alpha – числами від 255 до 255.

Ми створюємо звичайний об'єкт растрового зображення, застосовуємо фільтр і потім кешуємо його.

Кінцева демоверсія

Я створив одну фінальну демоверсію, яку ми розробимо у наступній частині цієї серії, додавши до неї звук, попереднє завантаження ресурсів та використавши tween.

У цій демоверсії ми використовуємо класи Bitmap, Text та Shape для створення гри типу Space Invaders (* Космічні загарбники). Ми не будемо розбирати тут кожний крок, оскільки наша ціль – просто показати, як використовувати концепції разом, проте якщо у вас будуть якісь питання про код, то без вагань запитуйте у коментарях. Виявлення зіткнень реалізується завдяки детектору, розробленому osln, через Github.

Завершення

У цбому посібнику ми розглянули EaselJS і створили декілька демоверсій додатків. Я сподіваюсь, що ця стаття видалася вам корисною і що вона пробудила у вас інтерес до EaselJS. Дякую за читання!