Html
<html>
<head>
<script src="https://dir.by/example_lib/pixi_js/5.1.6/pixi.min.js"></script>
</head>
<body>
<div>
<canvas id="game-canvas" width="512" height="384"></canvas>
</div>
</body>
<script>
//Create a Pixi Application
let app = new PIXI.Application({
width: 256,
height: 256,
antialias: true,
transparent: false,
resolution: 1,
view:document.getElementById("game-canvas")
});
//load an image and run the `setup` function when it's done
PIXI.loader
.add("images/cat.png")
.load(setup);
//This `setup` function will run when the image has loaded
function setup() {
// Create the cat sprite
let cat = new PIXI.Sprite(PIXI.loader.resources["images/cat.png"].texture);
//Add the cat to the stage
app.stage.addChild(cat);
}
</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 ...