Friday, 27 May 2016

Almost done with Mon Petit Croissant game!

You can take a look how it's going to look like here:

Friday, 13 May 2016

Platform Game Tutorial 04 - hero death

In this tutorial we are going to make our hero actor react to the obstacles and enemies. Basically, our hero will die the moment it hits these actors.

Watch this animation below:


You can see that the actor bounced upwards and shows a "dead" image and then falls downwards off screen. What you are seeing there is an actor called deadHero that has been spawned the moment the hero actor hits the spikes. The hero actor will be destroyed.


Alright to do this, create another actor called deadHero.
Add the image called
dead1.png into the actor.








Add this behaviour into it:

Accelerate:
Direction: 270
Acceleration: 200
Relative to: scene


 Add this rule into it:

If game.heroDead is false
 
    change attribute:
      self.Motion.LinearVelocity.X to 50
 
      self.Motion.LinearVelocity.Y to 200
 
      game.heroDead to true




If self.Position.Y < -50
 
    change attribute:
      game.lives to game.lives-1
 
      Spawn Actor: hero,
          position x=20, y=50
          relative to scene


    change attribute:
      game.heroDead to false

This rule means that after the deadHero falls off-screen it will spawn the hero actor back to its original position at x=20 and y=50 in the game. It will also reset the game.heroDead to FALSE, so that the heroImage actor can appear and attach back to the hero actor.


Next, go into the hero actor and add this Rule inside it:

When Any conditions are valid:
If actor collides with actor of type : spikes
If actor collides with actor of type : EnemyA 
 
      Spawn Actor: deadHero,
          position x=0, y=0
          relative to actor

     Destroy


Alright we're done! Let's preview our game.

Wait for the next tutorial coming up soon!

Thursday, 12 May 2016

Platform game tutorial 03 - Obstacles and Enemies

In this tutorial, we are going to create obstacles for the hero to avoid, and enemies the hero has to avoid or destroy.

Obstacle


1) Create an actor and let's name it spikes.



2) Add the image called spike1.png into the actor.

3) Change the horizontal wrap to Tile.




4) Click and drag the spikes actor onto the stage. Resize the spikes actor on stage to make it longer. You will notice that the spikes image will be repeated/tiled.




Enemies

Create another actor called EnemyA.
Add the image enemyA1.png into it.
Add 3 actor attributes:

startX      value: 0     (real)
endX       value: 0     (real)
speed      value: 50   (integer)





Add the animate behavior with these 4 images


Add these behaviours into it:

Accelerate:
Direction: 270
Acceleration: 200
Relative to: scene

change attribute:
self.Motion.LinearVelocity.X to self.speed

Collide
Bounce when colliding with actor : platform



Add these rules into it:

When Any conditions are valid:

     If self.Position.X > self.endX
     if self.Position.X < self.startX

   change attribute:
     self.Motion.LinearVelocity.X to  - self.Motion.LinearVelocity.X





If self.Motion.LinearVelocity.X > 0

   change attribute:
     self.Graphics.Flip Horizontally to true

otherwise/else

       change attribute:
       self.Graphics.Flip Horizontally to false


Now drag the EnemyA actor onto the stage.

Change the value of the actor’s instance attributes:

startX and endX to your desired position on the stage.




Make sure the value of startX is lesser than endX. This will make the enemy move from left to right continuously.


Preview your game!

We will continue on to the next tutorial where we will make the hero react to the obstacles and enemies.

Wednesday, 11 May 2016

Platform Game tutorial 02 - Animating the hero

If you have finished the first tutorial, great job!

Now let's move on to the 2nd part of the tutorial. It is a little bit challenging but if you follow these steps closely, you should be ok :)

let's start with....

Step 1:

In Tutorial 1 we have created 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

Now let's Create 9 more attributes!

    g) heroX   [real]
    h) heroY   [real]
    i) heroDead  [boolean]
    j) lives  [integer]    set this to 3
    k) heroShoot  [boolean]
    l) heroDirection   [integer]    set this to 1
    m) ringsCollect   [integer]
    n) doorUnlock   [boolean]
    o) key   [boolean]

So altogether you will have all these attributes shown below:


Step 2:

Let's track the X and Y position of the hero actor so that other actors know where the hero actor is on the screen. This is useful when you want to stick something onto the hero actor or you want the enemies to know where the hero is so that it can chase after the hero.

    a) Go into the hero actor
    b) add 4 behaviors:

         i)   [constrain Attribute] game.heroX to self.Position.X
         ii)  [constrain Attribute] game.heroY to self.Position.Y
         iii) [change Attribute]    self.Color.Alpha to 0
         iv) control camera



Step 3:

Right now our hero is just a simple white rectangle. Let's add the animations and images to the heroImage actor by adding rules to it. We won't be doing this to the hero actor because we want to make the heroImage actor "stick" to the hero actor.

Go into the heroImage actor (which you have already created in tutorial 1)

     i) Add the image walk2.png into the actor


     ii) Next add a RULE.

              when game.heroDead is false

                  [change attribute]       self.Color.Alpha    to   1
                  [constrain Attribute]   self.Position.X       to   game.heroX
                  [constrain Attribute]   self.Position.Y       to   game.heroY + 5


                  otherwise/else

                 [change attribute] self.Color.Alpha to 0

           You can refer to the screenshot below:



Step 4:

Now we will add the walking animation when the hero moves to the left.

In the heroImage actor,

i) Add another RULE.

              when game.buttonLeft     is   true
               when game.buttonRight  is   false

                  [change attribute]       self.Graphics.Flip Horizontally to   true
                  Animate (add the images walk1.png, walk2.png, walk3.png, walk4.png)

           You can refer to the screenshot below:


ii) Now we'll make the animation when the hero moves to the Right.
 
     Copy the RULE above, paste below it and just change:

               when game.buttonLeft    is  FALSE
               when game.buttonRight  is  TRUE
               [change attribute]       self.Graphics.Flip Horizontally to   FALSE

 see the screenshot below:




iii) Next, when both Left and Right button is pressed, stop the animation and show just One image.

        Copy the RULE above, paste below it and just change:

               when game.buttonLeft    is  TRUE
               when game.buttonRight  is  TRUE
               [change image]  set Image  to:  walk2

               otherwise/else

               [change attribute] self.Motion.Linear.Velocity.X to 0


 see the screenshot below:
 



iv) Next, when both Left and Right button is NOT pressed, stop the animation and show just One image.

        Copy the RULE above, paste below it and just change:

               when game.buttonLeft    is  FALSE
               when game.buttonRight  is  FALSE
               [change image]  set Image  to:  walk2
 
               otherwise/else

               [change attribute] self.Motion.Linear.Velocity.X to 0


 see the screenshot below:





Step 5:

Finally, we'll make the animation for the hero when it jumps.

Add another RULE.

              when game.maxJumpNum = 1

                  Animate (add the images jump1.png, jump2.png, jump3.png, jump4.png, jump5.png)





 Now preview your game!
Continue on to tutorial 3

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
         otherwise/else
          [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.Y to game.heroJumpHeight
            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.




Continue on to tutorial 2!



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!