Move sprites / images into container

Phaser 3
1

Hello dudes!

I am trying to move images inside a container with drag and drop. I tryed all, but there is no way to focus sprite when I add input event (it always takes the container if I set setInteractive() to container, and takes nothing if I only set setInteractive() to images/sprites, tested with both childreens).

> export default class Inventory extends Phaser.GameObjects.Container {
> 
>   constructor(scene) {
>     let x = 540
>     let y = 230
>     super(scene, x, y)
>     this.depth = 700
>     this.scene = scene
>     this.x = x
>     this.y = y
>     this.alpha = 0
>     this.setScrollFactor(0)
>     this.items = {}
>     this.width = 200
>     this.height = 330
>     this.displayHeight = 330
>     this.displayWidth = 200
> 
>     (...more code)
> 
>     this.itemToMove = this.scene.add.sprite(0, 0, 'obj').setSize(30, 30).setDisplaySize(30, 30).setInteractive()
>     this.add(this.itemToMove)

No matters if I try to catch the event in main scene making this.input.on(‘pointerdown’, (pointer, objects) => {here}) (I added this.input.topOnly = false, absoluty)
or inside container class making .on(‘pointerdown’, ()=>{here}) after setInteractive()

I think the problem is really easy: drag and drop a sprite inside container or from one container to another, but I cant event handle a simple pointerdown input in gameObject if its inside container :frowning:

Thanks for all help, this is making me crazy.

2

Can you drag the sprite if you make the containers noninteractive?

4

No :(. I tested this on container: this.disableInteractive() and this.removeInteractive().

No matters what I do, if I click on child into container there is not pointer event response :-/. I have been working with Phaser for a months without problems, this is the first time I am stucked

5

I haven’t tried add/remove, but all of the dragging works correctly for me:

6

I am really tilted…

I know this should be really easy but I am sure this is not working. The only difference is I am typing the container in an external class, and then, in main scene, I make something like:
this.inventory = new Inventory(this)

If you see the code on top, I am doing this in the container class:

  var image = this.scene.add.sprite(0, 0, 1).setSize(27, 27).setInteractive()
  this.add(image)
  this.scene.input.setDraggable(image)

and then this in Main scene:

   this.input.on("dragstart", function (pointer, gameObject) {
     gameObject.setTint(0xff0000);
   });

      this.input.on("drag", function (pointer, gameObject, dragX, dragY) {
        gameObject.x = dragX;
        gameObject.y = dragY;
      });

        this.input.on("dragend", function (pointer, gameObject) {
        gameObject.clearTint();
      });

And its still not working… :frowning:

I have this function in main scene:

this.input.topOnly = false
this.input.on('pointerdown', (pointer, objects) => {
  console.log(objects)
})

And when I click in my image inside of Inventory container, it only shows on console: [Inventory]. Image is not in console.log

7

Without any containers, can you drag the sprite?

8

Yes, I can even drag the Inventory container if I make that draggable
this.scene.input.setDraggable(this)

9

Can we have maybe a private call (discord or something) I can show you the game (that is awesome i think :P) the code and the error ^^’

10

Can you DM me on Phaser Discord? I’m samme there also.

11

Done :wink:

I will post here the solution if we find it :smiley:

12

Finally I got the solution…

The problem is that my game is a TileMap based game, and camera follows my player. Even when container have .setScrollFactor(0), the image appears correctly but the interactive area is not there, you have to use .setScrollFactor(0) to sprite AFTER .setInteractive()

I think this should be fixed in phaser core, if you set interactive a object that has scrollFactor 0 and is into container with scrollFactor 0, the interactive area should be scroll factor 0 too.

Thanks for your time!!

1 Like