브라우저 기반 게임을 제작할 때 캔버스로 만들거나 캔버스로 만들지 않겠습니까?

배경 : 나는 광범위한 개발 배경을 가지고 있지만, 지난 몇 년 전에 게임을 코딩했을 때였습니다. Javascript 기술은 상당히 제한되어 있으며 Tetris, Pac-man 또는 그와 같은 복잡한 수준의 간단한 게임을 구축하여 향상시킬 계획입니다.

질문 : 내가 선택해야 할 근본적인 선택은 <canvas>요소에 렌더링해야하는지 여부 입니다.

캔버스를 사용하면 점, 선 및 그보다 복잡한 것을 렌더링하는 기본 도구가 있습니다. 아마도이를 도울 다양한 프레임 워크가 있거나있을 것입니다.

캔버스가 없으면 일반 웹 페이지와 같이 DOM 트리에 객체를 유지할 수 있습니다.

하나의 접근법이 다른 접근법보다 낫습니까? 상호 배타적입니까? 어느 것을 선택해야하는지 어떻게 알 수 있습니까?

Canvas와 DOM은 서로 별개이지만 상호 배타적이지는 않습니다. 좋은 접근 방법 중 하나는 Canvas를 사용하여 메인 게임 영역 (예 : Tetris에서 떨어지는 조각)을 렌더링하고 canvas 요소와 겹치는 DOM 요소로 모든 UI (예 : 점수 표시)를 수행하는 것입니다.

그러나 테트리스와 같은 원시 게임에는 이러한 접근 방식이 실제로 필요하지 않습니다. 캔버스는 고급 그래픽 효과에 유용하지만, 필요하지 않은 경우 DOM을 고수하면 더 넓은 호환성을 얻을 수 있습니다. 모든 브라우저가 HTML5 Canvas를 지원하는 것은 아닙니다.

DOM 정보 DOM
은 구식 2D에서 잘 작동합니다. 즉, 이미지 회전이나 크기 조정을 사용하지 않습니다. 실제로이 두 가지 작업을위한 도구가 있지만 그 성과를 기대할 수는 없습니다.

게임의 경우 가능한 적은 브라우저 레이아웃 엔진에 의존해야 position:absolute합니다. 즉, 객체를 배치 하는 데 사용 됩니다. DOM 객체를 항상 생성하고 파괴하지 않도록 가능한 한 많이 시도하십시오. 변수가 많은 수의 객체가 필요한 경우 유휴 DOM 요소 풀을로 설정하여 display:none필요할 때 되 살릴 준비를 할 수 있습니다.

DOM vs canvas
IE8의 시장 점유율이 줄어들면서 점점 줄어드는 캔버스가 점점 더 매력적인 옵션이되고 있습니다. 대부분의 게임에서 아마도 훌륭한 선택 일 것입니다. 그러나 일부 작업의 경우 DOM은 사용하기 쉬운 도구이며 필요한 경우 일부 문서 흐름을 사용할 수 있으며 렌더링 된 객체에서 직접 클릭을 잡을 수 있으며 스크롤 막대를 쉽게 통합 할 수 있습니다.

성능 차이를 다루기가 어렵고, 작업에 따라 다르며 브라우저마다 크게 다릅니다.

캔버스는 게임 유형에 따라 다르지만 캔버스는 "가장 많이"맞습니다.

DOM 관리는 특정 시점에서 끔찍합니다. 요소가 많을수록 더 느리게 움직일수록 요소가 더 느려집니다 .

IMG 요소로 자산 로딩 순서를 관리하는 것은 중요하지 않습니다 (이미지 태그에서 의도적으로 손상된 프로토콜의 오류를 차단합니다 : : D).

정적 이미지가 많고 효과 수가 적은 게임의 경우 여전히 DOM을 사용합니다. 다른 모든 것, 캔버스가 첫 번째 선택입니다 (히트 맵은 다른 이야기이지만 포인트 앤 클릭 항목).

요즘에는 캔버스가 너무 빠르기 때문에 (아이폰에서도) 사용하지 않는 이유는 거의 없습니다.

HTML5 게임을 만드는 경우 캔버스가 훨씬 좋습니다. 이유는 다음과 같습니다.

1. 속도-캔버스를 이미지로 생각하십시오. 당신은 이미지를 그리고 당신이 그린 것을 잊어 버립니다. 이는 DOM 또는 SVG에 비해 성능을 크게 향상시킵니다. DOM 및 SVG 응용 프로그램은 화면에 배치 한 모든 객체를 추적합니다. 즉, 화면에 많은 객체, 특히 오프 스크린 또는 숨겨 짐이있는 레벨이 많으면 어쨌든 그려지고 추적됩니다.
2. 드로잉 기능-DOM 요소에는 강력한 CSS3 변환이 있지만 캔버스의 기능과 비교할 수는 없습니다. 캔버스는 모든 객체를 그릴 수 있고, 강력한 그라디언트 지원, 3D로 객체를 표시하기위한 플러그인, 필터 등이 있습니다.
3. 지원-DOM을 사용할 때 변형 또는 애니메이션과 같은 실험적인 기능을 사용하려면 CSS에서 -moz-, -webkit-, -o- 및 -ms- 접두사를 사용해야합니다. 캔버스에서, 당신은 그것에 대해 걱정할 필요가 없습니다. 하나의 기능으로 그리기 만하면됩니다. 캔버스의 다른 지원 관련 장점은 응용 프로그램이 표시되는 방식입니다. 웹 사이트 개발자로서 브라우저 사이의 DOM 표준화가 부족하여 견딜 수 없습니다. 자세한 W3C 사양에도 불구하고 배경, 그라디언트, 변형 등이 브라우저마다 다르게 표시됩니다. 캔버스에서는 배경이 다를 수있는 한 가지 항목 만 실행했습니다. 바둑판 식 배경을 표시 할 때 일부 브라우저는 x 축에서 타일을 0px로 중앙으로 "tile-x"를 사용하고 다른 타일은 타일을 아래로 타일링하는 것처럼 사용합니다.
4. 라이브러리 및 문서-캔버스로 게임을 만드는 데 필요한 문서에는 수많은 라이브러리가 있습니다. 일부 라이브러리 : CreateJS, paper.js, fabric.js, KineticJS, libCanvas, Processing.js, PlotKit, Rekapi, PhiloGL, InfoViz Toolkit, Frame-Engine, CAKE, Raphaeljs, Tweenjs 등 톤을 더 많이 나열 할 수는 있지만 아무 소용이 없다.

단점-애니메이션-애니메이션을위한 훌륭한 라이브러리가 많이 있지만 CSS3 애니메이션을 좋아합니다. 작성, 조작 및 트리거가 매우 쉽습니다. CSS3 애니메이션이 캔버스를 사용하여 객체와 작동하도록하는 다양한 해킹이 있지만 대부분의 사람들은이 방법을 사용하지 않는 것이 좋습니다.

당신의 게임에 행운을 빕니다.

모바일 브라우저, 특히 Android를 대상으로하고 게임에 움직이는 그래픽이 포함 된 경우 DOM 애니메이션을 피하십시오. 안드로이드의 주식 브라우저는 웹킷이지만 쓸모가 없습니다. : 시작하기 전에이 안드로이드 문제 스레드 확인 "브라우저 및 웹보기에서 CSS3 및 자바 스크립트 애니메이션의 끔찍한 렌더링을" .

캔버스 자체는 더 빠르지는 않지만 CocoonJS 와 같이 캔버스 애니메이션에 하드웨어 가속을 호출하는 프레임 워크가 있습니다. 사이트에 비디오에 대한 링크가 있는데 프레임 워크를 사용하여 얻을 수있는 성능 향상을 보여줍니다 (그러나 어떤 이유로 든 둘 이상의 링크를 게시 할 수는 없습니다).

간단한 대답 : 캔버스 대체 기능이있는 WebGL.

미묘한 답변 : 게임에 많은 텍스트가있는 경우 HTML 텍스트 레이어를 오버레이하십시오. Pixi.js 는이를 위해 유용한 유용한 추가 기능이 포함 된 전투 강화 디스플레이 프레임 워크입니다.

DOM은 문서 객체 모델을 나타냅니다 . 매우 드문 상황에서만 게임을 만드는 데 사용하고 대부분의 경우 캔버스를 선호합니다.

게임에 작은 그래픽 요구 사항이 있더라도 DOM에서 수행하면 성능이 저하됩니다. 테트리스보다 더 많은 것은 아마도 제대로 작동하지 않을 것입니다.

실제 사례가 있습니다. Conway의 Game of Life 구현을 만들 때 셀의 배경색을 변경하여 500x500 테이블로 시작했습니다. 이 버전에서는 글라이더 가 30fps 이상으로 실행되지 않았고, 더 큰 패턴은 거의 1을 넘지 않았습니다.이 게임의 캔버스 버전에서는 더 큰 패턴 (1000 이상의 인구)을 매끄럽게 실행할 수 있습니다. ~ 30fps

또한 SVG (Scalable Vector Graphics) 의 경우에도 마찬가지입니다 . 실제로는 시도하지는 않았습니다.

편집 : 내 예제가 좋지 않다는 것을 인정해야합니다 (테이블이 나쁘기 때문에). 그러나 요점은 여전히 ​​그렇습니다. DOM 조작은 문서를위한 것입니다. 브라우저는 요소를 작업 할 때 CSS를 조회하고 더 많은 메모리를 할당해야합니다. 캔버스보다 빠르다는 것은 실제로 의미가 없습니다.