Гра в HTML5 (полотно) - методи інтерфейсу?

Я зараз будую гру JavaScript / HTML5 (використовуючи Canvas) для мобільних пристроїв (Android / iPhone / WebOS) з PhoneGap. Наразі я намагаюся розробити спосіб побудови інтерфейсу та ігрової дошки та як вони повинні взаємодіяти, але я не впевнений, яке найкраще рішення. Ось що я можу придумати -

Створіть інтерфейс користувача прямо на полотно, використовуючи такі речі, як drawImage та fillText. Створіть частини інтерфейсу за межами полотна, використовуючи звичайні об’єкти DOM, а потім промальовуйте поділ над полотном, коли елементам інтерфейсу необхідно перекривати полотно гральної дошки. Чи існують інші можливі прийоми, які я можу використовувати для побудови ігрового інтерфейсу, про який я не думав? Крім того, який із них вважався б "стандартним" способом (я знаю, ігри HTML5 не дуже популярні, тому, мабуть, ще немає "стандартного" способу)? І нарешті, яким способом ви б рекомендували / користувались?

Заздалегідь дякую!

Обидва рішення (малювання на вашому полотні VS. традиційний HTML / CSS) цілком дійсні і будуть працювати чудово. Деякі речі, які слід врахувати:

• Якщо ви вже використовуєте бібліотеку на основі полотна, ваш код може бути більш чистим / організованим, продовжуючи використовувати полотно замість того, щоб мати додаткові (на основі DOM) методи користувальницького інтерфейсу.
• Якщо ваш інтерфейс дуже важкий для тексту (з діалогами тощо), то його можливо простіше реалізувати за допомогою HTML / CSS. Наприклад, досить тривіально, щоб текст протікав у DOM-елементі (з такими речами, як обгортання та інтервал між абзацами) і порівняно складно реалізувати в полотні.
• Залежно від бібліотеки, яку ви використовуєте, реалізувати обробку кліків на елементах DOM може бути набагато простіше, ніж у вашому полотні. Наприклад, якщо ви хочете виявити натискання кнопки "Ок", це тривіальна задача у світі HTML / JS. Але на полотні вам потрібно буде прослухати клацання на іншому елементі та перевірити його координати, щоб побачити, де відбувся клік.
• Деякі агенти користувача (особливо мобільні пристрої) можуть бути складними при використанні елементів DOM, що містять текст. Наприклад, мобільний Safari може захотіти спливати модальний інструмент з інструментами для копіювання / вставки. Запобігти такій поведінці може бути важко, і, ймовірно, буде легше на полотні.

Дещо з цього буде суб'єктивним; розробник, якого я знаю, завжди вважає за краще використовувати полотно, оскільки він просто вважає DOM некрасивим та багатослівним. Оскільки будь-яке рішення буде добре працювати, я вибрав би простий один екран у вашій програмі, швидко розробимо його окремо за допомогою обох методів і побачу, який із них відчуває себе легше / краще.

Удачі!

Я використовую easeljs для своєї взаємодії із полотном.

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

Це полегшує виконання бульбашок для пошуку CSS та статичних елементів інтерфейсу, таких як кадр hud та ін.

Перевага для браузерів полягає в тому, що ви отримуєте багате полотно, але ви можете заставити дрібніші та статичні речі до дому, щоб забезпечити працездатність.

Полотно повільне на мобільних платформах, принаймні мобільне сафарі все одно, тож ви хочете використовувати позиціонування об'єктів на основі CSS. Спеціально використовуйте "translate3d", який увімкне апаратне прискорене візуалізацію об'єктів.

Ознайомтеся з бібліотекою CAAT на полотні, проте це швидко, і ви можете використовувати "актори", підтримувані CSS, а не змінювати логіку гри.

Я поки не можу розміщувати посилання, але ось деякі псевдопосилання http://labs.hyperandroid.com/animation

Доведеться погодитись з повільністю полотна на iPhone 4. Досить впевнений, що GL не підтримує полотна сафарі. Моя весела гра працює швидко на iPhone 3GS та android, але на iPhone 4 Я думаю, що на дисплеї сітківки є занадто багато пікселів, або якщо полотно не їздить на GL, це пояснить, чому він тягнеться. Мені подобається модель розробки полотна, ще не спробував варіант css translate3d. Зокрема, я використовував GWT та полотно gwt-g2d (обгортка оптимізації / обфускування). http://www.photonjunky.com/shootout.html

Я б запропонував зберегти ваші елементи керування як елементи html, такі як menuі commandз причин доступності. Використовуючи трохи CSS, ви можете відображати елементи на полотні , а не втрачати заздалегідь вбудовану функціональність HTML.

Я знаю, що це давнє питання, але сьогодні (березень 2013 року) ми знаємо краще. Я вирішив відповісти на випадок, якщо хтось наткнувся сюди, як я. Я маю згоду з більшістю інших відповідей. Вони, ймовірно, дійсні для розробки веб-браузерів, але не для мобільних пристроїв. Це має велику різницю, який шлях ви обрали (DOM або анімація на полотні). Веб-перегляд Android повністю марний (повільний, заїкаючий) сам по собі, що робить Phonegap марним для розробки ігор для Android, якщо тільки ви не можете застосувати апаратне прискорення, яке наразі можливо лише за допомогою анімації полотна та відповідної рамки. Для отримання додаткової інформації дивіться цю відповідь .

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

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

Game.prototype.loadMenu = function() {
  var game = this;
  var can = this.canvas;

  // now we can use the mouse for the menu
  can.addEventListener('click', game.menuClickEvent, false);
  can.addEventListener('touchstart', game.menuClickEvent, false);

  // draw menu
  this.loop = setInterval(function() { game.drawMenu() }, 30);
};

Game.prototype.drawMenu = function() {
  // ... draw the menu
}

Game.prototype.loadLevel = function(levelstring) {
  // unload menu
  var can = this.canvas;
  var game = this;
  can.removeEventListener('click', game.menuClickEvent, false);
  can.removeEventListener('touchstart', game.menuClickEvent, false);

  if (this.loop) clearInterval(this.loop);

  // ... other level init stuff


  // now we can press keys for the game
  //can.addEventListener('click', game.gameClickEvent, false);
  can.addEventListener('touchstart', game.gameClickEvent, false);
  can.addEventListener('keydown', game.gameKeyDownEvent, false);

  this.loop = setInterval(function() { game.tick() }, 30);
}

// called from tick()
Game.prototype.draw = function(advanceFrame) {
  // ...
}

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