Interactable Custom Sprite Class

Phaser 3
1

Hello, all! I’m trying to create a simple card game where the player can draw cards and use one by clicking on it every turn. I’m trying to accomplish this with a card object that holds card data and a custom class that extends the Sprite class, which has a card data field, and having that be interactable. Code for the custom VisualCard class is here:

import Card from './card';

export default class VisualCard extends Phaser.GameObjects.Sprite {
  card: Card;

  constructor(scene, x: number, y: number, card: Card){
    super(scene, x, y, 'card' + card.getIndex());
    this.setDisplaySize(130, 150);
    this.setOrigin(0, 1);
    this.card = card;

    this.setInteractive();
    this.on('pointerdown', () => console.log(card.name + ' was clicked'));

    scene.add.existing(this);
  }
}

And the code for the Card object is here:

export default class Card {

  name: string;
  cost : number;
  effect: number;
  index: number;
  type: string;
  
  constructor(name: string, type:string, cost: number, effect : number, index: number){
    this.name = name;
    this.cost = cost;
    this.effect = effect;
    this.index = index;
    this.type = type;
  }

  public getName(): string{
    return this.name;
  }

  public getCost(): number{
    return this.cost;
  }

  public getEffect(): number{
    return this.effect;
  }

  public getIndex(): number{
    return this.index;
  }
}

However, when I run the project and click on VisualCard object, nothing is output to the console, which seems to indicate that its not interactable. Testing this with pointerover seems to confirm this. What am I doing wrong here? Any help is greatly appreciated!

2

That code worked for me. What’s in the game config?

3

Here’s the game config:

  const config = {
    type: Phaser.AUTO,
    backgroundColor: '#ffffff',
    scale: {
      parent: 'phaser-game',
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_BOTH,
      width: DEFAULT_WIDTH,
      height: DEFAULT_HEIGHT
    },
    scene: [PreloadScene,MainScene, WorldScene,TutScene],
    physics: {
      default: 'arcade',
      arcade: {
        debug: false
      }
    }
  }
4

Try adding to each scene create():

this.input.on('pointerdown', () => console.log(this.scene.key + ' was clicked'));
5

Ok I added that and that is being printed to the console for every scene on scene creation. Something I should mention is that inputs (mouse and keyboard) were working in other parts of the project.

6

It’s printed only when clicked, I hope?

Not sure what’s going on. Is it possible interactive game objects in another scene are on top?

phaser-plugin-debug-draw may help a little, as it shows input pointers and interactive objects.

7

It is only printing when clicked. I actually figured out the issue. This is a group project and one of my teammates put something in the update() of the relevant scene that printed something to console constantly which made it so that I couldn’t see anything else. Things from scenes before I could see, but not in that one. Thank you for your help! Unfortunately, now I’m encountering another problem. I’m trying to make it so that VisualCards change their tint to 0x00ff00 when the mouse is over them and clear the tint when its not. The code for that is:

this.setInteractive();
this.on('pointerover', () => this.setTint(0x00f0f0));
this.on('pointerout', () => this.clearTint());

Now I know that interaction with the mouse is working, but this isn’t. I even have the same code elsewhere for a different sprite in the same scene and it works perfectly fine. Any help with this is very appreciated!

8

With arrow functions this is not the game object, so it will error.

9

Oh ok, that makes sense. Is there any way to do what I’m trying to do then, or is it not possible?

10

Sorry, I didn’t notice that is a game object class method. The arrow function should work there.

11

Thank you for your help! I’ve actually figured out the issue; there’s a function that’s used to display the cards a player has drawn and one of my teammates put that function in the update function and the same function is also associated with the function for drawing cards. This created two copies of all the cards and, for some reason, the top copies didn’t work. Commenting out the update() occurrence of the function allows it to work properly. Again, thank you so much for your help and time!