User should change her own background image

[qubedozzer]

Hi,

 

I work at a small game - at this can user choose your own background image.

 

I have any problems to change the backgound image after the game start.

 

my dev site http://www.zwischenstation-mobile.de/spiel.html

 

I set a global var game and initalisize the game

var game;window.onload = function() {...game = new Phaser.Game(320,480,Phaser.CANVAS,"playground",{preload:onPreload, create:onCreate, update:onUpdate}, true);...}

after this, I´ll update the background with

(function($) {  $( window ).load(function() {	game.load.image("background", "/files/springende-punkt/content/games/gyro-sp/koala.jpg");	game.add.tileSprite(0, 0, 320, 480, 'background');  });})(jQuery);

as test but the goal is to load a local file with

<input name="picOneUpload" type="file" accept="image/*">

Have anybody a idea?!?

[rich]

The code that handles the image upload needs to pass the image reference into Phaser.Cache. Once in there you can treat it just like any other loaded texture in Phaser.

[qubedozzer]

I used this solution

 

http://www.html5gamedevs.com/topic/6053-dynamic-load-image/#entry36772

 

and works fine BUT the new sprite is loaded at top - I just try to set background image at bottom

	   var bgLayer = game.add.group();	   bgLayer.z = 0;	   var bg = game.add.tileSprite(0, 0, 1024, 768, 'background');	   bgLayer.add(bg);

or set my "player" on top

    // Create the player layer    var playerLayer = game.add.group();    playerLayer.z = 10;    // adding the player on stage    player = game.add.sprite(160,240,"player");

hmm.... don´t works

 

at this time, I have a second canvas behind the phaser canvas als "background"

[qubedozzer]

how can I set the background sprite at the "bottom" of the game?

[Carlos]

Try with this:

game.world.sendToBack(bgLayer);

[qubedozzer]

Tanks! I´ll try it...