leecammdev

[leecammdev]

[Industry Project] Final Demo Presentation

Below you can find out our presentation for the final demo:

GLOW - Final Presentation

[leecammdev]

[Industry Project] Reading Guide

Introduction

In this project, I worked with 4 other teammates. We worked for a real client. Understanding their situation, analyzing their needs, requirements in order to develop a final product that can solve the problems. We made the decisions based on many researches, the client's requirements. We pitched ideas to the client, conducted many meetings to understand them more clearly. Because of limited time, we tried to implement the main functions that should be in our Game, the features which are our USP. For the working methods, our group worked with SCRUM methodology (divides the project into 4 sprints). We also created user stories and worked with the scrum board tool (Trello) to manage the project.

Design Challenge

Design a 2D game that will help teenagers with autism to showcase their hidden talents. As of the moment, teenagers with autism have a really hard time believing in what they can achieve and are easily discouraged by a lack of self-confidence.

The target group is a mix of teenagers that are at school as well as some others that decided to stop. The feeling regarding school and studying is negative.

The game’s main goal is to help them believe in their achievements or yet to inspire them to follow their dreams.

Phases & Process (This will link to the relevant devlogs)

Analysis

Design

Realization

Validation

Reflection

This industry project gives me a big chance to work with a real client, develop one project in a more professional way. This is also a chance for all of us to prepare some skills before working in a company during our internship. Because during this project, we have to communicate with a client, schedule meetings. This also helps me to improve my skills in Unity, fixing many bugs, working with Git in a big project with many people. At the end of the project, I faced with a problem that my game wasn't work in a build version, but I managed to overcome it. I realized that some stuff will not go as planned, some difficulties will appear and I need to be calm and keep hard-working, the better results will come!

[leecammdev]

[Industry Project] Users Feedback

My teammate conducted user testing with people with autism levels 1 and 2. And below is the feedback from users:

The game is clear

Each tool are direct and easy to use

No music is needed as the silence keeps the user focus

The coach mode is not necessary for levels 1 and 2 of autism.

Likes the options of different modes/challenges.

Likes the premade feedback for the chatroom.

[leecammdev]

[Industry Project] #10 Coach Dialog system

Challenge: How can I make a dialog system in order to instruct the players in the canvas.

Our Unique selling point is a coach mode, I am inspired by the help system in some applications. With the coach mode, players can feel more confident when playing our game.

How did I solve this?

I brainstormed which would be suitable to be the coach mode, and I thought about the dialog conversation which very popular in many games. So I decided to make a dialog to represent the coach for the players. I looked at the tutorial to make a dialog system and add some functions for it. Then I implemented it in our game.

DOT Framework methods used:

RESOURCES:

Dialog system tutorial:

https://www.youtube.com/watch?v=f-oSXg6_AMQ&t=267s

Inspiration:

MS Office assistant:

https://en.wikipedia.org/wiki/Office_Assistant

PRODUCT:

The players need to turn on the coach mode in order to use it.

The sentences are saved in one array, and then show one by one when user clicks.

The Type() is used for the typing "animation"

I also added back button in order to go to previous sentence:

Quality of the results:

The dialog is linked with the coach mode option in setting, everything is worked fine. But there is a small bug, if player keep spamming "Next" or "Previous" button, the characters will showing chaotic. I tried to prevent it by let the button shows only when the sentence fully appear.

NEXT:

We will conduct an user testing and build the game in WebGL and prepare for the final demo.

[leecammdev]

[Industry Project] #9 Premade chat in the showcase room

Challenge: How can I make a premade chat in a showcase room in order to prevent harmful sentences from users.

After having a sprint 3 demo with the client, we received feedback about the chat systems. We realized that if we let users type whatever they want, it might lead to some bad situations that will affect our target users (teenagers with autism). Because of that, I switched the chat to premade sentences so we can easily manage which kind of feedback that users can use.

How did I solve this?

I started this challenge by looking at which solutions can be a good choice to make a premade. I realized that Unity has a dropdown menu element, so I decided to use it. Then I looked at the Unity dropdown menu tutorial and documentation. I implemented it in Unity and showed it to my teammates.

DOT Framework methods used:

RESOURCES:

Unity UI Dropdown Tutorial:

https://www.youtube.com/watch?v=URS9A4V_yLc

Dropdown Unity documentation:

https://docs.unity3d.com/2018.4/Documentation/ScriptReference/UI.Dropdown.html

How to access contents in the dropdown?

https://answers.unity.com/questions/1167834/how-do-you-access-the-text-value-of-the-dropdown-u.html

PRODUCT:

Users can choose a sentence in a dropdown menu then click enter to send the message.

In the beginning, I want to let users click on a sentence and it will send to the chatbox, but it keeps spamming the chatbox so I decided not to use it. Because my teammate did the chat function, so I decided to use both his textbox and my dropdown, I fetched the dropdown's sentence to the textbox, and then the users can press enter to send it.

I get the sentence using its value.

Quality of the results:

This is not lead to the "spamming" message error, the players now can chat using the premade sentences. But it also has some bugs, if a user press enter button right after choosing a sentence, the dropdown will toggle open and close, and keeps sending the message! I will try to fix it in the future.

NEXT:

I will make a dialog system that supports the coach-mode.

[leecammdev]

[Industry Project] Client meeting's slide

We have a meeting with client to explain her about GLOW, so she can understand more about our concepts and ideas. Below you can find our presentation:

https://docs.google.com/presentation/d/1rYZjWIWKonJsh3uI6WnDAv__-XiJd5kMAtie7kYZbuM/edit?usp=sharing

[leecammdev]

[Industry Project] #8 Showing player's paintings and edit function

Challenge: How can I show the player's saved drawing into the frame in the gallery and the showcase room in order to let them express themselves to other players?

The player in our game can choose to show their arts in the game gallery room or the showcase room (chat room) with other players. Otherwise, they can be able to edit their paintings.

How did I solve this?

This is a little bit difficult challenge, I needed to do some researches to find the solutions. I created some rawImage elements in Unity, then use C# to fetch the images in the local folder to the existed rawImage. For the edit function, I just add a script that loads the Canvas scene when the players click on each painting.

DOT Framework methods used:

RESOURCES:

Unity forum:

https://forum.unity.com/threads/how-can-i-create-image-from-image-file-on-the-hard-disk-and-display-the-image-in-image-ui.1044334/

https://forum.unity.com/threads/read-image-from-disk.117866/

PRODUCT:

The image is loaded to the array sequentially.

I make the file name of the paintings similar every time so it will overwrite the existed paintings.

The script to load the canvas scene:

Quality of the results:

This result is not the best solution. If the player has more paintings than the array created, then it won't show the paintings. We are still working to find a better solution.

NEXT:

We will show the Unity prototype to the teachers and a client. Therefore we can see what we can improve in the next sprint.

[leecammdev]

[Industry Project] #7 Saving your paintings!

Challenge: How can I implement the save function in our game in order to let players can save their paintings?

The players in GLOW can draw and express their ideas, and they can save their progress in order to show it in the showcase room or edit them in the future.

How did I solve this?

I looked for tutorials about saving the image file in Unity, and I found one tutorial about taking a snapshot using a Unity camera.

DOT Framework methods used:

RESOURCES:

How to make a snapshot using a Unity camera:

https://www.youtube.com/watch?v=d-56p770t0U

PRODUCT:

When users finish their drawing, they can click the "Save" button...

... a painting then saved in the local folder!

About the technique, I added one more camera and called it "Snapshot Camera" beside the main camera. A snapshot camera just renders the "painting" while the main camera renders the entire canvas (UI, buttons, color picker, etc.)

The SnapshotCamera.cs:

Encoding the file format, set file location,...:

Quality of the results:

The save function worked perfectly!

NEXT:

I will look for how to show the saved drawings in the showcase room.

[leecammdev]

[Industry Project] #6 2D model character implementation

Challenge: How can I implement and modify the 2D model from the asset store in order to make it suitable with GLOW?

Due to the time limit, I take the 2D model which Peter found and implement it in our game.

How did I solve this?

I read the 2D model's script and change some line of code to make the character suitable for our game (delete Jumping function)

DOT Framework methods used:

RESOURCES:

2D model Character:

https://assetstore.unity.com/packages/2d/characters/prototype-hero-demo-pixel-art-186233

PRODUCT:

I commented the jump function in the movement script:

Quality of the results:

The character works smoothly in the game. In the next iteration, we can create a new character.

NEXT:

I will make a save function for the player's paintings.

[leecammdev]

[Industry Project] #5 Making basic pen brush and eraser in Unity

Challenge: How can I implement the pen brush and eraser in Unity in order to draw on a canvas?

The player in our game can freely draw to express themselves. But in this early stage of a game, I just implement the basic brush and eraser while my group will take a look at other functions.

How did I solve this?

I looked for drawing in unity on google and found an asset called "Free draw" - which created for study purposes. Then I downloaded it and start playing with the scripts.

DOT Framework methods used:

RESOURCES:

Free draw asset:

https://www.youtube.com/watch?v=40ylWWrCpkA

Instruction:

PRODUCT:

For this users can change between 3 color, adjust the pen width and using an eraser

Quality of the results:

This is the basic part of a pen and eraser, they still need to be improved for more brush type and more engagement UI.

NEXT:

We will look for a 2D model character and implement it in our game.

[leecammdev]

[Industry Project] #4 User Stories,...

Challenge: How can I get to know more about our target users who will play GLOW?

Our group wants to define our target users based on our researches, furthermore create personas, user requirements, affinity map, customer journey, and user stories so we can start developing GLOW that matches our target group.

How did I solve this?

I participated in writing the user stories and making the personas based on our game design document. For the user stories, we split our game functionality into smaller parts to match with related user stories. We also decided the priority and acceptance criteria for each part.

DOT Framework methods used:

RESOURCES:

Game Design Document:

1 page GDD

10 page GDD

PRODUCT:

Personas:

Customer Journey:

User Requirements:

Affinity Map:

USER STORIES DOCUMENT click Here

NEXT:

Making a basic pen brush and eraser in order to build a Unity prototype.

[leecammdev]

[Industry project] #3 Prototyping

Challenge: How can I create a prototype in Figma to show the client our game's main functions?

The goal of this challenge is to create a prototype using Procreate and Figma to showcase the main functions of GLOW.

How did I solve this?

After receiving the client's debriefing document and research results, I and my group discussed some ideas for showing the main functions and gameplay of GLOW. In this part, I participated in the drawing of game UI on Procreate and the creation of Figma prototype with my group-mates.

DOT Framework methods used:

RESOURCES:

Debriefing Document

Theme/Topic research for the Drawings

Drawing Tools research

Showcase room research

Coach mode Research

PRODUCT:

UI design created by me using Procreate.

Final Figma prototype: Click Here

NEXT:

Showing the prototype in the concept pitch.

[leecammdev]

[Industry Project] #2 Research about drawing tools

Challenge: How can I get to know more about some drawing tools - In this research is about Procreate?

The goal of this challenge is to find more details about Procreate - a drawing app for iPad.

How did I solve this?

Do research about Procreate on Google.

Looking for its features.

Looking for other drawing apps.

DOT Framework methods used:

RESOURCES:

Procreate on Wiki:

Procreate (software) - Wikipedia

Procreate Official website:

Procreate® - Made for Artists

PRODUCT:

Quality of the results:

At the end of the research, I can decide what functions can be used in our game - GLOW.

NEXT:

We will start to do the prototypes to show the game's functionalities.

[leecammdev]

[Industry Project] Game Design Documents resources

Challenge: How can I create a game design document for GLOW?

Our group wrote down all our ideas and what we want to make (which based on researches and client documents) in a game design document in order to have an entire look at our concept.

How did I solve this?

We did some research on some drawings game and use them as inspirations for our game. I brainstormed with my teammates about which functions should be in our game that can help players with autism show their talent in drawing.

DOT Framework methods used:

RESOURCES:

Inspiration:

HUE - video game wiki:

https://en.wikipedia.org/wiki/Hue_(video_game)

PRODUCT:

You can find our group game design documents here:

1 page GDD

10 page GDD

NEXT:

Setup Unity project and start implementing some stuff

[leecammdev]

[Industry Project]#1 Analysis about the project

Problem: How can I do more research about the company/client in order to understand more about them and the project?

The goal is I can have more information about the client - Garage2020.

How did I solve this?

Looking for information about a company on the Internet.

DOT Frameworks Used:

RESOURCES:

Garage2020 Official Website:

https://www.garage2020.nl/

Garage2020's Linkedin:

Garage2020: Overview | LinkedIn

PRODUCT:

Our group made a google doc which has many aspects, my part for this analysis is about the company:

NEXT:

The next step is to do research about existing drawing apps.

[leecammdev]

[My Own Game] #14 Item pickups sound

Problem: How can I implement sounds for coins and other pickup items in Spacenture in order to make the game more interesting?

The goal when solving this problem is can apply the knowledge from the sound design assignments and from the internet to play a sound when pickup items in Unity.

How did I solve this?

I take a look on the internet to see how can I implement sounds for pickups

Use Audacity to add reverb to the source sounds (to make it more "space" vibe)

Implemented all stuff in Unity prototype and then showed it to my peer!

DOT Framework Used:

RESOURCES:

Coin Pickups Sound:

How to make Audio louder?

How do i make the audio louder? - Unity Answers

Reverb - Audacity Manual:

Reverb - Audacity Manual (audacityteam.org)

PRODUCT:

Adding reverb effect:

Before:

After:

Pickups sound: (I just can upload only 1 video due to Tumblr limitation)

Link to our game on itch.io:

Spacenture by Fontys Game Design & Technology, Peterlajos, leecamm (itch.io)

Quality of the result:

The first time, the sounds were too small even I set them to maximum volume. So I looked for solutions in the Unity forum and applied that into the game:

These adjustments for the camera made the sound nearer the camera so it made the sound louder.

NEXT:

The next step is to send a game to potential players and receive their feedbacks and improve the game.

[leecammdev]

[My Own Game] #13 Change Camera Orthographic size when speed up

Problem: How can I change the camera orthographic size when the player uses the speed star?

I decide to make this in order to let players "feel" that the speed is increased and they can see more stuff on the map because now they can run faster.

How did I solve this?

Brainstorm and play around with the cinemachine camera.

Looking for a tutorial on how to change camera orthographic size using C# script.

Implemented the functionality in the Unity prototype.

DOT Frameworks Used:

RESOURCES:

Cinemachine tutorial:

Unity Document:

Unity - Scripting API: Camera.orthographicSize (unity3d.com)

Unity forum:

How to programmatically change virtual cam's orthographic size? - Unity Forum

PRODUCT:

When a player uses the speed star, the speed increases, and the camera will zoom out, after 15s, the speed star effect expired and the camera view back to normal with the speed reset.

Quality of the result:

The implement works pretty well, I added few lines of code in the speed star script to trigger the camera view in PlayerMovement.cs:

And do the same thing when the time out in the TimerForStars.cs:

NEXT:

Next post I will show how to implement the sound for pickup items.