How to change the keys of loaded images in Phaser?

[weratius]

Hello!

 

there is a boot.js file:

game.load.image('weapon_2_2', 'img/profile/res/' + playerInfoObject.w4.id + '.png');game.load.image('weapon_2_3', 'img/profile/res/' + playerInfoObject.w5.id + '.png');

I need to change the keys of already loaded images
 

I do this like that:

var loader = new Phaser.Loader(game);var myObject = this; //(my own parent object)loader.image('weapon_2_3', 'img/profile/res/' + playerInfoObject.w4.id + '.png', true);loader.image('weapon_2_2', 'img/profile/res/' + playerInfoObject.w5.id + '.png', true);loader.onLoadComplete.add(myObject.refresh);// Why can't I just load image without any callback (onLoadComplete)?//If I delete this callback method the loader won't work at allloader.start();

and here is the problem: 

 

I don't need a callback method (refresh method is empty)

 

I have problems smth like that (On image)

 

 

What should I do? Thank you =)

 

 

 

 

 

[drhayes]

Can't tell for sure, but I bet the image hasn't finished loading yet. That means there's nothing there, that means the drawImage call fails.

 

If you really and truly need the same image under different keys try adding a cache-breaker as a query param to the image name, e.g. "img/gun.png?23480293840" where that's from a call to Math.random().

[weratius]

Can't tell for sure, but I bet the image hasn't finished loading yet. That means there's nothing there, that means the drawImage call fails.

 

If you really and truly need the same image under different keys try adding a cache-breaker as a query param to the image name, e.g. "img/gun.png?23480293840" where that's from a call to Math.random().

I can't do that =(

Because I need all keys of images to be constant

 

I am creating a profile of a user. There are a lot of items it in and I just need to swap them. The objects and keys of items are swapped but I also need to swap the keys of images

 

Thank you

[drhayes]

The keys would be the same, but the paths would be different. Instead of "this.game.load.image('key', 'path/to/image.png');" you'd have "this.game.load.image('key', 'path/to/image.png?' + Math.random());".

 

But I'm not sure I'm giving you a solution to the problem you're describing at this point. ( =

[InsaneHero]

If I remember correctly the keys are used to access the raw ImageData in a Pixi database which is way way down deep in the guts of the system.

To change the keys you need to get all the way down to where the images are stored.  I can't help you more with that because I don't really know how Pixi works to store textures... I would guess they have a dictionary of keys and ImageData records... but it could be doing some clever stuff with hash table lookups to speed access, in which case changing the key for an existing resource is likely to be extraordinarily hard.

 

You also asked (in comments):

 

// Why can't I just load image without any callback (onLoadComplete)?
//If I delete this callback method the loader won't work at all

 

And the answer to that is because your browser won't let you.  Calling the load image function doesn't actually "load the image"... it adds it to a queue of things that your browser will (asynchronously) access from various places on your hard-drive or over the network from various servers and folders.  You have to have a callback to know when the browser has finished getting all those bits from where-ever they are stored.  As you can imagine that sometimes takes quite a long time (in computer terms) so they made it all asynchronous so that you can do something else while you're waiting (even if it's just showing a loader bar to the user).

 

Without the callback, the loader is actually still working, but you don't know when it's finished so none of the rest of your code knows whether the images are ready or not.

[weratius]

The keys would be the same, but the paths would be different. Instead of "this.game.load.image('key', 'path/to/image.png');" you'd have "this.game.load.image('key', 'path/to/image.png?' + Math.random());".

 

But I'm not sure I'm giving you a solution to the problem you're describing at this point. ( =

That didn't help me, at all =(

But that's very interesting =)

[weratius]

If I remember correctly the keys are used to access the raw ImageData in a Pixi database which is way way down deep in the guts of the system.

To change the keys you need to get all the way down to where the images are stored.  I can't help you more with that because I don't really know how Pixi works to store textures... I would guess they have a dictionary of keys and ImageData records... but it could be doing some clever stuff with hash table lookups to speed access, in which case changing the key for an existing resource is likely to be extraordinarily hard.

 

You also asked (in comments):

 

// Why can't I just load image without any callback (onLoadComplete)?

//If I delete this callback method the loader won't work at all

 

And the answer to that is because your browser won't let you.  Calling the load image function doesn't actually "load the image"... it adds it to a queue of things that your browser will (asynchronously) access from various places on your hard-drive or over the network from various servers and folders.  You have to have a callback to know when the browser has finished getting all those bits from where-ever they are stored.  As you can imagine that sometimes takes quite a long time (in computer terms) so they made it all asynchronous so that you can do something else while you're waiting (even if it's just showing a loader bar to the user).

 

Without the callback, the loader is actually still working, but you don't know when it's finished so none of the rest of your code knows whether the images are ready or not.

Thank you very much for such an interesting information =)

 

But is that possible to change them? 

 

Is that so that developers of Phaser Framework didn't want to make an opportunity of changing images?

[InsaneHero]

"Is that so that developers of Phaser Framework didn't want to make an opportunity of changing images?"

As I mentioned, I'm not entirely familiar with the whole system, but it's important to remember that you're dealing with two separate systems here: the Phaser framework is sitting on top of the Pixi drawing framework.  Because of this certain unusual types of action require good knowledge of both systems.

What you are trying to do (access a previously loaded image with a new key) is very unusual, and is almost certainly not something that the designers of either of these two systems intended you to do.

 

Can I suggest that you'd probably get the result you want without trying to change keys?  There are many ways to achieve your goal, but the most obvious one is to make a Dictionary of your own where each 'key' which an image was loaded with, is referenced by another key which you can rename as you please.

 

I haven't tested this, so I'm not entirely sure that JS will let you use strings as array indices like this, but the language is ripe for abuse so it'll probably be ok:

// creatingmyDictionary = [];// addingmyDictionary["whatever_I_want_to_call_it_now"] = originalImageKey;// accessingvar imageKey = myDictionary["whatever_I_want_to_call_it_now"];// now get the image from Phaser using imageKey which is the originalImageKey...

Doing it this way, you can have several new keys with your own names, which all access the same originalImageKey.

[weratius]

"Is that so that developers of Phaser Framework didn't want to make an opportunity of changing images?"

As I mentioned, I'm not entirely familiar with the whole system, but it's important to remember that you're dealing with two separate systems here: the Phaser framework is sitting on top of the Pixi drawing framework.  Because of this certain unusual types of action require good knowledge of both systems.

What you are trying to do (access a previously loaded image with a new key) is very unusual, and is almost certainly not something that the designers of either of these two systems intended you to do.

 

Can I suggest that you'd probably get the result you want without trying to change keys?  There are many ways to achieve your goal, but the most obvious one is to make a Dictionary of your own where each 'key' which an image was loaded with, is referenced by another key which you can rename as you please.

 

I haven't tested this, so I'm not entirely sure that JS will let you use strings as array indices like this, but the language is ripe for abuse so it'll probably be ok:

// creatingmyDictionary = [];// addingmyDictionary["whatever_I_want_to_call_it_now"] = originalImageKey;// accessingvar imageKey = myDictionary["whatever_I_want_to_call_it_now"];// now get the image from Phaser using imageKey which is the originalImageKey...

Doing it this way, you can have several new keys with your own names, which all access the same originalImageKey.

Thank you for your answer!

But I didn't understand how I should be able to use it 

 

For example: I have a boot file that preuploads everything (images) and there is the key of image set to each one

 

this way, i.e:

game.load.image('item16', 'img/profile/res/16.png');game.load.image('item17', 'img/profile/res/17.png');game.load.image('item18', 'img/profile/res/18.png');game.load.image('item19', 'img/profile/res/19.png');

how can I do that?

 

Thank you=)