├── .gitattributes ├── .github ├── FUNDING.yml └── workflows │ └── main.yml ├── .gitignore ├── .npmrc ├── .prettierrc ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── pwa └── service-worker.js ├── readme ├── enable3d-logo.png ├── header.png ├── pwa.png └── screenshot.png ├── src ├── assets │ ├── ammo │ │ ├── ammo.js │ │ ├── ammo.wasm.js │ │ └── ammo.wasm.wasm │ └── img │ │ └── phaser-logo.png ├── favicon.ico ├── index.html └── scripts │ ├── game.ts │ └── scenes │ ├── mainScene.ts │ └── preloadScene.ts ├── tsconfig.json ├── typings └── custom.d.ts └── webpack ├── webpack.common.js ├── webpack.dev.js └── webpack.prod.js /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-detectable=false 2 | *.html linguist-detectable=false -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: yandeu 2 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | # read: https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions 2 | 3 | name: CI 4 | 5 | on: [push, pull_request] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | 11 | strategy: 12 | matrix: 13 | node-version: [18.x, 20.x] 14 | 15 | steps: 16 | - name: Checkout repository 17 | uses: actions/checkout@v3 18 | 19 | - name: Use Node.js ${{ matrix.node-version }} 20 | uses: actions/setup-node@v3 21 | with: 22 | node-version: ${{ matrix.node-version }} 23 | 24 | - name: Install Dependencies 25 | run: npm install 26 | 27 | - name: Build Packages 28 | run: npm run build 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist 3 | /.cache 4 | /.vscode -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "semi": false, 4 | "singleQuote": true, 5 | "tabWidth": 2, 6 | "trailingComma": "none" 7 | } 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Yannick Deubel (https://github.com/yandeu); Project Url: https://github.com/yandeu/phaser-project-template 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |
3 | Phaser 3 + enable3d 4 |
5 |

6 | 7 | ## About 8 | 9 | This is a clone of the popular [phaser-project-template](https://github.com/yandeu/phaser-project-template), which includes the latest enable3d.io version. 10 | 11 | ## How to use 12 | 13 | ```console 14 | # Clone this repository 15 | $ git clone --depth 1 https://github.com/enable3d/enable3d-phaser-project-template.git enable3d-game 16 | 17 | # Go into the repository 18 | $ cd enable3d-game 19 | 20 | # Install dependencies 21 | $ npm install 22 | 23 | # Start the local development server (on port 8080) 24 | $ npm start 25 | 26 | # Ready for production? 27 | # Build the production ready code to the /dist folder 28 | $ npm run build 29 | ``` 30 | 31 | ## JavaScript 32 | 33 | You want to use JavaScript instead of TypeScript? 34 | 35 | - Add `"checkJs": false,` to [tsconfig.json](./tsconfig.json) 36 | - Change the extension of all game files in [/src/scripts](./src/scripts) from `.ts` to `.js` (except `game.ts`). 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phaser-project-template", 3 | "version": "1.0.0", 4 | "description": "enable3d + Phaser 3 starter template", 5 | "homepage": "https://github.com/yandeu/phaser-project-template#readme", 6 | "main": "index.js", 7 | "scripts": { 8 | "start": "webpack serve --config webpack/webpack.dev.js", 9 | "build": "webpack --config webpack/webpack.prod.js", 10 | "serve": "serve dist" 11 | }, 12 | "keywords": [ 13 | "Phaser", 14 | "Phaser 3", 15 | "Phaser3", 16 | "html5 game", 17 | "TypeScript", 18 | "webpack", 19 | "starter" 20 | ], 21 | "author": { 22 | "name": "Yannick Deubel", 23 | "url": "https://github.com/yandeu" 24 | }, 25 | "repository": { 26 | "type": "git", 27 | "url": "https://github.com/yandeu/phaser-project-template.git" 28 | }, 29 | "template": { 30 | "name": "phaser-project-template", 31 | "url": "https://github.com/yandeu/phaser-project-template", 32 | "author": "Yannick Deubel (https://github.com/yandeu)" 33 | }, 34 | "engines": { 35 | "node": ">=18.2" 36 | }, 37 | "license": "MIT", 38 | "dependencies": { 39 | "@enable3d/phaser-extension": "0.26.1", 40 | "matter-js": "0.17.1", 41 | "phaser": "3.88.2", 42 | "poly-decomp": "^0.3.0", 43 | "three": "0.171.0" 44 | }, 45 | "devDependencies": { 46 | "serve": "^14.2.0", 47 | "ts-loader": "^9.4.2", 48 | "typescript": "^4.9.5", 49 | "webpack": "^5.0.0", 50 | "webpack-cli": "^5.0.1", 51 | "webpack-merge": "^5.8.0", 52 | "webpack-obfuscator": "^3.5.1", 53 | "webpack-dev-server": "^4.11.1", 54 | "workbox-webpack-plugin": "^6.5.4", 55 | "clean-webpack-plugin": "^4.0.0", 56 | "copy-webpack-plugin": "^11.0.0", 57 | "html-webpack-plugin": "^5.5.0", 58 | "@types/node": "^18.14.0" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /pwa/service-worker.js: -------------------------------------------------------------------------------- 1 | /** 2 | * You should only modify this, if you know what you are doing. 3 | * This phaser template is using workbox (https://developers.google.com/web/tools/workbox/) 4 | * to precache all assets. 5 | * It uses the InjectManifest function from 'workbox-webpack-plugin' inside 6 | * webpack/webpack.common.js 7 | */ 8 | import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute' 9 | 10 | precacheAndRoute(self.__WB_MANIFEST); 11 | 12 | -------------------------------------------------------------------------------- /readme/enable3d-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enable3d/enable3d-phaser-project-template/9ac4d545bb721e5dd405bd1cc640adf4bb7f09cf/readme/enable3d-logo.png -------------------------------------------------------------------------------- /readme/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enable3d/enable3d-phaser-project-template/9ac4d545bb721e5dd405bd1cc640adf4bb7f09cf/readme/header.png -------------------------------------------------------------------------------- /readme/pwa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enable3d/enable3d-phaser-project-template/9ac4d545bb721e5dd405bd1cc640adf4bb7f09cf/readme/pwa.png -------------------------------------------------------------------------------- /readme/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enable3d/enable3d-phaser-project-template/9ac4d545bb721e5dd405bd1cc640adf4bb7f09cf/readme/screenshot.png -------------------------------------------------------------------------------- /src/assets/ammo/ammo.wasm.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enable3d/enable3d-phaser-project-template/9ac4d545bb721e5dd405bd1cc640adf4bb7f09cf/src/assets/ammo/ammo.wasm.wasm -------------------------------------------------------------------------------- /src/assets/img/phaser-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enable3d/enable3d-phaser-project-template/9ac4d545bb721e5dd405bd1cc640adf4bb7f09cf/src/assets/img/phaser-logo.png -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enable3d/enable3d-phaser-project-template/9ac4d545bb721e5dd405bd1cc640adf4bb7f09cf/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | <%= htmlWebpackPlugin.options.gameName %> 30 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/scripts/game.ts: -------------------------------------------------------------------------------- 1 | import * as Phaser from 'phaser' 2 | import { enable3d, Canvas } from '@enable3d/phaser-extension' 3 | import MainScene from './scenes/mainScene' 4 | import PreloadScene from './scenes/preloadScene' 5 | 6 | const config: Phaser.Types.Core.GameConfig = { 7 | type: Phaser.WEBGL, 8 | transparent: true, 9 | scale: { 10 | mode: Phaser.Scale.FIT, 11 | autoCenter: Phaser.Scale.CENTER_BOTH, 12 | width: 1280, 13 | height: 720 14 | }, 15 | scene: [PreloadScene, MainScene], 16 | ...Canvas() 17 | } 18 | 19 | window.addEventListener('load', () => { 20 | enable3d(() => new Phaser.Game(config)).withPhysics('assets/ammo') 21 | }) 22 | -------------------------------------------------------------------------------- /src/scripts/scenes/mainScene.ts: -------------------------------------------------------------------------------- 1 | import { Scene3D } from '@enable3d/phaser-extension' 2 | 3 | export default class MainScene extends Scene3D { 4 | constructor() { 5 | super({ key: 'MainScene' }) 6 | } 7 | 8 | init() { 9 | this.accessThirdDimension() 10 | } 11 | 12 | create() { 13 | // add a phaser text 14 | const text = this.add.text(this.cameras.main.centerX, 2, 'Phaser + Three.js = ♥', { fontSize: 32, color: 'purple' }) 15 | text.setOrigin(0.5, 0) 16 | 17 | // creates a nice scene 18 | this.third.warpSpeed() 19 | 20 | // adds a box 21 | this.third.add.box({ x: 1, y: 2 }) 22 | 23 | // adds a box with physics 24 | this.third.physics.add.box({ x: -1, y: 2 }) 25 | 26 | // throws some random object on the scene 27 | this.third.haveSomeFun() 28 | } 29 | 30 | update() {} 31 | } 32 | -------------------------------------------------------------------------------- /src/scripts/scenes/preloadScene.ts: -------------------------------------------------------------------------------- 1 | export default class PreloadScene extends Phaser.Scene { 2 | constructor() { 3 | super({ key: 'PreloadScene' }) 4 | } 5 | 6 | preload() {} 7 | 8 | create() { 9 | this.scene.start('MainScene') 10 | 11 | /** 12 | * This is how you would dynamically import the mainScene class (with code splitting), 13 | * add the mainScene to the Scene Manager 14 | * and start the scene. 15 | * The name of the chunk would be 'mainScene.chunk.js 16 | * Find more about code splitting here: https://webpack.js.org/guides/code-splitting/ 17 | */ 18 | // let someCondition = true 19 | // if (someCondition) 20 | // import(/* webpackChunkName: "mainScene" */ './mainScene').then(mainScene => { 21 | // this.scene.add('MainScene', mainScene.default, true) 22 | // }) 23 | // else console.log('The mainScene class will not even be loaded by the browser') 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "commonjs", 5 | "strict": true, 6 | "noImplicitAny": false, 7 | "esModuleInterop": true, 8 | "allowUnreachableCode": false, 9 | "sourceMap": true, 10 | "strictPropertyInitialization": false, 11 | "lib": ["dom", "es6", "esnext"] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /typings/custom.d.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enable3d/enable3d-phaser-project-template/9ac4d545bb721e5dd405bd1cc640adf4bb7f09cf/typings/custom.d.ts -------------------------------------------------------------------------------- /webpack/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const CopyWebpackPlugin = require('copy-webpack-plugin') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | 5 | module.exports = { 6 | entry: ['./src/scripts/game.ts'], 7 | output: { 8 | path: path.resolve(__dirname, '../dist'), 9 | filename: '[name].bundle.js', 10 | chunkFilename: '[name].chunk.js' 11 | }, 12 | resolve: { 13 | extensions: ['.ts', '.tsx', '.js'] 14 | }, 15 | module: { 16 | rules: [{ test: /\.tsx?$/, include: path.join(__dirname, '../src'), loader: 'ts-loader' }] 17 | }, 18 | optimization: { 19 | splitChunks: { 20 | cacheGroups: { 21 | defaultVendors: { 22 | test: /[\\/]node_modules[\\/]/, 23 | name: 'vendors', 24 | chunks: 'all', 25 | filename: '[name].bundle.js' 26 | } 27 | } 28 | } 29 | }, 30 | plugins: [ 31 | new HtmlWebpackPlugin({ gameName: 'My Phaser Game', template: 'src/index.html' }), 32 | new CopyWebpackPlugin({ 33 | patterns: [ 34 | { from: 'src/assets', to: 'assets' }, 35 | { from: 'src/favicon.ico', to: '' } 36 | 37 | ]}) 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /webpack/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const {merge} = require('webpack-merge') 2 | const common = require('./webpack.common') 3 | 4 | const dev = { 5 | mode: 'development', 6 | devtool: 'inline-source-map', 7 | devServer: { 8 | open: true 9 | } 10 | } 11 | 12 | module.exports = merge(common, dev) 13 | -------------------------------------------------------------------------------- /webpack/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const {merge} = require('webpack-merge') 3 | const common = require('./webpack.common') 4 | const { CleanWebpackPlugin } = require('clean-webpack-plugin') 5 | 6 | const prod = { 7 | mode: 'production', 8 | output: { 9 | filename: '[name].[contenthash].bundle.js', 10 | chunkFilename: '[name].[contenthash].chunk.js' 11 | }, 12 | optimization: { 13 | splitChunks: { 14 | cacheGroups: { 15 | commons: { 16 | filename: '[name].[contenthash].bundle.js' 17 | } 18 | } 19 | } 20 | }, 21 | plugins: [new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, '../dist/*.js')] })] 22 | } 23 | 24 | module.exports = merge(common, prod) 25 | --------------------------------------------------------------------------------