Двомірні ігри. 
Розробка HTML5 додатку для візуалізації та маніпуляції сітками елементів

Під казуальними іграми тут маються на увазі прості двомірні ігри для Інтернету. Технологію (тобто Canvas або SVG) вибирає розробник. Оскільки історично бібліотеки ігор використовували API низкоуровневой графіки, спостерігатиметься тенденція до зміщення в бік .

Коли інші компоненти бібліотеки розташовуються значно глибше, ніж шар графіки (наприклад, популярні фізичні модулі), графіка стає деталлю реалізації. Геометричні компоненти графіків, такі як кордони, швидкості, розміри і розташування передаються модулям, які згодом реагують, генеруючи значення швидкості, зіткнення та розташування. Графіка займає найвище становище в стек.

Концепцію графіки, не залежну від логіки гри можна побачити у двох іграх, розроблених одним і тим же автором, який хотів продемонструвати використання технологій і: SVG — oids і canvas — pinball. Більш вдалий приклад незалежності рівня графіки від ігрового модуля можна побачити, порівнявши canvas — pinball з SVG — Dice, оскільки в обох випадках застосовується один і той же фізичний модуль.

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

Що стосується canvas — pinball, тут настроюється диспетчер анімації верхнього рівня перемальовує сцену за допомогою послідовності API Canvas.

if (animationsInProgress) {.

ctx.save ();

ctx.lineWidth = 2.0;

ctx.beginPath ();

ctx.moveTo (89, 322);

ctx.lineTo (101, 295);

.

.

.

ctx.stroke ();

ctx.restore ();

ctx.moveTo (tVp.x, tVp. y);

}.

Якщо мова йде про гру SVG Dice, то настроюється диспетчер анімації верхнього рівня використовує перетворення в групах для переміщення існуючої графіки на екрані за допомогою DOM.

if (animationsInProgress).

{.

this.rotation += (this.circleBody.m_linearVelocity.x/20);

var transFormString = «translate («+.

Math.round (this.circleBody.m_position.x) + «,» +.

Math.round (this.circleBody.m_position.y) + «) scale («+.

this.scale.toString () + «) rotate («+.

Math.round (this.rotation).toString () + «,» +.

Math.round (this.xTrans).toString () + «,» +.

Math.round (this.yTrans).toString () + «)» ;

this.die2.setAttribute («transform», transFormString);

}.

Отже, поки одна гра перемальовує і переміщує фігури, інша виконує тільки переміщення, але зберігає фігуру в пам’яті за рахунок виділення ресурсів. Для більшості казуальних ігор подібна ціна досить мала, проте вважається, що для ігор звична ідея використання графічної системи з інтерфейсами API більш низького рівня, що працює в безпосередньому режимі.

Розширені сценарії.

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

Проектування користувальницького інтерфейсу Кілька років тому вважалося, що для проектування користувальницького інтерфейсу необхідно використовувати технологію SVG. Вимоги відповідають SVG. Насправді, принаймні один інтерфейс операційної системи Linux створений повністю на базі SVG. Елементи управління зі стандартного внутрішнього набору, такі як повзунки, прапорці, кнопки з округленими кутами і інші нестандартні компоненти, досить просто реалізувати за допомогою векторної графіки. Однак, завдяки недавнім і майбутнім нововведенням в CSS, включаючи закруглені кути, градієнти, фільтри і події - покажчики, переважна більшість цих елементів управління можуть бути розроблені за допомогою стандартних конструкцій HTML для документів з рамкової моделі. Інші елементи керування (особливо після недавнього появи моделей «сітка CSS» і «адаптується блок CSS») скоріше орієнтовані на елементи HTML, принаймні, застосовуються як контейнерів.

Тут наведено приклад складної, керованої даними діаграми. Незважаючи на те що вихідні дані спроектовано не дуже вдало, кінцевий результат представлений добре. Загальновідомо, що елементи управління графіками та діаграмами складно розробляти, проте сторонні виробники, як і корпорація Майкрософт, дуже процвітали в цьому. Це знижує навантаження на розробників, надаючи абстракції для прив’язки даних на стороні клієнта або на стороні сервера, але на сьогоднішній день для Інтернету рендеринг на стороні клієнта ще досить статичний або вимагає установки додаткових модулів. У прикладі нижче розширене взаємодія з користувачем забезпечувалося за рахунок багатих можливостей SVG. Незалежно від того коду, який буде наданий клієнтові (в майбутньому можливо більш декларативне взаємодія), діаграма відображається за допомогою двох ключових компонентів. Оточення і дані Оточення або фон діаграми є базовою статичної SVG:

milliseconds.

Далі кожна окрема точка даних або доставляється клієнту і динамічно обробляється, або формується на сервері:

{Page}.svg.

6.1%.