Showreel

For my showreel, I started with the idea of wanting to do something than a mere slideshow of artwork as I really don’t think my style is suited to it at all. I ended up deciding, with approval from my tutor, that I would have a cartoon version of myself talking the viewer through my work. Firstly, I wrote a script for the showreel and recording myself speaking the lines in the sound studio. I found a stock song in Logic Pro that I thought fit really well with the theme of my showreel, so I chose to stick with that rather than spending time trying to create my own. Then, I drew up a storyboard of how I wanted my showreel to play out. I figured a theatre setting would be the most fitting for the theme, so I made another horrifically rough storyboard in Flash…:

…before cleaning everything up nicely and animating a few small gestures…:

…then, as with the trailer, taking it into Premier Pro to cut it all together and add the trailer, images and sound clips into their appropriate places and take it into After Effects to add the fancy transitions before calling it done!

Sound Production

Firstly, I needed to create some music for my trailer. I was hoping to team up with the ‘Access to Music’ students to have my music made, but unfortunately the programme wasn’t running this year according to my tutors, so I had to take matters into my own hands!

Using LogicPro and the skills I’d picked up during my weekly sound inductions, I managed to use quickly grasp how to use the MIDI keyboard…:

…in tangent with the programme to customise my own array of notes using the built-in instruments. I knew my music had to have some sort of Mexican flavour to it, so I started off by using the Mariachi horns to create the melody. I used some of the ready-made note arrangements for this and edited some of my own to create a fun melody. I also added in a shaker to give it a little extra spice! Since this was an action game, I figured I’d need something quite ‘punchy’ to emphasise that and fit with the footage. I chose to go with some House beats and synth bass to really give the song some power. Overall I was pretty happy with how the track turned out. The trailer also needed a crowd, however! On top of the stock crowd sounds, I asked some of my fellow students to cheer and jeer in the sound recording room so that I could layer these sounds on top of one another to create the effect of a huge audience. Here’s Paul, cheering to his heart’s content…or singing opera. Either way, here he is in the sound room:

Here’s an image of me editing away in Logic:

When the music was complete, I just needed to match it all up with the trailer (also easy to do in Logic Pro) and add in some more sound effects before calling the trailer done! It was a long road for something I never even initially set out to do, but I think it paid off!

Next up is the Showreel! We’ll be back in the sound room sooner than expected…

Presentation

During another critique, I was asked how I was going to present my work at our end-of-year show. I hadn’t given this much thought past a 2D character animation reel. My tutors suggested I use something like Stencyl or Game Maker to make my character interactive. I thought this would be a great idea and relatively easy to do, so I began researching into both programs. The overall consensus seemed to suggest that, out of the two, Game Maker was the one that would be most suited to my purpose. After downloading the program, I went through and made the tutorial game (a game about a clown bouncing off of the walls – intricate stuff, right?) to get a feel for the program and started to look at how I could build my character:

It seemed that I’d have to create a sprite sheet of each of my characters animations so they could be inserted into the Game Maker engine. Luckily, I managed to find out that Flash can do this at the press of a button…:

The sprite sheet came out as well as could be expected…:

…but at this point I started to wonder if this was really the best way to represent my idea at the end-of-year show. It’s all well and good having an interactive character, but to have them interact with another, computer-controlled opponent would a) take a whole new level of coding and b) still have to be kept quite basic. Rather than perform a technical exercise, I decided I wanted to do something a little more artistic…

In a tutorial with one of my tutors, Kim, I brought up the idea of perhaps creating a trailer instead of an interactive character and she loved the idea. She agreed that it would get across the idea of the game a lot more clearly than a simple interactive character ever could. I began looking at other trailers for similar games such as ‘Rayman Jungle Run’ (http://www.youtube.com/watch?v=zqCVbaklOzo) and ‘Jetpack Joyride’ (http://www.youtube.com/watch?v=Jzxi8nid9BQ) and came to the conclusion that I should include a decent amount of gameplay with some selling points and other animations surrounding said clips. I’ve also had an induction into the sound production facilities recently, so I can record some voice samples and create some music for my trailer where I might need to.

I started by making a very rough storyboard (as in so rough I’m pretty sure I’m the only one who would be able to tell what’s going on) and transferred it into Flash so that I could get the timing exactly where I needed it to be. Once I had the entire thing ‘blocked out’, I started to go in and create some of the extra assets for the trailer.

Here’s another time lapse video of me creating the first scene of the trailer! Head over to the ‘Misc.’ folder again and watch ‘trailerTimeLapse’!

Here’s where I had to have some of the game scenes completely ‘built’ so I could include some emulated gameplay in the trailer. Since I’d already made the environmental pieces in 3DS Max, this was an easy case of just tracing over them in Flash to make them fit in with the aesthetic of the characters. I also created and animated a crowd at this point to give the game a more ‘populated arena’ feel:

Once I had all of the scenes animated, I decided to present them all inside an iPhone device to really get the feeling that this could be an actual product across:

Using Photoshop’s 3D text tools made for some very interesting ways of displaying the phrasing and title logo, too! Luckily they are very easy to pick up, especially with any basic knowledge of 3D terminology.

With the visuals for the trailer complete, I took them into Adobe Premiere Pro to cut them all together and get the timing right. After that was done, it needed to go into Adobe After Effects so the flashy transitions could be added in to really give it a professional look. There was almost as much post-processing as there was animating the trailer in the first place!

Now it was time to move onto the sound. Get those ears ready!

Animation

First thing to do before I animate is to basically figure out what exactly it is that I’ll be animating! Using my GDD, I can clearly see all the moves that I’ll need to animate:

(Player)

• ·         Idle Pose
• ·         Jump Slam
• ·         Backwards Dodge
• ·         Spin and Throw

(Opponent)

• ·         Hit by Slam
• ·         Being Thrown
• ·         Dazed
• ·         Hit Ground After Throw

I’ve also just had an induction into the animation area of my University. Here I learned about the Dragon software and animation apparatus they have set-up. Unfortunately it didn’t seem like there were many times where the room would be free, so I took this into account when finalising my decision on how to animate my characters. I’ve been thinking about this quite a lot since BA7, and I think the most efficient way will be to start it all within Adobe Flash. Now I’ve learnt a lot more about the program and its new features since I last used it I can create animations that will still be of a decent quality. As much as I would have liked to have animated using traditional methods, I think for the time-scale I have it would be much better to work in Flash to produce good-quality animations in good time.

Beginning Animation:

To start with, I’ve drawn out my character in the position he’d be standing in for the duration of the game. I figured the easiest pose to start with would be the ‘Idle’ breathing pose. I want to exaggerate this quite a lot, so I’m going to make the chest really puff out and have the arms squash slightly. I’ve made and animated a skeleton to demonstrate this:

Animating this way lets me get the movement and timing down quickly and easily before tracing over it with the body outline…:

…and then finally cleaning it up using the Line tool. The Line tool is great because it allows for clean, precise curves and they’re easy to bend and manipulate, making animation easy and very smooth. Obviously it still takes a very long time to produce, but that’s the price tag that comes with animation as a whole! With the Body, Arms and head all on their own layers, I can easily move the different parts around without disrupting any previous movement I made to another part. I found it easiest to work on the body first and then move onto the arms and finally the head since the body is basically the ‘parent’ of the other parts, so the arms and head will only move as far as the body does. Once it’s all cleaned up it looks something like this:

For an animated version of this and all of the other poses, check out the character reel in the submission folder!

This process is repeated for all of the different actions that the player would perform, such as the jump:

I also have a time-lapse video of myself animating one of the arms. You can find ‘armTimeLapse’ in the ‘Misc.’ folder in the ‘Body of Production’ section of the submission.

This process was sped up by over 1000 times, so you can imagine how long it takes to get right!

Now, after I’d gotten all of the actions done for the player’s character, I could move onto the Opponent’s animations. After mocking up a quick villain-esque character…:

…I began to animate the various different poses using the same techniques I’d used before. The difference with these over the player character’s animations, however, was the fact that the characters needed to interact with each other for these animations to work. Luckily, Flash makes it easy to use existing animations and artwork as a guideline to work on top of.

Here’s where I insert another time lapse video! Take a gander at ‘jumpTimeLapse’ and see a process that took almost two hours in just 2 minutes!

Colour. This is honestly a part I was kind of dreading. It seems like the most logical option here would be to just fill in the characters with flat colour (see above), but I’d much rather add some sort of shading to the characters. The only problem is, with so many frames of animation and Flash’s method of colouring, this could take much longer than I could anticipate. I think, this time around, I’m going to have to sacrifice the shading for flat colour in favour of another little something…

Character Design

            There are a few obvious factors I need to think about when creating my character;

·         Keep them within the Mexican/Luchadore theme.

• ·        Give them a large upper body (since they’ll be doing a lot of throwing!).
• ·       Make them simple enough to animate efficiently.

With this in mind, I began by creating a set of silhouettes to get an idea for the form of the character:

I actually like quite a few of these, so my next step is to take them into Flash and Photoshop to colour them and give them a more definitive personality. Here’s where I’ll also come up with some sort of costume and mask design/colour scheme to go with the character.

I think this first concept is good in the way that it’s quite unique, but I really don’t think it suits the direction I’m looking for my game to go in. Plus, that face is seriously creepy. He looks like he’s just been plucked from the ground or something.

I like the way the muscles could be really squashed and stretched during the animation stage in this design, but there’s something about the rest of the body that I’m not too keen on. I’ll keep the point about the arms in mind as I continue. I like the colour scheme of the mask here and the design is simple enough without being too bland. I think I’ll stick with this colour scheme for now and change it further down the line if I need to.

I was actually really pleased with this particular design, but unfortunately it’s far too complicated to animate efficiently in the time I have to complete this project. I think I need to simplify the design quite drastically.

Again, as much I like this design, I feel as though it’s a little too simple. I think that during animation this would fall victim to looking far too flat and paper-like very easily.

 

After many days of frustration and sketching, I’ve settled on this design for my character. I took the rounded muscles from my second design so I could emphasise them with squashing and stretching and coupled them with a relatively simple-shaped body. I think this design will be easy to animate well and efficiently while still retaining a lot of character. A lot of the expression will come from the face but the body will be easy to manipulate into various different shapes to get the ‘slightly-exaggerated’ look that I’m after. Here’s a turnaround sheet of the character:

At this stage of my development I had a critique session with my tutors, who I explained the idea I had for the colouring technique I would be using:

Here are 4 different styles of colouring; flat Flash colour with either cross shading or block shading and 2 variations of a Photoshop-painted style. I initially chose to go with the Photoshop-painted style (without cross-shading) because I thought the clean outline of the character and the sketchy colour on the inside of those lines would give off a really nice ‘boiling paint’ effect. After doing some research into how long it would take to export each frame from Flash to Photoshop and paint them one at a time, I decided that this method would take far too long and take away valuable time which I could be putting into the animations. For now, I’ll animate the characters in black & white and decide which colouring method is best when that’s done since it’s easier to colour in finished animations that it is to animate with colour. Well, in Adobe Flash it is anyway.

Now that I have my final character designed and the turnaround sheet for reference, I can begin the animation process! I’m doing quite well for time according to my schedule, so hopefully it will be smooth sailing from here on out!

The Concept

So, using all of my research from both BA7 and my research report on the successes of mobile gaming, I'm going to take what I feel makes the most addictive and simple mobile games and use them to create a game that fits in with the 'Lucha Libre' theme that I've chosen to go with.

My main goal with the concept is to implement some sort of high-score mechanic since this will leave the game open for tons of variation as the player will always have a different outcome. Another thing I want to focus on is making the game easy to ‘pick-up-and-play’ very quickly since, in my research report, I found that these were the most successful games in terms of gameplay and replay-ability so I’d like to retain that in my concept. How would all of this fit into a fighting game, you ask? Well, let's experiment!

Since the Mexican way of wrestling is a fast, full-contact sport with lots of jumps and movement, I’ll need to think of a mechanic that is both simple enough to play on a touch screen device but is still faithful to the source theme. My main inspiration for making this game in the first place is ‘Punch-Out!!’, a classic game on the Nintendo Entertainment System. It was an incredibly simple game but it really made the most of the hardware when it was released back in 1987. The player would be standing in one spot while only being able to briefly dodge left and right or punch. Such simple controls, couple with different enemy patterns and weaknesses made this simple control scheme seem perfect for the game.

I think the idea of having the player stand in one place with limited movement is definitely the way to go for my game. Mobile controls aren’t particularly suited to full, precise movements so I can take advantage of that and create something that makes the most of the touch-screen.

I’ve decided to go with having the player swipe in 4 different directions to execute a limited number of moves to attack and defend, since this allows for quick, imprecise gestures to be turned into easily-executable moves. I could incorporate things such as the accelerometer somehow, but I’ll look into that a little further down the line. It’s basics for now!

I also had the idea of having it so the players would throw each other from the ring to get the best score (in distance possible) instead of the traditional 'pin them down' rule. This would make the game a lot more fast-paced and well-suited for mobile play and open up a plethora of new mechanics I can play about with. Obviously there would still need to be a degree of fighting/wrestling involved as I still need to keep it as close to the original theme as I can, but with a twist that really suits the platform. I’ll have some sort of timer attached to the game as to encourage quick, timed play.

So the concept so far is…a 2D fighting game built specifically for mobile touch-screen devices. The goal is to weaken your opponent in a set amount of time before throwing them out of the ring as far as possible for the highest score. I’ve been playing through the game in my head and I can see this idea panning out quite nicely!

Game Design Document

So, let’s get cracking with this Game Design Document (I’ll be referring to this as ‘GDD’ from now on, just so you know). The idea here is to make a document containing every little detail of the game so that if it were given to a team with no prior knowledge of the game, they would still be able to produce to the level of the original vision. I want to keep this as professional as possible so, using the research I did into it in BA7, I’ve made a rough template containing the contents of everything I’ll need to put in the game, with room to add new things as they crop up. To get it to the game industry standard that I want it to be at, I’m going to keep the design of it as simple as possible since, unlike a pitch,  this isn’t trying to sell the game. It’s is primarily just for conveying the information to the development team so fancy visuals are not only unnecessary, but can detract from the GDD.

In the GDD I’ll need to include every detail about my game concept as if it was going to be developed and released. This includes (but isn’t limited to) the game mechanics, characters, rendering, the game world, user interface, game engine, sound design, single player and multiplayer details. Playing the game out in my head during this process is incredibly important as I can pin-point any problems that might occur during gameplay, such as balancing issues and unfair advantages.

…writes GDD…

So, I’ve got the majority of my Game Design Document completed (head over to the submission folder if you’d like a gander!) and I’ve got a pretty solid idea of how the game will play out. Now I can move on to the character designing!

The very beginning...

So, now that BA7's been and done (after many set-backs, anyway!) I can finally begin BA8's production. The aim is to produce a professional-quality game design document, animated 2D character(s) to be presented in a portfolio style and all the details of the production along the way! Using all of the research I've gained from BA7, I'll start by creating and detailing a solid game concept and going from there!