在移相器中使用与瓷砖贴图的摩擦

Question

我一直在使用 Phaser 3 制作一个简单的平台游戏。关卡是用数组中的瓦片地图设计的，唯一的精灵是玩家本身。 当玩家按下右箭头键时，玩家的 x 速度会增加。 我想做的是在地面和玩家之间产生摩擦，这样我们的玩家一旦松开钥匙就会停下来。 我知道你可以用其他精灵做到这一点，但你可以用瓷砖地图做到这一点吗？

Answer 1

使用arcade物理很难做到这一点（或或多或少不可能） 。 我个人会通过使用方法map.setTileLocationCallback设置回调来伪造摩擦，这个回调设置玩家的拖动（或者如果你有多个图层，你甚至可以为这种情况定义一个图层） 。

使用matter物理引擎应该是可能的，请查看此演示和/或文档。

这是arcade物理的简短演示：
在这个小演示中，播放器是用光标键移动的。
（玩家应该在左侧少滑动=更多摩擦）

 document.body.style = 'margin:0;'; let player; let cursors; let playerStateText; let config = { type: Phaser.AUTO, width: 12 * 16, height: 6 * 16, zoom: 2, physics: { default: 'arcade', arcade: { gravity: { y: 100 }, debug: true } }, scene: { create, preload, update }, banner: false }; function preload () { this.load.image('mario-tiles', 'https://labs.phaser.io/assets/tilemaps/tiles/super-mario.png'); } function create () { playerStateText = this.add.text(10, 10, 'Playerstate: ???', {color: '#ffffff', fontSize: 10}) .setDepth(10); // Load a map from a 2D array of tile indices let level = [ [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 35, 36, 37, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], [ 39, 39, 39, 39, 39, 39, 14, 14, 14, 14, 14, 14 ] ]; // When loading from an array, make sure to specify the tileWidth and tileHeight let map = this.make.tilemap({ data: level, tileWidth: 16, tileHeight: 16 }); let tiles = map.addTilesetImage('mario-tiles'); let layer = map.createLayer(0, tiles, 0, 0); map.setCollision([ 39, 14], true, true, layer); player = this.add.rectangle(10, 10, 8, 8, 0xffffff); this.physics.add.existing(player); player.body.setCollideWorldBounds(true); // Just to be sure that the player doesn't get too fast player.body.setMaxSpeed(160); // Tweak this value to define how far/long the player should slide player.body.setDrag(120, 0); this.physics.add.collider(player, layer); map.setTileLocationCallback(0, 4, 6, 1, _ => player.body.setDrag(1000, 0) ) map.setTileLocationCallback(6, 4, 6, 1, _ => player.body.setDrag(100, 0) ) cursors = this.input.keyboard.createCursorKeys(); } function update(){ let currentState = 'Playerstate: running'; if (cursors.left.isDown){ player.body.setAccelerationX(-160); } else if (cursors.right.isDown) { player.body.setAccelerationX(160); } else { player.body.setAccelerationX(0); if(Math.abs(player.body.velocity.x) > 3) { currentState = 'Playerstate: sliding'; } else if(Math.abs(player.body.velocity.y) > 3) { currentState = 'Playerstate: falling'; } else { currentState = 'Playerstate: stopped'; } } if(player.x > 400){ player.x = -20; } if(player.x < -20){ player.x = 400; } playerStateText.setText(currentState); } new Phaser.Game(config);

 <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>