필자는 Phaser CE v2.8.7 및 Phaser v3.0.0을 사용하여 프로토 타입을 다시 작성했으며 이는 아마도 Phaser 3 작동 첫 번째 프로토 타입 일 것입니다.
2.8.7 버전부터 시작해 보겠습니다.
클릭하여 길게 누르면 구가 생기고, 놓으면 구가 튀어 나오고 그에 따라 움직입니다.
소스 코드는 아직 댓글을 달지 않았습니다. 특히 시리즈의 다른 게시물을 읽는다면 매우 정직합니다.
var game;
var gameOptions = {
maxDiameter: 50,
ballGrowingSpeed: 0.5,
balanceFriction: 400
}
window.onload = function(){
game = new Phaser.Game(320, 480, Phaser.CANVAS);
game.state.add("PlayGame", playGame, true);
}
var playGame = function (){};
playGame.prototype = {
preload: function (){
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.stage.disableVisibilityChange = true;
game.stage.backgroundColor = 0x222222;
this.load.image("ball", "ball.png");
this.load.image("balance", "balance.png");
},
create: function (){
this.growBall = false;
this.canPlay = true;
this.balance = [];
for(var i = 0; i < 2; i++){
this.balance[i] = game.add.group();
this.balance[i].weight = 0;
var balanceSprite = game.add.sprite(game.width / 2 * i, 240, "balance");
balanceSprite.anchor.set(0, 0.5);
this.balance[i].add(balanceSprite);
}
game.input.onDown.add(this.placeBall, this);
game.input.onUp.add(this.dropBall, this);
},
placeBall: function(e){
if(!this.growBall && this.canPlay){
this.ball = game.add.sprite(e.x, 0, "ball");
this.ball.anchor.set(0.5);
this.ball.width = 1;
this.ball.height = 1;
this.ball.balance = Math.floor(this.ball.x / (game.width / 2));
this.balance[this.ball.balance].add(this.ball);
this.ball.y = 30 - this.balance[this.ball.balance].y
this.growBall = true;
}
},
dropBall: function(){
if(this.growBall){
this.growBall = false;
this.canPlay = false;
var ballDestination = game.height / 2 -
this.balance[this.ball.balance].getChildAt(0).height /
2 - this.ball.height / 2;
this.balance[this.ball.balance].weight += (4 / 3) * Math.PI *
Math.pow((this.ball.width / 2), 3);
var ballTween = game.add.tween(this.ball).to({
y: ballDestination
}, 2000, Phaser.Easing.Bounce.Out, true);
ballTween.onComplete.add(this.adjustBalances, this)
}
},
adjustBalances: function(){
var weightDifference = (this.balance[0].weight - this.balance[1].weight) /
gameOptions.balanceFriction;
var maxDifference = game.height / 3;
if(weightDifference > maxDifference){
weightDifference =maxDifference;
}
if(weightDifference < -maxDifference){
weightDifference = -maxDifference;
}
for(var i = 0; i < 2; i++){
var balanceTween = game.add.tween(this.balance[i]).to({
y: weightDifference - (2 * i * weightDifference)
}, 2000, Phaser.Easing.Quadratic.Out, true);
balanceTween.onComplete.add(function(){
this.canPlay = true;
}, this);
}
},
update: function(){
if(this.growBall && this.ball.width < gameOptions.maxDiameter){
this.ball.width += gameOptions.ballGrowingSpeed;
this.ball.height += gameOptions.ballGrowingSpeed;
}
}
}
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 가지 팁이 있습니다.
var game;
var _this;
var gameOptions = {
maxDiameter: 1,
ballGrowingSpeed: 0.015,
balanceFriction: 400
}
var config = {
type: Phaser.CANVAS,
width: 320,
height: 480
};
window.onload = function(){
game = new Phaser.Game(config);
game.scene.add("PlayGame", playGame, true);
}
var playGame = function (){
_this = this;
};
playGame.prototype = {
preload: function (){
var camera = _this.cameras.add(0, 0, game.width, game.height);
camera.setBackgroundColor("0x222222");
_this.load.image("ball", "ball.png");
_this.load.image("balance", "balance.png");
},
create: function (){
_this.growBall = false;
_this.canPlay = true;
_this.balance = [];
for(var i = 0; i < 2; i++){
_this.balance[i] = _this.add.group();
_this.balance[i].weight = 0;
_this.balance[i].saveYPosition = 0;
var balanceSprite = _this.add.sprite(config.width / 2 * i, 240, "balance");
balanceSprite.setOrigin(0, 0.5);
_this.balance[i].add(balanceSprite);
}
_this.input.events.on("POINTER_DOWN_EVENT", _this.placeBall);
_this.input.events.on("POINTER_UP_EVENT", _this.dropBall);
},
placeBall: function(e){
if(!_this.growBall && _this.canPlay){
var side = Math.floor(e.x / (config.width / 2));
_this.ball = _this.add.sprite(e.x, 30, "ball");
_this.ball.balance = side;
_this.ball.scaleX = 0.1;
_this.ball.scaleY = 0.1;
_this.balance[_this.ball.balance].add(_this.ball);
_this.growBall = true;
}
},
dropBall: function(){
if(_this.growBall){
_this.growBall = false;
_this.canPlay = false;
var ballDestination = config.height / 2 +
_this.balance[_this.ball.balance].saveYPosition -
_this.balance[_this.ball.balance].children.entries[0].height / 2 -
_this.ball.height * _this.ball.scaleY / 2;
_this.balance[_this.ball.balance].weight += (4 / 3) * Math.PI *
Math.pow((_this.ball.width * _this.ball.scaleX / 2), 3);
var ballTween = _this.tweens.add({
targets: _this.ball,
y: ballDestination,
duration: 2000,
ease: "Bounce",
onComplete: _this.adjustBalances
});
}
},
adjustBalances: function(){
var weightDifference = (_this.balance[0].weight - _this.balance[1].weight) /
gameOptions.balanceFriction;
var maxDifference = config.height / 3;
if(weightDifference > maxDifference){
weightDifference = maxDifference;
}
if(weightDifference < -maxDifference){
weightDifference = -maxDifference;
}
for(var i = 0; i < 2; i++){
var difference = - _this.balance[i].saveYPosition + weightDifference -
(2 * i * weightDifference)
_this.balance[i].saveYPosition += difference;
var balanceTween = _this.tweens.add({
targets: _this.balance[i].children.entries,
y: "+=" + difference.toString(),
duration: 2000,
ease: "Quad",
onComplete: function(){
_this.canPlay = true;
}
})
}
},
update: function(){
if(_this.growBall && _this.ball.scaleX < gameOptions.maxDiameter){
_this.ball.scaleX += gameOptions.ballGrowingSpeed;
_this.ball.scaleY += gameOptions.ballGrowingSpeed;
}
}
}
여전히 많은 부분이 있지만, 일반적인 "Hello World"보다 훨씬 깁니다. 프로토 타입을 개선하기위한 제안이 있다면 환영합니다. 두 프로토 타입의 소스 코드를 다운로드하십시오.
댓글 없음:
댓글 쓰기