Tuesday, 22 March 2016

Platform Game Tutorial 01

Let's create a simple platform game!

The final project will look a bit like this.

But we all have to start at the beginning so follow these steps and you're on your way to create your very own platform game!

First download the graphics pack here and unzip the file into your local drive. Import all the images into your gamesalad project.

1) Create a new Gamesalad project and call it platformGame. Set the game screen size to iPhone 6 plus Landscape orientation. Reminder: Save your work often.

2) Create 4 actors:
    a) hero
    b) heroImage
    c) platform
    d) controller

3) Create 6 attributes:
    a) buttonLeft [boolean]
    b) buttonRight [boolean]
    c) buttonJump [boolean]
    d) maxJumpCount [Integer]
    e) heroSpeed [Integer] set this to 200
    f) heroJumpHeight [Integer] set this to 250

4) Click on the "controls" actor and add a RULE.

    a) when Key "left" is down
           [change attribute] game.buttonLeft [to] true
          [change attribute] game.buttonLeft [to] false

    b) change the heading/title of this rule to : Left Key

    c) copy this RULE and paste below it.

    d) Change the heading/title of this new RULE to Right Key

    e) Change the attributes from game.buttonLeft to game.buttonRight

    f) Repeat step (c to e) to create the jump RULE using the Spacebar Key and then set the game.buttonJump

    g) Add a change attribute below the 3 RULES and set the self.Color.Alpha to 0. Set the "control" actor color to any color other than white.

5) Next go into the hero actor.

    a) Set the width to 24 and height to 50. (do not unlock the prototype)

    b) Set the physics values:
         1) Density: 1
         2) Friction: 0
         3) Bounciness: 0.2 (Let's have a little bounciness to the character)
         4) Fixed rotation: true
         5) Movable: true

    a) Add an Accelerate behavior  in the actor. (reminder: make sure this is in prototype and not unlocked!) Direction is 270 (downwards) Acceleration to 450. (Note: this is to add "gravity" to the hero)

    b) Add a RULE:
        if game.buttonLeft is true
        if game.buttonRight is false
            Constrain Attribute: self.motion.Linear Velocity.X to -game.heroSpeed

    c) Copy this rule and paste below it. Change the conditions to:
        if game.buttonLeft is false
        if game.buttonRight is true
            Constrain Attribute: self.motion.Linear Velocity.X to game.heroSpeed

    d) Copy this rule and paste below it. Change the conditions to:
        if game.buttonLeft is false
        if game.buttonRight is false
            Constrain Attribute: self.motion.Linear Velocity.X to 0

    e) Copy this rule and paste below it. Change the conditions to:
        if game.buttonLeft is true
        if game.buttonRight is true
            Constrain Attribute: self.motion.Linear Velocity.X to 0

    f) Copy this rule and paste below it. Change the conditions to:
        if game.buttonJump is true
            Constrain Attribute: self.motion.Linear Velocity.X to 0
            Change Attribute: game.buttonJump to false

6) Now we'll make changes to the "platform" actor.
     a) Set the size to 37 both width & height.
     b) Set the Horizontal Wrap to Tile
     c) Add the image "ground1.png" into the actor. This image has the size of 37 for both width and height
     d) Change the following Physics values:
           1) Density: 999,999
           2) Friction: 0
           3) Bounciness: 0
           4) Fixed Rotation: True
           5) Movable: False
       e) Add a Collide behavior to collide with the "hero" actor.

7) Let's go back to the scene and add the "platform" actor onto the stage. Put one at the bottom so that it will be the ground. Stretch the actor lengthwise so that it covers the entire width of the stage. The image of the platform should be repeated/tiled. Next add a few shorter sized platforms above the ground.

8) Alright! We'll now add the "controls" actor and the hero actor into the scene. Preview the game.
So this ends the first part of the tutorial.

Friday, 26 February 2016

Simple maze Runner Game

images catcher

make an ESP game using gamesalad part 2

Ok let's continue from the first part of the ESP game blog post.

We'll be creating a new actor. Let's call it "selectCard".

Let's change it's width to 37 and height 64. (note that this is actually half the size of the main card we first created).

Next create an INTEGER attribute inside this actor. Name this attribute as "ID".

We will use this attribute "ID" to identify which cards are on display. You'll understand after we add some rules inside this actor. Let's actor these rules to change the actor's image based on it's "ID".

These are similar rules we had first created in the "ZenerCard" actor in the first part of the tutorial blog post.
These rules will check for the "ID" value and then display the image.

If "self.ID" = 1
   Change image to "circle"

If "self.ID" = 2
   Change image to "cross"

If "self.ID" = 3
   Change image to "square"

If "self.ID" = 4
   Change image to "star"

If "self.ID" = 5
   Change image to "wave"

Alright! Now that we have done the change images rule we need to add a game attribute. We need to do this so that the game knows which card the player has selected.

Go back out of this actor and then click on the GAME tab and then click on the + sign at the bottom of the tab window. Let's call this new INTEGER attribute "selectedCardNum".

Once you got this, double click on the "selectCard" actor again and add a TOUCH rule.

Inside the TOUCH rule add the CHANGE ATTRIBUTE behavior and select game>>selectCardNum. Then on the next field click on the "e" sign button to open the "expression editor" where you will select the actor "selectCard" >> "ID".

Great job!

Next what happens when the player selects the card? Let's make the card pop up!

Add a new rule. Select ATTRIBUTE from the drop down menu. Select "game>>selectCardNum".

In the next empty field, click on the "e" sign button and then select "selectCard>>ID".

Next add 2 CHANGE ATTRIBUTE behavior in it. This time, we will change the size of the selected card to make it 30% bigger.

Choose selectCard>>Size>> Width. Then on the next field click on the "e" sign button to open the "expression editor" where you will key in: 37*1.3 (37 is the original width of the actor and 1.3 means 130%)
Do the same with selectCard>>Size>> Height but this time key in 64*1.3 into the expression editor.

Next we need to make the actor return to its normal size (37 width and 64 height when the player doesn't touch/press it. So In the same rule, at the bottom of it open the "otherwise/else" section and add a CHANGE ATTRIBUTE behavior to change the width and height back to its original setting.

Wonderful! We are now ready to add the cards into the scene! 
Go back to the scene and now from the Actor library, add one "selectCard" actor into the scene. Place it below the main Zener card.

Next double click on that actor that is on the scene. We're going to change its "ID" value to 1. This will be the "circle" card and it is our first card.

Add another 4 cards and do the same to change their ID values to 2,3,4,5 respectively.

Let's preview our game!

Now that we have all 5 cards for the player to select, we need to make the game check to see if the player has selected the same card as the computer!

So the logic is this:

If game.selectedCardNum = ZenerCard.count
   displayText >> You win!
   game.score += 1

If game.selectedCardNum != ZenerCard.count
   displayText >> You lose!

I will explain more on this in my next blog post. But you can try this out on your own right now!

Tuesday, 23 February 2016

New ideas for graphics in the upcoming game

Ever since I've got into painting on my iPad, my sketching skills have moved up a little.
I think this will help in improving the graphics in the upcoming game "Mon Petit Croissant".
I love watercolor and I'm hoping to add that style into this game.

Here are a few of my works on instagram as well as on youtube:

A photo posted by Afzainizam Zahari (@afzainizamzahari) on

Thursday, 18 February 2016

There's something about painting that's almost...

Therapeutic. That's what digital watercolor painting is doing to me these few days.
Plus it's also very exciting to be doing something totally new and out of my comfort zone.
Here are some of my amateur watercolor paintings done by following other artists in a step by step tutorial on youtube.

A photo posted by Afzainizam Zahari (@afzainizamzahari) on

A photo posted by Afzainizam Zahari (@afzainizamzahari) on
A photo posted by Afzainizam Zahari (@afzainizamzahari) on

Tuesday, 16 February 2016

Watercolor without the mess

As much as I love to use Procreate app on my iPad, there isn't a good watercolor brush tool in it.

It has been such a long time since I have done any water color painting. The last time I did any was when I was 14 years old.

So today I watched a video by Ekaterina Smirnova where she demonstrated a step by step way to do a simple water color painting.

For this I downloaded Sketches+ by Tayasui. This app has really good water color brush and effect.

So I followed Ekaterina's demo and this is the result! My love for water color painting has been rekindled!

Monday, 15 February 2016

I'm starting to enjoy painting on an iPad!

After I played around with the free iPad app from Adobe called sketch, I was hooked.
I wanted more features on this thing. I want to have the ability to have layers and also export to a layered PSD file. Sketch doesn't do that. Also, I don't want to use Adobe CC and I don't want to send my PSD files to an Adobe CC account.
So I went looking and after trying out several other iPad apps I found an app called Procreate that does what I want and a whole lot more. I bought the app after reading the list of features that it can do. I loved it. It really is an amazing software.

I'm not a very good sketch artist nor am I any good at painting. But here's a look at a successful attempt at painting! 

This was possible after watching several other artists painting their masterpieces on youtube. It was a great learning experience!

Here's a list of the things I used to make this possible.

iPad Air 2
Procreate app
A relatively inexpensive Monteverde stylus/pen (12 SGD)
Several youtube videos of time-lapse digital painting