Mini Brief: Creating A Shop Front

Brief:

the task of this project is to create a shop front for a building that would feature in the town centre. This building is based on the real world being realistic and common. It is to be 3d Modelled for use in a video game engine as part of a shoot ’em up game.

Pitch/My Idea

Since the buildings in this project are going to be in a town centre there are certain buildings which fit and certain ones that don’t. Food shops are a big part of a town centre as this is usually a place for social gathering. Therefore my pitch for this project is to create a bakery. The building will be semi-attached feature a side alley that acts as access leading to the apartment above the shop. This can be used in the game as a resource area or as a way to access the roof. The current plan is to have a garden roof, meaning that it will be flat, surrounded by railings and contain furniture and homely decoration.This would act as a good vantage point in the game that allows the players to get a bird’s eye view of the map. The player does not reach the roof using the apartment however it is still reachable via a fire exit ladder placed on the side of the building.

The shop front itself will technically be on the first floor rather than the ground as a downstairs storage room will be accessible from the outside via steps that lead downwards. This then means that the entrance to the shop will be small steps that bridge over the top of the downstairs. To make this clear that it is a bakery it will contain the typical feature of a canopy which will be out during the day. Just above that would then be the sign displaying the name of the shop to recreate the realism.

The appearance of the shop changes depending on whether it is day or night. When it is the day the shop is open with the canopy out and the products such as pastry and cakes can be seen on stands through the window. At night time, however, this appearance completely changes as the shop is shut. Since it is bakery it is likely that the shop would not be open on a night time. To show the canopy is now folded away and the window is no longer visible as a metal grate is pulled down and locked over it, adding security. The apartment above now comes to life, the windows are wide open with lights flashing on and off and lots of noise echoing out. The sign of the bakery is now hanging from one hinge revealing the name of a gambling club located on the floor above. To make sure apparent that it is an illegal gambling club certain indications will be visible such as cards and money will be stickers plastered on the windows.

If this building were to be used in a game it could be done in several ways. The bakery could act as a place where the player can regain health or possibly by more food for further adventures. The club above would act as a mission that the player can only access at night, where they have to infiltrate and shut it down.

Research

To help with this project I went out looking for unique buildings that could possibly bring something to my building. This included possibly window designs, roof designs, and canopy designs. As well as this I also looked at buildings that had the design which I decided in my pitch.

Sketches

I created initial sketches of my building that allowed me to possibly look at different varieties of the design. This was mainly to help me come up with a design for the side entrance in the alley as I wasn’t sure how it was going to work.  It also allowed me to combine some of the ideas that I had from my research into my drawings.

Photobash

Before taking my design any further I wanted to create a ‘photo bash’ in photoshop. This way I could see if the different designs elements actually worked together. When doing this I found that there were some tweaks I had to make to my design such as the alley entrance as there was no space for the ladder that leads to the roof.

Photobash.png

SketchUp

Before modelling my building I decided to go into SketchUp and create a quick mockup of my building. This way I could visualise what the final outcome would look like and what I feel needed to change. After doing this I could tell that the rooftop access didn’t fit in as it was too bulky and looked out of place. Therefore now the only way to reach the building will be via the ladder down the alley.

Mock Up

Scale

To make sure that the building was the correct scale I looked up what the minimum height must be from a floor to a ceiling. This helped me create the three stories of my building. As well as this I found out the average size of a brick and a door so that I was able to create the width of the building that looked in the correct proportion. Since the maximum width limit was 7m I decided that my building would be 5 metres, this way I would have plenty of space for the door, its frame and the large window looking into the shop.

3D Model

With my measurements I had found for my door I was able to create the basic shape of my building. I added all of the details for my building simply using the bevel and extrude tools as this allowed me to create the trims and roof of my building. For things such as the canopy and the windows, I did them as separate objects so that they would be easier to edit later on. I added a little detail to the side of the building as its only purpose was to allow access for the player to reach the roof, therefore I simply added a ladder onto the side, as well as a train pipe which went all around the building. The overall building turned out really well and looked similar to my original drawings and my photo bash. The final poly count was 5000 with this building and the reason for that is the railings. Since the railing contained lots of cylinders it had a high poly count, even though they had a few sides. Without the railings, the final poly count only came to 1500. To make sure my window would be transparent I also made sure that I cut out a full behind them using the slice tool, this way the inside of the building could be visible. However, since I wasn’t doing an inside to the building I decided to place a small box around the inside of the window. Therefore the non-existent back of the building could not be seen. For this project, I decided just to model the daytime version of the building as it contains the most detail and would allow me to add texture to the windows.

Texturing

This was my first large-scale attempt at texturing and also my first time using substance painter. At first, I found it extremely hard as I didn’t understand what I was doing. However, after seeking the help of my fellow group mates I now have basic knowledge of the program. When texturing I tried to show a good contrast between certain parts of the building so that it was broken up and added more depth. A good example of this is the window frames. I decided to do this in a dark brown wood texture to add separation into the wall. I also did the door and frame a completely different colour so that the door is clearly visible. When in substance painter I made sure that I exported my material as a PBR, giving multiple layers including roughness, metallic, and emissive. I separated each component of the building and UV mapped them separately as this was easier for texturing. I then brought the textured versions all back together in a single 3ds max file so that it could be imported into Unreal Engine.  I didn’t texture the windows as this is something my fellow student would help me to create when in Unreal Engine.

Texture Maps

Here are all the base colour maps for all the different textures that I used for this building.

Unreal Engine

Before texturing I imported my model into Unreal to make sure that it was the correct scale. at first, I found that my player was nearly 4x the size of the building and clearly that was wrong. I found that the problem was when exporting the model as an FBX in 3DS Max I had to change the units to match those which I worked in. This worked and my building was the correct scale.

In Engine.png

After importing my textured building into Unreal I was able to add the other PBR maps to the different components as they were set as different material ID’s. This was fairly easy to do and made a huge difference to the final outcome.

30bdeaa1fafc7e24d157b01104556946305885b004beda578b5d1aa44e4216170400f63c22255381abac06763dc77f0d

The Street

In unreal the whole group imported the FBX of their buildings so that we could create the final street for this project. To help with the layout I decided to create a road in 3ds max as this would allow us to easily figure out what buildings were meant to go where. It also filled out the gaps between the buildings. The centre of the road appeared empty so I decided to add a railing in using the options available in 3ds max. This forced the player to run on the path instead of cutting across the middle. Even tho my building was textured I imported my untextured version into the street as I felt like it looked odd being the only building that was textured.

Evaluation

Overall I am happy with the outcome of this project especially since it was my first time texturing a larger scale model. This project allowed me to experiment with new programs such as substance painter and unreal engine and grasp a basic understanding of how they work together. In my previous attempts at texturing I have simply done the entire model as one UV map however by separating the individual components like I did with this project, I found it much easier to keep track of what part was what in the UV map. It also made it simpler when actually texturing in Substance painter as there was no chance of the texture spilling into another part of the model.

Creative Futures Summary Post: Semester 2

Vehicle Design Project

The brief

Michael Tschernjajew Research

Atomhawk Research

Todd Marshall Research

Vehicle Research

Initial Sketches

Developed Ideas

Physical Model

Final Vehicle

Creating A Bridge

The Brief

Pattern Language

Bridge Research

Concept Art Research

Lasso Technique

Initial Sketches

Lasso and Photobash

Final Bridge

Presentation

Bridge and Printer

Experimenting and Rendering

The Boxer

Full project

Boxer Environment

Pride and Joy

Full Project

 

Creating and Inventory

Full Project

Anatomy and Portrait

Human Anatomy

Portraits

 

 

Introduction to Games Design Summary Post: Semester 2

Game Models and Ludic Loop

Game Models 

Ludic Loop

Children’s Book Adaptation

The Brief

Initial Ideas

Concept Art Research

Ideas

Environment Sketches

Character Weapons

Heads Up Display

Developed Environments and Game Cover

Animatic

 

Mobile Game Concepts

Group Game

Individual Game

Source Control

Source Control

Rabbit Heart

Character Concept

Game Testing

Test 1

Test 2

 

 

 

Children’s Book Adaptation: Battle Scene

The final part of the Wizard of Oz project was to create an animatic showing a battle within the game.

For this, I decided to use my previous concept of the emerald planet and had the fellow group members make small soldiers which I could animate and make look as if they were fighting. I created it in After effects as it easily allowed me to animated the individual components. After moving all the soldiers to the centre of the battlefield I felt like it could use something it to finish it off. I decided to add smoke coming from the centre, as if one of them has let off something magical, and also a bonfire in the background possibly coming from a burning village. These were both done with the particle playground effect.

The purpose of this animatic is to show the separation of good and evil and how they are at war. The would possibly be shown as a cinematic in the game before the player begins fighting amongst the soldiers.

Improving Anatomy and Portrait Drawing

Throughout the second semester, I have been working on a mini brief of improving my anatomy and facial expression skills. To do this I have been drawing myself in a mirror, as well as my friends a couple of times every few weeks. The main goal I was trying to achieve with this was to find a likeness. To be able to tell that the drawings of me were actually me. The way I did this was by practising with the facial shape as well as the shadowing that makes certain areas more visible, such as the cheek bones. I also did a fair few portraits of celebrities from a list. These celebrities had unique facial shapes and features which made them instantly recognisable, It was my goal to come make this happen with my drawings.

To experiment with a range of media I decided to try using different methods and see what the effect did on the final outcome. Some of the methods I used included charcoal and a brush pen. When doing this I found that the charcoal was best used to create the shadows on the portrait as it was easy to smudge and blur. The brush pen certainly made all the detail stand out more but it also gave the portrait a different style. The bold borders gave it that comic book character look that appears defined.

I decided to also have a go at drawing one of the celebrities from the list that we were given. I chose the actress Wai Ching Ho as she had an interesting face which would be easily recognisable. For her, I used a mixture of pencil and charcoal to create the shadows of her face. Once I was done I decided to show my family and friends the portrait and had them guess who it was. They were easily able to guess who it was which is good as it meant that I achieved my goal of gaining a likeness in the drawings.

To increase the detail on these portraits I also added colour to them in photoshop. The main reason was so that I could easily add highlights and shadows to certain areas of the face, for example, the nose, to make it look realistic and not flat. reflecting on this I realise that by doing this it also will benefit me in the future when I create character concepts as I will be able to create them to more realistic detail when in photoshop compares to my previous character attempts. My first attempt at this went away from the detail and refined outlines as I just wanted to experiment using the burn and dodge tool to try to create skin tones. I feel like this isn’t bad for a first attempt however the shading needs to be more consistent so that the features of the face such as the cheekbones and the nose appear more defined and not just flat on the face. The second attempt took this on board but also did the outlines as I felt like the first attempt looked sloppy and as if it was rushed. I wanted to spend a little more time on it, trying to make it look closer to a finished concept.

 

Rage Watercooler: Questionnaire

To help further test the Rage Watercooler game as a group we began testing it again. This time we started off with a questionnaire giving details about the type of person I am including what type of games I like and how regularly I played games. I presume this is done as a way of measuring if it appeals to a regular gamer.

I then tested the game playing both versions for roughly 15 minutes each. Since I have played it before I remembered the basic idea of the game. After finishing I then completed another questionnaire. This one was more specific to the game. For example, it had questions saying if the game would be played regularly and if it was easy to understand.

After finishing the survey my main complaint was the way in which information was given to the player. Since it was all told the very second you start to play it is easy to forget and you end up with no clue what to do. To improve this I think it would be good to implement the cascading information mechanic. This was only little bits of information would be shown when the person needs to know it. Allowing them to easily learn the game.

Portrait Sculpting

As part of my Creative Futures module, I am trying to improve my anatomy drawings skills. Since this gives me a better understanding of how the face shapes together with the different bones I also thought it would be good to try and use these skills to create characters face in sculptures. For this task, I used one of my drawings of the another member in my group as well as just by looking at him.

I then had a go at creating a self-sculpt of myself concentrating mainly on the face shape and features rather than things such as the hair. When doing this I found that I was certainly creating a realistic and proportionate head, however, I was struggling to find a likeness. The main problem I found was the shape of the nose. I couldn’t quite create the correct shape for the nostrils of the nose as they kept looking flailed and too far off of the face.

First Attempt.png

Comparing this to my previous attempts at character modelling, my sensei in the Creative Futures Boxer project, I can see that I have certainly improved in the overall shape of the face. With my sensei, I was happy that he was old as it meant that I didn’t have to do hair. When doing hair with this project I felt like I didn’t d too much of a bad jump as the person’s hair was wild and crazy so it didn’t have to be precise and combed.

Sensei Model

Children’s Book Adaptation: Developed Environments and Game Cover

With my initial sketches, I was then able to go into photoshop and add colour to show what the environment is actually like. For example, the drawing of the planets does not show what environment they are filled with, therefore I added the colour, for examples green for the forest planet, so that it was obvious what this planet was.

Scan_20170413

It also allowed me to finalise my concepts and refine them so that the outcome was clear and gave a good visual for our game. One of my environment drawings was Emerald planet but this was not clear as it just looked like a modern city with skyscrapers, therefore by adding the emerald colour and the corruption from the witches castle I was able to make this apparent. I wanted the corruption part to look like it was bare land like a volcano, impossible for nature to grow or animals to survive and so I did this by using a dark grey to give the idea that ti is bare rock.

One of the galaxy layouts was perfect for the game logo and I decided that this would be good for a design of the game cover. In photoshop I wanted it to look like the book since our game is based off one, and then the logo would be a textured gold to represent the yellow brick road galaxy. This design is simple yet effect but before setting on this design I also took one of my environments and made that it into the game covers. To improve this further in the future I would like to take the Dorothy character design from my fellow team mates and insert her on the cover, but only slightly visible.

Game Cover design 1.png

After all of this, I then decided I wanted to create another environment concept this time focusing more on the witches tower as it would be a key environment in the game as this could possibly be the location of the final boss fight. I wanted to recreate what I did in my previous drawing in which it shows a castle on a mountain, however, i wanted this to be more detailed. I had the idea that this castle used to contain royalty or maybe used to be owned by Oz himself but because of the corruption of the witch it has deteriorated over time and crumbled. I used photoshop so that I could imitate this and make it appear like a dangerous sd environment rather than it just being a sketch. I am glad I decided to create this as it gives me a better visual of how the game would possibly look. It even shows me that the broken bridge in the drawing could be the final cutscene of the game as this is a hard to reach a place that the player has not seen before.

Witches Castle.png

Children’s Book Adaptation: HUD

The inventory system for this game had already been completed as part of a project in creative futures and can be found here. The basic idea is that it is a satchel which is visible on the hip of the character. The inventory HUD will show the actual inside of the bag.

Heads Up Display

The heads-up display is an important part of a game as it gives the player relevant information that will allow them to achieve a task. The most simple form of HUD usually contains the player’s health and a map.

Research

Before creating any designs I decided to look at how other games have approached the HUD and see if that could inspire me with my designs.

Halo 3

The Heads Up display in Halo 3 has been designed to match the sci-fi style of the game. This is done by making the HUD partially see through so that it gives the illusion that it is a hologram. It keeps basic and simple colours so that very little in happening on the screen. The reason this is done is so that it does not distract the player from the actual gameplay itself. Only vital information is shown that is needed for the player to enable them to figure out where they have to go/where enemies are, and how much health they have. In the third iteration of the Halo franchise, the health bar acts as a shield. When it is fully depleted the entire HUD flashes red, implying that the player is one shot from dying.

18iy7cvdhx56vjpg

World of Warcraft

The HUD is a very important part of Blizzard’s World of Warcraft since it is an MMORPG. Lots of information has to be shown on the screen that gives information to the user specifically and also information of the other players on the game. The HUD tries to be as compact as possible, containing small icons that are barely visible to ensure that not much of the gameplay screen is taken up. Since World of Warcraft is a fantasy game the HUD is also created in this style. It is made to be elegant and appear like it is made out of stone with engravings to show a high level of detail. The customise mechanic is heavily used within this HUD as the player has complete control of the position of the HUD. For example, the skill bar can be moved from the bottom to the side. As well as this the style of the HUD can be changed be the player. The game allows users to insert their own theme which can change the entire style of the HUD.

download

Elder Scrolls V: Skyrim

The approach to the HUD is very different in this game as Bethesda have tried to minimise this as much as possible so that there is more visible gameplay for the user. The majority of the HUD including the health bar and stamina bar are hidden until the player enters combat as this is the only time when the player needs to see it. However, this is minimised further as the health bar and compass as combined due to the fact that the player will not need to see which was is North when fighting an enemy. The most common element of a HUD in an RPG (role-playing game) is a mini-map as this allows players to easily find available quests. Instead of having this Skyrim simply has a compass bar at the top of the same which essentially does the same thing but with the benefit of taking up less space on the screen.

Dead Space

This game uses the HUD in a very different way as it is an actual physical design in the game that is not just what the player can see. The character you play has is wearing an exo-suit which has two LED meters on the back of it, these act as the health bars. BY having this there is no need for extra bars that cover the screen, the health is shown in the same space as the character in a unique way that also adds to the sci-fi style of the game. Another element of this HUD is the ammo. Usually, in games, the ammo of the carried gun is shown at the bottom corner of the screen whereas in Dead Space it is simply shown on a LED screen on the gun itself, which can be seen when the player zooms in. BY having all of this the immersion is contained as whatever the player can see, the characters within the game can also see that.

deadspace1

Sketches

Before settling on a design for the HUD I decided to quickly draw out lots of different possibilities. These included different items within the HUD as well as just different positions. Once completed I was still unsure on which one I wanted to use as the final HUD so I decided to ask the other members of my group and get their opinion. After some time I finally narrowed it down to one design which everyone seemed to like and I decided to use this as the final HUD.

Scan_20170424 (2)Scan_20170424

Photoshop

To finish off the HUD and refine it I took it into photoshop where I was able to add the colour to represent the health and stamina bars, and also add colour to the character coins in the party section which simply resemble the character. For example, I choose grey for the tinman coin since he is made out of metal, and orange for the lion coin as this is the colour of their fur. Using some of the sketches from my other team members I was also able to add a character to show where the other characters health appears as well as show that the top circle is the portrait for the main character.

HUD.png