DigiArt D6.4
DIGIART - THE INTERNET OF HISTORICAL THINGS AND BUILDING NEW 3D CULTURAL WORLDS
D6.4 FINAL VERSION OF THE STORY TELLING ENGINE (M32, DEMO, CERTH) WP6: Technology integration under the story telling engine Coordinator: Dimitrios Ververidis at Centre for Research and Technology Hellas (
[email protected]) Date of final version: 28/01/2018
1
DigiArt D6.4
Document Description Deliverable number Deliverable title Date of delivery Authors
6.4 Final version of the Story Telling Engine 28/01/2018
Work Package Task
WP6: Technology integration under the story telling engine
Type Approval status Number of pages Distribution Version
Demo Final 30 Public 1
Dimitrios Ververidis, Tasos Papazoglou-Chalikias, Filareti Tsalakanidou, Stathis Nikolaidis, Ioannis Kompatsiaris, Spiros Nikolopoulos, Kevin Di Modica, Phil Cheeseman, Christoph Strecha
Technology integration (CERTH, LJMU, Pix4d) (M24-M32)
Abstract: Improved version of the initial implementation encompassing the results of the second development cycle, as well as introducing optimizations with respect to the quality of the generated content and the compatibility with the virtual reality headsets. The information in this document reflects only the authors views and the European Community is not liable for any use that may be made of the information contained therein. The information in this document is provided as is and no guarantee or warranty is given that the information is fit for any particular purpose. The user thereof uses the information at its sole risk and liability.
This project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No 665066. This document may not be copied, reproduced, or modified in whole or in part for any purpose without written permission from the DigiArt Consortium. In addition to such written permission to copy, reproduce, or modify this document in whole or part, an acknowledgement of the authors of the document and all applicable portions of the copyright notice must be clearly referenced. All rights reserved.
Copyright © 2018 DigiArt Consortium consisting of: Name of Participating Organisation
Short Name
1
Liverpool John Moores University
2 3
Ethniko Kentro Erevnas Kai Technologikis Anaptyxis Centre National de la Recherche Scientifique 17th Ephorate of Prehistoric and Classical Antiquities, Helenic Ministry of Culture. Pix4D Scladina Cave Archaeological Center VulcanUAV
4 5 6 7
LJMU-GERI LJMU-RCEAP1 CERTH CNRS
Countr y UK EL FR
IZEPKA
EL
Pix4D SCAC VUAV
SW BE UK
1 The legal entity “Liverpool John Moores University” is participating in the project via two independent
Departments. The General Engineering Research Institute (LJMU-GERI) and The Research Centre in Evolutionary Anthropology (LJMU-RCEAP)
2
DigiArt D6.4
History Version v0.1
Date 14/11/2017
Reason Initial draft
Revised by
v0.2
8/01/2017
Main body
Tasos Papazoglou - Chalikias, Stathis Nikolaidis
v0.3
11/01/2017
Adding all screenshots
Dimitrios Ververidis - Chalikias, Dimitrios Ververidis
v0.4
12/01/2017
Content fix
Filareti Tsalakanidou
v0.5
19/01/2017
Review
Spiros Nikolopoulos
v0.8
22/01/2017
Editing
Ioannis Kompatsiaris
v0.9
23/01/2017
Review
Kevin Di Modica
v1
24/01/2017
Review
Phil Cheeseman, Christoph Strecha
Dimitrios Ververidis
3
DigiArt D6.4
Executive Summary This deliverable is about one of the final products of DigiArt, namely the Story Telling Engine, a platform for easily designing and generating virtual tours for the presentation of the scanned items to the general public. The virtual tours are designed taking into consideration the story telling aspect of the project which was the primary objective of the project. Throughout the 2.5 years of the project, we have found the opportunity to deal with 3D scanned cultural related models – including also whole sites - that pose requirements and raise new challenges for the developed platform. Several attributes of the 3D models related to quality and size defined the plans and the developments. In 2016, we had defined the architecture in a bottom-up approach in order to avoid dead-ends and heavy integration problems that would reduce the quality of the final product. The pipeline selected, using WordPress as a web system to start from, web 3D library three.js for building the web 3D editor, and the Unity3D game engine for compiling the game projects, was found accurate and, mostly, feasible to achieve. We have proposed a novel breakthrough method to transpile entities from WordPress into Unity3D YAML format that will provide the basis for any future potential investments. This was achieved by making developments in a research like form which was useful for defining the final architecture. The upload of the code in Github, allowed for parallel coding in the DigiArt team, and the fixing of the bugs through the respective issue reporting system in the code repository. In the second prototype phase, the developments that took place regard the comments of the project reviewers, the use case partners, and the test end - users of the first testing phase. This process resulted in a robust, and user-friendly Story Telling Engine, a web tool that it is able to generate virtual tours through the Unity3D engine. The format of this deliverable is non-technical in nature as most of the technical issues were dealt in Deliverables (D6.1, 2016), (D6.2, 2016), and (D6.3, 2017). The major improvements that we want to highlight is the user friendliness and the simplicity achieved, while hiding under the hood, the many technical details of the development process.
4
DigiArt D6.4
Abbreviations and Acronyms
CPT
Custom Post Type
VR
Virtual Reality
API
Application Programming Interface
CMS
Content Management System
GUI
Graphical User Interface
HCI
Human-Computer Interface
HTML
HyperText Markup Language
IPA
iOS application archive file which stores an iOS app
Obj
Wavefront Object 3D model format
OS
Operating System
PC
Personal Computer
SDK
Software Development Kit
SLAM
Simultaneous localization and mapping
UI
User interface
VR
Virtual Reality
YAML
Yet Another Markup Language (something similar to XML)
XML
Extensible Markup Language
RGB
Red-Green-Blue
5
DigiArt D6.4
CONTENTS 1. Final version of the Story Telling Engine
8
2. Installation
10
2.1 Server requirements
10
2.2 Unity3D installation
10
2.3 WordpressUnity3DEditor plugin installation
10
2.4 Troubleshooting
11
3. Virtual Tours creation procedure
12
3.1. Create a Game Project
12
3.2 Customizing Main Menu and Credits scenes
14
3.3 Creating Assets
16
3.4 Drag ‘n’ drop assets to a scene and make edits
17
3.5 Override fields inside the 3D editor
20
4. Compiling and disseminating
21
5. Testing the game
24
6. Conclusions and challenges for the future
30
References
30
6
DigiArt D6.4
Table of Figures FIGURE 1: DEPICTING VIRTUAL TOUR CREATION AS A LINEAR PROCEDURE ............................................................ 12 FIGURE 2: THE GAME PROJECT MANAGER ALLOWS CREATING, EDITING, OR DELETING A PROJECT. ........................... 13 FIGURE 3: GAME PROJECT EDITOR OFFERS THE FUNCTIONALITIES OF EDITING A GAME PROJECT. .............................. 14 FIGURE 4: FORM FOR EDITING THE “MAIN MENU” AND “HELP” SCENES. ........................................................... 15 FIGURE 5: EDITING THE CREDITS SCENE. ........................................................................................................ 16 FIGURE 6: CREATING ASSETS. A “SITE” TYPE ASSET. ........................................................................................ 17 FIGURE 7: PROJECT EDITOR CONTAINS THE SCENES TO BE EDITED. ...................................................................... 18 FIGURE 8: THE 3D EDITOR ALLOWS THE EDITING OF SCENES. ............................................................................ 19 FIGURE 9: 3D EDITOR ALLOWS OVERRIDING SOME ASSET FIELDS FOR EACH INSTANTIATED ASSET. ........................... 20 FIGURE 10: “COMPILE GAME” BUTTON IS ON THE TOP RIGHT CORNER OF PROJECT EDITOR ................................... 21 FIGURE 11: SELECT A PLATFORM FOR COMPILING THE GAME. ........................................................................... 22 FIGURE 12: COMPILING FOR WEB. ............................................................................................................... 23 FIGURE 13: SUCCESSFUL COMPILING FOR WEB............................................................................................... 23 FIGURE 14: MAIN MENU OF THE COMPILED GAME. ......................................................................................... 24 FIGURE 15: HELP SCENE OF THE COMPILED GAME ........................................................................................... 25 FIGURE 16: LOGIN SCENE OF THE COMPILED GAME ......................................................................................... 25 FIGURE 17: OPTIONS SCENE OF THE COMPILED GAME...................................................................................... 26 FIGURE 18: CREDITS SCENE OF THE COMPILED GAME ....................................................................................... 26 FIGURE 19: SCENE SELECTION MENU. MULTIPLE SCENES ARE SUPPORTED. .......................................................... 27 FIGURE 20: PLAYING THE GAME. ................................................................................................................. 27 FIGURE 21: POI FEATURING IMAGE-TEXT. IMAGE, TITLE AND DESCRIPTION POSITIONS. ......................................... 28 FIGURE 22: POI FEATURING VIDEO. .............................................................................................................. 28 FIGURE 23: POI FEATURING AND ARTIFACT WITH TITLE AND DESCRIPTION. .......................................................... 29 FIGURE 24: REWARD PHASE. GREEN ARROW GUIDES THE USER TO THE DOOR (REWARD ITEM) WHICH WAS PREVIOUSLY INVISIBLE. ......................................................................................................................................... 29
7
DigiArt D6.4
1. FINAL VERSION OF THE STORY TELLING ENGINE The Story Telling Engine is a web based tool that allows curators to upload 3D assets, assign behaviors into them, and finally wrap everything in a Unity3D game. This game allows the virtual museum visitors to view the museum artefacts - and learn about them - in a 3D first person view game. The first version of the Story Telling Engine (D6.2, 2016) had several drawbacks, that were mainly noticed in the first prototype evaluation report , and are outlined below: 1) The user interface was not easy to learn for the curators because the flow path was not linear. This increased the amount of presented information in one interface. It was a major issue which was caused by the lack of proper interfaces as the general purpose back-end interface of WordPress was employed. In the second phase, we have developed a front-end interface based on the famous material design css library that has been designed for the Story Telling Engine specifically. 2) The finished compiled games in the prototype storytelling engine did not have good quality graphics or interfaces. The first iteration was developed in a fast prototyping way without paying much attention to the aesthetic and artistic aspect of it, two factors that were dealt within the second prototype. 3) There was no option for compiling into Web format. Web format allows the game to be played without installation and increases the visibility of the project. A proper mechanism allows the WebGL option of Unity3D to be used in order to compile the game as a web page. 4) There was only one scene that the user could visit per game. A game should have multiple scenes and they should be able to be selected from the beginning of the game. A scene selector scene was implemented and embedded in the game template that automatically enlists all the created scenes for access. 5) There was no options to play the game with a VR headset. Oculus VR library is embedded in the game so as the game can be played with Oculus glasses. 6) Edit and delete functionalities were missing. Game Projects, Scenes, Assets, and Game Objects can now be edited and deleted. 7) The provision of game analytics inside the web platform was missing. We have foreseen the embedding of analytics into the game. 8) The Story Telling Engine was only accessible through Chrome browser. The second prototype can be accessed either through Firefox or Chrome browsers. The output generated game can be played also with the same browsers as well. 9) Game Project owner privileges were missing. In the first prototype there was no security among game creators as regards the game editing. The second prototype has a real security mechanism that does not allow access from unauthorized users. 10) The 3D editor had a problematic interface as regards deleting game objects and mouse button functionalities. In the second prototype these problems were fixed. 11) There was no option to measure the size of the artifacts and resize accordingly. An interface allows resizing of the artifact according to its bounding box size. The aforementioned issues were corrected during development as detailed in Section 2, and Section 3. For the convenience of the reader, the latest version of the Story Telling Engine can be found in
8
DigiArt D6.4
http://digiart.mklab.iti.gr and it is ready for creating virtual tours. The registration form can be used for signing up and accessing the platform. The Story Telling Engine code can be found in GitHub: https://github.com/DigiArt-project/WordpressUnity3DEditor We have chosen to name the plugin the WordpressUnity3DEditor as this represents the functionality of the plugin in a manner that other programmers can understand it and attract their interest. The code can be downloaded in a zip file and installed in any WordPress installation as a plugin. Further installation details will be presented in Section 2. The material of Sections 3, 4 and 5 is complemented by the following YouTube videos: a) Story Telling Engine Part I: LJMU Museum Asset and Scene Creation: https://www.youtube.com/watch?v=BbBOKCBryvU&t=448s b) Story Telling Engine Part II: LJMU Museum Game Compiling and Playing: https://www.youtube.com/watch?v=qKPqvNrge9U that demonstrate in a short time the main functionalities of the Story Telling Engine, and the resulting game – not the whole but just a part - of the LJMU virtual museum. Overall, the structure of this deliverable is as follows. In Section 2, we present the technical details for the installation of the Story Telling Engine. In Section 3, the procedure to create a virtual museum is described. In Section 4, the compiling process, and in Section 5 the finished virtual tour game are described. Conclusions and challenges are described in Section 6.
9
DigiArt D6.4
2. INSTALLATION This section is addressed to site administrators and programmers as it presents how to install the system and test it. The installation process has not changed significantly from D6.2, apart that the plugin has migrated to GitHub: https://github.com/DigiArt-project/WordpressUnity3DEditor Also, the latest version of third party software should be used such as Windows or Ubuntu, XAMPP, and WordPress, as outlined below.
2.1 SERVER REQUIREMENTS The system can be installed either in a Windows or a Linux OS based computer that covers almost all server systems. The system was tested for Windows 10 and Ubuntu 16 successfully, but it could be functional in older versions of operating systems. The server software XAMPP should be downloaded and installed. It is wrap up library for Apache and MySQL servers, and it can be freely used for transforming personal computers into servers2. WordPress 4.9 or later should be also installed which is also publicly available3. WordPress is the most popular Web Content Management System (WebCMS), and therefore we have based our developments on its framework in order to develop a plugin that augments its functionalities and transforms it into a Story Telling Engine.
2.2 UNITY3D INSTALLATION Unity3D should be installed in order for the Story Telling Engine to be able to generate games. The versions of Unity3D that were tested for Windows and Linux systems are described below. Ubuntu Systems: Download, install, run, and activate Unity3D 2017.1.1 for Ubuntu. Instructions are available at the Unity website and specifically in the forum dedicated for the Linux version4. The expected behavior is to see the Graphic User Interface (GUI) of Unity3D editor. Unexpected behavior is a gray screen without loading anything. This is due to the wrong version used. Alpha versions should not be used. Windows Systems: Download Unity3D free version 2017.1.2 for Windows from Unity3D website5. Install, run and activate it in the windows that will appear. The GUI of Unity3D should be loaded, otherwise an error will be prompted.
2.3 WORDPRESSUNITY3DEDITOR PLUGIN INSTALLATION WordpressUnity3DEditor plugin is the main product of the DigiArt team and it can be downloaded from the GitHub repository that was mentioned in the introduction of this section. The procedure that should be followed is the standard one for WordPress plugins. Briefly, this procedure regards the web site administrator that does not have necessary to be a programmer because it is a simple click and wait procedure. Namely in the WordPress 2 https://www.apachefriends.org/index.html 3 https://wordpress.org/download/ 4 https://forum.unity3d.com/threads/unity-on-linux-release-notes-and-known-issues.350256/ 5 https://store.unity.com/
10
DigiArt D6.4
back-end, select “Plugins”, “Add New”, “Select from a File”, and select the zip file of the WordPressUnity3Deditor as downloaded from GitHub. When the plugin is installed, the “Activate” button should be pressed. The WordPress front-end theme should be also installed. Themes affect the positions and colors of the front-end elements in a class like manner. The “Evolve” theme was used and tested as it is a simple and clean theme with many options for front-end customizations and compatibility with the material design library used. It is publicly available through the theme installation mechanism of WordPress. Other themes could be possibly used with minor tweaking. The plugin automatically generates the necessary structures for the generation of virtual tours, so no other setting procedure is necessary, apart from one regarding user registration that it is outlined in the following two lines. The plugin generates a new user role named as “Advanced Game Master” that allows new users in the system to make game projects, scenes, and assets. This role should be set as the “new user” in a popup setting found in the WordPress “Settings” menu. This sets all newly registered users as “Advanced Game Masters”.
2.4 TROUBLESHOOTING Several problems regarding settings for the installation of the platform in Ubuntu system were found and overcome in a special thread in the Linux Unity3D forum (LinuxBatchmode). Installation in Windows did not require special settings.
11
DigiArt D6.4
3. VIRTUAL TOURS CREATION PROCEDURE This section describes the creation of Game Project, Scenes, Assets, and Game Objects. A Scene is a collection of game objects, where a game object is an instance of an Asset. An Asset is a blueprint that can actually generate infinite game objects by drag ’n’ drop into the scene. More details about this structure can be found in deliverable (D6.2, 2016). The procedure to create a virtual tour can be described as a linear procedure to create entities and assign categories to them that will define their behavior and role in the game. This procedure allows the Story Telling Engine to hide programming details, and secondly make it easy to learn game creation. The linearity process of virtual tour creation is depicted in the diagram of Figure 1.
Create Game Project
Create Assets
Create Scenes
“Drag’n’Drop” Assets in Scenes
Figure 1: Depicting virtual tour creation as a linear procedure
The virtual tours creation procedure consists of the following steps: a. b. c. d.
Creation of the Game Project Creation of the Assets (that belong to the Game Project) Creation of the Scenes (that belong to the Game Project) Drag ’n’ drop Assets in the Scenes. This is called instantiation procedure. The resulted instances are called as Game Objects.
In the following, we describe the aforementioned steps. These steps can be viewed also in the first YouTube demo video: https://www.youtube.com/watch?v=BbBOKCBryvU&t=448s
3.1. CREATE A GAME PROJECT This section describes the first step towards making a game, namely creating a Game Project. This is allowed by the Game Project Manager, an interface presented in Figure 2 upon registering and logging in. The Game Project Manager is the central interface for creating / editing / deleting a Game Project. The left column presents the already created Game Projects by the certain user, but not the other game projects from other users as it was in the first prototype. On the right column, the user can make a new Game Project. The trash bin allows deletion of a project. The deleting process is un-recoverable, however, the mechanisms in WordPress will allow us to make a “remove from trash bin” function in future versions.
12
DigiArt D6.4
Figure 2: The Game project manager allows creating, editing, or deleting a project.
Upon creating a new Game Project, the interface of Figure 3 is shown which is the Project Editor. A Game Project consists by default of 3 scenes, namely Main Menu, Credits and the First Scene, where the latter is the virtual museum scene of the game. These Scenes are the standard scenes of a Game Project and cannot be deleted. We have decided to perform the default scenes creation automatically to aid usability, since all games have main menu, credits, and a first scene. New Scenes can be created with the “Add New Scene” button providing the title and the description of the scene. The new scenes are added to the left of the menu. An example of a second scene is the “Scladina area” named scene.
13
DigiArt D6.4
Figure 3: Game project editor offers the functionalities of editing a game project.
3.2 CUSTOMIZING MAIN MENU AND CREDITS SCENES The Main Menu scene can be edited by pressing edit on the respective scene tile. Then, the interface of Figure 4 is presented. This interface allows modifying both Main Menu and the Help scenes of the game. Here, the main image for the Main Menu can be uploaded. The Main Menu has three buttons namely “Login”, “Options”, and “Help” buttons. These buttons can be removed from the generated game with the toggle switches, if for example the curator does not want the users to login to the game. In the right part of this form, the Help scene can be modified. The Help scene will be presented as an image with a paragraph below the image.
14
DigiArt D6.4
Figure 4: Form for editing the “Main Menu” and “Help” scenes.
Credits scene edit button leads to the interface of Figure 5. In this interface, the curator can upload an image and write some text with respect to his/her organization.
15
DigiArt D6.4
Figure 5: Editing the credits scene.
3.3 CREATING ASSETS In the Project Editor Menu that was shown in Figure 3, there is a button “Add New 3D Asset”. This button allows the creation of assets in the Game Project. This button leads to the interface shown in Figure 6. The first thing that should be decided is the selection of the category for the asset. There are six types of asset categories, namely “Site”, “Artifact”, “Point-of-Interest featuring Image and Text”, “Point-of-Interest featuring Video”, “Door” and a “Decoration”. Assets types define also the fields that should be filled for each asset. Common-standard fields for all assets are the title, the description, and the 3D model. The 3D model is necessary for all assets in order to have a representation in the virtual world. The format supported is .obj for the 3D meshes, .mtl for the material definition and several .jpgs that serve as texture files. More information about the format of the 3D models can be found in the GitHub repository wiki6. The properties of the 6 categories of the assets are described in the following. Site: An asset categorized as Site is the plain, or the baseline of the 3d stage. It usually contains a terrain or a building that serves as a base where the other assets will reside in. In technical terms, a “Site” is a prefabricated asset with a mesh collider that does not allow other meshes to pass through. 6 https://github.com/DigiArt-project/WordpressUnity3DEditor/wiki/3D-Models-specifications
16
DigiArt D6.4
Artifact is categorized an asset that it is interactable and can be selected for examination, for example a bone. Next to the artifact, the title and the description are shown. A POI Image-Text asset gives information in the form of image and text when activated. These type of assets have the extra field “Image”. POI Video asset plays a video when activated. This asset type has the extra field “Video”. Door serves as a gateway between two scenes, or it can serve as a gateway in another point in the same scene. Decoration asset is a 3D model that is placed in the scene and serves no other purpose than to be decorative as implied by its name.
Figure 6: Creating Assets. A “Site” type asset.
Below the text field for providing the description, two buttons can be found for automatically fetching content from Wikipedia or Europeana. The curator can afterwards modify the content according to her/his preferences.
3.4 DRAG ‘N’ DROP ASSETS TO A SCENE AND MAKE EDITS Upon pressing “EDIT” on a 3D Scene tile, as shown in Figure 7, the 3D editor of the scene is
17
DigiArt D6.4
loaded as shown in Figure 8.
Figure 7: Project editor contains the scenes to be edited.
The Assets created, as it was described in the previous section are available to all Scenes in a toolbar on the right-hand side. The Asset tiles can be ‘dragged and dropped’ from the right toolbar into the 3D scene in order to be instantiated as Game Objects (an Asset can be instantiated multiple times). More details are described in the following. The 3D editor consists of the following components: The upper ribbon, which contains the title of the scene, that can be clicked and edited, the “EDITOR” button which is selected by default and shows the 3D environment of the scene, the “ANALYTICS” button which shows the game analytics, and a save button that saves all the changes in the scene. Below the ribbon, an editable description of the scene can be found. The title and the description of the scene will be shown in the game during the selection of the scenes for playing. The 3D environment covers almost the whole screen and it can be used to edit the scene. It contains an avatar, a sidebar of available assets on the right of the screen, and several buttons that perform various actions. The avatar is the physical representation of the player. The avatar position and orientation is stored and inherited in the compiled game as the initial player position and orientation. The avatar is also the orbital center point when
18
DigiArt D6.4
editing the scene. The scene can be viewed also in first person view by pressing the button with the face on the upper right.
Figure 8: The 3D editor allows the editing of scenes.
As it was discussed previously, the sidebar of Assets can be used for inserting Assets into the scene. An Asset can be inserted multiple times in the scene. This is called instantiation of an Asset as a Game Object. All Game Objects inherit the properties and the behavior of the Asset. The sidebar can be moved with the left mouse button (LMB) to other places, and it can also be closed to save working space. Each Asset tile contains information about the title, the size in bytes, and the category of the Asset. Also the “Edit” button can be used to change the title, the description of the Asset, and other fields. The “Delete” buttons deletes permanently the Asset from the Game Project as well any instantiated Game Objects of it in all the Scenes. In order to insert an Asset into the Scene, drag-n-drop the asset tile into the 3D environment. The asset is placed at the avatar position and a 3-axes widget with arrows is displayed (gizmo). The gizmo can be used to move (translate), rotate, and resize the 3D artifact. The mode for each of the 3 aforementioned functions can be selected by pressing the orange cube that follows the gizmo. Apart from the gizmo, static buttons located on the top of the 3D editor perform various 19
DigiArt D6.4
actions, these include: ● ● ● ● ● ●
Translation, rotation and scale of a 3d object Increase or decrease the gizmo size Delete a 3d object Enable / disable the layers of the interface First person mode toggle Full screen toggle
3.5 OVERRIDE FIELDS INSIDE THE 3D EDITOR Upon instantiating Assets as Game Objects in the Scene, the Game Objects inherit all fields from the Assets. However, there is a need for some Game Objects to have certain field values, though they are generated from the same Asset. For example, a Door Asset can be instantiated twice in the scene but each Door should lead to a different Scene. Therefore, we have implemented a mechanism that is activated by right clicking on the Game Object. A form with fields is presented, as shown in Figure 9. Here, the door and the star (POI imagetext) have been right clicked. The door has the “Door Reference Name” which serves as door id, the particular target “Door” in a certain “Scene” which indicates from which Door at which Scene the user will be teleported and a checkbox to denote if the door is a reward item. Reward items appear when all POIs and artefacts of the Scene have been visited. It is a gamification aspect added in the second prototype that provides a simple reason to continue playing. All types of assets can be reward items apart from “Site” and “Decoration” types. Each scene can have only one reward item.
Figure 9: 3D editor allows overriding some Asset fields for each instantiated Asset.
20
DigiArt D6.4
4. COMPILING AND DISSEMINATING The Game Project can be compiled in the Project Editor page by clicking on the button “COMPILE GAME” on the top right corner as shown in Figure 10.
Figure 10: “Compile Game” button is on the top right corner of Project Editor
Then, the platform targeted for defining the export format can be selected by using the drop down menu in the left, as shown in Figure 11. Available platforms are Web, Windows, Mac, and Linux. Then, the “PROCEED” button should be pressed. The compiling of the game project towards a binary or a web page is a single click procedure, though many things happen in the server that can last several minutes depending on the size of the Game Project and the computational power of the server. The compiling consists of two steps that are seamlessly executed in the server. First, the project is transformed from WordPress into Unity3D. Although this is simple to say, it is not straightforward and most of the work undertaken during development was dedicated to defining the theoretical framework for this procedure (D6.1, 2016), (D6.2, 2016). Second, the Game Project is compiled by Unity3D into a Game. This procedure is handled exclusively by Unity3D.
21
DigiArt D6.4
Figure 11: Select a platform for compiling the game.
The compiling into web format will be outlined. Select “Web” for the targeted platform and click on the “Proceed” button. The compiling process will begin and the interface of Figure 12 will appear. The interface consists of a progress bar and some textual information about the steps needed to complete the process. An indicator at right side of the interface shows the memory that the process consumes at the server. The Web compiling process has 11 steps and lasts much more than the other standalone process that have 4 steps. This is due to the fact that Unity3D compiles the game as standalone and then transpiles it into Web format with a special library called as emscripten (emscripten). The Web compiling process can thus last 5 times longer than the other standalone formats. If the compilation is successful then the interface of Figure 13 will appear. It consists of a link to download the Web htmls (or binary if it is a standalone format) in zip format and a link to play the game directly in the Web browser (Chrome or Firefox). If the game is compiled again, the new htmls (or binary if it is a standalone format) will replace the old one.
22
DigiArt D6.4
Figure 12: Compiling for Web.
Figure 13: Successful compiling for Web.
23
DigiArt D6.4
5. TESTING THE GAME After compiling the Game Project as it was described in Section 4, the “Web Link” button can be used to play the game online, or the zip link can be used to download the htmls and install them in a different server. Alternatively, if the game was compiled for Windows, Mac, or Linux, the zipped binary should be downloaded, extracted, and the binary executed. For binary type of games ignore any certification questions as our server is in testing mode and does not produce digitally signed games. The initial page of the game is the Main Menu as shown in Figure 14. The image is the one selected in Section 3 for Main Menu scene.
Figure 14: Main menu of the compiled game.
The help “?” button leads to the interface shown in Figure 15. The image and the text are the ones entered in Section 3. For this certain case, we have selected the image that shows the keyboard-mouse controls for the game.
24
DigiArt D6.4
Figure 15: Help scene of the compiled game
The “Login” button leads to the interface shown in Figure 16. Credentials are useful for monitoring game analytics.
Figure 16: Login scene of the compiled game
On Main Menu, the gear button leads to the interface shown in Figure 17. When Oculus Rift mode is enabled the game will run with VR glasses support. However, this is only feasible for the Windows compiled game. The height offset is used for controlling the height of the user for standing or sitting mode.
25
DigiArt D6.4
Figure 17: Options scene of the compiled game
On Main Menu, the DigiArt logo button leads to the interface presented in Figure 18.
Figure 18: Credits scene of the compiled game
On Main Menu, “Enter” button leads to the interface shown in Figure 19. It is the Scene Selector that allows the user to select a scene for playing. Each tile has a screenshot of the scene, its title and its description. The screenshot of the scene was automatically created when saving the scene in the 3D editor. The gizmos and the other widgets are hided during the screenshot capturing procedure.
26
DigiArt D6.4
Figure 19: Scene selection menu. Multiple scenes are supported.
Upon selecting the “First Scene”, the interface of Figure 20 is shown which is the actual game environment for walking around in the museum. On the upper left, there is the experience bar that shows how many items should be visited in order to release the reward item. In the scene are visible -
two decoration posters, a yellow star that represents a POI featuring image and text a blue camera model that represents a POI featuring video, a skull on a wooden pillar representing a POI artifact, the wooden pilar that belongs to the category Site (because we do not want the user to be able to pass through), and a metallic stand also belonging in the category “Site” for the same reason.
Figure 20: Playing the Game.
27
DigiArt D6.4
Upon clicking on the yellow star (POI image-text asset category) or passing through it, the interface of the Figure 21 is shown. The image covers the left side, the description text spans the right side, and the title is overlaid on the bottom of the image.
Figure 21: Poi featuring Image-Text. Image, title and description positions.
Upon click on the POI video or passing through it, a video is overlaid on the whole screen as in Figure 22 which starts automatically. Any movement of the user results to the stopping of the video and the return to the 3D environment.
Figure 22: Poi featuring video.
28
DigiArt D6.4
Upon clicking on the skull (Artifact categorized Asset) or passing through it, the interface of Figure 23 is shown. The 3D model of the artifact is transferred on the left side, and it can be rotated with the mouse. By clicking on the right side of the panel, the rotation handling stops. The title and the description are placed on the right side.
Figure 23: Poi featuring and artifact with title and description.
Upon visiting all POI and Artifact items in the scene, 3 for the certain scene, a reward item appears which in this case, it is a Door (it could be also an Artifact, or a POI). A green arrow and a caption replace the experience bar, where the green arrow serves as a compass to lead the user to the reward item ( Figure 24 ). By passing through the door, a new scene is loaded.
Figure 24: Reward phase. Green arrow guides the user to the door (reward item) which was previously invisible.
29
DigiArt D6.4
6. CONCLUSIONS AND CHALLENGES FOR THE FUTURE In this second prototype of the Story Telling Engine, we have proven that high-quality virtual tours (3D games) can be generated through a properly designed interface that allows for a straight-forward process and pipeline. There are two main areas where developments took place, namely the developments on the user friendliness of the design tool and the features supported in the game template. Our efforts were concentrated in both areas resulting in improvements in user-friendliness and as support of more features in the virtual tours templates. In the future, many more features can be included in the templates to make the games more appealing. Such improvements consist of, for example, the support of animation and custom lighting that are currently not supported. In the web design tool, there are several improvements that should be done, especially in the web 3D editor of the scenes, and the game analytics. As DigiArt resources were limited with respect to the story telling aspect of the project, as it was mainly focusing on the 3D scanning, we could not give the more attention and develop a more elaborate version with additional more features. Any potential investments in the future could also lead to a template that can generate AR applications for mobile devices, i.e. an AR template.
REFERENCES D2.3. (2017, May). DigiArt Deliverable, Testing protocol, evaluation results and revised requirements (M23, Report). Retrieved from ResearchGate: https://www.researchgate.net/project/DigiArt-The-Internet-Of-Historical-ThingsAnd-Building-New-3D-Cultural-Worlds D6.1. (2016, 6 1). DigiArt Deliverable D6.1 Architecture and Interface Design. Retrieved from ResearchGate: https://www.researchgate.net/project/DigiArt-The-Internet-OfHistorical-Things-And-Building-New-3D-Cultural-Worlds D6.2. (2016, 12 31). DigiArt Deliverable D6.2 First version of the story telling engine. Retrieved from ResearchGate: https://www.researchgate.net/project/DigiArt-TheInternet-Of-Historical-Things-And-Building-New-3D-Cultural-Worlds D6.3. (2017, 1 31). DigiArt Deliverable D6.3 AIV test plan and integration results. Retrieved from ResearchGate: https://www.researchgate.net/project/DigiArt-The-Internet-OfHistorical-Things-And-Building-New-3D-Cultural-Worlds emscripten. (n.d.). The emscripten library for transpiling games into WebGL format. Retrieved from https://en.wikipedia.org/wiki/Emscripten LinuxBatchmode. (n.d.). Unit3D Linux forum thread about “Compiling a game without screen”. Retrieved from https://forum.unity.com/threads/error-on-build-machineerror-opening-default-x-display.425367/
30
