├── .babelrc ├── .gitignore ├── README.md ├── assets ├── sprites │ └── mushroom.png └── tilemaps │ ├── desert.json │ └── tmw_desert_spacing.png ├── index.html ├── package.json ├── src ├── index.html ├── main.ts ├── phaser.d.ts └── scenes │ └── PlayScene.ts ├── tsconfig.json ├── webpack.config.js └── webpack.production.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript" 5 | ], 6 | "plugins": [ 7 | "@babel/plugin-proposal-class-properties" 8 | ] 9 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | build/ 4 | .vscode/ 5 | .idea 6 | *.log 7 | src_old 8 | *.old.js 9 | phaserTilemapfix 10 | *.zip 11 | *.xcf 12 | *.wav 13 | legacy* 14 | *.txt 15 | dump/ 16 | *.docx 17 | *.patch 18 | *.bak* 19 | *.old* 20 | higherVolume/ 21 | yarn.lock 22 | package-lock.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Phaser 3 Typescript Webpack Boilerplate 2 | ![screenshot](https://i.imgur.com/XXyX8KO.png) 3 | ![screenshot](https://i.imgur.com/YuzMdYi.png) 4 | ![screenshot](https://i.imgur.com/GIdIa5q.png) 5 | 6 | # Setup 7 | You’ll need to install a few things before you have a working copy of the project. 8 | 9 | ## 1. Clone this repo: 10 | 11 | Navigate into your workspace directory. 12 | 13 | Run: 14 | 15 | ```git clone https://github.com/troyedwardsjr/phaser3-typescript-webpack.git``` 16 | 17 | ## 2. Install node.js and npm: 18 | 19 | https://nodejs.org/en/ 20 | 21 | 22 | ## 3. Install dependencies (optionally you could install [yarn](https://yarnpkg.com/)): 23 | 24 | Navigate to the cloned repo’s directory. 25 | 26 | Run: 27 | 28 | ```npm install``` 29 | 30 | or if you choose yarn, just run ```yarn``` 31 | 32 | ## 4. Run the development server: 33 | 34 | Run: 35 | 36 | ```npm run dev``` 37 | 38 | This will run a server so you can run the game in a browser. 39 | 40 | Open your browser and enter localhost:3000 into the address bar. 41 | 42 | Also this will start a watch process, so you can change the source and the process will recompile and refresh the browser 43 | 44 | 45 | ## Build for deployment: 46 | 47 | Run: 48 | 49 | ```npm run deploy``` 50 | 51 | This will optimize and minimize the compiled bundle. 52 | 53 | ## Credits 54 | 55 | This work is based off of several existing repos: 56 | 57 | https://github.com/nkholski/phaser3-es6-webpack 58 | 59 | https://github.com/lean/phaser-es6-webpack 60 | -------------------------------------------------------------------------------- /assets/sprites/mushroom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troyedwardsjr/phaser3-typescript-webpack/6e9901d5ce496dc37d36684553bb1eca512c16c9/assets/sprites/mushroom.png -------------------------------------------------------------------------------- /assets/tilemaps/desert.json: -------------------------------------------------------------------------------- 1 | { "height":40, 2 | "infinite":false, 3 | "layers":[ 4 | { 5 | "data":[30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 14, 15, 16, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 46, 14, 15, 16, 30, 31, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 14, 15, 16, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 31, 22, 23, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 1, 2, 3, 30, 30, 31, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 25, 26, 26, 26, 26, 26, 26, 26, 26, 26, 26, 26, 27, 9, 10, 11, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 35, 9, 10, 11, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 40, 30, 30, 30, 30, 33, 34, 36, 42, 37, 34, 34, 34, 34, 34, 34, 34, 35, 9, 10, 11, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 33, 34, 34, 34, 34, 34, 34, 34, 35, 9, 10, 11, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 38, 30, 30, 33, 34, 35, 30, 33, 34, 34, 34, 34, 34, 34, 34, 35, 9, 10, 11, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 48, 38, 30, 30, 30, 30, 33, 34, 44, 26, 45, 34, 34, 34, 34, 34, 34, 34, 35, 9, 10, 11, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 40, 30, 30, 30, 40, 30, 30, 30, 33, 34, 34, 34, 34, 34, 34, 34, 36, 42, 37, 34, 35, 9, 10, 11, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 40, 30, 30, 30, 30, 40, 38, 30, 30, 38, 30, 33, 34, 34, 34, 34, 34, 34, 34, 44, 26, 45, 34, 35, 9, 10, 11, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 39, 30, 30, 30, 38, 30, 40, 30, 30, 30, 33, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 35, 9, 10, 11, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 39, 30, 30, 30, 30, 30, 30, 30, 41, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 43, 9, 10, 11, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 7, 7, 8, 1, 2, 2, 2, 2, 2, 2, 2, 2, 3, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 29, 10, 11, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 15, 15, 16, 9, 10, 10, 10, 10, 10, 10, 10, 10, 11, 9, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 11, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 23, 23, 24, 17, 18, 18, 18, 18, 18, 18, 18, 18, 19, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 39, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 32, 31, 30, 30, 30, 30, 39, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 32, 39, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 25, 26, 26, 26, 26, 26, 26, 26, 26, 26, 26, 26, 27, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 46, 30, 33, 34, 34, 34, 34, 34, 34, 34, 34, 36, 42, 37, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 34, 34, 34, 34, 34, 34, 34, 35, 48, 33, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 47, 33, 34, 34, 34, 34, 34, 34, 34, 34, 35, 48, 33, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 39, 30, 30, 30, 33, 34, 34, 34, 34, 34, 34, 34, 34, 35, 48, 33, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 34, 34, 34, 34, 34, 34, 34, 44, 26, 45, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 47, 30, 33, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 35, 48, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 41, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 43, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 32, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 32, 30, 30, 30, 31, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 32, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30], 6 | "height":40, 7 | "name":"Ground", 8 | "opacity":1, 9 | "type":"tilelayer", 10 | "visible":true, 11 | "width":40, 12 | "x":0, 13 | "y":0 14 | }], 15 | "nextobjectid":1, 16 | "orientation":"orthogonal", 17 | "renderorder":"right-down", 18 | "tiledversion":"1.1.2", 19 | "tileheight":32, 20 | "tilesets":[ 21 | { 22 | "columns":8, 23 | "firstgid":1, 24 | "image":"..\/..\/..\/..\/..\/..\/..\/..\/Program Files\/Tiled\/examples\/tmw_desert_spacing.png", 25 | "imageheight":199, 26 | "imagewidth":265, 27 | "margin":1, 28 | "name":"Desert", 29 | "spacing":1, 30 | "terrains":[ 31 | { 32 | "name":"Desert", 33 | "tile":29 34 | }, 35 | { 36 | "name":"Brick", 37 | "tile":9 38 | }, 39 | { 40 | "name":"Cobblestone", 41 | "tile":33 42 | }, 43 | { 44 | "name":"Dirt", 45 | "tile":14 46 | }], 47 | "tilecount":48, 48 | "tileheight":32, 49 | "tiles": 50 | { 51 | "0": 52 | { 53 | "terrain":[0, 0, 0, 1] 54 | }, 55 | "1": 56 | { 57 | "terrain":[0, 0, 1, 1] 58 | }, 59 | "10": 60 | { 61 | "terrain":[1, 0, 1, 0] 62 | }, 63 | "11": 64 | { 65 | "terrain":[3, 0, 3, 3] 66 | }, 67 | "12": 68 | { 69 | "terrain":[0, 3, 3, 3] 70 | }, 71 | "13": 72 | { 73 | "terrain":[0, 3, 0, 3] 74 | }, 75 | "14": 76 | { 77 | "terrain":[3, 3, 3, 3] 78 | }, 79 | "15": 80 | { 81 | "terrain":[3, 0, 3, 0] 82 | }, 83 | "16": 84 | { 85 | "terrain":[0, 1, 0, 0] 86 | }, 87 | "17": 88 | { 89 | "terrain":[1, 1, 0, 0] 90 | }, 91 | "18": 92 | { 93 | "terrain":[1, 0, 0, 0] 94 | }, 95 | "19": 96 | { 97 | "terrain":[1, 1, 1, 0] 98 | }, 99 | "2": 100 | { 101 | "terrain":[0, 0, 1, 0] 102 | }, 103 | "20": 104 | { 105 | "terrain":[1, 1, 0, 1] 106 | }, 107 | "21": 108 | { 109 | "terrain":[0, 3, 0, 0] 110 | }, 111 | "22": 112 | { 113 | "terrain":[3, 3, 0, 0] 114 | }, 115 | "23": 116 | { 117 | "terrain":[3, 0, 0, 0] 118 | }, 119 | "24": 120 | { 121 | "terrain":[0, 0, 0, 2] 122 | }, 123 | "25": 124 | { 125 | "terrain":[0, 0, 2, 2] 126 | }, 127 | "26": 128 | { 129 | "terrain":[0, 0, 2, 0] 130 | }, 131 | "27": 132 | { 133 | "terrain":[1, 0, 1, 1] 134 | }, 135 | "28": 136 | { 137 | "terrain":[0, 1, 1, 1] 138 | }, 139 | "29": 140 | { 141 | "terrain":[0, 0, 0, 0] 142 | }, 143 | "3": 144 | { 145 | "terrain":[3, 3, 3, 0] 146 | }, 147 | "30": 148 | { 149 | "probability":0.01, 150 | "terrain":[0, 0, 0, 0] 151 | }, 152 | "31": 153 | { 154 | "probability":0.01, 155 | "terrain":[0, 0, 0, 0] 156 | }, 157 | "32": 158 | { 159 | "terrain":[0, 2, 0, 2] 160 | }, 161 | "33": 162 | { 163 | "terrain":[2, 2, 2, 2] 164 | }, 165 | "34": 166 | { 167 | "terrain":[2, 0, 2, 0] 168 | }, 169 | "35": 170 | { 171 | "terrain":[2, 2, 2, 0] 172 | }, 173 | "36": 174 | { 175 | "terrain":[2, 2, 0, 2] 176 | }, 177 | "37": 178 | { 179 | "probability":0.01, 180 | "terrain":[0, 0, 0, 0] 181 | }, 182 | "38": 183 | { 184 | "probability":0.01, 185 | "terrain":[0, 0, 0, 0] 186 | }, 187 | "39": 188 | { 189 | "probability":0.01, 190 | "terrain":[0, 0, 0, 0] 191 | }, 192 | "4": 193 | { 194 | "terrain":[3, 3, 0, 3] 195 | }, 196 | "40": 197 | { 198 | "terrain":[0, 2, 0, 0] 199 | }, 200 | "41": 201 | { 202 | "terrain":[2, 2, 0, 0] 203 | }, 204 | "42": 205 | { 206 | "terrain":[2, 0, 0, 0] 207 | }, 208 | "43": 209 | { 210 | "terrain":[2, 0, 2, 2] 211 | }, 212 | "44": 213 | { 214 | "terrain":[0, 2, 2, 2] 215 | }, 216 | "45": 217 | { 218 | "probability":0, 219 | "terrain":[0, 0, 0, 0] 220 | }, 221 | "46": 222 | { 223 | "probability":0.01, 224 | "terrain":[0, 0, 0, 0] 225 | }, 226 | "47": 227 | { 228 | "probability":0.01, 229 | "terrain":[0, 0, 0, 0] 230 | }, 231 | "5": 232 | { 233 | "terrain":[0, 0, 0, 3] 234 | }, 235 | "6": 236 | { 237 | "terrain":[0, 0, 3, 3] 238 | }, 239 | "7": 240 | { 241 | "terrain":[0, 0, 3, 0] 242 | }, 243 | "8": 244 | { 245 | "terrain":[0, 1, 0, 1] 246 | }, 247 | "9": 248 | { 249 | "terrain":[1, 1, 1, 1] 250 | } 251 | }, 252 | "tilewidth":32 253 | }], 254 | "tilewidth":32, 255 | "type":"map", 256 | "version":1, 257 | "width":40 258 | } -------------------------------------------------------------------------------- /assets/tilemaps/tmw_desert_spacing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troyedwardsjr/phaser3-typescript-webpack/6e9901d5ce496dc37d36684553bb1eca512c16c9/assets/tilemaps/tmw_desert_spacing.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Phaser3 - ES6 - Webpack 7 | 8 | 9 | 10 | 11 | 12 | 19 | 20 | 21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phaser3-typescript-webpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "author": "troyedwardsjr", 6 | "main": "index.js", 7 | "scripts": { 8 | "start": "webpack", 9 | "dev": "webpack", 10 | "deploy": "webpack --config webpack.production.config.js" 11 | }, 12 | "license": "MIT", 13 | "devDependencies": { 14 | "@babel/core": "^7.0.0-rc.2", 15 | "@babel/plugin-proposal-class-properties": "^7.0.0-rc.2", 16 | "@babel/polyfill": "^7.0.0-rc.2", 17 | "@babel/preset-env": "^7.0.0-rc.2", 18 | "@babel/preset-typescript": "^7.0.0-rc.2", 19 | "awesome-typescript-loader": "^3.4.1", 20 | "babel-loader": "8.0.0-beta.2", 21 | "browser-sync": "^2.18.13", 22 | "browser-sync-webpack-plugin": "^1.2.0", 23 | "html-webpack-plugin": "^2.30.1", 24 | "raw-loader": "^0.5.1", 25 | "typescript": "^2.7.2", 26 | "webpack": "3.11.0" 27 | }, 28 | "dependencies": { 29 | "phaser": "3.11.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Phaser3 - ES6 - Webpack 7 | 8 | 9 | 10 | 11 | 12 | 19 | 20 | 21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import 'phaser'; 2 | 3 | import TestScene from './scenes/PlayScene'; 4 | 5 | const config:GameConfig = { 6 | type: Phaser.AUTO, 7 | parent: 'content', 8 | width: 640, 9 | height: 480, 10 | resolution: 1, 11 | backgroundColor: "#EDEEC9", 12 | scene: [ 13 | TestScene 14 | ] 15 | }; 16 | 17 | new Phaser.Game(config); 18 | -------------------------------------------------------------------------------- /src/scenes/PlayScene.ts: -------------------------------------------------------------------------------- 1 | class TestScene extends Phaser.Scene { 2 | player: Phaser.GameObjects.Sprite; 3 | cursors: any; 4 | 5 | constructor() { 6 | super({ 7 | key: 'TestScene' 8 | }); 9 | } 10 | 11 | preload() { 12 | this.load.tilemapTiledJSON('map', '/assets/tilemaps/desert.json'); 13 | this.load.image('Desert', '/assets/tilemaps/tmw_desert_spacing.png'); 14 | this.load.image('player', '/assets/sprites/mushroom.png'); 15 | } 16 | 17 | create() { 18 | var map:Phaser.Tilemaps.Tilemap = this.make.tilemap({ key: 'map' }); 19 | var tileset:Phaser.Tilemaps.Tileset = map.addTilesetImage('Desert'); 20 | var layer:Phaser.Tilemaps.StaticTilemapLayer = map.createStaticLayer(0, tileset, 0, 0); 21 | 22 | this.player = this.add.sprite(100, 100, 'player'); 23 | this.cursors = this.input.keyboard.createCursorKeys(); 24 | 25 | this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels); 26 | this.cameras.main.startFollow(this.player, false); 27 | } 28 | 29 | update(time: number, delta:number) { 30 | this.player.angle += 1; 31 | if (this.cursors.left.isDown) { 32 | this.player.x -= 5; 33 | } 34 | if (this.cursors.right.isDown) { 35 | this.player.x += 5; 36 | } 37 | if (this.cursors.down.isDown) { 38 | this.player.y += 5; 39 | } 40 | if (this.cursors.up.isDown) { 41 | this.player.y -= 5; 42 | } 43 | } 44 | } 45 | 46 | export default TestScene; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "sourceMap": true, 6 | "esModuleInterop": true, 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | 10 | "files": [ 11 | "src/phaser.d.ts", 12 | "src/main.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var HtmlWebpackPlugin = require('html-webpack-plugin') 4 | var BrowserSyncPlugin = require('browser-sync-webpack-plugin') 5 | 6 | // Phaser webpack config 7 | var phaserModule = path.join(__dirname, '/node_modules/phaser/') 8 | var phaser = path.join(phaserModule, 'src/phaser.js') 9 | 10 | var definePlugin = new webpack.DefinePlugin({ 11 | __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')), 12 | WEBGL_RENDERER: true, 13 | CANVAS_RENDERER: true 14 | }) 15 | 16 | module.exports = { 17 | entry: { 18 | app: [ 19 | path.resolve(__dirname, 'src/main.ts') 20 | ], 21 | vendor: ['phaser'] 22 | }, 23 | devtool: 'cheap-source-map', 24 | output: { 25 | pathinfo: true, 26 | path: path.resolve(__dirname, 'dist'), 27 | publicPath: './dist/', 28 | filename: 'bundle.js' 29 | }, 30 | watch: true, 31 | plugins: [ 32 | definePlugin, 33 | new webpack.optimize.CommonsChunkPlugin({ name: 'vendor'/* chunkName= */, filename: 'vendor.bundle.js'/* filename= */ }), 34 | new HtmlWebpackPlugin({ 35 | filename: '../index.html', 36 | template: './src/index.html', 37 | chunks: ['vendor', 'app'], 38 | chunksSortMode: 'manual', 39 | minify: { 40 | removeAttributeQuotes: false, 41 | collapseWhitespace: false, 42 | html5: false, 43 | minifyCSS: false, 44 | minifyJS: false, 45 | minifyURLs: false, 46 | removeComments: false, 47 | removeEmptyAttributes: false 48 | }, 49 | hash: false 50 | }), 51 | new BrowserSyncPlugin({ 52 | host: process.env.IP || 'localhost', 53 | port: process.env.PORT || 3000, 54 | server: { 55 | baseDir: ['./', './build'] 56 | } 57 | }) 58 | ], 59 | module: { 60 | rules: [ 61 | { 62 | test: /\.ts$/, 63 | loaders: ['babel-loader', 'awesome-typescript-loader'], 64 | include: path.join(__dirname, 'src'), 65 | }, 66 | { 67 | test: [/\.vert$/, /\.frag$/], 68 | use: 'raw-loader' 69 | } 70 | ] 71 | }, 72 | node: { 73 | fs: 'empty', 74 | net: 'empty', 75 | tls: 'empty' 76 | }, 77 | resolve: { 78 | extensions: ['.ts', '.js'], 79 | alias: { 80 | 'phaser': phaser, 81 | } 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /webpack.production.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var HtmlWebpackPlugin = require('html-webpack-plugin') 4 | 5 | // Phaser webpack config 6 | var phaserModule = path.join(__dirname, '/node_modules/phaser/') 7 | var phaser = path.join(phaserModule, 'src/phaser.js') 8 | 9 | var definePlugin = new webpack.DefinePlugin({ 10 | __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'false')), 11 | WEBGL_RENDERER: true, 12 | CANVAS_RENDERER: true 13 | }) 14 | 15 | module.exports = { 16 | entry: { 17 | app: [ 18 | path.resolve(__dirname, 'src/main.ts') 19 | ], 20 | vendor: ['phaser'] 21 | }, 22 | output: { 23 | path: path.resolve(__dirname, 'build'), 24 | publicPath: './', 25 | filename: 'js/bundle.js' 26 | }, 27 | plugins: [ 28 | definePlugin, 29 | new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), 30 | new webpack.optimize.UglifyJsPlugin({ 31 | drop_console: true, 32 | minimize: true, 33 | output: { 34 | comments: false 35 | } 36 | }), 37 | new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' /* chunkName= */, filename: 'js/vendor.bundle.js' /* filename= */ }), 38 | new HtmlWebpackPlugin({ 39 | filename: 'index.html', 40 | template: './src/index.html', 41 | chunks: ['vendor', 'app'], 42 | chunksSortMode: 'manual', 43 | minify: { 44 | removeAttributeQuotes: true, 45 | collapseWhitespace: true, 46 | html5: true, 47 | minifyCSS: true, 48 | minifyJS: true, 49 | minifyURLs: true, 50 | removeComments: true, 51 | removeEmptyAttributes: true 52 | }, 53 | hash: true 54 | }) 55 | ], 56 | module: { 57 | rules: [ 58 | { 59 | test: /\.ts$/, 60 | loaders: ['babel-loader', 'awesome-typescript-loader'], 61 | include: path.join(__dirname, 'src'), 62 | }, 63 | { 64 | test: [/\.vert$/, /\.frag$/], 65 | use: 'raw-loader' 66 | } 67 | ] 68 | }, 69 | node: { 70 | fs: 'empty', 71 | net: 'empty', 72 | tls: 'empty' 73 | }, 74 | resolve: { 75 | extensions: ['.ts', '.js'], 76 | alias: { 77 | 'phaser': phaser 78 | } 79 | } 80 | } --------------------------------------------------------------------------------