Final Post

Thank you for following my blog on the processes of how I have created my game, the link to the game is below. I hope you enjoy!

http://www.stencyl.com/game/play/11708

Thanks, Zak.

Creating a Loading Bar

To create a loading screen was a very simple process, and I felt was a good way to finish my game and make it more unique for when I upload it to Stencylworks. On the Stencylworks application you click the section "Loading Screen" and then you get to design your own scene for a loading screen and what colour you want the loading bar, I have chosen the desert background and used a yellow loading bar. This loading screen will only appear when the game is viewed on the browser not on a flash player.

Loading page screen shot

Creating a Completed Scene and Behaviour

For the completed scene I used the background from the start game slide too. I then used the same process as the start screen for the buttons so I had an animation that flipped the image around when the mouse was scrolled over it, I included this into the game as an actor with no physical properties. To get the behaviour I duplicated the already existing "Start Game" behaviour and renamed the duplicated version "Restart Game" and then set this behaviour to the restart button actor I have created. I have included the images of the two characters on the completed page too, I felt this was a good touch as it helps the overall theme.

Restart button when scrolled over

Original image of restart button

Screen shot of the completion screen

Code to restart the game

Creating a Start Scene Behaviour / Actor

I have now sorted out all of the characters animations and sounds and sorted my scene design and behavours it was time to make a start on the start screen. I feel for the design I am going to use the desert background from the first scene as it looks good, and is my favourite background, I am also thinking of having an image of the main character jumping on the bad guy so you nkow exactly what to expect when you start the game. To create this image I would have to actually create two new characters, so I created a main character with one frame, and set the physics to non movable, I then had to repeat this for the bad guy and just put the crushed animation and set the physics to non movable. This allowed me to have an image of the main character crushing the bad character on the main screen.

To create the behaviour for starting the game I had to create an actor behaviour named "Start Game". Firstly I had to use the "Always" block and drag in the "if" block, within this section is a mouse click behaviour which sets the start screen to fade to scene one after 0.3 seconds. Secondly I had to use the "When Drawing" block to create the animation for the start button itself, and use the behaviour "If mouse is over self" "Switch Animation to 1 for 'Self' ". And then do the opposite behaviour below it which reads "IF not mouse is over 'Self' " "Switch animation 0 for 'self' ". This animation behaviour will make the start button swap images and look more of a clickable button.

The code for the behaviour

For this behaviour to work I then had to create a start button actor to use the behaviour. To do this I created a button on Photoshop and added it as a frame for a character as "Animation 0" and then I created the image I would want it swapped with and name a new frame as "Animation 1". When the "Start Game" behaviour has been added to this actor the button will fully work and switch the scene to the start of the game.

Original start button image

Replaced image when scrolled over

Behaviour for Changing Scene

After I created my scenes I needed to select a starter scene, as I have not made a start page yet I will selec scene 1 as the start scene. To switch the scene I had to create a new scene behaviour, I named this behaviour "Switch Scene". For this behaviour to work I had to code it correctly in the code section, firstly I used only the "Always" block for my behaviour, I then had to click on the flow section and create an "If" statement within the "Always" block. Secondly I clicked on the attributes tab and created three attributes; "Actor", "Scene" and "Region" and these are the attributes used within the behaviour. Next I had to use the scene - region tab to select which actor to use, if you look at the screen shot below you will see the "Actor is inside Region" statement after the "If". Thent he behaviour to actually switch scene needed to be used, this is also within the Scene button, the statement that I was using was "Fade out for _ secs, then switch to scene and fade in for _ secs. I set the timing as 0.3 seconds, a screenshot of the code below will probably help you understand.

Switch Scene Behaviour

Secondly this needed to be brought into a scene, when adding this to a scene I had to create a region that when the actor passes it switches scene. When this region is created you add the "Switch Scene" behaviour to the scene, and you will have to select the appropriate region, select the actor that passes the region and select the scene it switches too. I may mark the end of the levels with a level complete sign.

Creating a Scene

Now I have to create each individual scene for the game, I have decided on making four levels, a start screen and a game completed screen but for now I will only concentrate on making the four level scenes. For the first scene I have use dthe background for the desert that I have edited myself, I wanted to use this one first as it was my favourite background and helped set the scene as a cowboy theme. I used the existing tile set that I have created for the scenary, and finally inserted my characters. I did this for three more scenes after and theyn all had different background. You can see below a print screen of all four different scenes.

Scene 1

Scene 2

Scene 3

Scene 4

Making the Tiles for My Game

I decided that considering my game is based on a cowboy theme that I should try and make a tile set of my own that has a sort of cowboy or desert theme to it. I felt the easiest way around this was to edit an existing tile set as I liked the shape and design of them already, just as they were based on grass they did not suit in my levels. To edit them I opened up each individual section of the tile and clicked the button "edit frame" this opened you up to Stencylworks own imaging software "Pencyl", I then experimented around with a variety of yellows and different shades until I found a style that I was happy with. I then saved the codes for each individual colour and added them to the rest of the tiles to complete my desert theme.

Creating a sand effect on Pencyl

Opening up individual tiles ready to edit them

Adding Sounds

I have decided that my character needs sounds to make the game more interesting to the user. I feel the only sounds needed for my game would be the main character jumping, and crushing the enemies. To get the sounds I downloaded them off Stencylforge by searching the sound behaviours, then to add it to my characters I have to click on both individual behaviours (jump and crushable) an dadd the sounds.

Deciding on Extra Scene Behaviours

For a sidescroll game you'll have to have a way for the camera to follow the player so it does not disppear off the screen, to do this there is a simple behaviour available on Stencylforge called "Camera Follow Player". This is a simple behaviour and when downloaded you just click the button "Add to Scene" and choose a character for it to follow, for mine I have chosen the main character (Cowboy) and this also means that the player will never disappear off the screen.

Adding the Scene Backgrounds

To add the scene backgrounds I firstly had to edit them to be the size of the scenes within the game, to do this I used Photoshop. The size of the scenes within my game were 640 x 384 pixels. Once all of the scenes were added to the game file all I had to do was click "Attach to Scene" and then select the desired scene and it will now be the background. I did encounter a few issues as the background was often not showing in the game, but I found out after that the problem was only due to the fact that I had not clicked the background properties as "No Colour".

Editing a Scene Background to Fit the Game

Adding My Characters Into Stencylworks

When I created my game in Stencylwork I used the side scroll example as a template for my game. Firstly I had to add my own animatons for the characters. To do this I opened up the pre existing characters and changed the frames to my own, for example firstly I clicked on the character Mambo and changed the name to Cowboy as this was the main player. Secondly I had to open up each frame (walking left / right, jumping left / right and the stationary image) and click edit frame, this brought up an option to change each frame to own images so all I had to do was find the images within my files and replace them. This process then had to be repeated with the bad guy character, which in the example was called "Pronger" so firstly I changed the name to "Cactus" and changed all the animations required for it to be a proper character. After this I had to make sure both characters are in the proper character set, so the Cowboy character needs to be in players and the Cactus character needs to be in the enemy section, this allows the main character to 'Stomp' the bad guy (enemies). The good thing about the side scroll example is the fact that all the behaviours I needed to make succesful characters are included already.

Walking Right Animation (Cowboy)

Hurt Left Animation (Cactus)

Idle Right Animation (Cowboy)

Weekly Update Report 2

This week my primary focus has been creating the characters to be used within my game and the backgrounds to be used for my levels. I decided on a cowboy blob for my main character, who is purple and has some stereotypical western clothes like jeans, a bandanna and a cowboy hat. For the bad guy I have chosen a cactus as I felt having a plant as a bad guy would give the user a bit of a comedy feel to the game and obviously is highly appropriate to my chosen theme. My plan now for the next few weeks is to create the whole game itself, I need to include all of the character images in as frames to make them into an animation, and then give the character the appropriate behaviours. I also need to think of how many levels I will have, whether I will create my own tile set and whether to have start-up screens and completed screens.

Background for Game Scenes

For the backgrounds I wanted to have something that I had created and made the user feel familiar with the theme that I have selected. The first theme I edited on Photoshop, I took an original image off Google and changed the colours and added a few lines and yellow / orange colours to give it that desert feel, you can see the image labelled "Desert - Edited" below. The rest of the backgrounds were not images that I had created myself, the only thing that I edited on them was the size to fit into the scenes on Stencylworks. I have chosen the rest of the background images for a few reasons, I have chosen a saloon / wild western theme as it remains consistent to the existing theme. I have also chosen a pyramid background as although its definitely not anything to do with the wild west or cowboys, it relates to a desert so I felt it could be appropriate.

Desert - Edited

Pyramid Background

Saloon Background

Bad Guy - Cactus

For the bad guy on my game I have decided to use a cactus character, I felt this was a good design for a bad guy as a cactus is a good symbol for western films and games it will make the user recognise more what my intended theme is. I have given the character a hat just like I have with the main character, you can probably tell tat this is the bad guy as I have given it angry eyes, and a black hat, black is a colour usually associated with the villain. I have done three separate pictures for this character, the standing straight, stomped on left and stomped on right. For now I am not too sure if I want to make the bad guy attack the main character as I'm not too sure how I would get about that, so I may just use the character as an obstacle instead.

Crushed Left

Crushed Right

Standing

Main Character - Cowboy

 Today I have scanned in the drawings shown in one of the previous posts and drew over them using photoshop. To do this I used the line tool and bent it around to the same angle as the drawing so to keep the same shape. I then had to decide on colours, and as my character was just a blob with clothes I have decided to have the main colour as purple, with blue jeans like trousers, a red bandanna and a cowboy hat. I feel the bandanna and the cowboy hat fit well in the cowboy theme I am trying to create as it is very stereotypical of movies and games to incorporate these items of clothing. After I had finished editing the drawing on photoshop I had to save it as a .png file for a web application, as this makes sure there is no background behind the image.  Using Photoshop I have also created all the different movements of the character, as you can see below their ios a standing image, a standing right image, a walking right and a walking left image, I am going to use these walking images as the animation for when my character jumps as well.

Standing Left

Standing Right

Walking / Jumping right

Walking / Jumping Left

Weekly Update Report

This week I have been working out what type of game I want to make, and I have decided on a side scrolling game where the character jumps over obstacles and kills enemies, I have also made basic designs for my characters and backgrounds. My plan for the next seven days is to make the whole animations using photoshop by scanning in the drawing, entering it on photoshop and then drawing over it. I will then have to put the pictures into Stencylworks and create the animations so they work in the game.

Original Designs for Characters and Background

As I was originally thinking of a cowboy theme I drew a few potential characters and backgrounds onto a sheet of paper. Right now I am stuck between having a character which is based on a real life person, or an animation that is sort of like a blob, maybe the second one will be more appropriate as it is only a Flash game. Once I have decided what to do I think I shall use Photoshop and scan in the drawing itself to draw around. I have also designed my enemy character as well, I have decided to sue a cactus as a character but give it a human feel to it by giving him evil eyes and a hat which will be in reference to the cowboy.

Original Character and Enemy Designs

Level Design and Further Designs

Activity Diagram to Explain Processes

The two pictures below are activity diagrams showing the usability of my game and how the level process and the actor processes will work. The diagram below shows that the character walking will then have to jump over an obstacle (A hole or an enemy) and then it shows what happens when you fall down the hole. If you do you shall restart the level and continue walking, if you do not die you will carry on the level untl the finish point and start the next level.

The picture on the right shows the player processes and what will happen to them, as with before they will start the level running or moving, and will then come up against an obstacle, if they were to come up with a gap they will jump over it, or if it were an enemy they would jump onto the enemy and kill them. If neither obstacle appears the player continues walking. When the player has jumped over all of the gaps and all of the enemies they will then proceed onto the next level and start the process again.

 

<>

Level Process Diagram.



Player Process



Game Proposal / Short Overview

Game Concept

I will be creating a sidescroll game using the software Stencylworks, my original plan for the game is to have a character that I have created jumping over scenary and having to get to a certain point of the game. I may also include an enemy for the main character and will try to keep the theme consistent. Thwe game will be influenced by Mario style side scrolling platform games.

Design

My original plan is to have a cowboy themed game, maybe try to make the main character look 'Indiana Jones' like, so it looks like an adventurer. Then for the enemy I am thinking maybe doing a person that looks like a villain, or possibly something different like a cactus or blob. I am thinking for the background I could possibly have a desert, or something which is in reference to cowboys.

Implementation

I will be using Stencylworks to complete this game, you use tiles and enter your own animations to create the characters. There is a coding element too so if needed I will be creating my own behaviours for the characters. After you have created the game you can either upload it to the stencylworks website, or run i toff a Flash player.