时间戳

首页 > 解决方案 > 如何使用 Pixi.js 构建视差滚动器

javascript - 如何使用 Pixi.js 构建视差滚动器

问题描述

我在使用 pixi.js“使用 Pixi.js构建视差滚动器：第 1 部分”教程时遇到问题。

<!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <title>Parallax Scrolling Demo</title>
    <style> 
        body { background-color: #000000; }
        canvas { background-color: #222222;}
        </style>
 </head>
 <body onload="init();">
    <div align= "center">
        <canvas id= "game-canvas" width= "512" height="384"></canvas>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.0.0/pixi.min.js" ></script>
    <script> 
        function init() {
            stage = new PIXI.Container();
            renderer = PIXI.autoDetectRenderer(512,384, {view:document.getElementById("game-canvas")});

            var farTexture = PIXI.Texture.fromImage("resources/bg-far.png");
            far = new PIXI.Sprite(farTexture);
            far.position.x = 0;
            far.position.y = 0;
            stage.addChild(far)S

            renderer.render(stage);
        }
        </script>

 </body>
 </html>

我无法渲染我的图像。

标签： javascripthtmlpixi.js

解决方案

在 Microsoft 中构建文件时，返回到 Properties-->Security 并确保您的权限设置匹配（对于每个文件）非常重要。此外，为了避免 CORS 错误，使用管理设置也很重要；特别是 IIS 或 Internet 信息服务中的设置。在这里，您需要检查和调整您的权限设置。

推荐阅读