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:

main-directory
- js
-- game.js
config.xml
index.html

config.xml (Phonegap):

This will keep the mobile app in landscape orientation.

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

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.

<html>
<head>
 <meta charset="utf-8" />
 ...
 <meta name="viewport" content="width=device-width, initial-scale=1,minimal-ui">
 ...
 <style>
 ...
 #game_div {
 /* removed width: 320px */
 ...
 }
 ...
 </style>
</head>
<body>
 <div id="game_div"></div>
</body>
...
<script type="text/javascript" src="js/phonegap.js"></script>
<script type="text/javascript" src="js/game.js"></script>
...
<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;
 ...
</script>
</html>

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.

fish-pencil

Pencil drawing

fish-outline

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.