iOS spritesheet scaling problem

[Robert O'Rourke]

Hello,

 

I've been making a few proof of concept games to move some old games from flash to html5. I've got a simple Simon memory game using a deck of cards set up here.

 

I've set up a spritesheet for the deck of cards so I can just choose a frame to change the card. The cards are arranged in a row and then in columns depending on how many you show and are scaled to fit into as much of the screen as possible.

 

It works on desktop and android but on iOS devices the frames from the sprite sheet are messed up or just don't show. When they do show it looks like there are exactly 4 of the sprites so I'm guessing it's related to the device pixel ratio.

 

Is there something I can do with Phaser.StageScaleMode to compensate?

 

Thanks!

[rich]

What size is your game running at? Is it scaling at all on mobile? (in the resources folder there is a Project Templates folder, inside that you can find "Full Screen Mobile" which will give you an idea of how to set it up to scale on mobile).

[Robert O'Rourke]

Hi Rich,

 

I'm actually setting the canvas to the full screen size available once the page loads and then calculating sizes and sprite scaling based on that. I'm guessing there might be a better way! I'll look at the full screen mobile example and see if that helps. Thanks!

[Robert O'Rourke]

The scaling options didn't seem to help with the spritesheet rendering issue unfortunately. Using separate images seems to work for iOS but isn't really ideal because of the HTTP requests.

 

Sadly edge inspect seems to be playing up so I can't get much useful debug info from mobile safari at the moment.

 

A screenshot might help - there should be one card shown and not 4 so it seems the spritesheet has been been internally scaled down by half somewhere.