Question

我有以下代码：

var viewWidth, viewHeight, renderer, stage, loader;
var rendererOptions = {
    transparent: true
};

function init () {
    viewWidth = window.innerWidth;
    viewHeight = window.innerHeight;
    renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight, rendererOptions);
    renderer.view.className = "rendererView";

    // add to DOM
    document.body.appendChild(renderer.view);

    // create stage
    stage = new PIXI.Container();
    stage.width = viewWidth;
    stage.height = viewHeight;
    stage.alpha = 0;

    // load images
    loader = PIXI.loader;

    loader.add("images/bg.jpg");
    loader.once("complete", onAssetsLoaded);
    loader.load();
}

function onAssetsLoaded () {
    console.log("assets loaded");

    createElements();
    update();
}

function createElements () {
    console.log("create elements");
    var bg = new PIXI.Sprite.fromImage("images/bg.jpg");

    bg.position.x = 200;
    bg.position.y = 200;

    stage.addChild(bg);
}

function update () {
    render();
    requestAnimationFrame(update);
}

function render () {
    renderer.render(stage);
}

但我的精灵没有露面。这只是一块空白的画布。我已经检查了chrome中的网络选项卡，正在加载它。登录舞台，它有一个孩子;精灵，它有一个正确的baseUrl和一切。但它只是空白。我把它放在我的网络服务器上。

我撞墙了。有谁知道这可能是什么？我正在使用最新版本的Pixi，3.0。

谢谢！

Answer 1

解决了它，这是我的坏事。我没有意识到我已经将舞台的alpha设置为0 ......

Answer 2

我不太了解，但我认为你必须将图像加载到纹理，然后将其加载到精灵。

Answer 3

或者它的PIXI.loaders.Loader，而不是PIXI.loader

PIXI js，精灵现在显示，没有错误

3 个答案: