Pixi.js精灵未加载

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? 这是我的代码（来自pixijs的示例，“兔兔”），由于某种原因，我似乎无法加载该图片。有人可以看一下代码并提供帮助吗？ 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. 当我将错误的链接放置到子画面时，舞台会很好显示，但没有子画面。

Answer 1

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. 使用上面的代码，创建了一个跨域请求以加载Sprite纹理。 This is usually not allowed (as in Dropbox case). 通常不允许这样做（与Dropbox一样）。

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 ) 为了查看精灵，您必须将文件复制到本地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 个解决方案

解决方案1
1 已采纳 2014-04-04 08:03:58

Pixi.js精灵未加载

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-04-04 08:03:58

解决方案1
1 已采纳 2014-04-04 08:03:58