Tuesday, April 22, 2014

LittleMan (Game Review)

I am fascinated by the varieties of games in the Firefox OS Marketplace and take it as a sign of genuine interest by game creators world wide. Today's game is from somewhere by Bruno Eduardo da Cunha. There's no web site or Twitter, just an email. A casual trip through Google doesn't get me any more. Most of the time I can find out more about a game developer, but not this time. If anyone knows Bruno Eduardo da Cunha, let me know. I'll send him an email!

And it doesn't matter. A game speaks for itself, whatever person or country it comes from. The game under the microscope is called LittleMan and it's about a ... little man!


One of the things I noticed right away was that the clouds are moving in the background of the title screen. I like that attention to detail.


The screen also has some nice little details: the broken column, the greenery at the top, and the cracked tiles. The title screen also lets you mute the sound and start over.

And the game has music! A happy chip-tune inspired music that you won't want to turn off!

By the way, the game loads over the Internet and takes a while, but when you see the art and realize how many screens there are, you'll understand.

Once you start the game, you'll get to pick a level to play.


And this game has a lot. Assuming you get through the first 15 levels, there are another 15 levels.


Note again that this second level screen is a sunset view and helps you to see that it is different.

Each level is different and each level is difficult. That's the most important thing to say about this game. It isn't easy, but each level makes you solve different puzzles as you attempt to get through the level.

Clicking the first level takes you to the first screen:


You are that little man, standing in the doorway on the left. The top left shows you the level number and the top right, "Menu", takes you back to the level select menu.

The game controls are simple. The two blue arrows move you left or right, and the A button makes you jump. That's all you need to know. 

Here is the little man moving from the door to the middle. No dangers yet!


 And the clouds move here, too! The point of the game is to move and jump, but avoid deadly traps. Here is the little man after he's jumped up on the single block just to the left of the center pillar. He can go past the pillar, but he can't jump over the three vertical blocks.


But maybe he can jump from where he is to the top of the three vertical blocks?


Yes! He did it. A combination of pressing the right arrow and the "A" key does it. But you have to time it just right. But now he must be careful. If he hops off the block, he's in danger of falling onto the deadly spikes. He must hop to the two horizontal blocks and then off again.

This is just the beginning. That was easy. After avoiding the spikes, he keeps moving and sees more of the level.


The gray block with a face is moving up and down. What to do? That tower on the right is full of spikes. But he can't get there!


Well, yes he can. But it is tricky. You can't just jump up to where you see the little man above directly. You must jump onto the block under the moving gray block while the block is moving up and then quickly jump up to the left block before the moving block comes back down. Then you can jump up to the higher block on the other side of the moving block, but don't let that gray moving block touch you or you die! From there you can jump to the top of the tower and then down to the other side and the exit door.


And that's just the first level. Whew!

Here's the second level.



This level is more difficult because you must make a series of jumps right away and get very high up to grab a key that you can see in the upper left corner. 

And so on and so on! More puzzles await you involving both logic and dexterity!

I like this game a lot and it promises several hours of fun, trying to solve the puzzles and not dying. However, if you do die, you only go back to the start of the level you are in and there isn't any scoring. I give extra points to the art and the music because they create a mood. Go, little man, go!

Cost: Free
Genre: Platformer
Score: 5 (out of 5)
Tested on: ZTE Open and Geeksphone Peak
Get it at: Firefox Marketplace
https://marketplace.firefox.com/app/littleman

PS: one of the reviewers on the Marketplace said it didn't work on the ZTE Open, but it does work on my ZTE Open. Because you load the game over the Internet, that might cause problems, and the download is long because 30 screens is a lot!

Tuesday, April 15, 2014

Responsive Design (Game Programming)

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


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

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

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

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

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

ZTE Open with the Software Home button:


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


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

And the Geeksphone Peak with Software Home button:


And without the Software Home button:


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

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

What Does This Mean?

It means you need to know two things:

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

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

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

  1. Test your game on different devices.

  2. Write code so you can adjust.

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

Drag the Dots

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



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


Oops, there goes 50 pixels!

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

New Directions

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

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

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

Thursday, April 10, 2014

Drag the Dots (Game Review)

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

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

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


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


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


Here's what grid looks like.



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


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

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


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

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


Cover one with the other and the round is over!


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

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


Same rules, but more dots to confuse your eye.


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


Here's what the tiny dots look like:


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

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


Ten dots. Here they are:


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

Next on the list are moving dots!


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


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


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


Here's the dots in a circle:


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


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


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


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


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


Hey, these dots are moving!


And they keep moving!


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


Until only two are left!


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


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


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

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


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


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


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


And do it fast!

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

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

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

And there's no sounds or music. Bummer.

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

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