Puzzle-it: An HTML5 Serious Games Platform for Education

Embed Size (px)

Text of Puzzle-it: An HTML5 Serious Games Platform for Education

  • Puzzle-it: An HTML5 Serious Games Platform for


    Puzzle Based Serious Games for Education

    Danu Pranantha, Francesco Bellotti, Ricardo Berta, Alessandro De Gloria

    Department of Naval, Electrical, and Information Technology Engineering (Dynatech) University of Genoa

    Genoa, Italy

    {danu, franz, berta, adg}@elios.unige.it

    Abstract. Serious games as learning medium have advanced in the past few years. They have been applied to support learning in various fields such as se-curity, health-care, and education. Serious games can scale from low budget games up to high budget games depends on the games objectives and features. For instance, military may utilize games with 3D simulation, live characters, and extensive scenario for combat training due to its critical mission. Nonethe-less, in a classroom or remote set-up learning environment, most of these high level games are impractical to be adopted due to the amount of costs they may induce. This is most of the case in educational games which main objective is to motivate the student to learn. However, a game development remains as a time consuming, complex, and laborious process. In order to simplify and shorten this process, it is highly attractive to create a platform to produce educational games. Therefore, this paper, based on our previous work, proposes a platform for authoring HTML5 serious games intended in particular, but not limited to create lightweight serious games for educational purpose using the upcoming HTML5 standard playable in common web browsers. This platform, puzzle-it, divides the work of game development into two distinct layers i.e. contents au-thoring and core engine development. Both readily and work in progress com-ponents of the platform are presented and discussed.

    Keywords:serious games; game development; puzzle game; HTML5; Java-Script; game engine; game content authoring; social networks

    1 Introduction

    The advancement of information technology has revolutionized how people work, live, and learns. Learning has changed in various forms from conventional teaching in the classroom, the advent of distance learning and cyber classroom, and the use of e-learning system. One of appealing approaches is the use of serious games. Education-al serious games (SGs) games that use pedagogy to infuse instruction into the game play, in particular fostering situated cognition [1] have acknowledged educational

  • potential shown by their ability to induce motivation in learning and improve academ-ic performance [2]. SGs are not only adopted in academic curriculum [2], but also they are adopted in military training [3]. While commercial games can be purposely shifted for learning, most of them can be difficult to adjust or expensive to acquire. On the other hand, developing a full extensive game for a certain purpose consumes a lot of time and budget. Certainly, in critical purposes such as warfare simulation which results are the matter of life and death, it will be valuable to have very powerful games using 3D living world, non playable characters (NPC), and simulation to in-duce real experiences to the military soldiers. However, it is hardly necessary in schools to have such systems in the classroom. It is more likely to be simple, flexible, and ease to create contents.

    Therefore, this paper proposes puzzle-it, a platform to create HTML5 SGs for edu-cational purpose. This platform exploits the state of the art web technologies and so-cial networks which offer open platform and ease dissemination. The most compelling feature is that it offers loose coupled between contents and the core components of the game i.e. game engine. Furthermore, this platform, based on our previous work in [4], supports three types of interaction modalities to provide amusing game mechanics via common web browser and connection to social networks for user profiling and to intrinsically encourage collaboration and competition.

    This paper is organized as follows. Section II discusses related work about games development, gaming platform, and their related technologies. The platform which encompasses the system architecture, game engine, gaming data, contents authoring, and social networks are described in Section III. Section IV shows some examples of games developed using the platform. Finally, conclusion and future work are pre-sented in Section V.

    2 Related Works On Developing SGs For Education

    According to [5], there are two types of approaches in having games for education-al purposes: 1) use commercial off-the-shelf games, or 2) use ad-hoc designed games. The first requires purpose shifting of the games since their nature were not intended for educational purposes, whereas the later is more direct. Nonetheless, there are two identifiable obstacles that are commonly met in adopting ad-hoc designed games. Firstly, developing a game is a complex and laborious task which requires detailed elicitation and programming on, for example, game props and mechanics, story line, game world, and characters. Secondly, a game is commonly developed under a very specific purpose which means the reuse of the game components, e.g. game ob-jects/props, is somewhat limited.

    Therefore, several game engines are both commercially and freely available to fa-cilitate and to ease game development, such as Torque Game Engine (TGE), Quark, Unity 3D, and Unreal Engine [6, 7] along with their game props. Albeit their abilities to support any game genre development, they still require complex modeling, in par-ticular 3D modeling, and programming experts which are not economical. Moreover, these game engines rely on plug-in which related to cross platforms issues discussed

  • in [7]. This leads to two particular research focuses for educational games: 1) the development of platform for ease to use game creation using pre-created game props 2) the use of advanced web technologies to develop browser games which offers cross platform capability. The first focuses on creating a platform that enables, for instance, instructor to create a specific educational game suits to his objectives by utilizing some pre-created game props such as game objects and characters. An outstanding example on this work is e-Adventure, a game development platform to create a point-&-click adventure game [8, 9] developed using Java technologies. Hence, it can be deployed as standalone application or as an applet for online use. Similar but slightly different application is StoryTec [10], a digital storytelling platform for authoring and experiencing of Interactive and Non-linear Stories. It has compelling potential to be extended as a game platform which offers an insight for this work. The second tries to overcome cross platforms issues by using web technologies playable via common web browsers. Oxyblood developed in [7] is a good example for this case. Oxyblood is a 3D Real Time Strategy (RTS) game for learning how human respiratory system works developed using WebGL, a JavaScript API for rendering 3D graphics. This work highlighted the power of web technologies in constructing a more complex and interactive application which should be exploited for more extensive gaming plat-form.

    One of utmost important works on web technologies is the upcoming HTML5 standard. The work on HTML5 is a joint cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). According to W3C, this will be the new standard for HTML, XHTML (Extensible Hypertext Markup Language), and the HTML DOM (Document Object Model) [11]. Though HTML5 is still a work in progress, most modern browsers e.g. Safari, Chrome, Firefox, Opera, Internet Explorer have some HTML5 support. A major advantage of HTML5 is that it reduces the need for scripting and the need of external plugins which unlike, for instance, Flash and Java applet. HTML5 create a much richer web applications comparable to desktop applications. Other web technol-ogy which has to be noted is Asynchronous JavaScript and XML (AJAX) which con-tributes to the rise of Web 2.0. One of applications which heavily rely on this technol-ogy is the social networks. For instance, Facebook system introduces APIs called Javascript Standard Development Kits (SDK) [12] to connect to their system and to utilize their data.

    Those three technologies (WebGL, HTML5, and JavaScript) have grown remarka-bly with one of notable applications is Google Maps [13]. Moreover, games that are available in Google Play [14] exploit those technologies by combining HTML5, Ja-vaScript, and several images all together [15]. In other words, richly interactive cross platform web applications comparable to desktop applications are already on the way to reality. Thus, we are strongly convinced that such an increasing capability of web technologies in delivering rich interactions should be fully exploited not just for play-ing casual games, but also for more serious objectives, such as learning and education. The work on this paper tries to fuse both research focuses together. To this end, we create a platform to facilitate ease educational HTML5 SGs construction, i.e. puzzle-it, by exploiting the state of the arts web technologies. We choose to focus on puzzle

  • game since puzzle based learning is extensively studied in [16] for their ability to enhance general development such as logic, memory, problem solving.

    3 Platform Development

    Puzzle-it, our platform which is still work in progress, comprises of four major com-ponents: 1) Game Engine (GE), 2) Gaming Data Management and Interface (GDMI), 3) Game Authoring Tool (GAT), 4) User Profiling and Personalized Learning (UPPL), and Add-Ons. It uses client-server architecture (Fig. 1).

    Fig. 1. Puzzle-it Platform

    3.1 Game Eng