#industryprojectrealization

[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] #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] #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.