How to build a Parallax Scroller with Pixi.js

Question

I'm having a problem with the pixi.js "Building a Parallax Scroller with Pixi.js: Part 1" tutorial.

<!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>

I can't get my images to render.

Tutorial Link: http://www.yeahbutisitflash.com/ Under tutorials HTML5 Parallax — TritonEng, Dec 20 '19 at 23:55
Are you having a problem with a Sublime Text package related to this? If not, I don't think this is a Sublime Text question; as a text editor, it has no bearing on how the browser interprets the code that you write with it. — OdatNurd, Dec 20 '19 at 23:55
I thought it was important to relay as much info as possible. — TritonEng, Dec 21 '19 at 00:00
It's important to relay the information that is directly related to the problem. If Sublime or Chrome is _causing_ the error then it's directly related. If it happens to be what you typed the file in, or serving it, then no, it's not related to the problem. and tagging it only confuses people. — the Tin Man, Dec 21 '19 at 22:25
Not that the align attribute has been obsolete for many years and shouldn't be used — Rob, Dec 22 '19 at 01:41

score 0 · Answer 1 · answered Dec 30 '19 at 04:18

When constructing files in Microsoft, it is important to go back into Properties-->Security and make sure your permission settings match (for each file). Additionally, in order to avoid a CORS error it is also important to use Administration settings; Specifically settings in the IIS or Internet Information Services. Here, you will need to examine and adjust your permission settings.

How to build a Parallax Scroller with Pixi.js

1 Answers1