Phaser CE vs Phaser 3 Beta - 두 가지 엔진을 최신 버전의 "Mass Attack"HTML5 게임과 비교하십시오

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

필자는 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"보다 훨씬 깁니다. 프로토 타입을 개선하기위한 제안이 있다면 환영합니다. 두 프로토 타입의 소스 코드를 다운로드하십시오.