HTML5GAME

카드 게임을 만들 계획이라면 카드를 보여주고 등을 보여야 할 때가 왔습니다. 그런 다음 카드를 뒤집어서 가치를 보여줄 필요가 있습니다.

일반적으로 3D 엔진을 사용하면 축 중 하나를 따라 플립하는 기본 요소 일뿐 아니라 정말 쉬운 작업이됩니다.

우리가 3D 엔진을 사용하지 않을 때해야 할 일은 무엇입니까? Phaser 트윈을 사용하여 플립 운동을 가짜로 만들 수 있습니다.

수직축을 따라 카드를 확대하여 카드가 올라가는 느낌을주고, 카드가 수평선에 가까워 질 때까지 수평축을 따라 축소합니다. 카드가 테이블에 수직 인 순간입니다.

그런 다음 카드 프레임을 변경하고 수평축을 따라 확대하면서 새로운 프레임을 천천히 보여주기 위해 y 축척에 따라 카드를 내립니다.

카드를 클릭하거나 가볍게 두 드립니 다.

다음은 완전히 주석 처리 된 소스 코드입니다.

이제 2D 카드 게임에 사실감을 더할 수 있습니다. 다음에는 그림자와 다른 흥미로운 효과를 추가하는 방법을 보여줄 것이며 소스 코드를 다운로드 할 것입니다.

예제를 살펴보고 이 부분의 소스 코드를 살펴보십시오.

음식 개념

이 시리즈의 마지막 부분에서는 뱀이 먹을 수 있는 음식을 추가 할 것입니다. 이것이 우리의 마지막 부분이기 때문에 데모는 완성 된 버전입니다!

우리의 음식 스프라이트는 작은 육각형 일 것입니다. 이 스프라이트에는 원형 물리바디가 있습니다. 음식 스프라이트가 뱀 머리와 충돌 할 때, 음식이 머리 중심을 향해 중력을 가하는 것처럼 보이는 구속 조건이 만들어집니다. 음식이 뱀 머리의 중심에 있으면 파괴되고 뱀의 크기가 커집니다. 육각 이미지는 흰색이므로 hex.png에서 볼 수 있듯이 어떤 색상의 음식이라도 만들 수 있습니다.

음식

food.js의 Food 함수를 살펴보십시오.

Food = function(game, x, y) {

    this.game = game;

    this.debug = false;

    this.sprite = this.game.add.sprite(x, y, 'food');

    this.sprite.tint = 0xff0000;

    this.game.physics.p2.enable(this.sprite, this.debug);

    this.sprite.body.clearShapes();

    this.sprite.body.addCircle(this.sprite.width * 0.5);

    // 무언가가 음식에 부딪 칠 때 콜백을 설정합니다.

    this.sprite.body.onBeginContact.add(this.onBeginContact, this);

    this.sprite.food = this;

    this.head = null;

    this.constraint = null;

}

여기서는 음식 스프라이트를 만들고, 원형 물리 바디를 만들고,이 몸체가 뱀 머리와 접촉하기 시작할 때 콜백을 설정하고, 마지막으로 음식 머리를 만질 때 사용할 속성 머리와 구속 조건을 만듭니다.

처음 접촉

음식이 뭔가를 만졌을 때 콜백을 보자.

onBeginContact: function(phaserBody, p2Body) {

    if (phaserBody && phaserBody.sprite.name == "head" && this.constraint === null) {

        this.sprite.body.collides([]);

        // 음식과 충돌 한 뱀 머리 사이의 제약 조건을 만듭니다.

        // 음식은 머리 스프라이트의 중심으로 가져옵니다.

        this.constraint = this.game.physics.p2.createRevoluteConstraint(

            this.sprite.body, [0,0], phaserBody, [0,0]

        );

        this.head = phaserBody.sprite;

        this.head.snake.food.push(this);

    }

}

먼저 음식이 충돌 한 뱀 머리인지 확인합니다. 그렇다면 우리는 이 음식에 대한 모든 충돌을 차단합니다. 우리는 실제로 그것이 닿았 던 뱀 머리쪽으로 음식을 끌어 당기는 회전 제한을 만듭니다. 우리는 음식이 충돌 한 뱀 머리에 머리 속성을 설정하고, 우리는 잠시 후에 설명 할 뱀의 음식 배열에 이 음식을 밀어 넣습니다.

업데이트

업데이트 방법을 살펴보십시오.

update: function() {

    // 일단 음식이 뱀 머리의 중심에 도달하면, 그것을 파괴하고 뱀의 크기를 증가시킵니다.

    if (this.head && Math.round(this.head.body.x) == Math.round(this.sprite.body.x) &&

    Math.round(this.head.body.y) == Math.round(this.sprite.body.y)) {

        this.head.snake.incrementSize();

        this.destroy();

    }

}

여기서 우리는 음식이 대략 머리 중심에 있는지 확인합니다. 그것이되면, 우리는 뱀 크기를 증가시키고 이 음식을 파괴합니다.

파괴

우리 게임에서 그 밖의 모든 것과 마찬가지로, 음식에는 파괴 방법이 필요합니다.

destroy: function() {

    if (this.head) {

        this.game.physics.p2.removeConstraint(this.constraint);

        this.sprite.destroy();

        this.head.snake.food.splice(this.head.snake.food.indexOf(this), 1);

        this.head = null;

    }

}

일단 머리에 부딪치더라도 우리는 단지 그것을 파괴 할뿐입니다. 그런 다음 제약 조건을 제거하고 스프라이트를 제거한 다음 이전에 언급 한 뱀의 해당 배열에서 음식을 제거합니다.

뱀 음식 배열

Snake 클래스에서 다음 줄을 추가했습니다.

this.food = [];

이 배열은 뱀이 현재 소비하고있는 모든 음식을 포함합니다. 즉, 뱀과 충돌했지만 아직 파괴되지 않은 음식을 의미합니다. 왜 우리가 이것을 필요로합니까? 뱀이 갑자기 파괴되면 음식이 뱀에게 강요되므로 뱀이 모두 파괴되어야합니다. 이것을 처리하지 않으면 오류가 발생합니다. 자 이제 이것을 뱀 파괴 방법에 추가해 봅시다.

// 뱀 머리에 구속 된 음식을 파괴하라.

for (var i = this.food.length - 1 ; i >= 0 ; i--) {

    this.food[i].destroy();

}

게임에 음식 추가하기

마지막으로 실제로 음식을 추가하고 올바르게 충돌해야합니다. game.js를 한번보세요. 우리는 Create 상태에 몇몇 그룹과 음식을 추가 할 것입니다 :

this.foodGroup = this.game.add.group();

this.snakeHeadCollisionGroup = this.game.physics.p2.createCollisionGroup();

this.foodCollisionGroup = this.game.physics.p2.createCollisionGroup();

// add food randomly

for (var i = 0 ; i < 100 ; i++) {

    this.initFood(Util.randomInt(-width, width), Util.randomInt(-height, height));

}

마지막 몇 라인은 임의의 위치에서 initFood 메소드를 호출합니다. 이 방법을 살펴보십시오.

initFood: function(x, y) {

    var f = new Food(this.game, x, y);

    f.sprite.body.setCollisionGroup(this.foodCollisionGroup);

    this.foodGroup.add(f.sprite);

    f.sprite.body.collides([this.snakeHeadCollisionGroup]);

    return f;

}

우리는 음식을 일부 그룹에 추가 한 다음 뱀 머리와 만 충돌하는지 확인합니다. create 메서드에 뱀을 추가 한 후에는 자신에게 충돌 그룹을 제공해야합니다.

// initialize snake groups and collision

for (var i = 0 ; i < this.game.snakes.length ; i++) {

    var snake = this.game.snakes[i];

    snake.head.body.setCollisionGroup(this.snakeHeadCollisionGroup);

    snake.head.body.collides([this.foodCollisionGroup]);

    //callback for when a snake is destroyed

    snake.addDestroyedCallback(this.snakeDestroyed, this);

}

우리는 뱀 머리를 음식과 충돌하도록 설정 한 다음 파괴 콜백을 추가합니다.

Dropping Food on Destruction

마지막으로, 우리 게임의 가장 중요한 부분 : 그들이 죽을 때 음식을 떨어지는 뱀! 뱀이 파괴되었을 때 game.js에서 콜백 메소드를 봅시다

snakeDestroyed: function(snake) {

    //place food where snake was destroyed

    for (var i = 0 ; i < snake.headPath.length ;

    i += Math.round(snake.headPath.length / snake.snakeLength) * 2) {

        this.initFood(

            snake.headPath[i].x + Util.randomInt(-10,10),

            snake.headPath[i].y + Util.randomInt(-10,10)

        );

    }

}

우리는 뱀의 경로 근처에서 무작위로 음식을 떨어 뜨려 음식물이 고르게 흩어 지도록 경로를 반복합니다. 그리고 그걸로 우리 게임이 완성되었습니다!

결론

Slither.io 여행이 끝났습니다. 이제 자신의 IO 게임을 만들거나 이 게임에 추가 할 시간입니다. 이 시리즈와 같은 다른 시리즈를보고 싶다면 알려주세요. 충분한 관심이 있다면이 게임 멀티 플레이어 제작에 대한 자습서를 작성하는 것을 고려할 것입니다.

이 시리즈는 Phaser의 지원 없이는 가능하지 않았습니다. 잠시 시간을내어 Twitter에서 나를 따라 가고이 튜토리얼 시리즈의 소스 코드에 Github의 별표를 올려주세요!

예제를 살펴보고 이 부분의 소스 코드를 살펴보십시오.

그림자 개념 및 목표

시리즈의 이 부분에서는 뱀 아래에 회색 그림자를 추가 할 것입니다. 우리는 이 그림자가 색을 바꿀 수 있다는 점에서 유연 할 것이므로 플레이어가 스페이스 바를 눌러 속도를 높이면 그림자가 켜질 수 있습니다. 그것 이외에, 우리는 단순히 뱀 아래에 머물러있는 그림자가 필요합니다.

이미지

Assets 폴더를 보고 white-shadow.png를 보십시오. 왜 흰색입니까? 우리는 이제 스프라이트에 어떤 색조도 줄 수 있으므로 곧 살펴 보겠습니다. 뱀의 섹션 아래에 이러한 이미지 스프라이트 그룹을 추가 한 다음 뱀과 함께 이동합니다.

그림자

이제 shadow.js를보세요. 먼저 Shadow 함수를 만듭니다.

Shadow = function(game, sections, scale) {

    this.game = game;

    this.sections = sections;

    this.scale = scale;

    this.shadowGroup = this.game.add.group();

    this.shadows = [];

    this.isLightingUp = false;

    this.lightStep = 0;

    this.maxLightStep = 3;

    this.lightUpdateCount = 0;

    this.updateLights = 3;

    this.darkTint = 0xaaaaaa;

    this.lightTintBright = 0xaa3333;

    this.lightTintDim = 0xdd3333;

}

여기서 그림자 배열을 만들고, 색상 변경 시퀀스를 처리하기 위해 일부 변수를 초기화하고, 실제로 다른 그림자 색조에 대한 일부 속성을 설정합니다.

그림자 추가

다음으로 쉐도우 스프라이트를 추가하는 메소드가 필요합니다. 그림자 프로토 타입의 add 메서드는 다음과 같습니다.

add: function(x, y) {

    var shadow = this.game.add.sprite(x, y, "shadow");

    shadow.scale.setTo(this.scale);

    shadow.anchor.set(0.5);

    this.shadowGroup.add(shadow);

    this.shadows.push(shadow);

}

지정된 위치에 그림자 스프라이트를 추가 한 다음 그룹에 추가합니다. Snake 클래스를 돌아 보면 각 뱀 섹션마다 하나의 그림자가 추가 된 것을 볼 수 있습니다.

업데이트

이제 뱀 섹션 아래로 그림자를 이동하기 위해 업데이트 메소드가 필요합니다.

update: function() {

    var lastPos = null;

    for (var i = 0 ; i < this.sections.length ; i++) {

        var shadow = this.shadows[i];

        var pos = {

            x: this.sections[i].body.x,

            y: this.sections[i].body.y

        };

        // 이전 그림자가 같은 위치에 있으면 그림자를 숨 깁니다.

        if (lastPos && pos.x == lastPos.x && pos.y == lastPos.y) {

            shadow.alpha = 0;

            shadow.naturalAlpha = 0;

        }

        else {

            shadow.alpha = 1;

            shadow.naturalAlpha = 1;

        }

        // 각 그림자를 뱀 섹션 아래에 배치합니다.

        shadow.position.x = pos.x;

        shadow.position.y = pos.y;

        lastPos = pos;

    }

    // 밝은 색조로 그림자를 연다.

    if (this.isLightingUp) {

        this.lightUpdateCount++;

        if (this.lightUpdateCount >= this.updateLights) {

            this.lightUp();

        }

    }

    // 그림자를 어둡게 만든다.

    else {

        for (var i = 0 ; i < this.shadows.length ; i++) {

            var shadow = this.shadows[i];

            shadow.tint = this.darkTint;

        }

    }

}

코드의 첫 번째 부분은 각 그림자를 뱀 섹션과 같은 위치로 이동시킵니다. 두 개의 그림자가 같은 위치에 있으면 알파를 0으로 설정하여 그림자 중 하나를 숨 깁니다. 이렇게 하면 섹션이 추가 될 때 뱀의 뒤쪽에 그림자 스프라이트가 스태킹 되지 않습니다. 그런 다음 isLightingUp 속성을 기반으로 그림자 스프라이트 색조를 변경합니다.

Lighting Up

업데이트에서 호출하는 lightUp 메서드를 살펴 보겠습니다.

lightUp: function() {

    this.lightUpdateCount = 0;

    for (var i = 0 ; i < this.shadows.length ; i++) {

        var shadow = this.shadows[i];

        if (shadow.naturalAlpha > 0) {

            // 그림자가 일정하지 않게 교번 효과를 만듭니다.

            if ((i - this.lightStep) % this.maxLightStep === 0 ) {

                shadow.tint = this.lightTintBright;

            }

            else {

                shadow.tint = this.lightTintDim;

            }

        }

    }

    // 그림자 색조를 대체하는 방법을 결정하기 위해 카운터를 사용합니다.

    this.lightStep++;

    if (this.lightStep == this.maxLightStep) {

        this.lightStep = 0;

    }

}

이 방법은 밝은 색조로 그림자를 밝게 합니다. 더 어두운 색과 밝은 색으로 번갈아 가며 실제 게임과 같이 그림자가 돋보입니다.

스케일과 파괴

뱀의 다른 부분과 마찬가지로 그림자도 크기를 조정하고 파괴해야 합니다. 다음은 스케일 방법입니다.

setScale: function(scale) {

    this.scale = scale;

    for (var i = 0 ; i < this.shadows.length ; i++) {

        this.shadows[i].scale.setTo(scale);

    }

}

그리고 여기 파괴 방법이 있습니다 :

destroy: function() {

    for (var i = this.shadows.length - 1 ; i >= 0 ; i--) {

        this.shadows[i].destroy();

    }

}

뱀

Snake 클래스에 그림자를 구현해 보겠습니다.

this.shadow = new Shadow(this.game, this.sections, this.scale);

Snake의 addSectionAtPosition 메소드에서 각 섹션에 하나씩 그림자 스프라이트를 추가해야합니다.

this.shadow.add(x,y);

그런 다음 뱀 업데이트 메서드에서 그림자 업데이트 메서드가 필요합니다.

this.shadow.update();

그리고 그림자는 뱀 파괴 방법에 있는 방법을 파괴한다 :

this.shadow.destroy();

그리고 그것으로 그림자가 구현되었습니다. 마지막 부분에서 우리는 뱀을 위한 음식을 구현하고 시리즈를 마무리 할 것입니다.

멀티 플레이어 게임을 제작하는 것은 여러 가지 이유로 어려움을 겪습니다. 호스트 비용이 많이 들고 설계가 까다 롭고 구현하기 어려울 수 있습니다. 이 자습서를 통해 마지막 장벽을 해결할 수 있기를 바랍니다.

이것은 게임을 만드는 방법을 알고 자바 스크립트에 익숙하지만 온라인 멀티 플레이어 게임을 만든 적이없는 개발자를 대상으로합니다. 일단 끝나면 기본적인 네트워킹 구성 요소를 모든 게임에 구현하고 거기에서 구축 할 수 있어야합니다.

이것이 우리가 구축 할 것입니다.

여기서 라이브 버전의 게임을 사용해 볼 수 있습니다! W 또는 위로 이동하여 마우스를 향해 이동하고 클릭하여 촬영하십시오. 온라인에 다른 사람이 없다면 같은 컴퓨터에서 두 개의 브라우저 창을 열거 나 휴대 전화에서 두 개의 브라우저 창을 열어 멀티 플레이어 작동 방식을 확인하십시오. 로컬에서 실행하는 데 관심이 있다면 완전한 소스 코드를 GitHub에서도 사용할 수 있습니다.

나는 Kenney 's Pirate Pack 아트 Asset과 Phaser 게임 프레임 워크를 사용하여 이 게임을 한데 모았습니다. 이 자습서에서는 네트워크 프로그래머 역할을 맡을 것입니다. 출발점은 이 게임의 모든 기능을 갖춘 싱글 플레이어 버전이 될 것이며, 네트워킹 부분에 Socket.io를 사용하여 Node.js에 서버를 작성하는 것은 여러분의 일이 될 것입니다. 이 튜토리얼을 관리하기 쉽게 하기 위해 멀티 플레이어 부분에 초점을 맞추고 Phaser 및 Node.js의 특정 개념을 살펴 보겠습니다.

1. 설정

Glitch.com의 스타터 키트를 설치했습니다.

몇 가지 빠른 인터페이스 팁 : 언제든지 Show 버튼 (왼쪽 상단)을 클릭하여 앱의 실시간 미리보기를 볼 수 있습니다.

왼쪽의 수직 사이드 바에는 앱의 모든 파일이 포함됩니다. 이 응용 프로그램을 편집하려면 "리믹스"해야합니다. 이렇게하면 귀하의 계정에 복사본이 생성됩니다 (또는 git lingo에서 포크로 작성). Remix this button을 클릭하십시오.

이 시점에서 익명 계정으로 앱을 수정하게됩니다. 로그인하여 (오른쪽 상단) 작업 내용을 저장할 수 있습니다.

이제 더 나아 가기 전에 멀티 플레이어를 추가하려는 게임의 코드에 익숙해지는 것이 중요합니다. index.html을 살펴보십시오. 플레이어 오브젝트 (35 행) 외에 preload (99 행), create (115 행), GameLoop (142 행)의 세 가지 중요한 기능을 알고 있어야 합니다.

게임을 통해 배운다면 다음과 같은 도전 과제를 시도하여 게임이 어떻게 작동하는지 요점을 확인하십시오.

 - 세계를 더 크게 만든다. (29 행) - 페이지 내 실제 캔버스에 게임 내 세계와 창 크기에 대해 별도의 세계 크기가 있음을 알린다.

 - 스페이스 바를 앞으로 돌리십시오 (53 행).

 - 플레이어 선종을 변경하십시오 (라인 129).

 - 총알이 느리게 움직 이도록하십시오 (줄 155).

Socket.io 설치하기

Socket.io는 웹 소켓을 사용하여 브라우저에서 실시간 통신을 관리하기위한 라이브러리 입니다 (멀티 플레이어 데스크톱 게임을 만드는 경우 UDP와 같은 프로토콜 사용과 반대). 또한 WebSocket이 지원되지 않는 경우에도 여전히 작동하는지 확인해야합니다. 따라서 메시징 프로토콜을 처리하고 사용자가 사용할 수있는 훌륭한 이벤트 기반 메시지 시스템을 제공합니다.

우리가해야 할 첫 번째 일은 Socket.io 모듈을 설치하는 것입니다. Glitch에서는 package.json 파일로 이동하여 종속성에서 원하는 모듈을 입력하거나 패키지 추가를 클릭하고 "socket.io"를 입력하여이 작업을 수행 할 수 있습니다.

이것은 서버 로그를 지적하기에 좋은 시간입니다. 왼쪽에있는 Logs 버튼을 클릭하여 서버 로그를 불러 오십시오. Socket.io를 모든 종속 항목과 함께 설치해야합니다. 여기서 오류 또는 서버 코드의 출력을 보러 갈 것입니다.

이제 server.js로 이동하십시오. 이것이 서버 코드가 있는 곳입니다. 지금 당장은 HTML을 제공하기 위한 몇 가지 기본적인 상용구가 있습니다. Socket.io를 포함하도록 맨 위에 다음 행을 추가하십시오.

var io = require('socket.io')(http);

이제 클라이언트에 Socket.io를 포함시켜야하므로 index.html로 돌아가서 <head> 태그의 맨 위에 추가하십시오.

참고 : Socket.io는 자동으로 해당 경로에서 클라이언트 라이브러리 제공을 처리하므로 폴더에 /socket.io/ 디렉토리가 없는데도이 행이 작동하는 이유입니다.

이제 Socket.io가 포함되고 준비 되었습니다!

2. 플레이어 탐지 및 생성

첫 번째 단계는 서버에서 연결을 수락하고 클라이언트에서 새 플레이어를 생성하는 것입니다.

서버에서 연결 수락

server.js의 맨 아래에 다음 코드를 추가하십시오.

이것은 클라이언트가 연결할 때 자동으로 트리거 되는 모든 연결 이벤트를 수신 대기하도록 Socket.io에 지시합니다. 각 클라이언트에 대해 새로운 소켓 객체를 생성합니다. 여기서 socket.id는 해당 클라이언트의 고유 식별자입니다.

이 작업이 제대로 작동하는지 확인하려면 클라이언트 (index.html)로 돌아가서이 함수를 create 함수의 어딘가에 추가하십시오.

var socket = io(); // This triggers the 'connection' event on the server

게임을 시작한 다음 서버 로그를 보면 (로그 버튼을 클릭하면) 해당 연결 이벤트가 기록됩니다.

이제 새로운 플레이어가 연결될 때, 우리는 그들이 우리에게 그들의 상태에 관한 정보를 보내길 기대합니다. 이 경우 적절한 위치에 올바르게 생성하려면 x, y 및 각도를 알아야합니다.

연결 이벤트는 Socket.io가 우리를 위해 시작하는 내장 이벤트였습니다. 우리는 우리가 원하는 모든 정의 된 이벤트를 들을 수 있습니다. 저는 new-player를 부를 것이고, 클라이언트가 그들의 위치에 관한 정보에 연결하자 마자 그것을 보내 줄 것으로 기대합니다. 이것은 다음과 같습니다.

이 프로그램을 실행하면 서버 로그에 아무 것도 표시되지 않습니다. 우리가 클라이언트에게 이 새로운 플레이어 이벤트를 아직 내 보내지 않았기 때문입니다. 그러나 잠시 돌보고 서버를 계속 사용한다고 가정 해 봅시다. 우리가 접속한 새로운 플레이어의 위치를 받은 후에는 어떻게 해야합니까?

우리는 새로운 플레이어가 접속했다는 것을 알리기 위해 연결된 모든 다른 플레이어에게 메시지를 보낼 수 있습니다. Socket.io는 이렇게 하기위한 편리한 함수를 제공합니다 :

socket.broadcast.emit('create-player',state_data);

socket.emit을 호출하면 해당 클라이언트로 메시지가 다시 전송됩니다. socket.broadcast.emit을 호출하면 호출 된 하나의 소켓을 제외하고 서버에 연결된 모든 클라이언트로 소켓을 보냅니다.

io.emit을 사용하면 예외없이 서버에 연결된 모든 클라이언트에 메시지를 보냅니다. 게임을 시작할 때 이미 자신의 플레이어의 배를 만들었 기 때문에 자신의 배를 만들 것을 요청하는 서버에서 메시지를 받은 경우에는 중복 된 스프라이트가 생기기 때문에 현재 설정으로는 이를 원하지 않습니다. 다음은 이 튜토리얼에서 사용할 다양한 종류의 메시징 기능에 대한 유용한 정보 시트입니다.

서버 코드는 다음과 같아야합니다.

따라서 플레이어가 연결할 때마다 위치 데이터가 포함 된 메시지를 보내고 다른 모든 플레이어에게 해당 데이터를 보내서 해당 스프라이트를 생성 할 수있게합니다.

클라이언트에서 생성

이제 이주기를 완료하기 위해 클라이언트에서 두 가지 작업을 수행해야합니다.

  1. 우리가 연결되면 우리의 위치 데이터로 메시지를 내 보냅니다.

  2. 플레이어 생성 이벤트를 듣고 그 위치에있는 플레이어를 스폰합니다.

첫 번째 작업에서는 create 함수 (135 행 주변)에서 플레이어를 생성 한 후 다음과 같이 보내려는 위치 데이터가 포함 된 메시지를 내보낼 수 있습니다.

socket.emit('new-player',

{x:player.sprite.x,y:player.sprite.y,angle:player.sprite.rotation})

보내시는 데이터를 직렬화하는 것에 대해 걱정할 필요가 없습니다. 어떤 종류의 객체라도 전달할 수 있으며 Socket.io가 처리 할 수 있습니다.

New player has state: { x: 728.8180247836519, y: 261.9979387913289, angle: 0 }

우리 서버가 새로운 플레이어가 연결되었다는 발표와 더불어 위치 데이터를 올바르게 가져 오는 중임을 알고 있습니다!

다음으로, 우리는 새로운 플레이어를 만들기위한 요청을 듣고 싶습니다. 우리는 이 코드를 방출 한 직후에 배치 할 수 있으며 다음과 같이 보일 것입니다 :

이제 테스트 해보세요. 게임의 두 창을 열고 작동하는지 확인하십시오.

두 개의 클라이언트를 연 후 첫 번째 클라이언트에는 두 개의 생성 된 배가 있고 두 번째 클라이언트에는 두 개의 클라이언트 만 표시됩니다.

첫 번째 플레이어가 연결되었을 때 서버가 다른 모든 플레이어에게 플레이어 생성 이벤트를 보냈지 만 수신 할 다른 플레이어가 없었습니다. 두 번째 플레이어가 연결되면 서버는 다시 브로드 캐스트를 전송하고 플레이어 1이 수신하여 올바르게 스프라이트를 생성하지만 플레이어 2는 플레이어 1의 초기 연결 브로드 캐스트를 놓쳤습니다.

따라서 플레이어 2가 게임의 후반에 참가하여 게임의 상태를 알아야 하기 때문에 문제가 발생합니다. 우리는 어떤 플레이어가 이미 존재하는지 (또는 이미 세계에서 일어난 일)를 연결하는 새로운 플레이어에게 그들이 따라 잡을 수 있도록 말할 필요가 있습니다. 이 문제를 해결하기 전에 간단한 경고가 있습니다.

게임 상태 동기화에 대한 경고

모든 플레이어의 게임을 동기화 상태로 유지하는 데는 두 가지 방법이 있습니다. 첫 번째는 네트워크를 통해 변경된 사항에 대한 최소한의 정보 만 전송하는 것입니다. 따라서 새 플레이어가 연결될 때마다 새 플레이어의 정보 만 다른 플레이어에게 보내고 (새 플레이어에게 전 세계 모든 다른 플레이어의 목록을 보냅니다) 연결을 끊으면 다른 모든 플레이어에게 이 개별 클라이언트가 연결이 끊어졌습니다.

두 번째 방법은 전체 게임 상태를 보내는 것입니다. 이 경우 연결 또는 연결 끊기가 발생할 때마다 모든 플레이어의 전체 목록을 모든 사람에게 보냅니다.

첫 번째는 네트워크를 통해 전송되는 정보를 최소화 한다는 점에서 더 좋지만 매우 까다로울 수 있으며 플레이어가 동기화되지 않을 위험이 있습니다. 두 번째 옵션은 플레이어가 항상 동기화되지만 각 메시지와 함께 더 많은 데이터를 보내는 것을 보장합니다.

우리의 경우, 새로운 플레이어가 연결되어 있을 때 메시지를 보내려고 하지 않고, 연결을 끊어서 삭제할 때, 그리고 자신의 위치를 업데이트하기 위해 이동했을 때, 그 모든 것을 하나의 업데이트 이벤트로 통합 할 수 있습니다 . 이 업데이트 이벤트는 모든 사용 가능한 플레이어의 위치를 항상 모든 클라이언트에게 보냅니다. 그것이 서버의 전부입니다. 클라이언트는 받은 상태로 최신 정보를 유지해야 합니다.

이를 구현하기 위해 다음과 같이 할 것입니다.

  1. 키가 자신의 ID이고 값이 위치 데이터 인 플레이어 사전을 보관하십시오.

  2. 업데이트 이벤트를 연결하고 보낼 때 플레이어를 이 사전에 추가하십시오.

  3. 플레이어가 연결을 끊고 업데이트 이벤트를 보낼 때이 사전에서 플레이어를 제거합니다.

이 단계는 매우 간단하기 때문에 스스로 구현할 수 있습니다 (치트 시트가 유용 할 수 있습니다). 전체 구현은 다음과 같습니다.

클라이언트 측은 조금 까다 롭습니다. 한 편, 업데이트 - 플레이어 이벤트에 대해서만 걱정할 필요가 있습니다. 그러나 서버가 우리가 알고있는 것보다 더 많은 배를 보내거나 너무 많은 배를 보내면 더 많은 배를 만드는 것에 대해 고려해야합니다 .

다음은 클라이언트에서 이 이벤트를 처리 한 방법입니다.

나는 스크립트의 맨 위에 정의 된 other_players라는 사전에서 클라이언트의 배송 정보를 추적합니다 (여기에 표시되지 않음). 서버가 모든 플레이어에게 플레이어 데이터를 전송하기 때문에 클라이언트가 별도의 스프라이트를 작성하지 않도록 체크를 추가해야합니다. (구조화에 어려움이있는 경우 여기에 index.html에있는 전체 코드가 있습니다.)

이제 이것을 시험해보십시오. 여러 클라이언트를 만들고 닫을 수 있어야 하며 올바른 위치에 출현하는 선박의 수를 파악할 수 있어야합니다.

3. 클라이언트 위치 동기화

여기 재미있는 부분으로 갑니다. 우리는 실제로 현재 모든 클라이언트에 걸쳐 배송 위치를 동기화 하려고합니다. 이것은 우리가 지금까지 구축 한 구조의 단순성이 실제로 보여주는 곳입니다. 모든 사용자의 위치를 동기화 할 수있는 업데이트 이벤트가 이미 있습니다. 우리가해야 할 일은 다음과 같습니다.

  1. 클라이언트가 새 위치로 이동할 때마다 클라이언트를 내보내도록 하십시오.

  2. 서버가 해당 이동 메시지를 수신 대기하게 하고 플레이어 사전에서 해당 플레이어의 항목을 업데이트합니다.

  3. 모든 클라이언트에 업데이트 이벤트를 내 보냅니다.

힌트가 필요한 경우 최종 완성 프로젝트를 참조 할 수 있습니다.

네트워크 데이터 최소화에 대한 참고 사항

이를 구현하는 가장 간단한 방법은 모든 플레이어가 새로운 플레이어로 이동 메시지를 받을 때마다 모든 플레이어를 새로운 위치로 업데이트하는 것입니다. 이는 플레이어가 가능한 한 빨리 최신 정보를 수신한다는 점에서 훌륭하지만 네트워크를 통해 전송되는 메시지의 수는 프레임 당 수백 개까지 쉽게 증가 할 수 있습니다. 10 명의 플레이어가 있고 각 플레이어가 매 프레임마다 이동 메시지를 보내는 경우 서버가 모든 10 명의 플레이어에게 릴레이를 다시 수행해야한다고 가정 해보십시오. 그것은 이미 프레임 당 100 개의 메시지입니다!

더 좋은 방법은 모든 정보를 포함하는 큰 업데이트를 모든 플레이어에게 보내기 전에 서버가 플레이어로부터 모든 메시지를 수신 할 때까지 기다리는 것입니다. 그런 식으로 당신은 당신이 게임에 가지고있는 플레이어의 수로 보내는 메시지의 수를 스쿼시합니다 (그 수의 제곱이 아닌). 그러나 그 문제는 모든 사람이 게임에서 가장 느린 연결을 가진 플레이어만큼 많은 시간을 경험하게된다는 것입니다.

또 다른 방법은 플레이어가 지금까지 받은 메시지 수에 관계없이 서버가 업데이트를 일정한 속도로 보내도록하는 것입니다. 초당 30 회 정도 서버를 업데이트하는 것이 일반적인 표준처럼 보입니다.

그러나 서버를 구조화 하기로 결정한 후에는 게임을 개발할 때마다 모든 프레임을 얼마 전 보내는 메시지에 주의해야합니다.

4. 총알 동기화

마지막 큰 조각은 총알을 네트워크를 통해 동기화 하는 것입니다. 우리는 플레이어를 동기화하는 것과 같은 방식으로 할 수 있습니다.

  - 각 클라이언트는 매 프레임마다 모든 글 머리 기호의 위치를 보냅니다.

  - 서버는 그것을 모든 플레이어에게 전달합니다.

그러나 문제가 있습니다.

속임수에 대하여 확보

총알의 진정한 위치로 클라이언트가 보낸 메시지를 전달하면 플레이어는 다른 선박이있는 곳으로 텔레 포트하는 총알과 같은 가짜 데이터를 보내도록 클라이언트를 수정하여 속일 수 있습니다. 웹 페이지를 다운로드하고 JavaScript를 수정 한 다음 다시 실행하면 쉽게이 문제를 해결할 수 있습니다. 브라우저 용 게임의 경우 문제가 아닙니다. 일반적으로 클라이언트에서 오는 데이터는 절대 신뢰할 수 없습니다.

이를 막기 위해 다른 계획을 세웁니다.

  - 클라이언트는 총알의 위치와 방향을 발사 할 때마다 내 보낸다.

  - 서버는 총알의 움직임을 시뮬레이션합니다.

  - 서버는 각 클라이언트를 모든 총알의 위치를 업데이트합니다.

  - 클라이언트는 서버가 수신 한 위치에 총알을 렌더링합니다.

이 방법은 클라이언트가 총알이 어디에서 생기는지 알려주지 만 움직이는 속도가 빠르거나 어디로가는 지 추적하지 않습니다. 클라이언트는 자신의 보기에서 총알의 위치를 변경할 수 있지만 다른 클라이언트가 보는 것을 변경할 수는 없습니다.

자, 이것을 구현하기 위해, 나는 당신이 쏠 때 방출을 추가 할 것입니다. 나는 실제 스프라이트를 만들지 않을 것입니다. 왜냐하면 그것의 존재와 위치가 서버에 의해 완전히 결정되기 때문입니다. index.html의 새로운 총알 코드는 다음과 같아야 합니다.

또한 클라이언트의 총알을 업데이트하는 이 전체 섹션을 주석 처리 할 수 있습니다.

마지막으로, 클라이언트에게 총알 업데이트를 수신하도록 요청해야합니다. 플레이어가 bullet-update라고 하는 이벤트에서 모든 총알 위치의 배열을 전송하는 것과 동일한 방식으로 처리합니다. 클라이언트는 총알을 만들거나 파괴하여 동기화 상태를 유지합니다. 다음은 그 모습입니다.

그것은 클라이언트의 모든 것입니다. 나는 이 부분을 어디에 넣을 지, 그리고 이 시점에서 모든 것을 함께 모으는 방법을 알고 있다고 가정하고 있지만, 어떤 문제에 부딪히는 경우 참조를 위해 항상 최종 결과를 살펴볼 수 있다는 것을 기억하십시오.

이제 server.js에서 총알을 추적하고 시뮬레이션 해야 합니다. 먼저 우리가 플레이어와 동일한 방법으로 총알을 추적 할 수 있는 배열을 만듭니다.

var bullet_array = []; // Keeps track of all the bullets to update them on the server

다음으로 우리는 총알 발사 이벤트를 작성합니다.

이제 초당 60 번 총알을 시뮬레이션합니다.

그리고 마지막 단계는 그 함수의 어딘가에 업데이트 이벤트를 보내는 것입니다 (그러나 확실히 for 루프 바깥 쪽).

이제 실제로 테스트 할 수 있습니다! 모든 것이 잘 진행되면 총알이 클라이언트간에 올바르게 동기화되는지 확인해야합니다. 우리가 서버에서 이 작업을 수행했다는 사실은 더 많은 작업 일뿐 아니라 훨씬 더 많은 제어 기능을 제공합니다. 예를 들어 총알 발사 이벤트가 발생하면 총알의 속도가 특정 범위 내에 있는지 확인할 수 있습니다. 그렇지 않으면 이 플레이어가 속임수 임을 알 수 있습니다.

5. 총알 충돌 판정

이것이 우리가 구현할 마지막 핵심 기술자입니다. 이제는 구현을 계획하는 절차에 익숙해 져서 클라이언트 구현을 완전히 끝내기 전에 먼저 서버로 이동하는 것이 좋을 것입니다. 이것은 구현할 때 앞뒤로 전환하는 것보다 오류가 발생하기 쉬운 방법이 아닙니다.

충돌을 확인하는 것은 중요한 게임 플레이 메커닉이므로 치트 프루프가 되고 싶습니다. 우리는 총알에 대해서도 서버에서 구현할 것입니다. 우리가해야 할 일은 :

  - 총알이 서버의 모든 플레이어와 충분히 가까웠는지 확인하십시오.

  - 특정 플레이어가 공격을받을 때마다 모든 클라이언트에게 이벤트를 내 보냅니다.

  - 클라이언트가 히트 이벤트를 듣고 우주선이 맞았을 때 우주선이 깜박이도록 하십시오.

이 작업을 직접 수행 할 수 있습니다. 히트시 플레이어가 깜박이도록 하려면 알파 값을 0으로 설정하면됩니다.

player.sprite.alpha = 0;

그리고 다시 완전한 알파로 다시 돌아갑니다 (이것은 플레이어 업데이트에서 수행됩니다). 다른 플레이어의 경우 비슷한 일을 할 것이지만 업데이트 기능에서 다음과 같이 알파를 다시 가져와야합니다.

당신이 처리해야 할 까다로운 부분은 플레이어 자신의 총알이 그들을 맞출 수 없는지 확인하는 것입니다 (그렇지 않으면 당신은 항상 당신이 발사 할 때마다 자신의 총알로 명중 할 수 있습니다).

이 구성표에서 클라이언트가 속임수를 쓰려고 시도하고 서버가 전송 한 적중 메시지를 확인하지 않더라도 자신의 화면에서 볼 수있는 내용 만 변경합니다. 다른 모든 플레이어는 여전히 그 플레이어가 맞았다는 것을 볼 것입니다.

6. 매끄러운 이동

이 단계까지 모든 단계를 수행했다면, 축하드립니다. 방금 멀티 플레이어 게임을 만들었습니다! 친구에게 보내고 온라인 멀티 플레이어들을 지켜보십시오!

게임은 완벽하게 작동하지만 우리의 작업이 멈추지 않습니다. 우리가 해결해야 할 플레이어의 경험에 영향을 미칠 수있는 몇 가지 문제가 있습니다.

  - 모든 플레이어가 빠르게 연결되지 않으면 다른 플레이어의 움직임이 고르지 않게 보일 것입니다.

  - 총알이 즉시 발사되지 않기 때문에 총알이 반응이 느껴질 수 있습니다. 클라이언트의 화면에 나타나기 전에 서버에서 메시지를 다시 기다립니다.

우리는 클라이언트에있는 배에 대한 위치 데이터를 보간하여 첫 번째 것을 고칠 수 있습니다. 그래서 우리가 충분히 빠른 업데이트를받지 못한다고해도, 우리는 우주선을 순간 이동하는 것과 반대되는 방향으로 부드럽게 움직일 수 있습니다.

총알은 조금 더 정교해질 것입니다. 우리는 서버가 총알을 관리하기를 원합니다. 왜냐하면 그것은 치트 프루프 (cheat-proof) 방식이기 때문입니다. 그러나 우리는 총알을 발사하고 총을 쏘는 것을 즉각 피드백하고 싶습니다. 가장 좋은 방법은 하이브리드 방식입니다. 서버와 클라이언트 모두 총알 위치를 업데이트하는 서버와 함께 총알을 시뮬레이트 할 수 있습니다. 동기화가 안되면 서버가 맞다고 클라이언트의 총알 위치를 무시하십시오.

위에 설명 된 글 머리 기호 시스템을 구현하는 것은이 자습서의 범위를 벗어나지 만이 방법이 존재한다는 것을 알고있는 것이 좋습니다.

배의 위치에 대한 간단한 보간법은 매우 쉽습니다. 새 위치 데이터를 처음 수신하는 업데이트 이벤트에서 직접 위치를 설정하는 대신 목표 위치를 저장하기 만하면됩니다.

그런 다음 업데이트 기능 (여전히 클라이언트에 있음)에서 다른 모든 플레이어를 반복하여이 대상을 향해 푸시합니다.

이 방법으로 서버가 초당 30 번 업데이트를 보내도록 할 수 있지만 여전히 60fps로 게임을 실행하면 매끄럽게 보입니다!

결론

휴! 우리는 방금 많은 것을 다루었습니다. 간단히 요약하면 클라이언트와 서버간에 메시지를 보내는 방법과 서버가 모든 플레이어에게 메시지를 전달하도록 하여 게임 상태를 동기화하는 방법을 살펴 보았습니다. 이것은 온라인 멀티 플레이 경험을 만드는 가장 간단한 방법입니다.

또한 서버의 중요한 부분을 시뮬레이션하고 클라이언트에게 결과를 알리는 방법으로 치팅에 대해 게임을 보안 할 수있는 방법을 알아 냈습니다. 당신이 당신의 클라이언트를 신뢰할수록, 게임은 더 안전해질 것입니다.

마지막으로, 우리는 클라이언트에서 보간함으로써 랙을 극복하는 방법을 보았습니다. 랙 보상은 광범위한 주제이며 매우 중요합니다 (일부 게임은 충분히 지연없이 충분히 재생할 수 없게됩니다). 서버에서 다음 업데이트를 기다리는 동안 보완하는 것은 그것을 완화하는 한 가지 방법 일뿐입니다. 또 다른 방법은 다음 몇 개의 프레임을 미리 예측하고 서버에서 실제 데이터를 받으면 수정하는 것입니다. 물론 이것은 매우 까다로울 수 있습니다.

지연의 영향을 완화하는 완전히 다른 방법은 그 주위를 설계하는 것입니다. 배가 천천히 움직이게하는 이점은 고유 한 이동 메커니즘과 이동의 갑작스러운 변화를 막는 방법으로 작용합니다. 따라서 느린 연결을 하더라도 여전히 경험을 망치지는 않습니다. 이와 같이 게임의 핵심 요소를 디자인하는 동안 지연에 대한 설명은 큰 차이를 만들 수 있습니다. 때로는 최상의 솔루션은 전혀 기술적이지 않습니다.

유용 할 수도있는 Glitch의 마지막 기능 중 하나는 왼쪽 상단의 고급 설정으로 이동하여 프로젝트를 다운로드하거나 내보낼 수 있다는 것입니다.

멋진 소식을 올리려면 아래의 의견에서 공유하십시오! 또는 질문이나 명확한 설명이 있으면 언제든지 도와 드리겠습니다.

가장자리 만들기

먼저 snake.js 소스의 Snake 함수에 다음 줄을 추가했습니다.

// 가장자리는 다른 뱀과 충돌 할 수있는 앞쪽 몸체입니다.

// 이 뱀의 머리에 고정되어있다.

this.edgeOffset = 4;

this.edge = this.game.add.sprite (x, y - this.edgeOffset, this.spriteKey);

this.edge.name = "edge";

this.edge.alpha = 0;

this.game.physics.p2.enable (this.edge, this.debug);

this.edge.body.setCircle (this.edgeOffset);

// 가장자리를 머리 앞쪽으로 제한합니다.

this.edgeLock = this.game.physics.p2.createLockConstraint (

     this.edge.body, this.head.body, [0, -this.head.width * 0.5-this.edgeOffset]

);

this.edge.body.onBeginContact.add (this.edgeContact, this);

우리는 스프라이트를 보이지 않게 만들고, 그런 다음 가장자리에 원형 물리바디를 줍니다. 이 바디를 특정 오프셋에서 머리 앞에 고정시키는 잠금 구속 조건을 만듭니다. 이 가장자리가 다른 본문과 접촉하기 시작할 때 콜백을 추가합니다.

에지 연결

가장자리가 무언가와 충돌 할 때 우리가 하는 일을 살펴 봅시다.

edgeContact : function (phaserBody) {

     // 가장자리가 다른 뱀의 섹션을 치는 경우이 뱀을 파괴합니다.

     if (phaserBody && this.sections.indexOf (phaserBody.sprite) == -1) {

         this.destroy ();

     }

     // 가장자리가이 뱀 자신의 섹션에 닿는 경우 글리치를 피하는 간단한 해결책은

     // 가장자리를 중심으로 이동하는 것입니다.

     // 그러면 잠금 제한으로 인해 맨 앞으로 이동합니다

     else if (phaserBody) {

         this.edge.body.x = this.head.body.x;

         this.edge.body.y = this.head.body.y;

     }

}

우리는 가장자리가 다른 뱀의 단면 또는이 뱀의 단면을 공격했는지 알아 낼수 있습니다. 그것이 다른 뱀을 치면 우리는 파괴 방법을 사용하여 이 뱀을 파괴합니다. 이 뱀을 때렸다면, 우리는 머리를 단순히 재설정하기 위해 머리의 중심으로 이동시킵니다. 이 솔루션은 충돌 그룹을 사용하여 이 뱀의 가장자리가 자신의 섹션을 치는 것을 방지하기 위한 대안입니다. 우리가 사용하는 솔루션은 간단하지만 구현하기가 훨씬 쉽습니다.

파괴

뱀이 파괴되면, 우리는 또한 가장자리를 파괴해야합니다. destroy 메소드에 이 코드를 추가했습니다.

this.game.physics.p2.removeConstraint (this.edgeLock);

this.edge.destroy ();

그들이 제한하는 스프라이트 바디와 함께 제약 조건을 파괴하는 것이 항상 중요합니다.

스케일링

뱀의 머리가 커지면 그 엣지는 더욱 더 제약을 받아야 합니다. 이 코드를 setScale 메서드에 추가합니다.

// p2 physics로 엣지 잠금 위치 업데이트

this.edgeLock.localOffsetB = [

     0, this.game.physics.p2.pxmi (this.head.width * 0.5 + this.edgeOffset)

];

순수한 P2 물리를 사용하여 잠금 구속 조건을 업데이트하고 새로운 헤드 스케일을 기반으로 헤드에서 추가 오프셋에 에지를 배치합니다. P2 잠금 제한 등록 정보는 여기에서 읽을 수 있습니다.

그리고 그것은 게임에서 뱀 충돌을 구현하는 데 필요한 모든 것입니다. 우리의 작업은 대부분 물리학 자들로 철저한 스네이크 수업을 만들고 방법을 파괴함으로써 이미 완료되었습니다. 제 5 부에서는 우리가 뱀에게 눈을 보충하기 위해 노력할 것입니다.

흰옷

장미

이 프로젝트의 첫 번째 단계는 서버입니다. 아주 간단한 노드 환경을 설정하고 planck-js, socket.io 및 web3을 설치했습니다.

첫 번째 단계는 Imports 를 초기화 하는 것입니다.

step1.js hosted with ❤ by GitHub

이것은 우리에게 중요한 플랙 변수 (우리의 물리 엔진), 우리의 서버, websocket.io(socket.io) 및 Web3(Ethereum)에 대한 액세스를 제공합니다.

이제 우리는 물리 엔진을 설정하고 Web3을 초기화하고 클라이언트를 추적 할 수있는 변수를 만들어야합니다.

step2.js hosted with ❤ by GitHub

먼저 Ropsten testnet을 사용하여 Web3을 초기화합니다. 이것으로 실제로 Ethereum을 쓰지 않고 테스트 할 수 있습니다.

그런 다음 서버에 고정 된 시간 단계를 설정하고 물리 엔진을 초기화합니다. 

중력은 10으로 설정되지만 Planck의 기본값은 -9입니다. 우리는 Phaser와 함께 훌륭하게 연주하려면 긍정적 이어야 합니다.

우리는 클라이언트 정보를 보유 할 수있는 객체를 생성합니다.. 

이것은 연결 ID (socket.io에 의해 우리에게 주어진)를 Key로, 클라이언트 객체를 Value 로 사용하는 Map으로 작동합니다. 

따라서 특정 클라이언트와 상호 작용하는 것이 훨씬 쉬워집니다.

이제 게임에서 몇몇 플레이어를 얻고 Web3를 설정하십시오!

part3.js hosted with ❤ by GitHub

누군가가 우리 서버에 연결할 때 io.on ( 'connection')이 호출됩니다. 

일단 접속 이벤트가 발생하면 접속된 클라이언트와 관련된 특정 패킷에 대해 호출하는 함수를 설정할 수 있습니다. 

이 중 첫 번째 메시지는 Join 메시지입니다.

플레이어가 조인 할 때 클라이언트 객체에 정보를 추가하기만 하면됩니다. 

이제 플레이어가 단순히 연결될 때, 이 모든 작업을 수행 할 수 있지만 기다려야 할 것이 있습니다. 

특히 우리는 접속된 클라이언트가 유효한 이더리움 (ethereum) 계정을 갖고 있는지 확인하고, 

실제로 계정 정보를 보내어 게임에 참여하도록 해야 합니다.

클라이언트가 Join 메시지를 보낼 때

나머지는 TODO 1이 있는 곳으로 갑니다.

먼저, 플레이어의 상태 및 물리 엔진을 설정할 수 있습니다.

statsAndPhysics.js hosted with ❤ by GitHub

일단 클라이언트가 Join 하면 우리는 위에서 설정 한 기본값으로 상태를 설정하고 (아직 스마트 계약을 설정하지 않았으므로) ,

새로운 물리 엔진을 설정합니다.

ethBalance.js hosted with ❤ by GitHub

클라이언트가 Ethereum 계좌 주소를 보내면 속성으로 추가합니다.

우리의 Web3 기능성을 테스트하기 위해 계좌잔액을 속성으로 추가합니다. 나중에 우리는 클라이언트에게 보내어 표시 할 수 있습니다.

addAndBroadcast.js hosted with ❤ by GitHub

접속된 클라이언트는 클라이언트 객체에 추가 한 다음, 다른 모든 클라이언트에 브로드 캐스팅합니다. 

그러면 다른 클라이언트에게 방금 접속된 플레이어가 표시됩니다.

client.broadcast.emit를 호출하면 socket.io는 현재 접속한 클라이언트를 제외하고 연결된 모든 클라이언트에게 메시지를 보냅니다.

다음 단계

다음 단계는 TODO 2가 있는 곳으로 갑니다.

입력

input.js hosted with ❤ by GitHub

이렇게하면 입력 패킷에 대한 데이터 처리가 추가됩니다. 이것은 각 방향 키 (WASD)에 대한 Bool 객체입니다. 

클라이언트는 입력이 변경 될 때만이 패킷을 보냅니다.  

이를 통해 우리는 매 20 분의 1 초마다 플레이어로부터 어떤 키가 눌려 있는지 추적 할 수 있습니다.

플레이어 상태 요청

playerStateRequest.js hosted with ❤ by GitHub

일부 플레이어는 다른 플레이어 보다 나중에 접속하게 됩니다.  

우리는 플레이어의 위치 같은 것을 업데이트하기 위해 플레이어의 전체 상태를 끊임없이 보내고 싶지는 않습니다. 

클라이언트가 연결되면 다른 플레이어가 연결되어 있음을 볼 수 있지만 정보가 없습니다. 

클라이언트는 정보가없는 플레이어를 감지하면 playerStateRequest 패킷을 보냅니다.

이렇게 하면 해당 플레이어의 상태가 클라이언트에 전송되어 최신 상태가 될 수 있습니다.

플레이어 접속 해제

disconnect.js hosted with ❤ by GitHub

플레이어가 연결을 끊으면 몇 가지 작업을 수행해야합니다. 먼저, 다른 모든 플레이어에게 연결이 끊어 졌음을 알릴 필요가 있습니다. 

이것은 클라이언트에 의해 일종의 타임 아웃을 추가하여 추측 할 수 있었습니다 (플레이어가 잠시 동안 업데이트되지 않았을 수도 있음). 

플레이어가 잠시 동안 메시지를받지 못하면 단순히 플레이어를 삭제하지 말고 각 클라이언트의 접속유지 신호(Heart Beat)를 확인후 처리해 합니다.

이것은 UDP를 사용할 때 분명히 유용하지만 WebSocket (본질적으로 TCP)에서는 필요 없습니다.

우리가 보내는 모든 메시지는 믿을만 하므로 모든 플레이어를 신뢰할 수있게 만듭니다!

역자주) WebSocket 에서는 Keep Alive, Heart Beat 가 필요 없을 만큼 신뢰한다는 내용인것 같습니다. 

          그래도 모바일 환경에서 처럼 잦은 접속 변경 및 끊김에서는 신뢰 하기 힘들겠죠?

게임 루프

이 코드는 이제 io.on ( 'connection') 함수 외부에 있습니다.

gameLoop.js hosted with ❤ by GitHub

이것이 우리 서버의 강점입니다. 1/20 초마다 실행됩니다 (FIXED_TIME_STEP). 

그것은 아주 간단합니다. 그래서 나는 단지 그것을 간단히 보겠습니다.

Lines 4-5 번 라인 모든 클라이언트 객체의 모든 키를 얻고 루프를 반복합니다.

Lines 7-9 클라이언트가 시간 내에 잠재적으로 제거되었을 수 있으므로  클라이언트가 여전히 존재하는지 확인합니다.

Lines 14-27 현재의 입력 상태에 따라 플레이어 물리 엔진을 조정합니다.

Lines 30-36 모든 플레이어가 플래시가 아닌지 확인하기 위해 속도를 제한합니다.

Lines 39 모든 클라이언트에게 새로운 상태를 전송합니다.  여기에는 우리가 방금 사용했던 클라이언트도 포함됩니다. 

           우리는 클라이언트의 속도를 높여야하기 때문입니다!

Line 42 물리엔진의 속도를 절반으로 줄여 게임을 조금 느리게 했다. 이 부분은 단지 환경 설정입니다.

마지막

finalTouches.js hosted with ❤ by GitHub

우리가 작성한 모든 작업은 매 1/20 초마다 gameLoop 함수를 호출하도록 만든 다음 서버를 시작합니다!

결론

이제 우리는 Web3를 사용하여 Ethereum에 연결된 게임 서버를 갖게 되었습니다!

Part 3에서는 클라이언트를 설정하고 게임을 업로드하여 실제로 유저가 사용하는 방법을 보여줍니다.