Angular and Phaser

Phaser 3
1

Hello everybody

I am new using Phaser, I want to integrate Phaser 3 in my application of Angular 6, within a component but I did not find the way to do it, download pharse from npm, but I am lost, someone could tell me where I can see more information about it or get oriented a little, I would appreciate it.

2

I struggled with this and eventually got it working. I’m not an expert though, so there may be better ways. This is what I did:

  1. Added the npm module.

  2. Copied the phaser.d.ts types file into my src folder.

  3. At the top of phaser.d.ts, add these lines:

    declare interface ActiveXObject {}
    declare interface GamepadHapticActuator {}

  4. Added “node_modules/phaser/dist/phaser.min.js” to the scripts array in angular.json.

  5. In the ngOnInit method of my angular component, create a Phaser Game object.

  6. Use phaser classes using the Phaser namespace e.g

    class MyScene extends Phaser.Scene { }

The rest is the same as usual.

Hope that helps.

Edit: You may also need to add the following line to tsconfig.app.json

"inclue": [ "*.d.ts" ],
3

Thanks, but since you imported the file phaser.d.ts to your component ?, it gives me an error, it says that this file is not a module and I am trying to import it in this way:

import * as Pasher from ‘…/…/…/phaser’;

ERROR:
File ‘c:/ … /src/phaser.d.ts’ is not a module.

4

I haven’t used import statements anywhere in my code. I do remember it being tricky to get working.

Try using the Phaser classes without importing anything.

If that doesn’t work, try replacing the import statement with

declare var Phaser;

I’ve also just tested my app without the include array in tsconfig.app.json. It seems to work fine without.

5

Try using this starter as an example: https://github.com/TristanBonsor/phangular