How to create different objects by using inner class - oop

Question

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 is 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 the browser displayed “Uncaught TypeError: Cannot read property ’ fillRect ’ of undefined” after running 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 colors, sizes, positions, and methods 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

Answer 1

this.graphic is not initialized
You must initialize this.graphic in constructor, e.g
class Graphic {
graphic: Phaser.GameObjects.Graphics;
constructor(scene){
this.graphic = scene.add.graphics(0,0);
}
graphicAdd() {
this.graphic.fillRect(100, 100, 200, 200);
this.graphic.fillStyle(0xffffff);
}
}
then let GraphicA = new Graphic(this);