캔버스와 CSS3 요소 혼합하기

Question

캔버스를 사용하여 HTML5 게임을 구현 중입니다. 이제 저는 캔버스 위에 절대 위치를 가진 HTML 요소를 사용하여 툴팁, 말풍선, 정보창 등과 같은 모든 텍스트 오버레이를 만드는 것에 대해 생각하고 있습니다. 그래서 저는 CSS3가 제공하는 많은 효과와 전환 효과를 사용할 수 있습니다.

하지만 성능에 대해서는 잘 모르겠습니다. 이 오버레이는 자유롭게 추가하고 제거해야합니다 (MMORPG와 비슷한 것이므로 많은 말풍선이있을 것입니다).

1. DOM 탐색/제거를 추가 :

   아마 성능에 관한 2 개 질문이 있습니다. 어쩌면 캐시가 도움이 될까요?

2. HTML과 CSS3 자체.

다른 옵션은 캔버스 자체에서 이러한 요소를 관리하여 각 프레임을 그리는 것입니다. 하지만 CSS3와 비슷한 효과를 내기 위해 여분의 코드, 시간 초과 및 추가해야 할 것들이 있기 때문에 성능 저하가 다시 발생할 수 있습니다. 그리고 어쨌든 일부 데이터 구조의 순회가 필요할 것입니다.

조언, 의견, 경험이 있으십니까?

미리 감사드립니다.

Answer 1

위에서 언급 한 두 기술 중 하나만 사용하는 것을 고려하십시오. 모바일 또는 태블릿에서 해당 애플리케이션을 출시 할 수 있습니다. 나는이 장치들이 같은 시간에 두 가지 문제를 다룰 것이라고 생각한다. 그리고 또 하나 : 캔버스에 있으면 호환성에 대한 걱정이 없습니다. 기술적 인 것이 아니라 생각을 자극하는 대답입니다.

Answer 2

이 방법에 접근하는 한 가지 방법은 캔버스 개체 뒤에 "동적"이미지 맵을 사용하는 것입니다. 그런 다음 필요에 따라 dom을 사용할 수 있습니다. 캔버스의 클릭을 이미지 맵으로 전달해야합니다.

Answer 3

HTML5 게임에서 UI 요소에 DOM을 사용하는 가장 좋은 이유는 이벤트 처리입니다.

캔버스에 모든 것을 그려 넣으면 클릭 수를 처리하고 클릭 한 항목을 결정하는 자체 논리를 작성해야합니다. 여러 인터페이스 레이어가있는 경우 곧 매우 복잡해 질 수 있습니다.

DOM 요소 (특히 jQuery와 같은 라이브러리를 사용할 때)는 간단하며, 최소한의 노력으로 풍부하고 대화 형 UI를 만들 수 있습니다.

내가 생각할 수있는 유일한 단점은 브라우저 불일치가 발생할 수 있다는 것입니다. 특히 CSS3를 사용하는 경우 특히 그렇습니다. 다시 jQuery가 도움이 될 것입니다.

다른 단점이라면 일단 DOM 경로를 거치면 게임은 항상 브라우저 게임이되는 반면 100 % 캔버스라면 다른 언어로 코드를 포팅 할 가능성이 항상 있다는 것입니다 그것을 네이티브로 만드는 것, 그러나 그것은 단지 일부 사람들에게는 단점이라고 생각합니다.