├── assets └── logo.png ├── .gitmodules ├── index.html ├── .babelrc ├── .gitignore ├── README.md ├── src └── index.ts ├── webpack.config.js ├── webpack.prod.config.js ├── LICENSE ├── package.json └── tsconfig.json /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/miasmos/phaser3-typescript-template/HEAD/assets/logo.png -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "phaser3-docs"] 2 | path = phaser3-docs 3 | url = https://github.com/photonstorm/phaser3-docs.git 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/env", 4 | "@babel/typescript" 5 | ], 6 | "plugins": [ 7 | "@babel/proposal-class-properties", 8 | "@babel/proposal-object-rest-spread" 9 | ] 10 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | dist 3 | .prettierrc 4 | 5 | # System and IDE files 6 | Thumbs.db 7 | .DS_Store 8 | .idea 9 | *.suo 10 | *.sublime-project 11 | *.sublime-workspace 12 | 13 | # Vendors 14 | node_modules/ 15 | 16 | # Build 17 | build/ 18 | /npm-debug.log 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Phaser 3 Typescript Project Template 2 | 3 | A Phaser 3 project template with Typescript support. 4 | 5 | ### Requirements 6 | 7 | [Node.js](https://nodejs.org) 8 | 9 | ## Install and run 10 | 11 | | Command | Description | 12 | | -------------------- | ------------------------------------------------------ | 13 | | `npm install` | Install dependencies | 14 | | `npm start` | Build app and launch browser | 15 | | `npm run production` | Build app with minification enabled | 16 | | `npm run type-check` | Runs tsc | 17 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import 'phaser'; 2 | declare const Phaser: any; 3 | 4 | class Game { 5 | game: Phaser.Game; 6 | 7 | constructor() { 8 | const config = { 9 | type: Phaser.AUTO, 10 | width: 800, 11 | height: 600, 12 | scene: { 13 | preload: this.preload, 14 | create: this.create, 15 | update: this.update 16 | } 17 | }; 18 | 19 | this.game = new Phaser.Game(config); 20 | } 21 | 22 | preload() { 23 | this.load.image('logo', 'assets/logo.png'); 24 | } 25 | 26 | create() { 27 | const logo = this.add.image(400, 150, 'logo'); 28 | 29 | this.tweens.add({ 30 | targets: logo, 31 | y: 450, 32 | duration: 2000, 33 | ease: 'Power2', 34 | yoyo: true, 35 | loop: -1 36 | }); 37 | } 38 | 39 | update() {} 40 | } 41 | 42 | window.onload = () => { 43 | const game: Game = new Game(); 44 | }; 45 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | module.exports = { 5 | entry: './src/index', 6 | mode: 'development', 7 | output: { 8 | path: path.resolve(__dirname, 'dist'), 9 | filename: 'app.bundle.js', 10 | publicPath: '/dist' 11 | }, 12 | 13 | resolve: { 14 | extensions: ['.ts', '.tsx', '.js', '.json'] 15 | }, 16 | 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.(tsx?)|(js)$/, 21 | exclude: /node_modules/, 22 | loader: 'babel-loader' 23 | }, 24 | { 25 | test: [/\.vert$/, /\.frag$/], 26 | use: 'raw-loader' 27 | } 28 | ] 29 | }, 30 | 31 | plugins: [ 32 | new webpack.DefinePlugin({ 33 | CANVAS_RENDERER: JSON.stringify(true), 34 | WEBGL_RENDERER: JSON.stringify(true) 35 | }), 36 | new webpack.NamedModulesPlugin() 37 | ] 38 | }; 39 | -------------------------------------------------------------------------------- /webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 4 | 5 | module.exports = { 6 | entry: './src/index', 7 | mode: 'production', 8 | output: { 9 | path: path.resolve(__dirname, 'dist'), 10 | filename: 'app.bundle.js', 11 | publicPath: '/dist' 12 | }, 13 | 14 | resolve: { 15 | extensions: ['.ts', '.tsx', '.js', '.json'] 16 | }, 17 | 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.(tsx?)|(js)$/, 22 | exclude: /node_modules/, 23 | loader: 'babel-loader' 24 | }, 25 | { 26 | test: [/\.vert$/, /\.frag$/], 27 | use: 'raw-loader' 28 | } 29 | ] 30 | }, 31 | 32 | plugins: [ 33 | new webpack.DefinePlugin({ 34 | CANVAS_RENDERER: JSON.stringify(true), 35 | WEBGL_RENDERER: JSON.stringify(true) 36 | }), 37 | new UglifyJsPlugin() 38 | ] 39 | }; 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Stephen Poole 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phaser3-typescript-template", 3 | "version": "0.0.4", 4 | "description": "A Phaser 3 project template with Typescript support", 5 | "main": "src/index.ts", 6 | "scripts": { 7 | "type-check": "tsc", 8 | "bundle": "webpack", 9 | "build": "webpack", 10 | "start": "npm run build && webpack-dev-server --port=8000 --open --hot", 11 | "production": "webpack --config=webpack.prod.config.js" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/stephenpoole/phaser3-typescript-template.git" 16 | }, 17 | "author": "Stephen Poole ", 18 | "license": "MIT", 19 | "licenseUrl": "http://www.opensource.org/licenses/mit-license.php", 20 | "bugs": { 21 | "url": "https://github.com/stephenpoole/phaser3-typescript-template/issues" 22 | }, 23 | "homepage": "https://github.com/stephenpoole/phaser3-typescript-template#readme", 24 | "devDependencies": { 25 | "@babel/cli": "^7.0.0-beta.32", 26 | "@babel/core": "^7.0.0-beta.32", 27 | "@babel/plugin-proposal-class-properties": "^7.0.0-beta.32", 28 | "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.32", 29 | "@babel/preset-env": "^7.0.0-beta.32", 30 | "@babel/preset-typescript": "^7.0.0-beta.32", 31 | "babel-loader": "^8.0.0-beta.0", 32 | "raw-loader": "^0.5.1", 33 | "typescript": "~2.7.1", 34 | "uglifyjs-webpack-plugin": "^1.2.4", 35 | "webpack": "^4.1.1", 36 | "webpack-cli": "^2.0.12", 37 | "webpack-dev-server": "^3.1.1" 38 | }, 39 | "dependencies": { 40 | "phaser": "^3.2.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */ 5 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 6 | // "lib": [], /* Specify library files to be included in the compilation: */ 7 | // "allowJs": true, /* Allow javascript files to be compiled. */ 8 | // "checkJs": true, /* Report errors in .js files. */ 9 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 10 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 11 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 12 | // "outFile": "./", /* Concatenate and emit output to single file. */ 13 | // "outDir": "./", /* Redirect output structure to the directory. */ 14 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 15 | // "removeComments": true, /* Do not emit comments to output. */ 16 | "noEmit": true, /* Do not emit outputs. */ 17 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 18 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 19 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 20 | 21 | /* Strict Type-Checking Options */ 22 | "strict": true, /* Enable all strict type-checking options. */ 23 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 24 | // "strictNullChecks": true, /* Enable strict null checks. */ 25 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 26 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 27 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 28 | 29 | /* Additional Checks */ 30 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 31 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 32 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 33 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 34 | 35 | /* Module Resolution Options */ 36 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 37 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 38 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 39 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 40 | // "typeRoots": [], /* List of folders to include type definitions from. */ 41 | // "types": [], /* Type declaration files to be included in compilation. */ 42 | "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 43 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 44 | 45 | /* Source Map Options */ 46 | // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 47 | // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */ 48 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 49 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 50 | 51 | /* Experimental Options */ 52 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 53 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 54 | } 55 | } --------------------------------------------------------------------------------