Best tools for making mobile applications

I tried to make a compass application for android using phonegap to check how far can I go with it. Phonegap is very powerful tool for making a mobile app that interacts with some site's API (eg. a twitter app) or that got usual interface and controls (forms, todo list, notes ..etc).
Let's try push phonegap to its limits trying to make a game or some graphical tool that's I choose a compass app.

I used a combination of CSS3 transform (to rotate the needle) and CSS3 transitions (to make rotation smooth), the code looks like this.

d=360.0-heading.magneticHeading;
// needle is the dom element for the needle image
needle.style.webkitTransform='rotate('+d+'deg)'; 
It worked perfectly with two exceptions, we need to "normalize" the angle to force it taking the shortest path. The screen flickers when changing orientation, this can be fixed by forcing the app into one orientation only (either portrait or landscape), this is normal for games and alike apps (by adding android:screenorientation="portrait" to the manifest).


android:screenorientation="portrait"

Doing animation is very CPU intensive, for my simple app, CSS transitions saved me a lot of  coding (and made my app much much lighter on CPU). Otherwise it would require setting a  time interval and doing animation there.

As I said in the previous post you can't use SVG because most mobiles in the market does not support it. You should either use canvas or use something that uses canvas at the backend like dojo.gfx.

If you have even more complicated things you should get out of web-related technologies.
Targeting android and iPhone you might want to check cocos2D and its sisters:

Comments

Popular posts from this blog

Be aware! Docker is a trap.

Multi-host docker cluster using OVS/VxLAN on CentOS 7

CSS3-based animation instead of jQuery