Question

我发现loadTexture()方法存在一些问题，用于更改精灵的纹理。我发现的其中一个问题是加载新纹理后播放的spritesheets似乎跳过了，如下所示：http://cl.ly/text/123S1n2r1m35

（以下是该示例的代码：）

// Constants
var GAME_WIDTH = 800;
var GAME_HEIGHT = 600;

var TEXT_X_POS = 260;
var TEXT_Y_POS = 100;

var ALL_FRAMES = null;
var FRAME_RATE = 15;
var LOOP = true;

var SPRITE_X_POS = 300;
var SPRITE_Y_POS = 300;


// New instance of Phaser.Game
var game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, "game", { preload: preload, create: create, update: update });

var sprite;

function preload () {
    game.load.atlas("robot", "sprites/running_bot.png", "sprites/running_bot.json");
    game.load.atlas("sea_creature", "sprites/seacreature.png", "sprites/seacreature.json");
}

function create () {
    game.add.text(TEXT_X_POS, TEXT_Y_POS, "Click to change texture", {fontSize: "16px", fill: "white"});
    sprite = game.add.sprite(SPRITE_X_POS, SPRITE_Y_POS, "robot");
    sprite.animations.add("robot", ALL_FRAMES, FRAME_RATE, LOOP);
    sprite.animations.add("sea_creature", ALL_FRAMES, FRAME_RATE, LOOP);
    sprite.animations.play("robot");
}

function update () {
    game.input.onDown.add(changeTexture, sprite);
}

function changeTexture () {
    sprite.loadTexture("sea_creature");
    sprite.animations.play("sea_creature");
}

你会看到海洋生物的动画似乎跳过了，我对自己的精灵有同样的问题，所以这个问题不是特定于那个特定的纹理。

我发现的另一个问题是，当一个新的纹理加载到精灵上时，原始spritesheet的大小会保留在该精灵上。例如：http://cl.ly/3F0C2k1G1G2z

（以下是此示例的代码：）

// Constants
var GAME_WIDTH = 800;
var GAME_HEIGHT = 600;

var CHANGE_TEXTURE_TEXT_X_POS = 260;
var CHANGE_TEXTURE_TEXT_Y_POS = 100;

var ARROW_KEYS_TEXT_X_POS = 260;
var ARROW_KEYS_TEXT_Y_POS = 170;

var SPRITE_X_POS = 300;
var SPRITE_Y_POS = 300;

var WALL_X_POS = 600;
var WALL_Y_POS = 225;

var STOPPED = 0;
var SPRITE_RIGHT_VELOCITY = 150;
var SPRITE_LEFT_VELOCITY = -150;
var SPRITE_UP_VELOCITY = -150;
var SPRITE_DOWN_VELOCITY = 150;


// New instance of Phaser.Game
var game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, "game", { preload: preload, create: create, update: update });

var sprite;
var wall;
var cursorKeys;

function preload () {
    game.load.image("master", "sprites/master.png");
    game.load.image("melon", "sprites/melon.png");
    game.load.image("rectangle", "sprites/Rectangle.png");
}

function create () {
    game.add.text(CHANGE_TEXTURE_TEXT_X_POS, CHANGE_TEXTURE_TEXT_Y_POS, "Click to change texture", {fontSize: "16px", fill: "white"});
    game.add.text(ARROW_KEYS_TEXT_X_POS, ARROW_KEYS_TEXT_Y_POS, "Use arrow keys to move", {fontSize: "16px", fill: "white"});
    sprite = game.add.sprite(SPRITE_X_POS, SPRITE_Y_POS, "master");
    game.physics.arcade.enable(sprite);

    wall = game.add.sprite(WALL_X_POS, WALL_Y_POS, "rectangle");
    game.physics.arcade.enable(wall);
    wall.body.immovable = true;

    cursorKeys = game.input.keyboard.createCursorKeys();
}

function update () {
    game.physics.arcade.collide(sprite, wall);

    game.input.onDown.add(changeTexture, sprite);

    sprite.body.velocity.x = STOPPED;
    sprite.body.velocity.y = STOPPED;

    if (cursorKeys.right.isDown) {
        sprite.body.velocity.x = SPRITE_RIGHT_VELOCITY;
    }
    if (cursorKeys.left.isDown) {
        sprite.body.velocity.x = SPRITE_LEFT_VELOCITY;
    }
    if (cursorKeys.up.isDown) {
        sprite.body.velocity.y = SPRITE_UP_VELOCITY;
    }
    if (cursorKeys.down.isDown) {
        sprite.body.velocity.y = SPRITE_DOWN_VELOCITY;
    }
}

function changeTexture () {
    sprite.loadTexture("melon");
}

你会在这里看到第一个纹理与墙壁碰撞很好，但是当新的较小的纹理被加载到精灵上时，它的原始尺寸仍然存在。这使得游戏看起来像马车，并且精灵实际上并没有与墙碰撞。同样，这个问题不是特定于这个例子，因为我对自己的精灵有同样的问题。

我真的需要解决这个loadTexture()方法的问题，因为它们让我对自己的项目感到非常悲痛。

Answer 1

关于精灵大小的问题：

所有需要做的就是在加载新纹理后将精灵的大小设置为新纹理，如下所示：

function changeTexture () {
    sprite.loadTexture("melon");
    sprite.body.setSize(newTexture.width, newTexture.height);
}

关于跳过动画的问题：

首先必须做的是准确指定要使用的帧，而不是仅将frames参数设置为null。其次，为新纹理添加新动画的特定行必须放在加载新纹理的方法中，如下所示：

function changeTexture () {
    sprite.loadTexture("sea_creature");
    sprite.animations.add("sea_creature", specificFramesToUse, frameRate, whetherToLoop, whetherToUseANumericIndex);
    sprite.animations.play("sea_creature");
}

Phaser框架中`loadTexture（）`方法的问题

1 个答案: