Creating an Angry Bird

Using the instructions on onlinedesignteacher.com, I managed to create my own Angry Bird and, although it doesn't look as good as the one on the website, it looks good, for my first attempt. In this project I learned how to use some more advanced layer techniques, such as stroke, creating and moving anchor points and I managed to improve my skills with the pen tool. Here are some screens:

Stage 1

Stage 2

Stage 3

Again, It is not perfect, but it was a good start I think, and a great way to consolidate my knowledge, specially with the pen and anchor points tools.

7 Styles of game graphics

2D and 3D games can have various different types of graphics but they all can be put into 7 basic types:

Clear Vision

• Ultra Basic: Games that don't try to have realistic or complex graphics, but rather something simple, minimalistic that fits with the gameplay.
  
  
  
  Example: Clear Vision http://www.freewebarcade.com/game/clear-vision-2/
• Hand Drawn: These were based on sketches made by an artist with pencil/pen and paper and then put into the game. Example Agent B10 http://www.freewebarcade.com/game/agent-b10/

Mark of the Ninja

Angry Birds

• Cartoon: As the name says something that resembles a cartoon with simple traces. Example:                      GunBlood http://www.freewebarcade.com/game/gunblood/

• Geometric: Similar to basic, but with more shapes.

Pacman 

Example: Pacman http://www.freepacman.org/

Touch my Katamary

• Quirky: This is a difficult one to describe, It can contain real elements but used in an almost surreal way

Example: Touch My Katamary

• Anime: Similar to cartoon, but with more traces and complexity.

Example: Persona 4

Witcher 3

• Photo Realistic: As the name says, it tries to model the characters and environment in the most realistic way possible.
  
  
  
  
  
  
  Example: The Witcher 3

Cropping, Image saturation and mixing images.

Photoshop is a great tool to create new landscapes using your creativity and preset images. In the example below I created a post-apocalyptic environment using these pictures and some cropping tools (magic wand, quick selection, and the magic and polygonal lasso).

Derelict house

Lightning

Destroyed car

Sky

Rubble

After adjusting their positions and their size, I played with the Image Hue and Saturation to create a darker, moodier tonality to the picture. The final result was this:

Images together

The randomness generator

A great way to create original themes is using 5 subjects and random things! Basically what you have to do is write down a few things with no correlation to one another and them pick them randomly and try to make up something to relate them, look at the example:

Person: Mom, Dad, God, Bruce Willis, Teacher
Place: Europe, Krypton, Gotham, India, New York
Time: 12:34, 1998, Iron Age, 8 BC, 3647
Object: Power Sword, Rock, Socks, Hair Brush, Watch
Animal: Dog, Wolf, Shark, Minotaur, Fly

We can create a game that involves Bruce Willis traveling in India when he spots a Hair Brush made in 8 BC that gives him magic hair growth. But in order to get it he has to swim in the Ganges River and defeat a giant Shark. When you say it like that it sounds stupid, but think about other great games created in the past: Mario; an Italian plumber who has to go to a castle to rescue a princess from a giant dinosaur.

Mario vs Bowser

And there are many more in the list. You can add and remove as many items as you want from the list, it doesn't matter! Anything can happen i the world of games, so use your imagination!

The Attack of The Dragon Gryzko

Today I combined all the knowledge I gathered over the past few days and put it all together in one game: The Attack of the Dragon Gryzko. A game where you have to hunt down a mighty dragon attacking your castle by using your magical power.

Game setup code

Above is the initial setup of the game. Resetting score to 0, Time 30 seconds, Amount of ammo you have and Health. I also created the timer in this code, so the variable timer will decrease every time one second passes. To the right is the code that defines when the game is finished and, at the left bottom is the high score table.

Since I wanted Gryzko to attack me and increase the difficulty of the game, I had to give him a flame strike that deals 10 damage to me. And also I had to set up how I would score whenever I hit the mighty dragon.

Attack damage1

Random attack

For the Health, I used the same script posted previously in my blog. Next, I created a code to control how to reload and decrease ammo after every shot, that is described in the picture below.

Reducing ammo

And finally I created the code to decrease the amount of lightning bolts you have before reloading. Also I added a different time for each sprite to appear, creating a nice little animation.

Reloading

You can find the game below:

Variables: Health, Timer and other uses

Variables are parameters you create that can represent various attributes such as time, health, number of users and basically anything you want. You can find the variable creation menu on the Data section of Scratch and to create one all you need is to click the button "Make a Variable". In the example below we created the variable "Health" to represent the total life our character will have in the game. All the commands related to variables are present in the menu as well.

Creating Variables

Note: when creating this variable we set it for all sprites so we can specify how will the enemy will interact with the character and set how much life he will lose or gain.

Then we create a sprite with various costumes to represent our health bar. Notice on the left that each costume shows a small decrease in the amount of green and the same increase in red, representing life loss or gain.

Drawing the health bar

Next we need to write the script of how will the health variable will work.

Changing health bar costumes

Now deciphering the code; when the game starts we want the health to be set to 100, so the costume will be the full health costume. If the character is damaged by an enemy we need to change the costume according to how much health the character will have after being damaged and, since we made 10 different costumes for the health bar, we divided the current health of the character in multiples of 10, setting the costumes accordingly. This creates the effect that the health is decreasing as the character suffers damage.

But in order to damage our hero we need to create enemies and program them to do so. We chose two sprites that have 2 or more costumes to create an element of randomness as to when will the enemy attack, i.e. only one of the costumes will damage the character when in touch with it, the other will be the moment our here can escape.The first line of code tells the sprite to point towards our hero, basically just so the enemy can deal a frontal attack, instead of attacking with their backs turned to the character. The next line tells the sprite to change their costume after a random time, in our case, 1 or 2 seconds, but you may set it as you see fit. In the last line we set that when the the sprite is in the second costume and touching the character it will decrease the variable health by 10, meaning it caused damage to the hero. 

Changing enemy costume

And finally we need to give our hero a chance to survive, so we create a pickup that will restore health when touching the character. But we don't want it to restore health forever, so we add the "Hide, Wait 3 Seconds and Show" commands so the pickup will disappear for a few seconds before being reset. The "Set Size" command simply diminishes the size of the pickup to fit the screen in a better way.

Reducing health

Below is the game:

Basic movement and jumping

Movement

The image below shows a basic code of movement to the right:

Code for Movement

Now on to reading and explaining the code. The first tile denotes when will the code start running, in our case, after the green flag is clicked to start the game. If... Then creates a condition for the following commands to happen. Our condition is ''Right Arrow key pressed'' meaning that the right arrow key in the keyboard will be the on responsible for starting the movement to the right sequence. Point in N Direction rotates our sprite so it is moving to the correct way. The 90 degrees indicated is in relation with the Y in a 2 dimensional axis. Move N Steps tells the sprite how much it is going to move in the X axis. Wait N secs tells the code to wait any number of seconds before executing the next line of code, which is Next Costume. This scrolls through the different costumes of the sprite. These costumes are basically our sprite in a different pose so it creates a nice and smooth movement animation. And finally Forever tells the game to repeat this process for the duration of the whole game. 

Notes:

• The angle of direction chosen will dictate which direction your character will move
• Setting a ''wait time'' before changing costume creates a more fluid movement. Experiment with various numbers to find a fitting time
• Changing the costume is very important, it changes the shape your sprite is going to take after you press the preset key to move

The process to make the character move left is the same, the only difference being the direction it will be pointing, -90.

Movement to the left

Jumping

The coding for jumping utilizes the same tools as the movement with a new condition, our character sprite has to be touching the ground to enable the jump. The Ground is a sprite created as a simple black ground to simulate a real environment . Again we set a key to execute this action, the Up Arrow key. The Switch Costume to command has been added only for the cosmetic purpose of using a costume where the sprite seems like he is jumping, or in the air. The "real jump" happens on Change Y by N, this moves the character to the position 150 on the Y axis, putting him in the air. After that happens, we need to set a "rule for gravity" so our character comes back to the ground. That is where Change by N comes in and slowly resets our character back in the Y axis. Again we add a Forever command so it is present for the whole game

Jump block

You can play this project here:

First animation on Scratch and the Scratch Cards.

Using a very detailed step-by-step tool, I managed to create this little animation very easily:

Scratch has a Help session with 12 different cards that teach you how to do certain animations with your sprite(s):

Sample Scratch Card

With the cards I learned how to add move to the sprites either using the arrow keys or the mouse. Below is a command that makes your sprite move slowly towards the mouse direction. Note that the ''set rotation style'' allows the sprite to move around without turning upside down. This is useful not only in this instance but in many others where you have to deal with the character movement.

Rotation code

My account on Scratch

Today I created my Scratch account. Scratch is a free online tool to design 2D games.

My Account

I played a few cool games such as:

• Chakra: A game where you play a ninja trying to deflect projectiles with your Shuriken. The game also features various power-ups to help you in your objective. The movement of the ninja is also very neat.

Post title

Post content