├── .editorconfig ├── .gitignore ├── .vscode ├── extensions.json ├── launch.json ├── settings.json └── tasks.json ├── LICENSE ├── README.md ├── angular.json ├── log.js ├── package-lock.json ├── package.json ├── public ├── assets │ ├── .gitkeep │ ├── bg.png │ ├── logo.png │ └── star.png └── favicon.png ├── screenshot.png ├── src ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.ts │ ├── app.config.ts │ ├── app.routes.ts │ └── phaser-game.component.ts ├── game │ ├── EventBus.ts │ ├── main.ts │ └── scenes │ │ ├── Boot.ts │ │ ├── Game.ts │ │ ├── GameOver.ts │ │ ├── MainMenu.ts │ │ └── Preloader.ts ├── index.html ├── main.ts └── styles.css ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 4 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true, 3 | "javascript.format.placeOpenBraceOnNewLineForFunctions": true, 4 | "typescript.format.placeOpenBraceOnNewLineForControlBlocks": true, 5 | "typescript.format.placeOpenBraceOnNewLineForFunctions": true, 6 | "javascript.format.insertSpaceBeforeFunctionParenthesis": true, 7 | 8 | } -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Phaser Studio Inc 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 | # Phaser Angular Template 2 | 3 | This is a Phaser 3 project template that uses the Angular framework. It includes a bridge for Angular to Phaser game communication, hot-reloading for quick development workflow and scripts to generate production-ready builds. 4 | 5 | ### Versions 6 | 7 | This template has been updated for: 8 | 9 | - [Phaser 3.90.0](https://github.com/phaserjs/phaser) 10 | - [Angular 19.2.0](https://github.com/angular) 11 | - [TypeScript 5.7.2](https://github.com/microsoft/TypeScript) 12 | 13 | ![screenshot](screenshot.png) 14 | 15 | ## Requirements 16 | 17 | [Node.js](https://nodejs.org) is required to install dependencies and run scripts via `npm`. 18 | [ng cli](https://angular.io/cli) is required to run the project. 19 | 20 | ## Available Commands 21 | 22 | | Command | Description | 23 | |---------|-------------| 24 | | `npm install` | Install project dependencies | 25 | | `npm run dev` | Launch a development web server | 26 | | `npm run build` | Create a production build in the `build` folder | 27 | | `npm run dev-nolog` | Launch a development web server without sending anonymous data (see "About log.js" below) | 28 | | `npm run build-nolog` | Create a production build in the `dist` folder without sending anonymous data (see "About log.js" below) | 29 | 30 | ## Writing Code 31 | 32 | After cloning the repo, run `npm install` from your project directory. Install ng cli with `npm install -g @angular/cli`. Then, you can start the local development server by running `npm run dev`. 33 | 34 | The local development server runs on `http://localhost:8080` by default. Please see the Angular documentation if you wish to change this, or add SSL support. 35 | 36 | Once the server is running you can edit any of the files in the `src` folder. Angular will automatically recompile your code and then reload the browser. 37 | 38 | ## Template Project Structure 39 | 40 | We have provided a default project structure to get you started. This is as follows: 41 | 42 | | Path | Description | 43 | |--------------------------------------|------------------------------------------------------------| 44 | | `public/assets` | Game sprites, audio, etc. Served directly at runtime | 45 | | `src/index.html` | Angular entry point (HTML) | 46 | | `src/main.ts` | Angular application bootstrap | 47 | | `src/style.css` | Global layout styles | 48 | | `src/app/app.component.ts` | Root Angular component | 49 | | `src/app/app.component.html` | HTML template for the app component | 50 | | `src/app/phaser-game.component.ts` | Bridge between Angular and your Phaser game | 51 | | `src/game` | Folder containing the game code. | 52 | | `src/game/main.ts` | Game bootstrap and configuration | 53 | | `src/game/scenes` | Folder with all Phaser game scenes. | 54 | | `src/game/EventBus.ts` | Angular ↔ Phaser communication bridge | 55 | 56 | 57 | ## Angular Bridge 58 | 59 | The `phaser-game.component.ts` component is the bridge between Angular and Phaser. It initializes the Phaser game and passes events between the two. 60 | 61 | To communicate between Angular and Phaser, you can use the **EventBus.ts** file. This is a simple event bus that allows you to emit and listen for events from both Angular and Phaser. 62 | 63 | ```js 64 | // In Angular 65 | import { EventBus } from './EventBus'; 66 | 67 | // In any Angular component method 68 | // Emit an event 69 | EventBus.emit('event-name', data); 70 | 71 | // In Phaser 72 | // Listen for an event 73 | EventBus.on('event-name', (data) => { 74 | // Do something with the data 75 | }); 76 | ``` 77 | 78 | In addition to this, the `phaser-game` component exposes the Phaser game instance along with the most recently active Phaser Scene. You can pick these up from Angular via `phaserRef = viewChild.required(PhaserGame);` (we explain this later). 79 | 80 | ## Phaser Scene Handling 81 | 82 | In Phaser, the Scene is the lifeblood of your game. It is where you sprites, game logic and all of the Phaser systems live. You can also have multiple scenes running at the same time. This template provides a way to obtain the current active scene from Angular. 83 | 84 | You can get the current Phaser Scene from the component event `"current-active-scene"`. In order to do this, you need to emit the event `"current-scene-ready"` from the Phaser Scene class. This event should be emitted when the scene is ready to be used. You can see this done in all of the Scenes in our template. 85 | 86 | **Important**: When you add a new Scene to your game, make sure you expose to Angular by emitting the `"current-scene-ready"` event via the `EventBus`, like this: 87 | 88 | 89 | ```js 90 | class MyScene extends Phaser.Scene 91 | { 92 | constructor () 93 | { 94 | super('MyScene'); 95 | } 96 | 97 | create () 98 | { 99 | // Your Game Objects and logic here 100 | 101 | // At the end of create method: 102 | EventBus.emit('current-scene-ready', this); 103 | } 104 | } 105 | ``` 106 | 107 | You don't have to emit this event if you don't need to access the specific scene from Angular. Also, you don't have to emit it at the end of `create`, you can emit it at any point. For example, should your Scene be waiting for a network request or API call to complete, it could emit the event once that data is ready. 108 | 109 | ### Angular Component Example 110 | 111 | Here's an example of how to access Phaser data for use in a Angular Component: 112 | 113 | ```ts 114 | import { Component, viewChild } from '@angular/core'; 115 | import { PhaserGame } from '../game/phaser-game.component'; 116 | import { EventBus } from '../game/EventBus'; 117 | 118 | @Component({ 119 | selector: 'app-root', 120 | standalone: true, 121 | imports: [PhaserGame], 122 | templateUrl: './app.component.html' 123 | }) 124 | export class AppComponent 125 | { 126 | 127 | phaserRef = viewChild.required(PhaserGame); 128 | 129 | constructor () 130 | { 131 | 132 | const game = this.phaserRef().game; 133 | const scene = this.phaserRef().scene; 134 | 135 | EventBus.on('current-scene-ready', (scene: Phaser.Scene) => { 136 | // Handle the ready scene 137 | }); 138 | 139 | } 140 | 141 | } 142 | 143 | ``` 144 | 145 | In the code above, you can get a reference to the current Phaser Game instance and the current Scene by calling `phaserRef = viewChild.required(PhaserGame);`. 146 | 147 | From this component reference, the game instance is available via `this.phaserRef.game` and the most recently active Scene via `this.phaserRef.scene` 148 | 149 | The `EventBus.on('current-scene-ready')` callback will also be invoked whenever the the Phaser Scene changes, as long as you emit the event via the EventBus, as outlined above. 150 | 151 | ## Handling Assets 152 | 153 | To load static files such as audio files, videos, etc place them into the `public/assets` folder. Then you can use this path in the Loader calls within Phaser: 154 | 155 | ```js 156 | preload () 157 | { 158 | // This is an example of an imported bundled image. 159 | // Remember to import it at the top of this file 160 | this.load.image('logo', logoImg); 161 | 162 | // This is an example of loading a static image 163 | // from the public/assets folder: 164 | this.load.image('background', 'assets/bg.png'); 165 | } 166 | ``` 167 | 168 | When you issue the `npm run build` command, all static assets are automatically copied to the `dist/browser/assets` folder. 169 | 170 | ## Deploying to Production 171 | 172 | After you run the `npm run build` command, your code will be built into a single bundle and saved to the `dist` folder, along with any other assets your project imported, or stored in the public assets folder. 173 | 174 | In order to deploy your game, you will need to upload *all* of the contents of the `dist/browser` folder to a public facing web server. 175 | 176 | ## Customizing the Template 177 | 178 | ### Angular 179 | 180 | If you want to customize your build, such as adding plugin (i.e. for loading CSS or fonts), you can modify the `angular.json` file for cross-project changes, or you can modify and/or create new configuration files and target them in specific npm tasks inside of `package.json`. Please see the [Angular documentation](https://angular.io/guide/workspace-config) for more information. 181 | 182 | ## About log.js 183 | 184 | If you inspect our node scripts you will see there is a file called `log.js`. This file makes a single silent API call to a domain called `gryzor.co`. This domain is owned by Phaser Studio Inc. The domain name is a homage to one of our favorite retro games. 185 | 186 | We send the following 3 pieces of data to this API: The name of the template being used (vue, react, etc). If the build was 'dev' or 'prod' and finally the version of Phaser being used. 187 | 188 | At no point is any personal data collected or sent. We don't know about your project files, device, browser or anything else. Feel free to inspect the `log.js` file to confirm this. 189 | 190 | Why do we do this? Because being open source means we have no visible metrics about which of our templates are being used. We work hard to maintain a large and diverse set of templates for Phaser developers and this is our small anonymous way to determine if that work is actually paying off, or not. In short, it helps us ensure we're building the tools for you. 191 | 192 | However, if you don't want to send any data, you can use these commands instead: 193 | 194 | Dev: 195 | 196 | ```bash 197 | npm run dev-nolog 198 | ``` 199 | 200 | Build: 201 | 202 | ```bash 203 | npm run build-nolog 204 | ``` 205 | 206 | Or, to disable the log entirely, simply delete the file `log.js` and remove the call to it in the `scripts` section of `package.json`: 207 | 208 | Before: 209 | 210 | ```json 211 | "scripts": { 212 | "dev": "node log.js dev & dev-template-script", 213 | "build": "node log.js build & build-template-script" 214 | }, 215 | ``` 216 | 217 | After: 218 | 219 | ```json 220 | "scripts": { 221 | "dev": "dev-template-script", 222 | "build": "build-template-script" 223 | }, 224 | ``` 225 | 226 | Either of these will stop `log.js` from running. If you do decide to do this, please could you at least join our Discord and tell us which template you're using! Or send us a quick email. Either will be super-helpful, thank you. 227 | 228 | 229 | ## Join the Phaser Community! 230 | 231 | We love to see what developers like you create with Phaser! It really motivates us to keep improving. So please join our community and show-off your work 😄 232 | 233 | **Visit:** The [Phaser website](https://phaser.io) and follow on [Phaser Twitter](https://twitter.com/phaser_)
234 | **Play:** Some of the amazing games [#madewithphaser](https://twitter.com/search?q=%23madewithphaser&src=typed_query&f=live)
235 | **Learn:** [API Docs](https://newdocs.phaser.io), [Support Forum](https://phaser.discourse.group/) and [StackOverflow](https://stackoverflow.com/questions/tagged/phaser-framework)
236 | **Discord:** Join us on [Discord](https://discord.gg/phaser)
237 | **Code:** 2000+ [Examples](https://labs.phaser.io)
238 | **Read:** The [Phaser World](https://phaser.io/community/newsletter) Newsletter
239 | 240 | Created by [Phaser Studio](mailto:support@phaser.io). Powered by coffee, anime, pixels and love. 241 | 242 | The Phaser logo and characters are © 2011 - 2025 Phaser Studio Inc. 243 | 244 | All rights reserved. 245 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "template-angular": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:application", 15 | "options": { 16 | "allowedCommonJsDependencies": [ 17 | "phaser" 18 | ], 19 | "outputPath": "dist/template-angular", 20 | "index": "src/index.html", 21 | "browser": "src/main.ts", 22 | "polyfills": [ 23 | "zone.js" 24 | ], 25 | "tsConfig": "tsconfig.app.json", 26 | "assets": [ 27 | { 28 | "glob": "**/*", 29 | "input": "public" 30 | } 31 | ], 32 | "styles": [ 33 | "src/styles.css" 34 | ], 35 | "scripts": [] 36 | }, 37 | "configurations": { 38 | "production": { 39 | "budgets": [ 40 | { 41 | "type": "initial", 42 | "maximumWarning": "5000kb", 43 | "maximumError": "5mb" 44 | }, 45 | { 46 | "type": "anyComponentStyle", 47 | "maximumWarning": "4kB", 48 | "maximumError": "8kB" 49 | } 50 | ], 51 | "outputHashing": "all" 52 | }, 53 | "development": { 54 | "optimization": false, 55 | "extractLicenses": false, 56 | "sourceMap": true 57 | } 58 | }, 59 | "defaultConfiguration": "production" 60 | }, 61 | "serve": { 62 | "builder": "@angular-devkit/build-angular:dev-server", 63 | "configurations": { 64 | "production": { 65 | "buildTarget": "template-angular:build:production" 66 | }, 67 | "development": { 68 | "buildTarget": "template-angular:build:development" 69 | } 70 | }, 71 | "defaultConfiguration": "development" 72 | }, 73 | "extract-i18n": { 74 | "builder": "@angular-devkit/build-angular:extract-i18n" 75 | }, 76 | "test": { 77 | "builder": "@angular-devkit/build-angular:karma", 78 | "options": { 79 | "polyfills": [ 80 | "zone.js", 81 | "zone.js/testing" 82 | ], 83 | "tsConfig": "tsconfig.spec.json", 84 | "assets": [ 85 | { 86 | "glob": "**/*", 87 | "input": "public" 88 | } 89 | ], 90 | "styles": [ 91 | "src/styles.css" 92 | ], 93 | "scripts": [] 94 | } 95 | } 96 | } 97 | } 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /log.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const https = require('https'); 3 | 4 | const main = async () => { 5 | const args = process.argv.slice(2); 6 | const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8')); 7 | const event = args[0] || 'unknown'; 8 | const phaserVersion = packageData.dependencies.phaser; 9 | 10 | const options = { 11 | hostname: 'gryzor.co', 12 | port: 443, 13 | path: `/v/${event}/${phaserVersion}/${packageData.name}`, 14 | method: 'GET' 15 | }; 16 | 17 | try { 18 | const req = https.request(options, (res) => { 19 | res.on('data', () => {}); 20 | res.on('end', () => { 21 | process.exit(0); 22 | }); 23 | }); 24 | 25 | req.on('error', (error) => { 26 | process.exit(1); 27 | }); 28 | 29 | req.end(); 30 | } catch (error) { 31 | // Silence is the canvas where the soul paints its most profound thoughts. 32 | process.exit(1); 33 | } 34 | } 35 | 36 | main(); 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-angular", 3 | "version": "1.1.0", 4 | "description": "A Phaser 3 project template that demonstrates Angular communication.", 5 | "scripts": { 6 | "ng": "ng", 7 | "dev": "node log dev & ng serve", 8 | "build": "node log.js build & ng build --base-href='./'", 9 | "dev-nolog": "ng serve", 10 | "build-nolog": "ng build --base-href='./'" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/phaserjs/template-angular.git" 15 | }, 16 | "author": "Phaser Studio (https://phaser.io/)", 17 | "license": "MIT", 18 | "licenseUrl": "http://www.opensource.org/licenses/mit-license.php", 19 | "bugs": { 20 | "url": "https://github.com/phaserjs/template-angular/issues" 21 | }, 22 | "homepage": "https://github.com/phaserjs/template-angular#readme", 23 | "keywords": [ 24 | "phaser", 25 | "phaser3", 26 | "angular", 27 | "Angular" 28 | ], 29 | "dependencies": { 30 | "@angular/common": "^19.2.0", 31 | "@angular/compiler": "^19.2.0", 32 | "@angular/core": "^19.2.0", 33 | "@angular/forms": "^19.2.0", 34 | "@angular/platform-browser": "^19.2.0", 35 | "@angular/platform-browser-dynamic": "^19.2.0", 36 | "@angular/router": "^19.2.0", 37 | "phaser": "^3.90.0", 38 | "rxjs": "~7.8.0", 39 | "tslib": "^2.3.0", 40 | "zone.js": "~0.15.0" 41 | }, 42 | "devDependencies": { 43 | "@angular-devkit/build-angular": "^19.2.8", 44 | "@angular/cli": "^19.2.8", 45 | "@angular/compiler-cli": "^19.2.0", 46 | "@types/jasmine": "~5.1.0", 47 | "jasmine-core": "~5.6.0", 48 | "karma": "~6.4.0", 49 | "karma-chrome-launcher": "~3.2.0", 50 | "karma-coverage": "~2.2.0", 51 | "karma-jasmine": "~5.1.0", 52 | "karma-jasmine-html-reporter": "~2.1.0", 53 | "typescript": "~5.7.2" 54 | } 55 | } -------------------------------------------------------------------------------- /public/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phaserjs/template-angular/b341f135cc73494abbb4612a01f9a16ef6ed9430/public/assets/.gitkeep -------------------------------------------------------------------------------- /public/assets/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phaserjs/template-angular/b341f135cc73494abbb4612a01f9a16ef6ed9430/public/assets/bg.png -------------------------------------------------------------------------------- /public/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phaserjs/template-angular/b341f135cc73494abbb4612a01f9a16ef6ed9430/public/assets/logo.png -------------------------------------------------------------------------------- /public/assets/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phaserjs/template-angular/b341f135cc73494abbb4612a01f9a16ef6ed9430/public/assets/star.png -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phaserjs/template-angular/b341f135cc73494abbb4612a01f9a16ef6ed9430/public/favicon.png -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phaserjs/template-angular/b341f135cc73494abbb4612a01f9a16ef6ed9430/screenshot.png -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phaserjs/template-angular/b341f135cc73494abbb4612a01f9a16ef6ed9430/src/app/app.component.css -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 43 | 44 |
45 | 46 |
47 |
48 | 49 |
50 |
51 | 52 |
53 |
54 | Sprite Position: 55 | 
{{ spritePosition | json }}
56 |
57 |
58 | 59 |
60 |
61 |
62 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, viewChild } from '@angular/core'; 2 | import { PhaserGame } from './phaser-game.component'; 3 | import { MainMenu } from '../game/scenes/MainMenu'; 4 | import { CommonModule } from '@angular/common'; 5 | import { EventBus } from '../game/EventBus'; 6 | 7 | @Component({ 8 | selector: 'app-root', 9 | standalone: true, 10 | imports: [CommonModule, PhaserGame], 11 | templateUrl: './app.component.html' 12 | }) 13 | export class AppComponent 14 | { 15 | 16 | public spritePosition = { x: 0, y: 0 }; 17 | public canMoveSprite = false; 18 | 19 | // New way to get the component instance 20 | phaserRef = viewChild.required(PhaserGame); 21 | 22 | constructor() 23 | { 24 | // You can now safely set up your EventBus subscriptions here 25 | EventBus.on('current-scene-ready', (scene: Phaser.Scene) => { 26 | this.canMoveSprite = scene.scene.key !== 'MainMenu'; 27 | }); 28 | } 29 | 30 | public changeScene() 31 | { 32 | const scene = this.phaserRef().scene as MainMenu; 33 | if (scene) 34 | { 35 | scene.changeScene(); 36 | } 37 | } 38 | 39 | public moveSprite() 40 | { 41 | const scene = this.phaserRef().scene as MainMenu; 42 | if (scene) 43 | { 44 | scene.moveLogo(({ x, y }) => { 45 | this.spritePosition = { x, y }; 46 | }); 47 | } 48 | } 49 | 50 | public addSprite() 51 | { 52 | const scene = this.phaserRef().scene; 53 | if (scene) 54 | { 55 | const x = Phaser.Math.Between(64, scene.scale.width - 64); 56 | const y = Phaser.Math.Between(64, scene.scale.height - 64); 57 | 58 | const star = scene.add.sprite(x, y, 'star'); 59 | 60 | scene.add.tween({ 61 | targets: star, 62 | duration: 500 + Math.random() * 1000, 63 | alpha: 0, 64 | yoyo: true, 65 | repeat: -1 66 | }); 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | 6 | export const appConfig: ApplicationConfig = { 7 | providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /src/app/phaser-game.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from "@angular/core"; 2 | import Phaser from "phaser"; 3 | import StartGame from "../game/main"; 4 | import { EventBus } from "../game/EventBus"; 5 | 6 | @Component({ 7 | selector: 'phaser-game', 8 | template: '
', 9 | standalone: true, 10 | }) 11 | export class PhaserGame implements OnInit 12 | { 13 | scene: Phaser.Scene; 14 | game: Phaser.Game; 15 | sceneCallback: (scene: Phaser.Scene) => void; 16 | 17 | ngOnInit () 18 | { 19 | this.game = StartGame('game-container'); 20 | 21 | EventBus.on('current-scene-ready', (scene: Phaser.Scene) => 22 | { 23 | this.scene = scene; 24 | 25 | if (this.sceneCallback) 26 | { 27 | this.sceneCallback(scene); 28 | } 29 | }); 30 | } 31 | 32 | ngOnDestroy () 33 | { 34 | if (this.game) 35 | { 36 | this.game.destroy(true); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/game/EventBus.ts: -------------------------------------------------------------------------------- 1 | import { Events } from 'phaser'; 2 | 3 | // Used to emit events between components, HTML and Phaser scenes 4 | export const EventBus = new Events.EventEmitter(); 5 | -------------------------------------------------------------------------------- /src/game/main.ts: -------------------------------------------------------------------------------- 1 | import { Boot } from './scenes/Boot'; 2 | import { GameOver } from './scenes/GameOver'; 3 | import { Game as MainGame } from './scenes/Game'; 4 | import { MainMenu } from './scenes/MainMenu'; 5 | import { AUTO, Game } from 'phaser'; 6 | import { Preloader } from './scenes/Preloader'; 7 | 8 | // Find out more information about the Game Config at: 9 | // https://docs.phaser.io/api-documentation/typedef/types-core#gameconfig 10 | const config: Phaser.Types.Core.GameConfig = { 11 | type: AUTO, 12 | width: 1024, 13 | height: 768, 14 | parent: 'game-container', 15 | backgroundColor: '#028af8', 16 | scene: [ 17 | Boot, 18 | Preloader, 19 | MainMenu, 20 | MainGame, 21 | GameOver 22 | ] 23 | }; 24 | 25 | const StartGame = (parent: string) => { 26 | 27 | return new Game({ ...config, parent }); 28 | 29 | } 30 | 31 | export default StartGame; 32 | -------------------------------------------------------------------------------- /src/game/scenes/Boot.ts: -------------------------------------------------------------------------------- 1 | import { Scene } from 'phaser'; 2 | 3 | export class Boot extends Scene 4 | { 5 | constructor () 6 | { 7 | super('Boot'); 8 | } 9 | 10 | preload () 11 | { 12 | // The Boot Scene is typically used to load in any assets you require for your Preloader, such as a game logo or background. 13 | // The smaller the file size of the assets, the better, as the Boot Scene itself has no preloader. 14 | 15 | this.load.image('background', 'assets/bg.png'); 16 | } 17 | 18 | create () 19 | { 20 | this.scene.start('Preloader'); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/game/scenes/Game.ts: -------------------------------------------------------------------------------- 1 | import { EventBus } from '../EventBus'; 2 | import { Scene } from 'phaser'; 3 | 4 | export class Game extends Scene 5 | { 6 | camera: Phaser.Cameras.Scene2D.Camera; 7 | background: Phaser.GameObjects.Image; 8 | gameText: Phaser.GameObjects.Text; 9 | 10 | constructor () 11 | { 12 | super('Game'); 13 | } 14 | 15 | create () 16 | { 17 | this.camera = this.cameras.main; 18 | this.camera.setBackgroundColor(0x00ff00); 19 | 20 | this.background = this.add.image(512, 384, 'background'); 21 | this.background.setAlpha(0.5); 22 | 23 | this.gameText = this.add.text(512, 384, 'Make something fun!\nand share it with us:\nsupport@phaser.io', { 24 | fontFamily: 'Arial Black', fontSize: 38, color: '#ffffff', 25 | stroke: '#000000', strokeThickness: 8, 26 | align: 'center' 27 | }).setOrigin(0.5).setDepth(100); 28 | 29 | EventBus.emit('current-scene-ready', this); 30 | } 31 | 32 | changeScene () 33 | { 34 | this.scene.start('GameOver'); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/game/scenes/GameOver.ts: -------------------------------------------------------------------------------- 1 | import { EventBus } from '../EventBus'; 2 | import { Scene } from 'phaser'; 3 | 4 | export class GameOver extends Scene 5 | { 6 | camera: Phaser.Cameras.Scene2D.Camera; 7 | background: Phaser.GameObjects.Image; 8 | gameOverText : Phaser.GameObjects.Text; 9 | 10 | constructor () 11 | { 12 | super('GameOver'); 13 | } 14 | 15 | create () 16 | { 17 | this.camera = this.cameras.main 18 | this.camera.setBackgroundColor(0xff0000); 19 | 20 | this.background = this.add.image(512, 384, 'background'); 21 | this.background.setAlpha(0.5); 22 | 23 | this.gameOverText = this.add.text(512, 384, 'Game Over', { 24 | fontFamily: 'Arial Black', fontSize: 64, color: '#ffffff', 25 | stroke: '#000000', strokeThickness: 8, 26 | align: 'center' 27 | }).setOrigin(0.5).setDepth(100); 28 | 29 | EventBus.emit('current-scene-ready', this); 30 | } 31 | 32 | changeScene () 33 | { 34 | this.scene.start('MainMenu'); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/game/scenes/MainMenu.ts: -------------------------------------------------------------------------------- 1 | import { GameObjects, Scene } from 'phaser'; 2 | 3 | import { EventBus } from '../EventBus'; 4 | 5 | export class MainMenu extends Scene 6 | { 7 | background: GameObjects.Image; 8 | logo: GameObjects.Image; 9 | title: GameObjects.Text; 10 | logoTween: Phaser.Tweens.Tween | null; 11 | 12 | constructor () 13 | { 14 | super('MainMenu'); 15 | } 16 | 17 | create () 18 | { 19 | this.background = this.add.image(512, 384, 'background'); 20 | 21 | this.logo = this.add.image(512, 300, 'logo').setDepth(100); 22 | 23 | this.title = this.add.text(512, 460, 'Main Menu', { 24 | fontFamily: 'Arial Black', fontSize: 38, color: '#ffffff', 25 | stroke: '#000000', strokeThickness: 8, 26 | align: 'center' 27 | }).setOrigin(0.5).setDepth(100); 28 | 29 | EventBus.emit('current-scene-ready', this); 30 | } 31 | 32 | changeScene () 33 | { 34 | if (this.logoTween) 35 | { 36 | this.logoTween.stop(); 37 | this.logoTween = null; 38 | } 39 | 40 | this.scene.start('Game'); 41 | } 42 | 43 | moveLogo (vueCallback: ({ x, y }: { x: number, y: number }) => void) 44 | { 45 | if (this.logoTween) 46 | { 47 | if (this.logoTween.isPlaying()) 48 | { 49 | this.logoTween.pause(); 50 | } 51 | else 52 | { 53 | this.logoTween.play(); 54 | } 55 | } 56 | else 57 | { 58 | this.logoTween = this.tweens.add({ 59 | targets: this.logo, 60 | x: { value: 750, duration: 3000, ease: 'Back.easeInOut' }, 61 | y: { value: 80, duration: 1500, ease: 'Sine.easeOut' }, 62 | yoyo: true, 63 | repeat: -1, 64 | onUpdate: () => { 65 | if (vueCallback) 66 | { 67 | vueCallback({ 68 | x: Math.floor(this.logo.x), 69 | y: Math.floor(this.logo.y) 70 | }); 71 | } 72 | } 73 | }); 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/game/scenes/Preloader.ts: -------------------------------------------------------------------------------- 1 | import { Scene } from 'phaser'; 2 | 3 | export class Preloader extends Scene 4 | { 5 | constructor () 6 | { 7 | super('Preloader'); 8 | } 9 | 10 | init () 11 | { 12 | // We loaded this image in our Boot Scene, so we can display it here 13 | this.add.image(512, 384, 'background'); 14 | 15 | // A simple progress bar. This is the outline of the bar. 16 | this.add.rectangle(512, 384, 468, 32).setStrokeStyle(1, 0xffffff); 17 | 18 | // This is the progress bar itself. It will increase in size from the left based on the % of progress. 19 | const bar = this.add.rectangle(512-230, 384, 4, 28, 0xffffff); 20 | 21 | // Use the 'progress' event emitted by the LoaderPlugin to update the loading bar 22 | this.load.on('progress', (progress: number) => { 23 | 24 | // Update the progress bar (our bar is 464px wide, so 100% = 464px) 25 | bar.width = 4 + (460 * progress); 26 | 27 | }); 28 | } 29 | 30 | preload () 31 | { 32 | // Load the assets for the game - Replace with your own assets 33 | this.load.setPath('assets'); 34 | 35 | this.load.image('logo', 'logo.png'); 36 | this.load.image('star', 'star.png'); 37 | } 38 | 39 | create () 40 | { 41 | // When all the assets have loaded, it's often worth creating global objects here that the rest of the game can use. 42 | // For example, you can define global animations here, so we can use them in other scenes. 43 | 44 | // Move to the MainMenu. You could also swap this for a Scene Transition, such as a camera fade. 45 | this.scene.start('MainMenu'); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Phaser Angular Template 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | body { 3 | background-color: #0cc9bd; 4 | margin: 0; 5 | padding: 0; 6 | color: rgba(255, 255, 255, 0.87); 7 | background-color: #0f0f0f; 8 | font-family: Arial, Helvetica, sans-serif; 9 | } 10 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "files": [ 10 | "src/main.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "outDir": "./dist/out-tsc", 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "bundler", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "strictPropertyInitialization": false, 22 | "lib": [ 23 | "ES2022", 24 | "DOM" 25 | ], 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.spec.ts", 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | --------------------------------------------------------------------------------