HTML5 게임 (캔버스)-UI 기법?

PhoneGap을 사용하여 모바일 (Android / iPhone / WebOS) 용 JavaScript / HTML5 게임 (Canvas 사용)을 빌드하는 중입니다. 현재 UI와 게임 보드를 구축하는 방법과 상호 작용하는 방법을 설계하려고하지만 최선의 솔루션이 무엇인지 잘 모르겠습니다. 내가 생각할 수있는 것은 다음과 같습니다.

drawImage 및 fillText와 같은 것을 사용하여 UI를 캔버스에 바로 빌드하십시오. 일반 DOM 객체를 사용하여 캔버스 외부에 UI의 일부를 빌드 한 다음 UI 요소가 재생 보드 캔버스와 겹치도록해야 할 경우 캔버스에 div를 띄웁니다. 내가 생각하지 못한 게임 UI를 구축하는 데 사용할 수있는 다른 기술이 있습니까? 또한,이 중 "표준"방식으로 간주되는 것은 무엇입니까 (HTML5 게임이 인기가 높지 않아 아직 "표준"방식이 아님)? 그리고 마지막으로 어떤 방법을 권장 / 사용 하시겠습니까?

미리 감사드립니다!

두 솔루션 (캔버스 VS. 전통적인 HTML / CSS에 그리기)은 완전히 유효하며 정상적으로 작동합니다. 고려해야 할 사항 :

• 이미 캔버스 기반 라이브러리를 사용하고 있다면 UI에 대한 추가 (DOM 기반) 메소드 대신 캔버스를 계속 사용하여 코드를 더 깔끔하고 체계적으로 정리할 수 있습니다.
• UI가 텍스트가 많은 경우 (대화 상자 등) HTML / CSS를 통해 구현하는 것이 더 간단 할 수 있습니다. 예를 들어, 텍스트가 줄 바꿈 및 단락 간격과 같은 DOM 요소로 흘러 들어가는 것이 쉽지 않으며 캔버스에서 구현하기가 비교적 어렵습니다.
• 사용중인 라이브러리에 따라 캔버스 내에서보다 DOM 요소에서 클릭 처리를 구현하는 것이 훨씬 쉬울 수 있습니다. 예를 들어 "확인"버튼을 클릭하려는 경우 HTML / JS 환경에서 간단한 작업입니다. 그러나 캔버스에서는 다른 요소를 클릭하고 좌표를 확인하여 클릭이 발생한 위치를 확인해야합니다.
• 텍스트를 포함하는 DOM 요소를 사용할 때 일부 사용자 에이전트 (특히 모바일 장치)가 까다로울 수 있습니다. 예를 들어, Mobile Safari는 복사 / 붙여 넣기 도구로 모달을 팝업 할 수 있습니다. 이 동작을 방지하는 것은 어려울 수 있으며 아마도 캔버스 랜드에서 더 쉬울 것입니다.

이 중 일부는 주관적입니다. 내가 아는 개발자 는 DOM이 추악하고 장황 하다는 것을 알기 때문에 항상 캔버스를 선호합니다. 두 솔루션이 모두 잘 작동하므로 앱에서 간단한 단일 화면을 선택하고 두 방법을 사용하여 개별적으로 신속하게 개발하고 어느 것이 더 쉽고 더 나은지 확인하십시오.

행운을 빌어 요!

캔버스 인터랙션을 위해 easeljs 를 사용하고 있습니다.

꽤 좋고 견고한 디자인을 용이하게합니다. 내가 선택한 주요 기능 중 하나는 캔버스 객체와 돔 요소의 위치를 ​​동기화하는 기능이었습니다.

이를 통해 CSS 말풍선과 hud 프레임과 같은 정적 UI 요소를 쉽게 수행 할 수 있습니다.

이것이 브라우저의 장점은 풍부한 캔버스를 얻을 수 있지만 성능을 확인하기 위해 작고 정적 인 것들을 돔에 담아내는 것입니다.

캔버스는 모바일 플랫폼에서 느리며 적어도 모바일 사파리는 어쨌든 CSS 기반 객체의 객체 위치를 사용하고 싶을 것입니다. 특히 하드웨어 가속 객체 렌더링을 켜는 "translate3d"를 사용하십시오.

캔버스에 대한 CAAT 라이브러리를 확인하십시오. 빠르며 CSS 지원 "액터"를 사용하고 게임 로직을 변경할 수 없습니다.

아직 링크를 게시 할 수 없지만 여기에 일부 의사 링크가 있습니다. http://labs.hyperandroid.com/animation

iPhone 4의 캔버스 속도 저하에 대해 동의해야합니다. GL에서 사파리 캔버스를 지원하지 않는 것이 확실합니다. 내 cheezy 게임은 iPhone 3GS 및 Android에서 빠르게 실행되지만 iPhone 4에서는 망막 디스플레이에 너무 많은 픽셀이 있거나 캔버스가 GL을 타고 있지 않다면 이것이 왜 드래그하는지 설명합니다. 나는 캔버스 개발 모델을 좋아하지만 아직 CSS translate3d 옵션을 시도하지 않았습니다. 특히 나는 GWT와 gwt-g2d 캔버스 래퍼 (최적화 / 난독 화)를 사용했습니다. http://www.photonjunky.com/shootout.html

나는 같은 HTML 요소로 컨트롤을 유지 제안 menu및 command접근성 이유. 약간의 CSS를 사용하면 캔버스 위에 요소를 표시 할 수 있으며 HTML의 사전 빌드 된 기능을 잃지 않습니다.

나는 이것이 오래된 질문이라는 것을 알고 있지만 오늘 (2013 년 3 월) 우리는 더 잘 알고 있습니다. 내가 한 것처럼 다른 사람이 여기에서 우연히 발견되는 경우에 대비하여 답변하기로 결정했습니다. 나는 대부분의 다른 답변에 동의하지 않아야합니다. 웹 브라우저 개발에는 유효하지만 모바일에는 적합하지 않습니다. 선택한 경로 (DOM 또는 캔버스 애니메이션)에 큰 차이가 있습니다. Android webview 자체는 완전히 쓸모가 없으며 (느리거나 끊김), 현재 캔버스 애니메이션과 적절한 프레임 워크를 통해서만 가능한 하드웨어 가속을 적용 할 수 없다면 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) {
  // ...
}

이렇게하면 게임 드로잉과 게임 이벤트를 메뉴 드로잉 및 메뉴 이벤트와 분리 할 수 ​​있습니다. 또한 메뉴에서 게임 / 애니메이션 요소를 사용하여 실제처럼 보이게 만들 수있는 여유가 있습니다.