Spritesheet with different image size?

[xtreme]

I am using the javascript framework "Phaser" and spritesheet.

Each cell in my spritesheet contains one image except from the last two cells that together contains one image.

I have this code that works fine with all cells except the last two (this example shows the first cell in the spritesheet)

game.load.spritesheet('button','assets/keypad.png', 57, 48);

btnNumberOne = game.add.button(0, game.world.height -numberHeight * 4, 'button', changeSky, this, null, 0, null);

btnNumberOne.name = '1';

Every image is a button and I want to show the last two cells (eg cell 11 and 12) as one image/button. How can I do that? How do I use Spritesheet with different image size in the sheet?

Something like this wrong code, 0 -> 11-12

btnNumberOne = game.add.button(0, game.world.height -numberHeight * 4, 'button', changeSky, this, null, 11-12, null);

[Dumtard]

I am not sure you can do this with a spritesheet. You could make them 2 seperate images and place them side by side but of course that would then only have button inputs occur on each half individually and you would have add extra code to fix that.

The solution to your problem is not to use spritesheets. You can instead use a Texture Atlas which allows you to have different size frames on the same image to be used. I go more into how this can be done in this topic.

[eguneys]

You can do that by extending Phaser.Group and combining the last two sprites, then using your custom group as a button.