Question

这是我第一次打开游戏并玩一切都很好

经过几次移动后，玩家获得了新的回合，一些纸牌飞来飞去（玩家获得了资源，进行交易等），然后当我点击页面刷新以开始新游戏时，某些纸牌变得更小了：

请注意，这仅发生在卡片上。所有卡片的共同点是它们可以动画。当玩家收到新资源时，卡片会进行动画处理。因此，也许我认为即使播放器刷新页面，某些旧代码仍在后台继续运行，所以我确保当播放器刷新时所有旧动画都停止了。这不能解决问题。

另一个有趣的事情是，左下角的卡和银行中的卡是完全不同的精灵。它们除了纹理外没有其他共同点（银行卡甚至没有动画）。因此，我猜测纹理包未专门针对此图中显示的2种类型的卡加载。请注意，每个游戏中不同的纸牌都较小，但是一旦特定纹理变小，则使用该纹理的子画面的“全部”就会变小。

我该如何解决？

我的加载功能如下

export function loadImages() {
        PIXI.loader
            .add("tile_lumber", "../images/tile_lumber.svg")
            .add("tile_brick", "../images/tile_brick.svg")
            .add("tile_wool", "../images/tile_wool.svg")
            .add("tile_grain", "../images/tile_grain.svg")
            .add("tile_ore", "../images/tile_ore.svg")
            .add("tile_desert", "../images/tile_desert.svg")
            .
            .
            .
            .on("progress", loadProgressHandler)
            .load(GameUICore.setup);

}

export function setup() {
        assetsLoaded = true
        createContainers()
        GameUICards.setCardProps() //The cards on left bottom created here
        GameUIActions.createActions()
        GameUIPlayers.createPlayers() //The cards in bank created here
        createTimer()
        createKeyboardActions()

        app.ticker.add(function (delta) {
            animateObjects()
        });
    }

function animateObjects() {
        for (let view of animatingViews) {
            view.animate()
        }
        for (let line of animatingLines) {
            line.animate()
        }
        for (let text of animatingTexts) {
            text.animate()
        }
        removeObjectsWhoseAnimationFinished()
    }

您可以尝试重现该问题：http://katan.io/

请注意，它会在Chrome＆Safari中发生，而在Firefox中不会发生

Pixijs刷新页面会使纹理变形

0 个答案: