Initial commit

- Phaser from Bower - Basic game (game and preloader states)
cloakedninjas · Dec 8, 2015 · 7856f49 · 7856f49
commit 7856f49
Show file tree

Hide file tree

Showing 11 changed files with 226 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+.idea
+.tscache
+src/scripts/.baseDir.ts
+node_modules
+bower_components
+public
diff --git a/bower.json b/bower.json
@@ -0,0 +1,28 @@
+{
+  "name": "phaser-typescript-boilerplate",
+  "version": "1.0.0",
+  "homepage": "https://github.com/cloakedninjas/phaser-typescript-boilerplate",
+  "authors": [
+    "cloakedninjas <[email protected]>"
+  ],
+  "description": "Boilerplate for Phaser using Typescript",
+  "moduleType": [
+    "amd"
+  ],
+  "keywords": [
+    "phaser",
+    "typescript",
+    "boilerplate"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "phaser": "~2.4.4"
+  }
+}
diff --git a/gruntfile.js b/gruntfile.js
@@ -0,0 +1,65 @@
+module.exports = function (grunt) {
+    grunt.initConfig({
+        ts: {
+            dev: {
+                src: ['src/scripts/**/*.ts'],
+                dest: 'public/js',
+                options: {
+                    module: 'amd', //or commonjs
+                    target: 'es5', //or es3
+                    sourceMap: false,
+                    declaration: false
+                }
+            }
+        },
+
+        copy: {
+            dev: {
+                files: [
+                    {
+                        expand: true,
+                        cwd: 'src',
+                        src: [
+                            'assets/**'
+                        ],
+                        dest: 'public/'
+                    },
+                    {
+                        src: 'src/index.html',
+                        dest: 'public/index.html'
+                    },
+                    {
+                        src: 'bower_components/phaser/build/custom/phaser-no-physics.js',
+                        dest: 'public/vendor/phaser/phaser.js'
+                    }
+                ]
+            }
+        },
+
+        clean: {
+            dev: ['public/**/*']
+        },
+
+        watch: {
+            scripts: {
+                files: ['src/**/*'],
+                tasks: ['dev'],
+                options: {
+                    spawn: false,
+                    debounceDelay: 250
+                }
+            }
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-ts');
+    grunt.loadNpmTasks('grunt-contrib-copy');
+    grunt.loadNpmTasks('grunt-contrib-clean');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+
+    grunt.registerTask('dev', [
+        'clean:dev',
+        'ts:dev',
+        'copy:dev'
+    ]);
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "phaser-typescript-boilerplate",
+  "version": "1.0.0",
+  "description": "Boilerplate for Phaser using Typescript",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloakedninjas/phaser-typescript-boilerplate.git"
+  },
+  "author": "cloakedninjas",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cloakedninjas/phaser-typescript-boilerplate/issues"
+  },
+  "homepage": "https://github.com/cloakedninjas/phaser-typescript-boilerplate#readme",
+  "dependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-clean": "^0.7.0",
+    "grunt-contrib-copy": "^0.8.2",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-ts": "^5.2.0"
+  }
+}
diff --git a/src/assets/images/phaser-logo.png b/src/assets/images/phaser-logo.png
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
+    <title>Phaser Boilerplate</title>
+
+    <style>
+        html, body {
+            margin: 0;
+        }
+    </style>
+</head>
+<body>
+
+<script src="vendor/phaser/phaser.js"></script>
+
+<script src="js/state/preloader.js"></script>
+<script src="js/state/game.js"></script>
+
+<script src="js/entity/preload-bar.js"></script>
+
+<script src="js/game.js"></script>
+
+<script type="text/javascript">
+    window.addEventListener("load", function () {
+        window.game = new Game();
+    });
+</script>
+</body>
+</html>
diff --git a/src/refs.d.ts b/src/refs.d.ts
@@ -0,0 +1,2 @@
+/// <reference path="../bower_components/phaser/typescript/phaser.comments.d.ts" />
+/// <reference path="../bower_components/phaser/typescript/pixi.comments.d.ts" />
diff --git a/src/scripts/entity/preload-bar.ts b/src/scripts/entity/preload-bar.ts
@@ -0,0 +1,14 @@
+module Namespace.Entity {
+    export class PreloadBar {
+        game:Game;
+
+        constructor(game) {
+            this.game = game;
+        }
+
+        setFillPercent(percent:number) {
+
+        }
+
+    }
+}
diff --git a/src/scripts/game.ts b/src/scripts/game.ts
@@ -0,0 +1,21 @@
+/// <reference path="../refs.d.ts" />
+
+module Namespace {
+    export class Game extends Phaser.Game {
+
+        constructor() {
+            super({
+                width: window.innerWidth,
+                height: window.innerHeight,
+                renderer: Phaser.AUTO
+            });
+
+            this.state.add('preloader', State.Preloader, true);
+            this.state.add('game', State.Game);
+        }
+    }
+}
+
+// export Game to window
+var Game = Namespace.Game;
+
diff --git a/src/scripts/state/game.ts b/src/scripts/state/game.ts
@@ -0,0 +1,9 @@
+module Namespace.State {
+    export class Game extends Phaser.State {
+        create() {
+            var img = this.add.sprite(this.game.world.centerX, this.game.world.centerY, 'phaser-logo');
+            img.anchor.x = 0.5;
+            img.anchor.y = 0.5;
+        }
+    }
+}
diff --git a/src/scripts/state/preloader.ts b/src/scripts/state/preloader.ts
@@ -0,0 +1,23 @@
+module Namespace.State {
+    export class Preloader extends Phaser.State {
+        loadingBar:Entity.PreloadBar;
+
+        preload() {
+            this.loadingBar = new Entity.PreloadBar(this.game);
+            this.load.image('phaser-logo', 'assets/images/phaser-logo.png');
+        }
+
+        create() {
+            var tween = this.game.add.tween(this.loadingBar).to({alpha: 0}, 1000, Phaser.Easing.Linear.None, true);
+            tween.onComplete.add(this.startGame, this);
+        }
+
+        startGame() {
+            this.game.state.start('game', true);
+        }
+
+        loadUpdate() {
+            this.loadingBar.setFillPercent(this.load.progress);
+        }
+    }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference path="../bower_components/phaser/typescript/phaser.comments.d.ts" />
		/// <reference path="../bower_components/phaser/typescript/pixi.comments.d.ts" />