Just now my friend Andhieka Putra (github.com/andhieka) and I have just finished writing a pretty cute game, called Fross, inspired from Hamiltonian Path. Well, not exactly hamiltonian, but yeah. You are trapped in a maze in which you can only proceed to the next level and escape the maze if you have stepped on all the tiles in the maze, and only then a door will appear before your eyes..
Try it out here: Fross
Showing posts with label Web Development. Show all posts
Showing posts with label Web Development. Show all posts
Friday, December 12, 2014
Wednesday, December 3, 2014
Performance of HTML5 Canvas and CSS Border
I've just discovered that if you use CSS Border property on HTML5 Canvas, there will be a very severe performance hit! I realized this strange (or maybe not so strange for someone who knows the implementation details/documentations or related standards) behavior when I wrote the last game, Deterra. At first I have a very slow rendering of the quadtree, at that time I thought my implementation might have been not efficient in some ways. But once I removed the border lines (unintentionally, that time I was just thinking of making the game page looks better), the game suddenly became very smooth and fluid! (thats why I spammed lots of red block afterwards haha)
To confirm my suspicion, I rechecked BOOM, a game I previously written. It was so edgy and blocky like my unshaven face, that I thought ray casting might be too heavy for the machine. But once I removed the border lines, the game is smoother than Korean skin (haha if I offended anyone, I don't intend to and I apologize).
I am not that motivated to find out what are the reasons behind this, and I expect there will be more quirky stuffs lurking out when doing development on top of high level abstraction such as the HTML/CSS/JS development stack.
Take away point: If one day you think that an implementation of some data structure that you think should be efficient has performed badly, and you are pretty sure that you have implemented it pretty damn well, then you might want to check other factors regarding the abstraction layers you are working on to learn whether there are things that can be optimized.
Fun stuff.
To confirm my suspicion, I rechecked BOOM, a game I previously written. It was so edgy and blocky like my unshaven face, that I thought ray casting might be too heavy for the machine. But once I removed the border lines, the game is smoother than Korean skin (haha if I offended anyone, I don't intend to and I apologize).
I am not that motivated to find out what are the reasons behind this, and I expect there will be more quirky stuffs lurking out when doing development on top of high level abstraction such as the HTML/CSS/JS development stack.
Take away point: If one day you think that an implementation of some data structure that you think should be efficient has performed badly, and you are pretty sure that you have implemented it pretty damn well, then you might want to check other factors regarding the abstraction layers you are working on to learn whether there are things that can be optimized.
Fun stuff.
Subscribe to:
Posts (Atom)