Friday, June 27, 2014

Freaking Math! (Game Review)

Here's a fast-paced game from Hungary that will force you to wake up!

This is one of the simplest games I've seen in the Marketplace, but it is very satisfying and forces you to react quickly. The premise of the game is explained when you start:

You are shown a simple math expression and you must decide is the answer right or wrong.

Well, is 1 + 1 = 3 or not? If you think about it, of course it is wrong. But can you react in one-and-a-half seconds to click on the X button?

Maybe, and maybe not. I seem to remember that the human reaction time in general is 2.2 seconds, but if you are hyper-alert, you can do it faster. But how long ago did you learn your math tables?

If you get the right answer, you must instantly do another one, and another, until you wait too long. Each time you fail, you'll get a score.

You can see that my high score is two right answers but my last score was only one! But keep at it. With a little practice, I did get better.

The game creator is Adam Balogh of Hungary and he has a newer version of the game that does division and multiplication. Unfortunately I can't buy it!

I'm fresh out of forints anyway.

But this is a fun little game

Cost: Free
Genre: Puzzle
Score: 4 (out of 5)
Tested on: ZTE Open C
Get it at: Firefox Marketplace
Developer:  Adam Balogh

Announcement One - Thomas Palef has written a book!

Thomas Palef has been amazing us all by writing one game a week. You can read about it at  Part of his secret (aside from being just brilliant) is that he uses an HTML5 library called Phaser. You can read all about Phaser at  But Phaser is a little hard to grasp how the pieces fit together, even though it seems like it will help you write HTML5 games more efficiently.

Well, up steps Thomas Palef, who will shortly be publishing not only a book, but will include complete games with the source code. You can read about it at but he sent out an email to his subscribers with more data.

"The book will focus on building a full featured game from scratch that works on desktop and mobile devices. You will control a little guy in a blue world, trying to collect coins while avoiding enemies.

"Here are some of the things we will cover while building the game step by step: sprites, labels, groups, states, animations, particles, arcade physics, local storage, tilemaps, game scaling, touch inputs, and more.

"With all this new knowledge you will be able to create your own 2D games in HTML5.

"What You Will Get

"I created 3 types of content to help you learn the Phaser framework:

"- The book. The step-by-step guide to Phaser. It's 125 page-long, DRM-free, and available in 3 formats: pdf, epub, mobi.
"- Code. Some resources to help you build your own games faster: the source code of every chapters of the book, a Phaser cheat sheet, an empty game template, and other things. 
"- Games. I built 3 full featured games with comments that you can learn from: a space shooter, a match-3, and an infinite runner."
I'm definitely buying this even if I have to go without lunch for a few weeks!

Andrzej Mazur (Enclave Games) has written several games in Phaser that run well in Firefox OS, so I think that Phaser might be very useful to Firefox OS folk. I'll investigate it when I get back.

Announcement Two - I'm Going on Vacation

Yes, I know I'm on a permanent vacation, but I'm taking time off from this blog to travel around the country and visit some old friends, and I won't be online, and even when I am, I won't be typing!. So I won't be blogging most of the summer. But I'll be back and I'm sure there will be fabulous things to write about. I have a big list of topics, but they will have to wait. 

So come back in September and until then, stay tuned, but not iTuned!

Monday, June 23, 2014

News Flash! Firefox Has In-Browser IDE (Game Programming)

By an interesting coincidence, I've been helping a friend set up the Android Development environment and it is a pain! But not FirefoxOS! It is really easy to develop for FirefoxOS ... but it just got a lot easier!

I've suffered through all kinds of hideous development environments, and most of them are a pain because they 're designed for developers who supposedly are willing to take any kind of abuse. "Are you a masochist? (pause) Well, good, then you'll be right at home with Windows, Android, Apple, and so on."

Firefox OS was great because you only had to edit file in your text editor and then upload them to the browser (with a few plugins). Well, today is history. The latest Nightly build came out and it has an "Integrated Development Environment." What that means is that once you have Nightly, you're done! No more plugins, no more text editor. I'll miss you, Notepad++!

So, here's what you are really, really going to want to do and never look back.

Install Nightly

You already are doing this, right? Just install Nightly and have it update itself every night. Get it at You know you want to!

Enable the New App Manager

Once you have the latest Nightly installed, type this in the search window:


No spaces before or after the colon. You'll get a warning.

Ignore it. You're living on the cutting edge, right? Maybe some of the settings could break your windows, but this just will allow the new IDE to come to life.

Once you promise to be careful, you'll see a giant list of settings that you can change. Scroll down until you see

Yes, I know that webide sounds like something spiders clean their houses with, but it really is WebIDE (Web Integrated Development Environment). Right click on


and when a little menu comes up, select true. Nothing happens right away, but the magic is about to happen.

Now go to your menu and select Developer and then App Manager. Yes, this is still called App Manager but the name may change to WebIDE.

And the App Manager has changed ... a lot!

Meet the New App Manager, Not the Same as the old App Manager

Here it is:

It looks simple but it is a lot more powerful than before.

The first thing I did was to open one of my packaged apps. How? Maybe it's the little button on the left that invites me to Open App? Yes!

I have choices and I'm choosing Open Packaged App. I navigate to my app and load it. Without any delay at all, my app is loaded and you can see it. I'm using the simulator here but the same is true with an actual phone. Here's my app:

Cool already. It shows me the files in my app on the left and information about my app on the right. This is a simple app I'm rewriting right now to convert it to SVG and incorporate the viewport, so I can see how big an app really is. More about that soon. You'll notice that it is a VALID app by the green button on the right.

The next thing I want to do it run it, so I go to the View menu and choose Manage Simulators. Why? Well, you get a choice of simulators for the different versions that are supported.

This shows you what is installed and what is not. I had the ADB Addon Helper and the OS 1.3 Simulator already installed, but by clicking on the install buttons for the later versions, you can see them too. You'll notice that 1.0, 1.1, and 1.2 are no longer supported.

So pick the OS version of your choice

Select a runtime. I selected 1.3 since that was all I had at the moment. It will also show your device if you have it hooked up. Once you've done that, just click on the arrow in the middle to start your app.

Amazing! As expected, it opens up a separate simulator window and you can see your app running. Here's my app, the one that shows you how large your device (or simulated device) is.

So far, not that special. But it now gets cooler because you can load up other environments. Here I am loading up Firefox OS 2.0. I didn't even know they were that far ahead!

Let's see what version 1.4 looks like. (Actually I know because that's what is running on the tablet. But I haven't seen it on a phone-sized window.

It looks different. This is part of the new school of flat icons. Easier to understand. I like the radio!

Does my app run in 1.4?

It looks the same, but the height is slightly different. The outer height is slightly larger because there was a file menu that is now gone. But the inner is still the same.

Okay, so this is slightly nicer than the old App Manager, but what's the fuss?


If I select one of the files on the left, a text editor pops up. I picked the index.html file because that's where the meat is. Notice that the text is colored nicely.

I can see my icons even though I can't edit them.

Again, only maybe nicer. But it gets better!

From the project menu, you can select New App and make it all right there in the browser.

You'll be asked what kind of app you want. There will be more choices as time goes on, I'm sure. And here's your new app, ready to be filled with code-delicious stuff.

This is now starting to rock. Now Mozilla is giving you a template with icons, a manifest, and javascript and css files, showing you where everything should go. Thank you, Mozilla!!!

I noticed something really cool that I hadn't hear of before. One of the icons is an SVG file! You can click on it and see that yes, Virginia, it is an SVG file. No art here, just fabulous SVG code.

This needs to be investigated. Maybe you don't need anything but one SVG icon and you're done?

And if you run this new app template, it really does run!

I'm expecting a set of steak knives with the next release!

But I've saved the best for last. You can edit your code in the IDE and see the changes immediately. No more going back to your editor and reloading umpteen times.

Open the debugger in the App Manager and see the code:

I've highlighted a line of code that sets the body color. Before it was using the color "Peru" but I changed it to"Blue" and here is what I got.

On the fly! This is really astounding. Write your code, see your code, make changes in the debugger, and never leave your browser again. Thank you, Mozilla. This will cut everyone's development time down a lot, so now you won't have an excuse not to turn out tons of cool apps tomorrow!

This really is now the coolest development environment in the universe.

The only way it could be cooler is to be able to do this on an actual phone or tablet. Or even in Firefox for Android. Imagine if you could code in your tablet. I've seen several browser IDE apps for Chrome OS, so why not here? But I'm not complaining. This is a giant step forward in programming. Wow!

Tuesday, June 17, 2014

Maze Climber (Game Review)

Some games are simple and some are complex. Simple works well on a phone, and Maze Climber is such a game. The premise is simple. You're in a maze and you must climb.

Why must you climb? Well, something bad will happen to you if you don't! At first you won't know that. You start out in a side view of a maze like Lode Runner or early Mario. But you might notice that there is a pool of red stuff at the bottom. What can that be?

You are that little white character near the middle, and you see red ladders and blue bricks. You can climb the ladders but not walk through the bricks.

Oh, no! The red stuff is rising and it is shooting out little fireballs. I bet it's lava, but I'm not going to sit around to find out what it is. I'm going to climb!

But if I don't climb fast enough, the lava will get me. It is very close. I'm hidden behind some fireballs near the edge of the lava, slightly to the left. You can see my head peeking out.

They got me. You can see me on the left, flying through the air. Owwww!

And I died!

But I can do this again and again. Here are some scores, showing the data, time, and how many meters I climbed.

Here's the home page in case you want more games from Short2Games!

And from the website, here's how to play!

Dig? What's this about dig?

If you touch a nearby brick wall to your left or right, a magic ray shoots out of you and blasts away at the wall. Hadn't noticed it! Makes it a little easier to get to ladders that go up!

By the way, the top right has a pause button. If you touch it, you get these choices.

I like the choices. Give up, play another game, or go back! Let's go back!

Now watch carefully. I'm going to drill a hole in the wall to my right.

I drilled through the wall on my right and climbed up the ladder. But the lava is coming up fast!

In case you are curious, here's a little bit more about the creator of this fun little perfect-for-the-phone game.

The eagle-eyed among you will notice that he lists lots of programming languages, and even my all-time favorite, Forth! It's nice to see that someone still uses it (actually there was some Forth programming in the One Laptop Per Child OS) but it was very popular in the early 80's when BASIC was king and C was barely known.

By the way, there are sound effects for the rising lava and a cool whistle when you die! No music, but the lava noise would drown it out anyway.

Cost: Free
Genre: Arcade
Score: 4 (out of 5)
Tested on: ZTE Open C
Get it at: Firefox Marketplace
Developer:  Short2Games

Friday, June 13, 2014

Platform Game using Construct 2 (Game Programming)

While most of my posts have been about creating Firefox OS games from scratch, I am finding it fun and interesting to use Construct 2 for game making. You just drag and drop, set a few values, and things magically happen. What is especially nice is that Scirra (the makers of Construct 2) has gone to the trouble to allow you to create the game and export it directly to a form that works perfectly with Firefox OS. They refer to it as an "Open Web App" but the icon is for the Firefox OS Marketplace. They also export to 14 other formats! And everything in Construct 2 is based on HTML5, which makes for great compatibility with Firefox OS!

I wrote two earlier posts about using Construct 2. One on bouncing a ball at and the other on a simple paddle game I wrote called PaddleFox at

Today's game is called Alien Candy Platformer and uses the absolutely cool art by Kenney, who makes cool art and gives it away. I missed out on the Candy Jam, but this would have been my entry! Here's some art by Kenney.

You can find out more about Kenney and his cool art at and tweet him at @KenneyWings. Thank you, Kenney, I love your art! You can make a donation to him and get 6000 bits of art. How cool is that?

Game Design

The purpose of this game is to have an alien that jumps around and tries to land on various platforms. If the alien misses and falls to the ground, he dies. If he can get to the end and grab a cherry, he wins!

But we're going to do this for a phone and I'm going to do something different for the controls. In the original designs, platformers had buttons you pressed to jump and other controls to move left or right. Controlling the jumps is very critical.

But a phone doesn't have buttons, joysticks, or directional controllers. Most phone games attempt to emulate those controls on screen by having shapes that you touch and/or drag. Personally, I don't like that because I have to be too aware of exactly where I am touching and dragging.

So I've come up with a design that I haven't seen anywhere and might be good for platformers. Here are the rules for touching:

  1. Tap below the hero to move him right or left. Tap below and right to move right, tap below and left to move left, in small increments.
  2. Tap above the hero to have him jump up and left or right. Tap above and to the right to have him jump up and to the right. Tap above and to the left to have him jump up and to the left.
These two rules let you keep your eye on the character. You can tap anywhere above, below, left or right. Precise movement on a phone isn't really a good idea, because your fingers are much wider than one pixel!

The game will be set up so the phone is in portrait mode. You see the game world through a phone-sized window but the world is larger. As you move and jump, the world scrolls so that the view window is always centered on the hero.

Setting Up

Get the latest version of Construct 2 at They update frequently and always have two versions: stable and beta. Go with "stable" and you'll be safe!

So first you want to set up the size of your "window" which is what the player will see. In the project properties window, set Window Size to 320x448. I picked this size so it will fit on my ZTE Open C, but because Construct 2 will scale things, this will work well on different sized phones. I haven't had a chance to test this on my new tablet yet, but I will soon and report back.

Here is the properties window for the game:

Change the details in the About section, of course, and sizes are entirely up to you. Scirra has very good documentation on all the values for the various windows. The point of a this is that instead of writing code, you just fill in the blanks and the brilliant programmers at Scirra take care of the details. Most of the time you can go with the default values. Easy!

Next I want to create a layout, which is the world the game takes place in. I made the size 1920x448, which is  the same height as the game window, but is six times the width. I picked these values arbitrarily. That felt right for one demo. Enough to give you the idea, but simple enough to do in a few minutes.

Here's my layout window properties:


Now that the game window and the world layout are set up, it's time to add objects to the game.

The Hero Alien

The first object to add is the hero. I used art from Kenney and I wanted to show simple animation. Nothing elaborate, just a two-step animation that shows the character's legs moving. But it adds a lot of the flavor of the game and is very easy to do.

Right-click on the Object Types node in the Projects window. Select Sprite. Click on the location on the layout you want the hero to appear. You'll see three little screens (Edit Image, Animation Frames, and Animations.

We want to load two images that will cycle back and forth. To load the first image, click on the load image icon (looks like an open folder) in the image editor and get your first of two images. You should see it on the main image editor.

Close the image editor and open it again by double-clicking on the sprite you just placed on the screen. Now you should see a smaller version on the Animation Frames window.

Next, right click to the immediate right of the little image in the Animation frames window and select a second image with Add frame. 

You should now see this screen.

If you look closely, you'll see that the legs are open on the first one and closed on the second. When viewed in rapid succession, they form an animation.

There is an animation properties window. Make it look like this:

This sets the loop speed and where the loop starts.

I resized the alien pictures to 32x32 which fits the grid I set in the View section at the very top. Having a grid really helps with laying out stuff

Next we need to add behaviors to our hero. Right-click on the hero (I named him "Alien") and select Behaviors. The first behavior is to give him Platform behavior. This creates a set of defaults that work well for a platform game. The manual says "The Platform behavior implements a side-view 'jump and run' style movement. It supports slopes, moving platforms, 'jump-thru' platforms, and arbitrary angles of gravity."

The second behavior is called ScrollTo and will simply make the camera follow the character.

Here are the behaviors of the hero (Alien).

Here are the properties of the hero.

Under the Behaviors - Platform section, I changed the numbers somewhat to make it work the way I wanted to have the jumps. Luckily for us, there is excellent help and you can read all about the Platform variables.

The Alien is now ready to go, but if you start the game, he'll just fall to the ground and disappear!

We need some platforms for him to jump on.

The Platforms

 Kenney to the rescue again, with some cool candy art that I used for platforms. This time we're going to use animations a different way by importing a bunch of tiles and then painting them on the screen. Sounds weird but it works.

Create a new object like before, but this time instead start with the Animation frame window and right click to the right of the blank square. Navigate to a set of sprites. I picked the Candy Expansion from Kenney, which is 95 squares that can be combined to make candy shapes. Go to the folder with the candy and select all the sprites at once and load them in.

Your Animation frame window should look like this:

You'll see 95 tiles, each with a number. You'll need those numbers soon!

By the way, here's a snapshot of the whole tile set.

Games often use tile sets to create complex images. This saves memory because you only need to load in one set of images, but you can copy them to make elaborate kinds of art, as we shall soon see.

The first tile will be blank, so delete it. Then resize the image from the Image Editor so that the tile is 32x32. Now you are almost ready to start painting with candy!

But first you want the candy bits to have a behavior. This one is simple. Make it Solid. That way the alien won't fall through it. You want the alien to jump from one platform to another.

Now to the painting. You have a 32x32 tile. Click on it. You'll see the properties for this first candy sprite.

The important variable here is Initial frame. I set it to 42, which is the 42nd image in the sprite pack. That's the left side of what looks like a pie. For reference, here are four images that make up a pie.

The one on the left is 42. The two middles are 30, and the one on the right is 44. You can refer to the numbers by going back to the Animation frame screen in the Image Editor.

How do I get the other bits of the pie? The cool part is that you select the first image, hold down the control key, and drag. When you have 4 tiles adjacent to each other, select each one and change the Initial frame number. If you want to start a new pie, just hold down the control key and drag the piece anywhere and then drop it and then click on it.

Here are some of the platforms I created for this game.

So spend a few minutes putting up platforms and making them so they can be jumped to. You'll want to move them around later. You can move a set by selecting all four and dragging the set. Because you set the View properties to Snap to Grid, it will be easy to place things.

Next you want one more object.

The Prize

I selected a cherry from the candy set as the prize. If the alien can touch this, he wins!

Insert an object and make the image a cherry. No behaviors are needed. The hero just has to touch it!

Here's the cherry.

The cherry is surrounded by some other platform pieces. You'll want to jump from the pie on the left and the yellow lollypops under it are where you'll want to land safely!

So we now have our game pieces set up, but we need to add some simple events to allow the action to take place.


This is the closest you get to programming in Construct 2, where you pick events that may happen and actions you want to take place when those events occur.

There are four mouse events and two alien events.

Mouse Events

To make things simple, you can use a mouse event and Firefox OS will interpret it as a touch event on the screen. How convenient!

First you must actually add a Mouse object to your set of objects. It doesn't have any special behaviors, you just add it.

All the objects are in place and you have given them names. Here's my list of objects.

Next, you can start adding the events. Select the event sheet and click on Add event (faintly seen at the top). As outlined at the beginning, we want two types of events: tapping (clicking) above and below.

Here is the first event (on the left) and the action you want to happen (on the right).

Start with the Mouse event and select the On Left button Clicked. Then below it, add two system events. The first system event checks to see where the click is on the screen relative to the alien. We are looking at X values. If the Alien.X is greater than the Mouse.X, that means the mouse was clicked to the left of the alien. X is left-right. Then a second check is made to compare the Y values. If the alien Y is greater than the Mouse Y, that means that the click is above the alien. The coordinate system is set up so that 0,0 is at the upper left hand corner. So if the mouse's Y value is smaller than the alien's Y value, that means that the mouse is above the alien!

Taking these three events together, you then set up actions. The first action is that character jumps. The details of the jump are in the hero's properties (above). You can vary how much the character jumps, how fast it falls, etc. The second action determines the direction the hero jumps. It sets the X vector (speed and direction) to -600 pixels of the hero. Which means it jumps to the left. So a tap above the hero and anywhere to the left will make the character jump left.

The event is the same as the first, but jumps to the right if the mouse click is above and to the right.

The same logic, but this time the click is above and to the right and the character jumps up and right.

The two next events are similar, but look to see if the mouse clicks are below the character. I wanted to do this so the character can carefully move on the platform before jumping. I haven't seen this type of motion anywhere but I'm trying to create something original for touch screens, not just emulate old Arcade and Console buttons. Here's the events for moving left or right but not jumping.

Again, the events are similar, but this time you are looking to see if the click is below the hero. If it is, you then see is the click to the right or left of the hero. Depending on that, you move the hero 20 pixels left or right. Angle 0 is to the right, angle 180 is to the left.

Alien Events

You want to add two simple events that look to see where the alien is. You're moving and jumping him around, but you want to see if he does certain things, you want to take specific actions.

Here are the two alien events:

The first simply tests to see if the alien is outside of the 1920x488 layout. If so, this means he fell down off a platform (or possibly jumped too high, or went off the right or left edges). This means the alien has failed. To make things simple, I just simply turn the screen red. rgb(255,0,0) is red!

The second is a test to see if the Alien is overlapping the Cherry. If this happens, the Alien wins and the screen turns green.

And that concludes the game. Once you understand the basics of Construct 2, you can see that the game is all about putting in the art, specifying what you want to happen, and you can begin playing.

Exporting to Firefox OS

You can just run the game at any time in the Firefox browser, which makes it easy to test.

The character is sitting on a pie, ready to jump up to the next platform. Testing in Firefox makes it easy to tweak the game.

Once you are ready, just choose Export project from Construct 2's file menu and Choose Open Web App. You can pick the folder and choose whether to minify or not. I don't like Java, so I don't, but maybe I will later. You then select Packaged App (unless you want to put it on a server) and enable Storage and Geolocation if you want.

The app is now ready. It even has a manifest file set up for you. The only change you need to make is to substitute your own 5 icons for the ones that Scirra generates. I wrote about how to submit to the Firefox OS Marketplace at

So now you can make cool platformers and put them in the marketplace with Construct 2.

Here are a few screenshots of my game.

The Game

Here's our little alien, starting out.

He can jump to the right or the left. This game has a left-to-right progression. Why? Ask Mario!

Jump higher or drop down? Or go back? You decide!

Either way, he got to the next platform.

Oh, no, he failed the jump!

Start over and try again ...

He goes for the cherry and ...

He wins! The alien wins!

You can play the game from here: But be sure to use the Firefox browser!

So that's it for now. Stay tuned, but not iTuned!