-
-
Save tickle-monster/752b444416f317c56d08c85b865ef663 to your computer and use it in GitHub Desktop.
Phaser 3.60 BaseScene with user data JSON, HUD and Event Emitter to share data across scenes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { theatre } from './hud.js'; | |
| export class BaseScene extends Phaser.Scene | |
| { | |
| constructor(config) | |
| { | |
| super(config); | |
| } | |
| init() | |
| { | |
| this.user = this.registry.get('user'); | |
| } | |
| nextScene(oldscene, newscene, payload) | |
| { | |
| this.scene.stop(oldscene); | |
| this.scene.run(newscene, payload); | |
| bigtop.emit('hudFocus', lens); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class Boot extends Phaser.Scene | |
| { | |
| constructor() | |
| { | |
| super({ key: 'boot' }); | |
| } | |
| preload() {} | |
| create() | |
| { | |
| this.scene.start('preloader'); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { BaseScene } from './base.js'; | |
| export class Home extends BaseScene | |
| { | |
| constructor() | |
| { | |
| super({ | |
| key: 'home' | |
| }); | |
| } | |
| init (data) | |
| { | |
| super.init(); | |
| } | |
| create () | |
| { | |
| this.add.text(20, 15, 'BaseScene Test', { fontFamily: 'Courier', fontSize: 30, color: 'white', align: 'left' }).setOrigin(0); | |
| this.add.text(20, 65, this.user.username, { fontFamily: 'Courier', fontSize: 30, color: 'white', align: 'left' }).setOrigin(0); | |
| this.add.text(20, 165, 'Tap here to update score', { fontFamily: 'Courier', fontSize: 30, color: 'green', align: 'left' }).setOrigin(0) | |
| .setInteractive().on('pointerdown', () => theatre.emit('updateScore') ); | |
| this.scene.run('hud'); | |
| theatre.emit('hudFocus'); | |
| } | |
| update () {} | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { BaseScene } from './base.js'; | |
| const theatre = new Phaser.Events.EventEmitter(); | |
| export { theatre }; | |
| export class HUD extends BaseScene { | |
| constructor () { | |
| super({ | |
| key: 'hud' | |
| }); | |
| } | |
| init () | |
| { | |
| super.init(); | |
| } | |
| create () { | |
| for (let fnc of ['updateScore']) { | |
| theatre.on(fnc, this[fnc], this); } | |
| this.add.text(this.sys.canvas.width - 20, 15, 0, { fontFamily: 'Courier', fontSize: 30, color: 'yellow', align: 'right' }).setOrigin(1,0); | |
| this.score = this.add.text(this.sys.canvas.width - 70, 15, 'Score:', { fontFamily: 'Courier', fontSize: 30, color: 'yellow', align: 'left' }).setOrigin(1,0); | |
| // Example of invoking theatre emitter: | |
| // foo.on("pointerdown", () => theatre.emit('barEvent', payload) ); | |
| } | |
| hudFocus() | |
| { | |
| this.scene.run('hud'); | |
| this.scene.bringToTop('hud'); | |
| } | |
| updateScore() | |
| { | |
| this.score.text = Number(this.score.text) + 1; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>BaseScene Test with HUD and Event Emitter to share data across scenes in Phaser 3.60</title> | |
| </head> | |
| <body style="margin:0px"> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Boot } from './boot'; | |
| import { Preloader } from './preloader'; | |
| import { Home } from './home'; | |
| import { HUD } from './hud'; | |
| const config = { | |
| scale: { | |
| mode: Phaser.Scale.FIT, | |
| parent: 'phaser-example', | |
| autoCenter: Phaser.Scale.CENTER_BOTH, | |
| width: 1136, | |
| height: 640 | |
| }, | |
| scene: [ | |
| Boot, | |
| Preloader, | |
| Home, | |
| HUD | |
| ], | |
| callbacks: { | |
| postBoot: function (game) { | |
| game.scene.dump(); | |
| } | |
| } | |
| }; | |
| const game = new Phaser.Game(config); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class Preloader extends Phaser.Scene | |
| { | |
| constructor() | |
| { | |
| super({ | |
| key: 'preloader' | |
| }); | |
| } | |
| preload() | |
| { | |
| this.load.json('userData', 'user.json'); | |
| } | |
| create() | |
| { | |
| var user = this.cache.json.get('userData'); | |
| this.registry.set('user', user); | |
| this.scene.start('home'); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"id":1,"username":"batman"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment