Sunday, June 19, 2011

Pygame + Desktop ------> Javascript + Canvas + Browser

The topic is just about the change of platform for my personal projects, till date I have worked on games focused on desktop environment and have used Pygame + Python for them.

But, recently I have been trying with Javascript + HTML5 canvas. I have been just trying out things as of now, not yet an expert at anything or so. But yeah there are a lot of things which are supposed to be done differently, and many things are similar too.

The rendering context for both of them is same. You have to expect the screen in both the cases as a piece of paper, once you draw anything on it, you cannot delete it or change it. In every new frame you can either use the same paper or clear some parts of it and then use it, or use a new paper altogether.

The event handling mechanism is different, in python one used to handle every event like a keypress in a loop and depending on the type of the event (check that in a switch) one used to take appropriate action. In Javascript, one needs to attach a callback with different events and when they will occur, the callback function will be called.

The good thing with python was that it was cross platform so one was not required to take care of platform specific details. But that isn't the case with Javascript, the way firefox handles events it might be, and in some cases is, different from safari or chrome. For example the simple code for finding the position of a mouse when it is clicked is different in firefox and safari. So, for such things one needs to use JQuery another library, which makes traversing DOM objects easy, and standardizes Javascript code across browsers. The good thing about JQuery is that it is pretty lightweight, something like a single javascript file of less than 1000 lines.

Most of the animation in pygame was supposed to be done by manipulating images, infact most of the game view part was done using images/surfaces, in Javascript one tends to use native drawing functions. Now, this might be just a paradox in my mind, or it might just be the cult as canvas is yet a work in progress, or it is just a difference in the themes of games I used to work on pygame as compared to those of canvas, in my mind. But, still this seems to be there in general. It could also be because of speed issues of handling images in browser versus that in pygame.

All in all, I am still learning about new things many of my findings here might not be true, but still i will try and update them as and when I find out more.


Ankur Khurana said...

Canvas can include images as well. It is not an issue that you cannot render images in canvas. IT is very much possible and also attaching callbacks and events is not an big issue .Food force is very much possible in Javascript as well but will need some issues to be sorted out. Yes , standard is an isue among different browser but good thing is that most browser agree on things that we generally use (except IE , useless browser) . In fact my whole summer Project is based on HTML5 and events caling.

Sharon Smith said...

I could have used the random package to implement a bot(an opponent) that randomly selects tiles and make the game a little more interesting. But my aim was to just fiddle with the tkinter and I'm happy with the end result.
Check out a useful Pygame Side-Scroller Tutorial. Thanks!