AethelmE, HTML5 Game Engine with Multiple Canvas Elements
Main Article Content
Abstract
Game engine is software which ease the game development. As the processor power technology evolved and the HTML5 (HyperText Markup Language 5) specification are developed, browsers nowadays can natively (without any need for external plug-in) display animations and multimedia files (audio and video) using JavaScript as the programming language. Some of the features which are used in this research are HTML5‘s canvas and audio elements. The problem is that none of the existing free HTML5 game engines is able to support multiple canvas elements. This research will create a game engine, called AethelmE, which support multiple canvas elements as its unique feature. This game engine is also able to support sprite transformation, browsers compatibility, external asset loading, and audio format compatibility. This research successfully resulted in creating an HTML5 game engine which supports multiple canvas elements. It also supports all the scopes, with a small exception on sound format compatibility. Moreover, this research conducted a performance comparison testing of multiple HTML5 game engines, from which can be concluded that multiple canvas elements does not give significant performance gain compared to a single canvas.
Plum Analytics
Article Details
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
The author(s) assign to JGGAG licence to use this document for personal use and in courses of instruction provided that the article is used in full and this copyright statement is reproduced. The authors also grant a non-exclusive licence to JGGAG to publish this document in full on the World Wide Web within the JGGAG website. Any other usage is prohibited without the express permission of the author(s).
References
T.N.Sharma, P.Bhardwaj and M.Bhardwaj. (2012, Sept.). Differences between HTML and HTML5. International Journal of Computational Engineering Research. [Online]. 2(5), pp. 1430-1437. Available: http://www.ijceronline.com/papers/Vol2_issue5/AR02514301437.pdf
B.Smus. (2011, Aug.). Improving HTML5 canvas performance. HTML5 Rocks. [Online]. Available: http://www.html5rocks.com/en/tutorials/ canvas/performance/
J.Park, "Study of network game engine technology for distribute processing," M.S. thesis, Dankook University, Yongin, South Korea, 2008.
Unity. “Unity - Fast Facts”. http://unity3d.com/company/public-relations/
M.Teschner, S.Kimmerle, B.Heidelberger, G.Zachmann, L.Raghupathi, A.Fuhrmann, M.P.P.Cani, F.Faure, N.Magnenat-Thalmann, W.Strasser and P.Volino. 2005. Collision detection for deformable objects. Computer Graphics Forum [Online]. 24(1), pp. 61-81. Available: https://hal.inria.fr/inria-00539916/document
G.van den Bergen, “Efficient collision detection of complex deformable models using AABB trees,” Journal of Graphics Tools, vol. 2, pp. 1-13, 1997.
S.Gottschalk, M.C.Lin and D.Manocha, “OBB-tree: a hierarchical structure for rapid interference detection,” Proceedings of SIGGRAPH, vol. 96, pp. 171-180, 1996
D.Geary, “Essentials,” in Core HTML5 Canvas — Graphics, Animation, and Game Development, Crawfordsville, IN: Prentice Hall, 2012, pp 17.
S.Fulton and J.Fullon, “Working with Audio, in HTML5 Canvas", 2nd ed. Sebastopol, CA: O’Reilly, 2013, pp 381-387.
E.Castro and B.Hyslop, “Introduction in HTML5 and CSS3", 7th ed., 2012, Berkeley, CA, Peachpit Press, 2012, pp xvi.
Crafty, “Crafty - Creating your first Crafty game”, 2010, [Online].
Available: http://craftyjs.com/tutorial/bananabomber/create-a-game#
components
C. Martens, “lycheeJS - Getting Started: Setup lycheeJS-ADK”,
[Online]. Available: http://martens.ms/lycheeJS/docs/guide-setup-
lycheeJS-ADK.html
J. Mordetsky, “Trafficcone”, 2012, Available: http://github.com/j03m/ trafficcone
IBM Developer Works, Available: https ://www.ibm. com/developer works/ library wa-canvashtml5layering/