Project 2 update

Side scrolling environment

0.8

After spend several more hours trying to get the his test to work, I had achieved little, and was very frustrated. I managed to get the actual hit test working, but couldn't get it to play the movie clip associated with it, it would go to the first frame of that movie clip, but no matter what I did, I just couldn't get it to play! So i couldn't even begin to write the presumably more difficult part of the code, where pressing the duck button avoided this. With time fast running out I'm really not sure I will be able to get it to work, So I have included the "get hit, fall down and get back up again" clip anyway (Space button) so the hours I spent on trying to get it to work wont have been a total loss.

I also fixed the issue I had with the ground movie clip only playing through once in reverse. It now moves back and forwards almost seamlessly.

I had another go at the blocks whizzing around in the background, and felt i pulled them off a lot better this time. I might tidy their timings up a little bit though.

All in all I'm pretty happy with the environment, it just needs a few minor tweaks here and there. ideally I would like to get the hit test - falling over animation working, but with just one day left I think that might be pushing it.

Isometric environment

0.5
Ive spent a good part of the last two days going over the tutorial I used for this one (written by Tony Pa) some of the code dealing converting the characters placement into isometric is pretty heavy and I don't quite understand it fully. Also I just cant get (!Key.isDown()) to work, So the character refuses to stop playing the walk animation if he is stationary. This has really perplexed me as to why it wont work and have tried just about every thing to fix it, from having 'static' frame in the movie clip and using the gotoAndStop command, to stopping the whole movie clip, and Even stopping the entire _root movie clip, but the (!Key.isDown()) just seems to have no effect.

As I started to get incredibly frustrated with this I decided to move on to something else, I wanted the environment to scroll as you neared the edge like in my side scrolling environment, I messed around with a few ideas, such as moving the entire movie clip if the characters x and y position crossed a specific thresh hold near the edge of the screen, but the once the character was over this thresh hold, the screen would continue to move in this direction(as he is still over thresh hold), even if the character was now moving in the opposite direction. In the end I had to settle for moving the entire movie clip when the corresponding key is pressed, Although this works, it has two major issues . Firstly, because the entire movie clip is constantly changing position, this chews up quite a lot of processing power and seems to slow the file down quite heavily. Secondly, the environment moves at the same speed as the character, so most of the time he stays in the center, but if he hits an un walkable tile, and stops, and you are still pressing the walk key, the environment will continue to move, as its movement is dependant on the key press, not the characters movement, so it is possible, to get the character stuck behind a wall and move the screen until he is out of view.

I made a few new tiles to improve the appearance of the landscape, and made the array a lot bigger so there was at least something to explore.

I'm feeling a little less confident about this environment, with only one day to go there are still alot of issues I need to iron out and to be honest Ive got no idea how to fix them.

Project 2 Update

With my side scrolling map coming along nicely, I thought I should post some progress of my Isometric map.

0.1 (click for .swf)
I started off rendering out my characters walk cycle from an isometric view, I rendered out the sequence 4 times, one for each direction of movement (Left, Right, Up, Down) and then imported these files into flash and codded the keys for them.

0.2

I Rendered out an isometric ground plane, to be placed behind the character in flash. For some reason I had great difficultly getting this to work how I wanted (The map was static and the character moved, when the character nears the edge of the screen, the screen moves too. much like the system I used in my side scrolling version, simple enough right?) After speaking to Kah about this, we eventually got it to work relatively well. unfortunately this little glitch was a sign of things to come..

0.3

I modeled a more complex environment in 3ds max, I separated this into 3 layers - the ground plane, the edge of the environment, and the shapes and rendered and imported them into flash individually. My plan was to lay these out on the stage, and using the swapDepth command, bringing each element forward or back, depending on where the character was giving the appearance he was moving in front/behind the objects. However after messing around with the code for several hours and going through several online tutorials, I was getting no where, i Just couldn't get the swapDepth command to work properly. At this point I also realised I had no idea how I could get the hit test command to work either, because the blocks where angled, but the movie clips were square, if I used a simple hit test, empty parts of the movie clip that *should* be walkable, would instead block the character.Arrhh!! Everything was going wrong. My attempt the avoid using some tricky array by using pre-rendered movie clips was getting nowhere.

top layer - the blocks

Middle layer - The map edge

bottom layer - The ground plane

0.4
I decided to bite the bullet and throw away my previous idea and just draw the map through code using an array. I found some nice tutorials on isometric tile based games and used one of these as a base for my map. I am slowly getting my head around the code, and have got it working relatively well. Here is the basic environment so far, I am quite happy I managed to recreate most of the aesthetic I had previously achieved with my rendered images.

Project 2 Mega-Holiday-Update

I realised I hadn't updated the ol' blog in a while, So I thought I better post some updates. I felt it would be easier to show my development by breaking them up into separate 'versions' and explaining each individually, rather than just one big wall of text.

So Here goes..

0.1 (Click for .swf)

My first attempt at the code for the environment, When either the left or right arrow key is pressed, the background objects scroll and the ground animation plays, giving the illusion of movement.

0.2

I altered the code so now the environment only starts to move when the character nears the edge of the screen. I feel this is a much better result, as now it actually feels like you are moving the character around a space, rather than a scrolling background.

0.3

Added a 'midground' and foreground layer of objects, each layer moves at a different speed, to enhance the parallaxing effect.

0.4

Added a short background clip of some blocks flying around, its very jumpy because I only rendered out a few frames to test it out. Not really very happy with it to be honest, its quite 'busy' looking and distracts from the foreground, and I don't think the scale is quite right either.

0.5

Ditched the background idea after quite a lot of time messing around with particle systems and stuff in max, I liked the concept of lots a blocks whizzing around in the background, but I just couldn't get it to look good in the game, Might have another go at it later though.

I also felt objects in the environment looked quite flat and ruined the realism, My problem was, that if i rendered out the blocks from an angle to show their depth, and then motion tweened this image across the screen, when it got the the other side, and thus was being viewed from the opposite angle, It looked wrong and completely ruined the effect. Originally I wanted to render out each frame of motion for each block as it moved past, but after some quick experiments I realised this would require well over 1000 frames, and increase the file size of the final .swf exponentially.

So in the end I had to stick with my initial idea of just motion tweening a single image across the screen, but through clever use of rounded shapes (such as cylinders and cones) and angling the rectangular shapes carefully, I feel its quite hard to notice the perspective issues. So I'm happy with it.

I rendered out each shape three times from different lengths, rather than just resizing one image as i previously did as this also turned out perspectively incorrect.

0.6

I had another go at this background, this time using just a simple gradient, fairly happy with the outcome, might add some more detail later though. I also slowed down the speed at which the ground scrolled as it was a little too fast for the character, However this brought up a new problem, when the character stopped moving the jump between the current frame of the Moving ground clip, and the single frame of the static ground image became a lot more noticeable. I fixed this by re writing the code so instead of the ground having 3 separate movie clip states (Backwards, static, forwards) it just had one state (Forward), which played when the character nears the edge, and stops when he moves away, and plays in reverse when he nears the other edge. Simple and it works even better! there is now no jump at all. But.... the clip only seems to play through once in reverse. I couldn't find a proper 'play in reverse' command, i had to use 'Previous frame', which only works until it gets to frame 1. Will try and fix this later if i can work out how.

A few background gradient examples, Although I liked the darker ones better, they made a faint white outline appear around the character so i just when for a simple light gray one.

0.7

I was happy with how the environment was coming together visually, but wasn't really any fun to explore. You just pressed either left or right and that was it. So I added another small monkey character who leads you to a goal at one end - A treasure chest. When you reach the chest, a clip of it opening plays and the environment stops scrolling, signalling you have reached 'The end' of the map.

I still felt this was pretty linear and pointless, so i came up with the idea of having to duck some flying blocks along the way. I animated a duck sequence (Down key) and a 'getting hit and falling over then climbing back up' sequence, and tried to get some collision detection working, but didn't have any luck. Will keep at it though.

Phew. That does it for now. Ive also been working on my second file, an isometric map, will post some updates on that later.

Project 2 Update

Over the last couple of days Ive done a few tests at trying to create the aesthetic i am after for the environment, I will begin getting into the code once Ive got the look right. I started by simply taking my basic environment from my previous test and rendering out a wireframe version to get the 'Tron' look I was after. I felt this test was pretty unsuccessful as the end result looked quite messy and the character just didn't fit it, Also the environment was fairly static looking.



I went back to the drawing board and put together another basic wireframe environment, this time with a white background and more opaque to clean it up a little. I wanted to have a go at parallaxing so I animated and rendered a few frames of the ground plane, as well as static frames for each of the cubes. I imported these into flash and using the motion tween, animated the blocks at various speeds to give the illusion they are moving with the background. I felt this test was far more successful, However as the blocks are only a single frame each, they look very flat, I'm not really sure how I can fix this, but i will keep at it.



I also felt my blog was getting a bit messy and it was hard to follow my progress. So Ive started uploading my experiments to youtube, although the quality isn't great they are a bit easier to watch this way, I also uploading a few of my earlier tests and reposted them below.

Here's the previous experiment I did, just testing my character in between a background and foreground layer in flash.



And heres the final 3d walkcycle, compared to my original 2d version.

Project 3 Proposal update

I made a quick walk cycle example of how I want sketch boy to look. I rendered out a sequence from 3ds Max, and then drew over each frame in photoshop to create a nice sketchy rotoscoped look.

Sketch boy example

Project 3 Proposal

After spending the past two weeks working on project 2, and creating a rich 3d aesthetic, I wanted to go in a different direction for project 3. I really liked the simple black and white outline look of the game we looked at earlier, Flyguy.

Using Flyguy as a precedent, I came up with my own character 'Sketch boy' by rotoscoping an image of an artist mannequin. I wanted to create a really low-tech hand drawn kind of feel to the game, as though somebody is drawing it as you play.

As far as gameplay is concerned, I think scrolling would work best, but I could see it working in other forms, such as isometric or even top down. The player, controlling sketch boy has to complete various puzzles to make it through the game. The puzzles are in the form of completing the landscape through filling in gaps in the landscape by drawing. Sketch boy only has a limited amount of ink to for each level so the player has to use it sparingly or they Will be left stranded. There will be switch's scattered through out the map, that will toggle parts of the landscape on/off. Which need to be tripped to complete the map.

A mock up of the sketchy style I want to use.

Project 2 Update

I have just finished rigging and animating the 3D version of my characters walk cycle, I used images of the original 2D cycle as a guide for the animating, but adjusted a few things such as the shoulder movement to make it look a little more natural. I rendered the animation out as a sequence of TGA images and then loaded them into flash where I placed them on the time line, each as separate Key frames.

I also quickly put together a basic environment of simple cubes to test in flash, I separated this into two separate layers, the foreground cubes, and background cubes and floor, and rendered these out separately. I then loaded these into flash and exported out a quick test. I am fairly happy with the result, but there a few things I would like to improve, such as the faint outline around the character, and perhaps a shadow for the character.

Here's a link to the test .swf

I have also been giving quite a bit of thought as to what I want the environment to look like, I didn't really want to take a normal landscape such as a city or jungle and simply model it in 3D, as for one, I don't think my 3D skills are quite up to it, but more importantly i don't think it would be terribly interesting. So I decided to go for quite a cartoony/artificial look.I found this image while searching for inspiration and felt the wireframe style of the hand was prefect, its just the sort of artificial/computerish look I wanted. I found a few more examples that also use this style, and I think are very effective.

Coincidentally this image also depicts a 2d Character being transformed into 3d