My son is having summer vacation and he wanted to learn animation and create games. He had learnt Flash and ActionScript a couple of years back. So he started developing a game in Flash. However he ran into few issues and sought my help. Since I don’t know Flash, I could not help him much. But I suggested that if he develops his game in HTML5, I could help him. So while teaching him HTML5 and animation, I ended up creating a very simple game, which I want to share here.
Continue reading “A Simple HTML5 Game”
Improving Animation Performance in HTML5 Canvas – Part II
In this post I had described how I was able to improve performance of animation in HTML5 Canvas by using a backup Canvas. The trick was to draw static part of the main Canvas on the backup Canvas and whenever any object moves (during animation), draw the content of backup Canvas on to the main Canvas first and then draw moving objects. I had optimised this by copying only a part from the backup Canvas that was exposed by the moving object. This gave me much better animation performance than redrawing scene every time.
Though the animation was better, I was still not happy with the performance. It worked fine on small devices like phones, but animation was still not very smooth on tablets. So I started looking for ways to improve it further.
Continue reading “Improving Animation Performance in HTML5 Canvas – Part II”
File Chooser Dialog for PhoneGap Applications
I needed a file chooser dialog box for an application I am working on. Android APIs do not have File Chooser dialog, and I had created my own native Android File Chooser dialog for my application Annotated Call Log. However I did not want to use that for my current application, because it needs to run on iOS too.
A quick search on the Web for PhoneGap based file chooser dialog did not give me what I was looking for, so I decided to create one using PhoneGap file APIs, JQuery and JQuery Mobile. You can find the source code here. The page won’t display much in the browser. Use ‘View Source’ of your browser to see the source code.
Continue reading “File Chooser Dialog for PhoneGap Applications”
Improving Animation Performance in HTML5 Canvas
I have been working on an application that performs some animation in HTML5 Canvas. The animation involves drawing of stokes,images and moving images. Initially I took the easiest path for coding animation, which is clearing canvas every time and drawing new positions of objects. When tested this application on my laptop, in Chrome, everything worked fine and performance was satisfactory.
However when I ran the same application on my Xoom tablet, animation was extremely slow. Obviously clearing canvas and redrawing everything again and again was not a good idea. I did know that this approach was bad for animation, but since it worked fine on my laptop, I did not bother to change it initially. However I was surprised by how bad it performed on Android. I saw many complaints about performance of Canvas on Android in many forum posts and blogs. Apparently, as per many posts, performance of Canvas is much better on iOS than Android, but I can’t confirm this.
Continue reading “Improving Animation Performance in HTML5 Canvas”