使用Pixi.js加载Chrome精灵 [英] Chrome loading sprites with Pixi.js
本文介绍了使用Pixi.js加载Chrome精灵的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Chrome版本55.0.2883.95似乎无法使用Pixi.js加载精灵。然而，Firefox版本50.1.0似乎与以下脚本配合得很好。
代码：
<!doctype html>
<meta charset="utf-8">
<body>
<script src="pixi.js"></script>
<script>
var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);
PIXI.loader.add("cat.png").load(setup);
function setup() {
var cat = new PIXI.Sprite(PIXI.loader.resources["cat.png"].texture);
stage.addChild(cat);
renderer.render(stage);
}
</script>
</body>
文件夹：
Pixi.js
cat.png
index.html
Chrome错误：
Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///Users/konradwright/Desktop/SO12017/cat.png may not be loaded.
at Texture.upload (file:///Users/konradwright/Desktop/SO12017/pixi.js:1911:9)
at TextureManager.updateTexture (file:///Users/konradwright/Desktop/SO12017/pixi.js:16440:27)
at WebGLRenderer.bindTexture (file:///Users/konradwright/Desktop/SO12017/pixi.js:17108:33)
at SpriteRenderer.flush (file:///Users/konradwright/Desktop/SO12017/pixi.js:21351:35)
at WebGLRenderer.render (file:///Users/konradwright/Desktop/SO12017/pixi.js:16896:30)
at setup (file:///Users/konradwright/Desktop/SO12017/index.html:18:12)
at MiniSignal.dispatch (file:///Users/konradwright/Desktop/SO12017/pixi.js:7068:18)
at Loader._onComplete (file:///Users/konradwright/Desktop/SO12017/pixi.js:5414:25)
at file:///Users/konradwright/Desktop/SO12017/pixi.js:5451:24
at next (file:///Users/konradwright/Desktop/SO12017/pixi.js:6610:17)
推荐答案
一般来说，出于安全原因，您can't load local files asynchronously in Chrome。
相反，您需要运行本地服务器来提供文件。
我个人使用Node.js和http-server模块。它非常容易使用。只需安装Node.js，然后打开命令提示符。运行
npm install -g http-server
安装http-服务器模块。如果您有权限问题，请尝试
sudo npm install -g http-server
cd path/to/project/folder)。运行
http-server
，它将在http://127.0.0.1:8080也称为http://localhost:8080开始运行服务器。将其输入您的浏览器，您就可以开始了。
市面上也有许多其他服务器解决方案，但这一解决方案几乎无需任何工作即可运行。
这篇关于使用Pixi.js加载Chrome精灵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
