게임 개발

이번엔 Point Graph에 대해 알아보려고 한다.

나머지 Graph에 대해선 알아보았으므로, 이 포스트가 Graph에 대한 마지막 포스트이지 않나 싶다.

다음 포스트부터 해당 에셋을 어떻게하면 맛깔나게 사용할 수 있는지 알아보려고 한다.

Grid Graph에 대해 알아보기 : https://game-develop.tistory.com/1

Navmesh/Recast Graph에 대해 알아보기 : https://game-develop.tistory.com/4

1. 개요

Point Graph는 사용자가 직접 node(= waypoint)를 지정할 필요가 있을때 사용하는 방식이며, 가장 기본적인 Graph 이다.

특정 포인트 → 특정 포인트로 넘어갈 때 유용하게 사용가능한 Graph인 것 같다.

또한 다른 Graph와 함께 사용하면 많은 것들을 만들 수 있을 것 같다.(ex. 기본적으로 Navmesh 이용 + 특정 지점은 Point 이용)

대표적으로 아래와 같이 <로스트아크>라는 게임에서 g키를 통해 언덕을 오르는 등 지형을 타는 것을 예로 들 수 있다.

2. Point Graph

1) 구성

• Root : Node들이 담긴 GameObject의 Transform
• Recursive : Root의 모든 하위 Node들을 찾을 것인지 여부
• Tag : Root를 지정하지 않을때 사용하며, 대신 Tag를 통해 Node들을 찾음(※ 'Untagged'라는 tag는 인식안됨)
• Max Distance : 경로로 만들 수 있는 Node들간 최대 거리(※ 0은 Infinity를 의미하며, 모든 노드간 경로가 생성됨, 아래 그림 참고)
• Max Distance (axis aligned) : Node간 X, Y, Z 각 축에 대한 최대 거리(※ 모두 0으로 하는게 좋아보임)
• Raycast : Node간 Raycast하여 장애물이 있는지 확인 (※ 해당 옵션 사용 시, 올바른 raycast를 위해 Node들은 지면에서 살짝 떨어트려야함)
  • Use 2D Physics : 2D 게임의 경우 체크
  • Thick Raycast : Raycast의 반지름을 굵게
  • Mask : Ray에 부딪힐 Layer 선택(※ Mask에서 특정 Layer를 제외할 시, 해당 Layer는 Raycast되지 않음)
• Optimize For Sparse Graph(※ Pro버전) : 기존 방식은 브루트 포스 방식으로 O(n^2) 비용을 소모, 체크하면 O(n)으로 최적화
• Nearest node queries find closet : Node, Connection(slower) 등 2가지 타입 존재
  • Node : 경로 선택 시 가까운 Node를 기준으로 함
  • Connection(slower) : Pro버전만 가능, 경로 선택 시 가까운 Node간 Connection과의 거리를 기준으로 함
  • 아래 그림 참고
• Initial Penalty : Scan시 모든 Node에 부여할 penalty(용도는 아직까지 모르겠음)

<Max Distance : 5>

<Max Distance : 0>

<Max Distance : 3> ==> 가까운 Node끼리만 경로가 생성된 것을 확인할 수 있다.

<Nearest node queries find closet>

2) 적용

① Node들 만들어주기

기본적으로 Point Graph를 이용하기 위해선, Point들을 만들어주고, 이들을 하나의 GameObject에 담아줘야 한다.

Point들을 묶은 Root의 이름은 Points라고 지어주고, 각 Point의 위치는 아래와 같이 구성하였다.

② 세팅

일단 Point Graph로만 경로를 계산할 것이기 때문에, 기존 Recast Graph를 삭제하였다.

Point Graph는 아래와 같이 파라미터를 설정하였으며, 반드시 Raycast를 체크하여 Mask를 지정해줘야한다.

(안그러면 Cube를 통과하며 Target으로 도달하는 문제 생김)

추가로 Mask를 설정해줘도, raycast의 굵기가 얇아 벽을 통과하는 문제가 생겨, Thick Raycast를 체크하여 조정해주었다.

AI도 수정해줘야 하는데, 기존 이동 스크립트인 RichAI는 navmesh기반 graph에서 작동하는 스크립트이기때문에, 바꿔줘야 한다. 따라서 AIPath로 바꿔주었으며, Smooth 스크립트도 Funnel이 아닌 다른 것으로 바꿔주었다.

③ 실행

이제 실행하게 되면 설정한 Point로 기반해 만든 경로로 제대로 동작하는 것을 확인할 수 있다!

3. AnimationLink/NodeLink

Point Graph에 대해 계속 알아보다가 매우 좋은 기능을 발견하였다.

그것은 바로 "Animation Link"와 라는 스크립트인데, 이는 "NodeLink2"라는 객체를 상속받아 객체이며, 한 포인트에서 특정 포인트로 갈 때 Animation을 실행시켜주는 기능을 수행해준다.

① NodeLink란

NodeLink는 NodeLink1, NodeLink2, NodeLink3로 총 3가지 유형이 있다.

• NodeLink1 : 두 node를 직접 연결, 수동으로 Graph를 수정할 때 사용
• NodeLink2 : node를 직접 연결하는 것이 아니라, 2개의 point node를 추가하여 간접 연결. 아래 그림 참고
• NodeLink3 : recast/navmesh Graph에서 사용하는듯함

<NodeLink2>

src에서 dst로 이동할 때 가정. 또한 위로 올라갈 수 있다고 가정.

A와 B라는 Point Node가 경로에 추가되며, Src → A → B → Dst 순으로 이동함.

② Animation Link란

3가지 NodeLink중 NodeLink2를 상속받아 만든 객체이며, 특정 Point 도달 시, 특정 Animation을 취할 수 있도록 해주는 스크립트이다.

아래에 있는 Point에서 위 Point로 올라가는 Animation을 넣고 싶을 때 유용하게 사용할 수 있다.

사용법은 아래와 같이 Cube, Link, Top으로 구성된 상태에서

Link에 Animation Link를 달아주고, End엔 Top을 연결해주고, Animation을 달아주면 된다.

이제 이 Animation Link를 돌아다닐 수 있도록 한 가지 작업을 더 해주면 되는데,

바로 돌아다닐 GameObject에 "Animation"을 추가해주고, "Animation Link Traversal"를 달아준 후 연결해주면 된다.

참조

https://arongranberg.com/astar/docs/pointgraph.html#optimizeForSparseGraph

https://arongranberg.com/astar/documentation/stable/class_pathfinding_1_1_animation_link.php

https://arongranberg.com/astar/documentation/stable/nodelink2.html

https://arongranberg.com/astar/documentation/stable/editinggraphs.html

1부에선 Grid Graph로 경로를 만들었다면, 이젠 Navmesh Graph로 만들어볼 것이다.

참고로 무료 버전은 Graph를 만들때 사용자가 직접 Blender등 모델링 응용 프로그램을 사용해야하는 번거로움이 있다.

Unity 상에서 자동으로 Navmesh를 구성하려면 Pro 버전을 구입해야한다.

해당 포스트에선 Pro 버전을 가정한다.

1. 개요

Grid Graph는 그리드 패턴을 사용해 갈 수 있는 영역을 찾는다. 균일하고 구조화되어있기에 매우 직관적이다.

또한 계산 속도가 매우 빨라, 런타임 중 Graph를 업데이트하기 좋은 타워디펜스나 RTS 장르등에 사용할 수 있다.

하지만 맵의 크기가 커질수록, 한 그리드의 크기는 고정적으로 정해져있기 때문에,

Grid Graph를 구성할 때 메모리를 엄청 잡아먹을 것이다!

(※ 그리드 크기 1일 경우, 8x8의 경우 64개의 그리드를, 16x16의 경우 256개의 그리드가 필요)

또한 아래와 같이 여러 층이 존재할 경우, 일반적인 Grid Graph로는 이를 처리할 수 없다.

(※ Pro 버전은 이를 처리해주는 LayerGridGraph 지원)

따라서 복잡한 구조를 가지며, 맵이 넓은 3D 게임에선 Grid Graph를 사용하는게 힘들것이다.

이를 해결하기 위해선, 고정된 크기로 나누는 것이 아니라 유동적으로 크기를 조절하여 나누는 것이 가능해야하며,

맵을 바둑판같은 모양으로 Grid를 찍어내어 계산하는 것이 아니라, 지형지물을 자세히 스캔하여 영역을 계산해야 한다.

이 방식으로 Graph를 만드는 것이 바로 Navmesh이다.

Navmesh는 길을 폴리곤(삼각형) 단위로 표시한다. 그런데 폴리곤들의 크기가 일정하지 않다.

장애물이 없는 넓은 평지를 나타낼 경우 큰 폴리곤으로 표현하며,

좁은 통로나 장애물이 있을 경우 작은 폴리곤으로 영역을 구체적으로 쪼갠다.

아래 Grid Graph와 비교하면 확연히 차이가 보인다.

<NavMesh>

<Grid>

따라서 같은 노드를 사용하더라도, 나타낼 수 있는 맵의 크기는 NavMesh가 압도적으로 더 넓다.

그러나, Grid보단 계산 속도는 많이 느리기때문에, 지형 지물이 자꾸 변하는 게임은 어울리지 않는다.

차이점을 보기좋게 표로 비교하면 아래와 같다.

2. Navmesh 자동 생성(Pro 버전만 해당)

0) AI 수정

앞서 추가한 AIPath를 Navmesh에 기반한 이동 스크립트인 RichAI로 바꾸자.(※ 물론 AIPath를 이용해도됨)

또한 Smooth를 위한 스크립트를 Funnel로 바꿔줘야 한다.

이들또한 Pro 버전에만 존재한다.

1) Adding Recast Graph

수동의 경우, 대충 Blender를 사용해 Navmesh를 만들고, Pathfinder의 "Navmesh Graph"에 집어넣어 만든다.

그러나 이 포스팅에서는 자동 생성에 대해서만 알아보려고 한다.

자동 생성은 Navmesh Graph가 아닌, "Recast Graph"를 클릭하면 된다.

Recast Graph의 구성은 아래와 같으며, 중요 파라미터만 살펴본다.

• Width(voxels), Height(Voxels) : 직접 수정은 불가능하지만, Cell size와 Size를 바꿔주어 수정 가능
• Cell Size : voxel의 크기, 이를 통해 Width, Height 조절하여 해상도 결정. 해상도가 높을수록 그래프가 더 구체적임.
• Use Tiles : Tiles 단위로 계산할 것인지 아닌지 여부. 이때 Use Tiles를 선택하게 되면, Tile Size/2의 길이를 가진 정사각형 청크가 나타남. 사용하는 이유는 병렬 스캔때문인듯함.(아래 그림 참고)
  • Tile Size가 클수록 초기 스캔 속도는 빠르지만, 지형이 변경될 시 계산 속도가 느림.
  • Tile Size가 작을수록 path의 quality는 높아지지만, 너무 작으면 AI가 구불구불하게 움직이게 됨
  • 일반적인 Tile Size는 64 ~ 256값
• Layer Mask : 갈 수 있는 영역을 탐색할 Layer

Navmesh 그래프는 항상 최적 경로를 보장해주지 않는데, 길 찾기가 폴리곤 중심에서 이뤄지기 때문이다.

2) 파라미터 조절

① Snap bounds to scene 클릭

먼저 Snap bounds to scene을 눌러 Graph의 Center와 Size, Rotation등을 알맞게 조정해야한다.

② Layer Mask 지정

AI와 Target까지 Navmesh에 포함돼있기 때문에, Scan해보면 그 주변부가 못가는 길로 구성돼있다.

이를 없애기 위해, Target과 AI에 따로 Layer를 지정하여 Layer Mask에서 제외시켜줘야한다.

이제 Scan하면 제대로 제외된것을 확인할 수 있다.

③ 이외 파라미터 알아서 조정

이외는 테스트를 해보며 입맛에 맞게 조정해주면 된다.

3) 실행

이제 실행하면 navmesh 기반으로 경로가 계산되고 길 찾기를 진행함을 볼 수 있다!

참조

https://arongranberg.com/astar/docs/getstarted2.html

아래 포스트부터 이어짐.

https://game-develop.tistory.com/1

에셋을 통해 경로를 잘 계산하고 이동까지 하는것까지 해보았지만, 뭔가 아직 부족한 느낌이 있다....

그건 바로 "자연스러움"이다.

AI가 이동하는 경로를 확대하여 보면, 기계적인 직선 운동만이 보인다.

딱딱한 움직임보다는 부드럽게 움직이는 것이 더 보기 좋지 않을까?

이 에셋엔 이 문제를 해결하기 위한 솔루션을 제공해준다!!

1. Simple Smooth 추가

AI에 Simple Smooth 스크립트를 추가해주자.(※ 작동하려면 반드시 Seeker가 있어야 한다.)

Simple Smooth의 구성은 아래와 같다.

Smooth Type엔 Simple, Bezier, Offset Simple, Curved Nonuniform 등 4가지 타입 존재한다.

• Simple : 모든 waypoint을 서로 가깝게 그려서 경로를 매끄럽게 만들며, 잘못 설정 시 코너 커팅 발생(※ 아래 그림)
• Bezier : 베지어 곡선, 항상 waypoint를 지나는 특징이 있음
• Offset Simple : Simple에서 코너 커팅을 최소화 시킴
• Curved Nonuniform : ??

파라미터에 대해선 설명보단 직접 수치를 조절해보면서 보는 것이 더 좋을 것 같다..

참고로 무료 버전이 아닌, Pro 버전의 경우 추가로 "Advanced Smooth"라는 것이 있는데,

Simple Smooth와의 차이는 아래와 같다.

실험해보면서 맘에 드는 것을 택하면 될 것같다.

<Simple Smooth - Bezier Type>

<Advanced Smooth>

참조

https://arongranberg.com/astar/docs/simplesmoothmodifier.html

블랙 프라이데이로 할인해서 산 에셋이다.

https://assetstore.unity.com/packages/tools/ai/a-pathfinding-project-pro-87744

게임에서 길찾기 기능은 필수적인 요소인데 A* 알고리즘을 이용하여 최적화된 길을 찾아주는 에셋이다.

1. 지형 만들기

사용하기 위해 먼저 지형을 만든다.

빨간색 Cube는 "Wall" 이라는 Layer로, 흰색 Cube는 "Obstacle"이라는 Layer로 지정하였다.

베이지색 Plane은 "Ground"라는 Layer로 지정하였다.

2. "Pathfinder" Component 적용한 GameObject 만들기

1) Component 추가

그 다음 현재 지형 중 어디가 갈 수 있는 길인지 알아야 하는데, 이 역할을 pathfinder가 한다.

Create Empty로 GameObject를 만들고 "pathfinder" component를 추가한다.

해당 GameObject의 이름은 A* 알고리즘을 적용하기 위한 발판으로 사용되니, "A*"라고 짓도록 하자.

2) Graph 생성

① Grid Graph 생성과 크기 조절

길 인식을 위한 여러 종류의 Graph가 있다.

한 Pathfinder에 대해서 최대 256개의 Graph를 추가할 수 있지만, 1~2개면 충분하다.

일단 사용법을 익히기 위해 Grid Graph를 사용하고, 나머지 Graph는 해당 에셋을 좀 사용하다가 포스팅할 것이다.

(할 일 추가)

무튼 Grid Graph를 선택시, Scene에 아래와 같은 Grid 모양의 판이 나오는 것을 확인할 수 있는데, 이는 길을 탐색할 범위를 나타낸다.

크기는 아까 만든 'Grid Graph' 선택시 나타나는 세부사항의 Width와 Depth를 통해 조절할 수 있으며,

굳이 저것으로 조절하지 않더라도 Scale tool로도 할 수 있다.

또한 크기조절뿐만 아니더라도, Center를 지정할 수 있고, Rotation도 가능하다.

Node Size는 Grid의 정사각형 크기를 의미한다.

아마 맵 Tile의 최소 크기만큼 지정하면 되지 않을까 싶다.

이 포스트에선 1로 지정하고 사용한다.

그리고 대충 길찾기를 실행할 범위까지 늘려준 다음, 해당 Graph의 Center값 중 Y값을 -0.1로 해주자.

(해당 Scene의 Ground Layer는 Y = 0부터 시작한다. 만약 Graph의 Y값도 0이면 나중에 높이 확인등을 할 때 '부동 소수점 오류'가 발생할 수 있어, 반드시 Ground의 Y값보단 낮게 설정해줘야 한다.)

② Scan 해보기

Scan을 실행하면(숏컷으로 Windows는 Ctrl+Alt+S, Mac은 Cmd+Alt+S로 실행할 수 있음)

아래와 같이 파란색 영역이 나온다.

해당 영역은 '갈 수 있는 영역'을 의미한다.

혹여나 색이 맘에 안든다면, [Graphs] 아래에 있는 [Settings]에서 변경할 수 있다.

③ Height Testing과 Collision Testing 설정

먼저 살펴볼 것은 Height Testing이다.

이는 Ray length, Mask, Thick Raycast, Unwalkable when no ground로 구성돼있다.

• Ray length : 갈 수 있는 높이 지정
• Mask : 갈 수 있는 Layer Mask 지정
• Thick Raycast : Scene으로 ray casting하는 ray의 굵기
• Unwalkable when no ground : Raycasting한 것이 Mask로 지정한 Layer가 아닐 시 갈 수 있는지 없는지 결정

Height Testing을 위해 Scene에 ray를 발사하여 측정하는 듯 하다.

아마 이를 그림판을 이용해 나타낸다면, 아래와 같은 형태가 될 것이다.(뇌피셜)

이런식으로 raycasting을 하여, Mask로 지정한 Layer가 나올 시(Ground등) Walkable로 만들고,

만약 Wall 또한 Mask로 지정시, diff값(※ Wall의 Y값 - Graph의 Y값)을 계산하여

Ray length보다 낮거나 같다면, Wall의 윗부분도 갈 수 있도록 계산하는 방식인것 같다.

(물론 Wall을 Mask로 지정하지 않으면 그냥 무시하고 못가는 지역으로 계산할 것임)

이때 Ground를 벗어날 시, 어떻게 처리할까에 대해선 'Unwalkable when no ground'가 담당하며,

체크하면 갈 수 있고, 체크를 안하면 갈 수 없도록 한다.(※ 기본적으로 체크 돼있다.)

Thick Raycast는 언제 어떻게 사용하는지 잘 모르겠다..

무튼 Mask를 Ground로 지정해서, Ground Layer만이 walkable하도록 만든다.

이후 Collision Testing을 살펴볼 것이다.

기본적으로 Collider type, Offset, Obstacle Layer Mask로 구성돼있다.

이외 Diameter, Height/Length등의 파라미터는 Collider type에 따라 달라지게 된다.

(※ Sphere는 Diameter만 존재, Ray는 Height/Length만 존재)

• Collider type : Sphere, Capsule, Ray등 3가지 타입 존재. 보통 Capsule 사용
  • Diameter : 지름, 해당 게임에서 돌아다닐 AI의 크기로 지정
  • Height/Length : 높이, 위와 마찬가지

            (※ 이 두 파라미터 값은 AI 크기보단 크게, 넉넉하게 잡는것이 좋다.)

• Offset : AI가 Ground에서부터 얼마나 높이 떨어져있는지
• Obstacle Layer Mask : 갈 수 없는 Layer Mask 지정

이제 각 파라미터가 바뀔때마다 어떻게 변할 것인지 확인할 것이다.

기본적으로 Obstacle Layer Mask는 "Wall"과 "Obstacle"로 지정하였다.

먼저 현재 상태로 Scan을 하면, 아래와 같은 형태로 나타난다.

(※ Obstacle Layer Mask를 지정하면서 Wall과 Obstacle의 파란색을 칠해져있던 윗부분이 없어진 것을 확인할 수 있다.)

Diameter를 2로 늘리면, 갈 수 있는 영역이 좀 줄어드는 것을 확인할 수 있다.(∵ AI의 몸집이 커지므로)

그다음 Height/Length를 조절할 것인데, 해당 지형에서는 AI의 키가 커봤자 못가는 지형이 생기는 것은 아니라서, 아무리 늘려봤자 변하는 것이 없다.

따라서 키가 큰 AI는 못지나가도록 지형을 아래와 같이 변경해주자.(※ 추가한 Cube에 "Obstacle" Layer를 지정해야 함)

이 상태로 Scan시, 아래와 같이 Graph가 형성된다.

마지막으로 Offset을 조절해보자.

아마 Offset은 공중 위를 날아다니는 AI를 위한 파라미터인것 같다.

대충 Wall 위에 떠 있는 흰색 Cube보다 높게 설정하면, 갈 수 없던 곳이 갈 수 있는 것으로 바뀌는 것을 확인할 수 있다

파라미터 값을 극단적으로 높여보며 차이점을 살펴봤으니, 다시 정상적으로 돌려놓는다.

3. 움직일 AI 만들기

1) GameObject 만들고 이동 스크립트 추가

먼저 GameObject를 만들고 [3D Object] - [Capsule]을 만들어 만든 GameObject에 붙인다.

만든 GameObject의 이름은 "AI"라고 지었다.

그 후 AI에 이동 스크립트를 추가한다.

이때 이동 스크립트는 AIPath, RichAI, AILerp등 3가지 종류가 존재한다.

• AIPath : 기본적인 이동 스크립트, 모든 Graph에서 사용 가능
• RichAI : Navmesh 기반 Graph용 (무료 버전엔 없음)
• AILerp : 선형 보간법을 통해 정확한 경로 계산, 모든 Graph에서 사용 가능

이 중 대표적으로 사용하는 AIPath Component를 추가한다.

AIPath를 추가함에 따라 생기는 AI의 collider안에 Capsule이 들어가도록 아래와 같이 position을 조절해야한다.

추가하게 되면 AIPath 이외에도 Seeker라는 스크립트도 추가된다.

이는 Helper Script인데, 대충 AIPath가 어느 지점으로 가고 싶다는 것을 Seeker에게 전달하면,

Seeker가 A*의 Pathfinder Component를 보고 경로를 계산하는 Script라고 보면 된다.

Seeker에 여러 요소가 있는데, 음... 다음에 알아보자

AIPath는 아래와 같이 구성돼있다.

크게 Shape, Pathfinding, Movement로 구성돼있는데, 각각에 대해 간략히 설명하면

• Shape : 노란색 원통형 collider 크기
  • Radius : 반지름 결정
  • Height : 높이 결정
• Pathfinding : 목적지까지 path 찾는 주기 설정
  • Recalculate paths automatically : Dynamic, Never, Every N Seconds로 구성, 기본적으로 동적으로 찾아주는 Dynamic 사용
  • Maximum Period : path 재설정하는 최대 주기(Dynamic에만 존재)
  • Sensitivity : 주변 감지할 범위(Dynamic에만 존재)
  • Visualize Sensitivity : 게임 실행 시 Scene상에서 Sensitivity 보이게끔 할 것인지 여부(Dynamic에만 존재)
• Movement
  • Can Move : 움직일 수 있는지 여부, 미체크시 움직이지 않음
  • Max Speed : 목표까지 갈 때 낼 수 있는 최대 Speed, 높을수록 빠름
  • Max Acceleration : 가속/감속 단위, 높을수록 속도가 빨리 빨라지고 빨리 느려짐. (※ Default로 설정할 시, Max Speed와 동일한 값인듯함)
  • Orientation : 방향축 관련, 3D 게임은 ZAxisForward, 2D 게임은 YAxisForward로 설정
  • Enable Roatation : 방향 틀때 몸 회전 여부, 미체크시 방향을 틀어도 몸이 회전하지 않음
  • Pick Next Waypoint Distance : 계산한 경로에서 waypoint을 잡는 범위(※ 아래 그림 참고)
  • Slowdown Distance : 감속을 시작할 목적지까지의 거리
  • End Reached Distance : 도착했음을 판단할 목적지까지의 거리
  • Always Draw Gizmos : 위 3개 Distance의 범위를 Scene상에서 표현할 것인지 유무
  • When Close To Destination : Stop, Continue To Exact Destination 옵션 존재
  • Constrain Inside Graph : ??
  •  Gravity : 중력 설정
  • Debug info : 목적지까지와의 거리, 목적지 좌표등 포함

2) AI Destination Setter 추가

위에서 이동 스크립트를 추가하면서 AI가 이동하는 방법을 익혔다면, 이제 이동할 목적지를 설정해줘야한다.

이는 AI에 "AI Destination Setter" Component를 추가해야하며, 해당 Component는 아래와 같이 구성된다.

사용법은 엄청 간단한데, Target에 목적지가 될 빈 GameObject를 만들어 넣으면 된다.

즉 GameObject의 위치가 AI가 움직일 목적지가 된다는 뜻이다.

무튼 Target을 넣어서 아래와 같이 만든다.

진짜 실행해서 테스트해보기 위해 Target과 AI를 아래와 같이 배치한다.

실행하면 제대로 path가 나오면서 자동으로 이동하는 것을 확인할 수 있다!!!!

참고자료

https://arongranberg.com/astar/docs/getstarted.html