Working on creating a test project in typescript using the Template JS and Breakout game. More to come

wip/TS Tests/template_breakout/Boot.js

@@ -0,0 +1,40 @@
+var __extends = this.__extends || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    __.prototype = b.prototype;
+    d.prototype = new __();
+};
+/// <reference path="phaser.d.ts" />
+var BasicGame;
+(function (BasicGame) {
+    var Boot = (function (_super) {
+        __extends(Boot, _super);
+        function Boot() {
+            _super.apply(this, arguments);
+        }
+        Boot.prototype.preload = function () {
+            this.load.image("preloaderBackground", "assets/preloader_background.gif", false);
+            this.load.image("preloaderBar", "assets/preloadr_bar.png", false);
+        };
+        Boot.prototype.create = function () {
+            this.game.input.maxPointers = 1;
+
+            if (this.game.device.desktop) {
+                this.game.stage.scale.pageAlignHorizontally = true;
+            } else {
+                this.game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;
+                this.game.stage.scale.minWidth = 480;
+                this.game.stage.scale.minHeight = 260;
+                this.game.stage.scale.maxWidth = 1024;
+                this.game.stage.scale.maxHeight = 768;
+                this.game.stage.scale.forceLandscape = true;
+                this.game.stage.scale.pageAlignHorizontally = true;
+                this.game.stage.scale.setScreenSize(true);
+            }
+
+            this.game.state.start("Preloader");
+        };
+        return Boot;
+    })(Phaser.State);
+    BasicGame.Boot = Boot;
+})(BasicGame || (BasicGame = {}));

wip/TS Tests/template_breakout/Boot.ts

@@ -0,0 +1,32 @@
+/// <reference path="phaser.d.ts" />
+module BasicGame
+{
+	export class Boot extends Phaser.State{
+		preload() {
+			this.load.image("preloaderBackground","assets/preloader_background.gif",false);
+			this.load.image("preloaderBar","assets/preloadr_bar.png",false);
+		}
+		create() {
+			this.game.input.maxPointers = 1;
+			//this.game.stage.  disableVisibilityChange is missing
+
+			if( this.game.device.desktop )
+			{
+				this.game.stage.scale.pageAlignHorizontally = true;
+			}
+			else
+			{
+				this.game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;
+				this.game.stage.scale.minWidth = 480;
+				this.game.stage.scale.minHeight = 260;
+				this.game.stage.scale.maxWidth = 1024;
+				this.game.stage.scale.maxHeight = 768;
+				this.game.stage.scale.forceLandscape = true;
+				this.game.stage.scale.pageAlignHorizontally = true;
+				this.game.stage.scale.setScreenSize( true );
+			}
+
+			this.game.state.start("Preloader");
+		}
+	}
+}

wip/TS Tests/template_breakout/Main.js

@@ -0,0 +1,13 @@
+/// <reference path="phaser.d.ts" />
+/// <reference path="Boot.ts" />
+/// <reference path="Preloader.ts" />
+/// <reference path="MainMenu.ts" />
+window.onload = function () {
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, 'gameContainer', null, false, false);
+
+    game.state.add("Boot", BasicGame.Boot, false);
+    game.state.add("Preloader", BasicGame.Preloader, false);
+    game.state.add("MainMenu", BasicGame.MainMenu, false);
+
+    game.state.start("Boot");
+};

wip/TS Tests/template_breakout/Main.ts

@@ -0,0 +1,16 @@
+/// <reference path="phaser.d.ts" />
+/// <reference path="Boot.ts" />
+/// <reference path="Preloader.ts" />
+/// <reference path="MainMenu.ts" />
+
+window.onload = function() {
+	var game:Phaser.Game = new Phaser.Game(800, 600, Phaser.AUTO, 'gameContainer', null, false, false);
+
+	game.state.add("Boot", BasicGame.Boot, false);
+	game.state.add("Preloader", BasicGame.Preloader, false);
+	game.state.add("MainMenu", BasicGame.MainMenu, false );
+
+	game.state.start("Boot");
+}
+
+

wip/TS Tests/template_breakout/MainMenu.js

@@ -0,0 +1,31 @@
+/// <reference path="phaser.d.ts" />
+var __extends = this.__extends || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    __.prototype = b.prototype;
+    d.prototype = new __();
+};
+var BasicGame;
+(function (BasicGame) {
+    var MainMenu = (function (_super) {
+        __extends(MainMenu, _super);
+        function MainMenu() {
+            _super.apply(this, arguments);
+        }
+        MainMenu.prototype.create = function () {
+            this.music = this.add.audio("titleMusic", 1, false);
+            this.music.play("titleMusic", 0);
+
+            this.add.sprite(0, 0, "titlepage");
+
+            this.playButton = this.add.button(200, 300, "playButton", this.startGame, 1, 1, 1);
+        };
+
+        MainMenu.prototype.startGame = function () {
+            this.music.stop();
+            alert("START THE GAME!");
+        };
+        return MainMenu;
+    })(Phaser.State);
+    BasicGame.MainMenu = MainMenu;
+})(BasicGame || (BasicGame = {}));

wip/TS Tests/template_breakout/MainMenu.ts

@@ -0,0 +1,25 @@
+/// <reference path="phaser.d.ts" />
+
+module BasicGame
+{
+	export class MainMenu extends Phaser.State
+	{
+		music:Phaser.Sound;
+		playButton:Phaser.Button;
+
+		create():void {
+			
+			this.music = this.add.audio("titleMusic",1,false);
+			this.music.play("titleMusic",0);
+
+			this.add.sprite(0,0,"titlepage");
+
+			this.playButton = this.add.button(200,300,"playButton", this.startGame, 1, 1, 1);
+		}
+
+		startGame():void {
+			this.music.stop();
+			alert("START THE GAME!");
+		}
+	}
+}

wip/TS Tests/template_breakout/Preloader.js

@@ -0,0 +1,45 @@
+var __extends = this.__extends || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    __.prototype = b.prototype;
+    d.prototype = new __();
+};
+/// <reference path="phaser.d.ts" />
+var BasicGame;
+(function (BasicGame) {
+    var Preloader = (function (_super) {
+        __extends(Preloader, _super);
+        function Preloader() {
+            _super.apply(this, arguments);
+            this.background = null;
+            this.preloadBar = null;
+            this.ready = false;
+        }
+        Preloader.prototype.preload = function () {
+            this.background = this.add.sprite(0.0, 0.0, "preloaderBackground");
+            this.preloadBar = this.add.sprite(300, 400, "preloaderBar");
+
+            this.load.setPreloadSprite(this.preloadBar, 0);
+
+            this.load.image("titlepage", "assets/title.jpg", false);
+            this.load.image("playButton", "assets/play_button.png", false);
+            this.load.audio("titleMusic", ["assets/main_menu.mp3", "assets/main_menu.ogg"], false);
+
+            this.load.atlas("breakout", "assets/breakout.png", "assets/breakout.json");
+            this.load.image("starfield", "assets/starfield.jpg", false);
+        };
+
+        Preloader.prototype.create = function () {
+            this.preloadBar.cropEnabled = false;
+        };
+
+        Preloader.prototype.update = function () {
+            if (this.cache.isSoundDecoded("titleMusic") && this.ready == false) {
+                this.ready = true;
+                this.game.state.start("MainMenu");
+            }
+        };
+        return Preloader;
+    })(Phaser.State);
+    BasicGame.Preloader = Preloader;
+})(BasicGame || (BasicGame = {}));

wip/TS Tests/template_breakout/Preloader.ts

@@ -0,0 +1,35 @@
+/// <reference path="phaser.d.ts" />
+module BasicGame
+{
+	export class Preloader extends Phaser.State {
+		background:Phaser.Sprite = null;
+		preloadBar:Phaser.Sprite = null;
+		ready:boolean = false;
+
+		preload():void {
+			this.background = this.add.sprite(0.0,0.0,"preloaderBackground");
+			this.preloadBar = this.add.sprite(300,400,"preloaderBar");
+
+			this.load.setPreloadSprite( this.preloadBar, 0 );
+
+			this.load.image("titlepage","assets/title.jpg",false);
+			this.load.image("playButton","assets/play_button.png",false);
+			this.load.audio("titleMusic",["assets/main_menu.mp3","assets/main_menu.ogg"],false);
+
+			this.load.atlas("breakout","assets/breakout.png","assets/breakout.json");
+			this.load.image("starfield","assets/starfield.jpg",false);
+		}
+
+		create():void {
+			this.preloadBar.cropEnabled = false;
+		}
+
+		update():void {
+			if( this.cache.isSoundDecoded("titleMusic") && this.ready == false )
+			{
+				this.ready = true;
+				this.game.state.start("MainMenu");
+			}
+		}
+	}
+}

wip/TS Tests/template_breakout/assets/breakout.json

@@ -0,0 +1,236 @@
+{"frames": [
+
+{
+	"filename": "ball_1.png",
+	"frame": {"x":218,"y":38,"w":16,"h":16},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
+	"sourceSize": {"w":16,"h":16}
+},
+{
+	"filename": "ball_2.png",
+	"frame": {"x":218,"y":20,"w":16,"h":16},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
+	"sourceSize": {"w":16,"h":16}
+},
+{
+	"filename": "ball_3.png",
+	"frame": {"x":218,"y":2,"w":16,"h":16},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
+	"sourceSize": {"w":16,"h":16}
+},
+{
+	"filename": "ball_4.png",
+	"frame": {"x":200,"y":38,"w":16,"h":16},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
+	"sourceSize": {"w":16,"h":16}
+},
+{
+	"filename": "ball_5.png",
+	"frame": {"x":200,"y":20,"w":16,"h":16},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
+	"sourceSize": {"w":16,"h":16}
+},
+{
+	"filename": "brick_1_1.png",
+	"frame": {"x":98,"y":21,"w":32,"h":17},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":17},
+	"sourceSize": {"w":32,"h":17}
+},
+{
+	"filename": "brick_1_2.png",
+	"frame": {"x":98,"y":2,"w":32,"h":17},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":17},
+	"sourceSize": {"w":32,"h":17}
+},
+{
+	"filename": "brick_1_3.png",
+	"frame": {"x":270,"y":17,"w":30,"h":13},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":1,"y":1,"w":30,"h":13},
+	"sourceSize": {"w":32,"h":17}
+},
+{
+	"filename": "brick_1_4.png",
+	"frame": {"x":54,"y":52,"w":24,"h":9},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":4,"y":4,"w":24,"h":9},
+	"sourceSize": {"w":32,"h":17}
+},
+{
+	"filename": "brick_2_1.png",
+	"frame": {"x":236,"y":19,"w":32,"h":15},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":15},
+	"sourceSize": {"w":32,"h":15}
+},
+{
+	"filename": "brick_2_2.png",
+	"frame": {"x":236,"y":2,"w":32,"h":15},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":15},
+	"sourceSize": {"w":32,"h":15}
+},
+{
+	"filename": "brick_2_3.png",
+	"frame": {"x":270,"y":2,"w":30,"h":13},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":1,"y":0,"w":30,"h":13},
+	"sourceSize": {"w":32,"h":15}
+},
+{
+	"filename": "brick_2_4.png",
+	"frame": {"x":236,"y":50,"w":24,"h":11},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":4,"y":3,"w":24,"h":11},
+	"sourceSize": {"w":32,"h":15}
+},
+{
+	"filename": "brick_3_1.png",
+	"frame": {"x":166,"y":20,"w":32,"h":16},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":16},
+	"sourceSize": {"w":32,"h":16}
+},
+{
+	"filename": "brick_3_2.png",
+	"frame": {"x":166,"y":2,"w":32,"h":16},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":16},
+	"sourceSize": {"w":32,"h":16}
+},
+{
+	"filename": "brick_3_3.png",
+	"frame": {"x":236,"y":36,"w":30,"h":12},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":1,"y":2,"w":30,"h":12},
+	"sourceSize": {"w":32,"h":16}
+},
+{
+	"filename": "brick_3_4.png",
+	"frame": {"x":28,"y":52,"w":24,"h":10},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":4,"y":3,"w":24,"h":10},
+	"sourceSize": {"w":32,"h":16}
+},
+{
+	"filename": "one.png",
+	"frame": {"x":66,"y":2,"w":30,"h":48},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":1,"y":16,"w":30,"h":48},
+	"sourceSize": {"w":32,"h":64}
+},
+{
+	"filename": "paddle_big.png",
+	"frame": {"x":98,"y":40,"w":48,"h":16},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":48,"h":16},
+	"sourceSize": {"w":48,"h":16}
+},
+{
+	"filename": "paddle_small.png",
+	"frame": {"x":148,"y":38,"w":32,"h":16},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":16},
+	"sourceSize": {"w":32,"h":16}
+},
+{
+	"filename": "power_down.png",
+	"frame": {"x":200,"y":2,"w":16,"h":16},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
+	"sourceSize": {"w":16,"h":16}
+},
+{
+	"filename": "power_up.png",
+	"frame": {"x":182,"y":38,"w":16,"h":16},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
+	"sourceSize": {"w":16,"h":16}
+},
+{
+	"filename": "brick_4_1.png",
+	"frame": {"x":132,"y":20,"w":32,"h":16},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":16},
+	"sourceSize": {"w":32,"h":16}
+},
+{
+	"filename": "brick_4_2.png",
+	"frame": {"x":132,"y":2,"w":32,"h":16},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":16},
+	"sourceSize": {"w":32,"h":16}
+},
+{
+	"filename": "brick_4_3.png",
+	"frame": {"x":270,"y":32,"w":30,"h":12},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":1,"y":2,"w":30,"h":12},
+	"sourceSize": {"w":32,"h":16}
+},
+{
+	"filename": "brick_4_4.png",
+	"frame": {"x":2,"y":52,"w":24,"h":10},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":4,"y":3,"w":24,"h":10},
+	"sourceSize": {"w":32,"h":16}
+},
+{
+	"filename": "three.png",
+	"frame": {"x":34,"y":2,"w":30,"h":48},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":1,"y":0,"w":30,"h":48},
+	"sourceSize": {"w":32,"h":48}
+},
+{
+	"filename": "two.png",
+	"frame": {"x":2,"y":2,"w":30,"h":48},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":1,"y":16,"w":30,"h":48},
+	"sourceSize": {"w":32,"h":64}
+}],
+"meta": {
+	"app": "http://www.texturepacker.com",
+	"version": "1.0",
+	"image": "breakout.png",
+	"format": "RGBA8888",
+	"size": {"w":302,"h":64},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:c510ff2f709e8d175b059cd1cbe64773$"
+}
+}