캔버스 요소에 극도의 확대/축소 기능이있는 게임을 만들려고합니다. 저는 벡터 그래픽이 고성능에서 비트 맵 이미지와 함께 런타임에 프로그래밍 방식으로 생성 될 수 있다는 점에서 이점을 이용하고 싶습니다.HTML 캔버스 요소의 비트 맵과 벡터의 장점 결합 - 어떻게?
내가하고 싶은데 프로그래밍 방식으로 게임 "스프라이트"의 첫 번째 프레임 이미지를 만드는 것입니다 ... 이것은 벡터 이미지가 될 것입니다. 첫 번째 프레임 후에도 이미지를 그리는 데 CPU 사이클을 낭비하고 싶지는 않습니다.이 확대/축소 수준의 비트 맵/고성능 이미지로 캐싱하고 싶습니다.
다음으로 사용자가 20 % 이상 확대하면 더 높은 수준의 세부 벡터 이미지로 이미지를 다시 그립니다. 위에서와 같이이 벡터 이미지는 캐시되고 최적화됩니다.
당신이 여기에서 볼 수 있듯이, 이것은 아주 기본적인 우주선 것 .. 내가 먼저 .. 프로그래밍 벡터로 후 같아요 래스터를 렌더링 것? 목표는 CPU 낭비를 피하는 것입니다.
사용자가 확대되는 경우
...
동일한 형상의 새로운 벡터 이미지 디테일의 훨씬 높은 수준 임에도 불구하고, 그려진 것이다. 기본적으로 Level of Detail 시스템입니다. 이 경우에도 초기 프로그래밍 방식을 적용한 후에 최대 성능을 위해 이미지를 "래스터 화"합니다.
누구나 HTML 캔버스 내부에서 어떤 도구를 사용해야할까요? (나머지 게임은 캔버스 요소 내부에서 실행됩니다.)
대단히 고맙습니다.
** 편집 : SVG를 통해 이미지를 렌더링하는 경로 (프로그래밍 방식)를 추가하고 drawimage()를 사용하여 해당 PNG 파일을 캔버스에 밀어 넣으면 몇 가지 성공을 거둘 수 있을까요? 비슷한 것? 흠 ...
PNG로 변환 할 필요가 없습니다. 대부분의 브라우저는'drawImage'에서 SVG를 받아 들일 것입니다. – robertc
아이디어는 초기 프레임을 SVG로 렌더링 한 다음 재사용 할 수있는 PNG로 변환하는 것입니다. SVG는 실제로 브라우저에서 직접 사용할 수 있지만 모든 프레임을 렌더링 할 경우 훨씬 더 큰 CPU 비용이 발생합니다 ... 일부 브라우저에서는 SVG 이미지의 "비트 맵 캐싱"을 허용합니다. SVG 이미지를 처음 생성 할 때, 크기 나 알파가 변경 될 때까지 비트 맵으로 캐싱됩니다. 그러나이 캐싱에 대해 얼마나 많은 제어 권한이 있는지는 잘 모르겠습니다. 또한 압축 된 PNG에 비해 BMP 이미지가 큽니다. 나중에 다시 사용하도록 PNG를 캐시하고 싶습니다. – Mavorus