이 튜토리얼은 https://loonride.com/learn/phaser/slither-io-part-1 를 구글 번역기를 통해서 번역한 것입니다. 저작권 및 기타 문제 발생시 댓글 달아 주시기 바랍니다.
감사합니다.
많은 사람들이 현재 "io"게임 중 하나 인 Slither.io 게임을 들었을 것입니다. 게임을 했다면 아마 그 단순함에 놀랐을 것입니다. 이 게임에는 물리학, 조명 효과 및 퍼포먼스 등이 들어가기 때문에 매우 재미있습니다.
이 튜토리얼은 Slither.io와 같은 게임을 만드는 방법을 보여줍니다. 이 연재물을 주의 깊게 읽으면 게임 아이디어를 어떻게 시각화 할 수 있는지를 보여줄 것입니다. 내가 말했듯이, 단지 아이디어 만으로 끝낼것이 아니라 제작할수 있어야 합니다. 다음 "io"게임에 대한 훌륭한 아이디어가 나왔을 때,이 시리즈를 읽은 후 즉시 프로토 타입을 만들수 있을것입니다!
이 튜토리얼은 7 개의 파트로 구성이 되어 있으며, 여기서 완성된 소스를 확인할수 있습니다.
이 튜토리얼은 Phaser 프레임 워크를 사용합니다. 이 시리즈 중 어느 것도 Slither.io 소스 코드를 보고 작성된 것은 없습니다. 이 시리즈의 모든 코드는 순수하게 게임에 대한 나의 해석에 기반을 두고 있으며, 여기서 만든 게임의 메커니즘은 실제 게임에서와 같은 방식으로 작동하지 않습니다.
이 튜토리얼에서는 Slither.io의 멀티 플레이 기능에 대해서는 다루지 않습니다. 게임을 디자인 방식 때문에 Node.js와 socket.io를 사용하여 게임을 위한 간단한 서버 구현을 하는 것은 어렵지 않습니다. 서버구현에 관심이 있으시면 해당 기술에 대한 조사를 해보십시오. 서버로 뱀 머리의 위치를 보내고 가져 오는 방법을 알아낼 수 있습니다.
이 튜토리얼의 첫 번째 부분에서는 프로젝트 구성 방법과 시작하기 전에 필요한 사항을 확인해 보겠습니다.
모든 소스 코드는 Github에서 찾을 수 있습니다. 최종 버전은 slither-io 폴더에 있습니다. 자신의 컴퓨터에서 게임을 테스트하려면 로컬 웹 서버로 소스 코드를 제공 할 수 있어야합니다. Phaser 게임 프레임 워크에 익숙해야합니다. 만약 Phaser 프레임 워크에 익숙하지 않으면, 자습서 "Phaser 시작하기"를 참조하십시오.
이 튜토리얼는 JavaScript 및 Phaser의 고급 개념에 대해 설명합니다.
JavaScript의 객체, 함수 및 함수 프로토 타입에 익숙해야 합니다. 또한 기본적인 객체 상속을 다루게 될 것이고, 나중에 자세히 설명 할 것입니다. this 키워드를 반드시 이해하십시오. 이해하기 힘들때는 온라인에서 이 주제에 관한 정보를 쉽게 찾을 수 있습니다.
Phaser에서 다뤄야 할 복잡한 주제는 P2 물리학입니다. 가장 중요한 것은 Phaser가 핵심 P2 물리 엔진과 인터페이스하는 메소드 계층을 추가한다는 것입니다. Phaser의 메소드 레이어에 대한 문서는 Phaser.Physics.P2에서 확인할 수 있습니다.
Phaser.Physics.P2와 P2 Physics의 주요 차이점 : Phaser.Physics.P2는 픽셀을 치수로 사용하지만 P2 Physics는 미터를 사용합니다. 우리는 게임에서 독립형 P2 물리를 몇 번 사용하므로 픽셀에서 미터로 변환해야합니다. 다행스럽게도 Phaser.Physics.P2는 pxm 및 pxmi 또는 "pixels to meters"및 "pixels to metered meter"라는 메소드를 제공합니다.
Phaser.Physics.P2.Body에는 여기에 있는 문서에서 볼 수있는 속성 데이터가 있습니다. 이 속성에는 순수 P2 물리 물리 체의 문서가 들어있는 실제 P2 물리 본문이 포함되어 있습니다. Phaser 문서는 Phaser.Physics.P2.Body 제한 사항을 피하기 위해이 속성의 사용을 권장하지 않지만 조심해서 사용해야합니다.
다음은 이러한 복잡한 P2 개념을 모두 사용할 수있는 방법의 예입니다 (실제로 프로젝트에서 이 작업을 수행함).
var circle = this.game.add.sprite(0, 0, "circle");
this.game.physics.p2.enable(circle, false);
//give circle sprite a circular physics body with the proper radius
circle.body.setCircle(circle.width*0.5);
//scale the circle up
circle.scale.setTo(2);
//scale up the circle's P2 physics body with the proper radius
circle.body.data.shapes[0].radius = this.game.physics.p2.pxm(circle.width*0.5);
이 코드에서는 스프라이트 원을 초기화 한 다음 적절한 반경을 가진 순환 물리 바디를 추가합니다. 그런 다음 원의 스프라이트를 확대합니다. 물론 원의 몸체도 확대하고 싶습니다. Phaser 솔루션은 오래된 바디를 새로운 바디로 대체하는 것입니다. 순수한 P2 해법은 실제 몸의 반경을 변경하는 것입니다. circle.body의 data 속성을 사용합니다. 그런 다음 pxm 메서드를 사용하여 P2에 대한 미터로 변환합니다.
이제는 모든 일반적인 정보를 얻었으므로 프로젝트에 곧바로 뛰어들 수 있습니다!
게임의 그래픽 측면에 초점을 맞추기보다는 우리가 재창조하려는 핵심 역학 및 기능에 중점을 둘 것입니다.
첫째, 우리는 세그먼트로 구성된 기능적인 뱀이 필요합니다. 이 세그먼트는 뱀 머리의 정확한 경로를 따라야하며 균등하게 간격을 유지해야합니다. 뱀은 길이를 늘리고 규모를 늘리며 속도를 바꿀 수 있어야합니다. 그것은 봇으로 행동 할 수 있어야하며, 그렇지 않으면 커서가 그것을 제어 할 수 있어야합니다.
뱀의 세그먼트는 서로 충돌 할 수 없어야 하며, 서로 겹쳐져야 합니다. 뱀은 다른 뱀의 세그먼트와 충돌 할 수있는 머리 앞면에 단일 지점을 가져야합니다. 만약 충돌일 일어나면, 뱀은 파괴되어야 합니다.
게임에는 뱀 머리의 중심쪽으로 끌어 당길 수있는 음식이 있어야 하며, 그 곳에서 뱀의 머리가 파괴되어야합니다. 뱀이 파괴 된 곳에서는 음식을 떨어 뜨려야합니다.
그리고 약간의 미적 요구 사항에 대해서, 뱀은 커서를 따라가는 눈을 가져야합니다. 그리고 뱀은 뱀의 속도가 올라가면 빛을 낼 수있는 그림자가 있어야합니다.
소스 코드를 살펴보십시오. 우리 게임은 index.html 내에서 초기화됩니다. 모든 자바 스크립트 소스 파일은 src 폴더에 있습니다.
일반적인 수학 연산과 유틸리티의 경우 util.js에 Util 객체를 만들었습니다.
Phaser 게임은 index.html에서 시작하여 게임을 실행하는 Game이라는 단일 상태를 가지고 있습니다. 이 상태는 game.js에서 찾을 수 있습니다. 이 상태는 먼저 Assets 폴더에있는 Assets을 로드합니다. 그런 다음 다양한 Snake 및 Food 객체를 초기화합니다. 그 외에도 주요 업데이트 루프가 포함되어 있으며 뱀이 파괴되었는지 확인합니다.
Snake 함수는 snake.js에서 찾을 수 있습니다. 그것은 뱀을 형성하는 뱀 섹션 스프라이트의 그룹을 만듭니다. 그것은 뱀의 머리에 일정한 속도를 주고 머리가 통과 한 위치 배열을 유지합니다. 그런 다음 이 경로를 따라 다른 섹션을 배치합니다.
코어 Snake 클래스는 BotSnake 및 PlayerSnake에 의해 상속되고 확장됩니다. BotSnake는 무작위로 뱀의 머리를 왼쪽이나 오른쪽으로 돌립니다. PlayerSnake는 화살표 키나 마우스의 위치를 기반으로 뱀의 머리를 회전시킵니다.
Snake 클래스는 EyePair를 초기화합니다. EyePair 클래스는 두 개의 Eye 객체를 생성하고이를 머리의 적절한 위치에 고정시킵니다. EyePair 컨트롤러를 제거하여 뱀에 하나 또는 3 개의 눈을 주는 것이 더 쉽기 때문에 Eye와 EyePair를 분리했습니다.
Snake는 Shadow 객체도 초기화 합니다. Shadow 클래스는 쉐도우 스프라이트 배열을 보유하고 있으며 뱀의 섹션 스프라이트 아래에 해당 스프라이트를 배치하는 업데이트 메소드가 있습니다. 뱀 섹션이 추가 될 때마다 그림자 스프라이트가 그림자 인스턴스를 통해 추가됩니다.
마지막으로, Food 스프라이트를 포함하는 Food 클래스가 있습니다. 음식 스프라이트의 몸체가 뱀의 머리와 충돌하는지 확인합니다. 그럴 때, 음식은 제약 조건을 사용하여 뱀의 머리 중심으로 끌려 가게되고, 그 곳에서 그것은 파괴됩니다.
이 튜토리얼의 다음 부분에서는 Snake 클래스의 디자인을 살펴 보겠습니다.
댓글 없음:
댓글 쓰기