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
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 »