# Register gameobject class with matter physics

**URL:** <https://phaser.discourse.group/t/register-gameobject-class-with-matter-physics/5411>\
**Category:** Phaser 3\
**Created:** [March 5, 2020, 8:22pm UTC](https://phaser.discourse.group/t/register-gameobject-class-with-matter-physics/5411 "2020-03-05T20:22:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![glantucan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/glantucan/32/920_2.png) [@glantucan](https://phaser.discourse.group/u/glantucan)\
**Post date:** [March 5, 2020, 8:22pm UTC](https://phaser.discourse.group/t/register-gameobject-class-with-matter-physics/5411/1 "2020-03-05T20:22:39Z")

</div>

How do you create subclasses derived from Phaser.Physics.Matter.Sprite and register them to instantiate them like

```javascript
this.matter.add.myMatterSprite(...)

```

I know how to register Sprite subclasses but no clue on how to do it matter physics sprites.

---

<div class="post-metadata">

**Author:** ![glantucan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/glantucan/32/920_2.png) [@glantucan](https://phaser.discourse.group/u/glantucan)\
**Post date:** [March 5, 2020, 9:05pm UTC](https://phaser.discourse.group/t/register-gameobject-class-with-matter-physics/5411/2 "2020-03-05T21:05:51Z")

</div>

Ok, I think I see the problem: there is no `register` function on the Matter.Factory class.

I did found a workaround though:

Lander.js

```javascript
import Phaser from "phaser";

class Lander extends Phaser.Physics.Matter.Sprite {
    
    update(time, delta) {
        super.update(time, delta);
        /* gameobject update logic */
    }
}

Phaser.GameObjects.GameObjectFactory.register('lander', function (x, y, key, frame, matterOptions) {
        
        var lander = new Lander(this.scene.matter.world, x, y, key, frame, matterOptions);

        this.displayList.add(lander);
        this.updateList.add(lander);

        return lander;
    }
);

export default Lander;

```

So that now I can do on my scene:

```javascript
import Phaser from "phaser";
import Lander from "/gameobjects/space/Lander";
class SpaceScene extends Phaser.Scene {
    //...
    create() {
       //...
       var lander = this.add.lander(
           this.scale.width/2, 
           this.scale.height*.9, 
           'space', 'lander.png', 
           { 
                shape: matterShapes['lander']
           }
       );
       //...
    }
}

```

Being a maniac as I am I don’t find very elegant to invoke a matter physics factory function directly from the scene, but I guess there is nothig I can do about it without modifying the phaser source code, right?

---

<div class="post-metadata">

**Author:** ![glantucan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/glantucan/32/920_2.png) [@glantucan](https://phaser.discourse.group/u/glantucan)\
**Post date:** [March 5, 2020, 9:43pm UTC](https://phaser.discourse.group/t/register-gameobject-class-with-matter-physics/5411/3 "2020-03-05T21:43:25Z")

</div>

Ok, being stubborn in addition to a maniac and reading how the register function is injected in the GameObjectFactory prototype I found a better(\*) solution.

Import this file after phaser, but before your scene classes on your index.js (or whatever js file you use as entry point)

`MatterFactoryRegister.js`

```javascript
Phaser.Physics.Matter.Factory.register = function (factoryType, factoryFunction) {
    if (!Phaser.Physics.Matter.Factory.prototype.hasOwnProperty(factoryType))
    {
        Phaser.Physics.Matter.Factory.prototype[factoryType] = factoryFunction;
    }
}

```

Lets you register the Matter.Sprite subclass into the Matter factory this way:

`Lander.js`

```javascript
import Phaser from "phaser";

class Lander extends Phaser.Physics.Matter.Sprite {
    
    update(time, delta) {
        super.update(time, delta);
        /* gameobject update logic */
    }
}

Phaser.Physics.Matter.Factory.register('lander', 
    function (x, y, key, frame, matterOptions) {
        var lander = new Lander(this.scene.matter.world, x, y, key, frame, matterOptions);

        this.sys.displayList.add(lander);
        this.sys.updateList.add(lander);

        return lander;
    }
);

export default Lander;

```

And so you can do this in your scene:

`SpaceScene.js`

```javascript
import Phaser from "phaser";
import Lander from "/gameobjects/space/Lander";
class SpaceScene extends Phaser.Scene {
    //...
    create() {
       //...
       var lander = this.matter.add.lander(
           this.scale.width/2, 
           this.scale.height*.9, 
           'space', 'lander.png', 
           { 
                shape: matterShapes['lander']
           }
       );
       //...
    }
}

```

Which is what I originally was looking for.

😉

EDIT:  
(\*) Actually it’s not a very good idea to modify native or library prototypes on the fly because in a later version of phaser we could be overwriting library functionality, so it’s better to do something like this (kinda polyfill):  
`MatterFactoryRegister.js`

```javascript
if (!Phaser.Physics.Matter.Factory.register) {

    Phaser.Physics.Matter.Factory.register = function (factoryType, factoryFunction) {
        if (!Phaser.Physics.Matter.Factory.prototype.hasOwnProperty(factoryType))
        {
            Phaser.Physics.Matter.Factory.prototype[factoryType] = factoryFunction;
        }
    }
}

```

---

<div class="post-metadata">

**Author:** ![waschi](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/waschi/32/3258_2.png) [@waschi](https://phaser.discourse.group/u/waschi)\
**Post date:** [April 27, 2020, 6:10am UTC](https://phaser.discourse.group/t/register-gameobject-class-with-matter-physics/5411/4 "2020-04-27T06:10:27Z")

</div>

You can actually just extend the Matter.Sprite class and add it to your scene. Makes for an easier solution (in TypeScript):

```
export default class SpriteCharacter extends Phaser.Physics.Matter.Sprite {
  constructor(scene: Scene, spriteTexture: string, x: number, y: number) {
    super(scene.matter.world, x, y, spriteTexture, 0)
    scene.add.existing(this)
  }
}
```