크리티컬섹션

Moto XM is an ultimate online bike racing game which is very suitable for players who love extreme sports With the different levels in challenges the extremely dangerous but no less attractive high speed the game will blow you away with its exciting features It can help you to have interesting relax time Welcome to the special Pool Party version of this awesome bike stunt game Have fun with Moto XM Pool Party

Moto XM은 익스트림 스포츠를 좋아하는 플레이어에게 매우 적합한 최고의 온라인 자전거 경주 게임입니다. 도전 수준이 다른 여러 레벨에서 극도의 위험은 있지만 매력적이지 않은 고속으로 게임을하면 흥미 진진한 기능이 사라집니다. 재미있는 휴식 시간이 멋진 자전거 스턴트 게임의 특별한 풀 파티 버전에 오신 것을 환영합니다 Moto XM Pool Party

Play mini games featuring the characters from Dumb Ways to Die. Dumb Ways to Die is a worldwide brand with over 300 million downloads on Apple App Store and Google Play combined. Test your reflexes in this challenging series of mini games, where a milisecond can make the difference between winning and losing. Score coins for each challenge, and use the to repair the once great town of Dumbville.

Dumb Ways from Die의 캐릭터가 등장하는 미니 게임을 즐겨보십시오. Dumb Ways to Die는 Apple App Store 및 Google Play에서 3 억회가 넘는 다운로드를 기록한 세계적 브랜드입니다. 미니 게임의 도전적인 시리즈에서 반사 신경을 테스트하십시오. 밀리 초는 성공과 실패의 차이를 만들 수 있습니다. 각 도전 과제에 대해 점수를 매기고 한 번 위대한 마을 인 덤 빌 (Dumbville)을 수리하십시오.

10 년 전에 출시 된 이전 게임 인 Mass Attack이라는 프로토 타입을 만들려고했습니다. 게시물 Mass Attack과 같은 플래시 게임을 만들고 Tween을 사용하여 Mass Attack과 같은 HTML5 게임을 만듭니다 

필자는 Phaser CE v2.8.7 및 Phaser v3.0.0을 사용하여 프로토 타입을 다시 작성했으며 이는 아마도 Phaser 3 작동 첫 번째 프로토 타입 일 것입니다.

2.8.7 버전부터 시작해 보겠습니다.

클릭하여 길게 누르면 구가 생기고, 놓으면 구가 튀어 나오고 그에 따라 움직입니다.

소스 코드는 아직 댓글을 달지 않았습니다. 특히 시리즈의 다른 게시물을 읽는다면 매우 정직합니다.

Phaser 3 버전은 어떻습니까?

게임이 똑같아 보이더라도 코드를 작동시키기 위해 코드를 다양하게 변경해야했습니다. Phaser 3 버전을 가능한 한 Phaser CE 버전에 가깝게 유지하려고 했으므로 최적화되지 않았으며 API 문서가 거의 없습니다. 어쨌든 여러 가지 차이점을 나열 해 보겠습니다.

GAME CONSTRUCTOR : 생성자에는 이제 단 하나의 인수 만 있습니다.이 인수는 빠른 사용자 정의를 허용하는 객체입니다.

SCALING : 나는 게임을 확장 할 수 없었습니다. 또한 배경색으로 카메라를 사용해야 했습니다. 어쩌면 내가 뭔가를 놓친 것 같습니다.

GAME STATUS : 이제 장면이라고 부르며,이 기능을 거의 사용하지 않았더라도 빠른 설정이 가능합니다.

THIS INSTANCE : 콜백 함수에서 this를 추적 할 수 없어서 _this 변수로 저장해야 했습니다.

INPUT LISTENERS : 이름이 바뀌었지만 모두 똑같은 것처럼 보입니다.

TWEENS : 정의를 편하게 할수 있도록 되었습니다.

GROUP : 그들은 고통 스러웠습니다. 나는 그 (것)들을 움직일 수 없었다, 나는 x 또는 y 위치를 TWEEN 할 수없고, 평형 운동을 창조하기 위하여 많은 workaround 및 어리석은 수학을해야했다. 어쩌면 나는 무엇인가 놓쳤다.

SPRITES : 나는 비행 중에 폭과 높이를 변경할 수 없었기 때문에 크기를 조정하는 대신 스프라이트 크기를 조정해야했습니다.

소스 코드를보고, 약간의 변화를보고 두려워하지 말고, 여기에 새로운 언어를 배우려고 할 때 도움이 될 10 가지 팁이 있습니다.

여전히 많은 부분이 있지만, 일반적인 "Hello World"보다 훨씬 깁니다. 프로토 타입을 개선하기위한 제안이 있다면 환영합니다. 두 프로토 타입의 소스 코드를 다운로드하십시오.

2 년 전 Phaser를 사용하여 1 + 2 = 3 게임의 100 줄 html5 프로토 타입을 게시했습니다.

몇 달 후, 프로토 타입을 선택하고, 일종의 스토리와 132 레벨 (예, 132)을 추가하고 Softgames가 후원 한 Matt Vs Math를 발표했습니다.

프로토 타입은 주석 처리되지 않은 상태로 남아 있었고 일부 독자는 대부분 내가 어려움이 증가하는 무작위 질문을 생성 할 수 있었던 방법을 알기 위해 주로 의견을 추가하라고했습니다.

오늘 필자는 최신 Phaser CE 버전 (2.8.5)으로 업데이트 된 원본 프로토 타입을 다시 작성하고 게임이 끝나면 다시 시작할 수있는 게임을 다시 작성합니다.

표시된 식에 따라 1, 2 또는 3의 버튼을 클릭하거나 터치하십시오. 너 가장 좋은 점수는 뭐니? 모바일 장치가있는 경우 이 링크에서 직접 재생할 수 있습니다.

마지막으로 이것은 소스 코드이며 주석을 달고 업데이트합니다.

소개

저장소는 https://github.com/dci05049/Phaser-Multiplayer-Game-Tutorial/tree/master/Part2에서 확인할 수 있습니다.

이것은 클라이언트의 Phaser와 서버의 Node.js를 사용한 멀티 플레이어 게임 자습서 시리즈의 연속입니다. 첫 번째 부분

- 우리는 성공적으로 개발 환경을 설정하였습니다.

- 우리는 클라이언트와 서버를 Socket.io와 Express.js로 연결했습니다.

- 우리는 서버가 하나의 게임 상태를 갖도록 모든 클라이언트 동작을 동기화했습니다.

그러나 우리의 구현은 서버에 직접 클라이언트 위치를 전송하기 때문에 매우 순진하다는 것을 기억하십시오. 그리고 우리는 연결된 플레이어의 나머지 부분으로 그 위치를 다시 방송합니다.

이게 왜 위험한가요? 클라이언트 측은 쉽게 조작 할 수 있기 때문에 주로. 또한 누구나 자바 스크립트 파일을 변경할 수 있으므로 해커가 자바 스크립트 파일을 변경하여 게임에서 자신의 위치를 쉽게 조작 할 수 있으므로 다른 모든 플레이어의 게임 경험에 해를 끼칠 수 있습니다.

그러면 해결책은 무엇입니까? "서버 권위있는"게임을 만들 수 있습니다. 즉, 중요한 데이터는 모두 서버에 저장되고 계산됩니다. 우리는 위치 대신 서버에 입력을 보내 게임을 보다 안전하게 만들 수 있습니다. 그런 다음 플레이어의 새로운 위치를 계산하여 다른 플레이어에게 방송 할 수 있습니다. 그러나 한 가지 문제가 있습니다. 우리는 마우스 포인터를 따르는 데 물리학을 사용하고 있습니다. 화살표 키를 눌러 플레이어를 움직이는 것만 큼 간단하지 않습니다. 이것은 우리가 서버에서도 물리 시스템을 필요로 한다는 것을 의미합니다!.

서버의 물리학을 위해 우리는 p2 물리학을 사용할 것입니다. 클라이언트에서 p2 물리학을 사용한다는 사실은 클라이언트와 서버 계산이 유사하기 때문에 맨 위에있는 체리입니다.

p2 physics를 설치하려면 npm install p2 --save를 입력하십시오.

이제 코드 작성 준비가되었습니다.

클라이언트 측 : main.js

var socket; 
socket = io.connect();


canvas_width = window.innerWidth * window.devicePixelRatio;
canvas_height = window.innerHeight * window.devicePixelRatio;

game = new Phaser.Game(canvas_width,canvas_height, 
                       Phaser.CANVAS, 'gameDiv');

// 적 플레이어 목록
var enemies = [];

var gameProperties = { 
 gameWidth: 4000,
 gameHeight: 4000,
 game_elemnt: "gameDiv",
 in_game: false,
};

var main = function(game){
};

function onsocketConnected () {
 console.log("connected to server"); 
 createPlayer();
 gameProperties.in_game = true;
 // 서버를 초기 위치에 보내고 우리에게 연결되었음을 알려줍니다.
 socket.emit('new_player', {x: 0, y: 0, angle: 0});
}

// 서버가 클라이언트 연결 끊김을 알리면 연결되지 않은 적을 찾아서 
// 게임에서 제거합니다.
function onRemovePlayer (data) {
 var removePlayer = findplayerbyid(data.id);
 // Player not found
 if (!removePlayer) {
  console.log('Player not found: ', data.id)
  return;
 }
 
 removePlayer.player.destroy();
 enemies.splice(enemies.indexOf(removePlayer), 1);
}

function createPlayer () {
 player = game.add.graphics(0, 0);
 player.radius = 100;

 // set a fill and line style
 player.beginFill(0xffd900);
 player.lineStyle(2, 0xffd900, 1);
 player.drawCircle(0, 0, player.radius * 2);
 player.endFill();
 player.anchor.setTo(0.5,0.5);
 player.body_size = player.radius; 

 // draw a shape
 game.physics.p2.enableBody(player, true);
 player.body.clearShapes();
 player.body.addCircle(player.body_size, 0 , 0); 
 player.body.data.shapes[0].sensor = true;
}

// this is the enemy class. 
var remote_player = function (id, startx, starty, start_angle) {
 this.x = startx;
 this.y = starty;
 // 이것이 유일한 소켓 ID입니다. 
    // 우리는 그것을 적의 유일한 이름으로 사용한다.
 this.id = id;
 this.angle = start_angle;
 
 this.player = game.add.graphics(this.x , this.y);
 this.player.radius = 100;

 // set a fill and line style
 this.player.beginFill(0xffd900);
 this.player.lineStyle(2, 0xffd900, 1);
 this.player.drawCircle(0, 0, this.player.radius * 2);
 this.player.endFill();
 this.player.anchor.setTo(0.5,0.5);
 this.player.body_size = this.player.radius; 

 // draw a shape
 game.physics.p2.enableBody(this.player, true);
 this.player.body.clearShapes();
 this.player.body.addCircle(this.player.body_size, 0 , 0); 
 this.player.body.data.shapes[0].sensor = true;
}

// 서버는 새로운 적 플레이어가 서버에 연결할 때 알려줍니다.
// 우리는 우리 게임에서 새로운 적을 창조합니다.
function onNewPlayer (data) {
 //enemy object 
 var new_enemy = new remote_player(data.id, data.x, 
                                      data.y, data.angle); 
 enemies.push(new_enemy);
}

// 서버는 새로운 적의 움직임이 있음을 알려줍니다. 
// 이동 된 적을 찾고 서버와 적의 움직임을 동기화합니다.
function onEnemyMove (data) {
 console.log("moving enemy");
 
 var movePlayer = findplayerbyid (data.id); 
 
 if (!movePlayer) {
  return;
 }
 
 var newPointer = {
  x: data.x,
  y: data.y, 
  worldX: data.x,
  worldY: data.y, 
 }
 
 var distance = distanceToPointer(movePlayer.player, newPointer);
 speed = distance/0.05;
 
 movePlayer.rotation = movetoPointer(movePlayer.player, speed, 
                                        newPointer);
}

// 우리는 서버에서 계산 된 위치를 받고 플레이어 위치를 변경합니다.
function onInputRecieved (data) {
 
 // 우리는 새로운 위치를 가진 새로운 포인터를 만들고 있습니다.
 var newPointer = {
  x: data.x,
  y: data.y, 
  worldX: data.x,
  worldY: data.y, 
 }
 
 var distance = distanceToPointer(player, newPointer);
 //우리는 50ms마다 플레이어 위치를 얻고 있습니다. 
    // 현재 위치와 새 위치 사이를 보정합니다.
 speed = distance/0.05;
 
 // 새로운 위치로 이동하십시오.
 player.rotation = movetoPointer(player, speed, newPointer);

}

// 여기서 우리는 소켓 ID를 사용합니다.
// 적의 목록을 검색하여 찾습니다.
function findplayerbyid (id) {
 for (var i = 0; i < enemies.length; i++) {
  if (enemies[i].id == id) {
   return enemies[i]; 
  }
 }
}

main.prototype = {
 preload: function() {
  game.stage.disableVisibilityChange = true;
  game.scale.scaleMode = Phaser.ScaleManager.RESIZE;
  game.world.setBounds(0, 0, gameProperties.gameWidth, 
                                  gameProperties.gameHeight, 
                                  false, false, false, false);
  game.physics.startSystem(Phaser.Physics.P2JS);
  game.physics.p2.setBoundsToWorld(false, false, false, 
                                         false, false)
  game.physics.p2.gravity.y = 0;
  game.physics.p2.applyGravity = false; 
  game.physics.p2.enableBody(game.physics.p2.walls, false); 
  // physics start system
  //game.physics.p2.setImpactEvents(true);

    },
 
 create: function () {
  game.stage.backgroundColor = 0xE1A193;;
  console.log("client started");
  socket.on("connect", onsocketConnected); 
  
  // listen to new enemy connections
  socket.on("new_enemyPlayer", onNewPlayer);
  // listen to enemy movement 
  socket.on("enemy_move", onEnemyMove);
  // when received remove_player, remove the player passed; 
  socket.on('remove_player', onRemovePlayer); 
  // when the player receives the new input
  socket.on('input_recieved', onInputRecieved);
 },
 
 update: function () {
  // 플레이어 입력을 내 보낸다.
  
  // 플레이어가 만들어지면 플레이어를 움직인다.
  if (gameProperties.in_game) {
  
   // 우리는 새로운 마우스 포인터를 만들고 
            // 이 입력을 서버에 보냅니다.
   var pointer = game.input.mousePointer;
     
   // 새로운 위치 데이터를 서버에 보냅니다.
   socket.emit('input_fired', {
    pointer_x: pointer.x, 
    pointer_y: pointer.y, 
    pointer_worldx: pointer.worldX, 
    pointer_worldy: pointer.worldY, 
   });
  }
 }
}

var gameBootstrapper = {
    init: function(gameContainerElementId){
  game.state.add('main', main);
  game.state.start('main'); 
    }
};;

gameBootstrapper.init("gameDiv");

클라이언트 측에서 추가 한 새로운 기능은 onInputRecieved입니다. 튜토리얼의 파트 1에서는 클라이언트에서 플레이어 자체를 이동하고 현재 위치를 서버로 보냈습니다. 대신 서버에서 새로운 위치를 기다릴 것입니다. 우리는 50ms마다 데이터를받습니다. 따라서 새로운 속도를 계산하여 시작 위치와 끝 위치를 보간합니다. socket.on에 의한 onInputReceived ( 'input_recieved', onInputRecieved)를 기다리십시오.

서버 : 새 파일, playermovement.js

서버 폴더에 "physics"라는 새 폴더를 만듭니다. playermovement.js라는 새 javascript 파일을 만듭니다.

function movetoPointer (displayObject, speed, pointer, maxTime) 
{
 pointer = pointer;
 if (maxTime === undefined) { maxTime = 0; }
 var angle = angleToPointer(displayObject, pointer);
 if (maxTime > 0)
 {
  // 얼마나 많은 픽셀을 이동해야 하는지 알지만 
        // 속도는 얼마나 빠릅니까?
  speed = distanceToPointer(displayObject, pointer) / 
                                 (maxTime / 1000);
 }
 displayObject.playerBody.velocity[0] = Math.cos(angle) * 
                                          speed;
 displayObject.playerBody.velocity[1] = Math.sin(angle) * 
                                          speed;
 return angle;
}

function distanceToPointer (displayObject, pointer, world) {
    if (world === undefined) { world = false; }
    var dx = (world) ? displayObject.world.x - pointer.worldX 
      : displayObject.playerBody.position[0] - pointer.worldX;
    var dy = (world) ? displayObject.world.y - pointer.worldY 
      : displayObject.playerBody.position[1] - pointer.worldY;
    return Math.sqrt(dx * dx + dy * dy);
}

function angleToPointer (displayObject, pointer, world) {
      
        if (world === undefined) { world = false; }

        if (world)
        {
            return Math.atan2(pointer.worldY - 
                              displayObject.world.y, 
                              pointer.worldX - 
                              displayObject.world.x);
        }
        else
        {
            return Math.atan2(pointer.worldY - 
                      displayObject.playerBody.position[1], 
                      pointer.worldX - 
                      displayObject.playerBody.position[0]);
        }
}

// 우리는이 세 가지 기능을 제공한다.
module.exports = {
 movetoPointer: movetoPointer,
 distanceToPointer: distanceToPointer,
 angleToPointer: angleToPointer
}

서버 : App.js 

var express = require('express');
// 서버에 p2 물리 라이브러리가 필요합니다.
var p2 = require('p2'); 

var app = express();
var serv = require('http').Server(app);
// 서버에서 플레이어를 이동하는 데 필요한 기능을 얻습니다.
var physicsPlayer = require('./server/physics/playermovement.js');

app.get('/',function(req, res) {
 res.sendFile(__dirname + '/client/index.html');
});
app.use('/client',express.static(__dirname + '/client'));

serv.listen(process.env.PORT || 2000);
console.log("Server started.");

var player_lst = [];

// 물리 업데이트에 필요
var startTime = (new Date).getTime();
var lastTime;
var timeStep= 1/70; 

// 서버의 물리 세계. 이것은 모든 현상이 일어나는 곳입니다.
// 우리는 마우스 포인터를 따라 가기 때문에 중력을 0으로 설정합니다.
var world = new p2.World({
  gravity : [0,0]
});

// a player class in the server
var Player = function (startX, startY, startAngle) {
  this.x = startX
  this.y = startY
  this.angle = startAngle
  this.speed = 500;
  // We need to intilaize with true.
  this.sendData = true;
}

// 물리 처리기를 60fps라고 부릅니다. 여기서 물리 계산됩니다.
setInterval(physics_hanlder, 1000/60);

// Steps the physics world. 
function physics_hanlder() {
 var currentTime = (new Date).getTime();
 timeElapsed = currentTime - startTime;
 var dt = lastTime ? (timeElapsed - lastTime) / 1000 : 0;
    dt = Math.min(1 / 10, dt);
    world.step(timeStep);
}


// 새 플레이어가 연결되면 플레이어 개체의 새 인스턴스를 만들고 
// 새 플레이어 메시지를 클라이언트에 보냅니다.
function onNewplayer (data) {
 console.log(data);
 // 새 플레이어 인스턴스
 var newPlayer = new Player(data.x, data.y, data.angle);
 
 // 플레이어 본문의 인스턴스 만들기
 playerBody = new p2.Body ({
  mass: 0,
  position: [0,0],
  fixedRotation: true
 });
 
 // 플레이어 객체에 playerbody 추가
 newPlayer.playerBody = playerBody;
 world.addBody(newPlayer.playerBody);
 
 console.log("created new player with id " + this.id);
 newPlayer.id = this.id;  
 // 발신자를 제외한 모든 클라이언트에게 보낼 정보
 var current_info = {
  id: newPlayer.id, 
  x: newPlayer.x,
  y: newPlayer.y,
  angle: newPlayer.angle,
 }; 
 
 // 이미 연결되어있는 모든 사람에 대해 새 플레이어에게 보냅니다.
 for (i = 0; i < player_lst.length; i++) {
  existingPlayer = player_lst[i];
  var player_info = {
   id: existingPlayer.id,
   x: existingPlayer.x,
   y: existingPlayer.y, 
   angle: existingPlayer.angle,   
  };
  console.log("pushing player");
  // 보낸 사람 - 클라이언트에게만 메시지 보내기
  this.emit("new_enemyPlayer", player_info);
 }
 
 // 발신자를 제외한 모든 연결된 클라이언트에게 메시지 보내기
 this.broadcast.emit('new_enemyPlayer', current_info);
 

 player_lst.push(newPlayer); 
}


// 우리는 이것을 더 이상 사용하지 않고있다.
function onMovePlayer (data) {
 var movePlayer = find_playerid(this.id); 
 movePlayer.x = data.x;
 movePlayer.y = data.y;
 movePlayer.angle = data.angle; 
 
 var moveplayerData = {
  id: movePlayer.id,
  x: movePlayer.x,
  y: movePlayer.y, 
  angle: movePlayer.angle
 }
 
 // 발신자를 제외한 모든 연결된 클라이언트에게 메시지 보내기
 this.broadcast.emit('enemy_move', moveplayerData);
}

// 플레이어 위치를 확인하는 대신 사용자 입력을 확인합니다.
function onInputFired (data) {
 var movePlayer = find_playerid(this.id, this.room); 
 
 
 if (!movePlayer) {
  return;
  console.log('no player'); 
 }

 // sendData가 true이면 데이터를 클라이언트에 다시 보냅니다.
 if (!movePlayer.sendData) {
  return;
 }
 
 // 50ms마다 데이터를 전송합니다.
 setTimeout(function() {movePlayer.sendData = true}, 50);
 // 데이터를 보낼 때 sendData를 false로 설정합니다.
 movePlayer.sendData = false;
 
 // 클라이언트로부터의 새로운 입력으로 새로운 포인터 만들기
 // 서버에 플레이어 위치를 포함합니다.
 var serverPointer = {
  x: data.pointer_x,
  y: data.pointer_y,
  worldX: data.pointer_worldx,   
  worldY: data.pointer_worldy
 }
 
 // 플레이어로 부터 새로운 입력으로 플레이어를 이동.
 if (physicsPlayer.distanceToPointer(movePlayer, serverPointer) <= 30) 
 {
  movePlayer.playerBody.angle = 
  physicsPlayer.movetoPointer(movePlayer, 0, serverPointer, 1000);
 } else {
  movePlayer.playerBody.angle = 
  physicsPlayer.movetoPointer(movePlayer, 
                              movePlayer.speed, serverPointer); 
 }
 
 // 새로운 플레이어 위치가 클라이언트로 다시 전송됩니다.
 var info = {
  x: movePlayer.playerBody.position[0],
  y: movePlayer.playerBody.position[1],
  angle: movePlayer.playerBody.angle
 }

 // 보낸 클라이언트 (모든 클라이언트가 아닌)로 보냅니다.
 this.emit('input_recieved', info);
 
 // 발신자를 제외한 모든 사용자에게 다시 전송할 데이터
 var moveplayerData = {
  id: movePlayer.id, 
  x: movePlayer.playerBody.position[0],
  y: movePlayer.playerBody.position[1],
  angle: movePlayer.playerBody.angle,
 }
 
 // 발신자를 제외한 모든 사람에게 보내기
 this.broadcast.emit('enemy_move', moveplayerData);
}

// 클라이언트가 연결을 끊을 때 호출을하고 발신자를 제외한 
// 클라이언트에게 연결이 끊긴 플레이어를 제거하라고 알립니다.
function onClientdisconnect() {
 console.log('disconnect'); 

 var removePlayer = find_playerid(this.id); 
  
 if (removePlayer) {
  player_lst.splice(player_lst.indexOf(removePlayer), 1);
 }
 
 console.log("removing player " + this.id);
 
 // 발신자를 제외한 모든 연결된 클라이언트에게 메시지 보내기
 this.broadcast.emit('remove_player', {id: this.id});
 
}

// 고유 소켓 ID로 플레이어 찾기
function find_playerid(id) {

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

  if (player_lst[i].id == id) {
   return player_lst[i]; 
  }
 }
 
 return false; 
}

 // io connection 
var io = require('socket.io')(serv,{});

io.sockets.on('connection', function(socket){
 console.log("socket connected"); 
 
 // listen for disconnection; 
 socket.on('disconnect', onClientdisconnect); 
 
 // listen for new player
 socket.on("new_player", onNewplayer);
 /*
 //we dont need this anymore
 socket.on("move_player", onMovePlayer);
 */
 //listen for new player inputs. 
 socket.on("input_fired", onInputFired);
});