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 http://firefoxosgaming.blogspot.com/2014/04/bouncing-ball-in-construct-2-game.html and the other on a simple paddle game I wrote called PaddleFox at http://firefoxosgaming.blogspot.com/2014/05/paddlefox-for-firefox-os-in-construct-2.html.

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 http://www.kenney.nl/ 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 http://www.scirra.com. 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:

Objects

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.

Events

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 http://firefoxosgaming.blogspot.com/2014/01/submitting-app-game-programming.html.

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: http://thulfram.com/1GAM/May%202014/ACP/index.html. But be sure to use the Firefox browser!

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

The Firefox OS Tablet has Landed! (Hardware Review)

At least it has landed in my mailbox! Before you try to buy one, you can't. You have to fill out a form telling Mozilla what you will do with it. Find out all about it at https://wiki.mozilla.org/FirefoxOS/TCP.

If you want to see one, here's a video Michel Wilhelm made recently at http://www.youtube.com/watch?v=VvWRpC8Zdts with a nice tune about "What the Fox say!" And notice in the video that the tablet boots up in two seconds!

The tablet has several names. The box calls it the InFocus tablet. App Manager calls it Flatfish, my PC calls it SAGA. I like the name SAGA after the Japanese RPG, but I think Flatfish is catching on. I'll call it that.

Here's the specs, fresh from the TCP site:

Brand/Model: Foxconn InFocus New Tab F1
Processor: A31 (ARM Cortex A7) Quad-Core 1.2GHz w/ PowerVR SGX544MP2 GPU
RAM: 2GB
Storage: 16GB
Screen: 10.1" capacitive multi-touch @ 1280x800
Camera: Dual cameras, 2MP/5MP
Wireless: 802.11b/g/n, Bluetooth 2.1+EDR
Ports: Micro SD, Micro USB, Microphone, 3.5mm Earphone jack
Sensors: Light Sensor, G Sensor, Gyroscope Sensor
Other: Speaker 0.7W x 2 Stereo, GPS/AGPS & GLONASS
Battery: 7000 mAh
Dimensions: 266(L) x 170(W) x 9.7(H) mm
Weight: 580g 

It's a big tablet. I'm used to 7" tablets which will fit in my hand in portrait mode and 8" tablets which won't, but this is a big 10" tablet and you have to hold it in your lap. Unfortunately because people didn't know it was coming, many apps force you to tip the tablet sideways to use the app. Oh, well, they can read all about Screen Orientation at http://firefoxosgaming.blogspot.com/2013/11/screen-orientation-and-moz-prefixes.html which also contains a little app you can use to see how it work.

As promised, I'll get started on creating a series on responsive design that will compare the tablet to the three Firefox OS phones I have (all different sizes) and probably put it all into a book! But today, I'll just talk about the tablet and setting it up.

After charging it up with the included charger, I plugged it into my PC running Windows 7 and the drivers were very cooperative. Here's a screenshot of what the completed drivers from Windows Update look like:

 

And as soon as the drivers are loaded, this helpful window pops up, asking me what I want to do with this new drive.

Windows thinks this is called the SAGA G1. My very first Android phone was called the G1!

Well, this isn't a phone, this is a tablet! And here's what the memory looks like from the PCs point of view:

Drive E: is my DVD and Drive H: is my SD card used as a ReadyBoost cache (very handy for laptops). But we're interested in Drive I: which is the internal memory for apps on the device. Disk J: is the micro-SD card I stuck in the tablet (8GB which becomes 7.40GB). Lots of room for apps!

All is good, wireless worked, so I downloaded some apps from the store and some music from my PC. Next to download some of my own apps using the App Manager.

Here's what the App Manager sees:

You'll notice that App Manager calls the tablet the FLATFISH_123456 but we'll use the nickname Flatfish!

I had to make one change, however, before I could load one of my own apps. When using a FxOS phone, you have to check the box allowing remote debugging. With the tablet, there isn't a check box, there is a drop-down menu and it was set to ADB. That didn't work for me. I clicked on the box and found that ADB and Devtools needed to be the option.

Then everything worked perfectly.

So I uploaded my favorite app, the revised "How Big Am I" app explained in http://firefoxosgaming.blogspot.com/2014/04/long-lost-cousin-to-responsive-design.html. I'm about to revise it again using the Viewport API, but I thought I'd see if it worked on the tablet. It does!

Here you can see that the tablet has an outer width and height of 1280x800 pixels and an inner width and height (from the notifications bar taking away 20 pixels) of 1280x780 pixels. That's HUGE!

By the way, yet another cool thing about the App Manager is that it shows you the size of the screenshot when you take it:

 

App Manager just is so cool!

So here's a few screen shots. First is the Home screen, showing the one app I downloaded.

The icon says FoxBall but the app is really Size Me which is version 2 of How Big Am I? The icons below (done by a better icon maker than me) are Internet, E-Mail, Gallery, Music, Contacts, and Calendar.

The second screen looks like this:

That's it. Above are Settings, Camera, Clock, Video, and the fabulous Marketplace. Below you already know. No more for now but if you add more apps, more screens will become available.

If you want to uninstall an app, you must do it through the settings.

The old way, a long press on an app until it shows a little X in the upper-left corner, is gone (too much like iOS?).

Also, if you want to see what apps are running and kill one (but not uninstall it), swipe DOWN from the top to expose the apps that are running. Kill them by pressing on the X in the upper-left corner.

To get back to the Home screen, just swipe UP! So far, most things seem the same as the phone.

I also found one setting that stopped a problem I was having. After I had been playing with the tablet a few hours, the screen started flickering and changing colors. I thought maybe the tablet was heating up and going bad and I had visions of returning it and being very sad.

But it turned out that there is a setting in the Developer section that said something about repainting. Don't select that unless you know why you want it. I unselected it and the colors went back to normal. I unselected everything except the ADB & Devtools for remote debugging and everything seems fine.

Problems

I noticed a few problems with the new tablet. The first is that several apps don't load quite right. I don't know what this is about but here's what happens. I go to load something and instead of an icon, I get a screen like this:

This was for an app called PDF Viewer, but I saw several others. It's not that big a deal because you can just carefully click on index.html and the real app will come up. But odd. Not every app did this. Something to investigate further. 

By the way, the PDF Viewer app really ran slow on the tablet, but runs fast on a phone. This probably is because there are less pixels to crunch. It took like 3 or 4 seconds to fill a page with a double-column PDF. This may be a problem for apps that have to crunch more pixels!

My other noticeable problem is that the Device Orientation does not seem to work. There is a cool app called Orbland that simulates rolling a steel ball around a wooden maze. It works on the original ZTE Open and the Geeksphone Peak, but does not work on ZTE Open C, and now does not work on the Flatfish!

I had written an app that shows the code for Device Orientation at http://firefoxosgaming.blogspot.com/2013/12/device-orientation-game-programming.html

and it works on the ZTE Open and the Geeksphone Peak (both running at version 1.2) but does not work on the ZTE Open C (version 1.3) or the Flatfish (version 1.4). The hardware has a gyroscope and the Device Orientation API should work but doesn't. I need to file a bug on this so that people can play Orbland! Seriously, device orientation is important for phones and I'll figure out what the story is. Especially because I'm working on a space shooter that uses Device Orientation to steer. By the way, my blog post on Device Orientation was the most popular post on my blog, but has now been pushed off the top of the pile by my post on the ZTE Open C.

Also, in a similar problem, the Vibration API doesn't work for the ZTE Open C or the Flatfish, but there was some discussion on B2G about how vibration isn't support in the actual devices (even though it was on the ZTE Open and the Geeksphone Peak. I wonder why those aren't supported. I like vibration for tapping on keys and of course for games it really helps explosions!

I think that covers the first round of this fabulous new tablet. It seems very well built and I'm happy to put it through its paces and write lots of posts on responsive design because now I have a phone (three actually) and a tablet. Clearly, what works on a phone won't work on a tablet. And by the way, I'm ready to say that if you write an app, have your phone version be portrait, but have your tablet version landscape. Because of the way the plug works, it's not easy to view something in portrait on the tablet.

So, stay tuned, but not iTuned or iPadded!

ZTE Open C (Hardware Review)

Woo hoo!

I just got my ZTE Open C from eBay and I'm very happy with it. This is my third Firefox OS phone and so far it is really great. I wanted something I could try to use, as opposed to something I could program. I'll be running it through its paces, but so far I'm extremely happy with the $99 unlocked price I paid to the ZTE store on US EBay.

Why is this cool? It seems faster than the ZTE Open I have. The official Mozilla specs are at https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Phone_specs#Device_specifications. From those it looks like the specs are the same as the Geeksphone Peak, but I'm investigating that a little more.

It looks like this:

The Geeksphone Peak has this processor: Qualcomm Snapdragon S4 8225 and the ZTE Open C has this one: Qualcomm MSM8210 Snapdragon. If someone wants to tell me the difference, that would be cool. What is cool about the Open C is that it has very similar specs to the "Flame" Firefox OS reference device. Same processor, anyway.

Of course the first thing I did was to hook it up to my PC and fire up App Manager. Here are a few screen shots. Oh, I forgot to say that the Open C comes with Firefox OS 1.3 out of the box! And when I hooked it up to my 64-bit Windows 7 box, it had more drivers than the one or two the earlier phones had. Here's a snap of the drivers that Windows Update found for me.

Getting Windows Update to do all of that is downright amazing. Someone has a friend in Redmond!

So here are a few screens showing off version 1.3 of Firefox OS.

Here is the home screen:

N

Those icons at the top take you to selections of relevant apps. I don't know how they are chosen, but I'm sure people will care about them.

At the bottom you see the usual suspects: phone, address book, messages, browser, and radio.

The next screen looked like this:

The usual suspects: camera, gallery, email, calendar, twitter, facebook, settings, and marketplace.

There was a third screen:

 

This one had music, video, clock, notes, usage, here maps, and ... SOFTWARE UPDATE. 

If you click on that, here's what you get:

I guess ZTE learned their lesson and now there's a button on the screen to update when version 1.4 is ready to go. Thank you! After all the suffering we all did to update the original ZTE Open to anything beyond 1.0, it's nice that they're starting out at 1.3. 

One other cool thing (of many) that I just discovered is that the Notes app connects to Evernote! Very easily, too. By the way, all I had to do was drop in a spare SIM card and add a 16GB SD card, and I was ready to go. 

By the way, when I plugged it in, Windows recognized the device and showed me this:

The first drive is the 16GB SD card I put in (okay, everybody lies about memory) and the second drive is what ZTE considers as memory you can use for music, video, pictures, etc. I had a choice about which drive to use but I chose my external SD card for all my music, etc.

Here's some of the music I downloaded right away:

 

A prize for anyone who knows where those songs are from!

I've got plenty of room for storage:

I then ran my app that looks at inner and outer dimensions and here is what it produced:

 

That's the app from http://firefoxosgaming.blogspot.com/2014/04/responsive-design-game-programming.html and the follow up at http://firefoxosgaming.blogspot.com/2014/04/long-lost-cousin-to-responsive-design.html. 

However, alert readers will notice that those numbers don't match the numbers in the spec at Mozilla I cited at the top of this page. J. Ryan Stinnett pointed me to the article at https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel. I will need to digest this article and see if there's some way I can make apps that use these different "pixels". My app works just fine and the ball bounces around the edges, but it sounds like if I use viewport, I can get a bigger super-pixel screen. 

So far, the ZTE Open C is definitely a winner ... especially at $99. Get yours today from http://item.ebay.com/291125433026. Right now when I went to check, it said 332 had been sold and 8 people had bought this in the last 8 hours. They're having a 5% off sale if you buy 2! In case you're worried, the seller, ZTE_US, has a 99.% rating, which is great!

I'll be trying out more apps and doing more comparisons of the ZTE Open C and the Geeksphone Peak in the next few days, so stay tuned, but not iTuned!