No overload matches

[luilabdev]

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, withIonLifeCycle } from '@ionic/react';
import React from 'react';
import Phaser from 'phaser';
import { IonPhaser } from '@ion-phaser/react';

import './Home.css';

class Home extends React.Component {
    state = {
        initialize: false,
        game: {
            width: "100%",
            height: "100%",
            type: Phaser.AUTO,
            scene: {}
        }
    }

    render() {

        const { initialize, game } = this.state;

        return (
            <IonPage>
                <IonHeader>
                    <IonToolbar>
                        <IonTitle>Hola</IonTitle>
                    </IonToolbar>
                </IonHeader>
                <IonContent>            
                    <IonPhaser game={game} initialize={initialize} />
                </IonContent>
            </IonPage>
        );
    }
}

export default withIonLifeCycle(Home);

The error occurs when I pass the game object to the game property, I am using Ionic with react. I tried your react example but not working to. I hope that you can help me or is a mistake from my part... Is a blank project with Ionic cli, and I am new using this frameworks sorry for my english, regards.

[jdnichollsc]

Hola Luis, puedes hablar en español, tu tranqui! jaja Estás usando TypeScript, cierto? Para corregir este error de tipos puedes hacer esto:

interface Props {}
interface State {
  initialize: boolean
  game: Phaser.Game
}

class Home extends React.Component<Props, State> {

}

Let me know 👍

[luilabdev]

Hola Juan David, gracias por tu ayuda y el apollo moral jajaja disculpa tanta molestia, practicamente soy novato usando Ionic con React y TypeScript... y me esta resultando dificil implementar ion-phaser, hice lo que me recomendaste y ahora tengo otro par de detalles dejo por aqui una captura.

Realmente no se que pasa ahi, tambien tengo un mensaje de alerta sobre el initialize, espero puedas ayudarme, saludos.

[jdnichollsc]

No problem! Para corregir ese tipo podrías clear tu escena antes, ejemplo:

class MyScene extends Phaser.Scene {
  helloWorld: Phaser.GameObjects.Text

  init () {
    this.cameras.main.setBackgroundColor('#24252A');
  }

  create () {
    this.helloWorld = this.add.text(
      this.cameras.main.centerX, 
      this.cameras.main.centerY, 
      "Hello World", { 
        font: "40px Arial", 
        fill: "#ffffff" 
      }
    );
    this.helloWorld.setOrigin(0.5);
  }

  update () {
    this.helloWorld.angle += 1;
  }
}

y ya en el objeto game le pasas la escena: scene: MyScene 👍

[luilabdev]

Sigue sin funcionar, creando la clase extendida de Phaser.Scene o pasandole directamente el objeto con las funciones init, create, update... siempre me genera el mismo problema

[jdnichollsc]

Bueno, ya es el manejo de los tipos de Phaser, no está relacionado con IonPhaser 😅

[luilabdev]

Gracias David, sera que podrias orientarme de alguna otra forma. Te lo agredeceria mucho...

[jdnichollsc]

Creo que mi consejo sería practicar más sobre TypeScript :) Revisa sobre como hacer casting the tipos => https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions