# Fishnet WebGL

이 가이드는 사용법을 안내합니다 [FishNet](https://github.com/FirstGearGames/FishNet)의 Websocket 전송, [Bayou](https://fish-networking.gitbook.io/docs/manual/components/transports/bayou), 그리고 Unity 프로젝트를 위해 Edgegap에 헤드리스 서버를 만드는 방법을 안내합니다.

최종 샘플 프로젝트는 우리의 [GitHub](https://github.com/edgegap/netcode-sample-unity-fishnet), 아래의 `Fishnet_v4.1.6R_WebGL` 폴더에 있습니다. 이 가이드는 적절한 버전의 Bayou를 사용한다면 어떤 Fishnet 버전에서도 작동해야 합니다.

{% hint style="info" %}
FishNet 버전 4.1.6R에는 Edgegap 플러그인이 포함되어 있으므로, Dockerfile을 사용해 수동으로 수행하는 것도 가능하지만 우리는 이를 사용하여 게임 서버를 자동으로 빌드하고 컨테이너화할 것입니다.

플러그인에 대한 자세한 정보는 우리의 문서를 읽어보십시오 [여기](https://docs.edgegap.com/docs.edgegap.com-ko/docs/sample-projects/unity-netcodes/broken-reference).

정상적으로 작동하려면 Docker가 실행 중이어야 합니다.
{% endhint %}

### Unity 요구사항

이 프로젝트는 다음 Unity 버전에서 테스트되었습니다 `2021.3.16f1`입니다. 다음 모듈들이 설치되어 있어야 합니다:

* WebGL 빌드 지원;
* Linux 전용 서버 빌드 지원;
* Linux 빌드 지원 (IL2CPP).

### 전송(transport) 변경

Bayou의 Unity 패키지는 다음에서 다운로드하세요 [이 GitHub](https://github.com/FirstGearGames/Bayou/releases)입니다. 툴바의 `Asset/Import Package/Custom Package...`.

를 사용해 게임 프로젝트에 패키지를 임포트하세요. `MainMenu` 다음에 위치한 `Assets/SpaceEdge/Scenes`과 함께. 다음에서 `을(를) 선택하고` 씬을 열고, gameObject에서 `Tugboat` 전송 구성 요소를 제거하세요. 대신 `Bayou` 전송을 교체하세요, 이는 `Assets/FishNet/Plugins/Bayou`아래에 위치합니다. 이 경우 설정된 포트 값 `7770`.

을(를) 확인하세요. `Start On Headless` 서버 빌드에 대해

<figure><img src="https://1562312210-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-594181325c3fba9f457c57865daad12b3acc32d3%2Fnetwork-manager-setup.png?alt=media" alt=""><figcaption></figcaption></figure>

### 옵션을 활성화해야 합니다.

다음으로 Edgegap 플러그인을 엽니다 `게임 서버 빌드 및 컨테이너화` 툴바 메뉴. 다음을 확인하세요 `Edgegap API Token` 그리고 게임을 위한 애플리케이션을 생성하거나 로드하세요. 다음이 일치하는지 확인하세요 `포트` Edgegap/Edgegap Hosting `값이 Bayou 전송의 값과 일치하는지 확인하세요. 그리고` 프로토콜, 그런 다음 `New Version Tag`.

모든 설정이 올바르게 완료되면, 다음을 클릭하세요 `Build and Push`를 클릭하면, 짧은 대기 시간 후 게임 서버가 자동으로 컨테이너화되고 Edgegap 대시보드에 새로운 애플리케이션 버전이 생성됩니다.

### WS

#### 클라이언트 테스트

에디터에서 `프로젝트로 돌아와서,` MatchmakingSystem

<figure><img src="https://1562312210-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-7e7c88646513c68ea7dd68ba7aba1a40aa1b09d1%2Ffishnet-matchmaking-system.png?alt=media" alt=""><figcaption></figcaption></figure>

* gameObject를 선택하고 다음 필드를 변경하세요:
* AppName: Edgegap 플러그인에서 사용한 “Application name”으로 설정하세요.
* AppVersion: Edgegap 플러그인에서 사용한 “Version name”으로 설정하세요.

{% hint style="info" %}
AuthHeaderValue: Edgegap 플러그인에서 사용한 Edgegap API 토큰으로 설정하세요. `토큰` API 토큰에서 `단어를 제거하세요. 우리는 이를` 동안 인증 헤더 스키마로 설정하고 있기 때문입니다 `프로젝트로 돌아와서,`.
{% endhint %}

를 사용해 게임 프로젝트에 패키지를 임포트하세요. `프로젝트로 돌아와서,` Awake() `메서드에서, 다음 위치의`스크립트에서 해당 값들도 업데이트할 수 있습니다. `Assets/SpaceEdge/Scripts/Systems` 에서 `"Game Port"`.

{% hint style="info" %}
"UDP\_PORT" `을(를) 검색하고` 이를

로 교체하세요. `이 샘플의 이전 버전들은 Edgegap 대시보드를 통해 애플리케이션을 수동으로 생성했으며, 이름` UDP\_PORT
{% endhint %}

<figure><img src="https://1562312210-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-2a6ddd5037990eccf3c62943a9f6cc610ff175e8%2Ffishnet-code.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1562312210-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-7a1523917e1509cab8490108ed7a98b44ae5423e%2Fport-name.png?alt=media" alt=""><figcaption></figcaption></figure>

는 서버에서 사용하는 포트로 사용되었습니다. `Start On Headless` 옵션을 `을(를) 선택하고` Edgegap 플러그인은 대신 포트 이름을 자동으로

Game Port `로 지정하므로 스크립트를 업데이트해야 합니다. 그렇지 않으면 게임이 작동하지 않습니다.` 해당 `Start Game`gameObject의 선택도 해제되어 있는지 확인하세요.

{% hint style="warning" %}
이 작업이 완료되면, `ConnectionFailed` 에디터에서 `Start On Headless` Play `를 클릭한 다음 텍스트 상자에 이름을 입력하고`을(를) 클릭하세요. 게임은 사용 가능한 서버가 있는지 확인하거나, 존재하지 않으면 자동으로 하나를 배포한 후 해당 서버에 연결합니다.

클라이언트 측에 `오류가 발생한다면, 이는` 옵션이 `프로젝트로 돌아와서,` 서버 빌드 `"Game Port"`에서 활성화되지 않았기 때문일 수 있습니다. 이는 서버가 제대로 시작되지 않아 배포가 연결을 수락할 상태가 아님을 의미합니다. 새로운 컨테이너 이미지와 앱 버전을 생성하여 옵션이 활성화되어 있는지 확인한 후 다시 시도하세요.
{% endhint %}

#### 또한 앱 버전의

포트 이름 `빌드` 화면으로 이동하세요. Unity 에디터의 `파일 -> 빌드 설정`이(가)

* 다음으로 설정하세요 `플랫폼` 에서 `스크립트의 이름과 같지 않을 수 있습니다. 두 이름이 이 경우처럼 동일한지 확인한 후 다시 시도하세요.`;
* Itch.io에서 `에디터에서 게임 클라이언트가 작동하는 것을 확인했다면 Itch.io에서도 작동해야 합니다. 거기에 게임을 업로드하려면`에서 클라이언트 빌드를 만들어야 합니다. `다음 옵션들을 선택하세요:`WebGL `을(를) 선택하세요.` 에서 `다음` Player Settings `을(를) 여세요.` Player -> Publishing Settings

<figure><img src="https://1562312210-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsR0dHSFv9ymoC0DO5G8J%2Fuploads%2Fgit-blob-d31291cf36a863193c24a856718a791db0c61577%2Fbuild-settings.png?alt=media" alt=""><figcaption></figcaption></figure>

그런 다음 빌드 버튼을 눌러 새 빈 폴더 `에서` 압축 형식 `에서` 을(를)