브라우저에서 아스키지도와 움직이는 캐릭터를 만드는 좋은 기술 솔루션 (예 : 왜소한 요새)? [닫은]

동물과 사람을 나타 내기 위해 텍스트 문자를 사용하고 독립적 인 (서버 구동) AI가있는지도 사각형에서 움직일 수있는 웹 사이트를위한 웹 응용 프로그램을 만들고 싶습니다.

따라서 본질적으로 브라우저의 난쟁이 요새지도 : 움직이는 생물, 몹, npcs 및 pc. 나는이 규모를 달성하려고하지는 않지만, 아마도이 내용의 1/4 정도를 보여주기 시작할 것입니다.

배경 / 고정 타일 중 일부는 정적으로로드 될 수 있습니다. 그러나 생물 / 동물 및 움직일 수있는 물건의 경우 어떤 기술 솔루션이 가장 효과적인지 잘 모르겠습니다.

나는 알고 있어요 <canvas>내가 그 기능이 사용 사례에 해당하는지 모르겠어요하지만. 확실히 어느 정도의 자바 스크립트가 필요할 것입니다.

이 사용 사례에 맞는 Javascript 라이브러리 또는 캔버스 라이브러리가 있습니까? 내가 모르는 다른 기술은 무엇입니까? 누구나 이와 비슷한 작업을 수행 한 웹 사이트의 예를 알고 있으므로 아이디어를 얻을 수 있습니까?

필자는 실제로 웹에 대한 문자 표시 라이브러리 인 Unicodetiles.js 를 만들었습니다.이 라이브러리는 최적화하는 데 시간을 소비했을뿐만 아니라 텍스트를 표시하는 다양한 방법을 탐색합니다. 3 개의 렌더러가 있습니다 :

1. DOM- <div>요소 매트릭스를 사용하여 각 글리프를 사용자 정의 가능한 전경색 및 배경색으로 렌더링합니다.
2. <canvas>요소를 사용하여 문자를 그리는 Canvas . 이것은 훨씬 빠르며이를 백업하기위한 성능 테스트가 있습니다 : http://tapiov.net/unicodetiles.js/tests/
3. 캔버스 요소를 사용하여 글꼴 텍스처를 만든 다음 WebGL을 사용하여 렌더링하는 WebGL은 더 큰 뷰포트 크기로 확장 가능하지만 브라우저에서는 지원되지 않습니다.

연결된 성능 테스트는 프레임마다 모든 문자를 변경하여 매우 극단적 일 수 있습니다. 실제로 DOM 렌더러조차도 대부분의 목적을 위해 충분히 빠릅니다.

자신의 라이브러리를 만들기로 결정한 경우 캔버스가 더 나은 성능을 발휘하여 더 큰 장면을 허용하기 때문에 여전히 캔버스를 사용하는 것이 좋습니다. WebGL 만 사용하면 사용자 기반이 제한되며 구현이 복잡합니다 (유니 코드 타일에는 자동 폴백 메커니즘이 있음).

최근에 많이 들었던 다른 라이브러리는 rot.js 입니다. 예를 들어 FOV 시스템 및 던전 생성기와 함께 제공되는 로그 라이크에 특히 적합합니다. 완전한 패키지를 원한다면 갈 수 있습니다.

가장 효과적인 방법은 가짜 일 뿐이라고 생각합니다. 일반 2D 화면을 렌더링하는 것처럼 자체 내장 스프라이트 글꼴을 사용하여 일부 대상 요소에 렌더링 이 접근 방식은 사람들이 글꼴이 없거나 매우 다른 언어 (중국어, 러시아어)를 사용하는 경우 이상한 일이 발생하지 않도록합니다.

글꼴과 텍스트는 모든 브라우저에서 모든 로케일에서 완벽한 픽셀을 얻는 것이 가장 어려운 것 중 하나입니다. 글꼴을 포함하고 일부 CSS 매직 브라우저 및 사용성 설정을 사용하는 경우에도 여전히 글꼴을 무시하고 변경할 수 있습니다. 일반적인 웹 사이트의 경우 완벽한 픽셀 텍스트는 문제가되지 않지만 Dwarf Fortress와 같은 게임에서는 몇 개의 픽셀이 매우 일관되지 않은보기로 이어질 수 있습니다. 브라우저를 사용하지 않고 일반 응용 프로그램을 사용하는 경우에도 텍스트 렌더링에 문제가 있습니다. 따라서 Dwarf Fortress 자체도 내가 설명한 접근 방식을 사용합니다.

http://en.wikipedia.org/wiki/Dwarf_Fortress

온 스크린 디스플레이는 비트 맵으로 구현 된 16 가지 색상의 약간 수정 된 코드 페이지 437 문자를 OpenGL로 렌더링하여 사용합니다.

편집 : 의견이 있기 때문에 답변을 약간 확장했습니다.

출력해야 할 줄과 열의 수를 찾으려면 창 너비와 높이를 확인하고 그에 따라 변경해야합니다. onResize 이벤트를 듣고 그에 따라 너비와 높이를 수정하십시오.

텍스트 방식으로이 작업을 수행하려는 경우 고정 폭 글꼴이있는 텍스트와 각 셀에 하나의 문자가 포함 된 테이블을 사용하여이 작업을 수행 할 수 있습니다.

개별 문자를 처리하기 위해 <table> 올바른 수의 행과 열을 를 여기에는 각각 <td>의 x 및 y 좌표로 구성된 ID가 있습니다. 이렇게하면 ID로 개별 셀을 처리하고 innerHTML을 변경하여 문자를 변경하고 CSS 클래스를 변경하여 색상을 변경할 수 있습니다.

그러나 canvas를 사용하면 교체해야 할 각 문자에 대해 큰 DOM 트리를 조작 할 필요가 없으므로 더 빠를 수 있습니다. 그런데 드워프 요새도 비슷한 일을하고 있습니다. 객체를 나타내는 데 사용되는 문자는 실제로 실제 텍스트 출력이 아닌 비트 맵이며 2D 그래픽 API를 사용하여 그려집니다. 이를 위해 HTML5 캔버스가 잘 갖추어져 있습니다. 캔버스에 텍스트를 그릴 수 있는 context.fillText 메소드가 있습니다. 개별 문자를 그리는 데 사용할 수 있습니다. context.font 변수 와 각 문자의 색상을 조작하여 크기와 글꼴을 변경할 수 있습니다. context.fillStyle을 .

글꼴 래스터 화 글꼴이 비싸고 캐싱을 사용하는 브라우저가 없기 때문에 프레임 당 fillText를 수백 번 호출하면 속도가 느려질 수 있습니다. 즉, 같은 설정으로 같은 문자를 백 번 렌더링하면 문자가 백 번 다시 래스터 화됩니다. 성능을 향상시키기 위해 숨겨진 캔버스에 각 색상으로 각 문자의 래스터 화 된 모양을 캐시 한 다음이 숨겨진 캔버스를 사용하여 그릴 수 있습니다. context.drawImage를 . 한 캔버스에서 다른 캔버스로 복사하는 것은 일반적으로 글꼴 래스터 화보다 훨씬 빠릅니다.

현재 캔버스를 사용하여 2D 게임을 개발 중이며 가장 큰 FPS 먹는 사람이 글꼴 그림이라는 것을 알았습니다. 래스터 화 된 텍스트에 대한 캐시를 추가하면 성능이 크게 향상되었습니다.

좋아, 이것은 어둠 속에서 찌르고 어떻게 렌더링되는지 모르겠습니다.

기본적으로 당신은 예전과 같은 트릭 콘솔 (일명 터미널)을 사용합니다. 먼저 모노 스페이스 글꼴로 시작하십시오. N 개의 문자가있는 M 행이 있습니다. 따라서 텍스트를 충분히 넓은 (div : N em?) div에 덤프하고 모든 N 문자를 줄 바꿈으로 만듭니다. 이 경우 <br/>에\n .

트릭은 char을 char로 또는 전체 내용을 한 번에 Java 스크립트로 버퍼를 바꾸는 것입니다.

당신이 정말로 구체적이기를 원한다면 @ font-face를 사용하여 어디에서나 동일한 모노 스페이스 글꼴을 가질 수 있습니다.

글리프의 관점에서 생각하십시오. 텍스트의 표시를 뒤에있는 의미에서 분리합니다. 예를 들면 다음과 같습니다.

(의사 코드)

if (display.hitGlyph)
    glyph = Glyph.Asterisk;

display(glyph);

그런 다음 글리프 아틀라스를 정의하기위한 기본 코드에서 간단히 다음과 같이하십시오.

Glyph.Asterisk = "*";

글리프 아틀라스는 실제로 다양한 인코딩을 사용하여 ASCII 테이블을 조회 할 수 있습니다. 여기서 요점은 표시 할 내용과 표시시기를 구분하기위한 것입니다. 처음부터 프레임 워크를 만드는 것이 좋습니다. 그것은 당신에게 더 많은 자유를 줄 것입니다.