Forums » Help » Making Retina and non Retina games

Hi,
I would like to know what is the best way to do retina and non retina games ?
1) What sprites must i use for making level on editor (HD,non HD)?
2) Must i detect the retina capability on animation ?
animSheet: new ig.AnimationSheet('images/game/exit.png', 10, 10).
animSheet: new ig.AnimationSheet('images/game/exit@2x.png', 20, 20),
...

I am using appMobi or phonegap.

thanks

I can't find any tutorial for making games with this approach

I fount this
http://forums.html5dev-software.intel.com/viewtopic.php?f=8&t=3519&p=13160
But nothing about what to do with level editor

Use Ejecta and it'll take care of all that for you. It will automatically look for the @2x version of images. I don't know how you deal with it in other wrappers.

thanks, but i need to deploy the game on Web and others device so that o wanted to use appMobi or Cordova

You mean , use ejecta for IOS and cordova build for others ? :)

So ejecta also transform assets from level.js to @2x ?

Ejecta doesn't transform anything. It load @2x images - if present - and pretends to the JS code that they're half the size they actually are. See here:
http://impactjs.com/ejecta/overview#drawing-images

There's nothing like that built in into Impact itself. If you want to get this working across the board, it's best you implement it yourself and not use Ejecta's automatic @2x loading. However, this will be extremely complicated to get right:

Check the backingStoreRatio of the canvas and the devicePixelRatio on the devie. You may have to scale your canvas's internal width/height to double the size (if backingStoreRatio is 1 and devicePixelRatio is not 1) and then scale it down using CSS again. Note that devicePixelRatio may be something like 1.5 on certain Android devices.

So now that you scaled your canvas, you have to somehow abstract that scaling away when drawing images (i.e. you want coordinates (100,100) to be at the same place on your screen, regardless of the internal scaling). You could do so by introducing a new drawMode that accounts for the internal scaling. Have a look at system.js, close to the end of the file.

Now that you have this in place, you still need to take care of loading 2x images if you're running on a retina device. You could inject some code into the ig.Image class that overwrites its load() method to modify the path - append something like _2x to the file name.

So... I think that's it. I may be missing a step or two and it's likely to be much more complicated than I outlined here. Scaling in Browser's is extremely fiddly.

It may be easier to do everything in 2x from the beginning and just scale the canvas to half the size on all devices. This may be slow(er) and look bad on 1x devices, though.

Sure i meaning loading @2x from folder.
Ok thanks for your help.