Forcing Landscape in Phonegap and Phaser

While I was working on my mobile game, I came across an issue with forcing landscape and setting the correct screen width and height.  After a few combinations of tries, I came up with this solution.  This specifically works for Phaser JS projects that use Phonegap to make iOS apps.

Directory structure:

- js
-- game.js

config.xml (Phonegap):

This will keep the mobile app in landscape orientation.

<?xml version="1.0" encoding="UTF-8" ?>
 <preference name="orientation" value="landscape" />

index.html (Phaser JS):

Note the <meta> tag and the logic in the <script> tag.  These will set the appropriate width and height in your app.

 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1,minimal-ui">
 #game_div {
 /* removed width: 320px */
 <div id="game_div"></div>
<script type="text/javascript" src="js/phonegap.js"></script>
<script type="text/javascript" src="js/game.js"></script>
 document.getElementById('game_div').style.height = (screen.height > screen.width) ? screen.width : screen.height;
 document.getElementById('game_div').style.width = (screen.width > screen.height) ? screen.height : screen.width;

game.js (Phaser JS):

Elements in your game might need these width and height variables.  Screen sizes shouldn’t be hardcoded, as they vary from device to device, so use screen.width and screen.height.

// var GAME_WIDTH = 568;
// var GAME_HEIGHT = 320;
var GAME_WIDTH = screen.height;
var GAME_HEIGHT = screen.width;

Scuba Chibi: First Enemy Art

Slowly but surely, I’m working on the enemy art.  Here’s one out of three.


Pencil drawing


Scanned and outlined as vector art

My intent is to make the enemies look as cute as possible.  As far as what tools and software I’m using, I have an old 4×5 Wacom Graphire4 and am drawing in Adobe Flash Professional CS6.