Tuesday, April 15, 2014

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.

Thursday, April 10, 2014

Drag the Dots (Game Review)

The amount and variation of games I find in the marketplace continues to amaze me and encourage me to keep doing game reviews for Firefox OS! Things are about to get interesting with the advent of the Firefox OS tablet. I will be getting one soon and I'm getting eager to start learning how to make a game that can be played well on all sizes of Firefox OS devices from tiny ZTE Open to the big 10.1 inch, 1280 x 800 pixels sized tablet! Maybe someday there will even be a Firefox OS watch!

Anyway, today's game is called Drag the Dots and is lovingly crafted by Anders Fisher (@atleastimtrying on Twitter). This game looks pretty simple at first, but quickly becomes difficult enough to play and involves both logic and quick thinking. And it looks pretty, also!

When you start the game, you see a menu of different dot patterns.


By the way, this is a screenshot on my ZTE Open and is captured using the wonderful App Manager. Without that, my fingers would be sore from pushing the Power and Home buttons simultaneously (and missing a few times). This menu actually scrolls down to provide more choices:


The Help for this game is in the options screen but you won't need it. The game is very intuitive. So let's start with the first game at the very top, called grid.


Here's what grid looks like.



All you have to do is drag the dots on top of each other. Drag the "1" dot on top of the other "1" dot. Very nice. But do it quickly because the clock is ticking!


Once the first "1" covers the second "1", it changes to a "2" and the screen and dots change color. I really like this because it keeps the game cool to look at and even adds a bit of magical misdirections so the game isn't too easy.

Now you must drag one "2" on top of the other "2".


The "2" dots are gone but now there are two "3" dots. And again, the colors have changed!

After a few more drags, there's only two dots left.


Cover one with the other and the round is over!


By the way, my user name is "box" because I hit the "x" button instead of "b" so I don't even know how to spell my own name! And the time is very long because I was taking screenshots. This would be cool if that's all you got. But there's more!

You can play more kinds of dot dragging. How about Grid+? Instead of 9 dots, you get 16.


Same rules, but more dots to confuse your eye.


If that's not enough, how about Tiny? Little dots!


Here's what the tiny dots look like:


You might notice one of the few errors above. The tiny grid of dots is overlapped by the semi-transparent "quit" button and the time display. Even if I remove the little Firefox globe at the bottom, the grid is overlapping. I wonder how this would look on my Geekphone Peak, which on loan at the moment. I'll check and add a note later. Responsive web design!

You've seen grids, now it's time for random layouts.


Ten dots. Here they are:


This introduces a new issue. Overlapping dots. You can see the two "1" dots but there is a "9" dot you can't quite see under the "10" dot. But you can quickly figure things out and move dots around to find the one you need.

Next on the list are moving dots!


Twelve dots. But after each match, the dots move around! Here are the twelve.


But after you match the first two "1" dots, the layout changes:


How cool is that? But the complexity keeps changing. The next game will really tax your brain. The dots are in a circle and each dot is spinning.


Here's the dots in a circle:


And here they are again, a short time later. Eleven seconds later, to be exact!


Drag the dots and finish the round. Next comes the maze!


This time you have to avoid the walls of the maze and every time you make a match, the walls slightly move.


Here's a shot of how the maze looks with only one match to go.


Just when you thought it couldn't get crazier, along comes the next game, Moving+.


Hey, these dots are moving!


And they keep moving!


And even after you've cleared a few, they're still moving.


Until only two are left!


Any time you want to quit a game, just tap quit or menu and you'll go to the game menu, which scrolls down to display scores for each individual game. You can see my three scores for Grid.


An options screen is offered as well, near the bottom of the main opening screen.


You can choose whether to display a background color different from the dot color, whether to display the numbers or not! or put everything in grayscale if you don't like colors.

You can also get a short tutorial on how to play.


For some reason the how to play is always in that gray on gray color scheme, which is hard to read. But you don't need it anyway. Next you are told:


Well, at least the dot is in color. I can't stand anything not in color!


Two dots. There can only be one. Except that you never see one dot. The minute the penultimate dot covers the ultimate dot, they both disappear! Go figure....


And do it fast!

That's it! You can see your stats on how well you've done overall:

Hits and misses? I guess if I drag and don't drop exactly on the right dot, I've missed. By the way, the button to clear the scores doesn't clear the stats, but it does clear the scores which you also see when you hit menu or quit. I guess your stats live with you forever.

All in all, this is a very entertaining game with lots of cool options. In particular, the color choices are really good and I feel that they aren't random choices, but follow some kind of color theory, or at least follow a particular color palette.

And there's no sounds or music. Bummer.

But because this game is so delightful, I'm giving it a 5 out of 5. It would get a 6 if the options screens were in color and a 7 if there was sound and music. But the game is just about perfect and is the kind of quick, entertaining game that belongs on a phone, with a lot of variations on game lay.

Cost: Free
Genre: Arcade
Score: 5 (out of 5)
Tested on: ZTE Open
Get it at: Firefox Marketplace
https://marketplace.firefox.com/app/drag-the-dots

Friday, April 4, 2014

Nephew of CSS Shooter (Game Programming)

André Jaenisch (e-acute! and ae not a-umlaut) of https://firefoxosundich.wordpress.com had some comments about my CSS Shooter post at http://firefoxosgaming.blogspot.com/2014/03/css-shooter-game-programming.html that were very useful.

I had used

    document.documentElement.
      style.overflow = 'hidden';


to hide the scrollbars. Because there isn't any "don't show scrollbars" command in Firefox, that seemed like a good idea. Generally people don't use it to hide scrollbars, they use it to clip content outside a particular window.

However, the CSS 2.1 spec, section 11, does define overflow = "hidden" like this:


This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region.

Because I'm defining the contents of the region, I know there's nothing outside it, so I'm happy to use this when I'm looking at the very edge of the window.

Also, I found an old reference from 2005 to

     overflow: -moz-scrollbars-none 

but it seems to have disappeared and I can't find it on MDN. Anyone know where it went?

André had a different approach, which, rather than use an little-known and possibly not supported in the future API, suggested that I simply reverse the motion slightly before you get to the edge! This works too, with only a little bit of alteration in the code.

Here's his code for the target restart when it hits the left edge:

      // Right edge hit, restart.
      if (tarHor > boardWidth-25) {
        console.log("Target hit right edge!" +
          "Turned around at " + tarHor +
          " + " + boardWidth);
        tarHor = 10;
      }


And here's his code for the bullet:

      // Left edge hit, reverse direction.
      if (ballHor + changeHor < 10) {
        console.log("Ball hit left edge!" +
        "Turned around at " + ballHor +
          " + " + changeHor);
        changeHor = -changeHor;
        ballHor = 10;
        console.log(ballHor + " " + ballVer);
      }
   
      // Right edge hit, reverse direction.
      if (ballHor + changeHor >
        boardWidth - 20) {
          console.log("Ball hit right edge!" +
          "Turned around at " + ballHor +
            " + " + changeHor);
          changeHor = -changeHor;
          // Compensate for unknown width.
          // We want multiples of 10.
          flr = Math.floor(boardWidth / 10);
          ballHor = 10 * flr-30;
        console.log(ballHor + " " + ballVer);
      }


This is perfectly valid and reminds me of the old phrase, "If you can't raise the bridge, lower the river." Games are all about solving problems, and there are usually more than one way to solve a problem.

André suggested that I add this code for the viewport in the head:

      <meta name="viewport"
        content="user-scalable=no,
        initial-scale=1,
        maximum-scale=1,
        width=device-width" />


I'm still not up on viewports but you can read about it here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag.


I'm going to be investigating this a lot more as I look more at responsive web design (RWD). Although for games, adaptive web design might be more appropriate. I will be getting a Firefox OS tablet soon and I'll want to write apps that run on it, the two phones I have, and the nearly-forgotten APC Rock I have sitting lonely in a corner. See my post on APC Rock here http://firefoxosgaming.blogspot.com/2014/01/apc-rock-hardware-review.html.

Other Problems

When I was testing André's code, the bullet at the bottom didn't display! At first I thought it was the code and then it was pointed out that maybe the bitmap wasn't there. It wasn't.

In future code, I'll either avoid bitmaps (probably not likely) or write some code that determines whether the bitmap was actually loaded.  There are some ways to do this by loading the bitmap as an Image and then checking to see if it loaded by having an event handler on the image.

André also had an interesting idea of creating a ball by using a CSS rectangle and rounding the corners so it looks like a ball, from Stack Overflow. https://stackoverflow.com/questions/6921792/how-to-draw-circle-in-html-page/6921838#6921838.

Moving Forward

I've been thinking about where to take this blog. My influences are:

  1. Tablet - responsive web design needed!
  2. A return of my love for SVG.
  3. Playing way too much Starbound http://playstarbound.com/
  4. Remembering Sigma Star Saga http://en.wikipedia.org/wiki/Sigma_Star_Saga
So what I'm going to do is create a serious large game in several parts that will consist of the following:

SVG all the way! Why not?
  1. A space shooter that you can fly around in.
  2. Land on other planets in a side-scrolling view.
  3. Enter cities in a top-down view with tiles
  4. Make it an actual RPG with statistics, fighting, upgrades, stores, etc.
Stay tuned, but not iTuned!

Tuesday, April 1, 2014

GBoy Emulator (Game Review)

Game emulators are certainly controversial and I do not advocate them or recommend them. But this review will be for those that are interested in how could a game emulator possibly work in Firefox OS with only HTML5 and JavaScript. So don't try this at home, boys and girls, or Waluigi (the brother they don't talk about) will come and visit you in the dark of the night.

A brilliant person named Robert Bierkamp has created the first emulator for the Firefox OS phone and it works pretty good. Here's an example screen shot:


In case you're really too young, here is what a Gameboy looks like:


The original Gameboy was amazing in its time. You could carry it around with you, unlike earlier machines like the Atari and NES. You didn't need a TV, you just needed a big pocket. Gameboys got smaller and then evolved into the Gameboy Advanced and beyond, up to the very popular 3DS which is doing very well today.

But my interest here is two fold.

First, this really is some amazing clever programming. The author just says he got a lot of stuff from all over the place and put it together. It works. You can really play Mole Mania on the emulator, even on the ZTE Open! More about that in a moment.

Second, I recommend that you actually buy a real Gameboy and some old games and play them. Why? Because the games are phone-sized and might help you to visualize what kinds of things could be done on a phone. If you look at the amazing quality of something of those games, they pack a lot into a very small package and small screen.

How the Emulator Works

I don't know and don't need to know how the actual code works. I'm not building one! But in case you want to use it, here's a few tips:

1. Grab it from the Mozilla Marketplace. It's free.  https://marketplace.firefox.com/app/gboy-emulator/. Load it onto your phone.

2. Then add another program that helps GBoy Emulator find the files it needs. The author recommends Explorer or Alpha Explorer.

3. Find a snapshot of a Gameboy ROM. Somewhere. Actually they're all over, but not supposed to be. You didn't hear it from me and I don't advocate it. I have a nice collection of real cartridges (which are pretty cheap these days, around $5 to $10 bucks). You'll need a Gameboy, and they are really cheap as well. You don't need to pay much for those either! But if you want to download a ROM to try it out, search for "Gameboy ROMs" and you'll find many that are out there.

4. Most of the ROMs are zipped. Unzip it. Put it somewhere you can find it. Screenshots is a good place!

5. Then start GBoy Emulator. If you've installed Explorer, it will look like this:



6. Tap on Explorer and grab your unzipped ROM file. It should have a .GB extension.


7. The game that will be chosen is called Mole Mania. Very cool game about a mole named Monty who must rescue his family from the evil Jinbe!

8. Then the game will be loaded and you can play it!


The colors seem to change. Dunno why!

Using GBoy Emulator

Going back to the original NES, the controls are Select, Start, A, B, and the 4 arrow buttons. They all work. Even the sound works! Most of the games will tell you what each button does.

I love the humor of this early game, which was created by Shigeru Miyamoto, legendary creator of Mario, Zelda, and a ton of other amazing games. Mole Mania isn't as well know, but still cool. The game involves Monty digging his way under various obstacles and having to remember what was on the surface when he comes up. A really nice puzzle game with a story.


You can see that the emulator is still a little rough around the edges, but is certainly worth a look. And it plays just fine. Just remember to buy a real Gameboy and some real Gameboy games and learn from them so you can create fabulous Firefox OS phone games.

Starting to dig down. Monty is in the lower left hand corner.


Now he's underground, in the same place but one level down. Where to go?


Let's go north!


And tunnel back to the surface.


Well, that didn't help. He'll need to tunnel back down, go South one, and then East two, and tunnel up to get to the next part! An interesting exercise in mental ability! If you want to play the real game, you can get it on the 3DS Virtual Console! But there's something nice about snapping your game into a Gameboy and playing it.

Oh, one tip about Gameboy consoles. If you can find one, get the Gameboy Advance SP Backlit Model (AGS-101). That was the last handheld that would still play Gameboy and Gameboy Color cartridges, and it has a backlight! They're not that rare and you can pick them up on eBay for $50 or so. Worth it (and you can play the ton of Gameboy Advance games too).


You can find out more about the GBoy Emulator at http://mundofirefoxos.blogspot.com/2014/02/gboy-emulator.html.