Image Processing-Creating an Angry Birds

Today we learned how to the basics of photoshop and even how to draw an angry bird.
The first sets were laided out on http://www.onlinedesignteacher.com/, this website contains many helpful tips for beginners and the advanced editer.

Firstly we learned about the basic vertor tools such as the pen

With this we can add, remove and edit "anchor points".

Anchor points are manipulateable points draw on a canvas, they are the basis of vertor graphics.

After ths basic tutorial we dived right into creating our very own angry bird character.

List of vector tools

We start off with the main body of the angry bird. I slected the oval shape from the drop down list and draged out some of the anchor pionts to make it look more like an angry bird.

Stage 1 of the angery bird

We added a "stroke" effect to the oval. This creates a black out line on the oval of spesifyed measurement.

We then made the interior red.

The next step was to add six anchor points to the top of the oval.

Tutorial piece one

As you can see we then manipulate them into the desired shape using the free selection tool.

The tummy and eys come next

Stage 3 of angry birds

This was simple enough. All we had to do was create a circle witht the stoke effect and then duplicated the eye and place one a layer above the other, in this image the pupils haven't been added yet.
The tummy was just a searies of anchor points along the edge of the oval and below the position of the eyes.

The last two steps were adding the mouth and the eye brow.

Browe of angry bird 

The eye brow was simply six anchor points over lapping all other layers

The mouth is done in much the same way, by adding several anchor points and then manipulating them into the desired shape.

Beek of angry bird

This, or at least something like it is the desired out come.

Making a basic sniper game

First off we need to add our standard score borad which increse by 1 for every time you successfully hit a target.

Then we add a ammo variable which must be greater than zero in order for a hit to be registered.

Scratch code

Went the space key is pressed we've set it up so that the ammo count will replenish itself.

reload code

This is simply the shooting aspect of the game. A target for the player to aim and shoot at must be introduced. 

In this game a space ship was added as the target. Every time a successful hit was registered the ship would change its costume from

Spaceship sprite

To

Expolding spaceship sprite

This slight visual effect adds quite a bit to the game.

The ship is set to randomly deploy on the right of the screen and  then fly towards the other side of the screen where if it wasn't hit it will disappear and reappear in another random location on the right hand side

Scratch movement code

sensor is simpally another sprit which is put in place to be hit by the ship weather it was hit or not.

This is its code block.

Set loctaion code

The Random Exercise

Today we preformed an exercise in which we wrote down as many things as we possibly could in certain categories, a Person,  a Place, a Time, an Object and an Animal. Then our tutor asked each student for numbers and then applied those numbers to the relative thing thing in each list.

Through this exercise he demonstrated that most of the games we love and enjoy today are completely insane in their imagining.

Example game image

For instance take Mario, an Italian plumber who fights a giant turtle dragon who has kidnapped his girl friend who's a princess, think of how nuts that is.

We must now attempt to come up with some concepts for a 2D game using this handy method.

Advanced Health Bar and Login Counter

Advanced Health Bar
Today we learned how to create the illusion of a progressive health bar. This is done by linking health to sprites such as this.

Full health Sprite

As you can see the sprite looks some what like a health bar and is set to change to another spirte as the player takes damage. Such as this sprite.

2/3 health sprite

Each sprite costume is linked to the relative health level.

Health code in Scratch

This block of of commands dicktates that once the health variabale reaches a leave below 100 and above 89 it will change the costume to health 1, showen below.

2/3 health sprite

Login Counter

We learned how to add a cloud variable to our games. With the addition of these we are now able to able a login counter to our games. 

Counter code

These blocks alow a login counter and cloud login counter on the screen to increase by 1 when a player clicks it, and then it hides the option form the view of the player.

Then the logout option appears on the screen.

Logout sprite

When this option is clicked it decreases the login counters by 1, hides itself and makes the login opton reappear.

Coutner code

Creating a Score board

Today we learned how to create a functioning score board.
Quite a bit of thought had to be put into the coding of a score board.

Advanced scratch code

This string of code is a "simple" score board. It only records a max of ten scores.

Score Borad Scratch Code

This block is responsible for adding and replacing the top two high scores.
As you can see its takes quite a bit of code just for these two.

Scores add to a cloud variable list will be sorted even if there are no players in the game. However Scratch have removed this feature for the for see able future. There are simple cloud variable which can store only the top score for the individual players to view throughout the game.

Creating variables

Today we learned how to create variables such as timers and health. Its best to add this to the stage background to keep it constantly visible.
"Health" is just a variable set to a certain number, in this case it is called health and set to 100.

Scratch code

With the addition of the second block of commands, it will broadcast a message to the player once their health has droped to zero that they have lost.

Scratch code

This is an example of a health boosting varible. Once applyed to a sprite and the proper sequence is acheved it will increase the players health to a maxium of 100 and then disappear for a set amount of time.

Scratch code

This is my final example of a varible, a timer. Time is not concept in scratch commands. This is why a varible, time, must be created. To simulate a timer ticking down we first set the time varible to 200 in this case. Then we add a band that will continue the contained code forever. We then add code to change the time varible by -1 and to wait for 1 second intervils to repeat the prosess.

First attempt at move controls

After some practice on the tutorials I managed to write these commands for one of the sprites.

Scratch Code

When put together these commands allow the relative sprite to move left, right and to jump.
This is a basic move command set up but it can be manipulated and applied to a large variety of games and game types.

We also added a added a second sprite, which we called sprite 1 or "ground", which the first sprite had to be touching in order for the "jump" command to operate properly. This sprite required no code we simply added a few more options to the "jump" command which only make it operable when in contact with the ground sprite.

Scratch Code

Basic Scratch tutorial

Scratch has many handy tutorials which helped me get started with my very first project.

Scratch project page

Its not much to look at but its a start. Scratches tutorials included a step by step walk through of all basic actions, this helped me get to grips with the basic move and animation commands.

Spirt tutorial

 This is one of the tutorial cards available on Scratch in the help section.

Basic Scratch code

This basic sequence allows both characters to move and speak at scheduled intervals.  

Starting on Scratch

Scratch is an online program with a downloadable version available.
This is one of many interesting and fun games that I found on  http://scratch.mit.edu.
This website allows the users to take content posted and remix and improve upon it as they see fit.
http://scratch.mit.edu/users/shadowspear1/ is one of the many talented users that regularly use the website.

Editing Blog

First image uploaded to blog

During today's class I have learned the basics of editing and customizing my blog, I intend to expand on this in the future