fixes from Sole notes

soapdog · soapdog · commit 04fdcb32a366 · 2014-06-13T18:11:35.000-03:00
diff --git a/README.md b/README.md
@@ -18,20 +18,6 @@ git clone https://github.com/firefoxos-gamedev/mortar-phaser-game-stub.git
 Or download the latest version in this [ZIP file](https://github.com/firefoxos-gamedev/mortar-phaser-game-stub/archive/master.zip).
 
 
-## Usage
-
-Start a local server to simulate accessing the hosted app from the browser, and trying the *Install* button flow.
-
-For example:
-
-````bash
-python -m SimpleHTTPServer 8000
-````
-
-then access `localhost:8000` or `your.computer.ip:8000` (for example, `192.168.0.25`) using Firefox (Desktop or Mobile), or the Browser app in a Firefox OS simulator (or device).
-
-You'll need to use the IP address when using a physical device. Change the port accordingly, if you're running a webserver in this port already.
-
 ## Phaser Framework
 
 [Phaser](http://phaser.io) is a proven open source framework for creating HTML5 games. It has many features such as input control, game loops, camera control, tilemaps and more all baked in. Its a great tool to help you create your game and not focus on trivia stuff that is not related to your project or vision.
@@ -46,7 +32,7 @@ $ bower update
 ## Code walkthrough
 The code is contained in three files &mdash boot.js, preloader.js, game.js &mdash each serves a different purpose and is explained below:
 
-### boot.js
+### main.js
 This file register our listener for the *DOMContentLoaded* event. This event will fire once all the html/css/js files are loaded.
 
 In this file we setup the Phaser framework and register our game states. A game can have multiple game states. This stub has two states each defined in their own file.
diff --git a/index.html b/index.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta charset="UTF-8" />
-    <title>Phaser Game Stub</title>
-    <link rel="stylesheet" href="css/style.css" type="text/css" />
-    <script src="js/phaser/phaser.js"></script>
-    <script src="js/game/boot.js"></script>
-    <script src="js/game/preloader.js"></script>
-    <script src="js/game/game.js"></script>
-</head>
-<body>
+    <head>
+        <meta charset="UTF-8" />
+        <title>Phaser Game Stub</title>
+        <link rel="stylesheet" href="css/style.css" type="text/css" />
+        <script defer src="js/phaser/phaser.js"></script>
+        <script defer src="js/game/preloader.js"></script>
+        <script defer src="js/game/game.js"></script>
+        <script defer src="js/game/main.js"></script>
+    </head>
+    <body>
 
-<div id="game"></div>
+        <div id="game"></div>
 
-</body>
+    </body>
 </html>
diff --git a/js/game/boot.js b/js/game/boot.js
diff --git a/js/game/game.js b/js/game/game.js
@@ -1,4 +1,4 @@
-BasicGame.Game = function(game) {};
+GameStates.Game = function(game) {};
 
 /**
  * This is the Game game state. Its our game loop responsible for the game itself.
@@ -10,7 +10,7 @@ BasicGame.Game = function(game) {};
  * Refer to: http://docs.phaser.io/Phaser.State.html
  */
 
-BasicGame.Game.prototype = {
+GameStates.Game.prototype = {
     create: function() {
 
         // Add the background
@@ -28,8 +28,8 @@ BasicGame.Game.prototype = {
 
     update: function() {
         /*
-        This function is called in a loop using requestAnimationFrame(). It is our game loop, our heartbeat. Every time
-        it is called we process the user input and update the display.
+        This function is called in a loop using requestAnimationFrame(). It is our game loop, our heartbeat.
+        Every time it is called we process the user input and update the display.
          */
 
 
diff --git a/js/game/main.js b/js/game/main.js
@@ -0,0 +1,32 @@
+
+document.addEventListener("DOMContentLoaded", function(event)  {
+
+    //	Create your Phaser game and inject it into the game div.
+
+    // Game world will fill the whole viewport. If this is not the desired outcome then change those values.
+    var width = window.innerWidth;
+    var height = window.innerHeight;
+
+    // Phaser.AUTO constant below means it will automatically switch between WebGL or Canvas depending on the platform.
+    // Check out docs.phaser.io/Phaser.Game.html
+    var game = new Phaser.Game(width, height, Phaser.AUTO, "game");
+
+    /*
+    Add the States the game has.
+
+    A game can have multiple states. States have a lifecycle. You use states to create your own game.
+    They provides quick access to common functions such as the camera, cache, input, match, sound and more.
+
+    You can use multiple states to better organize your code. In this template we use two states one to load our
+    assets and one for the gameloop. We could have done all that in a single state but that could lead to larger files
+    that are harder to maintain.
+
+    more info about states at: docs.phaser.io/Phaser.State.html
+    */
+    game.state.add('Preloader', GameStates.Preloader);   // <-- Loads the assets
+    game.state.add('Game', GameStates.Game);             // <-- Game loop.
+
+    //	Now start the preloader state.
+    game.state.start('Preloader');
+
+});
diff --git a/js/game/preloader.js b/js/game/preloader.js
@@ -1,15 +1,20 @@
-var BasicGame = {}; // <-- Object to hold all our game states.
+/**
+ * below we declare GameStates which is an empty object that will contain our game states.
+ * We're using this to avoid having multiple globals around.
+ */
+
+var GameStates = {};
 
 /**
  * This is the Preloader game state. It is the first to run. It loads all the assets used by the game.
  */
 
-BasicGame.Preloader = function (game) {
+GameStates.Preloader = function (game) {
     // placeholder, you can set some game state options in here if needed.
     // Refer to: http://docs.phaser.io/Phaser.State.html
 };
 
-BasicGame.Preloader.prototype = {
+GameStates.Preloader.prototype = {
 
     /*
     Game states have many functions that will be called at different stages of its lifecycle.
@@ -20,11 +25,15 @@ BasicGame.Preloader.prototype = {
     In this case here:
     - preload(): will be called to load our game assets. Once loaded they are cached and any
     other game state may use them.
-    - update(): this is the gameloop function. I will be called using requestAnimationFrame() in a loop
+    - update(): this is the game loop function. It will be called using requestAnimationFrame() in a loop
     until we do something to exit. In this case we switch to the Game state.
      */
 
     preload: function() {
+
+        // The images below are just placeholders to show how to load assets.
+        // Replace them with your own.
+
         this.load.image('background', 'assets/background.png');
         this.load.image('player', 'assets/player.png');
     },
diff --git a/manifest.webapp b/manifest.webapp
@@ -3,11 +3,6 @@
     "name": "Phaser Game Stub",
     "description": "A game app template",
     "launch_path": "/index.html",
-    "icons": {
-        "16": "/img/icons/mortar-16.png",
-        "48": "/img/icons/mortar-48.png",
-        "128": "/img/icons/mortar-128.png"
-    },
     "developer": {
         "name": "Your Name",
         "url": "http://example.com"
@@ -17,6 +12,10 @@
         "es": {
             "name": "Plantilla de juego",
             "description": "Plantilla para apps de juegos"
+        },
+        "pt": {
+            "name": "Template de jogo",
+            "description": "Um template para criação de jogos"
         }
     },
     "default_locale": "en"
