Responsive Design (Game Programming)

One of the many reasons I like to write about game programming as well as other people's games is that often a game I review inspires me to dig deeper into game programming issues for Firefox OS. In my last post, when I reviewed Drag the Dots, http://firefoxosgaming.blogspot.com/2014/04/drag-dots-game-review.html, I noticed that one of the games overlapped the buttons at the top.

Above is a screenshot on the ZTE Open. Because the game developer had made the quit button and the time display panel semi-transparent, you could still play the game just fine, but it is a small annoyance.

Further annoying is the little-known Software Home button. See that little Mozilla fox at the bottom. That is only displayed if it is enabled in the Developer section of the settings. If you don't see it, you can enable it by going to developer settings and check "Enable Software Home button". It does the same thing that the hardware Home button does just below it. I didn't even know it was possible until I upgraded my software to version 1.2 and all of a sudden the fox was there but I didn't even notice it!

I'm sure there's a reason of the Software Home button, but it takes away precious screen area. I'm curious if there is some way in my game I can make sure this is not enabled. I'll poke around and see! But maybe it is important to have it. Anyone know?

This prompted me to go back and look at my post called How Big Am I?, http://firefoxosgaming.blogspot.com/2013/10/how-big-am-i-game-programming.html. I'm looking forward to the Firefox OS tablet, which has made me want to think about sizes and how much space you have for a game. I decided to rewrite my little program and have it display the inner and outer height and width. One thing led to another and I decided to add some new features to my CSS Shell code, http://firefoxosgaming.blogspot.com/2014/03/son-of-css-shell-game-programming.html.

Instead of using an alert, I display the values in the page itself. And here's what I have found for the ZTE Open and the Geeksphone Peak.

ZTE Open with the Software Home button:

And here's the ZTE Open without the Software Home button:

As you can see, the outer height is the same (480 pixels) but the Software Home button costs you 50 pixels, which is a large amount for such a small screen.

And the Geeksphone Peak with Software Home button:

. 

And without the Software Home button:

Still a 50 pixel loss. But if you think about the variations of the two phones and the option of the Software Home button, the height can be as much as 620 on the full Peak without Home button and as low as 410 on the ZTE with Home button enabled. 210 pixels!

The widths don't vary, but the Peak has 360 pixels and the ZTE only has 320. Either way, the two phones definitely have a drastic difference in ratio of width to height.

What Does This Mean?

It means you need to know two things:

  1. How big is your screen? You can test this when you start up the game.

  2. Adjust your game accordingly. There are various options, depending on the game.

I'll be analying this more in the coming weeks, but I strongly recommend that if you are making a game, that you do two things:

  1. Test your game on different devices.

  2. Write code so you can adjust.

There are obvious things you can do. Write for the ZTE Open and then add some buffer space for bigger phones. It might be smart to test on the ZTE since it has less memory. You want to be prepared for low memory when that $25 Firefox OS phone comes out!

Drag the Dots

Drag the Dots is still a great game and I recommend it. Here's what it looks like on the Geeksphone Peak:

Everything fits just perfectly. Well, until that pesky Software Home button is enabled:

Oops, there goes 50 pixels!

This isn't meant to be any kind of criticism of Anders Fisher and his really cool game. Firefox OS is still in beta and some of these issues are still puzzling. My original questions about sizing started when I noticed that Candy Crush was slightly off, and those guys are a big company with lots of developers! Anders Fisher is just one guy with some really great ideas and a good color sense. I would pay for his game if he ever sells it!

New Directions

I've decided to head in a new direction with this blog. I'll still keep reviewing games and I'll be poking into the idea of Responsive Game Design, but I've decided to take the plunge and see if I can get some drag-and-drop game engines to work with Firefox OS.

My first investigations will be with Scirra's Construct 2. I've actually used that one before and even have a game I've written in it on the Chrome App Store. You can read about Construct 2 here http://firefoxosgaming.blogspot.com/2014/03/html5-game-frameworks-game-programming.html. And after that, I'm going to look at another cool engine called Stencyl that looks like it might work.

If anyone has had any experiences with Construct 2 and/or Stencyl with Firefox OS, let me know.

Candy Crush (Game Review)

Candy Crush is a nice match three game. You match three or more candies and watch them explode. Makes me wonder if someone had an unfortunate incident with some candy at a young age.

Anyway, here's what the game start screen looks like:

There's no instructions, but at least the game lets you choose between playing for the a high score for the number of turns you take, or the highest score for how many candies you explode in a fixed amount of time.

Maybe a match three game doesn't need instructions? So here's what the game looks like when you play:

You have a grid of candy, two boxes to show your score and how many turns you have left, a button to restart the game, and another one to exit. A lot of games don't have exit buttons, but I would like them on every game, even though you can press the home button to end any game.

Wait! What's wrong with the screen? The developer, Richard Armuelles, didn't make the game fit my phone, the ZTE Open. Close, and playable, but you'll notice that the Exit button is cut off at the bottom and the top row of candy is cut off at the top. Lose one point!

There are several books written on Responsive and/or Adaptable Web Design, and they are important for Firefox OS on a phone! One phone may be one size and another different. In this case, it's clear that the overall screen should have been a little smaller and the buttons on the bottom moved closer together.

Oh, and a simple help file would have told me what happens when certain striped candies are part of the exploding candy chain. I know I get extra points, but I don't know why. The striped candies seem to knock out a whole row or column, but I'm not sure exactly what because it all happens (reasonably) fast.

But the game is playable and I find that match three games are a good way to waste a few minutes when I'm waiting for the bus. Often a good game can be made better with a little bit more attention to the details, like help, but fitting to the screen is important. Because I like this game, I'm giving it a 4, because the game is definitely playable and has fun art.

Sometimes my rating is influenced by whether I like a game or not, but I'll try to be somewhat objective.

Anyway, this sounds like a good lead-in to my next post, which will start to look at the programming issues of sizes and boundaries. Stay tuned, but not iTuned.

Cost: Free

Genre: Puzzle
Score: 5 (out of 5) after revisions (see comment below by me)
Tested on: ZTE Open (Firefox OS)
Get it at: Firefox Marketplace