Phaser3 + MatterJs 实现伪3D推金币

Phaser配置:

const config = {
                width: 1080, //游戏宽度
                height: 1920, //游戏高度
                type: Phaser.AUTO, //游戏渲染方式
                mode: Phaser.Scale.FIT, // 缩放模式
                //物理引擎
                physics: {
                    default: 'matter', // 使用matterjs物理引擎
                    matter: {
                        gravity: {
                            y: 6
                        },
                        debug: false // 是否开启调试
                    }
                },
                //游戏默认场景
                scene: {
                    preload: preload,
                    create: create,
                }
            }

 new Phaser.Game(config);

我们都知道:推金币的机器一般就是下面有一个推板,然后不停的进行收缩,金币不停掉落,由推板来推至底部,第一步,实现一个推板,先加载资源

preload() {
   //开发环境 
    this.load.image('board', that._getImage(that.theme, 'tbOne.png')); //推板
    this.load.image('coin', that._getImage(that.theme, 'b_c_z.png')); //金币
}

设置一个边界

//设置边界
this.matter.world.setBounds(0, 0, this.game.config.width, this.game.config.height);

 这个表示生成一个边界,防止金币掉出边界

然后给推板载入一个刚体轮廓,创造补间动画,达到伸缩拉回的效果

//为推板载入一个刚体轮廓
const board = this.matter.add.image(535, 1230, 'board');

//为推板创造补间动画
this.tweens.add({
 targets: [board], //tweens动画目标
 ease: "Linear", //运动方式
 y: that.boardY, // 目标的y坐标,
 duration: 1000, //动画时间
 repeat: -1, //执行多少次,-1为重复执行
 callbackScope: this, //回调函数的this值
 yoyo: true, //是否自动回放

})

 设置我们金币的刚体轮廓,并为金币创建掉落动画

let coinAll = this.matter.add.image(160 + ((Math.random() * 60) + 100 * coinXnum) - (Math.random() * 20), 1200 + coinYnum * 35, 'coin');
// coinAll.setSensor(true);
// 设置金币刚体轮廓
coinAll.setBody({
  "type": "fromPhysicsEditor",
  "label": "b_c_z",
  "isStatic": true,
  "density": 0.1,
  "restitution": 0,
  "friction": 0.1,
  "frictionAir": 0.01,
  "frictionStatic": 0.5,
  "collisionFilter": {
      "group": 0,
      "category": 1,
      "mask": 255
   },
   "fixtures": [{
       "label": "",
       "isSensor": false,
       "vertices": [
           [{ "x": 53, "y": 9 }, { "x": 51, "y": 6 }, { "x": 46, "y": 3 }, { "x": 39, "y": 1 }, { "x": 32, "y": 0 }, { "x": 20, "y": 0 }, { "x": 46, "y": 22 }, { "x": 53, "y": 13 }],
           [{ "x": 5, "y": 3 }, { "x": 1, "y": 8 }, { "x": 1, "y": 18 }, { "x": 10, "y": 23 }, { "x": 20, "y": 25 }, { "x": 36, "y": 25 }, { "x": 20, "y": 0 }, { "x": 14, "y": 1 }],
           [{ "x": 53, "y": 16 }, { "x": 53, "y": 13 }, { "x": 46, "y": 22 }, { "x": 51, "y": 19 }],
           [{ "x": 3, "y": 21 }, { "x": 10, "y": 23 }, { "x": 1, "y": 18 }],
           [{ "x": 20, "y": 0 }, { "x": 36, "y": 25 }, { "x": 41, "y": 24 }, { "x": 46, "y": 22 }]
        ]
    }]
});


//为金币创造补间动画
this.tweens.add({
    targets: [coinAll], //tweens动画目标
    ease: "Linear", //运动方式
    y: that.coinY + (45 * coinYnum) + Math.random() * 30 - (Math.random() * 30 + 20), // 目标的y坐标,
    duration: 300, //动画时间
    repeat: 0, //执行多少次,-1为重复执行
    callbackScope: this, //回调函数的this值
});

我们需要在金币掉落的时候将金币的重力关闭,防止金币与推板碰撞导致乱飞

//设置金币重力为0
coinAll.body.gravityScale.y = 0;

当金币完全掉落在指定位置或推板上时,开启金币重力,就可以实现一个简易的推金币

各位如果有什么意见或者问题欢迎下方留言,感谢观看