Creating Responsive Images of Project One Work

Here is a link to the responsive website that I created to showcase some of the development work of project one.

Colour Psychology

Red

Red is an effective colour at grabbing our attention. It stimulates us, raising the pulse rate. Red induces a physical reaction, and as a result is good when used for call to actions, or when it is important that something is communicated above all else.

A great use of the colour red in video games is in the game Mirrors Edge. The game uses a mechanic called 'Runner Vision' in their level design, whereby important elements are highlighted in red. Red being the first colour we recognize, this has the effect of grabbing the player's attention and directing them in the right direction.

Blue

Blue is seen as the colour of the mind, and has soothing qualities. Whilst red gives us a physical reaction in terms of raising the pulse, blue allows us to think with more clarity and aids concentration.

A common use of blue in video games is in strategy games, where concentration and clarity of thought are important to achieving the optimal strategy. Developers will use blue in various UI elements, in order to help the player think more clearly.

Yellow 

Yellow is a colour that is linked to emotion, for better or for worse. Different tones of yellow can induce different emotions, ranging from confidence, optimism and improved self-esteem, down to other tones of yellow giving us feelings of fear and anxiety.

A game that uses a great range of yellows is Journey, a game about life and death. Naturally, this game is very emotional, and being set in a desert gives the developers a wide range of yellow tones to play with to illicit various emotions, ranging from hope and joy, to fear and loss.

Green

Green is a restful colour, the colour of balance. Green is a reassuring colour, which dates back to a primitive level where people would associate the colour green in vegetation with nearby water, indicating little risk of famine.

Green is used frequently in video games to reassure the player in the form of pickups. Whether it be health kits, more ammo, powerups, green is often the colour of choice in the instances. This is because it is a colour that the player will associate with help, a colour that will aid them in some way.

Day and Night Cycles

Whilst not necessarily different colours, having the same world in the day and the night will greatly impact the way that the player views the world, and will illicit different emotions dependent on that. The biggest impact on this is lighting, and the colours associated with this lighting. For example, a well lit scene could make the player feel quite calm, like they can explore freely. However, the same scene lit darkly for nighttime will make the player feel apprehensive, and will make them think twice about every move.

Researching Games That Use Spatial Storytelling

When thinking of spatial storytelling, the games that immediately spring to mind are those that have been termed 'Walking Simulators', such as Dear Esther, or Everybody's Gone to the Rapture, both games from The Chinese Room. However, spatial storytelling exists in a wide variety of games. The two games that I will be focusing on in this report are Dishonored 2, from Arkane Studios, and LA Noire, from Team Bondi.

Dishonored 2 has brilliantly designed levels, full of rich detail

Dishonored 2 is a stealth action game that gives the player complete freedom to choose how they approach their objectives. The game can be completed by killing every enemy in the game, by killing none of the enemies, or anything in between. The 'Chaos System' is central to the story of the game, and will have a physical effect on the world around you as you move through levels. Throughout the game you come across areas that have been condemned, victims of the Bloodfly plague. These buildings are infested with vicious, blood sucking insects that will attack you if you get to close, and pose questions about how to approach the level. The more lives you take throughout the game the worse the Bloodfly plague will become, and more of these condemned buildings will surface as you progress. From a game play perspective, this creates different situations to navigate. From a narrative perspective however, this adds incredible weight to your decisions.
Whilst it may be easy to justify killing 'bad guys', the repercussions of your blood-lust result in a darker world, where hundreds of people are losing their lives to the plague, and those lucky enough to escape the infestation of Bloodflies spreading through their homes are destined for a life of famine and poverty. This adds a level of morality to the mechanics of the game, where your actions can be directly linked to the dead bodies you find strewn throughout these condemned buildings. I think that this method of spatial storytelling is particularly interesting, and takes full advantage of the medium of games. Where most games use spatial storytelling in a passive way, for the player to experience different stories of the world, Dishonored 2 puts you right in the center of the spatial storytelling, and develops it around you and your actions.

The bloodfly infestation that spreads across Karnaca can be directly traced back to the tip of your sword

The other game I am going to talk about is LA Noire, an open world detective game. The player arrives at a crime scene, and must explore in order to find clues to solve the case. If ever a game was tailor made for spatial storytelling, then it is surely LA Noire. The job of the player in this role of detective is to assess a situation, and using all the clues at their disposal, come to conclusions about what happened. For the developer, spatial storytelling is about giving the player visual cues that answer some questions whilst posing others, and giving just the right amount of guidance to let the player come to their own conclusions. A match made in heaven.

LA Noire captures the feeling of Hollywood crime dramas, placing you in the starring role

Environmental storytelling is the main mechanic in LA Noire. The game has driving, shooting, conversations, all those natural open world tropes that it seems so hard for AAA games to deviate from (even when it is a complete juxtaposition with the tone of the rest of the game), however the standout sections of the game is when you enter a crime scene, and have to explore to find the various clues, piecing them together to sleuth your way to a victory. You really feel like a Hollywood detective, and this feeling is based upon the strength of the spatial storytelling. My one gripe with this is that I feel it slightly lets itself down with some very 'gamey' systems, such as audio cues when you're near a clue, which can result in players just jogging around until they hear a sound, rather than searching in a natural way. However, whilst I find this mildly annoying, I appreciate that it's a necessary contrivance to keep up the pacing of the game, and not have it become frustrating,

Both games are great examples of spatial storytelling, but in very different ways. Dishonored 2 sees the landscape of the world shift around your actions; the spatial storytelling follows the mechanics.In LA Noire however, the spatial storytelling is the mechanic, and the game play is centered around using this to immerse you into your detective character. I think that the LA Noire method of spatial storytelling is more akin to those titles I mentioned in the opening of the report, the 'walking simulators', but framed in this guise of being a detective gives it a unique perspective and lifts it from feeling like a passive experience, to being right in the thick of it. As a result, this is a unique example, and whilst I think studying the techniques that the developers use has it's merits, it would be hard to take any direct influences for my own project. Dishonored 2 however, and the idea of your actions influencing the world, is a surefire way of giving the player agency in the world. This is an idea I will explore in future projects, a more subtle method of environmental storytelling that means the game isn't based on spatial storytelling, but rather the technique enhances the experience as a whole.

Production Schedule

I created the production schedule for mine and Mitchel's project. It contains each activity that each of us will be undertaking each day, sometimes working together and other times working on separate tasks. The production schedule contains a play test day, where we can gather external feedback about our game, so that moving forward we can use said data to influence development. There is also a major progress review in the schedule, situated just before the week that is scheduled for writing, so that if necessary we can use this week to make up for lost time. We chose this particular week as we felt that it was most important to work on the environment and make sure that was at a suitable level, rather than spend time writing.

Here is a link to the production schedule.

Over the six weeks of production myself and Mitchel will have 58.5 hours each of time to work on the project. This is not counting the sessions that we have with Dwayne, due to the fact that during his sessions we do not work on our projects, and this also does not contain the half term week. We have settled upon one milestone per week, so we will have roughly 11 hours per each miletstone.

After researching the pay rate for 3D modelling and environment artists, I found that the average hourly rate falls at around £18 per hour. At this hourly rate, over the course of production I would earn £1053.
The cost of using the two different programs, Unreal Engine 4 and 3DS Max, would be £340 for a two month license for 3DS, whilst Unreal Engine 4 is free to use, you simply have to pay 5% royalties on gross revenue once that number surpasses $3,000.

Map Layout For Project 2

Today, Mitchel and myself worked on the map design for our project. It is a simple five room layout, connected by a single corridor. Each room will be the same room, but will be depicting a different time in the character's life. The rooms will all be open from the start, to allow players to piece together the story in whichever way they see fit.

A top down overview of the map

A perspective view of the corridor, and a view through the door

Top down view of the room, including some items found in it

As previously stated, each room will be the same, so the layout of each room will stay largely the same, however it will be in the small details that the value of each different room will be found.

Map Design Sketching

Today we looked at sketching map designs. We researched various techniques from www.fantasticmaps.com, a website that has tutorials on how to create different kinds of maps for different purposes.

Creating coastlines and elevation using shading

Dungeon mapping, for top down level layouts

An idea of what a level design map could look like

 These three sketches show different techniques such as line shading, cross hatch shading, changing line density, doubling lines. All of these different techniques can add depth to your flat image, which will communicate more about the landscapes that you are creating, an important aspect of presenting work is making sure that images communicate as much as they can.

Responsive Images

Today we looked at how to create responsive images for use across multiple devices. As the variety of devices used to browse the internet becomes more diverse, it is increasingly important to have websites that scale content accordingly in order to provide the best user experience.
In order to have responsive images, I found an image and resized it so that it fit various different screen sizes. To make the images responsive, I used the tags, which function as a combination of the tags and media queries. This is the code from my website:

My responsive website, at nearly the full width of the screen

My website at a smaller width 

The second line defines the size that the image will appear on the webpage (500px), the third line defines what image to use and the number afterwards is the native size of said image. The fourth line is the media query, which will check for the screen size of the device, and if it matches the parameters then the code above will be carried out and the image loaded in.

This method of creating responsive images allows all the calculations to be carried out in the HTML document, as opposed to using media queries which require an external style sheet. This makes more sense, as when we think of the HTML as the structure and the CSS as the style, it makes sense that the structuring of the images across the page would be carried out in the HTML document.

This is a link to the website, hosted on Github.

Creating Sounds Cues from Collisions In UE4

Today we looked at how to import sounds to the Unreal 4 engine, and how to trigger them using collision events. For the purposes of this exercise, I created a radio in 3DS Max.

A radio I created in 3DS Max

A trigger box, with an audio emitter linked to it

To create a sound on a collision, I placed a trigger box in the level in Unreal. A trigger box will carry out actions upon collision with a certain object, in this case it is the player walking through this doorway which will trigger the actions. Pictured below is the blueprint for the various collision events, and the resulting sound effects that will be played upon doing so.

The blueprint for the collision events and sound emmiters

The blueprint is a good method of generating sounds that are dynamic and responsive, it allows you to play audio at certain locations, change elements such as pitch and volume at random, and layer various audio clips together to create a sound effect that has audible depth.

What is Spatial Storytelling?

    Spatial storytelling is the art of designing environments to encourage behavior and elicit emotion. By taking great care in constructing the environments in a game, you open up possibilities of a different kind of storytelling. A great example of this practice in modern gaming is Gone Home by Fullbright, a game where your only objective is to explore a house in order to uncover the story behind it. In using a non-linear method of story-telling, and allowing the player to move freely around the environment, the player can choose where to focus their attention and in doing so they can uncover snippets up the larger narrative, and the many sub-plots that evolve around it. This results in a more organic intake of the story for the player, picking away further at the threads they have discovered, a more rewarding method of uncovering story than just being shown cut scenes at pre-determined intervals.

1. "Spaces can be designed. They can be made to promote certain pathways, encourage specific behaviors, even elicit emotional reactions" - Sharang Biswas

    This kind of storytelling is similar to the way that we as humans perceive the real world, by exploring, picking up on visual clues, coming to conclusions. As a result, the process of exploring environments feels natural, and results in the stories we uncover feeling all the more real.

Gone Home

1. Sharang Biswas - Videogames and the Art of Spatial Storytelling (https://killscreen.com/articles/videogames-and-the-art-of-spatial-storytelling/)

Decals in Illustrator & Unreal Engine 4

Today we looked at creating decals for use in UE4. I used the pencil tool in Adobe Illustrator to create a sci-fi looking image, with angular lines of varying width, then mirrored it for perfect symmetry. Then using the export selection tool, I saved the image as a transparent PNG image.

The decal I created in Illustrator, exported as a PNG

 Moving over to Unreal Engine 4, I imported the image, and used it to create a material. Opening the blueprint allows me to change the material domain to 'deffered decal'. Changing it to a decal means that I can place the image all over the level at will, just like if it were a sticker. This decal method works with any PNG file, whether created by myself or downloaded from the internet, as long as the PNG has transparency.

A dust decal that I downloaded, applied to the floor repeatedly

My sci-fi decal placed in the level in UE4

A poster decal placed in the level, a common use of this technique

Spatial Storytelling Project

For my next project, I will be working with Mitchell, on a game focused on storytelling through environment. Today we drafted up the framework for how we are going to tell our story, and we have settled upon a five room layout, connected by a single corridor. However, the rooms will all be the same room (i.e They'll all be a bedroom), but they will represent said room at different stages in the character's life. For example, the first instance would be the room on the 18th February 1983, then the second instance would be the room on the 28th May 1990 etc. These dates will hold significant emotional value for the character due to life changing events happening around that time.

Each instance of the room will represent the emotions that the character feels in that moment, and these emotions will be displayed through some of the following elements:

• Lighting
• Composition of Items
• Music
• Diary Entries
• Size of Room

These rooms will tell the story of a single character, and their journey through life, relationships, trials and tribulations.

We created a couple of rough templates in Unreal Engine and these were the results:

Painting Texture in 3DS Max

Today we looked at how to create textures by drawing directly on the object in 3DS Max. One way of doing this is by using the 'Unwrap UVW' tool, which will take your object and present all of the edges or vertices as a set of 2D shapes. From here you can draw on each individual 2D shape, and this will correspond to the respective location on the 3D object. With simple shapes, this is good technique, however once the shapes become more complex and contain a greater number of edges, faces and vertices, trying to paint on the 2D shapes in a way that pieces together seamlessly is a tough ask.

The UVW tool allows you to see a 2D representation of your shape

Using the 'Viewport Canvas' tool brings up a toolbar akin to those found in Photoshop and Illustrator type programs. Brush tools, fill tools, clone tools, all similar to Photoshop, can be used directly on the 3D shape. Rather than piecing together flat geometry, trying to wrap your head around how everything joins up, this method allows you to draw directly on your object, like a 3D version of MS Paint, with your object as your canvas.

The Viewport Canvas tool brings up a similar tool set to Photoshop

The resulting texture map, after drawing directly onto the object using Viewport Canvas

 As you can see above in the texture map, even this simple a design would have been very difficult to create seamlessly if painting onto the 2D faces. I placed the resulting object into a scene, with lighting and cameras, and this was the result.

Applying Textures in 3DS Max

Today we looked at how to import textures into 3DS Max and apply them to objects. Firstly, we looked at how to create textures that tile correctly. This is done using a tool in Photoshop called offset, which changes your image in a way that makes all of the edges line up perfectly, and thus will tile seamlessly. Once you have a texture that will tile correctly, it needs to be saved as a BMP file, which will allow it to be imported into 3DS Max as a bitmap. By applying a bitmap to an object in 3DS Max, you are able to wrap a 2D image around said object in the form of a material. From here you can change how often and how large the tiles of the texture are, to achieve a smooth and seamless texture across your object.

My original woodland camo texture, saved as a PNG image

My woodland camo texture applied to a plane in 3DS Max

Texture Sizes for Unreal Engine 4

The most current iteration of Unreal Engine, UE4, supports textures that range in resolution from 1px x 1px all the way up to 8192px x 8192px. These resolutions must be a power of two, so it could be 2x2, 4x4, 64x64 etc. The reason for this is that these resolutions work better with the binary systems that a computer operates on. The modern industry standard for 3D games is 2048x2048, which is a high-resolution texture. This resolution provides in a good amount of detail on the texture, whilst not taking up too much memory, resulting in optimal performance and fidelity. A common part of designing textures is working out where you can get away with having lower textures, for example on a distant object that the player will never see up close. Having these lower textures in the right place allows you to create more detailed textured for the things that the player will see up close frequently, without going overboard on memory requirements.

A woodland camo texture I made in Photoshop, for use in UE4

UE4 supports the following file formats:

• .bmp
• .float
• .pcx
• .png
• .psd
• .tga
• .jpeg
• .exr
• .dds
• .hdr

The PNG file format was invented to replace GIF, and is used as a common file format on the internet. PNGs are smaller in file size, they support more colours than GIFs. GIFs can be animated and this is prevalent on the internet, and whilst PNGs can also be animated, (an animated PNG is an MNG) this file format is not widely supported at the moment, one of the main reasons that the GIF format still exists so popularly. JPEG images have an even smaller file size than PNGs and GIFs, however the main issue with JPEGs is that they use a compression routine that results in the quality of the image being diminished with each time the file is saved. 

My texture on an object in UE4

Lighting and Cameras in 3DS Max

Today we looked at creating scenes in 3DS Max using lighting and camera techniques. Whilst we have focused mostly on creating assets so far, this was my first attempt at creating scenes that having engaging lighting and thoughtful composition. 

A tranquil desert oasis

The first scene I created was an oasis pool, surrounded by some different sized rocks with a desert floor. I gave the sand some texture using some of the extrusion and smoothing techniques we have looked at previously, and the shapes in the scene are very simple. I used a technique known as 'straw and steel' lighting, whereby the scene is lit using a soft blue light and a soft yellow light, giving a realism and depth to the simple shapes to create a believable shot. One composition principle I know of is 'the rule of thirds', whereby the screen is divided into a 3x3 grid, and the idea is for your subject to fall on the lines, avoiding the middling spaces, in order to create a visually interesting shot. 

Close up shot of my mug

Distant shot, as the mug would perhaps be seen within a game

 The second scene I created was simply a mug of water sitting upon a saucer. I was simply playing around with some of the primitive shape creation tools in 3DS Max, and stumbled into this idea. The detailing is quite crude, as is clear in the first shot, but in the second shot I decided to take one from a distance, as I thought this might give an idea of how the object would be viewed in a game. I decided to try a different style of lighting for this shot, rather than go with the same technique as the last, with a purple directional light being cast upon the side of the mug. This shot is less realistic than the other scene, but I like the vivid purple light, which gives off it's own neon retro vibe.

Rendering Images From 3DS Max

Just before the new year we learnt how to use 3DS Max to create and manipulate shapes using tools such as mesh editing and extruding surfaces. Today we used those skills again to create three different shapes.

Three different, yet iterative shapes, created in 3DS Max

The three shapes, pictured above, all stem from a single simple cube. The left shape has had each face of the cube extruded to give the impression of an extra cube being stuck on each face. Then in the middle shape, I selected the four vertices on the end of each cube, and scaled them down until they nearly met, then combined them into one perfect point using the weld tool. It is important to use the weld tool to achieve a perfect vertex, as the program will now treat each of those points as a singular vertex, making it easier to further manipulate. Finally, for the last shape on the right, I used the TurboSmooth modifier to remove all edges and create a smooth object. It is possible to crank up the number of iterations on this smoothing tool, which will result in even smoother surfaces, however this will greatly increase the workload on the PC, which will result in slow performance if this is an object to be used in a game.

3DS Max allows you to render out your scene as a still image, which is how I have created the images included in this blog post. By using Render Setup, I changed the dimensions of the image that would be outputted in the render, and then by clicking render, you get a 2D image of your scene, from the angle that you have your camera set at in the viewport. Once you have the render settings all set up, it is easy to change the angle of the camera to get render's of your shapes from different angles, or you can set up multiple cameras and change the View To Render in the setup panel.