The Platformer

I made the decision recently to exclude platforms from my game. Part of the reason for this is that to create a fully platformed area I would need to scale down my main character, thus reducing the resolution and definition of the graphic, which I really didn't want to do as I liked it just the way it was. Another reason for this is because the way I had built my code would've made it very hard to implement the platforms successfully. I imagine I would probably have to use arrays to get this to work therefore rewriting a massive amount of my code and probably running into more problems on the way. This has been a learning curve however, as has the rest of the coding process and there are many actionscript methods I would be curious explore were I to develop another game, mainly the use of arrays and external classes. Were I to develop the game further I feel that I would definitely include the platforms as it adds so much more room for variation in the levels giving a more 2 dimensional experience. I feel that this single level project didn't need the platforms as there is enough content to keep the gamer interested for the amount of time they are playing.

The Hero

The hero is a character I created quite a while ago and have always wanted to make him into an animation or game. Until this project I had only really used him in graffiti style drawings and doodles so it is great to be able to see him come to life. I suppose the character design is inspired by similar cartoon monsters such as Pokemon and I have been told in the past he shares a resemblance to Mewtwo from Pokemon or Sonic the Hedgehog.

Having the horns and tail makes him look playfully mischievous, which I actually think adds a certain amount of juxtaposition when compared with usual devil-like creatures.I knew from day 1 that I didn't want him to come from Hell or anything obvious like that. I eventually settled on the idea of him being an alien who looks very much like what we would call a devil but actually is an alien with a coincidental resemblance. This is good because the features of the creature automatically trigger certain presumptions, which can be destroyed as the story goes on.



The reason I chose to have no name for the character is because I want their to be a role playing element to the game. At the start the character has no clothes, no name and no particular skills and we don't really know all that much about him. As the story progresses I want the player to make decisions on the character's developments, with the ability of learning and developing new special feats and collecting and equipping items, clothing and weapons to assist the hero in his journey.

Barber Ross

Barber Ross is one of the main character's in the story. The name, image and character or Barber Ross was taken from a combination of the name Barbarossa, which was the surname of 2 13th century, Greek pirates called Aruj and Hizir, a character called Major Robbie Ross who is a from a play by Timberlake Werten Baker called "Our Country's Good" (The sash Barber Ross wears is a homage to the sashes worn by military officers in the late 1700s when colonisation of Australlia began) also from Sweeney Todd, the barber and serial killer of The String of Pearls. I was also inspired by the relationship between Long John Silver and Jim Hawkins in Stevenson's "Treasure Island" and a similar relationship between Paul Atreides and Gurney Halleck in Frank Herbert's "Dune". Having such a strong mentor figure who differs from the stereotypical protagonist sterotype and is more of an anti hero gives room for a lot of interesting plot devices, such as the constant question of morality and the main protagonist's ability to look past the things which make the mentor imperfect. This is specifically apparent in Treasure Island

I liked the idea of the nickname "Barber" has there are certain connotations that go along with that. In the story I wanted there to be a great deal of suspicion of Ross's true character. As the plot emerges the player character learns that Barber Ross is apparently called so because of his tendency to scalp his fallen enemies in his military days. This suspicion creates friction between Ross and the hero and eventually leads to the hero deliberately not leaving the new planet when The Empathy begins its return to Shadow.
In the end the King reveals that Ross actually got his nickname from the fact that his father was the former King's personal bodyguard and beard barber, which is the reason for Ross's links to the Royal family and the reason he was given such excellent military training as a child.

The Synopsis

A basic synopsis/introduction of the story

The Empathy, a privateer space ship embarks from Shadow (The Planet of the Devils) to a recently discovered planet, which King Drake believes would be an ideal place for many of Shadow's devils to emigrate to, as Shadow is becoming increasingly polluted, over populated and many families are having to live in underground bunkers due to an increase in acid rain. The Captain and crew of the empathy have been charged with eliminating the under-evolved, invertebrate, native species that currently occupies the planet and further investigating the minerals and plant life that inhabit areas suitable for settlement and agriculture. You play the role of a young devil, who was found unconscious in the escape boat of a ship wreckage by Captain Serpiente on another distant world 5 year ago. The Captain brought you aboard the ship and left you to be mentored by the Empathy's resident chef "Barber" Ross, who's past is shadowed with secrecy and mystery. And you are old enough now to realise that the scars on Ross's body, who has taught you everything you know and brought you up as if you were his own, probably didn't come from chopping vegetables and each moment you are you are slowly becoming aware that there is much more to this "new planet" than King Drake had ever imagined and that deep in the centre of this alien world may not be a core, but a heart!

Animation and drawing

I took a long time animating all of my graphics. I really thought that it was of paramount importance that I did the animation frames as smooth and proportionate to each other as possible. As I said in one of my previous posts, I was inspired by characters and environments such as those in old 8 and 16 bit console games. Form and functionally is extremely important in all forms of design, but there has to be an equilibrium between the two to create something, which is both aesthetically and practically harmonic.

For the walking animation I drew and scanned 12 individual frames and then went over each one with the pen tool in illustrator then messed about with the colour settings. This in all was a highly time consuming process, which with the facilities I had, couldn't really have been avoided. If I were to go back and do this process again I wouldn't definitely invest in a graphics tablet as I could get better stroke effects using the pressure sensitive feature. Not only that but the drawing phase would be far quicker overall. I would also have done it the way I did my later graphics such as the trees and headstones. First I drew a layer in illustrator with no stroke and a black fill to mark the outline point. I then created another similar shape within the lines that also had no stroke but this time they had the fill colour. The next thing I do is use the knife tool to cut the shadowed bits, then recolour with a darker tone. Below I have shown the different layers of colour in the headstone graphic.



The good thing about using illustrator is that vector points and curves can be easily manipulated. Multiple illustrator layers can also be imported as keyframes into a flash movie clip, making animation much easier to achieve. All the grass in the game is animated. I achieved this by making a basic "zig zag" grass graphic, then made 5 copies of it each on seperate frames. I then went into each layer and grabbed the tips of the grass blades and moved them a bit mor each frame. Once I was happy with those 6 frames i simply copied them, reversed them and placed them after the original 6 to make a fluid loop. Another thing I did was put ants crawling up and down the headstone as if at work. For this I just had to duplicate the same ant shape and adjust their positions and rotation values to make sure the 12th frame would go seamlessly back into the first.

Describing bits of the code

Here is a small example of the code i built explaining how I achieved the side scrolling. mcDevil is the character movie clip. charSpeed is the pixels per frame that the character moves in either direction (depending on which arrow key is pressed). wall2 is a wall background graphic. The following code is accessed on every frame to check the position of the character and make sure it can only move between 100px and 400px on the x axies. If it does try going past those positions the character is moved in the opposite direction with the same pixels per frame (charSpeed)therefore not moving anyway. This also triggers the background to move instead so instead of the character moving along the level, the level is actually moving behind the character.

stage.addEventListener(Event.ENTER_FRAME, bgScroll);

function bgScroll(event:Event):void{

if (mcDevil.x >= 400){
mcDevil.x -= charSpeed;
wall2.x -= charSpeed;
}

if (mcDevil.x <= 100){
mcDevil.x += charSpeed;
wall2.x += charSpeed;
}

To scroll the background for an infinite amount of time I made it so the scrolling movieclips such as the grass were 2 identical backgrounds next to each other. Then when the entire movie clip has moved the length of one, the entire clip moves the length of 1 of them, so it seems that the background scrolls seemingly seemlessly. Here is an extract from the code demonstrate.

if (bg1.x <= -1){
bg1.x = bg1.width/2;
}
if (bg1.x >= bg1.width/2 +1){
bg1.x = 0;
}

Here shows how I made the character flip directions according to which direction he is moving, which is triggered by the value of the boolean faceRight

if (faceRight == true){
mcDevil.scaleX = 1;
}
if (faceRight == false){
mcDevil.scaleX = -1;
}

Inspiration

The reason I chose to use flash and develop a 2 dimensional platform game is for 2 main reasons. The first being that I had no previous experience in Flash or Actionscript and recognised that it is an extremely important skill to have and one which can be utilised in a variety of different ways for a multitude of different purposes. The second reason is because I think it is extremely important when doing any project that I am passionate about it. My fond memories as a child were playing Super Mario World for the SNES or Sonic the Hedgehog for the sega. A combination of loveable characters, vibrant fantasy worlds and rich diversity of enemies and challenges really drew me in to play these classic games hour after hour. With that said I knew from the very start of the project that I wanted my game to create many of these design elements to create a game that is visually and aesthetically stimulating as well functional.



Everyone who knows me knows that I am extremely excited by science fiction. I strongly believe art, films and literature are most interesting when they show something beyond the realm of normal life. In theatre for example I much favour practitioners such as Bertolt Brecht or Antonin Artaud, who saw artistic truth as something which represents a theme rather than replicates it. Brecht once said that theatre shouldn't be a mirror to hold up to society but a hammer in which to shape it. Both Artaud and Brecht used symbolism to portray a message rather than trying to recreate reality much like other famous theatrical practitioners such as naturalist, Constantin Stanislavski. In this same sense I think there is something special about creating something unlike real life: A camera can take a perfect picture of a situation but it is an artist's individuality that really makes a message special. This is why I love good science fiction so much.


Take Frank Herbert's Dune as an example. Dune is an excellent novel and one which I have been deeply inspired by. It is a story of love, politics, ecological change, religion, betrayal, corruption etc. The fact that it is set in a distant made up planet filled with alien technology and magnificently imagined creatures just adds to the quality of the story. In the same sense that William Shakespeare's classics like Romeo and Juliet, Macbeth, Twelfth Night or any other of his plays are relevant not only in this chronological era but were just as relevant in a different time and a different place. It is the same reason why the original Star Wars films were so popular; The character driven stories, which echoed those of Ancient Greek mythology could have been set in Manchester instead of Tatooine and the base story would have been just as relevant.

Other novels I considered when coming up with the setting for my game were The Chronicles of Narnia by C.S. Lewis, Treasure Island by Robert Lewis Stephenson, Northern Lights by Phillip Pullman, Hitchhikers Guide to the Galaxy by Douglas Adams, Bloodtide by Melvin Burgess and The Colour of Magic by Terry Pratchett. Also speaking of Douglas Adams there was a great serial of the original Doctor Who series from the Tom Baker years also written by Adams called 'Pirate Planet'. I was really interested in the integration of pirates in a science fiction setting, a theme which has been used countless amounts of times in different mediums for example the Japanese animated film 'Castle in the Sky' by Studio Ghibli.

Play My Game!!

Play it here: http://sites.google.com/site/lcogamesdesign/
Obviously it isn't complete, but I have redone all the graphics and made it look very nice if I do say so myself. I also worked on the coding to get the side scrolling working.

Play My Game!! (So far)

NOTE: I have moved the flash movie to the bottom of the post so it doesn't overlap the sidebar

I know what you're thinking..."That's a Teenage Mutant Ninja Turtle isn't it?"
The reason for this is that I am focusing on the code and redoing the graphics will be very time consuming and pointless if I can retrieve them from my broken laptop. As the amount of frames of this game sprite match the amount of frames I want for my character it is perfect for mapping out the code and getting an idea of how it will run. I have spent hours and hours working on the code over the past few days. I found a useful tutorial at:

http://www.mrsunstudios.com/2008/08/tutorial-create-a-platform-game-in-as3/

That came in handy for getting the gravity working right. The majority of my time has been spent getting the animations right. It seems like a simple task getting the character to move, however I had various problems. For example, As the character animation function was set to recall on every frame, the character would never move past the first frame. I solved this (eventually) by making a few variables;

var standFrame:uint = 1;
var walkFrame:uint = 13;
var jumpFrame:uint = 24;
(these set the initial frame of each type of animation)

var standFrameStart:uint = 1;
var walkFrameStart:uint = 13;
var jumpFrameStart:uint = 24;
(these set the definite start frame of each type of animation)

var standFrameEnd:uint = 13;
var walkFrameEnd:uint = 24;
var jumpFrameEnd:uint = 31;
(these set the definite end frame of each animation

Then what I had to do was create another function that was recalled on each frame to calculate what the frame should be and counteract the 1 i was having problems with, here's a bit of it:

mcDevil.addEventListener (Event.ENTER_FRAME, frameProgression);
function frameProgression(event:Event):void{
if (standFrame <= standFrameEnd && standWalkJump == 1){
standFrame ++ ;
}
if (standFrame >= standFrameEnd && standWalkJump == 1){
standFrame = standFrameStart;
}

Then instead of having the animation go repeatedly to frame 1 for example, i linked it to the current frame variable because it added 1 to the frame value every frame then went back to the start when it reached the end. I know it sounds complicated but thats because it is. I spent a while getting it right!! I also had to set up a few conditional commands to make it jump to the right loop. I did this by creating an variable called standWalkJump with a value of either: 1(stand), 2(walk), 3(jump).
Then I made a few conditions, so "if the right key is pressed and the character isn't jumping then standWalkJump = 1(stand" this is the code for that:

if (rightKeyIsDown && mainJumping == false){
standWalkJump = 2;
jumpFrame = jumpFrameStart;
standFrame = standFrameStart;
}



I know at the moment there isn't much of a game as such, but I thought I would show my progress, as I feel that I have reached a massive milestone. I am also getting much better at flash and really starting to get to grips with how things work.

NEXT: I am going to try scan in my sketches later on and show the progression from paper to 2D image to 3D image. I might even start sketching out my jumping animation as it would be nice to see him move again!

Modelling

As I said in a previous post, I was initially quite intimidated by block modelling, however I got the hang of it quite quickly in the end. Because my character is quite curved and organic looking, I put the cube in hyperNURBS, so I could keep looking at smooth and hard versions of my model. I started with a cube in cinema 4D and gave it 4 subdivisions on each side. After converting it to an editable object I started moving the points around to make a more spherical shape for the head. I found it quite useful selcting multiple points and using the scale tool to make sure the points that I wanted moving on each side were moving the same distance. From there I selected 2 polygons on the bottom of the "head" and then extruded them for the body. I then used the knife tool to cut more polygons and moved the points aroud to make the body as well as extruding some arms and legs. One of the hardest bits was getting my character's man boobs look like man boobs. He ended up with some strange pointy breasts a few times but after a lot of knifing, extruding and moving things about I managed getting them looking reasonably good.


Here are a few looks at my early model. The 2 left models are without the hyperNURBS and the right 2 are with. I have shown them with and without the lines.


To do the horns I drew one in Illustrator(left), then imported it into Cinema 4D and put it in extrudeNURBS to make it 3D then put that in symmetry.


Here is my most up to date model from a back and side view. i spent quite a bit of time sculpting his arse and shoulder blades. I tried giving him more of a spine but it just looked horrible. Also you can see how the normal map and texture look on my model. I'm very happy with the whole thing so far as it is great seeing the character I have been drawing for months become 3D. I obviously need to put some hands and feet on it and a tail but thats about it. After that I am considering rigging him up with bones and joints and the sticking him in unity. I don't yet know if I will do much in terms of a 3D game but I would like to get him moving around just to see what he'd look like if he were in a 3D game.

Texturing

I decided to do the texturing first as I didn't want to have to wait until I had completed the model to see my character's face! My character is all red apart from his white eyes. As I was doing my character in 3D, I knew that I had much more room for detail, so I decided to make my character's eyes look more defined that its 2 dimensional cousin. Instead of modelling the eye definition on the character, i wanted to do it as a normal map, which tells light how to react with the surface of a 3D object, simulating 3 dimensional textures. The 2 main reasons for this are than it cuts down render time and polygon count but I also wanted to use a combination of new techniques to create my character. As normal maps are used in pretty much all next generation games, it seemed extremely important to have an understanding of what they are and how they work. I used the following tutorial:

http://planetpixelemporium.com/tutorialpages/normal2.html

This tutorial combined with Frank Plohmann's NLinShader helped me make a decent normal map, which I am extremely pleased with. Here's how I did it:


I used a sphere as a starting point, to represent the eye


I then modelled the eye lids around the eye


I then threw it in hyperNURBS to smooth it all out


Added symmetry


Altered the camera, put a white sphere around the whole thing and added colour, then rendered this out for the texture of my character's face


Then used the NLinShader to render this to be used for the normal map. I did a bit of work in photoshop to patch the two textures up but thats pretty much it


As you can see, the normal map gives the illusion that the eyes are 3 dimensional. A nice little trick I think

Enter the Third Dimension

Thomas Greenough took one look at my character design and said "You’re going to model and rig that?", laughed evilly and walked away. This worried me a little bit as I have used Cinema 4D before but only using a combination of Booleans, hypernurbs, sweep nurbs etc. etc. It was actually fellow IMD course mate Liam Viney who gave me a useful bit of information, which is that most 3D designers use a technique called block modelling and showed me a rough example of what he meant. Block modelling seemed quite intimidating at first however there are so many positive benefits to using this technique instead of using "tricks" as I had done before, that it seemed like the only option. Not only does block modelling give you a single clear and precise model but it cuts down the polygon count massively, making it much more practical in the game world. I will show how I DID model the character despite Thomas' dissuading cackle in my next few posts.

The Switch

While I am on the subject of actionscript 3, I purchased a useful book from Amazon, which is by Gary Rosenzweig called "Actionscript 3.0 Game Programming University". I have been reading through the book piece by piece, examining the source codes and trying to rewrite it using the same logic that he does. I started struggling about 75 pages in and decided to look for a video tutorial. The reason for this is that in the past I have found that I learn much more effectively through movement and sound. By planning a psychological learning strategy I can really make things sink in much more. I once learnt all the lines to Richard 3rd in less than a week by sticking each line to a different object in my living room, then when it came to remembering the lines I just had to imagine I was looking round my room and as each line was associated with an object, I only had to think about the sequence of the objects rather than the words themselves. In a similar way I have been sticking multicoloured post-it notes around my bedroom with bits of code on. Anyway, I found an excellent tutorial from Lynda.com called “Actionscript 3.0 in Flash CS4 Pro for Designers.” It basically explains the basic concepts of AS3 and Flash and uses analogies and repetition as well as walking through various exercises. From watching that video (which I believe is over 6 hours!) the book made much more sense.

The Laptop Hell and What I Lost

A few weeks ago my laptop decided it would give up on life for the third time in the 14 month period that I have had it. I am planning on heading to PC world at the weekend to see if I can get it replaced. The really annoying thing is that it had ALL the work I had done on my games design. I had not only finished my 12 frame walking animation but had done an idol animation as well. On top of that I blocked out a lot of the code in actionscript 2 to make my character move about.

The main problem I had with my animation and code was that (as you can see in my previous post) my character didn't walk on the spot but moved across a fixed point. This meant that I had to code it so that after the animation reached its 12th frame and looped back to the first frame, the whole animation would leap forward a few pixels to make it look as though he was actually walking as opposed to "moonwalking". This looked really nice visually until you took your finger off the left or right key half way through a walk cycle as the character appeared to ping back to the starting position (as the cycle had not finished therefore didn't move forward). I have racked my brain trying to think of a way to preserve the nice smooth walking animation that I have become attached to; however I have had to make the reluctant decision to sacrifice form for function. I'm sure it is possible but 1. I am only making a small representation of what the game would look like, were it to be made in its entirety and 2. I am new to coding and am pushing my brain to its very limits as it is.

Just thought I would upload my first images. For this I basically drew out my character in 3 key frames with different poses (Contact, Recoil and High Point) which made frames 1, 2 and 5. I then used those frames as a guide to draw out the 3 poses but on the other leg. So 1=7, 2=8 and 5=11. After I had drawn these images out, I scanned them in and took a long time tracing them in Illustrator and getting the strokes looking right. I still need to do another 6 connecting frames for my walking animation and put in details such as the tail, which I want to wave about. I am also going to give a cheeky little penis for comedy value.

http://www.idleworm.com/how/anm/02w/walk1.shtml
I used this for a guide on making a walking animation cycle