如何在phaser.js中设置跳跃碰撞

Question

问题

我一直在用phaser.js创建一个游戏，但不能设置跳跃碰撞

我想要什么

基本上，我想让玩家在碰到天花板或墙壁时无法再次跳跃，只有在碰到地板时才能再次跳跃。

我有什么

当玩家与天花板或墙壁碰撞时，他可以再次跳跃

我的代码玩家跳跃代码实际上是这样的

const isPlayerFallingOrJumping = isCurrentState('fall') || isCurrentState('jump');
if (isPlayerFallingOrJumping) this.stateMachine.setState('idle');

Answer 1

您可以像下面这个例子一样检查tile索引(链接到文档)。这个例子很松散地基于这个答案，但将整个tile逻辑添加到混合中。

这里是一个演示:
你可以从地板上跳下来，但不能触摸红色墙。

document.body.style = 'margin:10px;';
var config = {
type: Phaser.AUTO,
width: 536 / 5.2,
height: 70,
zoom: 2.5,
physics: {
default: 'arcade',
arcade: {            
gravity: { y: 50 },
}
},
scene: {
create,
update
},
banner: false
}; 
var cursors;
var player;
var playerStateText;
const SPEED = 50;
var isJumping = true;
function create () {
let graphics  = this.make.graphics();
graphics.fillStyle(0x00ff00);
graphics.fillRect(8, 0, 8, 8);
graphics.fillStyle(0xff0000);
graphics.fillRect(16, 0, 8, 8);
graphics.fillStyle(0xff0000);
graphics.fillRect(24, 0, 8, 8);
graphics.generateTexture('tiles', 8*4, 8);
let level = [
[3,3,3,3,3,3,3,3,3,3,3,3,3],
[2,0,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,0,1,1,2],
[2,0,0,0,0,0,0,0,0,0,1,1,2],
[2,0,0,0,0,0,0,0,0,0,1,1,2],
[1,1,1,1,1,1,1,1,1,1,1,1,1],
];
let map = this.make.tilemap({ data: level, tileWidth: 8, tileHeight: 8 });
let tiles = map.addTilesetImage('tiles');
let layer = map.createLayer(0, tiles, 0, 0);
layer.setCollisionBetween(1,3);

this.player = this.add.circle(16, 16, 6, 0xffffff)
.setDepth(2);

this.physics.add.existing(this.player);

this.physics.add.collider(layer, this.player, function(player, tile){
if(tile.index == 1 && player.body.blocked.down ){
isJumping = false;
}
});

this.keys = this.input.keyboard.createCursorKeys();
}
function update(){

if(this.keys.left.isDown){
this.player.body.setVelocityX(-SPEED);
}else if(this.keys.right.isDown){
this.player.body.setVelocityX(SPEED);
} else {
this.player.body.setVelocityX(0);
}

if (!isJumping && this.keys.up.isDown){
this.player.body.setVelocityY(-SPEED * .75);
isJumping = true;
} 
}
new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<span style="font-family: Arial;font-size:16px;font-weight:bold;">
Use Arrow-Key to move the player</span><br>

我更新了我的示例以包含player.body.blocked.down，因此如果地砖用于墙壁，则可以防止墙壁跳跃。

For matter.js物理引擎:
对于物质，一切都有点复杂，注意像幽灵碰撞这样的事情，这些可能发生并且必须处理，就像在这个例子中一样。(由于这个原因，以及其他一些原因，arcade physics是首选的初始物理选择，至少对我来说)

document.body.style = 'margin:10px;';
var config = {
type: Phaser.AUTO,
width: 536 / 5.2,
height: 70,
zoom: 2.5,
physics: {
default: 'matter',
matter:{debug:true},
},
scene: {
create,
update
},
banner: false
}; 
var cursors;
var player;
var playerStateText;
const SPEED = 3;
var isJumping = true;
function create () {
let graphics  = this.make.graphics();
graphics.fillStyle(0x00ff00);
graphics.fillRect(8, 0, 8, 8);
graphics.fillStyle(0xff0000);
graphics.fillRect(16, 0, 8, 8);
graphics.fillStyle(0xff0000);
graphics.fillRect(24, 0, 8, 8);
graphics.generateTexture('tiles', 8*4, 8);
let level = [
[3,3,3,3,3,3,3,3,3,3,3,3,3],
[2,0,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,0,1,1,2],
[2,0,0,0,0,0,0,0,0,0,1,1,2],
[2,0,0,0,0,0,0,0,0,0,1,1,2],
[1,1,1,1,1,1,1,1,1,1,1,1,1],
];
let map = this.make.tilemap({ data: level, tileWidth: 8, tileHeight: 8 });
let tiles = map.addTilesetImage('tiles');
let layer = map.createLayer(0, tiles, 0, 0);
layer.setCollisionBetween(1,3);

this.matter.world.convertTilemapLayer(layer);

// Mark the tiles
layer.forEachTile(function (tile) {
if (tile.index === 1 ){
tile.physics.matterBody.body.label = 'floor';
}
});

this.matter.world.on('collisionstart', function (event) {
for (var i = 0; i < event.pairs.length; i++) {

// check if marked tiles and player are colliding
if(event.pairs[i].bodyA.label == 'floor'
&& event.pairs[i].bodyB.label == 'player') {
isJumping = false;
}
}
});

this.player = this.add.circle(16, 16, 6, 0xffffff)
.setDepth(2)
.setOrigin(.5);
// Mark the player
this.matter.add.gameObject(this.player, {label:'player'});
this.keys = this.input.keyboard.createCursorKeys();
}
function update(){

if(this.keys.left.isDown){
this.player.setVelocityX(-SPEED);
}else if(this.keys.right.isDown){
this.player.setVelocityX(SPEED);
} else {
this.player.setVelocityX(0);
}

if (!isJumping && this.keys.up.isDown){
this.player.setVelocityY(-SPEED * .75);
isJumping = true;
} 
}
new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<span style="font-family: Arial;font-size:16px;font-weight:bold;">
Use Arrow-Key to move the player</span><br>