Ionic 5 & Phaser 3

Ionic Framework
1

Hi there,
i want to develop a game with Ionic and Phaser.
I downloaded the phaser.js and imported it in the index.html

<script src="assets/phaser.js"></script>

in my home.page.html i got:

<ion-content>
  <div id="phaser-example"></div>
</ion-content>

Here is my home.page.ts

grafik
grafik678×1142 33.3 KB

When i run it with ionic serve i can see i the web console that is has an error:
ERROR TypeError: “game.load is undefined”

I just want to start to add a text or an image to my game.

Can please someone help to get started?
Thank you :smiley:

2

Someone has any idea?

Thank you very much! :slight_smile:

3
  1. remove <script src="assets/phaser.js"></script> in index.html
  2. in root folder: angular.json, search "scripts": [], add your js file.
    eg: "scripts": ["src/phaser.min.js"]
  3. restart ng serve, ‘phaser’ should work.
4

Hi,

i tried this, but i still got this error:
ERROR TypeError: "game.load is undefined"

I dont know what to do :thinking:

5

Whether or not it solves your problem

Game should be declared as member of the class and not at the global level

Then address it through this.game

6

hi @Treeman92 any luck with your finding so far?
I’m having the same problem setting up Phaser 3 for Ionic 4/5 too. I’ve been searching for few days now, and found no clue about how to proceed.

I tried both compile-time & runtime integration (same as your solution), but I couldn’t get any far and I also have the same “this.game.load is not a function” problem.

Please advise.

7

Has there been a resolution to this? Oddly enough, I just started trying to get Phaser 3 and Ionic 5 to integrate and I am getting the exact same error…the Phaser Discord has not yet responded with whether these 2 even play nice together…

8

I think I was able to solve this after some experimenting and researching.

Once you have generated your project and run npm i phaser, you have to add a line to the scripts array in angular.json

"scripts": [
    "node_modules/phaser/dist/phaser.min.js"
]

then you need to modify your tsconfig.json file to include the ScriptHost library

"lib": [
    "es2018",
    "dom",
    "scripthost" //add this
],

then the final addition should be to add a line at the very end of the polyfills.ts file to avoid an ActiveX bug

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
(window as any)['global'] = window;

with these changes implemented i was able to get Phaser 3 working with Ionic! Let me know if this works!

1 Like
9

Thank you @jjdev, it worked perfectly for me, after hours of researches :+1: :pray:

1 Like
10

Thank you! I am new to this. I am using Ionic 6 with Angular 10 and Phaser 3 with type definitions. How to I make the script from the .ts file display in the .html file with best practices?

11

I’m no expert, but compared to what I have been doing, we seem to be going about it the same way except I have abstracted my scenes to individual xxxx.scene.ts files for separation of concerns.
for example

export class MyScene extends Phaser.Scene {
    constructor() {
        super('MyScene'); //Your Scene name reference
    }

    preload() {

    }

    create() {

    }

    update() {

    }
}

I end up with something like BootScene → LoadingScene → TitleScene → GameScene

BootScene: add all the scenes and then go to the next scene
LoadingScene: load assets, sprites, tiles, sound, etc
TitleScene: once the loading is done show your game and prompt user to start
GameScene: GameScene :smiley:

and then all you have to change is your config var:

var config = {
    ...,
    scene: BootScene

and make sure your boot.scene.ts is imported

1 Like
12

Hi. I have developed a simple game using Phaser and Ionic. Here Is the link https://play.google.com/store/apps/details?id=com.spacecondom.starter

The game sucks, but It works.

I think you should import phaser in the app component and delete the homepage.

Edit. Since I don’t know how to use the full height of newer Android phones, I am following android dev docs trying to find a solution. Maybe it Is possibile to use Kotlin and Phaser. Who knows, I am Reading docs trying to find a way to solve this issue.

1 Like