Firefox OS Gaming: October 2013

Thursday, October 31, 2013

Jewels (Game Review)

This game fooled me a little and then confused me but finally is one I'll keep as a good way to spend a few minutes. That's what phone games are, a happy way to spend a few minutes. Or not. Maybe longer games have a place and if you know of any longer games that work on Firefox OS, let me know. For example, I'm also playing through the Legend of Zelda on a Nintendo 3DS and having a blast doing one or two screens at a time.

But back to Jewels (by Tweensoft). Note that Tweensoft also makes an HTML5 game called Jeweled, which looks more like a bubble shooter games. Interesting marketing!

I like bubble shooters, but this is more of a genuine puzzle. You must rotate groups of balls and if you get four to match color, they vanish. An unusual variation on match three.

So here's the opening screen:

Note that you can see high scores and get more games. Tweensoft has a lot of them!

Here's the instructions. I'm always glad to have those, but (later) I'll add a few tips.

Sort of simple, but this screen will make it more clear:

You have 16 jewels of different colors. At either lower corner you have a circular arrow that determines which way the jewels will rotate. The four that are enclosed (green, green, red, blue) will rotate counter-clockwise if you tap inside the circle.

Select different sets of four and rotate them until you get four jewels in a square -- but the square can be larger than 2x2. When you have four matching at the corners, those corners disappear and new jewels fall down from the top to fill any holes.

I first got confused because I thought this was a simple match three game like Bejeweled, but it wasn't. Maybe a grandchild of Bejeweled. I would have preferred a more descriptive title like Four Corners or, well, that's a great name for this game.

But then when I tried to play it, I couldn't figure out how you select. Sometimes clicking one a jewel would select the connected four so that the jewel was in the lower corner, and other times in the upper corner. Then I finally realized (here's the tip) that you tap in between the four jewels you want to rotate. Perfect! Now you can tap fast and furious!

My only real grip, now that I know how to select and play, is that I would have preferred that the game be in portrait, not landscape. I like to hold my phone in portrait and have a good grip on my ZTE Open while I'm tiptoeing through the tulips. But maybe that's just a preference.

Oops, I forgot one thing that makes this a game of skill. On the right side of the screen is your life meter. Every time you get a 4-way match, your life meter goes up. Every time your rotations don't cause a match, the life meter goes down. When it gets to the bottom, the game is over. You then see the final screen and have the option to enter a high score.

A nice game. Simple, but colorful and fun. I don't like that I had to puzzle over where exactly I had to tap, so the game loses one point. I'd almost deduct only 1/2 a point because the rest was perfect.

Cost: Free

Genre: Puzzle
Score: 4 (out of 5)
Tested on: ZTE Open (Firefox OS)
Get it at: Firefox Marketplace

Wednesday, October 30, 2013

Bouncing a Ball with Canvas Arc (Game Programming)

Recently I created a simple programming showing how to bounce a ball around a Firefox OS phone screen using nothing but HTML5, JavaScript, and CSS (check it out).

CSS is very cool, but Canvas has its place also. There are a few different ways to work with Canvas, and I'll show you one here. The game looks the same, so I grabbed a graphic from Wikipedia when they weren't looking.

I'll be covering bouncing balls in Canvas (with a few variations) as well as SVG (with greater variations).

So basically instead of pushing around a bitmap, we'll create a canvas in HTML5 and then draw on it using the Canvas Arc method. This is only a few more lines than the CSS version, and runs just as fast. And, again, this runs in all browsers.

Here is the code, in glorious HTML5:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
    Canvas Bounce Draw Circle
    </title>

    <script>

    // Global variables
    var canvas;
    var ctx;

    var boardWidth = 320;
    var boardHeight = 460;

    var ballHor = boardWidth / 2;
    var ballVer = boardHeight /2;

    var changeHor = 10;
    var changeVer = 10;

    // Listen to that page load!
    window.addEventListener("load", getLoaded, false);

    // Run this when the page loads.
    function getLoaded(){

      // Make sure we are loaded.
      console.log("Page loaded!");

      // Load the image and the canvas.
      loadMyImage();

      // Start the game loop.
      gameLoop = setInterval(doMainLoop,16);
    }

    // This will run every 16 milliseconds.
    function doMainLoop(){

      // Clear the canvas.
      ctx.clearRect(0,0,boardWidth,boardHeight);

      ballMove();
    }

    function ballMove() {

      // Changes are calculated but do not
      // take effect until next time through loop.

      // Calculate new vertical component.
      ballVer = ballVer + changeVer;

      // If top is hit, change direction.
      if (ballVer + changeVer < -10)
        changeVer = -changeVer;

      // If bottom is hit, reverse direction.
      if (ballVer + changeVer > boardHeight - 10)
        changeVer = -changeVer;

      // Calculate new horizontal component.
      ballHor = ballHor + changeHor;

      // If left edge hit, reverse direction.
      if (ballHor + changeHor < -10)
        changeHor = -changeHor;

      // If right edge is hit, do something.
      if (ballHor + changeHor > boardWidth - 10)
        changeHor = -changeHor;

    // Draw a ball using canvas arc function.
      ctx.beginPath();
      ctx.arc(ballHor, ballVer, 10, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fillStyle = "Fuchsia";
      ctx.fill();
    }

    // Load the image and the canvas.
    function loadMyImage() {

      // Get the canvas element.
      canvas = document.getElementById("myCanvas");

      // Make sure you got it.
      if (canvas.getContext) {

        // Specify 2d canvas type.
        ctx = canvas.getContext("2d");
      }
    }

</script>

</head>
<body>

<canvas id="myCanvas" width="320" height="460">
</canvas>

</body>
</html>

There are lots of books written about Canvas and you can always get started at the W3 Schools: http://www.w3schools.com/html/html5_canvas.asp

Essentially, this code can be divided into parts:

HTML5 shell - standard, except Firefox OS likes to know about UTF-8.
JavaScript that defines some global variables and defines a page load event.
An initial function that loads the canvas and starts the game loop.
A game loop function that erases the screen and draws the ball.
A function that calculates what's next and moves the ball.
A function that loads the canvas.
A canvas element in the body that defines the canvas size.

This has been tested with my trusty ZTE Open Firefox OS phone. I like the phone for all its quirks, and it is a good environment to test on because it represents the minimum that a Firefox OS phone offers. I haven't even tried to upgrade the OS, but everything I'm doing is very standard and shouldn't cause any problems. After all, it's only game programming!

Here's how it works:

Shell and Globals and Page Load

The shell is just your standard HTML5 shell. Nothing special to see here, but be sure to give it a title and specify UTF-8 (unless you are working with other kinds of UTF).

The canvas and its context (ctx) are defined as global so they can be accessed anywhere. Sometimes globals are good. The size of the screen (board), position of the ball, and the amount of change are defined.

An event handler is created that will detect when the page is loaded. I always do this because I want to make sure everything is loaded before I start calling JavaScript. In the CSS ball bounce, I used the onload function in the body but event listeners are cooler.

Initial Function

You call two functions here (and I added a console output in case you want to make doubly sure the page loaded).

First the function is called that defines the canvas. You do this once.

Next you call the game loop, which will run every 16 milliseconds. You can mess with this number, but it seems to work with the way that browsers are programmed. Or maybe it's just a memory of that time when you were sweet 16?

Game Loop

This just does two things:

Clear the screen.
Call a function to draw the ball.

Canvas needs to have the screen cleared. Once you draw on the canvas, it stays that way. Think of it as fire and forget. Except that with games, you can't forget, so you need to keep track of what you're doing, but the canvas won't help you. The canvas forgets! There are some other techniques you can use to take care of this, but we'll talk about that later.

Anyway, the loop just goes around and around, each time clearing the screen and drawing the ball in a new place. For fun, don't clear the screen and watch it fill up with ball images.

Drawing the Ball

This is the good part. Canvas has some drawing commands, like line, square, and arc. They don't have a circle command, but you can draw a circle with the arc method (arcs are just parts of a circle, so make it go around all wthe way). You can find out more about arc here. Of course, there's a W3C canvas specification, but it's written for browser manufacturers, not web monkeys like you and me.

So drawing the ball has some similarities to the CSS bouncing ball. Calculate the move, and draw the circle. The difference here is that instead of blasting with a bitmap, you draw a circle.

      ctx.beginPath();
      ctx.arc(ballHor, ballVer, 10, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fillStyle = "Fuchsia";
      ctx.fill();

This is a pretty standard canvas procedure. All your methods are attached to the canvas context (ctx, defined in the function below). Follow this for painting with a method:

Arc is really a way to define a path. So you need to begin the path first.
The arc method needs the ball x and y position, radius, and three other standard variables.
Then you close the path. Otherwise the horse will get out of the barn!
Then define your color with the fillStyle method (isn't Fuschia fun to spell?).
Finally, use the fill method to make it happen.

Canvas likes fiddly procedures, but once you learn them, you can just fill in the blanks.

Loading the Canvas

Getting a canvas to work is not that hard, it just takes a few steps:

Define the canvas in the body.
Load the canvas into the web page.
Get the context of the canvas.
Make sure you get the context!

In this function, you first find the canvas element that was created in the body with the canvas tags. The canvas tag needed to have a height, width, and an id (so it can be found).

Next, do an if statement to make sure you get the canvas. In that statement, use the canvas.getContext method and assign it a name (ctx is popular). Specify that you want a "2d" canvas. 3D is coming but I'm not sure how well it is supported and I'm only looking at 2D games right now.

You want to make sure you got the context. It's like page load. You'll appreciate it the first time you make a typo or forget to define the canvas tag in the body.

Canvas Element in the Body

Just put the canvas element in the body. Give it a size and id. The position of the canvas is determined by the flow of the page, but wherever it is, once you have its context, you can blast away on it. Think of canvas as its own little world. You can draw on it and every HTML5 browser supports it.

That's it for now. This seems to run as fast as the CSS ball bouncing, but I haven't done any precise tests yet. It runs fast enough to convince me I can do an action game with Canvas or CSS.

So far, the advantage goes to CSS, because I don't care about what's on the screen and I don't erase anything. In CSS I just move the ball, but in Canvas I have to clean up after the ball moves. Well, maybe that's like taking care of a cute little puppy.

Next time: what if you have other stuff on the Canvas screen and don't want to erase everything?

Tuesday, October 29, 2013

Domino (Game Review)

Domino brings back happy memories of being up at the cottage as a boy and playing dominos. And now I can play it on my Firefox OS phone any time I want. This is a perfect short game that can while away a few minutes without any brain power (sometimes a nice thing).

So in case you've never heard of dominos, they are little black tiles with white spots and each tile has two sides, each side with a 1 to 6 dots. You match 'em and there are various ways to play them as a game or just stack them up and build little castles.

But this is a computer game and here is the first screen you see. Hooray! Directions that are simple but helpful. How cool is that? I really like games with directions and too many in the Firefox Marketplace don't seem to have directions. Domino is a simple game and the directions match.

Click on "New game" and you see the playing field.

There are two dominos at the top and your job is to get rid of all your dominos (at the bottom), by taping on a domino half in your hand and then tap the matching domino half on the board. The domino path twists and turns until you can't play, either by running out of dominos or by not being able to play one. When the game is over, here is what the screen looks like.

If you played all your dominos, the score is based on how many dots the computer player had at the end. If you can't play, the computer wins! Simple, but the real fun is just matching up the tiles and playing. This game is very popular around the world. For more about dominos, check out http://www.domino-games.com/

I hope to see more from the developer, Pictureplaza, in the Netherlands.

Cost: Free

Genre: Boardgame
Score: 5 (out of 5)
Tested on: ZTE Open (Firefox OS)
Get it at: Firefox Marketplace

Monday, October 28, 2013

Bouncing a Ball in CSS (Game Programming)

I'm going to start a series looking at the 6 ways you can use simple graphics for games in Firefox OS.

What's that you say? Isn't Canvas the way to do graphics for games? Six ways? Simple?

Well, maybe not always simple, but here are the ways I'm going to demonstrate, in between reviewing other people's games:

CSS sprites - easy for some games, works in every browser except maybe some really old ones.
Canvas using bitmaps - this is the most popular. Blast a bitmap, you're done, almost.
Canvas using lines and shapes - advanced, but might be cool with some kinds of games.
SVG body - create SVG shapes in the body and move them around.
SVG in the HTML DOM - create SVG shapes in the HTML5 DOM and manipulate them.
SVG in the SVG DOM - SVG has its own DOM - "It's a secret to everybody" (Zelda)

But for today, you can use CSS (Cascading Style Sheets) to move bitmaps around on the screen. CSS has been around a long time, but most people think of it as a way to define the typefaces, layout, and colors of a web page. But you can use CSS to define graphics that you can move around. I won't use it in this post, but the coolest part of CSS is something called CSS Sprites, which lets you do simple animation.

So I've written a really simple program that just lets a ball bounce around your Firefox OS screen. You can't do anything but watch. It's just a demonstration of one way to do graphics. I'll use the same model for the other 5 ways to do graphics (and I'm not counting WebGL which is a cool 3D technology and I'm not using any JavaScript libraries either. (I tend to avoid JavaScript libraries because I like to know every detail of what is going on.)

Here is the code I've written. Copy it, slap it into a text file, use the same manifest as before, even the same icon. You can of course change the icon and you should change the personal details in the manifest as well.

But before you see the code, a bit about the Firefox OS development cycle. When you start up the Firefox OS Simulator, you pick a folder that has the manifest in it. If you want to make a change to your code, you need to:

Stop the simulator (click "Running" and it will say "Stopped").
Click on the x at the very far right to remove the app from the simulator.
Reload the simulator (F5 is your friend).

In addition, if you have pushed your app to the phone, you will want to delete that app before you try to push a new version again. Do that by long-pressing on the app, touch the little x, allow your app to be killed, and then press the Home button to make the other apps stop wiggling (in fear that they will be killed next).

Now you are ready to put in this code (in a file named index.html):

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>
      CSS Bounce 320x460
    </title>

    <style>

      #ball
      {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 200px;
        left: 100px;
        background-image: url(ball.png);
       }

    </style>

<div id="ball" />

    <script type="text/javascript">

    // Global variables

      var boardWidth = window.innerWidth;
      var boardHeight = window.innerHeight;

      var ballHor = boardWidth / 2;
      var ballVer = boardHeight /2;

      var changeHor = 10;
      var changeVer = 10;

    // Get ball information.
    var myBall = document.querySelector("#ball");

      // Function called on page load.
      function playBall() {

        // Play the game until the ball stops.
        gameLoop = setInterval(ballMove, 16);

       // Output to debugger.
        console.log("The page is loaded.");

      }

      // Move the ball.

      function ballMove() {

        // Changes are calculated but do not
        // take effect until next time through loop.

        myBall.style.left = ballHor + "px";
        myBall.style.top = ballVer + "px";

        // Calculate new vertical component.
        ballVer = ballVer + changeVer;

        // Top hit, reverse direction.
        if (ballVer + changeVer < -10)
          changeVer = -changeVer;

        // Bottom hit, reverse direction.
        if (ballVer + changeVer > boardHeight - 10)
          changeVer = -changeVer;

        // Calculate new horizontal component.
        ballHor = ballHor + changeHor;

        // Left edge hit, reverse direction.
        if (ballHor + changeHor < -10)
          changeHor = -changeHor;

        // Right edge hit, reverse direction.
        if (ballHor + changeHor > boardWidth - 10)
          changeHor = -changeHor;

        }

    </script>
</head>

<body onload="playBall()">
</body>

</html>

The code (unlike Gaul) is divided into 5 parts:

The HTML5 shell, which just sets up the document for Firefox OS.
The CSS definition, which defines the ball.
A div element, which gives the ball a place to live.
A script, which will set things up, create a game loop, and move the ball.
The body, which loads the script named playBall.

Here's what the ball looks like on my ZTE Open:

It is purple and bounces. The ball is a 20x20 bitmap with transparent edges. It's really a square but is pretending to be a circle.

An interesting thing about the bitmap is that it is in the same folder as your manifest and index.html files. You don't need to tell the manifest to bring it along, it magically grabs the file referred to in the CSS url section and knows where it is. Firefox OS makes it so easy.

Here's a brief description of the parts of the app:

All Firefox OS apps must have an HTML5 code structure. In this case, I've made sure I have a head and a body, and I've set the charset to UTF-8. Titles are good too.
Next I set up the CSS definitiion of the ball. CSS is a markup language that is pretty easy to learn. In this case I've just created something called "ball" that has width, height, position type, top, left, and background image defined. The background image is defined by a bitmap called "ball.png."
Next I created a simple div element. Interestingly enough, I put it in the head, because its location is defined by the CSS style (width = 200px, height = 100px). The div has an id and the CSS defines what the element with that id is.
Next is the script part, which is called from the body when the page loads. The script just defines some global variables and then used querySelector to grab the ball as an object defined by CSS. The ball is ready to be bounced around. Note that "#ball" refers to the div with the id of "ball" that is defined CSS. But the ball is now accessed through "myBall" to give it full JavaScript access. This is that perfect marriage between HTML (the div), CSS style, and JavaScript that means you don't need anything else like Canvas or SVG.

After the globals and the querySelector, the script contains two functions: playBall and ballMove. The playBall function sets up a game loop that will repeat every 16 milliseconds, which is a magic number that seems to work with most browsers. The loop repeats and each time through, it calls ballMove, which ... moves the ball.

Actually, the position of the ball is calculated the first time ballMove is called and then the next time it moves the ball. This is weird but seems to work well. The calculation just adds a fixed amount (10 pixels) and then sees if the ball can go there. The ball has a direction it is already going (ballHor and ballVer). The important part is that checks are made to see if the ball will go out of bounds. If it does, the direction will change and the next time through the ball will be moved to a new position. This may seem a bit goofy, but it works. Note that I subtract 10 pixels to account for the amount the ball moves each time it moves.
Finally, the body just simply calls the playBall function when it is loaded.

All this is in less than 100 lines, but you now have something that actually does animation. Note that if you test this in any browser, it will bounce to the edges no matter how big or small, and that this works just fine in Firefox, Chrome, and Internet Explorer. I gave up trying to test Safari, but this should work there. But between you and me, we only care about Firefox!

Let me know if I've not explained things. I'm assuming you know intermediate HTML5, CSS, and JavaScript, but I may have skated past some thing too quickly. Working with CSS is quirky sometimes because you have to reference objects very specifically and you have to keep each one of the three marriage partners (HTML, CSS, and JavaScript) happy.

Friday, October 25, 2013

Sketchbook Squad (Game Review)

Can you say "Doodle Jump?" Can you say "Scribblenauts?" I wondered if Sketchbook Squad might have something to do with sketching.

Well, it doesn't. You just jump ever higher and grab sketchbooks on your way off. But maybe I just expect too much.

So, like Doodle Jump, you just start at the bottom and jump until you ... die!

Here's the splash screen:

So far, maybe it is still about sketching. But no Help button. Maybe a tutorial is coming?

When you press Play! you get:

Yup, it's Doodle Jump! How does this play? Well, you are always moving and bouncing up and down. If you hit a platform, you bounce back up again. Your goal is to move the little guy so that he will jump up to another platform.

But, the touch seems not so responsive. Most of the time I get a few platforms up and then fall off to my death. If I get a sketchpad (little red notebook), It is way too easy to die!

Here's my death:

Because the touch is so unresponsive, it is too easy to die. So I can't even tell if there is anything more or how high the levels go. I watched a video of an Android version and it looks like you can get things like sketchbooks that give you a rocket boost and maybe more.

I haven't had any other touch problems with other games on the ZTE Open, so I'll be curious if others have been able to get this to work. Or maybe I'm just clumsy?

This game is on Android and iOS and you can see a video of it here:

STOP!!!

I played around a bit more with this and found that it isn't touch based at all. Maybe that's a problem of not having a Help screen. This is actually a very cool game but when I thought I was touching, I was actually tilting the screen. This is a motion-sensor game and it works perfectly.

Tilt left and the guy tilts left. So who needs touch?

It is still pretty easy to die, but the controls work perfectly, the art is fine, and the game has a good play factor. So the lesson here is keep playing and maybe you'll figure it out. The game is good, Orange Pixel, but I really would have liked to see a tutorial or directions so I didn't guess wrong and think it was touch based.

But, this game introduced me to the Firefox OS Accelerometer and I'd like to play with it. There's some documentation and sample at https://developer.mozilla.org/en-US/docs/WebAPI/Detecting_device_orientation and it looks pretty cool. And Sketchbook Squad opened the door to me, so I'll forgive them for their lack of a Help screen and give them a 5. So who needs a finger?

Cost: Free

Genre: Puzzle
Score: 5 (out of 5)
Tested on: ZTE Open (Firefox OS)
Get it at: Firefox Marketplace

Thursday, October 24, 2013

How Big Am I? (Game Programming)

My review of Candy Crush made me think that one of the first things I want to do is see how much room I have in my new house (the ZTE Open Firefox OS phone). Often games need fixed sizes, and it is a good idea to know how big your screen really is. The Candy Crush guy had a great game, but it was a little too big for the phone.

If your app is mainly text based, you can just let the type flow wherever it wants. But games almost always need specific items in specific places. So it is important to know exactly what size your game board is!

I wondered about this, and so I wrote a small app and found some answers.

I used the innerWidth, outerWidth, innerHeight, and outerHeight properties of the HTML DOM window object. This is supported in Mozilla, so we know we are good to go: https://developer.mozilla.org/en-US/docs/Web/API/window.innerWidth.

Here's what these properties do:

innerWidth = width of the viewport (not including scrollbars and chrome)
outerWidth = width of the whole window (includes scrollbars and chrome)
innerHeight = height of the viewport (not including scrollbars and chrome)
outerHeight = height of the whole window (includes scrollbars and chrome)

Chrome is not a browser name; here it means the stuff that surrounds the actual content of your page. Usually there is more chrome at the top and bottom (menus, notifications, etc.). You care about the inner parts because that's where your game takes place.

So I wrote a web page that looks around from the inside and tells us what it sees.

<!DOCTYPE = html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
height=device-height, user-scalable=false;">
<title>Hello Firefox</title>
<script>
w = window.outerWidth;
w2 = window.innerWidth;
w3 = w + " " + w2;
h = window.outerHeight;
h2 = window.innerHeight;
h3 = h + " " + h2;
howBig = w3 + " " + h3;
alert(howBig);
</script>
</head>
<body>
<h1>Hello</h1>
<p>This is a hello page.</p>
</body>
</html>

Most of this is straight HTML5 stuff. Firefox OS likes UTF-8 so I put it in.

Next I added the viewport information. That just tells the page to make the page the same size as the device width and height, and won't let the user modify the page size. We want our window to fit snugly into the screen of the ZTE Open.

Next, I wrote some simple code that gets the inner and outer widths and heights so I could see what happens.

So then here comes the cool part. I ran this code in the Firefox OS Simulator and here's what I got:

What this tells me is that the inner width and height in the simulator is 320x460. There's chrome at the top and bottom, but not that much.

Next I pushed it to the ZTE Open and took a screen shot:

As you will notice, the inner height and width on the ZTE Open is the same as the simulator: 320x460. However, the chrome is a bit more. The width is an additional 26 pixels but the height is a less because there isn't the Firefox browser chrome that the simulator uses (that's the part that says "Firefox OS Simulator" in the first screenshot and has the three buttons at the top right).

The point of all this is that the simulator still tells you the inner dimensions of the screen on the phone (320x460) which is what the specs say. But this is the inner screen dimensions and corresponds to the viewport size. So when designing your app for Firefox OS, make sure you check what screen real estate you have. Especially as new phones and tablets come out, find out what room you actually have.

Why? Well, if you know how big something is, you can juggle things around to make them fit. When Android and iPhone came out, their screen sizes were "standard" but they quickly changed as various new phones came out with different sizes. Checking this out will make your life easier!

My two favorite sayings for programming are:

Trust No One

and

The Truth is Out There

Both from the X-Files, but they apply to programming. You must test everything yourself and never assume that something written is true. But, on the other hand, if you search long enough, you'll get the right answer.

Maybe one of the best reasons to play around with this is that you can write the same app for the Firefox OS phone and have your app run in a Firefox browser. And maybe if we're very good little children, we'll get to play with a Firefox OS tablet.

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

Blocked Car (Game Review)

I remember seeing earlier versions of this basic phone-type game on a Pocket PC. It was cool then, but in this case, maybe only okay.

This version is called Blocked Car and is brought to you by those busy people at DS Effects, who are a leading (according to them) producer of web and mobile solutions. They do games, virtual pets, and "dress up."

Here's how it works. You have a yellow car (at the bottom) and you want to move your car to the top and out of the parking lot. A world-wide problem, if ever there was one.

You move some of the other cars and trucks out of the way by flicking them. Here's after I've flicked a few cars out of the way. The two red cars, the blue on the right, the green on the right. Note that I've moved the purple-cab truck to the right, making space for the yellow car.

Finally, when enough cars and trucks are flicked out of the way, the yellow car can escape!

This is a simple game. Lots of levels, everything works. Good!

However, I had some problems at the start, some of which were me and others were the fault of the developer for not having good (or any) instructions. One point off!

Problem 1: In earlier games like this, the other cars can only leave through the one exit. But they can move back and forth. In this game the cars can leave on any side, and once they start moving, they can't stop and just move off the parking lot. In some ways this isn't as much a challenge, but that's okay and I don't want to take points off for having this game play differently than some earlier one.

Problem 2: I have trouble telling which way the cars move. For some reason, I couldn't get the idea that the eyes are in the front of the vehicle, maybe because the rest of the car is visually catching my eye. Again, no points off. Maybe I just need to watch the movie, Cars, a few more times!

Problem 3: There's no button that lets me replay a game. If I want to go again, I have to ram the yellow car into an obstacle. It would be nice to choose to play levels again, and this wouldn't be hard to implement. One point off here!

These problems aren't killer, but they do make me not rate the game as high as I would like. This is a nice little game and works well on Firefox OS!

Cost: Free

Genre: Puzzle
Score: 3 (out of 5)
Tested on: ZTE Open (Firefox OS)
Get it at: Firefox Marketplace

Wednesday, October 23, 2013

Pushing Your Game to Your Phone (Programming)

Earlier this month I wrote about how easy it was to create a Firefox OS program at http://firefoxosgaming.blogspot.com/2013/10/firefox-os-easier-than-before.html.

I should have added another step, which is also very easy. Putting your app on your phone.

Here are the steps.

Write your app.
Connect your phone to your PC with a cable.
Fire up your Firefox OS Simulator.
Make sure your phone allows remote debugging*.
If all is well, the simulator should say Device Connected.
Click on the Push button.
That should do it.

You should see your app icon on one of the screens that shows which apps are loaded.

HOWEVER, if you have a ZTE Open phone (or maybe something else early), you may need to reboot before you see the icon. I'm sure this will be fixed and this isn't a problem if you are downloading apps from the Firefox Marketplace.

Here's my beautiful app sitting next to other (better) apps:

My app is the light blue at the lower left that is titled "Hello FFOS" and has the word "Hello!" written on the icon. Pretty cool, huh?

Soon, maybe, an app that I can push to the Marketplace. But first I need to build one and you can watch me (and tell me I'm doing it wrong).

Monday, October 21, 2013

Steel Story (Game Review)

While playing Steel Story, I had a sudden insight. Even though they don't play exactly the same, Steel Story has some similar concepts to tower defense games. Most tower defense games set up gun turrets alongside a path, bad guys come down the path, and (hopefully) your turrets blast the bad guys before they get to your home. I reviewed Age of Barbarians which I felt was a very well done but typical tower defense game. Plants vs. Zombies is probably the most well-known tower defense game.

But on the surface, Steel Story is a physics puzzle game, where you must place certain items, watch them fall, and if you placed things right, avoid bad things. Sort of like you were the pigs and you had to build your house so the angry birds couldn't get you (great idea for a game). But in reality, they feel the same. You do something, you wait, and you see the results of your actions. Different from arcade games, shooters, etc.

Well, Steel Story is a story about protecting cute little robots from a big robot that's trying to hurt them by squirting water at them. But it has the best help I've ever seen, especially for writing games to be played in non-English-speaking countries (which includes a large part of the Firefox OS world).

Instead of telling you, they show you with a cute two-page cartoon sequence.

Here's the first page:

You see robots in a factory with an boss robot telling the little robots what to do and feeding them oil. All is well.

But, a pipe burst!

The boss robot is hit with water and it drives him crazy and the robots run away, afraid of the water.

But the confused boss pursues the little robots and spits out red water balloons. Your job is to help the cute little robots by dropping a few well-chosen objects from above. The objects bounce around and your goal is to have the objects cover the little robot so the water balloon doesn't hit them.

Here's an example:

The boss robot is moving from left to right across the top of the screen. I've dropped two wheels and a triangle in such a way that the falling water balloons won't be able to hit the little robot at the bottom left (above the left gear). Different screens have different layouts and objects, and the puzzles are sometimes tough. Essentially I had to try different techniques until something worked.

So, Steel Story is a puzzle game, a physics game, a water balloon defense game, and in general fun. The art is really great and the help is really smart. This is an example of a nearly-perfect game that will keep you amused on a phone. Each round just takes a minute, but that's what phone games are all about.

Made with a modified Box2D game engine and another framework called Squire (created by the Steel Story creators, True-Token). Squire looks interesting as a game engine and they have a bunch of cool examples at http://true-token.com/squire/demos/.

All, in all, a great little game showing off the power of HTML5 and what can be on Firefox OS!

Cost: Free

Genre: Physics Puzzle (or Balloon Defense)
Score: 5 (out of 5)
Tested on: ZTE Open (Firefox OS)
Get it at: Firefox Marketplace

Thursday, October 17, 2013

Problems with ZTE (Hardware Review)

Interesting blog from Rephael Martinez on his problems with the Firefox OS ZTE Open phone: http://opensauces.wordpress.com/2013/10/16/my-journey-with-firefox-os/

Essentially he bought an early ZTE Open, it didn't work for him, he bought another one later, and that had problems too. Bummer!

So far I'm happy and maybe lucky. My phone works (as a phone) and I'm having fun playing games and talking about them.

Yes, I sometimes need to reboot, but the ZTE Open reboots faster than most other smartphones I've owned (and I've owned almost all of them: Palm, Windows Mobile, Windows Phone, iPhone, Android).

I like the ZTE Open because:

It is a Firefox OS phone. I tried to order a Geekphone but they were always out of stock.
The phone works.
The battery has a fairly long life.
It has enough games to keep me happy.
And ... the development environment is the easiest I've ever seen!

But your mileage may vary!

If you have had experiences either way with a Firefox OS phone, let me know though a comment or email. Thanks!

Fruit Quest! (Game Review)

Sometimes you're the bug and sometimes you're the windshield. In this case, the bug hit the windshield, bounced off, flew back again, and got smashed up pretty good.

With a name like Fruit Quest!, I wasn't sure if this was about slicing fruits, a slot machine, or three-in-a-row. I think it is a match-three game, but I don't know.

Strike 1: When the game booted up, it wanted me to log in to Facebook. With no option otherwise, So I thought about it, and said okay, and then went through a series of dialogs. At least they were nice enough to ask if I would let them post to my Facebook and I said no!

Strike 2: But then, when I was finished doing all that, this is what came up on the screen.

And that's all I got, no matter what. So my guess is that this game wasn't targeted at Firefox OS Phones and isn't responsive to the ZTE Open phone screen size. I haven't had this problem before with a game, so I don't know the story.

All I know is it didn't work. This game looks like it is also available on iOS and Android, but it isn't quite ready for prime time here, even if it is in the Firefox OS store.

Strike 3: It looks like it is free but on the other platforms, it looks like it is free but they'll offer you the choice of paying more if you want to continue playing. I know that's a big trend, but I don't like it. I'd much rather have a trial and then pay if I want the full version!

So three strikes, and I think this means I have to rate it as a 0 (zero) because it didn't work, it forced me to add them to my Facebook, and I don't like the idea of having to pay while I'm playing (although I don't think you can pay for anything in the Firefox OS Marketplace anyway).

Cost: Free

Genre: Match Three
Score: 0 (out of 5)
Tested on: ZTE Open (Firefox OS)
Get it at: Firefox Marketplace

Wednesday, October 16, 2013

Screenshots (Game Programming)

I've been taking screenshots of games and such on my ZTE Open Firefox OS phone and I thought I would share how I did it.

Well, it's easy and it's not. Once you the screen you want to capture on your ZTE Open phone, you have to push two buttons. Since you only have three (or four, depending on how you count the volume control rocker switch), the buttons you push are:

The HOME button
The POWER button

They both need to be pressed at the same time. I've found the best technique is to put the phone on a table, face up, and the long way. Then I put one finger next to the power button and another finger (from the other hand) on the home button. Then, I quickly push the power button and a split second later, push the home button. Sometimes I don't get it fast or slow enough, but if I'm successful, I'll get a notification that it worked. You may have to fiddle with this to get it to work for you. But when the buttons are few, you have to make them work overtime.

Next, I verify that the screenshot is in the gallery.

Then, I press on the gallery picture and choose the Send To option from the menu at the bottom of the screen. I choose email and send the picture to myself. Obvious tip: put yourself in your Firefox OS address book.

Another tip: my WiFi kept turning off before I could send the email to myself. The answer was to reboot the phone. Isn't it always the case? Reboot solves everything.

Finally, I receive the email on my PC as an attachment and add it to my post.

Voila!

Tuesday, October 15, 2013

Age of Barbarians (Game Review)

This game was a pleasant surprise for me. I had played a tower defense game a few years ago and didn't like it that much. Well, things are different for me and I'm more interested in games that aren't World of Warcraft (ha ha).

Age of Barbarians is a nice, well-done tower defense game that works. At first it was easy to play except I kept not doing so well, and then I tried again and got hooked after a few plays.

The goal of the game is to defend your village from barbarians (the cool guys with horns on their helmets). You have arrows and cannons and they have lots of barbarians (and some of them are on horses). Oh, and you have a spellbook, which makes it more interesting.

The directions were pretty good, and given in three parts:

Place buildings to protect your village. Here is where the strategy comes in, and the "just one more go" takes place and you try to figure out what to do. I put my towers near my home village and failed. You want to spread them out!

You have a path that the barbarians will travel on, and you build towers at certain spots along the way, using wood, stone, and other stuff. You can upgrade or make towers. Each time you survive a wave of barbarians, you get more building materials, so you can fight off larger waves.

But just to make the game more interesting, you get a spell book that can make the game more complicated. For example, you can get a spell that can make the invaders slow down. Click on the spellbook, click on the spell, click on the invading group, and they slow down! This adds more fun and I like it.

Here's an example, in the third village I'm defending. I have a main hut on the left edge, three smaller huts filled with archers, and three invaders who are about to be cut to pieces on the upper right corner.

The spellbook is on the lower right, the scores for how well you are doing is on the upper right, and if you hit the pause button at the top right, you can choose to replay, quit, or try a different village if you've unlocked it.

The game seems very well balanced and well thought out. The developers, Double Duck, have been around a year, but have created 40 games and prototypes, 100,000 lines of code, and shipped 26 games! Visit them at http://www.doubleduck.co/ They have released 5 games for Firefox OS and I'll be looking forward to the rest of their products. I think this is a perfect game and is the kind of game I want to see more of on Firefox OS: good game play, variety, helpful instructions, nice art!

According to their web site, they produced this game using Haxe, an open-source multi-platform game language (http://haxe.org/) and also CreateJS, both of which look very interesting and are impressive for producing a lot of games in a hurry! For now, myself, I'm most interested in playing games on Firefox OS and making games from scratch, but I know that many people are using all kinds of cool tools!

Cost: Free

Genre: Tower Defense
Score: 5 (out of 5)
Tested on: ZTE Open (Firefox OS)
Get it at: Firefox Marketplace

Putting Music on your ZTE Open Phone (Hardware Review)

I like to listen to music on my phone and the ZTE Open is no exception. But just dropping files onto the folder created when you connect your phone to a computer doesn't always keep the music information, especially not the cover art.

So I poked around, tried some tag editors, and gave up. But I found a solution that works for me and may work for you if you have the following functionality:

Windows - preferably Windows 7, not 8, not XP, but just plain Windows 7.
MP3 files (I tried some OGG files and I couldn't get tag editor to work)
Windows Media Player (it comes with Windows)

As you may guess, Windows Media Player 12 doesn't support OGG files. You can get a plugin to play OGG files, but it doesn't do the tagging and you can't sync it with your phone. But since most of my files are MP3, I'm good to go. If someone has a non-WMP player for Windows that works with ZTE Open, please let me know. Solutions on Mac and Linux are cool too, and I'll post them or you can add them as a comment.

So here's the steps.

First hook up your ZTE Open phone to a PC with a standard USB cable (little plug in the phone, big plug in a PC USB port). If this works, you'll see the ZTE OPEN as a drive in File Manager. The ZTE Open may ask you if you want to connect for remote debugging.

Get your MP3 files together. Make sure you have cover art. If you don't have it or don't want it, Firefox OS will make different colored abstract shapes which are cool too.

Load them into Windows Media Player and import an album. You want to do this from the Library pane of the Player. You get to the library by clicking on the boxes at the top right of the main player pane. Here's an album I imported from a video game soundtrack called Legend of Dungeon. Notice that it has the cover art, names of the album, artist, and a track list.

Note that the ZTEOPEN is on the left as a place where Windows Media Player (WMP) can find files.

Next, drag your album over to the right where the Sync tab is open. It should say ZTEOPEN Linux and show a bar indicating how full the ZTEOPEN is at the moment. After you drag it over to the right, you should see something like this:

Next you want to click on the "Start Sync" button at the upper right. It will chug along and you should see something like this:

The right side shows the status of the synchronization. I took this screen shot at 24% completed.

After the sync, your player should look like this:

It should say "Sync Completed". If you want to check, you can actually click on the ZTEOPEN menu at the left and open it to see the Music on the phone. At the top it says "ZTEOPEN > Music > All music" and I scrolled up so you can see that Legend of Dungeon is now on the phone and has the proper cover art, track list, etc. (By the way, I made an error and didn't rename the tracks. They say "1. Zombie" for the track name and I should have erased all the numbering on the track names because WMP keeps track of the track number (you can see it under #). Oh, well.)

Now, unplug the phone and open the music player on it. You should see something like this (if you have the same music -- unlikely!):

The Firefox OS player has four views which are on the menu at the bottom (from left to right):

Tiled view of all the music by album cover
Playlist view where you can select types of album (most played, recent, etc.).
Artist view - alphabetical with album covers
Album view - alphabetical with album covers (pictured above)

Once in a while I had a problem with the Windows Media Player recognizing the ZTE Open. Rebooting the player makes that work.

I'll look around to see if I can find another player that works with OGG. Or other formats. According to Mozilla, Firefox OS supports these file formats:

.mp3
.mp4, m4a (encoded with H.264 or AAC)
.wav
.ogg (encoded with Vorbis or Opus)
.webm (endoded with Vorbis)
.3gp

Every operating system and browser has a different list of files it supports, but almost everyone supports .mp3 and almost no one (except Windows) supports .wma. I'm not sure who supports FLAC. I've also heard that Firefox has problems with .wav files.

Stay tunes and let me know if you can get other music synchronizing to work with other players and operating systems. Keeping Firefox OS happy with cool music is certainly my goal!

Friday, October 11, 2013

Captain Rogers (Game Review)

When I saw Captain Rogers in the Marketplace, it jogged a recent memory. Oh, yes, the guys who wrote Captain Rogers had an article about their experiences writing the app and putting it in the marketplace.

You can read that first if you want in this tutorial: http://mobile.tutsplus.com/tutorials/firefox-os/preparing-for-firefox-os/

The tutorial is called "Preparing for Firefox OS" and has some good things to think about. The game itself was written by Andrzej Mazur (coder) and Robert Podgórski (graphics). The tutorial was written by Andrzej and covers subjects like moz-opaque, CSS Transform Scaling, and Nearest Neighbor Rendering. Also references a cool article on optimizing for Firefox games at https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/. Andrzej even includes a manifest and permissions code, which is useful.

He wrote a separate article about working with Clay.Io at http://enclavegames.com/blog/2013/07/26/captain-rogers-with-clay-dot-io-the-joyful-fun-of-leaderboards-and-achievements/

Also, he lets us know that the game was written using the game library, Impact.js at http://impactjs.com/. which has a cool game creation editor and I seem to remember a book on Amazon Kindle!

And if that wasn't enough, he's shared a big fat set of links to information about creating HTML5 games. You go, Andrzej!

It's nice when people share and I hope to do the same when I get further along the coding road. Right now I'm splitting my time between playing games and writing them. So back to playing games.

How does Captain Rogers play?

Well, it has a user interface I still can't get used to after several tries. The art is nice and the idea of flying through asteroids and picking up power pills is fun enough, but the game is designed for one finger tapping. Which isn't a bad idea, but the way it is done is hard for me.

Captain Rogers flies through space from left to right. This is a common space shooter style. The asteroids are moving from right to left and you must dodge them. The issue is that you tap to move your ship up and ... let go to move to move the ship down.

I'm not sure if I'm just not cool with up and down in space. What pulls the ship down when you don't tap the screen? Gravity? What makes it go up? A hidden thruster? The concepts seldom really matter, but I can't get the hang of it. My I can't aim well enough and die pretty fast.

So it didn't work for me and I can't even tell you if there are different levels or what happens when you get to the end. Even the game "A Space Shooter for Two Bucks." Had more entertainment value!

On the other hand, I applaud using a different control mechanism. Most phone space shooters use a variety of places you have to touch to make the ship turn, shoot, speed up, or slow down.

Wait! I want to shoot things!!! There's no bullets. I've been shooting things in space since the first Asteroids arcade game and it just seems unnatural to hop/limp out of the way of the dang things.

But the game may work for you. So I'm going to waffle and give the game a 3 for effort and I'll be curious if anyone finds this control mechanism useful.

The Help was a little crowded but when I went back to look at it after playing a bit, it made more sense:

The art is fun and cheery, but I still can't wrap my finger around it. But there's a big plus to this game which is that it is on Git Hub (where?) and there are other Captain Rogers games already http://m.blackmoondev.com/crkarmax/. So give the Captain a break because he's trying to share what he knows.

Cost: Free
Genre: Arcade
Score: 3 (out of 5)
Tested on: ZTE Open (Firefox OS)
Get it at: Firefox Marketplace

Thursday, October 10, 2013

ZTE Open Phone (Hardware Review)

I've had the ZTE Open phone in my hands almost a week and I'm happy with it. I had been trying to get a Geeksphone for months but they were always sold out. Then I saw that ZTE was selling a Firefox OS phone on eBay and NewEgg, I ordered one from eBay (cheaper and free shipping).

Here's what it looks like:

Here's the specs:

CPU 1.0 GHz Cortex-A5
Chipset Qualcomm MSM7225A Snapdragon
GPU Adreno 200
OS Firefox OS
Memory 512 MB ROM, 256 MB RAM
Support Micro SD Card, up to 32GB (No memory card include)
Screen 3.5" TFT 320 x 480 Pixels
TFT Capacitive Screen
Network 3G Network: HSDPA 850/1900
2G Network: GSM 850/900/1800/1900
Audio 3.5MM headphone jack
Supports MPEG-4 AAC (M4A), MP3, OGG and other formats
Video Supports H.264, MP4, ASP, WebM and other formats
Wlan Wi-Fi 802.11 b/g/n, dual-band
Camera Back 2 MP
Picture Formats Support JPEG, PNG, GIF, BMP and Other Formats
Dimensions 114 x 62 x 12.5 mm
Battery Li-Ion 1200 mAh battery

Package Include
1 x ZTE Open Firefox OS Mobile Phone
1 x Battery
1 x Micro USB Cable
1 x Charger
1 x personal hands-free headset (PHF)

My Opinion (so far)

I've owned several types of phones before and my initial impression was that it seems a bit similar to my iPhone 4. Round icons, swipe to left or right, one main button (no back button), and press on the background to float apps so you can move or delete them.

There's an app store and I'm busy loading up with apps and seeing what they have. Since Firefox OS is still new and still making big changes, I don't expect every app that I use on Android or Windows or Mac or Linux or iPhone or ...

In general it works, it didn't cost much, and I had a spare micro SD card and a spare SIM card.

You will need a SIM card for this phone. It is unlocked and you can't make a call unless you get a SIM card (standard size, like a postage stamp). You'll also need a micro SD card, but only if you want to store music or videos or pictures. There's also a slot in the back which I think will take micro SD cards, but I haven't tried it yet.

Problems

The phone doesn't feel as sturdy as my Galaxy Note II or my iPhone 4. But it is a lot cheaper, so I'm fine and so far I haven't broken it.

However, there is one problem that has surfaced, and that is that the updates from ZTE don't work and may even "brick" your phone, so don't do an update. I don't know where to check for the validity of updates, but I saw that these problems are mentioned on the Boot-to-Gecko mailing list.

But in general, I'm in love. I'll be reviewing games I get through the Marketplace and maybe even a few non-game apps that are cool.

Wednesday, October 9, 2013

Firefox OS Easier Than Before (Game Programming)

I tweeted a few months ago about building a simple Firefox OS app and it sure is easier than it used to be. When I made an app, it gave me weird errors I was told to ignore. I didn't have an icon (and I didn't have a phone either). But now here I am, and the steps are relatively easy to follow.

So, here they are. If you have problems with them, let me know. The Firefox OS programming documentation isn't bad except that there are pages done at different times and things have disappeared and other things have appeared.

The main link for developing is here: https://marketplace.firefox.com/developers/

I've done programming for Android, iOS, Apple, Windows, HTML5, and lots of others. But the startup costs for Firefox are still the lowest and easiest. You need:

1. A simple text editor. I like Notepad++ and the price is ... free!
2. Firefox browser. Again, free!

I needed an art program to make an icon and I had an old copy of Photoshop 6 lying around, so that wasn't free. If there's any interest, I'll investigate some free art programs.

So here are the steps to make an app that you can test in the Firefox OS Simulator.

1. Get Firefox! You probably have a version already, but it would be good to get the latest. I downloaded 24.0 just for this test and it works great. I didn't have any plugins, not even Firebug.

2. Next, download the plugin for the Firefox OS Simulator. Get it from here:

          https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-windows.xpi

     This is the Windows version but they have versions for Mac and Linux.
     Read all about it here:

          https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator

   Install it as an add-on extension.

   Then run it from the Web Developer menu and select Firefox OS Simulator.

     It should look like this:

3. Next prepare a few files. You will need to make the following:

a. A simple text file named index.html. This will contain your code.

b. A simple text file named manifest.webapp. This will contain information needed by the OS.

c. A not-so-simple icon art file that will have a picture of the icon for your app.

4. Prepare index.html. This is the start of your program but it is really a simple HTML5 web page.

Here is the code for your app. Change it around any way you want as long as it remains HTML5.

     <!DOCTYPE html>
     <html>
     <head>
         <meta charset="UTF-8">
         <title>Hello Firefox!</title>
     </head>
     <body>
     <h1>Hello Firefox</h1>
     <p>This is an application for Firefox OS</p>
     </body>
     </html>

All of this is standard HTML5 boilerplate and actually it is pretty much straight HTML except for the first line which is a command that tells the browser that this is an HTML5 program. It won't matter for your program, but when you expand, you'll want to take advantage of all the HTML5 goodness.

Oh, do put in the line about charset="UTF-8" since this seems important for some locales. You may know more about this than I do. I left it out and Firefox complained (good world citizen that it is).

5. Prepare manifest.webapp. This is a special file that is still just a text file. This tells Firefox OS about the app. Here it is:

     {
       "name": "Hello FFOS",
       "description": "Firefox OS gets better every day!",
       "launch_path": "/index.html",
       "icons": {
        "128": "/images/icon-128.png"
       },
       "developer": {
            "name": "Your Name",
            "url": "http://www.yourwebsite.com"
       },
       "default_locale": "en"
     }

This seems a little confusing, but just get all those brackets, quotes, and commas in the right place.

You should change the following text to match your own app:

name - the name of your app as it will appear when published

description - a short description of what your app does

launch_path - this is the place and name of where the OS will look when starting up your app.

(don't forget the / which is the root of your app)

icons - the name and location of your icon. I put it in a folder called images

developer - your own name and the location of your web site (not required but smart)

default_locale - I picked English but you may want to have another locale

Here's more about the manifest: https://developer.mozilla.org/en-US/Apps/Developing/Manifest

I've given you the minimum manifest that seems to work.

6. Make an icon. I had some trouble with this because I just made an art file that was 128x128 pixels and saved it as a PNG. It didn't work. Then I found this well-hidden page that explained:

http://www.mozilla.org/en-US/styleguide/products/firefox-os/icons/

At the bottom of a long page that explains some art terms I didn't know, I found that I could download some sample icons in Photoshop format (PSD). I had an old copy (Photoshop 6, older than you!) and used that. I tried Paint.NET and that didn't work, but I'll see if I can figure out more later.

The point is that the icon has to have a few pixels free around the edges and that the edges have to be transparent. So here is my icon, modified from the one in the Firefox styleguide:

This is 128x128 pixels with some room to spare.

7. Next, put all the pieces together in a directory. Call the folder whatever you want, but make sure you can find it later. I called mine hello.

Then put your manifest.webapp and your index.html files in the hello folder.

Then make an images folder inside the hello folder and put your icon file there. Mine was called icon-128.png and the manifest says it is in /images/icon-128.png.

8. Finally, start the Firefox OS Simulator and find the button near the top that says Add Directory. Click it and find the directory you made (hello). Inside that directory, click on manifest.webapp and the app will load.

If all goes well, you'll see a little window pop up with your new app:

That's it!

Give it a try and let me know if you have any problems. I'll update this if I find out more.