Giter Club home page Giter Club logo

Comments (3)

rexrainbow avatar rexrainbow commented on June 15, 2024 1

This bug is fixed (commit). Please get latest minify file.
NPM package will upgrade at end of this month.

from phaser3-rex-notes.

rexrainbow avatar rexrainbow commented on June 15, 2024

Test code with latest minify file. Works fine without any error message.
Could you provide a simplest runnable test code to reproduce your case?

from phaser3-rex-notes.

gzjayvan avatar gzjayvan commented on June 15, 2024

My project uses TypeScript and Vite.
When a container contains a Sizer or DropdownList (maybe other components ?), an error is triggered.
but [email protected] works fine.

error message:

Uncaught TypeError: Cannot read properties of undefined (reading 'sys')
    at Sizer.addToDisplayList (phaser.js:35008:67)
    at Container2.removeHandler (phaser.js:47829:24)
    at Object.Remove (phaser.js:238780:26)
    at Container2.remove (phaser.js:48237:34)
    at Sizer.RemoveFromContainer (P3Container.js:29:17)
    at Sizer.removeFromContainer (P3Container.js:68:29)
    at set parentContainer [as parentContainer] (ContainerLite.js:244:18)
    at Sizer.destroy (phaser.js:35205:14)
    at Sizer.destroy (Base.js:48:15)
    at Sizer.destroy (ContainerLite.js:35:15)

package.json:

{
  "main": "index.ts",
  "license": "UNLICENSED",
  "scripts": {
    "dev": "vite --host"
  },
  "devDependencies": {
    "phaser": "^3.60.0",
    "phaser3-rex-plugins": "^1.60.6",
    "typescript": "^5.2.2",
    "vite": "^4.4.11"
  }
}

code:

import Phaser from 'phaser';
import Label from 'phaser3-rex-plugins/templates/ui/label/Label';
import Sizer from 'phaser3-rex-plugins/templates/ui/sizer/Sizer';

class MainScene extends Phaser.Scene {
    constructor() {
        super('main_scene');
    }

    create() {
        const container = this.add.container(400, 300);
        container.add(this.create_sizer());
        container.destroy();
    }
    private create_sizer() {
        const sizer = new Sizer(
            this,
            {
                x: 0, y: 0,
                space: { item: 10 },
                orientation: 'x',
            }
        );
        for (var i = 0; i < 8; i++) {
            sizer.add(new Label(
                this, {
                x: 200, y: 200,
                width: 40, height: 40,
                text: this.add.text(0, 0, `${i}`),
                space: {
                    left: 10,
                    right: 10,
                    top: 10,
                    bottom: 10,
                },
                align: 'center'
            }));
        }
        sizer.layout();
        return sizer;
    }
}


const default_config: Phaser.Types.Core.GameConfig = {
    type: Phaser.AUTO,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
        width: 800,
        height: 600,
        parent: `game`
    },
    disableContextMenu: true,
    scene: [
        MainScene
    ]
}

new Phaser.Game(default_config);

from phaser3-rex-notes.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.