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

Wednesday, 3 February 2016

Do you have ESP? Let's make an app for that!

I came to learn about extra sensory perception (ESP) when I first watched Ghostbusters movie back in the 1980s. There was a funny scene where the Zener cards were being used on 2 students. Watch the film clip here:

The students were supposed to guess the symbol that was shown on the card. There are 5 symbols altogether.

It can be a fun guessing game and I think it will be simple to make using a game making software like gamesalad.

To get started right-click and download these 6 individual images below:

Next start up Gamesalad and create a new project and call it ESP.

Import the 5 images you have downloaded into Gamesalad's media library. You can click on the "+" sign and look for the images in your computer.

Next create an actor by clicking on the "+" sign at the bottom left corner and rename "actor1" to ZenerCard.

Double click on the actor ZenerCard and change it's size attributes to  width 79 and height 124. This is the size of the 5 images you have just downloaded previously.

Next add an attribute of an "integer" type. You can do this by clicking on the "+" sign on the bottom left corner.

Rename that integer attribute "count".

Next we'll give instructions to the computer by creating a "Rule". Click on "Create Rule" on the top right corner.

Then select "touch" from the drop-down menu.

Next create another Rule, select "attribute" from the drop-down menu.

Click on the empty field next to it and select "ZenerCard" and then double-click on "count".

Next on the Behavior library, select and drag the "Change Attribute" behavior into the second rule you created.

Now click on the first empty field and select "ZenerCard" and then double-click on "count".

After that click on the "e" button next to the second empty field. We will add a math function called random.

Change the random(min,max) to random (1,5).

Next open the "otherwise" (else) section found at the bottom of this Rule and then add another "change Attribute" behavior into that Rule that will change self.count to 0.

Now drag this Rule into the first Rule we created (the one with the touch is pressed)

Great! The touch system of the card is now in place, all we have to do now is to make the actor change its picture whenever it picks a number from 1 to 5.

Make another Rule, select Attribute again and select ZenerCard >> count. Change the value of the next field to = 1
Next drag the behavior called "change image" into the Rule. Select the circle image.

Make another 4 more rules for the rest of the images. Make sure you change the self.count to their respective numbers. For example circle is self.count=1, cross is self.count=2, etc.

Finally make another similar Rule for when self.count = 0

Make sure you remember to save your project.

If you haven't dragged the ZenerCard actor onto the stage, let's do it now.
Click on the back button or the "scene" button found on the top left corner.

Watch this animated GIF to see the game in action!

This simple game has got no scoring system.

You simply touch the card to reveal a random card. The game doesn't keep scores nor does it ask you which card you picked.

So lets make the game ask you to pick a card!

(continue on to the next blog post!)

Monday, 1 February 2016

I finally made good use of my iPad

I rarely use my iPad except for the occasional testing of my games and also to read articles on Flipboard. The iPad to me seems like a great surface to draw something on but I never got around to use it as such. I've tried several drawing apps like autodesk's sketchbook and Fifty Three's Paper.

I thought they were good. But I quickly lost interest in them and I never returned to sketching on my iPad. Until now.

I decided to try using Adobe's Sketch and Illustrator Draw.

I was pleasantly surprised that the tools and navigation system within the app is minimal and very intuitive. The in-app tutorials were short and simple but yet enabled me to understand very quickly what the tools do. But the best thing about the app is that I could transfer to Adobe CC programs on my mac if I wanted to or just export a JPG file of it and send it to my mac and begin working right where I left off.

For my first try, I thought about detailing an artwork done by Lim HangKwong. So I imported a high resolution image of the bakery building into the app on my iPad.

I then began adding details to it using an inexpensive Monteverde touch screen stylus pen. I haven't had so much fun sketching in a very long time.

Adobe Sketch is a very good app to use. I highly recommend it. I'll post up a review of the Adobe Illustrator Draw in the next blog post.