Alejandro Ortega Arranz
Total Page:16
File Type:pdf, Size:1020Kb
ELECTRICAL AND COMPUTER ENGINEERING DEPARTMENT ELECTRONICS AND COMPUTERS DIVISION DESIGN AND DEVELOPMENT OF AN EDITOR FOR LOCATION-BASED GAMES DIPLOMA THESIS OF ALEJANDRO ORTEGA ARRANZ UNIVERSITY OF VALLADOLID Supervisors: PROF. N.AVOURIS DIPLOMA THESIS NUMBER: PATRAS JULY 2014 CERTIFICATION It is certified that the Diploma Thesis with the title: Design and Development of an Editor for Location-Based games Of the student of University of Valladolid, Spain: ORTEGA ARRANZ, ALEJANDRO (Eπ!νυµo) (Oνoµα) (Πατρωνυµo)(AM) Was presented in public at the Department of Electrical and Computer Engineering of the University of Patras, Greece on July 10th, 2014. The Supervisor The Head of the Electronics and Computers Division N. Avouris E. Housos Professor: N. AVOURIS Student: ALEJANDRO ORTEGA ARRANZ Title: Design and Development of an Editor for Location-Based games Abstract Nowadays, mobile games and applications have turned around in essential elements in the current society. But, at the same time that world does not stop (society, tendencies, ::: it changes daily), mobile games and applications should update and modify their contents. Thus, content providers play an important role and turn around important. The Human Computer Interaction (HCI) group from University of Patras, have developed some mobile games with a playful and educative scope, and also its content editors. But, could be possible stopping developing one editor for each game and make one in common? even could we extend it to other games not developed by the HCI group? This will be our purpose during this document. Trying to create a content editor despite the fact of the differences of the games, logic, user interface and other many aspects which differ them. Therefore, the content provider should be able to create, edit or update the information or content without changing the performance of the games. For carrying this out, first of all we should analyze which things the games have in common and then, to get an abstraction. This abstraction should work for all the games although they have incompatible properties among them. Then, for this kind of properties, we should add somehow a visibility parameter. By this way, that properties will be invisible for games which do not use them. Hence, this common content editor should be able to add, modify and delete objects of the games which have been developed and can be played everywhere in the whole world. Acknowledgements The work described in this Diploma Thesis has been done at the Laboratory of Human-Computer Interaction Group of the University of Patras, Patras, Greece in the period between February 2014 and July 2014, and was sup- ported by an Erasmus Student Exchange Grant. First, thanks to my parents and my brother Hector,´ because they are every- day supporting me. To my whole family who have been sustaining me during my life. To my friends, because they have been always there, although they are not close. To Rodrigo, for his company and collaboration developing Tagging Creaditor. I cannot forget my tutor, Christos and Menita for their valuable guidance and advice, trusting me. And also, to those who came to help me with the Evaluation of the application in a summer Sunday. To all people I have met during my Erasmus in Greece. You are really great people. With all one’s heart, Thank you all! v Table of Contents 1 Introduction 1 1.1 Motivation . 1 1.2 Objectives . 2 1.3 Location-based gaming . 2 1.4 Linking games . 3 1.5 Referenced games . 3 1.5.1 MuseumScrabble . 4 1.5.2 City Scrabble . 5 1.5.3 Benaki Museum Scrabble . 5 1.5.4 Taggling . 8 1.5.5 Other Games . 8 1.6 Main common features . 10 1.7 Main different features . 11 2 Application’s design 13 2.1 Abstractions . 13 2.2 Requirements . 15 2.2.1 Name of application . 15 2.2.2 Client-Server architecture . 15 2.2.3 Common database . 15 2.2.4 Collecting data . 16 2.2.5 Basic functions . 16 2.2.6 Doing real-virtual relationships . 16 2.2.7 Location identification . 16 2.2.8 Mobile implementation . 16 2.2.9 Recommendable features . 17 2.3 Hierarchical model . 18 2.4 Terminology . 19 2.5 Initial database . 19 2.6 Initial design . 22 2.7 Use cases . 25 vii viii TABLE OF CONTENTS 3 Implemented technologies 29 3.1 Web-based applications . 29 3.2 Web programming languages . 30 3.2.1 Markup languages . 30 3.2.2 Cascading style sheets (CSS) . 32 3.2.3 JavaScript (JS) . 32 3.2.4 PHP . 34 3.3 Zurb foundation . 36 3.4 Data base management systems . 36 3.5 Data exchange . 37 3.6 Web server . 37 3.7 Location services. Google Maps. 38 4 Development and implementation 39 4.1 Introduction . 39 4.2 Database . 39 4.3 Welcome screen . 44 4.4 Main screens . 45 4.4.1 Game list . 45 4.4.2 Location/Element . 46 4.4.3 Topic/Key . 47 4.4.4 Easy-way linker . 47 4.5 Secondary screens . 48 4.5.1 New/Modify game . 49 4.5.2 New playspace/New theme . 49 4.5.3 New location/New topic . 49 4.5.4 New element . 49 4.6 Extra functionalities . 50 4.6.1 Support for languages . 50 4.6.2 Support for kinds of devices . 51 5 Evaluations and results 53 5.1 Evaluation . 53 5.2 Results . 54 5.3 Future work . 56 References . 58 A Screenshot of the application 59 B Evaluation of TaggingCreaditor 65 B.1 Evaluation sheet . 65 B.2 Scenarios . 66 TABLE OF CONTENTS ix C Desktop-version User Guide 69 x TABLE OF CONTENTS List of Figures 1.1 Topic Selection (left) and Exhibit Association screens (right) of MuseumScrabble game. 4 1.2 The three different screens of CityScrabble game: Selection (left), Object assignment (center), and Map(right). 6 1.3 New Screens in Benaki Museum Scrabble.. 7 1.4 New Screens in Benaki Museum Scrabble. 7 1.5 Screenshots of Taggling. 9 1.6 A couple of Invisible City screenshots. 9 1.7 A couple of Invisible City screenshots. 10 2.1 First hierarchy abstraction of the application’s model. 14 2.2 Adaptive response moving from desktop to mobile version. 17 2.3 Example of possible values of a game object created with our tool. 19 2.4 Initial data base for Tagging Creaditor. 20 2.5 Recommended procedure for creating content with Tagging Creaditor. 26 3.1 Example of HTML code used in Tagging Creaditor. 31 3.2 Result of Fig. 3.1 HTML code. 31 3.3 Example of CSS and HTML code among with the result in Tagging Creaditor. 32 3.4 Example of JS, CSS and HTML code among with the result in Tagging Creaditor. 33 3.5 Example of JQuery code used in Tagging Creaditor. 33 3.6 Process of generation of a dynamical webpage. 34 3.7 Example of PHP, CSS and HTML code used in Tagging Crea- ditor. 35 3.8 Short piece of Taggling Database using phpMyAdmin. 37 4.1 Code used for supporting different languages in gameList.php. 51 4.2 Code used for supporting different kinds of devices. 51 xi xii LIST OF FIGURES 5.1 Diagram with the comparison between the best results and ours. 56 A.1 Initial design of Location/Element Screen. 59 A.2 Initial design of Topic/Key Screen. 60 A.3 Initial design of Easy-way Liner. 60 A.4 Final database of Tagging Creaditor. 61 A.5 Welcome Screenshot. 61 A.6 GameList Screenshot. 62 A.7 Location/Element Screenshot. 62 A.8 Topic/Key Screenshot. 63 A.9 Easy-way Linker Screenshot. 63 List of Tables 2.1 Example of score representation for relationships between real and virtual content. 15 2.2 Basic functions that application at least should include. 16 2.3 Comparison of real objects names in games and new content provider. 20 2.4 Comparison of virtual objects names in games and new con- tent provider. 20 3.1 Classification of programming languages depending on where are interpreted. 30 5.1 Results of the SUS questionnaire for the desktop application. 55 B.1 Personal data of testers. 65 B.2 SUS questionnaire for the desktop/mobile applications. 68 xiii xiv LIST OF TABLES Chapter 1 Introduction In this chapter we will explain the motivation which has led us to develop the application, and also work with location-based and linking games. First, we will set some objectives that we will mainly try to develop during the whole project. Afterwards, we will make a detailed study about the core of this project, the location-based and linking games. Finally, we will analyze the games and applications already developed by the HCI researching group, because they represent the kind of games that our application is going to give service. 1.1 Motivation Currently, with the evolution of programming, the use of a different content editor for each game is a waste of resources and time. Hence, the creation of a tool able to manage the largest number of games at the same time will entail great benefits: (1) developers will not waste time programming edi- tors for games or applications; and (2) the final users will only need to get familiarized with just one editor. However, the creation of only one edi- tor for all kind of games and applications is an impractical task due to the huge amount of game types. Thus, the editor we will develop will be fo- cused on games with two main features: (a) location-based games; and (b) linking games.