HTML5 Game (Canvas) - методы пользовательского интерфейса?

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

Создайте пользовательский интерфейс прямо на холсте, используя такие вещи, как drawImage и fillText. Создайте части пользовательского интерфейса за пределами холста, используя обычные объекты DOM, а затем поместите div на холст, когда элементы пользовательского интерфейса должны перекрывать холст игровой доски. Существуют ли другие возможные методы, которые я могу использовать для создания игрового интерфейса, о которых я не думал? Кроме того, какой из них будет считаться «стандартным» способом (я знаю, что HTML5-игры не очень популярны, так что, вероятно, пока нет «стандартного»)? И, наконец, какой путь вы бы рекомендовали / использовали?

Спасибо заранее!

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

• Если вы уже используете библиотеку на основе холста, ваш код может быть чище / более организован, если продолжать использовать холст вместо использования дополнительных (основанных на DOM) методов для пользовательского интерфейса.
• Если ваш пользовательский интерфейс очень объемный (с диалогами и т. Д.), То его проще реализовать через HTML / CSS. Например, текст довольно просто для потока текста в элементе DOM (с такими вещами, как обтекание и интервал между абзацами) и сравнительно трудно реализовать на холсте.
• В значительной степени зависит от используемой вами библиотеки, может быть намного проще реализовать обработку щелчков на элементах DOM, чем на вашем холсте. Например, если вы хотите обнаружить нажатие на кнопку «ОК», это простая задача в мире HTML / JS. Но в канве вам нужно будет прослушать щелчок по другому элементу и проверить его координаты, чтобы увидеть, где произошел щелчок.
• Некоторые пользовательские агенты (особенно мобильные устройства) могут быть хитрыми при использовании элементов DOM, содержащих текст. Например, в Mobile Safari может появиться модальное окно с инструментами для копирования / вставки. Предотвращение такого поведения может быть трудным и, вероятно, будет легче на холсте.

Часть этого будет субъективной; Разработчик, которого я знаю, всегда предпочитает использовать canvas, поскольку он просто считает DOM уродливым и многословным. Так как любое решение будет работать нормально, я бы выбрал простой единственный экран в вашем приложении, быстро разработал его отдельно, используя оба метода, и увидел бы, какой из них удобнее / лучше.

Удачи!

Я использую мольберты для взаимодействия с холстом.

Это довольно хорошо и облегчает прочный дизайн. Одной из ключевых особенностей, которые заставили меня выбрать, была возможность синхронизировать положение ваших объектов Canvas и элементов DOM.

Это позволяет легко создавать CSS-пузыри речи и статические элементы пользовательского интерфейса, такие как рамка hud и тому подобное.

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

Холст медленный на мобильных платформах, по крайней мере, мобильное сафари в любом случае, так что вам нужно использовать позиционирование объектов на основе CSS. В частности, используйте «translate3d», который включает аппаратное ускорение рендеринга объектов.

Взгляните на библиотеку CAAT для canvas, это быстро, и вы можете использовать CSS «поддерживаемых» актеров, а не изменять игровую логику.

Я пока не могу опубликовать ссылки, но вот некоторые псевдо-ссылки http://labs.hyperandroid.com/animation

Нужно согласиться с медлительностью холста на iPhone 4. Уверен, холст для сафари не поддерживается GL. Моя дурацкая игра работает быстро на iPhone 3GS и Android, но на iPhone 4 я думаю, что дисплей сетчатки имеет слишком много пикселей, или, если холст не движется на GL, это объясняет, почему он тянет. Мне нравится модель разработки canvas, я еще не пробовал использовать 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) {
  // ...
}

Таким образом, я могу отделить игровой рисунок и игровые события от рисования меню и событий меню. Это также дает мне возможность использовать элементы меню / анимации в моих меню, если я хочу, чтобы они выглядели очень красиво.