2008-09-20 3 views
3

브라우저에서 재생할 게임을 디자인 중입니다.개별 이미지에서 게임 맵을 생성하는 알고리즘

게임은 우주 테마이며 "은하계"의지도를 생성해야합니다. 지도의

기본 아이디어는 여기에 있습니다 :

game map http://www.oglehq.com/map.png

지도는 행성/시스템을 포함 할 수 있습니다 각 격자 부문으로, 그리드이며, 이들 각각은 인접한 그리드로의 링크가있다.

지도를 생성하려면 그리드 요소를 나타내는 이미지 모음이 있어야한다고 생각했습니다. 위의 샘플의 경우 각 사각형은 별도의 그래픽입니다.

새지도를 만들려면 이미지를 함께 짜 맞춰야합니다. 지도 요소 이미지에는 행성과 링크가 이미있을 것이므로 각 이미지가 적절한 위치에 배치되도록지도를 결합해야합니다.> 따라서 하단 모서리의 이미지에 이미지가 있어야합니다. 왼쪽과 대각선 왼쪽에 제대로 연결되어 있습니다.

이미지를 배치 할 위치를 알기 위해 코드를 만드는 방법은 무엇입니까? 이미지를 사용하는 것보다 더 좋은 방법이 있습니까?

성능 및/또는로드가 고려 사항이 아니어야합니다 (실시간으로 수행하는 것이 아니라 미리 구성된 맵을 생성해야 할 필요는 없습니다).

차이가 있다면 저는 HTML, CSS 및 JavaScript를 사용하고 Ruby on Rails 응용 프로그램을 사용합니다.

+0

혹시이 게임을 완료 했습니까? 어딘가에서 찾을 수 있을까요? – LarsH

답변

3

SVG 및 VML과 같이 사실상 보편적 인 두 가지 브라우저 기반 벡터/자바 스크립트 조작 가능한 그래픽 패키지가 있습니다. 일반적으로 낮은 대역폭의 고품질 벡터 기반 이미지를 생성합니다.

SVG은 기술적으로는 사양의 일부만 지원되지만 실용적인 용도로는 필요한 것을 수행 할 수 있어야합니다. w3schools은 a good reference for learning/using svg입니다.

VML은 SVG에 대한 Microsoft의 대답이며 SVG는 아니지만 기본적으로 IE에서 (놀랄만큼) 지원됩니다. Msdn은 최고 reference for vml입니다.

더 많은 작업이 필요하지만이 두 기술에 대해 두 가지 유사한/다소 통합 된 코드 기반을 작성할 수 있습니다. 진정한 이점은 사용자가 게임을 온라인으로 즐기기 위해 아무것도 설치하지 않아도된다는 것입니다. 모든 사용자 중 99.9 % 만 온라인으로 게임을 즐길 수 있습니다.

덧붙여서, 당신은 알고리즘을 요구하고 있다고 말하면서 기술을 제안합니다 (이것이 SVG/VML의 올바른 용어라면). 입력/출력 사양을 분명히 할 수 있고 어떤 부분이 도전을 제시 할 수 있다면 (예 : 순진한 구현이 효과가 없을 수도 있고 그 이유), 질문을 명확히하고보다 집중적 인 대답을 제공 할 수 있습니다.

부록 은 IE를 제외하고는 더 널리 지원되고 있습니다. 이것은 html로 그래픽 요소를 임베드하는 더 깨끗한 방법 일 것입니다.

유용한 캔버스 소재 : Opera's canvas tutorial | Mozilla's canvas tutorial | canvas-in-IE partial implementation

+1

대대 : VML은 W3C에서 SVG로 바꾼 제안 된 표준 (Microsoft 제공)이었습니다. 제안 된 형식이 조금 바보 였기 때문입니다. 또한 w3schools는 끔찍한 참조입니다. 사양 (http://www.w3.org/TR/SVG)을 제외하고는 내 머리 꼭대기에서 SVG에 대한 좋은 점을 인정하지 않을 수 있습니다. –

0

그래픽 라이브러리를 사용하여지도를 그리는 것이 좋습니다. 위와 같은 문제가 발생하지 않는다면 더 깨끗하고 간단한 코드로 끝날 것입니다. SVG, Canvas 및 flash/flex 옵션이 있습니다.

+0

물론, 노드의 네트워크와 노드에 대한 링크를 생성하는 것과 관련해서는 여전히 동일한 필수 문제가 있습니다. –

0

개인적으로 게임에서 링크를 렌더링하고 셀 그래픽에 배경 만 제공하면됩니다. 이렇게하면 더 많은 융통성이 생기고 세포가 서로 연결할 수있는 방법의 수를 더 쉽게 늘릴 수 있으며 일반적으로 확장 성이 향상됩니다.

그렇지 않으면 세포가 연결될 수있는 모든 방법을 고려해야하며, 회전 및 대칭 대칭을 고려하더라도 많은 편입니다.

0

아, 그리고 투명도가있는 타일 png 파일의 수가 적을 수 있으며,이 경우 충분하면 css-positioned div를 사용하여 예제와 비슷한 그림을 구성 할 수 있습니다.

지난 번 확인한 이전 버전의 IE는 이미지 파일의 투명도를 크게 지원하지 못했습니다. 누구나 이것을 편집하여 투명성 지원에 대한 더 나은 정보를 제공 할 수 있습니까?

+0

IE7 이상은 좋은 PNG 투명도를 지원하며 이전 버전은 1 비트 투명도를 지원합니다. –

-1

링크의 길이가 너무 길지 않은 한 각 셀에 대해 가능한 많은 이미지가 없습니다. 당신은 이미지 셀의 종류에 대한 주문을 내놓을 필요가 있습니다. 예를 들어, 각 비트가 이미지 구성 요소의 유무를 나타내는 정수.

Bit 0 : Has planet 
Bit 1 : Has line from planet going north 
Bit 2 : Has line from planet going northwest 
... 
Bit 8 : Has line from planet going northeast 

이제 이미지를 512 개 만듭니다. 많은 언어에는 이미지를 편집하고 디스크에 쓸 수있는 라이브러리가 있습니다. 루비가 마음에 드시면 다음을 시도하십시오 : http://raa.ruby-lang.org/project/ruby-gd

행성과 링크의 그래프를 설명하는 데이터 구조를 어떻게 저장할 계획인지 모르겠습니다. adjacency matrix을 사용하면지도를 쉽게 생성 할 수 있지만지도가 가장 작지는 않습니다. 그런 다음 (2 × 2 그리드) 같은 HTML을 뱉어 매우 간단합니다 :

물론
<table border="0" cellspace="0" cellpadding="0"> 
<tr> 
<td><img src="cell_X.gif"></td> 
<td><img src="cell_X.gif"></td> 
</tr> 
<tr> 
<td><img src="cell_X.gif"></td> 
<td><img src="cell_X.gif"></td> 
</tr> 
</table> 

는, 적절한 수의 셀의 모양을 설명하는 비트의 조합에 해당하는 각 X를 대체합니다. 인접 행렬을 사용하는 경우에는 비트를 함께 넣는 것이 매우 간단합니다. "현재"셀 주변의 셀을 살펴보십시오.

+0

-1 테이블 레이아웃 –

+0

@ 윌리엄 : 테이블 레이아웃이 자동으로 나빠지지 않습니다. 어떤 사람들은 그것을 마치 고토 (goto) 같은 것으로 취급합니다. 특히 행/열의 수가 적은 경우 테이블 레이아웃은 특정 응용 프로그램에 대해 효율적이고 명확합니다.당신의 의견을 환영합니다. 그러나 그것은 downvote의 가치가 없습니다. – LarsH

2

흠. 각 상자가 8 개의 이웃으로 만 링크 할 수 있으면 2^8 = 256 타일 유형 만 있습니다. 하나의 타일에서 가능한 링크 수를 제한하면 더 적습니다.

11000010.jpeg 

또는 일부 바이트를 저장하고 그 진수 또는 그런 진수

196.jpg 

코드로 변환 :

당신은 8 문자 파일 이름과 이미지에 존재하는 링크를 인코딩 할 수 있습니다. 내부적으로지도를 나타낼 수있는 방법은 다양합니다. 한 가지 방법은 각 행성에 대한 객체를 갖는 것입니다. 행성 객체는 그리드에서 자신의 위치와 연결된 행성의 위치를 ​​알고 있습니다. 따라서 적절한 파일을 선택할 수있는 충분한 정보가 있습니다.

또는 2D 배열이 있습니다. 각 배열 항목에 대해 표시 할 이미지를 찾으려면 이웃하는 8 개의 배열 항목을 살펴보십시오. 이렇게하면 두 축에서 배열을 더 크게 만들고 테두리 주위에 빈 '경계선'을 지정하여 경계를 코딩하지 않아도됩니다.이렇게하면 인접한 배열 항목이 배열에서 벗어 났는지 여부를 확인할 수 있습니다.

1

지도를 나타내는 데는 두 가지 방법이 있습니다.

한 가지 방법은 각 사각형이 행성/시스템을 가질 수있는 사각형의 그리드를 나타내는 것입니다. 그런 다음 8 방향 (NW, N, NE, W, E, SW, S, SE) 중 하나에 이웃 한 칸이있을 경우 그 이웃과의 연결이 있음을 지정할 수 있습니다. 그러나 샘플 맵에서 센터 시스템은 북쪽/동쪽 시스템에 연결되어 있지 않으므로 원하는 표현이 아닐 수 있습니다. 그러나 다른 표현을 만드는 데 사용할 수 있습니다.

두 번째 방법은 각 8 각 방향을 따라 이웃에 대한 연결이 있는지 여부를 정의하는 8 비트를 갖는 것으로 각 사각형을 나타내는 것입니다. 아마도 심지어 하나의 연결이 있다면 그 사각형은 그 안에 시스템을 가지고 있습니다. 그렇지 않으면 연결이없는 경우 빈 상태입니다.

은 그래서 예를 들어, 3 × 3 격자, 데이터는 다음과 같습니다

Tile Connections 
     nw n ne w e sw s se 
nw  0 0 0 0 0 0 0 0 
n  0 0 0 0 1 0 1 0 
ne  0 0 0 1 0 0 0 0 
w  0 0 0 0 0 0 0 0 
center 0 1 0 0 0 0 1 1 
e  0 0 0 0 0 0 0 0 
se  0 0 0 0 0 0 0 0 
s  0 1 0 0 1 0 0 0 
sw  1 0 0 1 0 0 0 0 

당신은 훨씬 더 컴팩트 여덟 비트 정수 8 개 개의 부울 값, 또는 배열로 이러한 연결을 나타낼 수 있습니다.

그러면 8 개의 부울 값 (또는 8 비트 정수)을 사용하여 해당 격자 사각형에로드 할 비트 맵의 ​​파일 이름을 쉽게 만들 수 있습니다. 예를 들어,이 체계를 사용하는 가운데 타일은 "부울 값만 사용하는"Bitmap01000011.png 또는 조금 더 짧은 파일 이름을 나타내는 이진 패턴을 나타내는 8 비트 정수의 16 진수 값을 사용하여 "Bitmap43.png").

256 가지 가능한 조합이 있으므로 256 비트 맵이 필요합니다.

"북쪽"연결은 북쪽 타일에 "남쪽"연결이 있음을 의미하지만 비트 맵을 조금 더 세게 선택하기 때문에 타일 당 네 부울/비트로 데이터를 줄일 수 있습니다. 그러나 원한다면 당신은 그것을 해결할 수 있습니다.

또는 각 제곱에서 영 (공백)과 9 개 (완전히 연결된 시스템 원) 사이의 비트 맵을 결합 할 수 있습니다. 투명 .png를 사용해야 만 서로 결합 할 수 있습니다. 단점은 브라우저가 각 사각형 (특히 완전히 연결된 사각형)을 그리는 속도가 느릴 수 있습니다. 이점은 만들 데이터가 적고 웹 사이트에서로드 할 데이터가 적을 것입니다.

지도 자체를 표로 표현하고 필요에 따라 각 셀에 이미지 링크로 비트 맵을 추가합니다.

될지도하는 의사 코드 :

draw_map(connection_map): 
    For each grid_square in connection_map 
     connection_data = connection_map[grid_square] 
     filenames = bitmap_filenames_from(connection_data) 
     insert_image_references_into_table(grid_square,filenames) 

# For each square having one of 256 bitmaps: 
bitmap_filenames_from(connection_data): 
    filename="Bitmap" 
    for each bit in connection_data: 
     filename += bit ? "1" : 0 
    return [filename,] 

# For each square having zero through nine bitmaps: 
bitmap_filename_from(connection_data): 
    # Special case - square is empty 
    if 1 not in connection_data: 
     return [] 
    filenames=[] 
    for i in 0..7: 
     if connection_data[i]: 
      filenames.append("Bitmap"+i) 
    filenames.append("BitmapSystem"); 
    return filenames 
관련 문제