Visual Studio - Методи двовимірного малювання та бібліотеки для веб-ігор

Продукти та технології:

HTML5, Visual Studio Pro 2013, Visual Studio Community, ASP.NET

У статті розглядаються:

графічні стандарти двовимірного малювання;
включення бібліотек для спрощення процесу;
плюси та мінуси різних методів.

Довгий час по суті був лише один спосіб створення інтерактивних веб-ігор: Flash. Подобається він вам чи ні, Flash мав швидку систему малювання. Всі використовували його для створення анімацій, пригодницьких ігор у стилі «вкажи та клацніть» (point-and-click adventures) та інше.

Коли браузери стали відповідати веб-стандартам HTML5, почалося вибухове зростання можливостей у розробці швидкої та високоякісної графіки без необхідності використання плагінів. У цій статті буде представлений невеликий приклад методів малювання, а також нижченаведених технологій та деяких бібліотек, що спрощують їх застосування. Я не розглядатиму бібліотеки, спеціально призначені для ігор. Їх так багато, що цю тему припасу для іншої статті.

Стандарти малювання

З використанням HTML5 з'явилося три популярні способи малювання двомірної графіки: Document Object Model (DOM), полотно (canvas) та формат Scalable Vector Graphics (SVG). Перш ніж розпочати огляд бібліотек, які використовують ці технології, я розповім, як працює кожна з них, щоб ви краще розуміли недоліки кожного методу.

Нічого дивного в тому, що найбільш базовий спосіб малювання графіки в HTML це використання самого HTML. Створивши ряд зображень або фонових елементів і застосувавши бібліотеку на зразок jQuery, можна швидко підготувати спрайти, які можна переміщатибез перемальовки сцени. За вас це робить браузер. Цей вид структури часто називають граф сцени (scene graph). У випадку HTML-грфом сцени є DOM. Оскільки ви будете використовувати CSS для застосування стилів до своїх спрайтів, ви також можете задіяти CSS-переходи та анімації, щоб надати плавність руху об'єктів у вашій сцені.

Основна проблема у цьому методі – його залежність від рендеру DOM. Це може призвести до уповільнення за наявності складної сцени. Я б не радив використовувати більше кількох сотень елементів. Так що будь-яка гра складніша за матч з трьома учасниками (match-three) або платформер (platform game) може зіткнутися з проблемами продуктивності. А різке збільшення кількості елементів, наприклад, при використанні системи частинок, може викликати ривки в анімації.

Інша проблема з цим методом полягає в тому, що вам потрібно використовувати CSS для стилізації елементів. Залежно від того, як ви пишете CSS, застосування стилів може бути порівняно швидким або досить повільним. Нарешті, код, орієнтований на HTML, може бути важким у перенесенні іншу систему на кшталт некерованого C++. Це важливо, якщо ви хочете портувати гру на щось на зразок консолі. Ось зведення переваг:

опора на базову структуру веб-сторінки;
jQuery та інші бібліотеки спрощують переміщення об'єктів;
спрайти порівняно прості у підготовці;
вбудована система анімації з CSS-переходами та анімаціями.

І зведення недоліків:

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

Полотно вHTML5

У чому недолік? Оскільки полотно забуває, що він малював, відразу після цієї операції, вам доведеться самому перемальовувати сцену щоразу, коли ви захочете її змінити. І якщо вам потрібно модифікувати фігуру якимось складним чином, наприклад, згинанням або анімацією, ви повинні виконати обчислення і перемалювати цей елемент. А значить, вам потрібно підтримувати безліч даних про свою сцену у власних структурах даних. Це не така вже грандіозна справа, враховуючи наявність бібліотек, що спрощують реалізацію такого завдання. Якщо ви хочете зробити щось по-справжньому особливе, майте на увазі, що полотно не запам'ятовує інформацію за вас. Зрештою, полотно не включає анімації. Ви повинні малювати сцену послідовними кроками, щоб досягти плавної анімації. Ось зведення переваг:

малювання у прямому режимі — сцени можуть бути складнішими;
підтримка багатьох різних візуальних елементів.

І зведення недоліків:

відсутність запам'ятовування сцени - ви повинні самі дбати про все;
складні перетворення та анімації доводиться виконувати вручну;
відсутність системи анімації.

SVG: Scalable Vector Graphics

Як і HTML, малювання складних сцен може сповільнюватися в SVG. SVG здатний обробляти деякі складнощі, але не дотягує за своїми можливостями до полотна. Більш того, інструменти для маніпуляцій з SVG можуть бути складними, хоча існують інші інструменти, які спрощують процес. Ось зведення переваг:

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

І зведення недоліків:

висока складність може помітно погіршитипродуктивність;
Проблеми в маніпуляціях.

Оскільки полотно забуває, що він малював, відразу після цієї операції, вам доведеться самому перемальовувати сцену щоразу, коли ви захочете її змінити.

Бібліотеки двомірного малювання

Тепер, коли ви знаєте про стандарти, доступні для малювання в Інтернеті, я розгляну деякі бібліотеки, які можуть полегшити малювання та анімацію. Варто зазначити, що рідко хтось просто малює, нічого не роблячи з малюнком. Скажімо, вам часто потрібно робити так, щоб графіка реагувала на введення. Бібліотеки допомагають спростити найпоширеніші завдання, пов'язані з малюванням.

KineticJS Вам потрібний граф сцени для полотна? KineticJS - надзвичайно потужна бібліотека полотна, яка починає з графа сцени та додає більше функціональності. У своїй основі KineticJS дозволяє визначати шари на полотні, що містять фігури, що малюються. Наприклад, на рис. 1 показано, як намалювати просте червоне коло, використовуючи KineticJS.

Мал. 1. Малювання кола за допомогою KineticJS