소개
저장소는 https://github.com/dci05049/Phaser-Multiplayer-Game-Tutorial 에서 사용할 수 있습니다.제목에서 알 수 있듯이 이 튜토리얼 시리즈는 기본 멀티 플레이어 게임 아키텍처를 소개하고 Node.js를 사용하여 기존의 io 게임 (agar.io 및 slither.io)과 유사한 브라우저 기반 멀티 플레이어 게임을 만드는 방법에 대한 전체 자습서를 실행합니다. 서버 쪽은 Node.js, 클라이언트 쪽은 Phaser.js입니다. Node.js 서버 측은 클라이언트와 서버 간의 통신을 위해 Socket.io와 Express.js를 사용합니다. 클라이언트 측은 더 나은 충돌 감지를 위해 특별히 p2 물리를 사용합니다. 이 시리즈의 첫 번째 파트에서는 개발 환경을 설정하고 여러 클라이언트를 서버에 연결하며 마우스 포인터를 사용하여 플레이어 동작을 구현합니다. 이 튜토리얼의 마지막에는 모든 플레이어의 움직임이 동기화됩니다.
Node.js의 초보자 인 경우 중요한 라인은 설명과 함께 주석 처리됩니다.
이 튜토리얼에서 사용 된 것과 동일한 기술을 사용하여 io 게임을 만들었습니다. 내 게임은 slashing.io에서 확인하실 수 있습니다.
현재, 나는 Unity를 배웠고, 여기서 나의 진도에 대해 쓰려고 합니다. 이것은 이번 주에 끝난 작은 프로젝트입니다. 미니 캐주얼 안드로이드 게임입니다. 너희들이 그것을 시험해보고 나에게 몇 가지 먹이를 줄 수 있다면 고마워. meander.bipolar를 입력하면 Google Play에서 게임을 찾을 수 있습니다.
링크 : https://play.google.com/store/apps/details?id=com.meander.bipolar
설정
Node.Js가 설치되어 있지 않은 경우 여기에서 다운로드 할 수 있습니다 (https://nodejs.org/en/). Node를 설치 한 후, Node.js 명령 프롬프트를 실행하고 프로젝트 폴더로 이동하십시오. 그런 다음 npm init을 입력하여 package.json을 작성하십시오. 내 프로젝트 폴더는 멀티 플레이어 게임이라고합니다.
npm install socket.io --save를 입력하십시오. --save는 패키지를 package.json에 종속성으로 포함시킬 것입니다. package.json은 나중에 배포 할 때 필요합니다.
Socket.io와 마찬가지로 Express.js를 설치하려면 npm install express --save를 입력하십시오. 이제 코드를 작성할 준비가되었습니다.
index.html
<body>
<div id="gameDiv">
</div>
</body>
<script src="client/lib/phaser.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="client/player.js"></script>
<script src="client/main.js"></script>
Setp 1:
Client Side: main.js
var socket; // socket이라는 전역 변수를 정의한다.
socket = io.connect(); // 서버에 연결 요청 보내기
// 이것은 게임을 브라우저에 적절히 맞출 수 있도록 화면 크기를 구성하는 것입니다.canvas_width = window.innerWidth * window.devicePixelRatio;
canvas_height = window.innerHeight * window.devicePixelRatio;
// Phaser 게임을 만든다.
game = new Phaser.Game(canvas_width,canvas_height, Phaser.CANVAS,
'gameDiv');
var gameProperties = {
// 이것은 세계의 경계를 결정하는 실제 게임 크기입니다.
gameWidth: 4000,
gameHeight: 4000,
};
// 메인 게임
var main = function(game){
};
// 각 항목 추가
main.prototype = {
preload: function() {
},
// 이 함수는 게임을로드 할 때 한 번 실행됩니다.
create: function () {
console.log("client started");
// 서버에서 "연결"메시지를 듣습니다.
// 서버는 클라이언트가 연결할 때
// 자동으로 "연결"메시지를 내 보냅니다.
// 클라이언트가 연결되면 onsocketConnected를 호출합니다.
socket.on("connect", onsocketConnected);
}
}
// 이 함수는 클라이언트가 연결될때 실행됩니다.
function onsocketConnected () {
console.log("connected to server");
}
// 게임의 상태를 전환합니다.
var gameBootstrapper = {
init: function(gameContainerElementId){
game.state.add('main', main);
game.state.start('main');
}
};;
// 래퍼에서 init 함수를 호출하고 division ID를 지정합니다.
gameBootstrapper.init("gameDiv");
댓글 없음:
댓글 쓰기