Question

我已经在这里多次看过这个问题，但没有回复这些帖子帮助我：我试图使用PixiJS引擎加载Sprite，但它没有显示尽管使用 console.log（）进行识别和记录，但仍然可以使用。我做错了什么？

我已按照此网址中的教程进行操作：

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没有加载

更新

1 个答案: