PixiJS Sprite 未加载

Question

我已经在这里看到这个问题被问过很多次了，但是没有对这些帖子的回复帮助我解决问题：我正在尝试使用 PixiJS 引擎加载一个 Sprite，但它没有显示，尽管它被识别并且可使用 console.log() 记录。我做错了什么？

我已经按照 URL 中的教程进行操作：

https://github.com/kittykatattack/learningPixi#introduction

我的代码如下：

index.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TITLE HERE</title>

        <link rel='stylesheet' type='text/css' href='style/style.css'>'
        <script src="js/pixi.min.js"></script>
        <script src="js/init.js"></script>
    </head>

    <body>
        <script>
            init();
        </script>
    </body>
</html>

init.js

var sprites = {};
var stage = new PIXI.Container();
var renderer;

function init(){
    createCanvas(288, 288, true);
}

function createCanvas(width, height, autoResize){
    //Create the renderer
    renderer = PIXI.autoDetectRenderer(width, height);
    renderer.autoResize = autoResize;
    renderer.view.setAttribute("id", "canvas");

    //Add the canvas to the HTML document
    document.body.appendChild(renderer.view);
    newSprite("assets/tilesheet.png", "tilesheet");
}

function newSprite(src, name){
    var texture = PIXI.Texture.fromImage(src);
    var sprite = new PIXI.Sprite(texture);

    sprites[name] = sprite;
    stage.addChild(sprites["tilesheet"]);
    renderer.render(stage);
}

以防万一

style.css

body{
    background-color: #a9a9a9;
}

#canvas{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: auto;
    display: block;
    position: absolute;
    box-shadow: 0.5em 0.5em 0 0 #777;
}

/* <TABLET> */
@media (min-width: 61.5rem){
    #canvas{
        width: 25em;
        height: 25em;
        box-shadow: 1em 1em 0 0 #777;
    }
}

/* <DESKTOP/TV> */
@media (min-width: 80.0rem){

}

这是我的文件夹布局：

Project
  |-assets
  | \-tilesheet.png
  |-js
  | |-init.js
  | \-pixi.min.js
  |-style
  | \-style.css
  |-index.html

希望有人能帮帮我。

更新

代码现在可以正常工作了。根据 themoonrat 的反馈（已接受的答案），代码现在如下所示：

var sprites = {};
var masks = {};
var stageWidth = 288;
var stageHeight = 288;
var spriteWidth = 32;
var spriteHeight = 32;
var gridWidth = stageWidth/spriteWidth;
var gridHeight = stageHeight/spriteHeight;

var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(stageWidth, stageHeight);

function init(){
    renderer.view.setAttribute("id", "canvas");
    document.body.appendChild(renderer.view);

    for(var x = 0; x < gridWidth; x++){
        for(var y = 0; y < gridHeight; y++){
            newSprite('assets/tilesheet.png', 'tilesheet'+(x+y), x*spriteWidth, y*spriteHeight);
        }
    }

    sprites['tilesheet2'].position.x = 32;
    sprites['tilesheet2'].position.y = -32;

    console.log(sprites);

    // start updating
    update();
}

function newSprite(src, name, x, y){
    var texture = PIXI.Texture.fromImage(src);
    var sprite = new PIXI.Sprite(texture);

    sprite.anchor.x = 0;
    sprite.anchor.y = 0;

    sprite.position.x = x;
    sprite.position.y = y;

    sprites[name] = sprite;
    stage.addChild(sprite);
}

function update() {
    requestAnimationFrame(update);

    renderer.render(stage);
}

主要区别在于包含 update() 函数。正如 themoonrat 建议的那样，requestAnimationFrame() 位于

Answer 1

您只渲染一次屏幕，您使用 pixi 的方式是让 pixi 请求加载图像，而不是提供预加载图像。

所以在您渲染的那一刻，就在创建精灵之后，加载图像的请求才刚刚发生。 Pixi 无法渲染带有未完成加载的纹理的精灵。

如果您将渲染部分放在一个名为 requestAnimationFrame 的内容中，那么图像将在加载后立即渲染。

PixiJS Sprite 未加载

PixiJS Sprite not loading

javascript

pixi.js

更新