Overview The purpose of this unit is to understand how the interfaces work in the game and why they are so important. also looking at different elements of technology, styles of interfaces, human factors, design principles and feedback of the interface. for my first task I have to research these types of elements and write an essay on how they will relate to my interface for my game. After this I have to look into pre-production ideas such as mood boards, mind maps, flow charts and wire-frames of how my menu will work and look. Then I will create this menu from my wire-frame and add functionality and then test my interface and get peer review. Time scale Task 1: Research Start date 18/9/17 Finish 30/9/17 I have given myself just under two weeks to complete the research into interfaces looking into forms of feedback, technical, types of interfaces, human factors and user interface design principles. Task 2: Pre-production Start date 1/10/17 Finish 10/10/17 I have given myself the time scale of 10 days to create pre-production of mind maps, mood boards, wire frames, flow charts and a basic block out. Task 3: adding functionality to my interface. Start date 10/10/17 Finish 5/11/17 I have given myself just under 4 weeks to add functionality to my interface the major developments I plan on creating in this month are: Character selection Character customisation Checkpoint saving Game difficulty Game settings Interactions Level streaming in game menus; pause, HUD and lift menu 3D environment and graphic, post processing (in each of the sections above) Task 4: Testing and reviewing Start date 6/12/17 Finish 13/11/17 For this unit I have given myself a week to gather peer review and to test my menu system with white and black box testing methods. Task 1 For task one I had to research and write and essay on about interfaces looking at 4 keys areas, technology, interfaces, human factor, user interface design principles and forms of feedback. For each key area I had to look at several aspects and write and understand how this could influence and have an impact on my interface system. For technology I considered keyboards and mouse as I plan on my game been produced to be used on a computer I looked at how interfaces used keyboards before moving to a point and click system. From here I considered screen resolution as ever user could have a different monitor size to what the game is developed on, I found out from my research the most used was 1280 by 1024 or higher. For interfaces I considered sense oriented and how interfaces don’t have to be a 2d graphical image but could be more diegetic and immerse the player into the game more. For example, having the health bar on the player. I then considered voice recognition but didn’t pursue this as unreal doesn’t support this feature. I also looked into command line inputs for cheats and Easter eggs to add a uniqueness to my game. For human factors I researched about user experience and how much a user plays games leading into adding difficulty settings to add challenges. After this I looked into accessibility and how my menu could be use with people who have mobility, hearing and vision impairments. For user interface design principles, I looked at the architecture of interface systems and what makes a good interface system looking at complexity, easy to understand, sub-categories and how the interface looks and typology that makes an interface system. Finally, I considered forms of feedbacks I used three industry standard games interfaces (Dead space, Fallout and Prey) and looked at the physical, perception, visual and control methods. this gave me a great understanding how interfaces work and the types of feedbacks that each interface gives and what would be expected of mine Time scale I was able to produce my research essay within the deadline I set for myself most of this was spent finding articles to refence and finding realisable sources of information. After creating my draft, I only had to make minor changes to the essay before finally submitting it, all within my time scale. Task 2 For task 2 it was about pre-production, I had to research several types of interfaces to get an idea of how I would want mine to work and look like. I broke this pre-production down into, research, mind maps, mood boards, flowcharts, wireframes and a block out of my interface. I started off by doing added research I wanted to consider colour psychology and shape psychology as I felt this had a massive impact on the type of feedback my interface would create depending on the shapes and colours I chose. I considered what each colour and found out how it could influence people and then I did the same with shapes. After my research I wanted to get my ideas I had for my interface down onto paper, so I decided to create a mind map, in this mind map I broke it down into three areas: types of feedback, architecture and interfaces. For feedback branch I considered different types of feed backs I wanted to give my menu such as the physical feedback for example; colours, shapes, sounds and typology. I also considered visual feedbacks such as; button styles and graphics type. For my architecture branch I broke this up into three subcategories the first one been interfaces where I looked at the type of interfaces I would have, how I would be able to navigate in my interface and what I could have in my interface. The next branch I considered peripherals and looked at different types that I could use to control and navigate my interface and continue using this into the game. for the final branch of architecture, I looked at different human factors such as: age, localizations, the user requirements, and experience levels. For the final major branch, I looked into interfaces, for this branch I wanted to come up with as many ideas as I could that I could use in my interface and what my game would require, I also looked into other options that I could use in the future if I ever wanted to expand my game. Below is my mind map Once I created my mind map I wanted to get my ideas on a visual representative, so I decided to create a mood board to find my ideas so that I could visualise the feedback and style that I wanted to create. In my mood board I looked at different menu styles, the several types of interfaces such as options, character selection, customisation and how I want my menu to look like. I also looked at other ideas I wrote down such as HUD elements like health and ammo and in game menus that I could use to help improve my game. Below is an image of my mood board: After creating my mood board, I had a few ideas how I wanted my main menu to look like so I decided to sketch these ideas down onto paper so that I could have a visual idea of what I wanted to achieve. I drew three sketches all having a space theme, my first which was a simple menu based in the solar system for a background using horizontal lines to keep the buttons and text into a section. I then had a console looking sketch idea where it looks like the user is controlling a console station it would have had a 3D model of a space ship rotating and all the buttons would have been at the top. Then my third example was a large open environment with a small simple menu system in the left-hand side with the buttons. On the right-hand side would have been a large planet rotating. After getting my sketch ideas down onto paper I then decided to create a flowchart of the main interface, pause menu and other in game menus. These flowcharts show the main interface is connected to the in-game interfaces and what happens on completion and death. in red squares is the main interfaces that people will use and interact with. The blue circles represent the sub-categories of the main interfaces and command buttons that direct them to another interface. Green diamonds represent gameplay and cutscene that are triggered by the interface. I then created flowchart diagram using the same methods as above for the in-game menus that do not connect to the main interface system for example the lift and holodeck menu. From the flowcharts that I created, I wanted to create wireframes of each main interface and sub-interface, on these wireframes I want to show the position of the buttons and type of button, text, canvas, background images and the information each interface has. I created this by drawing basic shapes to outline the boundaries of the canvas, the location of buttons, text and miscellaneous items. I created an HUD wireframe as well, so I could get the positioning for the health, armour, enemy health and ammo. I also created wireframes for the in-game menus such as the lift and holodeck menus to get an idea of how these would look like too. These wireframes can be seen below After creating my wireframes, I decided I want to turn those wire frames into the interface. For this I just wanted to create a basic block out, to get the positioning correct before I add functionality and graphics. I started off by creating canvas for each of the sub categories, once I got the position for the title and horizontal bars I duplicated these to all the other canvas that had these. I also create the basic layout for my settings and character selection so that they would be ready for any functionality to be added to them. Below you can see a few screenshots of the interface. Changes I made a few changes from my flowchart/wireframe and when creating my block out, I planned on having the difficulty setting after the character selection but the camera transitions going back and forth didn’t feel right so I decided to move the difficulty settings in front of the character selection. Time scale For my pre-production I gave myself 10 days to complete any pre-production. I was able to get the bulk of it done in a few days, the wireframes and turning them into block outs took the longest but this was expected as creating the widgets in unreal engine can be a time-consuming process to get every element in the correct location. I didn’t run over my time scale to complete my pre-production, I started to blend task 3 into my time scale once I was towards the end of creating the block out for example adding ability to swap canvas to show the sub-categories when a button is clicked. Task 3 For this task it is all about the core functionality that will be include in my interface system, I broke down the core developments for each task and setting individual deadlines for each task. This will help me project manager my core development and help me stay on top of the easier developments that I might forget to do. The core functionality and mechanics that I will aim to focus on are:
Character selection For my character selection, I started of using a template that when I click on a static mesh I would load the character details, I decided not to use this after testing it. I was able to work but for my game menu system it would not work as I planned on creating my interface its own level and I had to spawn the correct character selection over to a new level. This involves saving those variables selected. This method I started using if the game wasn’t too large and I had planned on using persistent levels with sub levels below. After researching on creating a custom character selection that would work for my system of having the menu system in its own level before the user is teleported to the starting level. I started off by creating blue and pink character meshes for my character selection screen, for the time being these meshes is what the user will take control of to play as either my male or female character. I then created a save game instance and set up my menu level to be the default map. After creating the meshes I added three variables into the save game, an integer for the user index, a string for the save slot and a Boolean to check if the male is selected. Then I went into the blank character blueprint and added a spawn actor that would spawn the newly created meshes in my main menu widget. When the male is selected the female mesh is depsawn and spawns the male mesh in front of the camera and vice versa. In the event graph I used the Boolean to determine if the male character is selected or not, I then created functions that would use the save game instance to save this Boolean and the other variables. I then went to my character blueprint and added the same functions so when the player starts the game the character mesh is spawned and selected from the set variables in the save game file. Every time the player changes level these variables will be loaded, and it will be the same mesh. A demo of the character selection can be seen below in its block out state. Character selection update 17.10.17 After implementing my character customisation, I was able to import and create my character. As I had to edit my selection screen to accommodate my customisation screen I felt it was necessary to update my character selection. Instead of spawning one mesh now when male or female is selected the blueprints that I edited now spawns 6 skeletal meshes that share the same animation blueprint that makes the mesh move simultaneously. This is what allows my character customisation screen to work as it is changing one of those body parts. Also since creating the character selection the environment has been improved and now features the character in its own quarters when the user is selecting which character. Below you can see a video of the character screen after it been updated. Character customisation screen For my character customisation screen, I wanted to let the user be able to customise the character that they have selected regardless of if it is male or female. I came up with the idea of keeping the change unisex so looked at changing the hair colour, uniform colour, hair style and adding a PDA on the character arm. I started off by uploading my character to mixamo so that I could get a quick skeleton and animations so that I could add my custom character in to the game. Once the character was rigged I then took it into Maya and I started to separate my mesh into 6 parts; hair, head, uniform top, uniform shirt, legs and pants. I then exported each of these meshes with the skeleton and imported them into unreal engine. Error When I tried to create blend space and animations for my character so that it could go from idle to running it was not working. I decided to have a look at the skeleton in unreal engine and it had only imported two bones from the skeleton. I then opened the exported file in Maya to notice during the export the mesh had unskinned from the skeleton. This was a simple and quick fix by reskinning the mesh to the skeleton and reimporting. After doing this I was able to add a blend space and animation to my uniform shirt, I used this as the base so that I could get a visual representation that the animation was working. I then selected each skeletal mesh and assigned the skeleton to the skeleton that has the animation. Each body part now uses the same animation blueprint. I then went to the character blueprint and added skeletal meshes under the mesh for each of the body parts. I left them blank, so I could assign me meshes to it. I then went and edited the character selection changing this from spawning just the one mesh but to spawning each of the body parts in the skeletal meshes that I assigned in the character blueprint. After I had sept up the mechanics for the custom character I started creating my widget for the character selection, I started off by changing the material by casting to the character blueprint and getting the reference to the hair/uniform body part and then setting the material for these body parts. I set up buttons with different colours. After this I imported hair meshes that I created for my character and used the same method of getting the body part reference and setting the mesh to the new body part. For the PDA this was a mesh that I connected to a socket on the characters body and I turned the visibility to off. In the widget I added an event dispatcher that I could call on a flip flop to turn the visibility on and off. After I got the widget set up I added the code to display the widget on a console and added a camera for it to transition too and a spot light to light up that character. Below is a video of the final character customisation screen: Game Difficulty After my research into game interfaces I wanted to add a level of difficulty to my game, for user who have never played games to users who game regular can both enjoy my game, for the difficulty setting I have decided it will affect the player's health, armour, ammo and enemy difficulty. I decided only to implement the health and armour for the time being and will add more to this in the future. I started off by creating a game instance that can communicate to blueprints and levels. In this instance I added health and armour variables as an integer. I then went to the main menu widget and for each button I cast to the game instance and set my health an armour. To see these variables, I then used variables inside of the widget with values of 200,150,100 and 75 depending on the level and connected these to the set values. When the player selects the difficult these variables are set in the widget and transferred to the game instance. I then went to my character blueprint where I wanted to set the characters max health and armour by using the variables that were selected in the difficulty settings. I did this by casting to the game instance and referenced these variables. I then created a health and armour integer variable in the character blueprint as these will be the live variables and set these and connected the game instance reference variables to these new set variables to set the values. After this I needed to set up a HUD system to show my health and armour, I created a new widget and placed to progress bars at the bottom with text. I created a bind function to these and cast to the game instance to get the max health and armour and to the character selection to get the current values. I then used simple maths to work out the percentage as a progress bar works form 1- 100 percent. I then created a simple function to remove health to test my health and armour. A video can be seen below Update 28/10/17 Since creating my game difficulty and HUD I decided that I need more of a visual representative when the player gets low health, so I decided to add an animation to play flashing the screen red around the boarders to simulate this. I did this by creating a simple image in photoshop and then created an animation in a new widget to remove the visibility of the image and show it again. The results can be seen below Checkpoint saving and loading The main aim for my save and load function of my game is that all the information of the player gets saved at the end of a level (health, armour) and loaded into the next level the player selects. When the user exits the game, player will be spawned at the beginning of the level selected with the current health and armour. I started off by creating an enumerator, in this enumerator I added all the level name that I wanted to have for my checkpoint save. I added this enumerator to a new blueprint called checkpoint and made it editable so that I could select the level in the details options. In the checkpoint blueprint and the save game instance I created new variables, a vector for location, text for current level and four integers for my max and current health and armour. I then added an collision box with an overlap and then from the player begin I created an branch to check for a save file so that it know to create or load one. From here I cast to my save game file and I set all the variables I then cast to my character blueprint and got a reference for the current health and then I cast to the instance to get max health and connected these to the set variables from the save game file. I then wanted to save the location so form the collision box I got the current location of the actor and set it in the vector variable in the checkpoint blueprint I then cast to the save game and set this variable using the checkpoint variable to reference where the player was. I then also used the text variable and enumerator to select and set what level the checkpoint was on, so those coordinates were set on the right level. Error As you can see in my video it saves the information on what level the player is on, but it isn't saving the coordinates of the location, I spent many hours and solutions trying to get the player to spawn at the checkpoint and decided to leave it as the player is spawning at the start point of the levels and saving what level the player is on. this is something I will come back revisit and figure out how to spawn the player to that location, but first I need to carry on with the rest of the save and load function as I didn’t want to run over on my project schedule. I then went to the character blueprint and added two functions to save all the current health and armour to the save game file and another function to load these back into the character when the game is loaded. To load the save game file I added a simple line of code in the main menu widget that loads the save game file and loads all the variables teleporting the player to start of the level with the current health and armour that the user had. The can be see below been tested: Changes that I made In my flow chart and wireframe I planned on having a canvas with four loading saved games I concluded as I didn't need this as I could just load the last game by clicking the caption button instead of selecting previous saved games. It will also be easier for the user to navigate though. Game settings Video settings For the graphics settings I used arrays to store text values and console commands, I decided on using this method as it keeps the interface looking tidy without having multiple buttons all over the interface for each setting value. I started off by making a text variable I turned this into an array, named its main settings and added 4 elements to this array, this is where the text will get the level of settings from so I added low, medium, high and ultra. After this I created 8 more text arrays with 4 elements inside, each of these arrays would be the console commands so for graphic array this would change the resolution of the screen so I put in r. screen percentage 25,50,75,100 for the levels. After creating the arrays, I made 8 integers, and gave them all a basic value of 3, this value will represent which element is selected in the arrays. After creating the variables, I took the main setting variable and got its length and sub stroked 1 from it and added a clamp to stop it going below 0, I did the same with the internet variable when the user clicks the left arrow but for the right button I added 1 instead. These connect to a site, which set the integer variable. The set variables connect to an execute console command which would change the setting on the arrow press. When the user press the arrow now the setting will go up or down and display what level it is at. Using console command changes, the settings in the engine so I don't have to save them like I did with the character, I could save them to a config so every time it the game loads up it remembers the last settings instead of going to the default value. Below is a video of the graphics settings: Audio settings For the audio settings I have master volume that is also a slider. This slider controls the master volume for the whole game, to cast this though the whole game I used the game instance that I made for the difficulty level. I started off by creating a float variable and called it master volume. I, then we to the blueprint of the game instance and created an 'event into' and connect this to a set base sound mix and created a new sound mix file. I then created a custom event and set the master volume and connected the float to this custom event. I connected the set variable to a node called the 'set sound mix class override' set my sound fixer in this and selected the pre-made file of master in sound classes. Then I got my variable and connected it to the volume. From this I went to my menu interface and selected the slider and clicked the change on value button and from this I cast to the game instance and pulled out a pin to my custom node and connected the audio volume to the slider value, this will set the volume when the user uses the slider. I placed some music into my level and gave it a test, the slider reduced the volume. Changes After getting my master volume working I decided I wanted to add more control to the audio settings, after research I found out I could assign audio its own sound class which means I could control these sounds classes by its own slider and connect it to the master control. To implement these changes, I duplicated the code in the game instance and added new variables and custom event and set it up in the same as the master. Below is a video of the audio level been tested. Interaction 1 For my first interaction I have set up a system for user to select a combination of buttons that will set the bridge into a red alert senior as the user has turned on the gravity, the NPC will float and this is where the player can use radial impulse to move the character in the gravity. As I started off by duplicating my character blueprint and deleting the none essential code and left the movement feature. I then move the collision box away from the character to stop strange physics. I then placed this into the game work and made the character look like it is in the chair. I then changed the global gravity to 0.5, and placed a physical volume around the level. I then cast on a key combined for the player to jump and on a delay to ragdoll and this is what makes the player look like it floating in the low gravity. Once the character is floating then enabled radial force with a line trace then I attached this to a tick with a gate so when the player clicks open the gate it fires the radial force and pushes the player around. I then used event dispatchers on the buttons clicked on the console and used Booleans to check if the buttons are selected and when all the buttons are selected this will enable the interaction and radial force. I then wanted to add visual effects in the environment to create a red alert, I started off by getting references for all my emissive lighting in the environment and adding a set material to all these changing the white emissive material to a red material. I then changed the point lights by referencing then and changing the intensity and colour and to add more effect I enabled a sound to play. Below is a video of me testing the red alert interaction Changes / updating the visual effect For the red alert I wanted to a give the impression that the lack of atmosphere is affecting the camera system, so I decided to do for a glitch type of post processing effect. For this I used a third-party plugin in for this as creating a glitch material is very time consuming. I started off by creating another post processing volume and placed it over the first camera that user interacts with, I then created an array and added the material instance to the post processing material. In the event graph I added another pin to the sequence pin and then got a reference to the new post processing volume, from this I got the enable the volume. I added a delay connect to a random float to randomize how long to wait before enabling and then added another delay with an random float to randomize how long the effect will be on for. To add more effect, I created an camera shake blueprint and added a node called the client play camera shake to the blueprint that will add a subtle camera shake when the post processing volume is enabled. Interaction 2 I wanted to create a field of asteroids that spawn in front of the spaceship that the user can fire and blow them out of the way, I started off by looking at mechanics of how I could trigger an event to destroy the asteroids. I created a new blueprint actor and place a cube inside of this, I then went and added a button to the main menu that I could fire and destroy the cube. I came across a few errors for this system and I had problems respawning the asteroids so I decided to create a dispatching system with a life spam to destroy the mesh if it’s not had any interaction for more than 30 seconds. Once I had the dispatching system working and had random asteroids spawning over a large area I decided to turn these meshes into destructible meshes and I then added a radial damage node with a particle effect on impact. This will destroy the destructible meshes and look like the explosion has destroyed them. After this I wanted to add random effects to the interaction so I added a dynamic material instance function connected to random floats so that would change the colours randomly on spawn. After this I wanted to add a post processing effect to give the impression when this random effect is selected the user is under a drug influence. I used a simple post processing volume and enabled the chromatic effect to add a light blur and also changed the depth of field to add a slight blur. This can be seen tested in the overview of the menu video around 6.30 seconds Level streaming I wanted to use the level streaming features to make my game run more smoothly, I started off by selecting the part of the level I wanted in a new sub-level and then I went to the levels tab and created a new level with the selected actors. I then went to the level blueprint and added a node to the door button to load the new stream level, from here I wanted to the steamed level to deactivate when the player goes back though the door, the way I did this was by adding a trigger box inside the door frame and using a Boolean that the player sets every time they walk through the trigger box. It will then use this condition to see if the player has walked through the door after the button is pressed if they have the level will deactivate. In game menus; pause, death menu and lift menu For the pause menu all I did was duplicate the main menu widget so that I had the same layout and deleted the canvas that I did not and any code that was not needed I then changed the buttons to match my wireframe and then I set up the mechanics in the character blueprint to display the widget and pause the game. I then repeated this process for the death menu and for the lift menu I just added buttons with graphics that I created and just added code to load up the level selected. Conclusion
I really enjoyed this part of the development, I feel like I have learned a lot about interface systems and it has broaden my knowledge of what is required to create a good interface system that is easy to use but also gives the right forms of feedback to the user. I found that certain areas gave me a challenge and made me work hard to figure out the problems I encountered but this overall improved my knowledge of how blueprinting works within unreal engine. It has also shown me areas where I could improve on such as improving on my researching techniques to find more reliable information. I could also improve on my pre-production creating more and covering more areas as I felt missing out the character customization was something to overlook. Overall, I think the development went well, I was able to produce everything I had planned, most of these were on schedule or before the scheduled date. I had two development tasks that took longer that the deadline that I had set myself. The character selection took longer than anticipated as I didn’t realise that I had to implement save and load functions of what character was selected as I was using my own menu map and not streaming from a level in the game. This added time onto the development task to get this feature working. The next development task that took longer than I anticipated was the checkpoint saving this was mainly down to how complex it was and getting all the variables to save and load up the correct ones was time consuming but a good process to learn. Even with these two development delays I was still able to produce everything planned for and was able to produce the menu that I was looking to create.
0 Comments
Overview The purpose of this unit is to create a basic 3D environment in block out form. From this block out the form I have to take screenshots of the environment and take these screenshots in Photoshop and composition these screenshots to look like my mood board and vision from unit 75. I have to create 3 images from the start of my encounter, the middle and end of the encounter. Once I have created the concept art I have to go back the block out and add functionality and game play. Once I have added this I will add basic lighting and simple materials that match my concept art and mood board. Time scale Task 1: Pre-production Start date 18/9/17 Finish 2/10/17 I have given myself two weeks to complete the pre-production of mind maps, mood board, research and the basic creation of my block out of the levels I am planning on creating Task 2: Adding game play functionality Start date 3/10/17 Finish 9/10/17 I have given myself the time scale of a week to add the game play functionality as I have most of the resources created from previous units and I just need to improve these. Task 3: Concept art Start date 10/10/17 Finish 30/10/17 For my concept art I have given myself 20 days to produce 3 different types of art work, I have broken down how much time I plan to give myself of each of the concept art. For the first image I have given myself 12 – 20 hours to produce this which will take around 7 days. For the second image I have given my self-6 – 12 hours to produce this which will take around 5 days. For the third image I havegiven my self-6 – 12 hours to produce this which will take around 5 days. I will have 3 days’ spare to consider peer reviewing of my concept art and to make any adjustments. Task 4: lighting Start date 31/10/17 Finish 15/11/17 For this unit I have given myself 14 days to create the lighting effects, particle effects, lighting functions and materials to my block out level. I plan on giving myself 10 days to complete this with 4- 5 days to complete peer reviewing and evaluation. Task 1 For task 1 it was pre-production task, I started off by creating a mind map to get my ideas down, for my mind map I broke it down into two major categories; environments and game mechanics. For the environments category I looked into various different types of environments that I could include in my game such as sci-fi (alien planets, space ships) different types of landscapes (valleys, mountain ranges, rivers). I broke these down to what each type would include, the type of materials and vegetation each area would have. After I looked at the different types of environments I looked into what different types of structures could be found in these area. I also looked into different lighting styles for the environments, such as; post processing styles, the atmosphere style/lighting and lighting types. For the game mechanics category, I looked at different types of core mechanics I would want to include in block out of my game that I could work and improve on. I looked at level mechanics, such as checkpoint saving, trigger sounds and animations. Then I looked at player mechanics how they would move and fight. After this I looked into boss mechanics how the boss would move and attack and looked at basic AI and behaviour trees. From here I looked at how the weapons would fire and the different styles of attacks. For my mood board I looked into ideas that I wrote down in my mind map. I started of using Pinterest just to save photos before I created my final mood board. In my mood board I looked at alien worlds that people had concept drawn, alien vegetation, already made sci-fi games and their styles. I also looked into materials I could use for my block out and concept art. I also looked into different styles of concept art painting, looking at the brushes and basic drawing techniques like drawing perspective points. Finally, I looked at different styles of lighting and the colours I could have used. Below is my mind map and mood board from unit 76 Before I started to create my block out I did some additional research for my concept art that I would be doing in task 3. For my research I looked into colour psychology, looking at the positive and negative of major colours and how it could have an influence on your art work, this also helped me when I was creating the lighting for task 4. Then I looked into shape physiology, I decided to look into this as I was creating a sci-fi styled level and the flow of shapes is extremely important. After this I looked into perspective lines and single points which would help me create my concept art. Then finally for my concept art I looked into different styles of creating concept art; digital art and composition, looking at the different styles and how each is created. After this I started to create my block out in unreal engine, I started off by selecting the map layouts that I created in unit 75 and started to block out my level to how I have drawn them. Once I got the basic layout down I started to created detailed BSP models by using different BSP and using the subtract feature to add unique shapes to these BSP. I then selected these BSP and turned them into static meshes so that I could easily change them when I create them later on. I created the alien world by using the landscaping tools and quickly block out a small hill range with a path that U-bends to make the impression that the path is longer. I then added basic solid colour materials to the walls, floor and ceiling to establish them. Below is screenshots from my block out Task 2 For task two I had to add gameplay functionality to the block out that I have just created, I had briefly touch up on some of the mechanics that I wanted to include in my game from unit 75. I started off by adding all the input keys that I will be using for my game and added a console controller for future adaption. After adding the input keys, I then draw how I would have wanted my camera for my game, I decided instead of having 4 camera I decided to have two cameras for first and third person view and then use an enumerator for the third person camera and when I selected the name it would offset the shoulder camera using a location node to offset it. Then I added key binding so that I could swap between the two shoulder cameras and then swap back between first and third person. A video of this can be seen below Once I had created my camera system I wanted to create a custom interaction system as I had problems when I used other methods in previous tasks that the player could not interact correctly with two cameras as the method I used suited more the first person camera. I started off by looking into line trace as I wanted to use a line trace to trigger the interaction on hit. I decided to use the line trace with a capsule on the end as this will give me a large radius to interact with blueprints. I started off by creating a blueprint interface as this will be my new interface action node and from here I went to the project settings and added a new object channel and trace channel which will show up in the collision detail tab. I then went to the character blueprint and created a new function. In this function I started off with an event tick, as I wanted the line trace to fire from either first or third person I got reference to these. I placed the line trace by capsule into the function and then I used select node to determine if the player is in third or first person and to get the world location of the camera. I then used my enumerator to get the variables for another selection function, in this select function I set the distance the line trace would fire for each camera. I then added them together and added them into the start and end pin of the line trace. I then added a break hit result and added my blueprint interface to the hit actor as well as promoting it so I could set it once it had been hit. I then used my interaction action input key I created before and called the promoted variable and connected it to the player interact After I got the core mechanics working for my player interact system I created a basic door system that I could walk up to and press the interact key to open the door. To create this, I created a new blueprint and added door models to the blueprint. I then went to the default tab and added the newly create player interaction so I could call it in this blueprint. I called the node in the event graph and then added some basic code to open a door. A video of this can be seen below After getting my interaction system working I was able to adapt on this and I started to create more complex blueprint systems I wanted to use a button system to open my doors. To do this I created the same process as the door but instead of adding blueprint code I use an event dispatcher to call the doors and other mechanics such as lights. I tested this system and I noticed a small error, not that it wasn’t working. The problem is that the radius of the line trace was small and it was hard to hit the button. The solution I came up with was to make the radius box large and slightly extend the line trace to make sure it hit the interaction system even if the camera was not pointed directly at it. After this I created a similar system to turn on lights which can be seen in a video below:
Task 3 For this task I had to choose three images from my block out and create concept art from them, it had to show the flow of gameplay from start to finish with the boss in the final image. For my first image I decided to do my corridor to show the direction the player would go to start the mission. I decided to do this concept art as digital art. I started off by drawing perspective lines to find the vanishing point, from here I started to draw basic outlines to create the basic look of my corridor. I used the pen tool to create the outlines and then I merged these layers to create the final layer. I then created a new layer and filled it light grey to help me see the outlines, I then created a new layer and added more details to create panels and lights. After creating the outlines, I then used a new layer and selected the lights I just created and filled them white to create the illusion they are emissive lights. From here I started to select part of the corridor using the magic wand tool and created a basic metal texture to using different shades of colours to add depth. Once I had these areas fill with the material texture I used the dodge and burn tool to add light and shadows to each area. I then wanted to add more depth to the concept art, to do this I downloaded custom brush tips of metal panels and grids and I placed them around the corridor to add more depth and realism to my concept art. After this I added text using the perspective lines to get the right direction for the text. I then used image adjustments to add a post processing effect type on top of them image. After this I wanted to add lighting to the concept art, to do this I started off by creating a new layer and used a white brush to paint where the lights are and then I added a Gaussian blur to give the impression of emissive lighting. I then used IES profile brushes to add unique light detail and to add realistic lighting I used the lighting filter to add more depth to the lighting. Below is the final image of my first concept image. For my second concept art I have decided to create a photo composition, this will be for my middle phase of the gameplay flow. I based this concept art work at the start of the alien world. I started off by looking for reference images, once I found the images that I want to use I placed my screenshot from unreal into Photoshop. I started off by separating the sky by using the pen tool to select around the mountains once I had selected the sky I cut this into its own layer so that I could make selection for mask quicker. I started off by adding the sky image and selecting the empty sky with the magic wand tool and then selecting the image and adding a black mask to this to only show the selection, I then did this with the photo of space and lowered the top sky photo opacity to make the stars appear though. I then edited a planet image that I found by using the colour range selector. I selected the background using this method and delete it. I then added the edited planet and placed it between the skies. I then changed the levels and brightness/contrast to this layers to make them blend in more. I then added the dust road to my concept art and added a black mask to it and drew the type of path I wanted to have on my concept art. I then used a dirt brush tip and used the eraser tool to remove parts off the path to show the grass though. I then repeated this process for the mountains range and used a dirt brush tip to lightly remove parts of the mountain range. I then changed the levels, curves and brightness/contrast to make this blend in. After this I edited the images of alien vegetation that I found by using the colour range to remove the background and then I placed them in the concept art duplicating them and using the transform tools to warp and make them smaller. I did the same with the minion NPC and transformed then to make them look like they were running down the hill side. After this I repeated the process to add a group of characters to represent the player and the team. I then changed the levels, curves and brightness/contrast to make all this blend in. After this I added emissive light like I did before in concept art 1 by adding brush strokes behind the light sources and using the Gaussian blur to blur them and then I added lighting effects to add detail lighting to the concept art. I asked for peer review on my concept images and a few people commented that I needed to add more shadowing to this concept imaging, from the feedback I added shadowing to the concept art. I used simple techniques such as burn tool and using the paint brush to add casted shadows on my concept art. Below is the final image of my second concept image. For my final concept image, I decided to do a combination of both digital art and photo composition. For this concept image will be at the end of my gameplay flow and show the boss. I started off by gathering image resources. I used the same methods in concept image 2 to create the sky with the stars and planet, the mountain range and gravel path. Using masks and brushes to create the effect that I am looking for. I then imported a spaceship, I edited the space by removing its background by using the pen tool and inversing the selection to delete the background. I then used a perspective transform edit to position the spaceship on the concept art so it followed the lines of the perspective point. I then used the clone tool to remove old geometry from the block out. I used the magic wand tool to change the hue/saturation of the selection on the spaceship to add the colour of the sky reflection on the metal. I then placed a dust image behind the spaceship and used a black mask and a brush to add a dust cloud. I then brought my war machine into the concept art and I then added brightness/contrast and curves adjustments to blend the war machine into the scene. I then added a shadows underneath the war machine and spaceship. I then placed in the vegetation like I did from the second concept art and I then added emissive light behind these using the Gaussian blur and then I used the lighting effect to add more detailed lighting. I wanted to create more realistic shadowing for my concept art so I followed a YouTube video on how to create realistic shadows, I started off by duplicating the tree and then using the warp transform to change the shape of the tree and then I added blending effects to the tree to make it solid black and then I change the layer blends to remove certain dark shades and lowered the opacity. I then used a brush tip of grass to added the effect of grass, I changed the giter and spread of the brush and made it use multiple colours. I then added my characters to the concept art and arranged them to make them look like they are in battle with the war machine and I then created a custom beam effect in another document I then added this to the player’s gun to add to the effect that the boss is been fired at. I added smoke effects to the players’ guns and added fire exploding to the bosses’ gun to give the impression it was firing. After this I placed explosion marks on the ground to give the impression of fired rockets from the boss. After this I added a post processing effect to the image changing the overall brightness/contrast/ levels and curves. Below is the final image of my last concept image. Task 4 For task 4 I have to add lighting effects to my block out level, for this I will look into different styles as lighting effects, such as: atmosphere, post processing, lighting, light functions and particle effects. I also plan on adding materials that give the impression of what the scene will look like at its final stage. I started off by creating a mood board to get my ideas of the lighting styles that I was looking for to add to my block out. In this mood board I looked at different atmosphere sky such as space and alien planet concepts. I then looked at particle effects and the light the emit, I also looked at IEs profiles and light functions. After this I looked at different types of post processing and materials I could use. This can be seen below: I decided to start with the atmosphere for the space part of my block out, I found a large photo taken of space and I imported this into unreal engine. I duplicated the sky blueprint and materials so that I could edit them. I then edit the atmosphere material and added the space texture to where the stars should be and lower opacity to around 0.75. I then created a sphere in Maya and cut it in half and imported it into unreal engine and applied a texture to give it a planet effect. To turn the atmosphere dark, I turned the source light upside down and the lowered the intensity to show the planet and space. For the alien planet I added the blueprint that I created for the space and placed it into the atmosphere I then changed the horizon, cloud and overall colour to make the sky more purple/blue. Then I added exponential height fog and changed this to a purple colour to add more of a mist effect to the game. For lighting I adjust the lights that I already placed in my level to give a more sci-fi look, I then added spot lights at certain points in the corridors and changed the light colour to blue. I added IES profiles that I downloaded. IES profiles are realistic light emission that are saved into a texture file. I added one of these IES profiles to my spot light and adjust the light settings to add a subtle effect. Above these spot lights I had a ceiling light, I created a simple emissive material to added to the effect. I then wanted to create light functions, these are materials that use greyscale textures to read what light should be emitted and what should be blocked. I started off by creating a simple black and white grate texture in Photoshop to add the effect that the light was beaming though a grate. I then wanted to create a more advanced light function, I wanted an fan rotating so I used the same method of creating a black and white image in Photoshop and in the material I added a rotator node to the texture and set a speed variable to control how fast the light function is moving. This can be seen below in the video As I didn’t have enough time in my project schedule to create my own particle effects I decided to use free ones provide by unreal engine and edit these as this is a quicker process and fits into my timescale. I started off by going to the contents example and migrating a beam particle effect over to my project and I started editing it. I removed the source to make the beam straight but and reducing the roughness to add a slight jitter. I then increased the size of the beam, and edit the material to produce a more intense emissive light. I then found a dust particle effect from infinity blade project and I migrated this over, I didn’t do much edit to this particle I just scaled it up and changed how much dust is produced. I then placed this behind my spaceship I finally took a gold particle effect from the same package and edited it to spawn more particles and remove an glowing effect from the base of the particle I repeated the process off editing the material to make a stronger emissive light. For post processing I wanted to create global post processing system that I could use for each level I started off by adding a global colour grading I changed the saturation to a light blue and then I increased the values of the contrast, gamma and decreased the gain. I then added images effects to change how the camera reacts with the light so I added a slight vignette and bloom to add a blur effect to the light. I also added an auto exposure to auto adjust to the light system. From here I added an depth of filed to slight blur the materials in the far distance. Below is screenshots of with post processing off and on Conclusion
Overall I think this unit development went well, I was able to produce everything I had planned for in the pre-production and the time scales that I have set myself worked extremely well. I was able to keep to my time scale and I felt that I gave myself some extra time in areas as I wasn’t sure how long it would take me to do to find out that I had finished well under the time scale I set me which gave me more time to improve what I have created. I am extremely pleased with how my mechanics turned out in my block out. I was able to create a custom interaction system that is based on my camera which helped my how my player interacts with the world. I was also pleased with how I created the lights that warm up like a normal light before flicking to on. I liked how all my concept images have turned out I learned new Photoshop techniques for painting and photo composition. I am extremely pleased with how the second and third image turned out, I like the mood I set with the images I found and I felt I was able to create the environment I was looking to create. |
Archives
June 2018
Categories |