Tuesday, December 17, 2013

Bouncy (Game Review)

Bouncy is a perfect simple Firefox OS game. Not fancy, not from a big developer, not special art. But it ... bounces. Maybe the developer likes bouncing balls. My games have them too. Bouncy, written by Hebert Phillipe, is fun to play and challenging and doesn't feel like a rewrite of an iPhone game.

So when you touch the smiling pink-faced icon, here is what you get.


 Here aren't any instructions, but the Marketplace page says:
Bouncy is a platform game. Your objective is finish the levels, get points and unlocks new balls.
Fair enough, but I really want games to have instructions or at least pictures and diagrams. Well, on the other hand, the game is pretty obvious how you play. It's a platformer, and you just bounce from left to right.

Here's the select level screen, where you can choose the level you start with.


 Well, when I read that page, maybe this was written for keyboard use somewhere else. There is no A/Right or D/Left on the phone. All you have is your finger. But it's easy to guess that all you do is tap on one side or the other of the screen to move the ball.

Here's the opening game screen.


You'll notice your score at the top middle, three hearts on the left, a Pause button on the right, with a percent of how far you've gotten in this level. What you quickly learn is that the spiky bits will cause you to lose part of one of the hearts. Three hearts gone and the game is over.

The controls are simple. Tap on the right to bounce right. Tap on the left to bounce left (but watch out for that wall of spikes). In mid-air, you can tap again and jump higher. The important thing is to keep moving and get to the end of the level.

You get points for grabbing gold coins, and you bounce along happily. Any plumber would be right at home. But this game adds one more problem for you to solve.

The wall of spikes on the left are following you. If you don't keep moving right, the wall of spikes will get you.

Here's a later game screen:


The spikes are still following you. And there's one more problem. If there is a hole at the bottom (there's a small one in the middle and a large one on the right), you fall and lose part of a heart! Ouch!

And as you go along, the going gets rougher. This turns out to be a real game of skill and you'll have to be careful that you don't get mad and toss your phone out the window when you fall into the pit or the spike wall gets you.

Here's the beginning of the next part, where you have to jump very carefully.



Timing of your taps is everything. But if you like a game that is a challenge, this one has it.

You will, however, get familiar with this screen:


Also, this game is a great example of how to do an HTML platform game. You'll notice that the game is on a grid and that there are very few unique tiles. Because games on the phone have to compete for space, the more space you can save, the better.

I knock of 1 point for not having the rules, but the rest all works and is fun. I try and judge each game by what it attempts, how well it succeeds, and how much I like it. More platformers!

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

Monday, December 16, 2013

Son of HTML5 Audio Followup (Game Programming)

While most of the rest of HTML5 has grown up and is very capable (we're looking at you, Canvas), HTML5 Audio still seems to have some growing pains. It may be replaced at some point soon by Web Audio, but for now, HTML5 Audio works pretty well if you don't ask too much out of it except play an audio.



There are a few more nooks and crannies I've been exploring, namely the Audio object properties of loop and controls.

Loop simply plays the audio over and over again. This is ideal for game music you want in the background, but I'm still investigating what happens if two audios overlap each other. I'm working on that and that's one of my next tasks. But loop works! How it works I'll explain in a minute.

The other fun bit for today are controls. If you just play audio, you don't see anything in your user interface. If you want to give the user some control over the controls of your audio, you have two ways to go.
  1. You can display a set of simple controls that will let you play, stop, and show your progress. This is what I'll cover in this post.
  2. You can make your own controls and fit it into your application the way you want. I'll show this soon.
Here's what the controls look like in Firefox OS on my ZTE Open:



Note that the words "Audio Controls" are NOT part of the control. They are text I put in the web page just for fun.

This takes up a fair amount of screen space, so it may not be useful. And then again, it may. The controls show the current time (0:02 seconds), the duration (0:09 seconds), and graphically shows you where the song is at this moment. The user also can press the pause ( || ) button in the top center and the mute button on the right.

If you tap the mute button, it turns color. The music still plays but you can't hear it. It looks like this:


Perhaps of limited interest, but you might find a use for it, especially if you put it on a separate page.

But there's a little bit more you can do. If you can get at the Audio object, you can modify some of the properties of the visual controls.

For example, you can change the background color, indent, and width of the box.



Oops, that's not what it looked like on the desktop! Yes, the controls are narrower, but I don't think they are indented, and the red background is, um, not behind the controls, but above it.

Here's what it looked like on the Firefox OS desktop browser (nightly):


Indented, narrow, and reddish (actually red + gray). So there's some work to do here and I probably should file a bug (except that I'm not sure how many people want to have standard controls in Firefox OS). The main problem is that you can't really adjust the height, and the default is too big.

I don't exactly fault Firefox OS folks for not making this work. There are much higher priorities and there's a workaround. You can make your own controls (or maybe all you want is to toggle mute). I'll cover that next time (or soon).

So here's the code, similar to the code for http://firefoxosgaming.blogspot.com/2013/12/html5-audio-followup-game-programming.html.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>
      Loop & Controls
    </title>
    
      <script>

      // Global variables
      var myAudio;

      // Load the page.
      window.addEventListener("load",
        runFirst, false);

      // Runs when the page is loaded.
      function runFirst() {

        console.log("page loaded");

        // Create audio object.
        // We like OGG.
        myAudio = new Audio("oggsong.ogg");
       
        // Need this to see the controls.
        document.getElementById("myBody").
            appendChild(myAudio);
           
        // Show the controls.
        myAudio.controls = true;
       
        // Allow looping.
        myAudio.loop = true;
       
        // Use an ID to work with controls.
        myAudio.id = "controlID";

        // Change width, margin, and color.
        controlID.style.width = "150px";
        controlID.style.marginLeft = "50px";
        controlID.style.backgroundColor = "red";

        // Listen for fully loaded audio.
        myAudio.addEventListener("canplaythrough",
          processMyAudio, false); 
      }

      // The audio is ready to play.
      function processMyAudio() {
     
        console.log("audio loaded");
       
        // Event no longer needed.
        myAudio.removeEventListener("canplaythrough",
            processMyAudio, false);
       
        // Play the audio.
        myAudio.play();     
      }

       </script>
    </head>

    <body id="myBody">
      <p>Audio Controls</p>
    </body>

</html>


Looping

Adding looping is pretty simple. Just add this line:

        myAudio.loop = true;

If you want to stop the looping (but not stop the audio playing), set loop to false.

Controls

Setting the controls is a little bit more work. The first part is easy:

        myAudio.controls = true;

But that won't work by itself. To make the controls visible, you must attach the control to the web page by this time-honored technique:

        document.getElementById("myBody").
            appendChild(myAudio);


This just attaches the myAudio object to the body of the web page. If you are just playing audio invisibly you don't need to do this. To display, all objects must be attached somewhere to the page.

Then, to modify the controls, you need to do one other thing, which is make an id for the audio control. This lets it be styled by CSS. Here's what you need to add:

        myAudio.id = "controlID";

This just give the audio object an id named controlID. It can be named anything as long as it doesn't conflict with any other names.

Now your control can be stylin'. Just add these three lines:

        controlID.style.width = "150px";
        controlID.style.marginLeft = "50px";
        controlID.style.backgroundColor = "red";


The width works just fine and could be very useful. The margin doesn't look like it works and the control is still centered. The background color is red, but not lined up with the control. "Oops" sounds like a good description here.

CSS to JavaScript

By the way, the sharp-eyed among you might have noticed that the syntax for background color is NOT background-color (like it would be in HTML), but is backgroundColor. When you move from the world of HTML tags to JavaScript properties, the wording changes slightly. It's maybe like switching from Spanish to Portuguese, where you can figure it out, but you don't want to make a mistake. I found a great page that has a great table comparing CSS property names to JavaScript references (properties) by Aaron Hancock at http://noobflash.com/set-style-dynamically-with-javascript/.

So stay tuned (but not iTuned) for more about audio as I dig deeper into this surprisingly mysterious world. What ever happened to the happy simple assembly language for MS-DOS that just produced a single beep?

Beep     PROC USES AX BX CX
    IN AL, 61h  ;Save state
    PUSH AX 
    MOV BX, 6818; 1193180/175
    MOV AL, 6Bh  ; Select Channel 2, write LSB/BSB mode 3
    OUT 43h, AL
    MOV AX, BX
    OUT 24h, AL  ; Send the LSB
    MOV AL, AH 
    OUT 42h, AL  ; Send the MSB
    IN AL, 61h   ; Get the 8255 Port Contence
    OR AL, 3h     
    OUT 61h, AL  ;End able speaker and use clock channel 2 for input
    MOV CX, 03h ; High order wait value
    MOV DX 0D04h; Low order wait value
    MOV AX, 86h;Wait service
    INT 15h       
    POP AX;restore Speaker state
    OUT 61h, AL
    RET
BEEP ENDP


Why doesn't JavaScript have a beep() command? Next they'll take out blink()!

And why doesn't Blogger let me insert smiley faces?


Saturday, December 14, 2013

Cupcakes vs Veggies (Game Review)

The underlying premise of this game is that sweet treats are good and vegetables are bad. Ardent vegetarians can sent protests of email to TreSensa, but even if you like vegetables, you might want to play this game because it is a great game for phones, and delivers perfectly for Firefox OS.

Here's the opening screen. You can see we're dealing with sugary treats!



You can choose to play, shop, look at your achievements, and get some tutoring. It is always a good idea to figure out how to play the game before you start (unless you just like to wing it -- some do and some don't. I usually like to bash away first and then see what I get).

The Help is excellent, with lots of fun and pictures. Here's the first Help screen:


What could be more simple than that. Eat cupcakes, don't eat veggies. And in fine print, it tells you that you need to click to eat. Well, we on Firefox OS don't click, we touch or tap. So bang on those cupcakes with your finger, and you'll need to tap fast! This is a very fast reaction type of game and would be a good way to wake up in the morning. And get good finger exercises all day long. And these cupcakes fly fast!

But TreSensa didn't want to make it dull. So they throw in perks you can get, as explained by this next screen:


For example, the Freeze snowflake will temporarily stop all the cupcakes so you can eat them easily. These things will fly through the air and if you're fast, you can catch 'em.

But if you're not fast and you need some help, they've got a plan just for you.


Eating cupcakes makes you rich! (And you thought it just went to your waistline.) You want to accumulate gold! Gold lets you buy ways to make things easier. And you can buy gold with real money!

Here's the exchange rate:



And here's what those tokens will cost you in real money: you can buy 10 tokens for $0.99, 50 tokens for $4.99, and 100 tokens for $9.99. And remember, each token is worth 10,000 gold. And what is it worth? Well, very early on, you can buy Freeze Flakes for 100 gold. And other items are priced accordingly.

So they can give away the game for free and let you buy your way to the top. Of course, you don't need to ever buy, because the real point of the game is to see how fast you can eat those cupcakes and NOT eat a vegetable.

Now that you're completely confused, here's what the game looks like:


A cupcake flies up from the bottom of the screen. You have to tap on it before it falls back down again.

Here's another.


The cupcakes fly fast and furious, but you must not ever click on a vegetable. If you do, you'll get a big YUCK. And if you don't get all the cupcakes, you'll get a big DON'T WASTE FOOD!

And at the end of each level, you get an update on where you are:


And something to keep in mind: "A dropped cupcake is a dad cupcake." One of the things that makes this game outstanding is the whacky sense of humor that comes through in the theme, the art, and even little slogans about sad cupcakes.

And as well as a sense of humor, there's a real challenge. This game makes you be on the alert every moment. Cupcakes look different, vegetables are not cupcakes, and various perks add up to a fast-paced game of speed and skill that will make you want to try again.

TreSensa also makes an HTML5 game engine and I'm curious how it works and compares to others. But their engine clearly works and these guys know how to put together an HTML5 game. The art is great, the play is flawless, and they have a sense of humor.

The game is hard, in the sense that you have to move fast, but there's a place for that in the game world. Some like it fast, some like it slow. I like this game and it delivers well on all fronts.

Maybe their next game will be made for vegetarians, and you must choose between brassicas and nightshades. But until then, this game will keep you occupied.

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

Thursday, December 12, 2013

HTML5 Audio Followup (Game Programming)

I'm still deep into HTML5 Audio programming as it relates to Firefox OS. I ran into some interesting problems and filed bug 949129 to make sure I'm not crazy. I'll be working on some work-arounds for the problems I'm seeing so you can still use audio in your games.













This post will cover a few things more I've found, in random order.

Audio Codecs

André Jaenisch pointed out that I didn't explain that MP3 and OGG are not lossless. This means that when the audio file is created, some of the bits are removed so that the file size is smaller. A popular format for lossless audio is FLAC. But this blog is all about Firefox OS gaming and right now, FLAC is not supported. As a matter of fact, MP3 is not supported either.

The original non-lossy formats were WAV (Windows) and AIFF (Apple). There might be an original Unix/Linux format (AU?)  but I've not used it. WMA (Windows), AAC (Apple), and MP3 (Fraunhofer) all use compression to make file sizes smaller, but still sound pretty good. Somewhere in the middle is the open-source FLAC, which uses compression but doesn't lose any quality and is considered lossless.

MP3 is an interesting issue for Firefox. For a long time, Firefox didn't support MP3 directly unless your operating system had already set up support. Because of this, when programming audio for the Firefox browser, you had to make two files, one MP3 and the other OGG. And for other browsers, you might have to add in an Apple codec (but we don't speak Apple here). You can read about Firefox support at https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats, but keep in mind that this is a moving target.

Very recently, Mozilla announced that they will support MP3 and pay the fee. MP3 costs money right now, OGG is free! The good news is that the MP3 patents will expire in a year or two.

Why does all this matter? If you have your music in MP3 and you convert it to OGG, the lossy audio will become more lossy. Right now, the music I download onto my ZTE Open will play even if it is MP3, but if I want to write a program in HTML5, my best bet is OGG. Firefox will let you program a WAV file, but the WAV file size is larger than OGG or MP3, and for a phone, you always want the smallest of everything.

So the point is, if you are making music for the Firefox OS, create your original file in WAV format (or one of the Apple formats), but at some point, convert it to OGG. But save your original file (lossless) so you can convert it later if you want to program with MP3.

My own personal guess is that OGG will be supported in Firefox OS for a long time, so its a safe bet. WAV is supported, but large file sizes will make it a poor option for phones and tablets. MP3 support will be soon, and I wouldn't be surprised to see in the future support for Apple's AAC, which is catching on fast (because it has smaller file sizes and better fidelity than MP3).

And don't forget, OGG is open source and very cool!

So if you think HTML5 audio is confusing, wait until you get to HTML5 video! But the answer is to start working with Web Audio (not the same as HTML5 Audio) which is supported. I'll be poking into that soon, but there's more pressing matters.

Oh, and I misspelled the cool audio workstation Ardour. Sorry, guys. Get it at http://ardour.org/

Globals

According to many wise JavaScript gurus, you should avoid globals. However, I find that I need them to make things simple for small game demos. So in the recent HTML5 Audio post at http://firefoxosgaming.blogspot.com/2013/12/html5-audio-game-programming_10.html,  I had this global definition:

      // Global variables
      var myAudio;


I don't assign it anything yet, because I need to wait until the page loads. This variable is used for the audio object and gets created in the audio constructor here, but only after the page loads:

      myAudio = new Audio("oggsong.ogg");

When working with objects and loading things, you always want to make sure that you know something is loaded before you use it. But also, in this case, if you don't make myAudio global, the function processMyAudio won't know where to find it.

And as part of the making sure, processMyAudio doesn't get called until canplaythrough tells us that the audio is now loaded and ready to go!

If you do these things without some of the safeguards, things might work or they might not. But you want to be sure. But if you don't make myAudio global, the music won't play. Using JavaScript functions is cool, but you want to make sure that everything inside the function can be used.

You can rewrite this program to avoid globals and pass things through function calls, but for now, I want to keep everything as simple as possible. If you want to know more about why globals are evil, check out JavaScript, the Good Parts. The book is difficult but worth reading several times, and I don't always agree with the author, but he clearly knows what he's talking about.

Here's a great picture of the two best books on JavaScript:


The thin book on the left is Crockford's JavaScript: The Good Parts. The thick book on the right is called JavaScript: The Definitive Guide by David Flanagan. Read both and you'll know most of what you need to know. Make sure you get the latest edition of Flanagan, because it gets updated every few years. Note the size difference of the two books, but there's lots of good parts in the bigger book also.

Firefox OS Simulator

The Firefox OS simulator (available to your Firefox browser as a plug-in) is really valuable for debugging audio. Something that runs just fine in the desktop browser may not work on the phone. Why do I bring this up?

If you use MP3 in the Firefox desktop browser, all works well. But not on the phone. If you use OGG, your audio works in the simulator. Before audio, I barely looked at the simulator unless there was a sizing issue, but for audio, it's crucial that the sound works at the simulator level.

What Might Not Be Working

I was surprised to see that two of the audio object's properties, duration and currentTime didn't work in Firefox OS when they work just fine in desktop Firefox. I haven't read all the browser source code yet, but I filed a bug 949129. You can check it out at https://bugzilla.mozilla.org/show_bug.cgi?id=949129. You can read my test code there.

By the way, if you find any kind of bug, make sure you can reproduce it, and file it at Bugzilla. Remember, YOU are Mozilla. Make it better and bang on it today. Especially with Firefox OS, which is still young and growing.

I'll keep you posted.

Next

I'm working on a work-around for the lack of currentTime. I'll also do some short code samples for loop and controls. And there's a sample game I want to get on to next, and maybe some game engines, and oh, yes, more game reviews. And vibration and tilt and oh, the list goes on forever!

Wednesday, December 11, 2013

True Token Wins Best HTML5 Game at DevGAMM 2013 (Game News)

I've reviewed two games from True Token, and both of them were great. And recently something greater happened to them!

The first was Steel Story and I reviewed it at http://firefoxosgaming.blogspot.com/2013/10/steel-story-game-review.html, giving it a 5 out of 5. A really cool little game about robots trying to escape deadly water. Excellent physics and a lot of fun.


The other True Token game I reviewed was Darwinism, and I gave that a 6 out of 5 because it was cool also, and a unique take on match-three games. You can read about it at http://firefoxosgaming.blogspot.com/2013/12/darwinism-game-review.html.


True Token does great games and they are fun and professional, a great addition to the Firefox Marketplace, and now they are winners!

At the recent DevGAMM festival in Kyiv, True Token won the award for "Best HTML5 Game"for Steel Story. In case you didn't go to DevGAMM, this festival was a game developer conference that had 1300 participants and ran December 7-8, 2013.


 Rovio of Angry Birds (below) and several other games companies were also in attendance.


They even had something called Speed Game Dating!


This sounds like a cool way for game developers to meet game publishers, and here is how it works:
  •     SGD will be held in the Lazure Hall and streamed into mobile and online sections
  •     The developers are be sitting at one side of the table – the publishers at the other.
  •     Each meeting lasts 3 minutes, then a signal is given to change the pairs.
  •     Standard Pass is enough for participation of indie developers (having a game to show is compulsory).
  •     Publishers need to have Premium Pass to register for the event.
  •     No admission for unprepared participants!
Very innovative!   

The game contest was part of the conference and had 145 game titles submitted in several categories. Here are all the winners (can you spot the True Tokens)?


Go Team True Token! Send them a congratulatory tweet at @true_token and download their games from the Firefox Marketplace. They have more games than the two I reviewed, but I will be reviewing all of them eventually. Maybe I can get to DevGAMM next year!

I was not only fascinated by this conference with such eager participants, but I was even more amazed that they had so many participants when at the very same time, in the same city, serious clashes were taking place between the Ukraine government and protesters. Luckily the protests were in a different part of the city, but gamers are so eager to meet with each other that they'd risk a trip to a place that is currently in the world news -- BBC news http://www.bbc.co.uk/news/world-europe-25328311.


One hopes that all will be well in Kiyv soon!

Game designers have courage and determination, good qualities to do great games. Congratulations, True Token, one of the bright stars in the Firefox Marketplace!

Tuesday, December 10, 2013

HTML5 Audio (Game Programming)

HTML5 Audio has been around forever, or at least as long as HTML5. There's something new called WebAudio that has a lot more features, but HTML5 Audio lets you play a tune for your game. I'm exploring HTML5 Audio and I'll share what I find as I confirm what works in Firefox OS.


There are a lot of twists and turns in the audio field. You have to create your music somehow and then make sure it's in the right format. Some of this is changing in Firefox, but here's what seems to work best. Encode your audio in OGG.

What the heck is OGG? Well, you probably have heard of MP3 music and OGG is like MP3 but is open source and not proprietary. Both MP3 and OGG compress your music to make it smaller without losing any of the quality of the sound. OGG lives at http://www.vorbis.com/. You don't need to understand OGG, you just need to save an audio file to OGG if you are creating it, and convert music files to OGG if you have it in some other format like MP3, WAV, or WMA. A great open source tool for converting audio is Audacity, which lives at http://audacity.sourceforge.net/ Audacity has been around forever and is really a great piece of open source free software.

I'll be working with audio as part of my blog, so I'll just say the tools I like. I've used a lot of audio tools over the years, but right now here is my tool chain.

  1. Create audio in EnergyXT. This is an inexpensive audio workstation that I like. You can create music pretty easily with it and there's lots of help and tutorials. Find it at http://www.energy-xt.com/. It is on sale for €39. Available for Windows, Mac, Linux, and iOS.
  2. Right now I'm having fun with Chip Tune Music and my favorite software instrument is ChipSounds at http://www.plogue.com/products/chipsounds/. Not cheap at $95, but there are lots of open source and/or free chip tune instruments. The basic idea is that you add instruments or pre-made loops together to make a song using a workstation like EnergyXT. There are plenty of other workstatons and tons of instruments and loops. For more info on creating music through software, check out http://www.kvraudio.com/. And while you're at it, read Computer Music magazine at http://www.musicradar.com/computermusic/. Music software makes it easy to create music because you can create music bits and combine them together.
  3. Sometimes I like to combine bits of music I've created in a program that let's me work with several tracks. I like Adobe Audition because I've used it a long time and I use an old version, so you might want to look around. The new Audition is expensive. But I use the old one. I've been meaning to look at Ardor, which is a very cool open source alternative. http://ardour.org/
  4. And as a final step, I run all the combined tracks through Audacity to tweak and convert. My old copy of Audition doesn't know about OGG. But if you want to work with Firefox OS, you'll want to make OGG your new BFF.
So enough about making music. Make it OGG and be proud of open source!

I wrote some simple code that just plays an ogg file. Here it is:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>
      Simple Audio
    </title>
      <script>

      // Global variables
      var myAudio;

      // Load the page.
      window.addEventListener("load",
        runFirst, false);

      // Runs when the page is loaded.
      function runFirst() {

        console.log("page loaded");

        // Create audio object.
        // We like OGG.
        myAudio = new Audio("oggsong.ogg");

        // Listen for fully loaded audio.
        myAudio.addEventListener("canplaythrough",
          processMyAudio, false); 
      }

      function processMyAudio() {

        console.log("audio loaded");

        // Play the audio.
        myAudio.play();
      }

       </script>
    </head>

    <body>
    </body>

</html>


This code is pretty simple. Use these steps:
  1. Make a global variable for your audio object.
  2. Wait until the page loads.
  3. Create an audio object and give it an audio file to load.
  4. Wait until the audio file loads.
  5. When it loads, play the audio!
You'll notice a pattern that is often useful. Load something, set an event handler to wait until it loads, and then use it. Because we're working in the mysterious world of browsers, you can't always know when exactly something will load or in what order. Especially if you're loading something from a server or something is slow, like a big file.

Creating the Audio Object

Here's the bit that creates the audio object.

        myAudio = new Audio("oggsong.ogg");

This is going deeper into the DOM and is called a constructor. It makes an object and initializes it with the name of an audio file. This is assuming that your song is in the root directory as defined by the app manifest. Specify the folder in the constructor; you don't need to tell the manifest where the audio file is, it will just pull it in the same as an art file. Always make sure that you use the .ogg file extension (and that your file is OGG based.

Waiting for Audio

Here's the bit that waits for the audio to load.

         myAudio.addEventListener("canplaythrough",
          processMyAudio, false); 


It sets up an event listener that is waiting for the canplaythrough event to take place on the audio object.  The event is fired when all of the audio is loaded. Read more about it on the new-and-improved truly beautiful Mozilla Developer Network page at https://developer.mozilla.org/en-US/docs/Web/Reference/Events/canplaythrough. No, it isn't an special rule for golfers.

Play the Audio

After all this, the command is simple.

        myAudio.play();

The command sits in a function that is called only when the audio is good and ready. For many uses, you could just skip the waiting, but I like to be careful. You don't want to mess up your audio. I've noticed that not all the game I review have working audio and this is sad. Music is such a powerful addition to games and most games that succeed not only have a great game programmer, they have a great artist and a great musician. (And a great web site designer, business manager, and tea boy.)

The song will play once and that's all for now. There's more to the world of HTML Audio, but that's all for now. Stay tuned, but not iTuned!


Thursday, December 5, 2013

Darwinism (Game Review)

From those great people at TrueToken comes another great game for the Firefox OS Phone. This time it is Darwinism, and is all about evolving creatures into other creatures. True Token is a really cool game company in Kiev (or Kyiv), Ukraine. I really loved one of their games I reviewed earlier, Steel Story. This game reminds me a little of Boom Town, an HTML5 game that AppMobi created to demonstrate that you could make one HTML5 game and port it to every possible form factor. Darwinism is similar to Boom Town, only in that it uses a clever way to adapt a match-three game to something else besides falling jewels.

So here's how Darwinism starts:


Colorful, good art, gets right to the point of things. The splash screen lets you Play the game, get some hints on what evolves to what, gives you Help, and allows you to turn off the music (but the music is really great).

If you press the question mark for Help, here is what you get:

 

You see the game board and learn fire burns and that you need to match three of a kind to create a new species. That is the essence of the game, but there's more.

If you go back to the main menu and choose Evolution, you'll get a little taste of how the game works.


Right here at the start, you can see that the Amoeba is the lowest animal (one-celled) and that they then can turn into a Jellyfish. How? By combining them! Just get three Amoebae and you've got yourself a nice purple Jellyfish. And then ... get three Jellyfish and you can turn them into a Fish.


But before you start, Darwinism gives you something that most games don't, but should. You can choose between Easy, Medium, Hard, Expert, and Ultimate. I really like this kind of thing because I can learn the game on the Easy setting and then work my way up to Ultimate. I also really like the extra touch that True Token takes by making the choices look like carvings. A lot of work went into this game and it adds up to a great experience.

You can only choose Easy at first anyway, but the point is that this game has a lot of replay value. So when you start out Easy, you are given a mission: create a lizard!


By following the pictures, you can see that you need to use Amoebae to make Jellyfish, and then on to Fish, and finally onto ... Lizards. Seems logical to me. Fish can become Lizards. So now you're ready to start evolving.


The game even walks you through the steps the first time. You have a 5 by 5 grid that you play in. The piece you play is above the grid on the left. You simply tap where you want to put the piece. Put the Amoeba next to another Amoeba.

Working up your way on the evolutionary ladder, eventually you'll combine three Fish and make a red Lizard.You've finished the first round! You also have a score of 3000, reflecting how long it took you to get there.


When you play, the last of the three creatures that you play determines where the new creature will appear. So if you play Jellyfish - Jellyfish - Jellyfish, the new Fish will appear where the last Jellyfish was placed, and the other two disappear.

But there's three more twists that give this game extra strategy.
  1. If you don't want to play the creature that is next up (on the left), you can tap it and the creature will jump over to right and wait. You can then play the next creature up instead. If later you want to use the creature you set aside, just tap the one that's ready to go and it will trade places with the one you saved.
  2. When you start out, there are a few ice squares. Every once in a while, an ice square will appear and eventually you need to play it. If the board fills up with ice squares, the round is lost.
  3. But every so often you'll get a fire tile. This can be used to melt ice squares (or other creatures) to get them out of the way. Part of the strategy is to place tiles so that you can get three of a kind next to each other, and then they can form a new grouping to evolve again.
So all this fits together neatly to make a game that you can play for a few minutes at a time, and do some thinking while you do it. And the music is fun to listen to, nice percussion music that evokes the primitive world.

I really enjoyed this game and I'm looking forward to more fun from the boys in Kyiv. One of the things that is cool about Firefox OS is that people are contributing to the success of the project from all around the world. I'm going to start a side project to keep track of all the games I review and see what countries they come from. If you know of a game from a country I haven't covered, let me know!

Also, thanks to Christian Heilmann (@codepo8) who mentioned this game earlier today on Twitter. Requests are always welcome!

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