https://github.com/brsullivan/phaser3-angular8

A boilerplate for integrating Phaser3 into an Angular8 project
https://github.com/brsullivan/phaser3-angular8

angular angular8 html5-game phaser phaser3 phaserjs

Last synced: 15 days ago
JSON representation

A boilerplate for integrating Phaser3 into an Angular8 project

• Host: GitHub
• URL: https://github.com/brsullivan/phaser3-angular8
• Owner: brsullivan
• License: gpl-3.0
• Created: 2019-09-19T18:03:49.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T09:53:13.000Z (about 2 years ago)
• Last Synced: 2025-01-16T06:59:40.608Z (19 days ago)
• Topics: angular, angular8, html5-game, phaser, phaser3, phaserjs
• Language: TypeScript
• Size: 2.55 MB
• Stars: 15
• Watchers: 4
• Forks: 6
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Phaser 3 & Angular 8

## Steps to Setup

1. Create a new angular project with Angular CLI. Add routing (if you want) and your choice of stylesheet format

```

  ng new phaser-angular

```

2. CD into new angular project folder and install Phaser

```

  npm i --save phaser

```

3. Copy `phaser.d.ts` from `/node_modules/phaser/types/` and place it in your project folder.  

4. Copy `phaser.min.js` from `/node_modules/phaser/dist/` and place it in your project's `src/assets/` folder.

5. Add reference to the `phaser.min.js` file in your `index.html`.

```

  

    ...

    

  

```

6. Also, add a fallback script to catch an undefined `global` that Phaser requires.

```

  

    if (global === undefined) {

      var global = window;

    }

  

```

7. In your component.ts file, add import for Phaser.

```

  import Phaser from 'phaser';

```

* TypeScript will throw an error: This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag

* In `tsconfig.json`, add 'allowSyntehticDefaultImports': true

* Also in `tsconfig.json`, update your `libs` arry to include `scripthost`

```

  "lib": [

    "es2018",

    "dom",

    "scripthost"

  ]

```

8. Define your game configuration and initialize

```

class NewScene extends Phaser.Scene {

  constructor() {

    super({ key: 'new' });

  }

  preload() {

    console.log('enter preload');

  }

  create() {

    console.log('enter create');

  }

}

@Component({

  selector: 'app-sample',

  templateUrl: './sample.component.html',

  styleUrls: ['./sample.component.scss']

})

export class SampleComponent implements OnInit {

  phaserGame: Phaser.Game;

  config: Phaser.Types.Core.GameConfig;

  constructor() {

    this.config = {

      type: Phaser.AUTO,

      scene: [ NewScene ],

      physics: {

        default: 'arcade',

      },

      scale: {

        mode: Phaser.Scale.FIT,

        parent: 'gameContainer',

        width: 800,

        height: 600

      }

    };

  }

  ngOnInit() {

    this.phaserGame = new Phaser.Game(this.config);

  }

}

```