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.
Article Details

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Authors who publish with this journal agree to the following terms:
- Authors retain copyright and grant the journal the right of first publication. The work is simultaneously licensed under a Creative Commons Attribution 4.0 International License (CC BY 4.0), which permits others to copy, distribute, remix, adapt, and build upon the work, even commercially, provided proper attribution is given to the original authors and the journal as the source of first publication.
- Authors may enter into separate, additional contractual arrangements for the non-exclusive distribution of the journal’s published version of the work (e.g., posting to institutional repositories, inclusion in books), with an acknowledgment of its initial publication in this journal.
- Authors are encouraged to post their work online (e.g., in institutional repositories, personal websites, or preprint servers) prior to and during the submission process. This practice can foster productive exchanges and may lead to earlier and increased citation of the published work.
User Rights:
All articles published Open Access will be immediately and permanently free for everyone to read and download. We are continuously working with our author communities to select the best choice of license options, currently being defined for this journal as follows: Creative Commons Attribution 4.0 International License.
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/