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!

Submitting an App (Game Programming)

I just submitted an app to the Firefox OS Marketplace and so can you! The app hasn't been accepted yet, and when I submitted it, my response was that I am 88 in a queue of 88 and that the estimated working time is 3 working days. How exciting!

I decided to submit my PaddleFox game that I wrote about at http://firefoxosgaming.blogspot.com/2014/01/paddlefox-game-programming.html.  The app is a very simple game that lets you hit a ball with a paddle. This game was a culmination of several posts and (very soon) I will have a page that lists the various technologies I write about. Essentially it uses SVG to create and move a ball and paddle, and uses the SVG getBBox method to detect collisions.

Here is what PaddleFox looks like:

 

Just so you know, I put this in the Marketplace as a free game. I intend to improve it in various ways as time goes on, and as soon as I figure out a way to get a web site and put it there, I'll also enter it in the One Game A Month site because the #1GAM people are really fun. I'm sure I'm the worst, but I'm shooting for doing all or part of one game a month for this blog, so why not?

Firefox OS Marketplace

Really, putting your game in the Firefox OS Marketplace is pretty easy. Prepare your app, make some icons, make a manifest, and submit it. If something goes wrong in the process, you can do it until it works.

The Application

My application was a simple 1-page HTML5 file and you can see the code and my explanation here: http://firefoxosgaming.blogspot.com/2014/01/paddlefox-game-programming.html. 268 lines of code with no bitmaps. I didn't do any music or sound effects because I wanted to keep it simple.

The Manifest

The manifest is a text file called manifest.webapp. This is a structured JSON file that specifies what the app does. I didn't have any special code that needed permissions. You just specify the name of the app and a short description, the launch path, who you are, and the language you support.

Here's mine:

{
  "name": "Paddlefox",
  "description": "Hit the ball with the paddle",
  "launch_path": "/index.html",
  "icons": {
    "60": "/icons/FB-60.png",
    "90": "/icons/FB-90.png",  
    "120": "/icons/FB-120.png",
    "128": "/icons/FB-128.png"   
  },
  "developer": {
    "name": "Bob Thulfram",
    "url": "http://firefoxosgaming.blogspot.com"
  },
  "default_locale": "en"
}

Here's the info from Mozilla Developer Network on manifests: https://developer.mozilla.org/en-US/Apps/Developing/Manifest. This text file uses a JSON format for the data. Here is the JSON specification http://json.org/ and in case you wanted to know, JSON stands for JavaScript Object Notation.

You don't really need to be an expert at JSON, but follow the examples and be sure you put the commas and brackets in the right place. And make sure that your paths and names are correct, especially for the icons!

Icons

You'll notice in the manifest above there are 4 icons. I got a warning saying I should have added 2 more sizes, but I got errors until I added the four I did. Originally there were only two icons you had to have, but now you must do the four sizes above (60, 90, 120, and 128). The optional ones are 32x32 and 256x256!

Here's my 128x128 pixel icon:

How did I make it? Well, no artists were involved, that's for sure. The most important part of my icon adventure was going here: http://www.mozilla.org/en-US/styleguide/products/firefox-os/icons/. That is part of the Mozilla style guide that shows you some of the issues with icons. The important part was the download at the bottom. All I did was to download the templates, load them into a pixel art editor, and make some changes. I used Paint Shop Pro but you can use Photoshop or anything else. I used Paint Shop Pro because I wanted to do some layers. I took the template, spilled some pixels of a different color on it, smeared things around, and slapped some type on top. I'm sure a monkey could do better. I did one icon at 128x128 and then resized the other three, making a total of 4 icons in all.

Once I had the HTML5 page (index.html) in the root of a folder and the manifest at the same level, and the icons in a folder below that, the next step was to zip them up. I used 7Zip but there are plenty of other zip file makers.

So, armed with a zip file containing my web page, manifest,and 4 icons, I then went to the Marketplace. But before I went, I read this great article on MDN: https://developer.mozilla.org/en-US/Marketplace/Submission/Submitting_an_app on submitting an app.

Submission

You submit your apps starting here: https://marketplace.firefox.com/developers/submit/. Actually, the first thing you should do is to get a Mozilla Persona account. Read about that here and get one https://login.persona.org/. You'll need it anyway if you want to buy an app later. Make one, buy one! You can read about how I signed up for Persona at http://firefoxosgaming.blogspot.com/2014/01/heroine-dusk-game-review.html.

Now that you have a Persona, sign in and accept the terms of working with the Marketplace. Then you go to a page that lets you choose what kind of app you want to submit. The first choice is free or paid/in-app-purchases.

Then you pick the hardware you want your app to run on.

• Phone
• Firefox Desktop
• Firefox on Android
• Tablet

I noticed that they didn't list the VIA APC yet!

Then the choice is packaged app or hosted. Packaged apps are zipped up and submitted to the Marketplace. Hosted apps are hosted on a web site you own. Some of these choices are made for you, depending on what you pick.

If you want paid/in-app-purchases, you must (at this time) only supply apps for the phone.You can choose to be packaged or hosted. If you want your app to be free, and you choose phone, you can be hosted or packaged. But if you want to do apps for the desktop, android,and tablet, not just phone, you can only be hosted and you must be free! Sound complicated, but when you get there, the buttons will only let you choose certain options, so know what you want before you go.

I chose phone, packaged, and free, because that's the easiest. That's what I wanted anyway.

Once you've made your choices, there's a button to click that lets you select the file you want to submit. One file, it must be zip, it must have a manifest, icons, and ... your app!

Then, if you did everything right, your file will pass the tests. I had some problems with the icons (not enough) and the JSON notation (commas) but each time I failed, I could go back, fix whatever was wrong, and then resubmit right there.

I did get a warning that they wanted those two other icons, but they weren't required. I also got a warning that my submission failed the CSP (Content Security Policy). The rules for CSP are here: https://developer.mozilla.org/en-US/Apps/CSP.

It gave me line number in my index.html, 28, and the contents of that line:

  <script>

I think this is telling me that I should put my JavaScript stuff in a separate file instead of between two script tags in the head. But it was only a warning so I'll research more and fix it when I submit improvements (unless it fails in the final submission process). They're very careful about not allowing JavaScript to be a vector for evil things.

Once I only had warnings, I went on. A few more questions. They wanted my privacy statement (I said I'm not gathering data or using it - but they have a nice template if you do something more complicated). They also wanted a description of the app, a web site, and an email for support. I did all of that, and then one last (easy) step.

They had a few questions to determine the age rating. My app had nothing that would offend anyone, so I just said no to all the questions and now have a certificate that was automatically placed in my submission saying that my game is safe for all ages.

Then I pushed the final button and got the notice that I'll be in the store when I go through that 88 person queue. I'll be curious how long it really takes. Let me know if you see my app in the store and I'll put a comment here and tweet about it.

By the way, now it says 88 out of 100 which means I didn't move forward in the line, but more people are piling up behind me!