orademaker – Page 4

Streaming Site Mock-Up: CMGTwitch

Introduction

This was one of the most fun courses I had this year, I really like working on UI/UX in general so getting to do that for another subject is great. Last year I scored a 9,5 for UI/UX Design. This course builds upon that one so I knew that I wanted to try and get the 10/10 this time around.

Documentation of this whole process can be found here (evaluation report) and here (product report).

Requirements

The necessary elements for this assignment were as follows;

Find past, current and upcoming lectures, and join them if possible.
Find specific topics covered in recorded lectures so they can skip to what they are looking for.
A built-in chat function that encourages constructive discussions rather than spam.

Research

Twitch
Facebook Gaming
Youtube

Lo-Fi Prototype

In the end, I analysed the CMGT logo to create a colour palette and based on that created a style sheet.

Then I created the first lo-fi prototype. Said prototype can be found here.

This home screen is present in my lo-fi prototype.

The next step was to user-test my first prototype. I did this with three other students. The main things to take away from the tests are:

The top bar is weird, it is incorrectly spaced and the elements feel out of place.
The icon for a teacher on the lecture page is too big.
There should be a filter to find the right module/teacher faster.

Then I worked on the hi-fi prototype. For this, I included the improvements made based on feedback from the user test, an A and B versions and a brief user functionality description.

The homescreen present in the hi-fi prototype.
One of the lectures present in the hi-fi prototype.
The module filter present in the hi-fi prototype.

The prototype can be found here, the form used for testing can be found here.

After letting users test my hi-fi prototype it became clear that the hypothesis was right.
Version B was in fact easier to use in terms of navigation than version A.

Creating the final prototype using HTML, CSS and Javascript. This one can be found here.

In the end, I managed to score a 10/10 on this course. It was a great subject and I really enjoyed working on UI and UX again.

Management Simulation: Food Frenzy

Personal portfolio was a rather difficult subject for me. I had so much that I wanted to do but I did not know where to start. I had many ideas, one better than the other and another way too ambitious. Not knowing better I chose the latter. One of the games I have always wanted to make was an economic simulation game with food trucks.

I created a basic setup for my game in Unity. The main things I wanted to implement were good-feeling camera movement, an object placement system and basic UI. These were the iterations that I made:

The core thing I learned from this was that functionality is more important than visuals when prototyping. This is obvious but it is something I have struggled with before as I like to make everything look decent first.

I also wanted to create three different low-poly 3D models. A food truck, a picnic table and finally a tree. As shown in the videos above already.

3D modelling is something I really enjoy, it feels as if I am drawing digitally.

Finally, the last thing I did was document the general idea of the game. The document I wrote can be found here.

Time to move on to the next part where I continued my work on food frenzy.

Pages: 1 2 3

Interactive Storytelling: G.E.N.I.U.S.

For immersive storytelling, I was tasked with creating a story that deployed the basic elements of storytelling. This whole process was documented to justify the choices I made and explain how all storytelling elements were implemented. The said document can be found here.

To do this, I used Twine. I created over 50 passages, wrote over 8000 words and used over 10 different variables to create a highly interactive story.

The story structure for “The G.E.N.I.U.S. Facility”.

I wanted to write a story that actually had a little bit of meaning to it, while also trying to make the most out of the subject. In the end, I created this story. It is about a boy, named #13, he has been locked up in a facility for as long as he has known. Tasked with creating a solution for global warming he and a dozen other kids just like him have to go to school to work on the Great Invention every day.

As it turns out, he has been working for G.E.N.I.U.S (General Enablers of New Inventions in Uprising for Sustainability) since he had been taken away after kindergarten. When in kindergarten, the children have to take a IQ test on Save The World day. If their score passes a certain number they were transferred to one of the hundred facilities all around the world. Here they were tasked with coming up and creating the solution for climate change.

In the story, I implemented 8 different endings, with the use of variables I made it so that every choice has an outcome somewhere in the story. For example, when you decide to stay in bed at the beginning you will be reprimanded and lose free time privileges for the day. But if you manage to try and escape through the office you get a chance at reading your own file. This file contains an evaluation of the trouble you got in. If you didn’t stay in bed that morning, nothing will be there. If you did, however, it will say that you showed rebellious behaviour on that day.

These little things are what make the story so interactive. There are a lot of different things just like this in the full story, I could list them all here but I think it would be better if you just read the story yourself. Click the button below to do so.

Golf Game: Golf Without Your Friends

At the end of the first year, we finally started with Unity. In my free time I had used Unity a bit before and in comparison to Processing, GxP and Flowlab.io it allows you to do so much more. I was really excited to start working on this subject and I had a ton of ideas.

I went ahead and started working on a golf game. I called it “Golf Without Friends” (a parody of golf with friends) as it is a single-player game.

During the process I followed some tutorials, the most important one being this one. After watching that I was able to implement the movement of the golf ball and the action of controlling it. I then went on to 3D model all of the different holes (levels) I wanted to create.

Some of these levels I based on my recent mini-golf experience. Others were based on inspiration I found on Pinterest. After 3D modelling them I looked for materials that would fit them well.

The final step was to use post-processing, this is where the visuals were improved a lot just by tweaking some image effects. I also added a motion blur to improve how fast it felt to hit the ball and a custom skybox as I wanted real clouds and better environmental lighting.

If you want to play the game yourself, you can click the button below.

Project Final Approach: Spit Happens

The trailer for “Spit Happens”.

I got to work with a great team of fun but hard-working people and we delivered a game we called “Spit Happens”.

The goal of the project was to create a “physics-based” game as the Engineers had just finished a subject related to physics. We came up with the idea of creating a game in which you have to control a llama. The main mechanic is “spitting“. We took inspiration from games like Where’s my Water and Cut the Rope.

As a designer, I mainly focused on gameplay design and merchandising. I did this with one other designer. We started with some level design concepts.

The goal of the game is to take down a hay bale that is hanging from the roof so that you and your Llama friends can eat.

Object	Action
Fan	Blows the spit further.
Crossbow	Shoots down the hay bale.
Button	Takes down the hay bale.
Cannon	Shoots the spit further.
Pipes	Transports the spit.

All actions that each object can perform.

Then I worked on the target group. For this I had to do some research and use the theory taught in the previous term. This resulted in the following target group:

The target group for ‘spit happens’ is all ages but we focus more specifically on the ages of 7-12 and a male audience. Reasons for this are: Mastery which gives them pride, mastery is created by letting a man play against himself. Males experience pride in artificial goals, such as achieving a level 100%.

Then from the age of 7 kids are able to think things through and solve hard problems., at the age of 10-12 boys are more passionate about games and they want to prove themselves. So we mainly focus on that group where the problem solving starts until the more mature age of gaming starts. And our game will be good for mastering which speaks more to men.

As the project progressed further we got our hands on some of the assets made by our artists which we then used to further work out some level designs.

Level one.
Level two.
The sprite sheet.

Soon after we created the levels in Tiled. We created three different levels with a new component being introduced at every level.

Level one.
Level two.
Level three.

Level one.
Level two.
Level three.

Then finally the art was finished and we finished the levels with the new sprite sheet as well as some small updates.

The only thing left to do were the promotional solutions, as this is generally not a very serious part of the assignment we went all out. From t-shirts to socks all the way to an exclusive pringles can.

In the end, I look back at this project with gratitude, I enjoyed working on the game, working with the team I got to be working with and we received a good grade as well. The game can be downloaded through the link below.

Side Scroller: Mud & Madness

Game Design was the first subject for which I had to create a real game on my own, work out the mechanics, the collectables, the setting, the theme and everything else. All of this was documented in a Game Design Document which you can find here.

If the embed doesn’t load or if you want to see the logic behind it, click here.

During the process, I carefully thought about what I would want the game to look and feel like. I first started documenting my thoughts, giving the main character a small backstory, creating my own pixel art and finally implementing the core aspect “capture” (which was the aspect that had to be in there to be graded)

The theme was not so hard to come up with, I had quickly decided I wanted to make a 2D platformer. I am quite fond of M&M’s and thus I chose to go with them as a theme. For the character, I created a little backstory.

He is called “M” because the second M was taken from him when the King banished him. Now your mission is to help M regain his dignity and replace the corrupt King.

This is done by finishing the three levels present in the current game, Mindful Meadow, Magical Mountain and Mythical Museum. Notice how all of these levels result in M&M when abbreviated.

Some of the animations I made for my game using Aseprite

To make sure that the “capture” element was present in my game I implemented a few things. According to the dictionary, capture means to collect or take control of. This is shown in all the collectables scattered around the levels. Each can be collected and award the player with a different amount of points. These points will be shown on the UI and a sound will play.

This subject was also the first time I made UI for a school project. I struggled a bit because I had never done pixel art before. In the end, I am quite happy with the results. I wanted to go for something inspired by wood, I wanted it to be subtle and see-through so as to not interrupt the gameplay too much.

The final UI that was implemented in Mud & Madness.

Another part I really enjoyed working on was the sound design. I found three great background tracks.

The hardest part of making this game was getting the character right, the movement was difficult to program. How high should you jump? How fast should you run? These questions were all answered during the review and feedback part of the subject. People played my game and told me what they think is good, what could and/or should be better and more.

Background music for Mindful Meadow

Background music for Magical Mountain

Background music for Mythical Museum

This subject was really one of the best subjects I had in the entire first year. I enjoyed it thoroughly because I had a lot of creative freedom and I was creating a game as an assignment. Who doesn’t like that?

If you haven’t already, please play the game and see what you think!

All the art assets I made for my game.
A mockup Nintendo Switch cover I made for the game.

Board Game: Hammer Slammers

–

The first project of my study, CMGT. The goal of the project was to create a board game inspired by one or more digital games.

We thought of fun ideas and eventually came to the concept of creating a board game inspired by fall guys, the player(s) would have to throw a dice to reach the top to finish as fast as they could. We worked out different obstacles that the player would need to pass.

The board would be divided into three layers, each more difficult than the other. The gameplay would feel a bit like “Ganzenbord“, touching the wrong cell will see you being moved back and getting lucky would see you jumping in front.

The first few steps of designing the board

We asked one of the artists to create different tiles which we’d place on the board to show what action needed to be taken. I made the board in Blender 3D, and during the two weeks, we made three different iterations.

The first iteration with basic colour-coded mechanics
The second iteration with textures added
The final board

The first iteration was just to test if the game worked and if the cells were in the right place, and then we moved on to the second one.
This also was not yet what we wanted and it didn’t look that great.
Also, the artists were done with the tiles and so I decided to work on the final board, one with different stones as cells. Each cell that needed a visual tile on top of it had one and the game played well.

During the process, we also thought of a little backstory. Basically, princess pineapple was captured and the pawns (each with their own little backstory) had to try and save her. The first to reach her would win her hand and thus, the game.

The only thing left to do was to create an imaginary box in which we’d sell the game and create a game trailer which you can find below.

Maze Game: The Search

In 2020 I decided I wanted to study CMGT, and this led me to Saxion. To get into the study I was tasked with creating a game, this could be a game based on one of three themes out of which I chose “Maze“. As the coronavirus was just starting to reach Europe and the Netherlands I decided it would be fun to make it relevant to our situation.

The first thing I wanted to was to draw some ideas that I had, so for example I had to think of different player models/outfits, different obstacles/decorations, different backgrounds/places and different textures I’d need.

As you can see I went with an absurd one and then chose two others that would make more sense. I didn’t really like the doctor in the end so I decided I’d do something with the hazmat suit.

The goal of the game was to find a cure for the virus. I placed this at the end of the maze and created obstacles in the shape of coronaviruses that would kill the player if they’d touch them. I rigged the character following a tutorial and I used a free asset from the store to get the third-person movement I wanted.

The last, and possibly most important part, was the maze itself. I made this in Blender 3D and then UV unwrapped it so that I could put a material on the walls in Unity.

All of this resulted in the game I called “The Search“. I was pretty happy with what I accomplished in the two/three weeks that I worked on it. I passed the intake exam with a “good” (on a scale of insufficient, sufficient and good)