Daniel Nael
Repo
Live demo
There are many courses where one needs to read materials, participate in lectures and complete exercises to gain new knowledge. What if we had an interactive system where one could learn through playing a game. The upcoming course "Evolution of Video Games" pursues this idea that a student could play and learn at the same time.
Virtual Tour Game (VTG) is a game where the player is in virtually touring in LVLup! museum. Their mission is to explore and gain points by solving quizes, watching videos, reading ... - studying while playing. All these points are connected and synchronized with Moodle to assess the player's knowledge about video games history. A character in VTG will guide the player and gives objectives the player must realize.
VTG is an HTML, JavaScript, CSS game and uses Marzipano for 360° view and LTI for connecting VTG and Moodle.
In short VTG features:
- 360° virtual tour in LVLup! museum;
- interactive study materials (videos, texts, etc) about evolution of video games;
- connection with Moodle to assess students;
- quizes and tasks the player has to solve;
- visual novel type game where a guide gives the player objectives;
- pointing system to assess knowledge of the player.
Milestone 1
- Artwork created for the game [2h] -> [3h];
- buttons
- hotspot icons
- characters
- Interactive quiz/dialog system base created [4h] -> [5h];
- Test scene set up [1h] -> [1h].
In the end milestone 1 was successful. All tasks were done but some things like creating artwork and setting up test scene took more time than was planned. The hardest part was to create the art because nothing seemed to work. Here are some examples:
Unfortunately the final result isn't actually what I want so I wish to continue improving graphics in milestone 2.
VTG now has:
- quiz/dialog system. I customized SweetAlert2 with CSS and used it to display how it works.;
- characters;
Milestone 2
Now, that Milestone 1 is over, I have a base systems for VTG. It's time to polish these systems to get ready for taking images of LVLup! museum.
- Improve artwork. [1h] -> [1h]
- Polish dialog system and make database connection. [5h] -> [7h]
- Get ready for taking pictures of the museum in Milestone 3. -> [2h]
In the end of Milestone 2 VTG now has improved characters:
I thought that I should not take a different path creating characters but trying to improve existing ones and give them more unique shapes.
I also managed to polish dialog system (especially code) and connect VTG with database by modeling and creating tables for it.
Finally, I took some pictures and used Microsoft Image Composite Editor (ICE) to create panoramas. The main idea is to take as much as pictures as possible and let ICE automatically to add them together for panorama.
Milestone 3
While milestone 2 featured more about developing in the back end of VTG then now milestone 3 is a full-stack development milestone.
- UI improvements [3h] -> [4h];
The goal is to create everything in consistent style and choose possible solution for final product:
- dialog UI;
- hotspot show UI;
- video player UI.
- Points system [2h] -> [2h];
- Database query polish [1h] -> [2h]
Now the VTG features polished GUI with test video and customized hotspot UI. You can see the comparison (new layout vs old) from the images below.
New:
vs old:
Also the system with points works and database is more polished:
- links between tables;
- new procedures;
- modified procedures.
Milestone 4
Milestone 4 is one of the most important of other milestones. It's time to take spherical pictures from lvlUP museum.
- Take pictures from lvlUP museum and process them to be spherical. [7-8h] -> [10h]
- Implement test scenario
Milestone 4 was successful because a lot of pictures were taken from lvlUP museum and processed spherical. Although, there are some visual defects that need to be enhanced that can be done manually using Gimp or Photoshop.
Additionally, test scenario was implemented to see if the system works as expected.
Milestone 5
Now we have pictures of lvlUP museum, it's time to add everything together and polish the system before making Moodle connections.
- Fix GUI based on feedback from previous milestones [4h] -> [4.5h]
that also include:
* more stylised look * big character on screen!
- Add all scenes of lvlUP museum to VTG [2h] -> [2h]
- Code refactoring [2h] -> [2h]
I managed to finish all tasks from milestone 4.
Now the VTG features all the scenes from lvlUP museum but they still need fixing. You can check it from the test web page.
The most hardest part of this milestone was to style the application. The CSS has lot of options how to style a web page. I am still not 100% satisfied with the result and will try to improve it.
Milestone 6
Milestone 6 will still be a polishing milestone. The most important is to still polish the GUI of VTG and museum panoramas.
- GUI improvements [2h] -> [45 min]
- Fixing lvlUp museum images [6h] -> [10h or more] (In my opinion the task is fulfilled but not so successful)
In milestone 6 I fixed museum images. The main problems were jagged surfaces of objects or out of focus images that need to be in focus. I think I managed to do the milestone task but a lot of work is still needed and maybe a better approach.
Here's what I tried to do:
- Take out blurry objects and replace them with more detailed ones. It is a good idea in my opinion but I encountered some problems with projecting it to the world without creating bigger problems.
- I tried also to "draw on mistakes with stylized content". It is a hack indeed but I have to consult if this is a good approach.
- Then I tried to restitch pictures but as it requires a lot of time (computer processing, me choosing the right pictures) I did not get good results for this milestone.
In conclusion I need more time to try to fix these images for demo version. I think I am going to still try to replace blurry objects with some stylized replacement and when it is needed then I can hide mistakes with characters from the game.
I also tried to work improve GUI and visuals a little bit by choosing different colors, creating some new icons and adding higher resoulution characters to game.