Puzzle-it: An HTML5 Serious Games Platform for Education

  • Published on
    07-Jan-2017

  • View
    218

  • Download
    5

Transcript

  • Puzzle-it: An HTML5 Serious Games Platform for

    Education

    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 Engine (GE)

    The constructed platform exploits the use of images and audio (multimedia files) as game assets to be rendered to the display, an HTML5 Canvas on the common web

  • browser. To this end, a GE was created in JavaScript to regulate the rendering of the game assets. The GE renders the game assets based on their configuration which are provided by GDMI (Fig. 1).

    Fig. 2 shows the structure of the GE which consists of 10 main classes as follows. Asset Manager class plays a role in managing game assets by performing assets list-ing and assets caching, whereas Timer class and Header class are responsible in man-aging gaming time and gaming information, respectively. Entity class is an abstrac-tion used to represent each individual asset having coordinates as class properties for rendering purpose. This class is then further extended into three different subclasses, i.e. Game Entity class, Feedback Entity class, and Adhoc Entity class having different additional class properties. Case Generator class retrieves the configuration of the game contents by loading it into memory which then the assets are uploaded into the memory by Asset Manager class. Performance Manager class manages the scoring rules and computes score based on the given rules set in the gaming data configura-tion. The Game Engine class, which resides within GE component, brings all classes together by governing them to be able to interact with the players.

    Fig. 2. Game Engine Structure

  • The Puzzle-it platform supports play, draw lines, and drag and drop. ject (the correct or the wrong one, according to the problemplayers to draw a line between two objects each other. Drag-&-drop asks players to take an object and put itin a target space. The interaction listeners are implemented as methods within the Game Engine class. The work on these interaction modalities is discussed in [4].

    3.2 Gaming Data Management and Interface (GDMI)

    GDMI separates GE from thdatabase structure and the data does not affect the GE codes. There are three types of gaming data managed by GDMI: 1) game configuration, 2) game contents, and 3) playing data. Game configuration profollow such as playing rules, type of interaction, etc. Game contents store the list of game assets used and how they should be used within the game. Those data should be created via game authoring tool (GAT). Osessions such as playing score, are produced upon players completing the game. Fig. 3 shows the implementation of GDMI. GDMI was implemented using serverscripting which one of tasks is to serialize data frenables GE to read the game contents and configuration which was implemented in client-side scripting using JavaScript.

    it platform supports three different types of interactions i.e. click and play, draw lines, and drag and drop. Click-&-play requires players to click on an o

    the correct or the wrong one, according to the problem). Draw lines demands line between two objects that are considered as matching between

    asks players to take an object and put it on its right positionspace. The interaction listeners are implemented as methods within the

    Game Engine class. The work on these interaction modalities is discussed in [4].

    Gaming Data Management and Interface (GDMI)

    GDMI separates GE from the gaming data in the sense that the modification of the database structure and the data does not affect the GE codes. There are three types of gaming data managed by GDMI: 1) game configuration, 2) game contents, and 3) playing data. Game configuration provides the basis game setup which GE needs to follow such as playing rules, type of interaction, etc. Game contents store the list of game assets used and how they should be used within the game. Those data should be created via game authoring tool (GAT). On the other hand, playing data, i.e. playing sessions such as playing score, are produced upon players completing the game. Fig. 3 shows the implementation of GDMI. GDMI was implemented using server-side scripting which one of tasks is to serialize data from the database into XML type. This enables GE to read the game contents and configuration which was implemented in

    side scripting using JavaScript.

    Fig. 3. Implementation of GDMI

    types of interactions i.e. click and players to click on an ob-

    demands that are considered as matching between

    right position space. The interaction listeners are implemented as methods within the

    e gaming data in the sense that the modification of the database structure and the data does not affect the GE codes. There are three types of gaming data managed by GDMI: 1) game configuration, 2) game contents, and 3)

    vides the basis game setup which GE needs to follow such as playing rules, type of interaction, etc. Game contents store the list of game assets used and how they should be used within the game. Those data should be

    n the other hand, playing data, i.e. playing sessions such as playing score, are produced upon players completing the game. Fig. 3

    side om the database into XML type. This

    enables GE to read the game contents and configuration which was implemented in

  • Moreover, GDMI provides a list of functions in its libraries to...

Recommended

View more >