当前位置:   article > 正文

Phaser3 + MatterJs 实现伪3D推金币_phaser3 tweens

phaser3 tweens

Phaser配置:

  1. const config = {
  2. width: 1080, //游戏宽度
  3. height: 1920, //游戏高度
  4. type: Phaser.AUTO, //游戏渲染方式
  5. mode: Phaser.Scale.FIT, // 缩放模式
  6. //物理引擎
  7. physics: {
  8. default: 'matter', // 使用matterjs物理引擎
  9. matter: {
  10. gravity: {
  11. y: 6
  12. },
  13. debug: false // 是否开启调试
  14. }
  15. },
  16. //游戏默认场景
  17. scene: {
  18. preload: preload,
  19. create: create,
  20. }
  21. }

 new Phaser.Game(config);

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

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

设置一个边界

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

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

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

  1. //为推板载入一个刚体轮廓
  2. const board = this.matter.add.image(535, 1230, 'board');
  3. //为推板创造补间动画
  4. this.tweens.add({
  5. targets: [board], //tweens动画目标
  6. ease: "Linear", //运动方式
  7. y: that.boardY, // 目标的y坐标,
  8. duration: 1000, //动画时间
  9. repeat: -1, //执行多少次,-1为重复执行
  10. callbackScope: this, //回调函数的this值
  11. yoyo: true, //是否自动回放
  12. })

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

  1. let coinAll = this.matter.add.image(160 + ((Math.random() * 60) + 100 * coinXnum) - (Math.random() * 20), 1200 + coinYnum * 35, 'coin');
  2. // coinAll.setSensor(true);
  3. // 设置金币刚体轮廓
  4. coinAll.setBody({
  5. "type": "fromPhysicsEditor",
  6. "label": "b_c_z",
  7. "isStatic": true,
  8. "density": 0.1,
  9. "restitution": 0,
  10. "friction": 0.1,
  11. "frictionAir": 0.01,
  12. "frictionStatic": 0.5,
  13. "collisionFilter": {
  14. "group": 0,
  15. "category": 1,
  16. "mask": 255
  17. },
  18. "fixtures": [{
  19. "label": "",
  20. "isSensor": false,
  21. "vertices": [
  22. [{ "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 }],
  23. [{ "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 }],
  24. [{ "x": 53, "y": 16 }, { "x": 53, "y": 13 }, { "x": 46, "y": 22 }, { "x": 51, "y": 19 }],
  25. [{ "x": 3, "y": 21 }, { "x": 10, "y": 23 }, { "x": 1, "y": 18 }],
  26. [{ "x": 20, "y": 0 }, { "x": 36, "y": 25 }, { "x": 41, "y": 24 }, { "x": 46, "y": 22 }]
  27. ]
  28. }]
  29. });
  30. //为金币创造补间动画
  31. this.tweens.add({
  32. targets: [coinAll], //tweens动画目标
  33. ease: "Linear", //运动方式
  34. y: that.coinY + (45 * coinYnum) + Math.random() * 30 - (Math.random() * 30 + 20), // 目标的y坐标,
  35. duration: 300, //动画时间
  36. repeat: 0, //执行多少次,-1为重复执行
  37. callbackScope: this, //回调函数的this值
  38. });

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

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

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/834667
推荐阅读
相关标签
  

闽ICP备14008679号