html - 用移相器制作隐形 Sprite

Question

我的代码需要一些帮助。我想让 str Sprite 在 10 秒后不可见。

我正在使用此链接寻求帮助:http://phaser.io/examples/v2/time/basic-timed-event

var game = new Phaser.Game(500, 550, Phaser.AUTO);
    //var picture;
    var Pacman = function (game) {

        this.map = null;
        this.layer = null;
        this.pacman = null;

        this.safetile = 14;
        this.gridsize = 16;

        this.speed = 100;
        this.threshold = 3;
        this.turnSpeed = 200;

        this.marker = new Phaser.Point();
        this.turnPoint = new Phaser.Point();

        this.directions = [ null, null, null, null, null ];
        this.opposites = [ Phaser.NONE, Phaser.RIGHT, Phaser.LEFT, Phaser.DOWN, Phaser.UP ];

        this.current = Phaser.NONE;
        this.turning = Phaser.NONE;

        this.score=0;
        this.scoreText='';

    this.bonus=0;
    this.bonusText='';


    };

    Pacman.prototype = {
        init: function () {
            this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
            this.scale.pageAlignHorizontally = true;
            this.scale.pageAlignVertically = true;
            Phaser.Canvas.setImageRenderingCrisp(this.game.canvas);
            this.physics.startSystem(Phaser.Physics.ARCADE);
        },

        preload: function () {
            //  We need this because the assets are on github pages
            //  Remove the next 2 lines if running locally
            this.load.baseURL = 'https://nikosdaskalos.github.io/pacman/';
            this.load.crossOrigin = 'anonymous';
            this.load.image('str', 'assets/str.png');
            this.load.image('dot', 'assets/dot.jpg');
            this.load.image('coin', 'assets/coin.jpg');
            this.load.image('tiles', 'assets/pacman-tiles.png');
            this.load.spritesheet('pacman', 'assets/pacman.png');
            this.load.tilemap('map', 'assets/pacman-map.json', null, Phaser.Tilemap.TILED_JSON);
            //  Needless to say, graphics (C)opyright Namco
        },

        create: function () {
            this.map = this.add.tilemap('map');
            this.map.addTilesetImage('pacman-tiles', 'tiles');

            this.layer = this.map.createLayer('Pacman');
                    //picture = game.add.sprite(game.world.centerX, game.world.centerY, 'str');
                    //picture.anchor.setTo(0.5, 0.5);
                    //game.time.events.add(Phaser.Timer.SECOND * 4, fadePicture, this);

            this.dots = this.add.physicsGroup();
            this.map.createFromTiles(36, this.safetile, 'str', this.layer, this.dots);
            this.map.createFromTiles(7, this.safetile, 'dot', this.layer, this.dots);
            this.map.createFromTiles(35, this.safetile, 'coin', this.layer, this.dots);
            //  The dots will need to be offset by 6px to put them back in the middle of the grid
            this.dots.setAll('x', 6, false, false, 1);
            this.dots.setAll('y', 6, false, false, 1);

            //  Pacman should collide with everything except the safe tile
            this.map.setCollisionByExclusion([this.safetile], true, this.layer);

            //  Position Pacman at grid location 14x17 (the +8 accounts for his anchor)
            this.pacman = this.add.sprite((14 * 16) + 8, (17 * 16) + 8, 'pacman', 0);

            this.pacman.anchor.set(0.5);

            //this.pacman.animations.add('munch', [0, 1, 2, 1], 20, true);
            this.physics.arcade.enable(this.pacman);
            this.pacman.body.setSize(16, 16, 0, 0);
            this.cursors = this.input.keyboard.createCursorKeys();

            //this.pacman.play('munch');
            this.move(Phaser.LEFT);

            this.scoreText = game.add.text(0, 500, 'Score: 0', { fontSize: '34px Arial', fill: 'white' });

            lives = game.add.group();
            game.add.text(game.world.width - 340, 500, 'Lives : ', { fontSize: '34px Arial', fill: 'white' });


            this.bonusText = game.add.text(360, 500, 'Bonus: 0', { fontSize: '20px Arial', fill: 'white' });

            for (var i = 0; i < 3; i++) 
            {
            var pacman = lives.create(game.world.width - 235 + (30 * i), 517, 'pacman');
            pacman.anchor.setTo(0.5, 0.5);
            pacman.angle = 90;
            pacman.alpha = 0.4;
            }   
        },
                    //function fadePicture() {

                        //game.add.tween(picture).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true);

                    //},

        checkKeys: function () {
            if (this.cursors.left.isDown && this.current !== Phaser.LEFT)
            {
                this.checkDirection(Phaser.LEFT);
            }
            else if (this.cursors.right.isDown && this.current !== Phaser.RIGHT)
            {
                this.checkDirection(Phaser.RIGHT);
            }
            else if (this.cursors.up.isDown && this.current !== Phaser.UP)
            {
                this.checkDirection(Phaser.UP);
            }
            else if (this.cursors.down.isDown && this.current !== Phaser.DOWN)
            {
                this.checkDirection(Phaser.DOWN);
            }
            else
            {
                //  This forces them to hold the key down to turn the corner
                this.turning = Phaser.NONE;
            }
        },

        checkDirection: function (turnTo) {
            if (this.turning === turnTo || this.directions[turnTo] === null || this.directions[turnTo].index !== this.safetile)
            {
                //  Invalid direction if they're already set to turn that way
                //  Or there is no tile there, or the tile isn't index 1 (a floor tile)
                return;
            }
            //  Check if they want to turn around and can
            if (this.current === this.opposites[turnTo])
            {
                this.move(turnTo);
            }
            else
            {
                this.turning = turnTo;

                this.turnPoint.x = (this.marker.x * this.gridsize) + (this.gridsize / 2);
                this.turnPoint.y = (this.marker.y * this.gridsize) + (this.gridsize / 2);
            }
        },

        turn: function () {

            var cx = Math.floor(this.pacman.x);
            var cy = Math.floor(this.pacman.y);

            //  This needs a threshold, because at high speeds you can't turn because the coordinates skip past
            if (!this.math.fuzzyEqual(cx, this.turnPoint.x, this.threshold) || !this.math.fuzzyEqual(cy, this.turnPoint.y, this.threshold))
            {
                return false;
            }
            //  Grid align before turning
            this.pacman.x = this.turnPoint.x;
            this.pacman.y = this.turnPoint.y;

            this.pacman.body.reset(this.turnPoint.x, this.turnPoint.y);

            this.move(this.turning);

            this.turning = Phaser.NONE;

            return true;
        },

        move: function (direction) {
            var speed = this.speed;
            if (direction === Phaser.LEFT || direction === Phaser.UP)
            {
                speed = -speed;
            }
            if (direction === Phaser.LEFT || direction === Phaser.RIGHT)
            {
                this.pacman.body.velocity.x = speed;
            }
            else
            {
                this.pacman.body.velocity.y = speed;
            }
            //  Reset the scale and angle (Pacman is facing to the right in the sprite sheet)
           /* this.pacman.scale.x = 1;
            this.pacman.angle = 0;
            if (direction === Phaser.LEFT)
            {
                this.pacman.scale.x = -1;
            }
            else if (direction === Phaser.UP)
            {
                this.pacman.angle = 270;
            }
            else if (direction === Phaser.DOWN)
            {
                this.pacman.angle = 90;
            }
            this.current = direction;
        },*/
            this.add.tween(this.pacman).to( { angle: this.getAngle(direction) }, this.turnSpeed, "Linear", true);
            this.current = direction;
        },

          getAngle: function (to) {
            //  About-face?
            if (this.current === this.opposites[to])
            {
                return "180";
            }
            if ((this.current === Phaser.UP && to === Phaser.LEFT) ||
                (this.current === Phaser.DOWN && to === Phaser.RIGHT) ||
                (this.current === Phaser.LEFT && to === Phaser.DOWN) ||
                (this.current === Phaser.RIGHT && to === Phaser.UP))
            {
                return "-90";
            }
            return "90";
        },




        eatDot: function (pacman, dot) {
            dot.kill();            
            var audio = new Audio('assets/pacman_chomp.wav');
            audio.play()
            this.score+=10;
            this.scoreText.text= 'Score: ' + this.score;
            //setTimeout(audio.play(),2000);

            if (this.dots.total === 0)
            {
                this.dots.callAll('revive');
            }
        },

        /*function muteAudio() {
            var audio = document.getElementById('audioPlayer');

            if (audio.mute = false) {
                document.getElementById('audioPlayer').muted = true;
        }
        else {
                audio.mute = true 
                document.getElementById('audioPlayer').muted = false;

            }
        }*/

        eatCoin: function(pacman,coin){//pente
            coin.kill();
        this.score+=20;
            this.scoreText.text= 'Score: ' + this.score;
        var audio = new Audio('assets/pacman_eatfruit.wav');
            audio.play()
            if(this.coins.total===0)
            {
                this.coins.callAll('revive');
            }
        },

    eatStr: function(pacman,str){//pente
            str.kill();
        this.bonus+=100;
            this.bonusText.text= 'Bonus: ' + this.bonus;
        var audio = new Audio('assets/pacman_eatfruit.wav');
            audio.play()
            if(this.strs.total===0)
            {
                this.strs.callAll('revive');
            }
        },

        update: function () {

            this.physics.arcade.collide(this.pacman, this.layer);

            this.physics.arcade.overlap(this.pacman, this.dots, this.eatDot, null, this);
            this.physics.arcade.overlap(this.pacman, this.dots, this.eatCoin, null, this);
            this.physics.arcade.overlap(this.pacman, this.dots, this.eatStr, null, this);
            this.marker.x = this.math.snapToFloor(Math.floor(this.pacman.x), this.gridsize) / this.gridsize;
            this.marker.y = this.math.snapToFloor(Math.floor(this.pacman.y), this.gridsize) / this.gridsize;

            //  Update our grid sensors
            this.directions[1] = this.map.getTileLeft(this.layer.index, this.marker.x, this.marker.y);
            this.directions[2] = this.map.getTileRight(this.layer.index, this.marker.x, this.marker.y);
            this.directions[3] = this.map.getTileAbove(this.layer.index, this.marker.x, this.marker.y);
            this.directions[4] = this.map.getTileBelow(this.layer.index, this.marker.x, this.marker.y);
            this.checkKeys();
            if (this.turning !== Phaser.NONE)
            {
                this.turn();
            }
        }
    };
    game.state.add('Game', Pacman, true);
    </script>

</body>
</html>

那么，谁能帮我让 str 在 10 秒后不可见？

Answer 1

你非常接近。

我将以 pacman 为例，因为我不是 100% 确定您将如何淡出硬币。吃 bean 什么时候吃？

首先，您需要以下 fadePicture 函数:

fadePicture: function() {
    game.add.tween(this.pacman).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true);
},

请注意它是如何从 function fadePicture() 改变过来的。

接下来，在您的 create 函数中您可以引用它:

this.game.time.events.add(Phaser.Timer.SECOND * 4, this.fadePicture, this);

替换以下内容:

//game.time.events.add(Phaser.Timer.SECOND * 4, fadePicture, this);

我创建了 a JSFiddle with the relevant changes .

如果您确实希望您的硬币褪色，那么我会尝试更新 fadePicture 以接受 dot/str 参数，然后在其上更新 game.add.tween。