Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

1 decade ago by reskp

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

1 decade ago by reskp

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

1 decade ago by reskp

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

1 decade ago by Graphikos

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.

1 decade ago by reskp

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

1 decade ago by reskp

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

1 decade ago by reskp

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

1 decade ago by dominic

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&039;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&039;re running on a retina device. You could <2> 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.

1 decade ago by reskp

Sure i meaning loading @2x from folder.
Ok thanks for your help.
Page 1 of 1
« first « previous next › last »