Pixi.js精灵无法加载

Pixi.js sprite not loading

本文关键字：加载 精灵 js Pixi      更新时间：2023-09-26
    <!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的例子，加载兔子)，由于某种原因，我似乎无法让精灵加载…谁能帮我看看代码?当我放入正确的链接时(舞台渲染变成黑色)。当我将错误的链接添加到精灵时，舞台呈现得很好，但却没有精灵。

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");
相关文章：