# How to create different objects by using inner class

**URL:** <https://phaser.discourse.group/t/how-to-create-different-objects-by-using-inner-class/6869>\
**Category:** Phaser 3\
**Created:** [July 6, 2020, 7:11am UTC](https://phaser.discourse.group/t/how-to-create-different-objects-by-using-inner-class/6869 "2020-07-06T07:11:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jennifer](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jennifer/32/3677_2.png) [@Jennifer](https://phaser.discourse.group/u/Jennifer)\
**Post date:** [July 6, 2020, 7:11am UTC](https://phaser.discourse.group/t/how-to-create-different-objects-by-using-inner-class/6869/1 "2020-07-06T07:11:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Darko](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/darko/32/3335_2.png) [@Darko](https://phaser.discourse.group/u/Darko)\
**Post date:** [July 6, 2020, 12:02pm UTC](https://phaser.discourse.group/t/how-to-create-different-objects-by-using-inner-class/6869/2 "2020-07-06T12:02:04Z")

</div>

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:

```javascript
         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

---

<div class="post-metadata">

**Author:** ![Jennifer](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jennifer/32/3677_2.png) [@Jennifer](https://phaser.discourse.group/u/Jennifer)\
**Post date:** [July 7, 2020, 4:01am UTC](https://phaser.discourse.group/t/how-to-create-different-objects-by-using-inner-class/6869/3 "2020-07-07T04:01:55Z")

</div>

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.