CocoonJS Retina Artwork?

[Jay Tuckwell]

Hi,

 

I am in the middle of making my first game for iOS using Phaser & CocoonJS. One issue I have run into, is how I would load retina/hi-res artwork?

 

Thanks!

[Videlais]

Chances are you might have seen this thread before now. That's where a bunch of us have been sharing problems and solutions for doing things in Phaser and CocoonJS.

 

To start to answer your question, though, you would do it the same things as loading anything else, really. The problem is not so much detecting if a certain device has retina support, but knowing from its screen resolution if you should load those higher resolution images or not.

 

So, for example, in CocoonJS' Canvas+ mode, the reported screen resolution is in the window.innerWidth and window.innerHeight values. What I usually tell people is to use that full, extended size during the creation of the in-memory canvas (as part of the call to Phaser.Game) and then, before loading images, make a decision about either loading higher or lower resolution images to fit the screen of that user.

 

Another solution favored by many is to start with higher resolution and then scale down by calculating the difference between the reported screen size and the known size of the images. Phaser's ScaleManager can do most of that basic work for you, but you can also do it yourself too if certain sizes are needed.