Porting the 2D shooter game to WebGL.
Introduction
In the previous article http://d.hatena.ne.jp/takahirox/20140518/1400388214 I found that WebGL can much improve the drawing performance.
So I ported the 2D shooter game which I've been developing to WebGL, not only background but also almost all main shooter game entities.
Screenshot
Play
http://takahirox.github.io/toho-like-js/index.html
You can play it on your chrome. Don't forget to turn your hardware acceleration on.
Design change
You know, GPU does fast drawing if you transfer the much drawn data at one drawing call.
In the previous design with 2D canvas, I drew entities one by one. So I did the design change to draw much entities at a time.
Entity (called Element) had the drawing method display() which draws it self on 2D canvas. I stopped to use it and made a new class Drawer. It transfers the multiple view data via EntityManager(called ElementMaanger) which manages related Entities.
This design change affect many functions, so it took 2-3 weeks to port... tired.
two layers
I adopted two layers, one is WebGL layer and the other one is 2D canvas layer.
WebGL is fast, but not so straightforward. 2D canvas has the advantage to draw not performance critical element because of its easy to use.
So, I draw the main shooter game related entities onto WebGL layer because they appears on a screen a lot while I draw the others, like simple strings and only one image, on 2D canvas layer.
This idea makes the performance better and doesn't make design and implementation complicated.
Performance bottle neck
The current design and implementation are not so optimized yet. CPU-GPU transfer is one of performance bottle neck.
I have some ideas to improve it, for example partial update and reduce the number of vertices. I'll use them when I meet any performance problems.
Conclusion
I ported the 2D shooter game to WebGL. Adopting two layers reduces the complexity (a little).
Lately I feel I wanna try to use Network feature. It's cool if you play the game with your friend online, isn't it?
