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.
Пример работает когда файлы (1.html, cat.png) размещены на web server.
Пример не работает когда файлы (1.html, cat.png) размещены у вас на компьютере.
Решение! Чтобы работали у вас на компьютере файлы (1.html, cat.png)
1) Закрываем
Google Chrome
2) в
Windows 10 на рабочем столе нажимаем правой клавишей мыши на иконке
Google Chrome
2) Открыть вкладку
"Shortcut"
3) в
"Target" добавить текст:
--allow-file-access-from-files
Запускаем файл 1.html в Google Chrome
Работает!
Афишу
Ваши Отзывы ... комментарии ...