2011-02-05 3 views
3

웹 브라우저에서 전략 게임 (문명 생각)을 만들고 있다고 가정 해 보겠습니다. 게임은 보이는지도 부분을 가지고 있습니다 (예 : 30x30 제곱). 각 사각형은 30x30 픽셀이며 여러 개의 중첩 된 이미지 (지형, 리소스, 단위, 도로 등)가 있습니다.이 방법을 그리는 고전적인 방법은 각 셀에 절대적으로 배치 된 이미지가 포함될 큰 <table> 일 것입니다. 트래픽을 줄이기 위해 Javascript에서 렌더링 될 것입니다. 하지만 여전히 수천 개의 이미지와 거대한 테이블입니다.게임지도 그리드가 웹 브라우저와 얼마나 세금이 부과됩니까?

브라우저에서 가져올 수 있습니까? 성능이 허용되는 한도 아래로 떨어지지 않습니까? 또는 가능한 한 많은 오버레이로 사전 렌더링 된지도 이미지를 유지할 수 있지만 더 많은 작업이 될 것이라고 생각합니다.

답변

1

브라우저에서 전체 레이아웃 및 기타 DOM 항목을 저장하고 계산할 필요가없는 canvas element을 실제로 사용해야합니다.

즉, 고성능 워크 스테이션의 최신 브라우저는 FishIETank으로 시연 된 것과 동시에 수백 개의 이미지를 표시 할 수 있습니다. 그러나 스마트 폰에서부터 구형 PC에 이르기까지 많은 장치가 그렇게 할 수 없습니다. 아, 그리고 테이블을 사용하는 것은 position:relative; 또는 absoluteabsolute ly 이미지가있는 div보다 느립니다.

+0

글쎄, 그리드 그리드 자체가 필요합니다. 따라서 테이블이 필요합니다. 비록 그것이 지형 이미지의 일부가 될 수 있다고 생각합니다. 아니면 사진과 배경 사이에 1px 공간을 가질 수 있습니다. 흠, 그래, 그게 잘 작동하고 부하를 줄일 것이라고 생각합니다. 모바일 장치의 경우 인터페이스가 너무 풍부하여 모바일 장치에서 실행할 수있는 가능성이 전혀 없습니다. 따라서 그들은 의도 된 대상 고객조차 가지고 있지 않습니다. –

+0

@Vilx 캔버스를 사용할 수없는 이유는 무엇입니까? – phihag

+0

이전에 사용하지 않았기 때문에 구형 브라우저를 사용하는 사용자도 있습니다. 그러나 나는 그것을 고려할 것이다. –

1

grepolis와 같은 온라인 게임을 살펴보세요. 이미 게임과 같은 일종의 그리드를 사용하고 있으며, 현대의 브라우저에서 쉽게이 작업을 수행 할 수 있습니다.

관련 문제