setInteractive method

Phaser 3
1

Can I use the setInteractive function on a physics group?
I’ve tried it, but I’m getting ‘setInteractive is not a function’ error.
This is my code:

c = this.physics.add.group({
key: ‘c’,
repeat: 0,
setXY: { x:210 , y: 0}
});
this.physics.add.collider(c, stand);
c.setInteractive();
this.input.setDraggable ( c );

I’ve loaded ‘c’ as an image in the preload function and the stand is another image it collides with.
I want to add c as a physics group so I can make it collide and overlap with other images(added as physics groups) and I also want to make this image draggable.

Dragging is the main component of my game and it is not working without being setInteractive().

Thank you!

2

A group is not a GameObject, it’s just a collection of GameObjects. You could do something like the following:

let children = c.getChildren();
for(let i = 0; i < children.length; i++)
{
    children[i].setInteractive();
}
1 Like
3

Hi Jake.
Thank you so much for your help. I’m very new at phaser so all help is much appreciated.
After I do this however, the setDraggable is not working.
I tried putting it inside the for loop too.

In my game, I have 10 images (‘c’ is one of them) and the user has to drag and drop them.
After that is done, I want to be able to read what order the user has arranged those images in, and display that or record it.

@Jake.Caron this is my complete code as of now:

//var gameScene= new Phaser.Scene(‘Game’);

var config={
type: Phaser.AUTO,
width: 1230,
height: 800,
physics:{
default: ‘arcade’,
arcade: {
gravity: { y: 300},
debug: false
}
},
scene: {
preload: preload,
create: create,
//update: update
}

};

var game= new Phaser.Game(config);
const droppedObjectIdList = [ ];
function preload()
{
this.load.image(‘background’,‘assets/background.png’);
this.load.image(‘a’, ‘assets/Acceptance.png’);
this.load.image(‘c’, ‘assets/Curiosity.png’);
this.load.image(‘f’, ‘assets/Freedom.png’);
this.load.image(‘o’, ‘assets/Order.png’);
this.load.image(‘p’, ‘assets/Power.png’);
this.load.image(‘r’, ‘assets/Relatedness.png’);
this.load.image(‘s’, ‘assets/Status.png’);
this.load.image(‘h’, ‘assets/Honor.png’);
this.load.image(‘g’, ‘assets/Goal.png’);
this.load.image(‘m’, ‘assets/Mastery.png’);
this.load.image(‘bar’,‘assets/bar.png’);
}

function create() {
this.add.image(615, 400, ‘background’);
bar= this.physics.add.staticGroup();
bar.create(615,450,‘bar’);
var mvs= [‘c’,‘h’,‘a’,‘m’,‘p’,‘f’,‘r’,‘o’,‘g’,‘s’];

for (var i=0; i<10 ;i++)
{
    
    this.input.setDraggable(this.add.image(210+(90*i), 200, mvs[i]).setInteractive());

}    

// for (var i=0;i<10;i++)
// {
// 	this.physics.add.staticGroup({
// 		key: mvs[i],
// 		setXY: {x: 210, y: 200, stepX: (90*i)}
// 	});
// 	this.physics.add.collider(mvs[i], bar);
// }

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

//function update(){
this.input.on(“dragend”, function(pointer, gameObject)
{
droppedObjectIdList.push(this.id);
});
for (i=0;i<10;i++)
{
//this.add.text(600, 500, ‘hello’,
this.add.text(600, 500, droppedObjectIdList[i],{ fill: “#ffffff”});
}
//}

}

I’ve been stuck for days. Could you help ?

4

What error are you getting in your console

5

setDraggable not defined is the error I’m getting when I add the images as physics group.

6

It’s telling you that this.input hasn’t been defined yet. From what you have provided I don’t see where you have defined this.input.

1 Like
7

Also Actions.SetHitArea() for this.