Process through Images
About the App
Watch the Video
The project was for the Royal Green Jackets Museum. It's a museum based in Winchester that tells us about the Wars that took place and also gives detailed information about soldiers and every thing related to army during that time.
Our job was to make an app for little children who visit the museum either as a school trip or with their parents and grandparents. The app should keep the kids engaged and keep them interested. Our target audience would be aimed for children ranging between 8 to 12.
We created a mobile app called Royal Green Jackets Game. Reason will be discussed later in the report. We decided to add multiple choice questions, puzzles and drag and drop games for kids. The answers to the questions are very easily visible in the museum as it is aimed at kids. The app has a light color palate so that it looks inviting and so it does not look dull. It also has illustrations so that it doesn't fill you up with text. With the multiple choice we have just 3 options instead of 4 because less options makes it a little easy and giving too many options confuses the user.
My Design contribution
I am a developer however I did contribute to the design of the app. My contributions were: -
1- Navigation System
I strongly recommended to the group of having navigation options at all times. I have not created the assets but I put forwarded the idea, which I believe was very important.
The original design that we took over from the previous group was that you only had 1 way to go which was forward. If the user wishes to leave the game or wanted to look at the instruction, he couldn't because the app doesn't allow you to. That's why I thought of adding a home icon and an instructions icon on every page so that the user knows what he/she is doing and always has the option to leave and try something else in the app and not wait for the specific game to finish. I also thought about adding audio to the app but then it occurred to me that it's a museum and you're suppose to be quite or speak softly. Hence we dropped the idea but in our original plan there was audio.
2- Your Rank
As a group we thought that at the end of the game the app would display how many questions the user got right and depending on that display a certificate that the user would earn. My idea was to display their last score on the home page so that they can always know what their last score was.
Firstly we called the app Royal Green Jackets Museum and not something else because firstly we thought that the museum name should be there plus this will help recognizing the app very easily if it was on the app store. The name was too long so we called it "RGJ Game" which stands for Royal Green Jackets.
In early days of development when the designers were creating assets for the app, I thought that I should start testing the methods and figure out how things are done rather then leaving it for later.
For the puzzle game I just randomly downloaded an image from Google and started to practice on how the puzzle game would work. To play the puzzle the user has to tap on the image and each time he/she taps the image rotates 90 degrees. So in short all the user has to do is get all puzzle peace's to correct rotation. When all the puzzle pieces are put in to correct rotation you go to next question.
The puzzle game works with 2 scripts. 1 script that lets the image piece rotate 90 degrees and other script recognizes the rotation of the puzzle piece so that when the puzzle is complete the user is taken to next question.
The rotation script uses the function "On Mouse Over" and recognizes if the mouse has been clicked (or tapped on mobile) change the rotation.
For the actual detection of the object it uses the "Update" function and checks if the stated mentioned is true. In this case 8 variables have been determined that are the 8 puzzle pieces and if all 8 pieces have been turned to a specific Vector 3 rotation then change the scene as in go to next question. It uses a method eulerAngles to determine the rotation.
I faced an odd problem here. The game seem to be working and does not display any errors however when I export the app on my phone the puzzle detection doesn't seem to work. It was very strange and is the only problem I could not find a solution online. I even posted my problem online in hope that someone would have faced this problem but Unity rejected my question. Being less on time I had no option but to leave it for the moment. It works perfectly fine on my computer its just my phone and it is odd because if something works or doesn't work on your computer it is mirrored on the phone however it's not the case in this situation.
For the drag and drop game I practiced by dragging 4 cubes into correct place. Firstly it uses functions "On Mouse Down" and "On Mouse Drag" so that the object can be dragged with your finger. I had added a variable that defines the correct target of the correct position of the item being dragged and where it needs to be placed. It uses the function "On Trigger Stay" to know if you drag the object to the correct place it snaps to new position displaying that you found the correct target else the object is placed back where it originally was. It uses the collision method to recognize that if the object collides or hits the correct target then snap on to its position else place it back to its original position.
The timeline game was a bit of a challenge. Since we decided to have a timeline game later in time hence I did not get to practice the method earlier. Essentially the game is that you have 2 pages where the timeline is divided in 2 pages and we need a third page that has all the events in. So the user goes to the events page and choses the event and places it on screen 1 or 2 (wherever they think it's correct) and then drag the event to the correct time.
I had to come up with a way to transfer variables to different scenes. I believe static variable is what I thought of how to do it but then I thought of having the entire timeline game in just 1 scene than 3 different scenes. What happens is when you click on the events page or next timeline page it displays you that page. But what it's really doing is moving the camera from one position to another giving the illusion that the page changed.
In terms how it works, it uses the same method as the drag and drop game as if dragged to correct target, snap on to correct position else place to another position. There is a slight change. I have also added a new variable on the events page button so that if the user drags an object to the event button that places the object back into events page.
In order for this to work in just 1 scene I had to duplicate the events objects since they can be called to be displayed on either page 1 or 2 and they are all in one scene so that was a little challenging. Hence duplicating the objects and positioning them to different places was the way in which I got around the problem.
I did not practice any multiple-choice questions because it was fairly simple and I was confident that I could get it working. It uses the same function as previous ones "On Mouse Over" and say when clicked take user to new scene or next question.
At the end of the game the user will get a review saying how many questions they got correct. Since this idea was introduced later in time hence I did not get to practice this earlier.
So the review page has 3 jobs to do. Display how many questions the user got right, depending on how many question they got right you get the certificate and lastly save the last score even if the app quits. All this is done by just 1 script and it uses a method called PlayerPrefs. Player Prefs creates a database where it keeps storing data, which does not reset or disappear even if the app quits unless told to do so.
At first I thought of adding just one PlayerPref tag and increasing the "setInt" value depending on how many question have been correctly answered. I placed this script in the "Start" function but still every time I answered the question wrong it would tell me that all the answers were correct which obviously meant something was wrong. I even added a score variable that would count the number of question you got write but it still didn't work. Then something occurred to me. My method was that variable score would be 0 from the beginning and as soon as the user keeps getting answers wrong then increase variable by 1. However the variable would not go beyond 1. No matter how many questions you got wrong it would it would still say that you only got 1 answer wrong. It occurred to me that having the same PlayerPreff tag was getting rid of the previous data hence it would only show 1 question wrong as the script says if answer is wrong increase variable by +1 and every question has the same PlayerPref tag but different integer.
So the way I got around this problem was I created different PlayerPref tags for every question and then they only had integers 0 and 1 and determine whether the answer was correct or not. 0 saying correct and 1 saying question wrong. Then it all worked fine.
With review you had 12 questions and 5 certificates. The way this works is that if you achieve 2-4 questions correct you get x certificate and if you achieve 5-7 questions correct then you get y certificate. So in the code I had to write an if statement for all 12 Player Prefs integers one by one as I had to display how many questions the user got right.
As PlayerPrefs saves and retrieves data even if you quit the app, your last score will be visible on the home screen even if you quit the app and comeback later.
What else could have been done?
If I had more time I would have added a high score system instead of just displaying your last score because it should not be that difficult and besides I am half way there already by displaying your last played score.
I would have also added a new section on the home page called level select which means that if the user just wanted to play the multiple choice questions or he just wanted to play the drag and drop game or any of the puzzles he could straight away play it and not have to play all the game to play just one single game. And by the way the user will have to play the full game at least once to unlock and play specific games in the level select page.