2017-01-20 5 views
0

Pixi.jsを使用してChromeバージョン55.0.2883.95をスプライトで読み込めないようですしかし、Firefoxのバージョン50.1.0は、次のスクリプトで正常に動作しているようです。Pixi.jsを使用したChrome搭載のスプライト

コード:

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

クロームエラー:一般的に

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) 

答えて

1

、セキュリティ上の理由から、あなたcan't load local files asynchronously in Chrome

代わりに、ファイルを提供するためにローカルサーバーを実行する必要があります。

私は個人的にNode.jshttp-serverモジュールを使用します。それは非常に使いやすいです。 Node.jsをインストールしてから、コマンドプロンプトを開きます。 HTTPサーバーモジュールをインストールするには

npm install -g http-server 

をインストールしてください。あなたがアクセス許可の問題がある場合は、その後

sudo npm install -g http-server 

を試してみてください、あなたはあなたのウェブサイトを提供したいフォルダ(cd path/to/project/folder)にアクセスしてください。

http-server 

を実行し、それがhttp://localhost:8080 a.k.a http://127.0.0.1:8080でサーバを実行して開始されます。あなたのブラウザにそれを入力し、あなたは行くのが良いでしょう。

他にも多数のサーバーソリューションがありますが、これにはほとんど手間がかかりません。

+0

あなたのマイクをありがとうございました。あなたの指示は良かったし、私はそれについての写真のチュートリアルも作った。しかし、私は悩んでしまった。命令は、質問されたタスクを完了することができませんでした。私のためにそれを見直すことができますか? http://imgur.com/a/xIntM –

+0

@KonradWright私には典型的なパーミッションエラーのようです。 'sudo npm install -g http-server'を試してみてください。 –

+0

マイクありがとう!変更を反映するためにあなたの答えを更新できますか? –

0

"Webサーバーfor Chrome"アプリが動作するシンプルなソリューションです。協力し、URLに移動したいフォルダを選択してくださいあなたはそれが単純なサーバーであり、あなたの解決策になるかもしれませんが、簡単な作業のためのPHPを使用することはできませんが、(あなたが選んだ127.0.0.1:portのように)、

をそれを起動します。

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

関連する問題