Fatal编程技术网

Javascript PixiJS精灵未加载

javascript

Javascript PixiJS精灵未加载,javascript,pixi.js,Javascript,Pixi.js,我已经看到这个问题在这里被问过很多次了，但是这些帖子的回复都没有帮到我：我正在尝试使用PixiJS引擎加载一个精灵，但是它没有显示出来，尽管它可以通过console.log（）识别和记录。我做错了什么 我遵循了此URL中的教程： 我的代码如下： index.html <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="vie

我已经看到这个问题在这里被问过很多次了，但是这些帖子的回复都没有帮到我：我正在尝试使用PixiJS引擎加载一个精灵，但是它没有显示出来，尽管它可以通过console.log（）识别和记录。我做错了什么

我遵循了此URL中的教程：

我的代码如下：

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>
以防万一

style.css

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);
}

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){

}
我希望有人能帮助我

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

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);
}

var sprites={}；
变量掩码={}；
var阶段宽度=288；
var阶段权重=288；
变量spriteWidth=32；
变量spriteHeight=32；
var gridWidth=分段宽度/分段宽度；
var gridHeight=舞台高度/舞台高度；
var stage=new PIXI.Container（）；
var renderer=PIXI.autodetectedrenderer（stageWidth，stageHeight）；
函数init（）{
renderer.view.setAttribute（“id”、“canvas”）；
document.body.appendChild（renderer.view）；
对于（var x=0；x
主要区别在于包含了update（）函数。其中，正如Moonrat所建议的那样，requestAnimationFrame（）位于

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

因此，在创建精灵之后渲染的点，加载图像的请求才刚刚发生。Pixi无法渲染具有未完成加载的纹理的精灵

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

谢谢您的评论。我已经设法让它工作了。我将在我原来的帖子中发布新代码。 
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);
}