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>

这是我的代码（来自pixijs的例子，Loaiding the bunny），由于某些原因我似乎无法加载精灵......有人可以看看代码并提供帮助吗？当我放入正确的链接时（舞台渲染变黑）。当我输入精灵的错误链接时，舞台渲染得很好，但没有精灵。

Answer 1

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

使用上面的代码，将为要加载的Sprite纹理创建跨域请求。通常不允许这样做（如Dropbox案例中那样）。

要查看精灵，您必须将文件复制到本地Web服务器或允许其他服务器上的跨域请求（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精灵没有加载

1 个答案: