Sprite Sheets in Construct 2

I spent a few months traveling and not doing much of anything useful to anyone else, but I had a good time!

I did manage to review a book on Construct 2 that will help people make apps for Firefox OS. Especially for games, Construct 2 is a fast drag and drop game engine that thinks in HTML5! In case you missed it, my review of Construct 2 Game Development by Example is at http://firefoxosgaming.blogspot.com/2014/09/construct-2-game-development-by-example.html.

I'll also get back to reviewing games for Firefox OS, so if you know of any games in the Firefox OS Marketplace that you'd like me to review, let me know!

Efficient Artwork

The last real programming post I did was on how to do a platform game in Construct 2 for Firefox OS. You can read it here at http://firefoxosgaming.blogspot.com/2014/06/platform-game-using-construct-2-game.html. Essentially the game worked, but over on the Construct 2 site, a person named Aphrodite (from France) pointed out that it is somewhat inefficient to load in individual pieces of art for each block on the screen.

Here's what the game looks like:

The blue hero is standing on a platform made up of lemon lollypops (minus the stick). Each lollypop is a sprite. Sprites are an easy way to create patterns on the screen. The same sprite can be reused throughout your game, saving on memory. But loading sprites one at at time (which is what I did) isn't the best way.

But here's a better way to create objects on the screen.

Step 1 - Start a new project.

Download the latest Construct 2 which you can always get from www.scirra.com. Open up Construct 2 and open up a new project. Use the New Empty Project template.

Why do you want the latest? Construct 2 is trying to match every browser, and every browser is updating madly. So keep up!

Step 2 - Set up Grid and Snap

Up near the top is a View tab. Open it up and find Snap to grid. Click the box to make snapping happen. For grid-based platformers and role-playing games, grids are great and snapping makes sure that all the squares line up! Also set the grid width to what will match the pieces. In this case the squares are 32x32 pixels.

You can also click the box next to Show grid. I like this so I can see the grid. You can always turn it off it you want to get the feel of the game after you've assembled the pieces.

Step 3 - Find a Sprite Sheet

Sprite sheets are wonderful. Instead of loading each little sprite image separately, you can load one bitmap which contains all the sprites you want to use. Here's a great one from the artist I used last time, Kenney. You can get his free art at http://kenney.nl/.

If you look closely, you can see that he's created 49 sprites and placed them in a 7x7 grid. Thank you, Kenney!

Step 4 - Pull the Sprite Sheet into Construct

The next step is tricky. Make sure you are looking at a Layout screen. Double-click anywhere on the screen. You'll bring up the Insert New Object screen. Double-click on the Sprite object. The Insert New Object screen disappears and you're left with a cursor that has a target shape. Click anywhere on the Layout screen to start the Sprite Sheet process.

Essentially the process is:

  1. Double-click on the Layout screen.
  2. Double-click on the Sprite object.
  3. Single-click on the Layout.

This will place an object where you click, but you can easily move it later.

When you do that, you get the Edit Image editor. This editor consists of three separate screens. The main screen looks like this:

This screen is where you can manipulate art and do lots of cool things.

But there are two other screens that are useful for sprite sheets.

Usually to the right of the main edit screen is the Animations screen. It looks like this:

And finally, the Animation Frames screen, which is usually below the main screen and looks like this:

Construct 2 has an elaborate animation system that can let you do all kinds of cool things with animated characters, but it also uses its animation system to place pieces of a sprite sheet by treating each sprite as an animation frame. Very interesting!

So now that you know these three screens and you've brought up the editor, it's time to load the sprite sheet.

Right-click on the Animation frames screen and select Import frames and then From sprite strip....

Construct 2 will load the sprite sheet and attempt to figure out how the sprites are arranged. Sometimes it does and sometimes it doesn't. In my case it didn't. I just got this:

Well, no problem. Just tell Construct 2 how the sprites are laid out inside the sprite sheet. I inserted 7 into the horizontal cells and 7 into the vertical cells. I said OK.

When I do that, the sprites are arranged into 49 numbered parts.  Here is what it now looks like in the Animation frames screen:

Right-click on the first sprite (blank) and delete it. Your sprites are now numbered 1-49. We need to do two more steps before we are ready to blast Kenney's sprites onto the Layout.

Step 5 - Remove White Space

If you look very carefully, you'll see that Kenney left a tiny bit of space between each sprite. You need to remove this so the sprites join up perfectly with no gaps. Other sprite sheets have the sprites flush, but we've got Kenney and the price is right - free!

Luckily for us all, Construct 2 thought of this and has a way to automatically remove all the white space. Here's what you do.

Go to the main Image editor window. You should see something like this, with the first sprite in the center.

 

Near the upper-middle you'll see a button that looks like a little target. Counting from the right, it's the sixth one over. Hover over it and it will say Crop transparent edges. Hold shift to crop all of the 49 images. After a minute, the extra white space is gone.

There's a lot of smarts behind Construct 2, which is why it is cooler than any other game engine. But there's one more prep step to go!

Step 6 - Resize the Sprites

Kenney's sprites are 74x74 pixels. Why? Who knows. Maybe it's because he's from the Netherlands. Doesn't matter. We want our sprites to be 32x32.

Once again, Construct 2 to the rescue. Right to the left of the button that you used to remove extra white space is the Resize button. Click on it and you'll get a little window.

You want to make some changes. The first change is to put 32 for the Width (pixels) and 32 for the Height (pixels). Then click the box to Apply to whole animation. And keep the Stretch Image choice the same.

When you press okay, there will be a pause and the sprites will all shrink to 32x32!

Step 7 - Place the Sprite Objects

I covered this part in the last tutorial. Essentially you just close the editor to place your first sprite object.

You can click and drag on it, taking advantage of the grid. This is image#0, but you might get bored with that later.

You can copy a sprite object by just clicking on it, pressing control, and then dragging it. You'll be dragging a copy and when you let go, you have a new copy of the sprite. It is still image#0, but you can change that.

If you click on the sprite object, over to the left, you'll see the properties of the sprite object.

You'll see that the initial frame is 0, but you can choose from any of the 49 images. Let's make it 11, which is a cherry!

If you can't remember what frames correspond to which images, just double click on an object on the screen and the Edit Image windows will come up. You might want to even print them out so you can make really cool worlds by combining the individual sprites.

Next

I'll be getting back to reviewing some Firefox OS games from the Marketplace, working a bit more to improve some code I wrote for the same tutorial as I improved just now, checking to see if the Firefox OS build process has changes, seeing if I can upgrade my phones, and beginning to work on a real role-playing and/or puzzle game.

I've done enough with Construct 2 for now and I'm eager to get back to native HTMl5. Especially the siren song of SVG, and the cool things that only it can do in a web page. 

Until then, stay tuned but not iTuned!

Construct 2 Game Development by Example (Book Review)

I've been on an extended vacation traveling around the country, visiting old friends, and thinking what I want to do next with this blog. I've written more than 100 posts and published a 400 page Kindle book on Amazon, all focused on Firefox OS.

Well, I'm back, but I'm going to go away for another month. However, I just wanted to review an important book on Construct 2. As you know, I've written several posts on Construct 2 because it is an ideal quick way to write games for Firefox OS without a lot of coding. Drag and drop, fill in a few forms, and you're game is ready for the Marketplace.

However, there has only been one book on Construct 2, HTML5 Game Development from the Ground Up with Construct 2, by Roberto Dillon, published by CRC Press. I've read it but I could never wrap my head around it. It might be because the book covers making odd games that don't really connect. I feel like the author had never made games and the book just seems slow. That's not very analytical, but I just haven't been able to get into it. I find I just don't want to spend the time analyzing why a book doesn't work. One fact that has bothered me is that the version that they provided for Anazon Kindle doesn't navigate very well. It reads more like a PDF. Ugh!

And there's one other book that is cool, called Construct Game Development: Beginner's Guide, by Daven Bigelow, published by Packt Publishing. It looks very cool, but unfortunately covers the original Construct Classic. Unfortunate because the creators have moved on and Construct 2 is the drag-and-drop HTML5 game engine you want to use. Construct Classic was focused on DirectX but the creators wisely moved on to HTML5, allowing you to produce games that can run on not just Windows, but a big list of other platforms. How big? Would you believe: HTML5 for any Web browser, Wii U, iOS, Android, Windows 8 & Windows RT, Windows Phone 8, Windows Desktop, Mac Desktop, Linux Desktop, Blackberry 10, Firefox OS Marketplace (yay!), Tizen, Facebook, Chrome Web Store, and Amazon Appstore.

Lucky for the world, Packt Publishing decided to put out a book on Construct 2 and they chose a great author to do it; John Bura. The book is Construct 2 Game Development by Example and it just came out in June. For some reason, Packt asked me to review it and they sent me a free copy, so take that as a disclaimer. But I would happily pay $21.60 for the eBook from Packt or even happier to pay Amazon $16.54 for the eBook and $39.87 for the paperback from Amazon.

Why am I pleased to see that the author is John Bura? Well, John is one of those amazingly busy guys who do all kinds of things. I know of him from his amazing videos on Udemy (http://www.udemy.com) and in particular, a video class called Learn to Make HTML5 , Facebook, Chrome Store games and more! The class is an amazing 31 hours of lecture broken out into 432 segments. Most of the class covers using Construct 2 but also includes 40 lectures on using FL Studio to make Mega Man game music and even a sequence on Game Salad for iOS. The class is $199 right now but is often discounted and John has a lot of other classes on various game programming aspects.

So when he writes a book, I'm excited because I know that he understands Construct 2 well. I never felt that way about the Roberto Dillon book, but after watching hours of fun and interesting video, I know that he knows! And anyone who likes FL Studio is cool as well. The two products (Construct 2 and FL Studio) are similar in that they help you create things fast.

So what's in Mr. Bura's book? Here's the outline:

Chapter 1 - Getting Started with Construct 2

Chapter 2 - Inputs and Controls

Chapter 3 - Variables and Arrays

Chapter 4 - Game Mechanics

Chapter 5 - Making a Simple Shooter

Chapter 6 - Making a Tower Defense Game

Chapter 7 - Making a Puzzle Physics Game

Chapter 8 - Exporting Your Game

Appendix - Where to Go from Here

Keep in mind that this book is clearly aimed at beginners. If you are an advanced programmer who likes to code by hand, you probably won't read this book. Most of my posts are advanced HTML5 programming based, but I've come to realize that is Firefox OS (and HTML5) is to grow, people who are artists and creatives need to be able to sit down and make a game. 

Here's a quick breakdown by chapter:

Chapter 1 - Getting Started with Construct 2

This is a brief chapter that introduces you to Construct and tells you how to download it. If you need more information, the Construct 2 site is extremely helpful at http://www.scirra.com. The only thing  might have mentioned a bit more about is the licensing terms of Free, Personal, and Business, but you can read about it at https://www.scirra.com/store/construct-2. I think it's always good to know that you can use Construct 2 as a free version but are limited to a fixed number of events and a few other things. I'm assuming that all the examples work fine in the free version.

Bura doesn't give you a step-by-step guide to installation, but that's maybe okay. It's pretty easy! And you can find it at the Construct 2 site at https://www.scirra.com/manual/2/installing

The rest of the chapter covers basic concepts of how Construct 2 works and will get you comfortable without actually having to do anything.

Chapter 2 - Inputs and Controls

Most programming books would start Chapter 2 with some game programming, something like paddleball. However, John wisely walks you through the concepts and issues of using a keyboard, mouse, and touch for games. This is something that often just gets thrown in, but it is the fundamental part of every game. If you don't have a control of some kind (keyboard, mouse, or touch), you don't have a game. I particularly like him including touch, which is necessary for mobile gaming like Firefox OS. 

The chapter might be confusing for some because he doesn't use real code examples and doesn't show you how to set up a project so you can test the small examples. But if you read it just for the concepts, you're okay. 

Often readers want to just get started making things, but I like the idea of talking about some basics before you start programming, even when the programming is easier, such as Construct 2.

Chapter 3 - Variables and Arrays

This is a straight-forward chapter that you may think you want to skip if you've had any programming. But keep in mind two things. Not everyone may know about variables and arrays because Construct 2 is aimed at true beginners. And secondly, Construct 2 handles variables and arrays a little bit differently because it is not a straight programming language. You can create lots of games without understanding variables and even more without arrays. And I've noticed over the two years I've been playing with Construct 2 that one of the frequent questions on the excellent Construct 2 forum is "How do arrays work?" So give it a read even if you are a rock star programmer.

Chapter 4 - Game Mechanics

John defines game mechanics as "... how a game works and how a game feels." Again, this book is aimed at beginners and people who are non-programmers (and people like me who are in a hurry). He lists a few game mechanics:

• Running 
• Jumping 
• Score keeping 
• Shooting 
• Lives 
• Health 
• Physics

You get the idea. Mechanics are something people often know, but I personally love looking at game mechanics and I might even write a book on it using Construct 2 for examples! One of my favorite places for game mechanics actually covers board games, but it is really deep (but that makes sense since board games have been around a long, long time). If you want to see amazing lists of abstract game mechanics, check out 51 basic mechanics at http://boardgamegeek.com/browse/boardgamemechanic.

Anyway, John talks about game mechanics for video games and also touches on emotions, which is good because that's what games are really about. Now I would write a whole book about it, but not for beginners, but John covers the basics. After these first four chapters, you will be ready to create a game. 

Chapter 5 - Making a Simple Shooter

I hope all readers were patient and read through the first four chapters. If they did, they will be well prepared for making a real game. John doesn't skimp here. This is an excellent, detailed walkthrough on how to spawn enemies, shoot them with bullets, and survive! The explanation is crystal clear and very good. He covers keyboard and mouse, but not touch. This is a very simple game and the graphics are just circles and squares, but you can definitely take what he's given you and make shooting games. 

Chapter 6 - Making a Tower Defense Game

This chapter would make me buy the book even if I didn't know what Construct 2 was. There are lots of books that include details on how to make a shooter, but I haven't seen any that explain how to do Tower Defense. That might be because Tower Defense is a newer type of game. John suggests that you Google "Tower Defense" if you don't know what that is, and there are lots of neat Tower Defense games you can play for free. Essentially you have bad guys invading your land and you set up towers to defend your land. This is more of a strategy game than an action game, but each round is quick and its fun to see if your defenses can stop the enemy.

John shows you how to use touch for this game and that is very useful. Again, he does a great job of walking you through the many steps needed to make a more complex game, but I never felt lost while he was doing that, and that may because he never goes more than a short paragraph without showing you a screenshot of what you must do for that step. A book like this is heavy on the screenshots, but that's what you need because Construct 2 is primarily visual. 

For example, I wrote a recent post on how to do a very simple platform game using Construct 2 and it used almost 30 screenshots! That's a lot and I'm surprised Google didn't complain. You can read my post at http://firefoxosgaming.blogspot.com/2014/06/platform-game-using-construct-2-game.html. So I am saying that he did a good job because it's hard to juggle all those screenshots!

Definitely I am going to follow his chapter and see if I can make a nifty Tower Defense game. But there is another game to come.

Chapter 7 - Making a Puzzle Physics Game

One of the things that sets Construct 2 ahead of just coding it yourself is that it has a lot of physics you can use. What is physics? It's giving each object properties that correspond to objects in the real world. If a ball hits a tall block, the ball will bounce off, and the block will start to shake. If you hit it hard enough, the block will fall over. 

One of the reasons that Angry Birds was so popular was that it was one of the first games that used physics in a really great way. It was fun to shoot birds at the blocky buildings and see if you could do it in just the right way to make the blocks fall and crush the pigs. 

Well, this chapter is how to do something like Angry Birds. No birds, no pigs, but you have a cannon and you have blocks that you will shoot at. And here's a picture from the book to give you the idea:

He adds a goal ball on top of the towers that you want to fall down when your cannon ball hits the towers:

Pretty cool, huh? Like I said earlier, I've seen a lot of shooter coverage in various game programming books (I've probably bought them all), but I have never seen Tower Defense or Angry Birds.

The reason for this is that programming these examples would take hundreds of lines of code but Construct 2 can do it with some drag and drop, a few variables, add this and that, and you're done. 

So there's only three games here, but games two and three are really good examples and definitely not trivial. I can't emphasize enough how well John Bura explains each step as you go along. 

Again, I would never think of creating an Angry Birds type of game but I might now. Of course there are a thousand variations but the physics are there for the taking. Annoyed Protozoa, anyone?

Chapter 8 - Exporting Your Game

As I explained earlier in this post, Construct 2 can create games for 16 platforms and the number is growing all the time. Right now the export for Firefox OS is perfect and the export for iOS and Android needs a little work, but the rest are pretty good. 

Chapter 8 covers exporting to several platforms but some of what he's written has already changed as Construct 2 and the platforms change. But this chapter will give you a glimpse on what to do and where. Construct 2 has great tutorials for exporting to each platform and the tutorials are updated frequently and written by the Construct 2 gurus.

Appendix - Where to Go From Here

The appendix is simply a short talk on how to think about game design and what to do next. No biggy but certainly worth a quick glance. He does give the valuable advice to work on small games that you can do instead of trying to compete with the big game companies. He talks a little bit about his own game company (Mammoth Interactive) and closes with some good tips.

My Summary

I can really recommend this book to anyone who wants to learn Construct 2 quickly and easily. The flow of ideas is good, the games are actually ones you might want to create and expand upon. The book is reasonably priced and you won't be sorry you bought it!

I won't rate this book, I'll just say buy it. Recommended! You can get more information about it from the wonderful folks at Packt at https://www.packtpub.com/game-development/construct-2-game-development-example.

What's Next for Bob?

I'm heading out in search of a few more long-lost friends and should be back at blog-making by October 1st. Unless, according to Fred Hoyle, October the First Is Too Late. But around then. 

What's better than obscure old science fiction titles? How about The Gods Hate Kansas? 

Which later had a paper back edition in 1964. But I digress.

I'm thinking about doing two different things:

1. Write a real-live RPG in HTML5 native code for the Firefox OS tablet and then use "Responsive Game Design" to shrink it down to a few different Firefox OS phones. 

2 . Start working on a Construct 2 game mechanics series. There's a lot of interesting stuff in Construct 2 that could use some detailed explanation, especially in terms of what techniques work most efficiently. 

Until then, stay tuned, but not iTuned!

Freaking Math! (Game Review)

Here's a fast-paced game from Hungary that will force you to wake up!

This is one of the simplest games I've seen in the Marketplace, but it is very satisfying and forces you to react quickly. The premise of the game is explained when you start:

You are shown a simple math expression and you must decide is the answer right or wrong.

Well, is 1 + 1 = 3 or not? If you think about it, of course it is wrong. But can you react in one-and-a-half seconds to click on the X button?

Maybe, and maybe not. I seem to remember that the human reaction time in general is 2.2 seconds, but if you are hyper-alert, you can do it faster. But how long ago did you learn your math tables?

If you get the right answer, you must instantly do another one, and another, until you wait too long. Each time you fail, you'll get a score.

You can see that my high score is two right answers but my last score was only one! But keep at it. With a little practice, I did get better.

The game creator is Adam Balogh of Hungary and he has a newer version of the game that does division and multiplication. Unfortunately I can't buy it!

I'm fresh out of forints anyway.

But this is a fun little game

Cost: Free

Genre: Puzzle
Score: 4 (out of 5)
Tested on: ZTE Open C
Get it at: Firefox Marketplace
Developer:  Adam Balogh
https://marketplace.firefox.com/app/freakingmath/

Announcement One - Thomas Palef has written a book!

Thomas Palef has been amazing us all by writing one game a week. You can read about it at http://www.lessmilk.com/.  Part of his secret (aside from being just brilliant) is that he uses an HTML5 library called Phaser. You can read all about Phaser at http://phaser.io/.  But Phaser is a little hard to grasp how the pieces fit together, even though it seems like it will help you write HTML5 games more efficiently.

Well, up steps Thomas Palef, who will shortly be publishing not only a book, but will include complete games with the source code. You can read about it at http://www.lessmilk.com/phaser-book/ but he sent out an email to his subscribers with more data.

"The book will focus on building a full featured game from scratch that works on desktop and mobile devices. You will control a little guy in a blue world, trying to collect coins while avoiding enemies.

"Here are some of the things we will cover while building the game step by step: sprites, labels, groups, states, animations, particles, arcade physics, local storage, tilemaps, game scaling, touch inputs, and more.

"With all this new knowledge you will be able to create your own 2D games in HTML5.

"What You Will Get

"I created 3 types of content to help you learn the Phaser framework:

"- The book. The step-by-step guide to Phaser. It's 125 page-long, DRM-free, and available in 3 formats: pdf, epub, mobi.

"- Code. Some resources to help you build your own games faster: the source code of every chapters of the book, a Phaser cheat sheet, an empty game template, and other things. 

"- Games. I built 3 full featured games with comments that you can learn from: a space shooter, a match-3, and an infinite runner."

I'm definitely buying this even if I have to go without lunch for a few weeks!

Andrzej Mazur (Enclave Games) has written several games in Phaser that run well in Firefox OS, so I think that Phaser might be very useful to Firefox OS folk. I'll investigate it when I get back.

Announcement Two - I'm Going on Vacation

Yes, I know I'm on a permanent vacation, but I'm taking time off from this blog to travel around the country and visit some old friends, and I won't be online, and even when I am, I won't be typing!. So I won't be blogging most of the summer. But I'll be back and I'm sure there will be fabulous things to write about. I have a big list of topics, but they will have to wait. 

So come back in September and until then, stay tuned, but not iTuned!

News Flash! Firefox Has In-Browser IDE (Game Programming)

By an interesting coincidence, I've been helping a friend set up the Android Development environment and it is a pain! But not FirefoxOS! It is really easy to develop for FirefoxOS ... but it just got a lot easier!

I've suffered through all kinds of hideous development environments, and most of them are a pain because they 're designed for developers who supposedly are willing to take any kind of abuse. "Are you a masochist? (pause) Well, good, then you'll be right at home with Windows, Android, Apple, and so on."

Firefox OS was great because you only had to edit file in your text editor and then upload them to the browser (with a few plugins). Well, today is history. The latest Nightly build came out and it has an "Integrated Development Environment." What that means is that once you have Nightly, you're done! No more plugins, no more text editor. I'll miss you, Notepad++!

So, here's what you are really, really going to want to do and never look back.

Install Nightly

You already are doing this, right? Just install Nightly and have it update itself every night. Get it at http://nightly.mozilla.org/. You know you want to!

Enable the New App Manager

Once you have the latest Nightly installed, type this in the search window:

about:config

No spaces before or after the colon. You'll get a warning.

Ignore it. You're living on the cutting edge, right? Maybe some of the settings could break your windows, but this just will allow the new IDE to come to life.

Once you promise to be careful, you'll see a giant list of settings that you can change. Scroll down until you see

Yes, I know that webide sounds like something spiders clean their houses with, but it really is WebIDE (Web Integrated Development Environment). Right click on

devtools.webide.enabled

and when a little menu comes up, select true. Nothing happens right away, but the magic is about to happen.

Now go to your menu and select Developer and then App Manager. Yes, this is still called App Manager but the name may change to WebIDE.

And the App Manager has changed ... a lot!

Meet the New App Manager, Not the Same as the old App Manager

Here it is:

It looks simple but it is a lot more powerful than before.

The first thing I did was to open one of my packaged apps. How? Maybe it's the little button on the left that invites me to Open App? Yes!

I have choices and I'm choosing Open Packaged App. I navigate to my app and load it. Without any delay at all, my app is loaded and you can see it. I'm using the simulator here but the same is true with an actual phone. Here's my app:

Cool already. It shows me the files in my app on the left and information about my app on the right. This is a simple app I'm rewriting right now to convert it to SVG and incorporate the viewport, so I can see how big an app really is. More about that soon. You'll notice that it is a VALID app by the green button on the right.

The next thing I want to do it run it, so I go to the View menu and choose Manage Simulators. Why? Well, you get a choice of simulators for the different versions that are supported.

This shows you what is installed and what is not. I had the ADB Addon Helper and the OS 1.3 Simulator already installed, but by clicking on the install buttons for the later versions, you can see them too. You'll notice that 1.0, 1.1, and 1.2 are no longer supported.

So pick the OS version of your choice

Select a runtime. I selected 1.3 since that was all I had at the moment. It will also show your device if you have it hooked up. Once you've done that, just click on the arrow in the middle to start your app.

Amazing! As expected, it opens up a separate simulator window and you can see your app running. Here's my app, the one that shows you how large your device (or simulated device) is.

So far, not that special. But it now gets cooler because you can load up other environments. Here I am loading up Firefox OS 2.0. I didn't even know they were that far ahead!

Let's see what version 1.4 looks like. (Actually I know because that's what is running on the tablet. But I haven't seen it on a phone-sized window.

It looks different. This is part of the new school of flat icons. Easier to understand. I like the radio!

Does my app run in 1.4?

It looks the same, but the height is slightly different. The outer height is slightly larger because there was a file menu that is now gone. But the inner is still the same.

Okay, so this is slightly nicer than the old App Manager, but what's the fuss?

This!

If I select one of the files on the left, a text editor pops up. I picked the index.html file because that's where the meat is. Notice that the text is colored nicely.

I can see my icons even though I can't edit them.

Again, only maybe nicer. But it gets better!

From the project menu, you can select New App and make it all right there in the browser.

You'll be asked what kind of app you want. There will be more choices as time goes on, I'm sure. And here's your new app, ready to be filled with code-delicious stuff.

 

This is now starting to rock. Now Mozilla is giving you a template with icons, a manifest, and javascript and css files, showing you where everything should go. Thank you, Mozilla!!!

I noticed something really cool that I hadn't hear of before. One of the icons is an SVG file! You can click on it and see that yes, Virginia, it is an SVG file. No art here, just fabulous SVG code.

This needs to be investigated. Maybe you don't need anything but one SVG icon and you're done?

And if you run this new app template, it really does run!

I'm expecting a set of steak knives with the next release!

But I've saved the best for last. You can edit your code in the IDE and see the changes immediately. No more going back to your editor and reloading umpteen times.

Open the debugger in the App Manager and see the code:

I've highlighted a line of code that sets the body color. Before it was using the color "Peru" but I changed it to"Blue" and here is what I got.

On the fly! This is really astounding. Write your code, see your code, make changes in the debugger, and never leave your browser again. Thank you, Mozilla. This will cut everyone's development time down a lot, so now you won't have an excuse not to turn out tons of cool apps tomorrow!

This really is now the coolest development environment in the universe.

The only way it could be cooler is to be able to do this on an actual phone or tablet. Or even in Firefox for Android. Imagine if you could code in your tablet. I've seen several browser IDE apps for Chrome OS, so why not here? But I'm not complaining. This is a giant step forward in programming. Wow!

Maze Climber (Game Review)

Some games are simple and some are complex. Simple works well on a phone, and Maze Climber is such a game. The premise is simple. You're in a maze and you must climb.

Why must you climb? Well, something bad will happen to you if you don't! At first you won't know that. You start out in a side view of a maze like Lode Runner or early Mario. But you might notice that there is a pool of red stuff at the bottom. What can that be?

You are that little white character near the middle, and you see red ladders and blue bricks. You can climb the ladders but not walk through the bricks.

Oh, no! The red stuff is rising and it is shooting out little fireballs. I bet it's lava, but I'm not going to sit around to find out what it is. I'm going to climb!

But if I don't climb fast enough, the lava will get me. It is very close. I'm hidden behind some fireballs near the edge of the lava, slightly to the left. You can see my head peeking out.

They got me. You can see me on the left, flying through the air. Owwww!

And I died!

But I can do this again and again. Here are some scores, showing the data, time, and how many meters I climbed.

Here's the home page in case you want more games from Short2Games!

And from the website, here's how to play!

Dig? What's this about dig?

If you touch a nearby brick wall to your left or right, a magic ray shoots out of you and blasts away at the wall. Hadn't noticed it! Makes it a little easier to get to ladders that go up!

By the way, the top right has a pause button. If you touch it, you get these choices.

I like the choices. Give up, play another game, or go back! Let's go back!

 

Now watch carefully. I'm going to drill a hole in the wall to my right.

I drilled through the wall on my right and climbed up the ladder. But the lava is coming up fast!

In case you are curious, here's a little bit more about the creator of this fun little perfect-for-the-phone game.

The eagle-eyed among you will notice that he lists lots of programming languages, and even my all-time favorite, Forth! It's nice to see that someone still uses it (actually there was some Forth programming in the One Laptop Per Child OS) but it was very popular in the early 80's when BASIC was king and C was barely known.

By the way, there are sound effects for the rising lava and a cool whistle when you die! No music, but the lava noise would drown it out anyway.

Cost: Free

Genre: Arcade
Score: 4 (out of 5)
Tested on: ZTE Open C
Get it at: Firefox Marketplace
Developer:  Short2Games
https://marketplace.firefox.com/app/mazeclimber