Using an object as a graphics object

[Gradual]

Hi all,

Sorry if this is a very newb question...

I have created a scene that uses a class instance. Within the class that is called, I have a constructor method that renders an image to use. The constructor method looks like this:

export default class Gamepiece {
constructor(scene){this.render = (x,y,sprite) => {let gp = scene.add.image(x,y,sprite).setScale(1.0,1.0).setDepth(100).setInteractive();
scene.input.setDraggable(gp);return gp;  }}

I call the class from a scene, and the returned class instance works fine until I try to apply drag events to it. Here is the working call to the class:

let testObject = new Gamepiece(this);                           
testObject.render(boardLayout[0].x,boardLayout[0].y,'gamePiece');

Unfortunately, it errors if I attempt to assign drag events to it. Here is the snippet for assigning the drag event:

testObject.on('dragstart',function(){
	console.log("dragstart fired");
});

The error is 'Uncaught TypeError: testObject.on is not a function'

 

I see that an object that works normally with drag events is a graphics object. When I export the object to console, the object I am creating looks like this:

Object{
render: function render(x, y, sprite)
<prototype>: {…}
circlesAvailable: circlesAvailable(gamePiece, connections)
length: 2
name: "circlesAvailable"
<prototype>: function ()
constructor: class Gamepiece { constructor(scene) }
moveGamePiece: function moveGamePiece()
<prototype>
 

How (or is it possible) to reference this object to attach drag events to it? I've dug around, but can't seem to make it work. I'd assume the reference might be something like: testObject.prototype.graphics.on(){etc}. But I'm stuck.

Feel free to suggest more efficient/practical ways to approach this.

Thanks for any help you can provide!

-Bruce

 

 

 

Edited August 5, 2020 by Gradual
Formatting

[Gradual]

I ended up solving this by changing the class to extend a sprite. So, extending the Phaser Sprite class allowed for adding instance classes (and drag events) that make everything neat and tidy: 

class Gamepiece extends Phaser.GameObjects.Sprite{
constructor(scene){this.render = (x,y,sprite) => {let gp = scene.add.image(x,y,sprite).setScale(1.0,1.0).setDepth(100).setInteractive();
scene.input.setDraggable(gp);return gp;  }}