Ad
Why Isn't Phaser.js Able To Load An Image From A Third-party Domain?
I'm learning phaser.js
, and I cant even load the image.
Here is the code:
// Need state. All game logic goes in state
var GameState = {
// Load all your images. Thats what the preload function is
preload : function(){
//Load Image
this.load.image( 'background', 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSMxwX5oTml7qBFmUD3vEIzEhqLQfakBVjmkQezA8HKs4KnT-2Q' );
},
//Execute after everything is loaded
create: function(){
//From top left param = (x,y)
this.background = this.game.add.sprite(0,0, 'background');
},
update: function(){
}
}
// New Game instance, 3rd parameter WEBGL or CANVAS automatic GL
var game = new Phaser.Game(640,360,Phaser.automatic);
// add state to game
// First just a name, second par is the actual Object
game.state.add('GameState', GameState);
game.state.start('GameState');
And here is the image that clearly shows that it doesen't load:
Ad
Answer
Your image isn't showing up because Phaser can't make use of cross-origin images, so all images need to be loaded from the same origin. In practice, this means that instead of loading the image directly from gstatic.com, you need to first download the image to your computer, then move it to your Phaser project folder and load it using a relative path.
For more information, please see the Wikipedia article on the Same-Origin Policy.
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad