Pixi.js sprite not loading

Question

    <!DOCTYPE HTML>
<html>
<head>
    <title>Test</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
            overflow: hidden;
        }
    </style>
    <script src="http://www.goodboydigital.com/pixijs/examples/1/pixi.js"></script>

</head>
<body>
    <script>

    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0x66FF99);

    // create a renderer instance
    var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);

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

    requestAnimFrame( animate );

    // create a texture from an image path
    var texture = PIXI.Texture.fromImage("https://dl.dropboxusercontent.com/s/en13743nxusaozy/player.PNG?dl=1&token_hash=AAFVxLm8fEjk3xxPad-kAZ98LJqLoZpdFy9fQtGrIfXL-A");
    // create a new Sprite using the texture
    var player = new PIXI.Sprite(texture);

    // center the sprites anchor point
    player.anchor.x = 0.5;
    player.anchor.y = 0.5;

    // move the sprite t the center of the screen
    player.position.x = 200;
    player.position.y = 150;
        stage.addChild(player);


    function animate() {

        requestAnimFrame( animate );

        //rotate player
        player.rotation += 0.1;

        // render the stage   
        renderer.render(stage);
    }

    </script>

    </body>
</html>

This is my code (from the pixijs example, Loaiding the bunny), for some reason I can't seem to get the sprite to load... Can someone take a look at the code and help? When I put in the right link (the stage rendering turns black). When I put in the wrong link to the sprite, then the stage renders fine but there is no sprite.

Björn Holdt Björn Holdt · Accepted Answer · 2014-04-04T08:03:58

var texture = PIXI.Texture.fromImage("https://dl.dropboxusercontent.com/s....");

With the above code, a cross domain request is created for the Sprite texture to load. This is usually not allowed (as in Dropbox case).

In order to see the sprite you will have to copy the file to the local web server or allow Cross domain requests on the other server (https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS)

//local image instead of cross domain
var texture = PIXI.Texture.fromImage("img/player.PNG");

Pixi.js sprite not loading

1 Answers