Flash Platformer (Halloween Game Pt.2)

This week we continued working on the Halloween Game that I posted about last week. We’d focus on adding interactivity to the scene and clipping.

flash_stick

Chris provided us with a template of a pre-made game which contained the code to move a player left, right, jump and to clip with anything within the movie object ‘ground’. Before adding our halloween assets into this scene and building over the top of it there was one issue. The controls had been deliberately reversed so we could investigate and fix them.

stage.addEventListener(KeyboardEvent.KEY_DOWN, downKey);
stage.addEventListener(KeyboardEvent.KEY_UP, upKey);
function downKey(e: KeyboardEvent): void {

if (e.keyCode == Keyboard.LEFT) {
 isLeft = true;
 }

if (e.keyCode == Keyboard.RIGHT) {
 isRight = true;
 }

if (e.keyCode == Keyboard.UP) {
 isUp = true;
 }

}

function upKey(e: KeyboardEvent): void {

if (e.keyCode == Keyboard.LEFT) {
 isLeft = false;
 }

if (e.keyCode == Keyboard.RIGHT) {
 isRight = false;
 }

if (e.keyCode == Keyboard.UP) {
 isUp = false;
 }

}

Above is the correct code, but before edits the line

Keyboard.LEFT) {
 isLeft = true;
 }

Was set to Keyboard.LEFT) {isRight = true;} and Keyboard.RIGHT was set to left. We had to make the same edit to upKey otherwise once a directional key was pressed the player would continue to move in that direction without continued input from the player.

halloween_platformer
Reapers just out, doing his job!

Once controls were fixed I set about bringing all the assets in from the Halloween scene layer by layer, replicating all the same positioning. I added a few new things for effect such as some low lying fog which helped to highlight inbetween layers (movie clip, tinted, transformed and then blurred out massively) and blurred some of the further back layers to attempt to make them look out of focus.

Originally the lowest ground layer in the scene (the black one) was the only bit of scene that was clippable with the code, eventually I added the roofs of both foreground buildings and the gravestones to help get up to the roof. I didn’t want to add too much more than that as I’m unsure what other features we may cover in the coming weeks.

Lastly I changed the player character from the stick man to this little guy by drawing him up in Illustrator/Photoshop and then throwing him into the existing movie clip. I had to play with the pivot a little bit as he was clipping through the ground.

grimreap
Isn’t he cute.

Having a bit of free time towards the end of the lesson I cleaned up the smoothness of the tween animations on the moon/clouds using some easing.

easing

If you click on the pencil while on an animation timeline you can ease the animations in and out by editing the curve of the tween. This helped to make the beginning and end of the animation feel less jerky.

easingtween

Here is a link to the current work in progress.

http://www.fastswf.com/g4DzMtE

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s