Phaser 에서 Toast 메시지 추가하기

Toast메시지는 페이드 인 및 페이드 아웃되는 문자 메시지입니다. 유리를 올린 사람과 축배를하고 유리를 다시 내리는 것과 비슷하기 때문에 토스트 메시지라는 이름이 붙어 있습니다.

여기에 예제가 있습니다.

var StateMain = {

    preload: function() {

        game.load.image("toastBack", "images/back.png");

        game.load.image("btnToast", "images/btnGenerate.png");

    },

    create: function() {

 

        //SET UP TEST BUTTON

     this.btnToast=game.add.sprite(game.world.centerX,game.height*.25,"btnToast");

     this.btnToast.anchor.set(0.5,0.5);

     this.btnToast.inputEnabled=true;

     this.btnToast.events.onInputDown.add(this.testToast,this);

    },

    testToast: function() {

        this.btnToast.visible=false;

        //get an instance of a toast object

        //and place it in postion

        var toast = this.makeToast("TEST!");

        toast.x = game.world.centerX;

        toast.y = game.world.height * .8;

        //fade in the toast object

        this.fadeIn(toast);

    },

    makeToast: function(message) {

        var toastGroup = game.add.group();

        var toastText = game.add.text(0, 0, message);

        var toastBack = game.add.sprite(0, 0, "toastBack");

        toastBack.width = game.width * .9;

        //

        //

        //SET ANCHORS

        toastText.anchor.set(0.5, 0.5);

        toastBack.anchor.set(0.5, 0.5);

        //

        //ADD THE TEXT AND SPRITE GRAPHIC TO THE TOAST GROUP

        toastGroup.add(toastBack);

        toastGroup.add(toastText);

        toastGroup.alpha = 0;

        //

        return toastGroup;

    },

    fadeIn: function(obj) {

        var tween = game.add.tween(obj).to({

            alpha: 1

        }, 1000, Phaser.Easing.Linear.None, true);

        tween.onComplete.add(this.delay, this);

    },

    delay:function(obj)

    {

        //WHEN TWEEN IS DONE PAUSE HERE FOR DELAY

        //SET A FADE OBJECT IN THE SCOPE OF THE STATE,

        //SINCE WE CAN NOT PASS THE OBJECT IN THE TIMER

     this.fadeObj=obj;

     game.time.events.add(Phaser.Timer.SECOND*2, this.delayDone, this);

    },

    delayDone:function()

    {

        //NOW THAT DELAY IS DONE CALL FADE OUT

     this.fadeOut(this.fadeObj);

    },

    fadeOut: function(obj) {

        var tween = game.add.tween(obj).to({

            alpha: 0

        }, 1000, Phaser.Easing.Linear.None, true);

        tween.onComplete.add(this.fadeDone, this);

    },

    fadeDone:function()

    {

        this.btnToast.visible=true;

    },

    update: function() {}

}