PIXI js, sprite not showing, no errors

Question

I have the following code:

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

But my sprite is not showing up. It's just a blank canvas. I've checked the network tab in chrome, it is being loaded. Logging the stage, it has one child; the sprite, which has a correct baseUrl and everything. But it's just blank. And i've put this on my webserver.

I've hit a wall. Does anyone have any idea what this might be? I'm using the latest version of Pixi, 3.0.

Thanks!

Answer 1

Solved it, it was my bad. I didn't realize I had set the alpha of the stage to 0...

Answer 2

I don't know much but I think you have to load image to texture and then load that to sprite.

Answer 3

Or maybe it's PIXI.loaders.Loader, not PIXI.loader