javascript - 在 Phaser 3 中运行动画不起作用
问题描述
我们必须使用 Phaser 3 为大学项目创建一个游戏。我们选择了经典的跳跃和圆形游戏。
我选择了单个场景来达到 15 个级别。现在遇到了跑步动画由于某种原因在场景中不起作用的问题。但是,我不知道确切的原因,所以至少对我来说它不起作用是没有意义的。也许有人有想法或知道我做错了什么。
// Level 1
var player;
var stars;
var bombs;
var platforms;
var cursors;
var score = 0;
var gameOver = false;
var scoreText;
class GameScene extends Phaser.Scene {
constructor (config) {
super(config);
//To use the scene in the game
Phaser.Scene.call(this, { key: 'gamescene'});
}
preload () {
this.load.image('sky', 'img/sky.png');
this.load.image('ground', 'img/platform.png');
this.load.image('star', 'img/star.png');
this.load.image('bomb', 'img/bomb.png');
this.load.spritesheet('dude', 'img/dude.png', { frameWidth: 32, frameHeight: 48 });
}
create () {
// A simple background for our game
this.add.image(400, 300, 'sky');
// The platforms group contains the ground and the 2 ledges we can jump on
platforms = this.physics.add.staticGroup();
// Here we create the ground.
// Scale it to fit the width of the game (the original sprite is 400x32 in size)
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
// Now let's create some ledges
platforms.create(600, 400, 'ground');
platforms.create(50, 250, 'ground');
platforms.create(750, 220, 'ground');
// The player and its settings
player = this.physics.add.sprite(100, 450, 'dude');
// Player physics properties. Give the little guy a slight bounce.
player.setBounce(0.2);
player.setCollideWorldBounds(true);
// Our player animations, turning, walking left and walking right.
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
// Input Events
cursors = this.input.keyboard.createCursorKeys();
// Some stars to collect, 12 in total, evenly spaced 70 pixels apart along the x axis
stars = this.physics.add.group({
key: 'star',
repeat: 11,
setXY: { x: 12, y: 0, stepX: 70 }
});
stars.children.iterate(function (child) {
// Give each star a slightly different bounce
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});
bombs = this.physics.add.group();
// The score
scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
// Collide the player and the stars with the platforms
this.physics.add.collider(player, platforms);
this.physics.add.collider(stars, platforms);
this.physics.add.collider(bombs, platforms);
// Checks to see if the player overlaps with any of the stars, if he does call the collectStar function
this.physics.add.overlap(player, stars, collectStar, null, this);
this.physics.add.collider(player, bombs, hitBomb, null, this);
}
update() {
if (gameOver)
{
return;
}
if (cursors.left.isDown)
{
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
player.setVelocityX(160);
player.anims.play('right', true);
}
else
{
player.setVelocityX(0);
player.anims.play('turn');
}
if (cursors.up.isDown && player.body.touching.down)
{
player.setVelocityY(-330);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
解决方案
推荐阅读
- docker - 为什么我的 nextflow 脚本中的奇点拉取失败?
- uwp - 如何为 InkToolbarBallpointPenButton 自定义自定义调色板的悬停行为?
- php - Plupupload - 上传前提交表单
- python - Flask AppBuilder如何在模型插入或更新后插入或更新其他表
- javascript - 如何使用express在nodejs中将对象从服务器端传递到客户端
- python - 减去两个不同形状的熊猫数据框
- r - 如何在闪亮的应用程序中创建工作动态标签框
- c++ - 字体不能用 Emscripten 但用 g++ 加载
- python - 无法使用 keras-yolov3 模型批量运行预测
- mysql - summarise() 在 SQL 中等效(在 SQL 中创建汇总表)