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

Question

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

1. Создайте пользовательский интерфейс прямо на холсте, используя такие вещи, как drawImage и fillText
2. Создайте части пользовательского интерфейса за пределами холста, используя обычные объекты DOM, а затем поместите div на холст, когда элементы пользовательского интерфейса должны перекрывать холст игровой доски.

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

Большое спасибо заранее!

EDIT

Я перенес этот вопрос на gamedev.stackoverflow.com. Вы можете найти новый вопрос здесь: https://gamedev.stackexchange.com/questions/7090/html5-game-canvas-ui-techniques/7115#7115

Answer 1

Ты можешь сделать это миллионами способов. Однако вы чувствуете себя наиболее комфортно, а ваши инженеры чувствуют себя наиболее уверенно.

Если вы ищете вдохновение или пример кода, вот один из способов, которым я могу это сделать. У меня есть функция, которая несколько раз рисует меню, пока не нажата кнопка. Когда кнопка нажата, игра загружается и старые прослушиватели событий щелчка по меню удаляются, и добавляются новые слушатели событий щелчков игры. Я также заканчиваю старый цикл прорисовки меню и начинаю новый цикл прорисовки игры. Вот некоторые отрывки, которые помогут вам понять, как это делается:

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) {
  // ...
}

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

(я также опубликовал это на обсуждении близнецов gamedev)

Answer 2

Не думаю, что для этого есть «стандарт». Это сильно зависит от вашего интерфейса. Я думаю, что использование элементов DOM лучше в большинстве случаев, поскольку вам не нужно создавать все компоненты пользовательского интерфейса, события и т. Д. Самостоятельно. Они могут быть стилизованы с помощью CSS для достижения желаемого вида. Если этого недостаточно, вам, вероятно, придется создавать элементы интерфейса самостоятельно, но вы должны убедиться, что это действительно необходимо. Вероятно, это огромный объем работы по созданию собственного решения.

Answer 3

Попробуйте это:

С помощью Visual JS вы можете настроить страницу следующим образом:

Графический интерфейс многоплатформенного игрового движка Visual-JS для Windows - редактор исходного кода

Редактор OnPage - для дизайна

Вы получите:

* 99% холст 2д

Добавить новый объект

Создание компонента веб-камеры (nui или normal)

Создать соединение (базовое - прямоугольное)

Создать textBox (виртуальная клавиатура для мобильных устройств)

Создать частицу

Atach игрок (основное движение)

MultipEER (сеть) *

localStarage

Приложение, созданное из visual js, всегда работает во всех браузерах (мобильных / настольных). Работа в сети - webRTC - мультипайер

Попробуйте онлайн по адресу: https://jsfiddle.net/user/zlatnaspirala/fiddles/

API выглядит следующим образом:

Документация по интерфейсу прикладного программирования для Visual JS 0.5>

GAME_OBJECT является основным объектом в этой структуре.

1) Adding new game object (name will be 'GO' ):   

HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").NEW_OBJECT("GO" ,
x , y , w , h , speed )

HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").NEW_OBJECT( "GO" ,
45   , 45 , 10 , 10 , 10)


// 2) Adding image or animation : 

// DRAW TYPE can be   // 'DRAW_FRAME' no animation   // 'LOOP' playing
animation  // this number '1111123123' is ID  can be any number 
//ANIMATION (  surf ,TYPE_, FrameIndex ,source , PARENT , ID , blink_
, min_ , max_ , step , speed_ , opacity_  )
HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").GAME_OBJECTS.ACCESS("GO").CREATE_ANIMATION(
SURF , "DRAW_FRAME" , 6 , RESOURCE.Tiles  , 1111123123 , "no" ,
1,11,1,1,1) 


3)Disable draging   GO.DRAG = false;

//  RESOURCE.NAMEOFFOLDERANIMATION

add folder "Tiles"  with images in folder /res/ and run node res.js   

// refresh page and you will get

RESOURCE.Tiles ready for use !   
// MAKE MODULE ACCESS EASY  var

STARTER = HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER");    

STARTER.GAME_OBJECTS.ACCESS("GO").CREATE_ANIMATION( SURF ,
"DRAW_FRAME" , 6 , RESOURCE.Tiles  , 1111123123 , "no" , 1,11,1,1,1) 


//DRAG initial value is true GO.DRAG = false;
//setup quard height  =  width  GO.POSITION.DIMENSION.H = GO.POSITION.DIMENSION.W;

4) EVENTS  FOR MOUSE AND MOBILE TOUCH HANDLED
//CLICK OR TOUCH START  GO.TAP = function(){  

//this make point directing to the game object instance   
//  this.NAME or this.ANIMATION.CURRENT_FRAME   };


GO.TOUCH_DOWN = function(){  

STARTER.DESTROY_OBJECT("GO")        console.log("THIS MUST BE TERMINATED
ON MOUSE DOWN or TOUCH_DOWN  : " + this.NAME);
//this.DESTROY_ME_AFTER_X_SECUND( 100 );    //console.log("THIS MUST BE
TERMINATED ON CLICK : " + this.NAME);      };

GO.TOUCH_MOVE = function(){  
console.log("HOVER ON OBJECT OR MOBILE TOUCH_MOVE  : " + this.NAME);   };

GO.TOUCH_UP = function(){  
console.log("MOUSE UP ON OBJECT OR MOBILE TOUCH_UP  : " + this.NAME);   };*

Скачать git