How to open links in a browser in a Phaser.js and Phonegap Build Project

When using Phonegap, using

window.open(‘http://some_url’, ‘_blank’);

is not enough to open a link in your device’s browser.  In fact, this will open within your app, and you won’t be able to get out of it unless you quit your app. O_o

Instead, you will have to add this to your config.xml:

<!-- Open in browser -->
<access origin="*" browserOnly="true" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="org.apache.cordova.geolocation" />

Then in your javascript:

window.open('http://some_url', '_system', 'location=no');

Phaser.js Basic Skeleton

Phaser.js is an excellent Javascript library for making HTML5 games. It has support for both WebGL and Canvas. Here, I’ll explain how to set up a Phaser.js project with a simple skeleton that you can build upon on your next game.

Before continuing, I think it’s important to have an understanding about states, because Phaser.js makes use of this. Essentially, we are using the state design pattern, which encapsulates varying behaviors of an object without having to resort to large monolithic conditional statements. In Phaser.js, the game is set up in different states that you can think of as scenes:

Boot -> MainMenu -> Game -> GameOver

For example, the boot state is specifically for loading the game assets, such as images and sounds. The main menu state is the title screne that shows the game logo and buttons to start the game or view instructions. The game state is the actual gameplay. Therefore, we don’t need logic to keep score in the MainMenu scene; we only need it in the Game scene. We don’t need enemies spawning on the GameOver scene; the game is over! We only need them appearing in the Game scene. So, we separate the logic of these behaviors in the different states that we listed above. This is especially important because we have a game loop running at a specified frame rate; for performance purposes, we show and interact with objects only when we need them.

Our directory structure will look like this:

- js
  game.js
-- lib
   phaser.min.js
index.html

In Phaser.js, we set up the index.html like so:

<!DOCTYPE html>
<html>
 <head>
 <script type="text/javascript" src="js/lib/phaser.min.js"></script>
 <script type="text/javascript" src="js/game.js"></script>
 </head>
<body>
<div id="game_div"></div>
<script>
 game.state.add('boot', Game.Boot);
 game.state.add('mainMenu', Game.MainMenu);
 game.state.add('game', Game.Game);
 game.state.add('gameOver',Game.GameOver);
 game.state.start('boot');
 </script>
</body>
</html>

game.js has the logic for all the states. As your game gets larger, you may want to create a js file for each state. For demo and simplicity purposes, we’ll keep it in one file.

var GAME_WIDTH = 640,
  GAME_HEIGHT = 480,

  // Phaser game object
  game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, 'game_div', { preload: this.preload, create: this.create, update: this.update, render: this.render });

Game = function(game) {
  this.game = game;
};
// Boot State
Game.Boot = function(game) {};
Game.Boot.prototype = {
  preload: function() {
    // preload all of the game assets
  },
  create: function() {
    console.log('Boot State');
    // transition to main menu screen when loaded
    this.game.state.start('mainMenu');
};
// Main Menu State
Game.MainMenu = function(game){};
Game.MainMenu.prototype = {
  preload : function() { },
  create : function() {
    console.log('Main Menu State');
    // for demo purposes, transition to the game screen after 2 seconds
    game.time.events.add(Phaser.Timer.SECOND * 2, this.transition, this);
  },
  transition : function() {
    // start game
    this.game.state.start('game');
  }
};

// Game State
Game.Game = function(game) {};
Game.Game.prototype = {
  preload: function() { },
  create: function() {
    console.log('Game State');
    // for demo purposes, transition to the main menu screen after 2 seconds
    game.time.events.add(Phaser.Timer.SECOND * 2, this.transition, this);
  },
  update: function() {
    // things that happen during the game
    // i.e., collision detection and scoring, which may essentially lead to game over
  },
  transition : function() {
    // start game
    this.game.state.start('gameOver');
  }
};

// Game Over State
Game.GameOver = function(game) {};
Game.GameOver.prototype = {
  preload : function() { },
  create : function() {
    console.log('Game Over State');
    // for demo purposes, transition to the main menu screen after 2 seconds
    game.time.events.add(Phaser.Timer.SECOND * 2, this.transition, this);
  },
  transition : function() {
    // show menu screen
    this.game.state.start('mainMenu');
  }
};

Remember the states we defined in the <script> tag of our index.html?

<script>
 game.state.add('boot', Game.Boot);
 game.state.add('mainMenu', Game.MainMenu);
 game.state.add('game', Game.Game);
 game.state.add('gameOver',Game.GameOver);
 game.state.start('boot');
</script>

We have the states boot, mainMenu, game, and gameOver. So looking at game.js, we can see in our transition() functions what state we’re going to go to next.

In the Boot state, we transition to the “mainMenu” state.

In the MainMenu state, we output to the console.log “Main Menu State,” and after a couple of seconds, we transition to the “game” state.

In the Game state, we output to the console.log “Game State,” and after a couple of seconds, we transition to the “gameOver” state.

In the GameOver state, we output to the console.log “Game Over State,” and after a couple of seconds, we transition to the “mainMenu” state.

Your console log should look like this:

Boot State
Main Menu State
Game State
Game Over State
Main Menu State
Game State
Game Over State
Main Menu State
Game State
Game Over State
etc.

Developer Podcasts

While I’m coding away, I often like to listen to podcasts about stories and learnings from other developers.  Here are some of them:

Software Engineering Radio
http://www.se-radio.net/
Software Engineering Radio is a podcast targeted at the professional software developer.  The goal is to be a lasting educational resource, not a newscast.

The Big Web Show
http://5by5.tv/bigwebshow/
The award winning Big Web Show features special guests and topics like web publishing, art direction, content strategy, typography, web technology, and more.  It’s everything web that matters.

Javascript Jabber
http://devchat.tv/js-jabber/
A weekly podcast about JavaScript, including Node.js, Front-End Technologies, Careers, Teams and more.

Developer Tea
http://www.developertea.com/
Developer Tea is engineered to be a highly-concentrated, short, frequent podcast specifically for developers who like to learn on their tea (and coffee) break.

Collective Mass
http://blog.collectivemass.com/podcasts/
Unity game technology podcast.

Experimental game dev podcast show
http://www.indiegamepod.com/
Experimental game dev interviews.

Game Design Dojo
http://gamedesigndojo.com/
A couple of game developers that have been in the industry for a combined 26 years.  They share what they’ve learned along with their latest developments and discoveries.

Industry Broadcast
http://www.industrybroadcast.com/
Bringing the collective insight of the gaming industry to your ears.

Common Git Commands in Different Scenarios

Here is a collection of git commands that I often use depending on the scenario.
Scenario 1: I want to get a copy of a git repository.

git clone https://some-url-repository

Scenario 2: I want to see the changelog of the repository.

git log

Scenario 3: I want to get the latest version of a repository on its master branch. I don’t have any local commits.

git fetch
git reset --hard origin/master

Warning: git reset destroys your local commits!
Scenario 4: I want to commit my local changes.

git status
git add some-file.js
# See my blog about Tig about alternative to git add
git commit -m "Updated something in the file, but of course this could be more descriptive."

Scenario 4a: And then I want to push my local changes to master in the remote repository.

git push origin master

Scenario 4b: But I get an error saying I don’t have the latest remote changes.

git fetch
git rebase origin master
# Now up to date
git push origin master

Scenario 5: I want to create a new git repository.

git init
git add .
git commit -m "Initial commit"

Scenario 5a: And then push it to the remote repository.

git remote add origin https://some-url-repository.git
git remote -v
git push origin master

Scenario 6: I want to make a new branch.

git checkout -b branch_name

Scenario 7: I want to switch to another branch.

git checkout branch_name

Scenario 8: I want to push my new branch to the remote repository.

git checkout -b branch_name
# edit files, add files, commit...
git push -u origin branch_name

Scenario 9: What branch am I on again, and what other branches are there?

git branch

Scenario 10: I’ve got a commit that I want to place on top of my current head.

git cherry-pick sha_of_commit

Scenario 11: I forgot what I just did. What did I do again?

git reflog

I Dig Tig

If you use Git in the command line, then you may have encountered this tedious chore of typing out all the files you need to add into your commit:

git add directory_A/file_A.js
git add directory_A/file_B.js
git add directory_A/file_C.js
git add directory_A/file_D.js
git add directory_A/file_E.js
git add directory_B/file_A.js
git add directory_C/inner_directory_C/file_A.js

Tig is a great tool in relieving this agony. Tig is a user interface in the command line that allows you to easily add files to your commit by the click of a button.

1. Install Tig (for Mac and homebrew users):

brew install tig

For other users, see https://github.com/jonas/tig for installation instructions.

2. In the command line, bring up Tig:

tig status

3. You’ll be prompted with a screen like so:

To add a file to your commit, use the arrow key to highlight that file, then press “u” to add it. Highlight that file again and press “u” to remove it from your commit.

4. Exit Tig by pressing “q.” You’ll see the normal terminal screen again.

5. Try typing “git status.” The files you added! It’s all there!

6. Continue with your git commit like normal.

git commit -m "Some commit message here"

7. Dig Tig.  🙂