Merge two spritesheet frame by frame?

Phaser 3
1

Hello,

I have some issue trying to merge two spritesheets into one frame by frame.
I have these:
1
GUNS

I tried creating a render texture, and targeting frame X of the character merging it with frame Y of the gun, but no luck.

Here is the code I have (not working, thought)

const texture = this.scene.textures.get('character');
const frames = texture.getFramesFromTextureSource(0);

const [source] = texture.source;

this.renderTexture = this.scene.make.renderTexture(
  {
    width: source.width,
    height: source.height,
  },
  false,
);

const characterTexture = this.renderTexture.saveTexture('character-with-gun');

for (const frame of frames) {
  this.renderTexture.drawFrame(
    'character',
    frame.name,
    frame.cutX,
    frame.cutY,
  );
}

const gun1 = this.scene.textures.get('guns').getFramesFromTextureSource(0, false)[0];

// If renderTexture.addToScene enabled, this gun appear around 0,0
this.renderTexture.drawFrame('guns', 0, gun1.cutX, gun1.cutY);

for (const frame of frames) {
  characterTexture.add(
    frame.name,
    frame.sourceIndex,
    frame.cutX,
    frame.cutY,
    frame.width,
    frame.height,
  );
}

For some reason, when I load my “character-with-gun” in my Character:

this.sprite = scene.physics.add.sprite(31, 31, 'character');
this.sprite.setFrame(0);
this.sprite.setCollideWorldBounds(true);
this.sprite.setSize(31, 31);
this.sprite.setOffset(0, 0);
this.sprite.setPosition(position[0], position[1]);
this.sprite.setPipeline('Light2D');

The frame displayed on the screen is not the right one at all, it’s, in fact, the last one on the spritesheet on the left.

If you have any clue,
Thank you in advance!

2

I got it working like this, at least I see the gun now on each frame, so now I just have to filter to add it only at X and Y positions.

I still have a problem thought, the texture is completely reversed, frame 0 is now frame 126 (last one), is that a bug?

const characterTexture = this.renderTexture.saveTexture(this.characterName);
for (const frame of frames) {
  this.renderTexture.drawFrame(
    textureKey,
    Number(frame.name),
    frame.cutX,
    frame.cutY,
  );

  this.renderTexture.drawFrame('guns', 0, frame.cutX, frame.cutY);
}

for (const frame of frames) {
  characterTexture.add(
    Number(frame.name),
    frame.sourceIndex,
    frame.cutX,
    frame.cutY,
    frame.width,
    frame.height,
  );
}