Using image swap in Phaser

Discuss issues pertaining to the various game/web runtimes of Creature here.
ktorgard
Posts: 4
Joined: Wed Mar 14, 2018 3:40 pm

Using image swap in Phaser

Post by ktorgard » Wed Mar 14, 2018 4:15 pm

We're having some problems using image swapping in Phaser. We have two identical animated characters in our game and when one of them plays an animation that involves an imageswap, the other one changes as well even if it's playing a different animation. (in our case we hide a body part by setting it to a transparent image, and the same bodypart disappears from the other character)

It seems to happen because they're using the same mesh. If we import the mesh into the cache twice, but with different keynames, it doesn't happen. It doesn't fix the issue, however, as it also happens if we create the same character in a different game state.

Basically, the second time we create a new Creature object in Phaser using the same mesh, the new one is missing parts. I'm guessing the animation that does the image swapping tries to swap them out on all the objects using the same mesh instead of just the one playing the animation.

Hope it makes sense! :)

chong
Posts: 1178
Joined: Thu Feb 19, 2015 2:21 am

Re: Using image swap in Phaser

Post by chong » Wed Mar 14, 2018 4:36 pm

Hello,

So can you try:

1) For each character, give it it's own Creature object and its own CreatureManager object and of course its own CreatureDraw object. So every character has its own unique Creature, CreatureManager and CreatureDraw objects. Each Creature character should not share meshes or any of those objects with other characters.

Try running that, what do you get?

Thanks

ktorgard
Posts: 4
Joined: Wed Mar 14, 2018 3:40 pm

Re: Using image swap in Phaser

Post by ktorgard » Thu Mar 15, 2018 12:52 pm

Hi again,

Thanks for the quick reply :)

I'm already doing what you describe. I have two completely separate characters, each have their own manager, CreatureDraw etc. I set it up the same way as the Phasor-Demo.html from your Github. I've discovered the problem only begins once I change the animation, so if I set both of them to play some animation just after creation they look fine, but the second I change the animation on one of them (using manager.SetActiveAnimation(...)) the parts of the animation that has imageswap goes invisible on one or both of them. Other than that the animations run fine and I don't get any errors.

ktorgard
Posts: 4
Joined: Wed Mar 14, 2018 3:40 pm

Re: Using image swap in Phaser

Post by ktorgard » Thu Mar 15, 2018 2:45 pm

We're using Phaser version 2.6.2 and the PhaserEditor program by the way.

chong
Posts: 1178
Joined: Thu Feb 19, 2015 2:21 am

Re: Using image swap in Phaser

Post by chong » Thu Mar 15, 2018 3:29 pm

Hello,

Can you PM me ( personal message ) me using this forum with a cloud link of your project and the 2 characters. This way it will be private and I will not share the link with anybody. I will take a look at your project, if it is a bug in the runtimes I will fix it and check it into GitHub. I will need your source html of the project along with the Creature animation assets + atlas files.

Cheers

ktorgard
Posts: 4
Joined: Wed Mar 14, 2018 3:40 pm

Re: Using image swap in Phaser

Post by ktorgard » Thu Apr 05, 2018 3:09 pm

Turns out it was my bad! :roll: But thanks to a very helpful Chong we got it working.

In case anyone else runs into a similar issue the problem was with loading the mesh json file from the cache. Turning this:

Code: Select all

var mesh = this.game.cache.getJSON('Player_character_data');
into this:

Code: Select all

var mesh = this.game.cache.getJSON('Player_character_data', true);
solved the problem. Turns out the Creature code changes values in the json object when doing the image swap. By adding the 'true' parameter we get a clone of the object instead of just a reference, and now they don't interfere with each other!

Thanks again to Chong for the help :)

zampano
Posts: 70
Joined: Wed Jun 07, 2017 3:37 pm

Re: Using image swap in Phaser

Post by zampano » Thu Apr 26, 2018 12:44 pm

If I may, I'll use this topic for my questions regarding the same topic.

I tried to get swapping to work following the instructions in the unity documentation, since there are none for phaser yet it seems. Of course, I adjusted accordingly, but I came across two errors in CreatureMeshBone.js:

Line 4064 needs to be changed from

Code: Select all

if (cur_action_key in regions_map.count)
to

Code: Select all

if (cur_action_key in regions_map)
or you'll get "can't use in to search for 'region' in undefined".

Line 4067 needs to be changed from

Code: Select all

var swap_list = this.swap_packets[cur_action_key];
to

Code: Select all

var swap_list = swap_packets[cur_action_key];
or you'll get "Cannot read property 'region' of undefined".

After changing that, it seems to work fine. The only thing I'm having problems with is setting the region to its original sprite. First of all I couldn't find a tag number for that so it was a bit of trial and error, but when I found it, it didn't scale right. Also, as soon as I activated Image Swap for the region, I wasn't able to set it to the original sprite within Creature either, so when I export, it will also display the currently set Swap-Sprite from the start in Phaser. "RemoveActiveItemSwap" didn't seem to do anything, either. What can I do?

chong
Posts: 1178
Joined: Thu Feb 19, 2015 2:21 am

Re: Using image swap in Phaser

Post by chong » Thu Apr 26, 2018 4:03 pm

Hello,

Every MeshRenderRegion has a: use_uv_warp boolean flag. If you take a look at poseFinalPts line 981:

Code: Select all

  // uv warping
  if(this.use_uv_warp == true) {
    this.runUvWarp();
  }
Stepping up a bit, take a look at PoseCreature, line 4242:

Code: Select all

var cur_regions =
    render_composition.getRegions();
  var cur_bones =
    render_composition.getBonesMap();

  render_composition.updateAllTransforms(false);
  for(var j = 0, l = cur_regions.length; j < l; j++) {
    var cur_region = cur_regions[j];

    var cur_pt_index = cur_region.getStartPtIndex();


    cur_region.poseFinalPts(target_pts,
        cur_pt_index * 3,
        cur_bones);
        ...
That is how you extract all regions from your character. If you set the use_uv_warp for the region you want to false and make sure you have removed any item swaps, it should revert back to the original uv coords ( original sprite portion )

Btw, thanks for the fixes, I just updated and checked them into github.

Cheers

zampano
Posts: 70
Joined: Wed Jun 07, 2017 3:37 pm

Re: Using image swap in Phaser

Post by zampano » Fri Apr 27, 2018 3:28 pm

Hmm, I see, thanks but that's not really what I want or at least not very convenient.

I would want to use the original sprite as one of the swap options, say using the tag 0. This way I could have e.g. multiple hair colors with the original sprite being the default where I could swap back and forth with multiple other options using the same line of code and especially without having to remove all of my swap options during runtime. The workaround would obviously be to include the default color in the swaps, but then again the original sprite would never be used at all, which would also be kind of weird.

chong
Posts: 1178
Joined: Thu Feb 19, 2015 2:21 am

Re: Using image swap in Phaser

Post by chong » Fri Apr 27, 2018 4:08 pm

Hello,

If you enable Sprite Swapping, then it will run off completely using the Sprite Swap mechanism. In your case, I suggest you include the default sprite as one of the swaps too.

Thanks

Post Reply