FMP – Concept Design Portfolio

Introduction

In the introduction I’m going to go over the following subjects:

• Harvard Reference and Bibliography
• Pre-production
• Production

Pre-production

Resources Needed

Below is a list of software and resources i’m going to need to complete my final major project.

• Photoshop – This software will be used for concept art, background design etc. The reason Photoshop is being used instead of illustrator is because illustrator isn’t very good for sketching. I see illustrator more as a final piece software where you smooth your final sketch and make it a finished product and from my experience with illustrator, i’m not the biggest fan of it. This only because i am not used to having such a smooth drawing right off the start
• Adobe Animate – Adobe animate used to be flash which was one of the biggest animating software in the world. Animate allows me to draw frame by frame which then allows me to perfect any in-between scene. The best thing in animate for me is the library because it makes it easier to save shapes and drawings without you having to re draw them the exact shape and size and overall its just very accessible.
• Unreal Engine 4 – Unreal will be used to actually create the game and run it etc. Unreal is definitely one of the best game engines because 1. Its free and can handle a very large amount of assets and 2. All the coding is already done for you to an extent, which makes it 10x easier and saves so much time for anyone.
• Graphics Tablet – Owning a graphics tablet during the course has been one of the best things to use because it makes it so much easier to draw and sketch digitally. One of the best features about the drawing tablet is the fact that you can draw  naturally as if you’re using pencil to paper.

Research 

So for primary research, i decided to take a few pictures and draw. I drew a kung fu fighter because thats what inspired me in the first place to even make a fighting game.

Since i’m aiming to make a fighting game, there are a lot of options for me to use which is why the best thing to do, to research is take a look at other fighting games, YouTube videos which include combos, level designs etc. The best way for me to get information and screen grabs is if i play the actual game (primary research), or i can go to YouTube and reference the creator for screen grabs and game play.

The first game i’m going look at is, Stick Fight The Game. Stick Fight is primarily based around guns and melee in a cooperative setting meaning a four way battle between players. The guns are fairly balanced but in my opinion certain melee weapons are over powered and are yet to be fixed.

Below are some screen grabs of the game which show a few different levels and a brawl about to go down between four people.

The next game i’m going to look at is Mortal Kombat X and 11. These games were made by netherrealm who are one of the biggest companies in the gaming industry. MKX and MK11 are both the same style of game… 1v1 in different game modes like king of the hill, casual and competitive and there’s also a story mode. Below is a video of the MK11 Story Trailer.

The reason i’m talking about MK11 and MKX is because both games are side scroll 2.5D fighting games and the series of games came to mind when i was looking for some inspiration and it helped me come up come with the idea to make some sort of fighting game that includes unique backgrounds and combos. Although the game im making isnt 2.5D and the backgrounds dont include a lot of realism, i still aim to make unique backgrounds etc.

Sketches

Target Audience

Because there’s not much opportunity for games made by students the best thing to do is try to get in contact with some developers and ask for their advice and honest opinion of your finished product. As a student in Games Design i would aim to get my product out to mostly developers and only a few people publicly. The main reason being that it would be hard for me as a student to get members of the gaming community to listen or test out my product and although developers would be difficult to reach out there’s more chance that if someone does that it will be more of a professional point of view which would help massively. The main target I’m looking at is for any ages above 12 and people who are looking for a couch party game are a two player game to chill out and relax.

The pegi rating is a system that confirms what ages are suitable to play specific games. For example if a game is child friendly and doesn’t include violence or gore or profanity etc then the pegi rating would be PEGI 3. Where as if a game did involve gore, violence and profanity the PEGI rating would be PEGI 18.

Skills and Training

So during the course we have learnt skill after skill after skill and although we have used Unreal Engine and Photoshop through the whole course, there’s still a lot i need to learn. Especially in Unreal Engine where I have to use the coding section – Its not unfamiliar but i do require a bit of a memory booster when it comes down to it. Apart from that I’m pretty good or decent at the least at everything else and if there were anything that anyone need help on, our tutor offers us workshops that help us an unreal amount considering the deadline.

Conclusion

To say the least I’m definitely looking forward to making the actual game than i was during pre production, researching and trying to learn new skills that i required was not one of the best experiences although i really like animate it was such a pain to learn but to level things out using Photoshop cheered me up because i actually know what I’m doing.

 

Production and Final Designs

Introduction

So for this segment I’m going to go over everything from a schedule to making backgrounds to making animations. So for the schedule ill just be writing down things ill do on certain days for example, on may 10th i could be doing unreal or a blog or even both.

Calendar

Below is a calendar made up of a list of things i need to do over the course of a month and further on. It mainly consists of Doing animation, working in unreal engine and Photoshop. In April I have a decent amount of time to get things done so i wont worry as much and then in May i take a bit more pre-caution as the deadline is a lot closer and there’s still a fair amount of work to do.

Background Design (Example)

First we start out with a template of 1920 x 1080 as this is the resolution of the game. The only reason I’m going to use this resolution is because its one of the most popular resolutions to use today. The following background wont be used in the game and is only being used as an example

Now i drew a floor of rocks underground and then grass on top to give it nice look

Then i add rocky mountains and add an a blur to the three of the mountains to add a nice effect. Doing this made it look like the mountain was far away.

For the final part i painted in a sky by filling the background blue and adding lighter shades of blue and added some white, which then allowed me to blend the colours and create a nice blue sky.

As for the actual designs, i aimed for different categories and types of background. The first one i made in Photoshop was a nice psychedelic background which was made of a vary of colours. Doing this would make the player feel a little more immersed in the game, doing this would keep the player a little more interested too.

As you can see below all we do is start out with a basic 1920 x 1080 template only because its the most popular resolution used. I am aiming for at least two levels maybe more, but that’s only if everything goes to plan.

Next i drew my outlines of the drawing and duplicated the outlines because of the fact that if didn’t the colours would go straight through the outline which is not what we want.

Then to make a guide for myself for later on in unreal i drew in a floor. Doing this would make it a lot easier for me in unreal.

Now the only thing left to do is make the background come to life. The way i do this is by filling each section with a dark colour then dotting lighter colours and blending them together to make a nice metallic psychedelic look.

Conclusion of First Background

In conclusion the making of the background was fun to do and hopefully there will be more to come. i was very pleased with the finished product and very satisfied because i had a lot of fun and i think it would work well in my game. I hope to make more backgrounds more similar to this but also i also hope to keep the background art unique and different.

Interactive

The thing i wanted to do was make an animation of some sort, so obviously the basic walk cycle etc, but i wanted more. I headed over into adobe animate and started practising by making a stick man running and jump over a gap on to the other side of the cliff. Even though the animating took a little while to get used to, i managed to finish it, which you can see below.

My original idea was to make a game based around a stick man getting past a level by avoiding obstacles, but it seemed boring and i didn’t really stick to it, so i went ahead and decided i wanted to make a fighting game with stick figures.

Making a Main Menu

I headed over to adobe animate and decided to animate a fight scene between two stick men that would be the intro to my game. You can see a time-lapse of me drawing the animation frame by frame, where you can watch pt 1 here; https://www.youtube.com/watch?v=gGmxV3fQ9bM

You can also watch pt 1 of me making the main menu in Photoshop here; https://www.youtube.com/watch?v=M5sTEu0bEp0.

While making the main menu you have to remember the things you need to make the buttons work in unreal engine; the first thing is to remember you need to create three stages of the button – Normal, Hover and Pressed (Clicked). Doing so will allow you to see if you are hovering over the button or if you’ve clicked it. The next thing is to duplicate your group and rename the text from “start game” to “options” or “exit”. Once you have done this you can export your groups as png files to then later import into unreal engine etc. For further detail on making a main menu follow the link below

https://wordpress.com/post/coreyaizegd.wordpress.com/471

 

Taking a look at combos

As my game is based around fighting, i thought it would be good to look into some combos often used in boxing and MMA.

 

Looking at combos can give me a good idea to whether i want a steady or fast paced game. While i do like boxing, some combos are vague and dont offer a lot of variety which, in my opinion, would make the game a little boring compared to what MMA has to offer.

Some of the most common boxing combos consist of jabs, crossing and hooks. For example;

1-2 (Jab-Right cross)

1-1-2 (Jab-Jab-Cross)

1-2-3 (Jab-Cross-Left hook)

If i used them combos it would look vague and wouldn’t suit the style i’m looking for so i going to stick with MMA combos. The reason i like boxing is because it requires, stamina, strength, pace but its not as fast paced as MMA.

Here are some MMA combos;

Cross – Lead Uppercut – Rear Low Kick

Left Head Hook – Right Head Hook – Long Knee Kick

Animation

For my project one of the main software I’m using is adobe animate formerly known as Flash. Animate allows you to animate frame by frame so you can get everything down to a tee. The first animation i made was the animation for my main menu which you can see in the video below. In this video i drew every frame for the character to move into a stance. Although the video is quick because of editing ,the process of making something small takes effort and time which is why i didn’t record the whole thing.

Next ill talk about almost each and every frame to explain why certain parts have to look stretched and blurred. First of all the reason i blur certain parts of the animation is to add realism and to make the animation a lot more smooth.

First things first was setting up the scene and to do this i set the size to 1920 x 1080 and choose action script 3.0, there’s not really much difference between them but i prefer Action Script 3.0 because that’s what I’m most used to, purely due to the fact that its what i learnt with rather than HTML5 Canvas.

The next section I’m going to talk about each frame and go over what was necessary to draw and effects in a slideshow.

1) The frame is just a frame of the two stick figures staring each other down, doing this makes it seem a little more tense rather than going straight away. Obviously this was the easiest frame to draw because all it was, was just me drawing the two figures then just spacing the frames apart by one or two just to make it a tiny tiny bit longer.

2) The next few frames is of the two preparing to fight by moving into their stances to make as intense as possible, these frames were particularly hard to do as you have to get proportion right which is why onion skin is such a life saver. The hardest part was trying to draw a smooth as possible which pretty hard because theres no real sketching system in animate like photoshop.

3)The next few frames are going to be of the stick man on the right rush towards the other stick man. Drawing these frames was also time consuming because if you want a smooth natural animation you need to add expression and emphasis to the character who’s rushing towards the other. To do this, on each frame you need to turn them into symbols by pressing F8 while the Stick figure is selected. After this, there will be a panel on the right side of the screen that will allow you to add effects which is where the blur comes into play. Adding blur definitely gives it more impact and makes it smoother as you can see in the video at the end of this segment.

4) The Next frames are where the stick figure upper cuts the the stick figure in the gut and then sends the stick figure flying into the wall. To do this i made the stick man stop after rushing and then have him swing and hit the stomach. The animation would look no where near as nice without the blurs and the exaggeration and the stretch. So when the stick man gets hit, i managed to pinch a curve from the stick mans body and stretched it out to make it look smooth. After figuring out that i could do this, i made the pinch even bigger to add more effect and exaggeration and at some points before he hits the wall i brought the pinch back to its original size and added blur.

5) Now comes the one of the hardest parts for me because when the stick man hits the wall, i don’t want it to be stiff, i want the character to hit the wall and sort bounce and fall. i thought the drawing was difficult in itself never mind bending and curving so that the character has dynamic. If i left the fall as is the character would’ve just been stiff in the air falling with no physics, which is why i had to draw the character bending, doing this made it look natural rather than floating. As for getting the character to hit the wall right, it took me a long time because i had to get the characters poses in the right position without it leaving the actual scene. Drawing poses in animation is fun but you have to have patience, because it will take time trying to get the right poses, along with trying to make it look natural and smooth at the same time.

6) Next is making the fallen character get up and get ready go head on with the stick man that punched him in the beginning. This was hard to draw but easier than others. Once again it all comes down to drawing the correct poses but in some cases even when the drawing looks rough drawn you can add a blur effect to cover it up instead of drawing over and over again. First of all i had to draw the guy hitting the floor which was very obnoxious because figuring out how the poses will look was hard and was easier than actually trying to add physics to the motion. In the end i had the guy hit the floor and bend him on impact and then bounce a couple of times. Then came drawing poses for the guy getting up off the floor, but before that happens, the other stick man jumps back to his original position, which was rather easy to draw. All had to do which might have taken longer but it worked, was draw the stick man jumping forward first then flipping flipping the frames around so the character looks like hes jumping backward. Now the other character gets up off the floor as seen in the images below.

7) Now we move onto the final frames. This is where both stick men go head on with each other and create a punch wave which you will be able to see in the images and the final designs post. This part was the easiest part to make as i already have the animations where the both characters go into their stances and one where the one stick man rushes the other. So all i had to do was copy and paste the frames to the end of the timeline and then re size he animation where they go head to head to make it look more natural. Throughout the whole of this segment you’ll be able to see the frames where i modified the body shape and added blur.

Reflection

After making the animation i looked back at it and saw some parts of the animation that didnt look as smooth. Some of the body parts of the two characters werent smooth enough and looked rushed which wasnt good to see, although it was hard to see in the animation i could still see it, but to make up for it i went back and re-did some of the frames, making it look a little more presentable.

Audio

So as far as it goes for audio, i only have a few recordings to go with the punches, which will be uploaded to youtube along side a video. The video will be evidence that the sounds were recorded by me and not taken from online. Although the sounds i recorded arent exactly professional they are still usable and sound decent. The way i recorded was annoying but i first opened audacity and plugged in my microphone, then i set up my phone at a side angle to record my hands and microphone (and my messy desk). Then i pressed record on my phone, waited five seconds then hit record on audacity. After doing these things, i headed over to premiere pro, synced and combined the clips.