Html
<html>
<head>
</head>
<body>
<div>
<canvas id="game-canvas" width="512" height="384"></canvas>
</div>
</body>
<script src="https://dir.by/example_lib/pixi_js/5.1.6/pixi.min.js"></script>
<script>
//Create a Pixi Application
let app = new PIXI.Application({
width: 512,
height: 384,
antialias: true,
transparent: false,
resolution: 1,
view:document.getElementById("game-canvas")
});
PIXI.loader
.add("images/bg-far.png")
.add("images/bg-mid.png")
.load(setup);
//This `setup` function will run when the image has loaded
function setup()
{
var farTexture = PIXI.Texture.fromImage("images/bg-far.png");
far = new PIXI.extras.TilingSprite(farTexture, 512, 256);
far.position.x = 0;
far.position.y = 0;
far.tilePosition.x = 0;
far.tilePosition.y = 0;
app.stage.addChild(far);
var midTexture = PIXI.Texture.fromImage("images/bg-mid.png");
mid = new PIXI.extras.TilingSprite(midTexture, 512, 256);
mid.position.x = 0;
mid.position.y = 128;
mid.tilePosition.x = 0;
mid.tilePosition.y = 0;
app.stage.addChild(mid);
requestAnimationFrame(update);
}
function update()
{
far.tilePosition.x -= 0.128;
mid.tilePosition.x -= 0.64;
requestAnimationFrame(update);
}
</script>
</html>
Error: Access to image at 'file:///D:/my_example_pixijs/images/cat.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
The example works when files (1.html, cat.png) posted on web server.
The example does not work when the files (1.html, cat.png) are hosted on your computer.
Decision! To make files work on your computer (1.html, cat.png)
1) Close
Google Chrome
2) In the
Windows 10 on the desktop, right-click on the icon
Google Chrome
2) Open tab
"Shortcut"
3) In the
"Target" add text:
--allow-file-access-from-files
Run the file 1.html in the Google Chrome
It's working!
Your feedback ... Comments ...