├── css └── main.css ├── .gitignore ├── .DS_Store ├── js ├── .DS_Store ├── boot.js ├── game.js ├── title.js ├── load.js └── play.js ├── assets ├── .DS_Store ├── sounds │ └── hit.wav ├── sprites │ ├── .DS_Store │ ├── world.png │ ├── characters.png │ └── interface │ │ └── lifebar.png └── maps │ ├── room1.csv │ ├── room1.tmx │ └── room1.json ├── README.md └── index.html /css/main.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /js/vendor/phaser.js 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ignoreintuition/PhaserTutorial/HEAD/.DS_Store -------------------------------------------------------------------------------- /js/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ignoreintuition/PhaserTutorial/HEAD/js/.DS_Store -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ignoreintuition/PhaserTutorial/HEAD/assets/.DS_Store -------------------------------------------------------------------------------- /assets/sounds/hit.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ignoreintuition/PhaserTutorial/HEAD/assets/sounds/hit.wav -------------------------------------------------------------------------------- /assets/sprites/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ignoreintuition/PhaserTutorial/HEAD/assets/sprites/.DS_Store -------------------------------------------------------------------------------- /assets/sprites/world.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ignoreintuition/PhaserTutorial/HEAD/assets/sprites/world.png -------------------------------------------------------------------------------- /assets/sprites/characters.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ignoreintuition/PhaserTutorial/HEAD/assets/sprites/characters.png -------------------------------------------------------------------------------- /assets/sprites/interface/lifebar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ignoreintuition/PhaserTutorial/HEAD/assets/sprites/interface/lifebar.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PhaserTutorial 2 | 3 | A framework for creating a browser based game using the Phaser library. 4 | 5 | A companion framework to Youtube video series 6 | -------------------------------------------------------------------------------- /js/boot.js: -------------------------------------------------------------------------------- 1 | //boot.js 2 | 3 | var bootState = { 4 | create: function () { 5 | game.physics.startSystem(Phaser.Physics.ARCADE); 6 | game.state.start('load'); 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /js/game.js: -------------------------------------------------------------------------------- 1 | //game.js 2 | 3 | var game = new Phaser.Game(240, 180, Phaser.AUTO, null, 'gameDiv'); 4 | 5 | //add each game state 6 | 7 | game.state.add('boot', bootState); 8 | game.state.add('load', loadState); 9 | game.state.add('title', titleState); 10 | game.state.add('play', playState); 11 | 12 | //call the boot state 13 | game.state.start('boot'); 14 | -------------------------------------------------------------------------------- /js/title.js: -------------------------------------------------------------------------------- 1 | var titleState = { 2 | create: function (){ 3 | // var nameLabel = game.add.text(160, 80, "Click anywhere to start", { 4 | // font: '14px Space Mono', fill: '#ffffff' 5 | // }); 6 | // game.input.activePointer.capture = true; 7 | game.state.start('play') 8 | 9 | }, 10 | update: function(){ 11 | // if (game.input.activePointer.isDown) { 12 | // } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Game 13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /js/load.js: -------------------------------------------------------------------------------- 1 | //load.js 2 | var loadState={ 3 | preload: function(){ 4 | var loadingLabel = game.add.text(80, 150, 'loading...', {font: '30px Courier', fill: '#ffffff'}); 5 | 6 | game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; 7 | game.scale.PageAlignHorizonally = true; 8 | game.scale.PageAlignVertically = true; 9 | game.stage.backgroundColor = '#000000'; 10 | 11 | /**** Load graphics assets ****/ 12 | game.load.spritesheet('characters', 'assets/sprites/characters.png', 24, 24); 13 | game.load.image('lifebar', 'assets/sprites/interface/lifebar.png'); 14 | game.load.tilemap('level', 'assets/maps/room1.json', null, Phaser.Tilemap.TILED_JSON); 15 | game.load.image('tiles', 'assets/sprites/world.png'); 16 | 17 | /**** Load audio assets ****/ 18 | game.load.audio('hit', 'assets/sounds/hit.wav'); 19 | 20 | }, 21 | create: function(){ 22 | game.state.start('title'); 23 | } 24 | }; 25 | -------------------------------------------------------------------------------- /assets/maps/room1.csv: -------------------------------------------------------------------------------- 1 | 223,218,218,218,218,218,218,218,219,70,217,218,218,218,218,218,218,218,218,224 2 | 221,70,70,72,70,70,70,70,70,245,70,70,70,70,70,70,70,70,70,221 3 | 221,70,70,70,70,70,70,70,70,245,70,70,70,70,70,70,70,70,70,221 4 | 221,70,70,70,70,70,70,70,70,245,70,70,70,70,70,72,70,70,70,221 5 | 221,70,70,70,70,70,70,70,70,245,70,70,70,70,70,70,70,70,70,221 6 | 221,70,70,70,70,70,245,245,245,245,245,245,245,70,70,70,70,73,70,221 7 | 221,70,70,70,70,70,245,245,245,245,245,245,245,70,70,70,70,70,70,221 8 | 221,70,70,70,70,70,245,245,245,245,245,245,245,70,70,70,70,70,70,221 9 | 221,70,70,70,70,70,245,245,245,245,245,245,245,70,70,70,70,70,70,221 10 | 221,70,70,70,70,70,245,245,245,245,245,245,245,70,70,70,70,70,70,221 11 | 221,70,70,70,72,70,70,70,70,70,70,70,70,70,70,70,70,70,70,221 12 | 221,70,70,70,70,70,70,70,70,70,70,70,70,70,70,70,70,72,70,221 13 | 221,70,70,70,70,70,70,70,70,70,70,70,70,70,70,70,70,70,70,221 14 | 221,70,70,70,70,70,70,70,70,70,70,70,70,70,70,70,70,70,70,221 15 | 225,218,218,218,218,218,218,218,218,218,218,218,218,218,218,218,218,218,218,226 16 | -------------------------------------------------------------------------------- /assets/maps/room1.tmx: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 4AAAANsAAADbAAAA2wAAANsAAADbAAAA2wAAANsAAADcAAAARwAAANoAAADbAAAA2wAAANsAAADbAAAA2wAAANsAAADbAAAA2wAAAOEAAADeAAAARwAAAEcAAABJAAAARwAAAEcAAABHAAAARwAAAEcAAAD2AAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAA3gAAAN4AAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAPYAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAADeAAAA3gAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAA9gAAAEcAAABHAAAARwAAAEcAAABHAAAASQAAAEcAAABHAAAARwAAAN4AAADeAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAAD2AAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAA3gAAAN4AAABHAAAARwAAAEcAAABHAAAARwAAAPYAAAD2AAAA9gAAAPYAAAD2AAAA9gAAAPYAAABHAAAARwAAAEcAAABHAAAASgAAAEcAAADeAAAA3gAAAEcAAABHAAAARwAAAEcAAABHAAAA9gAAAPYAAAD2AAAA9gAAAPYAAAD2AAAA9gAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAN4AAADeAAAARwAAAEcAAABHAAAARwAAAEcAAAD2AAAA9gAAAPYAAAD2AAAA9gAAAPYAAAD2AAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAA3gAAAN4AAABHAAAARwAAAEcAAABHAAAARwAAAPYAAAD2AAAA9gAAAPYAAAD2AAAA9gAAAPYAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAADeAAAA3gAAAEcAAABHAAAARwAAAEcAAABHAAAA9gAAAPYAAAD2AAAA9gAAAPYAAAD2AAAA9gAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAN4AAADeAAAARwAAAEcAAABHAAAASQAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAA3gAAAN4AAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAASQAAAEcAAADeAAAA3gAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAN4AAADeAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAA3gAAAOIAAADbAAAA2wAAANsAAADbAAAA2wAAANsAAADbAAAA2wAAANsAAADbAAAA2wAAANsAAADbAAAA2wAAANsAAADbAAAA2wAAANsAAADjAAAA 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/maps/room1.json: -------------------------------------------------------------------------------- 1 | { "height":15, 2 | "layers":[ 3 | { 4 | "data":"4AAAANsAAADbAAAA2wAAANsAAADbAAAA2wAAANsAAADcAAAARwAAANoAAADbAAAA2wAAANsAAADbAAAA2wAAANsAAADbAAAA2wAAAOEAAADeAAAARwAAAEcAAABJAAAARwAAAEcAAABHAAAARwAAAEcAAAD2AAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAA3gAAAN4AAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAPYAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAADeAAAA3gAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAA9gAAAEcAAABHAAAARwAAAEcAAABHAAAASQAAAEcAAABHAAAARwAAAN4AAADeAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAAD2AAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAA3gAAAN4AAABHAAAARwAAAEcAAABHAAAARwAAAPYAAAD2AAAA9gAAAPYAAAD2AAAA9gAAAPYAAABHAAAARwAAAEcAAABHAAAASgAAAEcAAADeAAAA3gAAAEcAAABHAAAARwAAAEcAAABHAAAA9gAAAPYAAAD2AAAA9gAAAPYAAAD2AAAA9gAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAN4AAADeAAAARwAAAEcAAABHAAAARwAAAEcAAAD2AAAA9gAAAPYAAAD2AAAA9gAAAPYAAAD2AAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAA3gAAAN4AAABHAAAARwAAAEcAAABHAAAARwAAAPYAAAD2AAAA9gAAAPYAAAD2AAAA9gAAAPYAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAADeAAAA3gAAAEcAAABHAAAARwAAAEcAAABHAAAA9gAAAPYAAAD2AAAA9gAAAPYAAAD2AAAA9gAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAN4AAADeAAAARwAAAEcAAABHAAAASQAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAA3gAAAN4AAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAASQAAAEcAAADeAAAA3gAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAN4AAADeAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAARwAAAEcAAABHAAAA3gAAAOIAAADbAAAA2wAAANsAAADbAAAA2wAAANsAAADbAAAA2wAAANsAAADbAAAA2wAAANsAAADbAAAA2wAAANsAAADbAAAA2wAAANsAAADjAAAA", 5 | "encoding":"base64", 6 | "height":15, 7 | "name":"Tile Layer 1", 8 | "opacity":1, 9 | "type":"tilelayer", 10 | "visible":true, 11 | "width":20, 12 | "x":0, 13 | "y":0 14 | }], 15 | "nextobjectid":10, 16 | "orientation":"orthogonal", 17 | "renderorder":"right-down", 18 | "tileheight":24, 19 | "tilesets":[ 20 | { 21 | "columns":35, 22 | "firstgid":1, 23 | "image":"..\/sprites\/world.png", 24 | "imageheight":984, 25 | "imagewidth":840, 26 | "margin":0, 27 | "name":"world", 28 | "spacing":0, 29 | "tilecount":1435, 30 | "tileheight":24, 31 | "tilewidth":24, 32 | "transparentcolor":"#ff00ff" 33 | }], 34 | "tilewidth":24, 35 | "version":1, 36 | "width":20 37 | } -------------------------------------------------------------------------------- /js/play.js: -------------------------------------------------------------------------------- 1 | var playState = { 2 | player: null, 3 | mob: null, 4 | layer: null, 5 | create: function() { 6 | var self = this; 7 | 8 | var map = game.add.tilemap('level'); 9 | map.addTilesetImage('world', 'tiles'); 10 | 11 | game.world.setBounds(0, 0, 480, 360); 12 | map.setCollision([217, 218, 219, 221]); 13 | self.layer = map.createLayer('Tile Layer 1'); 14 | 15 | self.player = new Player(150, 100); 16 | game.camera.x = 300; 17 | game.camera.y = 200; 18 | game.add.existing(self.player); 19 | game.physics.enable(self.player, Phaser.Physics.ARCADE); 20 | 21 | self.mob = game.add.group(); 22 | self.mob.add(Enemy(200, 300)); 23 | self.mob.add(Enemy(400, 100)); 24 | self.mob.forEach(function(enemy, index) { 25 | game.physics.enable(enemy, Phaser.Physics.ARCADE); 26 | enemy.body.immovable = true; 27 | }); 28 | game.input.activePointer.capture = true; 29 | 30 | var t = game.add.text(0, 165, "Life", { font: "8px ", fill: "#ffffff", align: "center" }); 31 | t.fixedToCamera = true; 32 | var lifebar = game.add.sprite(20, 165, 'lifebar'); 33 | lifebar.scale.setTo(.25, .25); 34 | lifebar.fixedToCamera = true; 35 | }, 36 | render: function(){ 37 | game.debug.geom(this.bar,'#0fffff') 38 | }, 39 | update: function() { 40 | var self = this; 41 | self.player.animations.play('wait'); 42 | self.mob.forEach(function(enemy, index) { 43 | enemy.animations.play('wait'); 44 | enemy.update(); 45 | }); 46 | if (game.input.activePointer.isDown) { 47 | self.player.setDest(game.input.x - game.world.worldPosition.x, game.input.y - game.world.worldPosition.y); 48 | } 49 | self.player.update(); 50 | game.physics.arcade.collide(self.player, self.mob, function(p, e) { 51 | p.stop(); 52 | e.state = 'alarm'; 53 | }); 54 | game.physics.arcade.collide(self.player, self.layer, function() { 55 | self.player.stop(); 56 | }); 57 | } 58 | }; 59 | 60 | function Player(x, y) { 61 | var player = game.add.sprite(x, y, 'characters'); 62 | player.speed = 80 63 | player.frame = 0; 64 | player.xDest = x; 65 | player.yDest = y; 66 | player.anchor.setTo(.5, 1); 67 | player.animations.add('wait', [8, 9], 4); 68 | player.sfx = {} 69 | player.sfx.collide = game.add.audio('hit'); 70 | 71 | player.setDest = function(x, y) { 72 | player.xDest = x; 73 | player.yDest = y; 74 | }; 75 | 76 | player.update = function() { 77 | var self = this; 78 | move(self); 79 | game.camera.x = self.x - 150; 80 | game.camera.y = self.y - 100; 81 | 82 | } 83 | player.stop = function() { 84 | var self = this; 85 | self.xDest = self.x; 86 | self.yDest = self.y; 87 | player.sfx.collide.play(); 88 | 89 | } 90 | return player; 91 | }; 92 | 93 | function Enemy(x, y) { 94 | var enemy = game.add.sprite(x, y, 'characters'); 95 | enemy.state = 'patrol'; 96 | enemy.xDest = x; 97 | enemy.yDest = y; 98 | enemy.animations.add('wait', [544, 545], 4); 99 | enemy.direction = 1; 100 | enemy.frame = 544; 101 | enemy.anchor.setTo(.5, 1); 102 | enemy.scale.x = -1; 103 | 104 | enemy.goToXY = function(x, y) { 105 | enemy.xDest = x; 106 | enemy.yDest = y; 107 | } 108 | 109 | enemy.update = function() { 110 | var self = this; 111 | switch (self.state) { 112 | case 'patrol': 113 | self.speed = 40; 114 | self.patrol(); 115 | break; 116 | case 'alarm': 117 | self.speed = 0; 118 | self.stop(); 119 | break; 120 | } 121 | move(self); 122 | } 123 | 124 | enemy.stop = function() { 125 | var self = this; 126 | self.xDest = self.x; 127 | self.yDest = self.y; 128 | } 129 | 130 | enemy.patrol = function() { 131 | var self = this; 132 | if (Math.floor(self.x / 10) == Math.floor(self.xDest / 10)) { 133 | self.direction = self.direction * -1; 134 | self.goToXY(self.x + self.direction * 100); 135 | } 136 | } 137 | return enemy; 138 | } 139 | 140 | // Helper Functions 141 | function move(self){ 142 | if (Math.floor(self.x / 10) == Math.floor(self.xDest / 10)) { 143 | self.body.velocity.x = 0; 144 | } else if (Math.floor(self.x) < Math.floor(self.xDest)) { 145 | self.body.velocity.x = self.speed; 146 | self.scale.x = -1; 147 | } else if (Math.floor(self.x) > Math.floor(self.xDest)) { 148 | self.body.velocity.x = -self.speed; 149 | self.scale.x = 1; 150 | } 151 | if (Math.floor(self.y / 10) === Math.floor(self.yDest / 10)) { 152 | self.body.velocity.y = 0; 153 | } else if (Math.floor(self.y) < Math.floor(self.yDest)) { 154 | self.body.velocity.y = self.speed; 155 | } else if (Math.floor(self.y) > Math.floor(self.yDest)) { 156 | self.body.velocity.y = -self.speed; 157 | } 158 | } 159 | --------------------------------------------------------------------------------