proyecto26 / ion-phaser

A web component to use Phaser Framework with Angular, React, Vue, etc 🎮
https://market.ionicframework.com/plugins/ionphaser
MIT License
251 stars 39 forks source link

How to upgrade to Phaser 3.52.0 #27

Closed ccolomboext closed 3 years ago

ccolomboext commented 3 years ago

Right now the version of Phaser is freezed at 3.19.0 and I'm getting a lot of errors that, according to the developer, would be solved by upgrading it.

Is there any way to upgrade it?

jdnichollsc commented 3 years ago

Ok give me a moment to fix the issue with this peer dependency

NilsMinor commented 3 years ago

Hey @jdnichollsc any updates on this topic? I also would like to use phaser 3.52 but ion-phaser depends on 3.19 :)

ccolomboext commented 3 years ago

Hey @NilsMinor,

As a workaround I endup creating a React componenet that manages Phaser's game instance. Here follows the base code for the componenet, maybe you'll have to tweak your CSS to actually show the canvas but that depends a lot on your layout. Hope it helps, beign that I'm not sure you're using React....

import React from "react";
import Phaser from "phaser";

let game = null;

class Game extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div id="game-container"></div>
    );
  }

  componentDidMount() {
      game = new Phaser.Game({
        type: Phaser.AUTO,
        parent: "game-container",
        scale: {
          mode: Phaser.Scale.RESIZE,
          autoCenter: Phaser.Scale.CENTER_BOTH,
        },
        scene: [BootScene],
      });
  }

  getScene(key) {
    if (game && game.scene) {
      return game.scene.getScene(key);
    }
  }

  callFunctionInsideScene() {
    this.getScene("SomeGameSceneKey").doSomethingInsideTheScene();
  }

  componentWillUnmount() {
    game.destroy(true);
    game = null;
  }
}
jdnichollsc commented 3 years ago

Let me fix that during this weekend, if you are using React you can try using hooks: https://stackblitz.com/edit/react-phaser

NilsMinor commented 3 years ago

I am using angular and it works really well :) But I have some issues with version 3.19 and I hope that these issues are fixed in a newer version. But as ion-phaser depends on 3.19 I am not able to update. Thanks for updating @jdnichollsc 👍

NilsMinor commented 3 years ago

Hey :) Any updates on the ion-phaser/phaser dependency ? I do not really understand how to fix this problem by myself with adding any code to the package.json for example, so I really need you to update the dependency inside ion-phaser ^^

Thanks, Nils :)

jdnichollsc commented 3 years ago

Let me try to do that ASAP, I need to identify what's the problem with the current configuration because Phaser is a peer dependency, very odd

jdnichollsc commented 3 years ago

Do you know any good npm package to analyze bundle size locally?

NilsMinor commented 3 years ago

I never used a nom package to analyze the size but this (https://www.npmjs.com/package/webpack-bundle-analyzer) seams to do exactly what you are looking for ? :)

Marchiuzzz commented 3 years ago

I am using Vue and also need Phaser version of 3.50 or higher. I am a bit confused since in package.json I do have "phaser": "^3.52.0" but none of the functions which came with 3.5 work for me

NilsMinor commented 3 years ago

Hey @jdnichollsc sorry for bugging you :D did you came up with a solution? Best regards, Nils

jdnichollsc commented 3 years ago

I'm trying to solve the issue with this peer dependency, any reaction or comment from the below issue itself is really appreciated! https://github.com/ionic-team/stencil/issues/2829

jdnichollsc commented 3 years ago

Please check the new version and let me know 👍

jdnichollsc commented 3 years ago

Let me know if the issue persist, thanks!