2017-01-20 10 views
0

Chrome 버전 55.0.2883.95가 Pixi.js를 사용하여 스프라이트에로드 할 수없는 것 같습니다. 그러나 파이어 폭스 버전 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-server 모듈을 설치하려면

npm install -g http-server 

을 설치하십시오. 사용 권한 문제가있는 경우, 당신은 당신의 웹 사이트 (cd path/to/project/folder을)를 제공하려는 폴더로 이동, 그 후

sudo npm install -g http-server 

을 시도합니다.

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

마이크 감사합니다! 변경 사항을 반영하여 답변을 업데이트 할 수 있습니까? –