Monday, January 20, 2014

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!