게임에서의 Hexa Tile에 관하여-기하학

출처 : https://www.redblobgames.com/grids/hexagons/

Red Blob Games: Hexagonal Grids

위 싸이트에는 게임과 관련된 알고리즘 등도 많고 마우스와 상호작용하는 방식으로 예시를 볼 수 있기 때문에 한번쯤 구경하면 좋다.

 

우선 번역할 내용은 육각타일맵과 관련된 내용으로 일반적인 사각형 타일맵과는 여러모로 규칙이 다르다.

 

This guide will cover various ways to make hexagonal grids, the relationships between different approaches, and common formulas and algorithms. Hexagonal grids aren't as common as square grids. I've been collecting hex grid resources for over 20 years, and wrote this guide to the most elegant approaches that lead to the simplest code, largely based on the guides by Charles Fu and Clark Verbrugge. Most parts of this page are interactive.

 

-이 가이드는 다양한 방법의 육각형 그리드를 만드는 방법, 다른 접근방법, 일반적인 공식과 알고리즘 등에 대해서 기술할 것이다.

육각 그리드는 일반적인 사각 그리드와는 같지 않다.

나는 근 20년동안 육각 그리드에 대한 자료를 모아왔고, 그에 대한 가장 간단한 코드를 만들기 위한 가장 우아한 가이드이며, 'Charles Fu'와 'Clark verbrugge'의 가이드를 가장 많이 참고했다.

대부분 이 웹 페이지는 상호작용을 한다.

 

The code samples on this page are written in pseudo-code; they're meant to be easy to read and understand. The implementation guide has code in C++, Javascript, C#, Python, Java, Typescript, and more.

 

- 이 페이지에 있는 코드 샘플은 대부분 스도코드로 작성됐고, 이것은 읽고 이해하기 쉽게 하기 위해서이다.

이 구성 가이드는 c++, c#, 자바스크립트 등의 코드로 구현되어 있다.

 

Hexagons are 6-sided polygons. Regular hexagons have all the sides the same length. I'll assume all the hexagons we're working with here are regular. The typical orientations for hex grids are vertical columns (flat topped) and horizontal rows (pointy topped).

 

- 핵사곤은 6개의 변을 지닌 폴리곤이다. 규칙적인 헥사곤은 모든 변이 같은 길이를 지닌다.

나는 우리가 여기서 작업할 모든 헥사곤은 규칙적이라고 가정한다.

육각형을 배치하는 경우에 따라서 수직, 수평으로 구분된다. [수직 : 변이 밑에 있는 형태 / 수평 : 점이 밑에 있는 형태]

 

Angles

 

In a regular hexagon the interior angles are 120°. There are six “wedges”, each an equilateral triangle with 60° angles inside. Each corner is size units away from the center. In code: function flat_hex_corner(center, size, i);

 

- 규칙적인 헥사곤은 내부각도가 120도이다. 총 6개의 "웨지", 각각의 내각이 60도인 등변 삼각형이 내부에 있다.

각 꼭지점은 중심에서 중심으로부터 떨어진 크기단위이다[?]

* 코드는 해당 싸이트에서 확인 할것.

 

To fill a hexagon, gather the polygon vertices at hex_corner(…, 0) through hex_corner(…, 5). To draw a hexagon outline, use those vertices, and then draw a line back to hex_corner(…, 0).

 

- 헥사곤을 채우기 위해서, 각 폴리곤의 정점을 i에 0 ~ 5 를 통해서 얻을 수 있다.

헥사곤 외곽선을 그리기 위해서, 이 정점들을 둘러서 그리면 된다.

 

The difference between the two orientations is a rotation, and that causes the angles to change: flat topped angles are 0°, 60°, 120°, 180°, 240°, 300° and pointy topped angles are 30°, 90°, 150°, 210°, 270°, 330°. Note that the diagrams on this page use the y axis pointing down (angles increase clockwise); you may have to make some adjustments if your y axis points up (angles increase counterclockwise).

 

- 두가지 방향배치 방법 사이에는 회전으로 인한 각도의 차이가 생긴다.

[플랫탑] 방식은 0도에서 60, 120 ..., 300도이며 [포인트]탑 방식은 30도에서 90, 150 ..., 330도이다.

이 페이지에 있는 해당 다이어그램이 y축값이 음수인 포인트들은 시계방향으로 각도가 커진다는 것을 알아두자.

당신은 y축값이 양수인 포인트들은 별도의 정의가 필요할 수 있다.

 

Size and Spacing

Next we want to put serveral hexagons together.

In the pointy orientation, a hexagon has width 'w=sqrt(3)* size' and height 'h=2*size'

The sqrt(3) comes from sin60

 

- 다음으로 우리는 여러 헥사곤들을 놓을 것이다.

'point top'방식으로 된 헥사곤은 가로는 sqrt(3)* 변의 길이, 높이는 2*변의 길이가 된다.

이때 sqrt(3)의 경우 sin60에서 도출한 것이다.

=> flat top 방식의 경우 w = 2*size, h = sqrt(3)*size가 된다.

 

The horizontal distance between adjacent hexagon centers is 'w'

The vertical distance between adjacent hexagon centers is h*3/4.

 

- 인접한 헥사곤 중심의 수평 거리는 w이며 인접한 헥사곤 중심의 수직거리는 h*3/4이다.

=> 'flat top'방식의 경우 수평거리는 w*3/4, 수직거리는 h이다.

=> 출처 싸이트에서 이미지 확인하면 이해하기 쉬움.

 

 

some games use pixel art for hexagons that does not match an exactly regular polygon.

The angles and spacing formulas I describe in this section won't match the sizes of your hexagons.

the rest of the article, describing algorithms on hex grids, will work even if your hexagons are stretched or shrunk a bit, and I explain on the implementation page how to handle stretching.

 

- 몆몆 게임은 정확히 규격화되지 않은 헥사곤을 픽셀아트 측면에서 사용한다

내가 이 섹션에서 서술한 각도와 공간 식은 너의 헥사곤과 같지 않을 수 있다.

기사의 남은 부분들은, 헥사 그리드에서의 알고리즘에 관해서 서술하고 있고, 이것은 늘어나거나 줄어든 너의 헥사곤에서도 작동할 것이다.

그리고 나는 구현 페이지에서 어떻게 늘리는 방법에 대해서도 설명한다.