How to create different objects by using inner class

Phaser 3
1

hi~everyone~
Recently,I am learning Phaser 3 to build a game ,and using Typescript to write the code.
besides, I am trying to create different objects by using Object-oriented programming inside Phaser class.

The code I wrote as below:

class DifferentGraphics extends Phaser.Scene{

  constructor() {
         super({
               key: "DifferentGraphics",
          });
   }

  create(){
        class Graphic {
               graphic: Phaser.GameObjects.Graphics;
               graphicAdd() {
                     this.graphic.fillRect(100,100,200,200);
                     this.graphic.fillStyle(0xffffff);
               }
         }

        let GraphicA =new Graphic();
        GraphicA.graphicAdd();
   }

}

Compiler didn’t show any Typescript error, but browser displayed “Uncaught TypeError: Cannot read property ’ fillRect ’ of undefined” after ran the code.

I don’t know what’s wrong with my code?
If anyone can share your ideas or solutions,I will appreciate it.

The target I wanna achieve is to make 3 different objects, and these objects have different color, size, position, and method that can tween the size separately by using Object-oriented programming.

How can I do to make it happen?
I need a direction or suggestion

Thank you

2

Hello, in your example graphic is defined only with a type… also you need to add graphics to the scene, so you could try something like:

         class Graphic {
              constructor(scene) {
                   this.graphic = scene.add.graphics()
               }
               graphicAdd() {
                     this.graphic.fillRect(100,100,200,200);
                     this.graphic.fillStyle(0xffffff);
               }
         }

        let GraphicA =new Graphic(this);

I hope this helps

1 Like
3

Thank you so much^^
The code you provided fixed my problem.
It needs “GraphicA.graphicAdd();” to display the object^^
But most of code does work.