Collision

alfianinda · December 23, 2019, 4:36am

Hi all,

I am new in making game, I am making ‘match game’ using phaser.

I have a problem when trying to make collision between ‘cigarette card’ and ‘dubai tower’ that rotate to the globe…

I want to make the ‘cigarette card’ fall to the y direction when I click pointer. If the cigarette card match with the ‘dubai tower’, the ‘dubai tower’ is going to change to ‘destroyed image’ that have been loaded

here my codes

var config = {

type: Phaser.AUTO,

width: 700,

height: 1000,

backgroundColor: '0x444444',

parent: 'phaser-example',

scene: {

    preload: preload,

    create: create

},

physics: {

    default: 'arcade',

    arcade: {

        debug: false,

    }

}

};

var game = new Phaser.Game(config);

function preload ()

{

this.load.image("bg", "assets/background.jpg");

this.load.image("dubaiitem", "assets/dubai.png");

this.load.image("nyitem", "assets/new-york.png");

this.load.image("taipeiitem", "assets/taipei.png");

this.load.image("parisitem", "assets/paris.png");

this.load.image("target", "assets/globe.png");

this.load.image("dubai", "assets/extra-menthol-dubai.png");

this.load.image("paris", "assets/chill-menthol-paris.png");

this.load.image("ny", "assets/fast-forward-purple-new-york.png");

this.load.image("taipei", "assets/fast-forward-taipei.png");

this.load.image("destroyed", "assets/splatter.png")

}

var container;

var target;

var destroyed;

var dubai;

var dubaiitem;

var ny;

var nyitem;

var taipei;

var taipeiitem;

var paris;

var parisitem;

var dubai2;

var dubaiitem2;

var ny2;

var nyitem2;

var taipei2;

var taipeiitem2;

var paris2;

var parisitem2;

function create ()

{

//background 

this.add.image(350,500,'bg')

//sprite globe

container = this.add.container(game.config.width/2, 1080);

target = this.add.sprite(0, 0, 'target');

dubaiitem = this.add.sprite(target.x + (target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(0,0) - 90)), target.y + (target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(0,0) - 90)), "dubaiitem" )

dubaiitem.setScale(1.5);

dubaiitem.setAngle(0);

dubaiitem.setOrigin(0.5,-0.05)

nyitem = this.add.sprite(target.x + (target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(45,45) - 90)), target.y + (target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(45,45) - 90)), "nyitem" )

nyitem.setScale(1.5);

nyitem.setAngle(45);

nyitem.setOrigin(0.5,-0.05)

taipeiitem = this.add.sprite(target.x + (target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(90,90) - 90)), target.y + (target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(90,90) - 90)), "taipeiitem" )

taipeiitem.setScale(1.5);

taipeiitem.setAngle(90);

taipeiitem.setOrigin(0.5,-0.05);

parisitem = this.add.sprite(target.x + (target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(135,135) - 90)), target.y + (target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(135,135) - 90)), "parisitem" )

parisitem.setScale(1.5);

parisitem.setAngle(135);

parisitem.setOrigin(0.5,-0.05);

dubaiitem2 = this.add.sprite(target.x + (target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(180,180) - 90)), target.y + (target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(180,180) - 90)), "dubaiitem" )

dubaiitem2.setScale(1.5);

dubaiitem2.setAngle(180);

dubaiitem2.setOrigin(0.5,-0.05)

nyitem2 = this.add.sprite(target.x + (target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(225,225) - 90)), target.y + (target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(225,225) - 90)), "nyitem" )

nyitem2.setScale(1.5);

nyitem2.setAngle(225);

nyitem2.setOrigin(0.5,-0.05)

taipeiitem2 = this.add.sprite(target.x + (target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(270,270) - 90)), target.y + (target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(270,270) - 90)), "taipeiitem" )

taipeiitem2.setScale(1.5);

taipeiitem2.setAngle(270);

taipeiitem2.setOrigin(0.5,-0.05);

parisitem2 = this.add.sprite(target.x + (target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(315,315) - 90)), target.y + (target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(315,315) - 90)), "parisitem" )

parisitem2.setScale(1.5);

parisitem2.setAngle(315);

parisitem2.setOrigin(0.5,-0.05);

container.add(target);

container.add(dubaiitem);

container.add(nyitem);

container.add(taipeiitem);

container.add(parisitem);

container.add(dubaiitem2);

container.add(nyitem2);

container.add(taipeiitem2);

container.add(parisitem2);

this.tweens.add({

    targets: container,

    angle: 360,

    duration: 6000,

    repeat: -1,

});

//sprite cards

dubai = this.add.sprite(700,200, 'dubai').setInteractive();

this.tweens.add({

    targets: dubai,

    x: 10,

    duration: 3500,

    repeat: -1,

    yoyo: true

});

this.input.on('pointerdown', function (pointer) {

    this.tweens.add({

        targets: dubai,

        y: { value: 3000, duration: 1000}

    });

    //collision

    this.physics.add.existing(dubai)

    this.physics.add.existing(dubaiitem)

    console.log(dubai)

    console.log(dubaiitem)

    this.physics.add.collider(dubai, dubaiitem)

}, this);

}

function update()

{

}

fselcukcan · December 23, 2019, 8:12am

It is arcade collision detection.

You can use it in your scene create function:

collide(object1 [, object2] [, collideCallback] [, processCallback] [, callbackContext])

as this.physics.add.collide(tower, cigarette, onCollideHandler, null, this)

in collideCallback function is called if the two objects collide. In it you can switch the image to you want with the animations or just manually.
processCallback should return boolean indicating the should collideCallback function be called or not. It can be null can be null.

alfianinda · December 23, 2019, 9:24am

@fselcukcan I just added code like this, but stii not working, the image still not changing and not fall…

this.physics.add.collider(this.dubaiitem, this.dubai, this.onCollideHandler, null, this)

}, this);

}

onCollideHandler () {

    this.this.add.sprite(this.target.x + (this.target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(0,0) - 90)), this.target.y + (this.target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(0,0) - 90)), "destroyed" )

}

here my full codes

class Scene extends Phaser.Scene {

constructor() {

    super("playGame")

}

preload () {

    this.load.image("bg", "assets/background.jpg");

    this.load.image("dubaiitem", "assets/dubai.png");

    this.load.image("nyitem", "assets/new-york.png");

    this.load.image("taipeiitem", "assets/taipei.png");

    this.load.image("parisitem", "assets/paris.png");

    this.load.image("target", "assets/globe.png");

    this.load.image("dubai", "assets/extra-menthol-dubai.png");

    this.load.image("paris", "assets/chill-menthol-paris.png");

    this.load.image("ny", "assets/fast-forward-purple-new-york.png");

    this.load.image("taipei", "assets/fast-forward-taipei.png");

    this.load.image("destroyed", "assets/splatter.png")

}

create () {

//background 

this.add.image(350,500,'bg')

// line

this.line = new Phaser.Geom.Line(50,250,650,250);

this.graphics = this.add.graphics({

    lineStyle: {

        width: 2, color: 0xffffff

    }

})

this.graphics.strokeLineShape(this.line);

//text score

this.add.text(50, 50, "SCORE", {font:"25px Nunito Sans", fill: "#ffff08"})

this.add.text(50, 80, "得分", {font:"25px Nunito Sans", fill: "#ffff08"})

this.add.text(150, 45, "0", {font:"65px Nunito Sans", fill: "#ffff08"})

this.add.text(500, 50, "TIME", {font:"25px Nunito Sans", fill: "#ffff08"})

this.add.text(500, 80, "倒计时", {font:"25px Nunito Sans", fill: "#ffff08"})

this.add.text(600, 45, "60", {font:"65px Nunito Sans", fill: "#ffff08"})

//sprite globe

this.container = this.add.container(game.config.width/2, 1080);

this.target = this.add.sprite(0, 0, 'target');

this.dubaiitem = this.add.sprite(this.target.x + (this.target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(0,0) - 90)), this.target.y + (this.target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(0,0) - 90)), "dubaiitem" )

this.dubaiitem.setScale(1.5);

this.dubaiitem.setAngle(0);

this.dubaiitem.setOrigin(0.5,-0.05)

this.nyitem = this.add.sprite(this.target.x + (this.target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(45,45) - 90)), this.target.y + (this.target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(45,45) - 90)), "nyitem" )

this.nyitem.setScale(1.5);

this.nyitem.setAngle(45);

this.nyitem.setOrigin(0.5,-0.05)

this.taipeiitem = this.add.sprite(this.target.x + (this.target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(90,90) - 90)), this.target.y + (this.target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(90,90) - 90)), "taipeiitem" )

this.taipeiitem.setScale(1.5);

this.taipeiitem.setAngle(90);

this.taipeiitem.setOrigin(0.5,-0.05);

this.parisitem = this.add.sprite(this.target.x + (this.target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(135,135) - 90)), this.target.y + (this.target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(135,135) - 90)), "parisitem" )

this.parisitem.setScale(1.5);

this.parisitem.setAngle(135);

this.parisitem.setOrigin(0.5,-0.05);

this.dubaiitem2 = this.add.sprite(this.target.x + (this.target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(180,180) - 90)), this.target.y + (this.target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(180,180) - 90)), "dubaiitem" )

this.dubaiitem2.setScale(1.5);

this.dubaiitem2.setAngle(180);

this.dubaiitem2.setOrigin(0.5,-0.05)

this.nyitem2 = this.add.sprite(this.target.x + (this.target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(225,225) - 90)), this.target.y + (this.target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(225,225) - 90)), "nyitem" )

this.nyitem2.setScale(1.5);

this.nyitem2.setAngle(225);

this.nyitem2.setOrigin(0.5,-0.05)

this.taipeiitem2 = this.add.sprite(this.target.x + (this.target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(270,270) - 90)), this.target.y + (this.target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(270,270) - 90)), "taipeiitem" )

this.taipeiitem2.setScale(1.5);

this.taipeiitem2.setAngle(270);

this.taipeiitem2.setOrigin(0.5,-0.05);

this.parisitem2 = this.add.sprite(this.target.x + (this.target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(315,315) - 90)), this.target.y + (this.target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(315,315) - 90)), "parisitem" )

this.parisitem2.setScale(1.5);

this.parisitem2.setAngle(315);

this.parisitem2.setOrigin(0.5,-0.05);

this.container.add(this.target);

this.container.add(this.dubaiitem);

this.container.add(this.nyitem);

this.container.add(this.taipeiitem);

this.container.add(this.parisitem);

this.container.add(this.dubaiitem2);

this.container.add(this.nyitem2);

this.container.add(this.taipeiitem2);

this.container.add(this.parisitem2);

this.tweens.add({

    targets: this.container,

    angle: 360,

    duration: 6000,

    repeat: -1,

});

//sprite cards

// this.dubai = this.add.sprite(700,250, 'dubai').setInteractive();

// this.tweens.add({

//     targets: this.dubai,

//     x: 1,

//     duration: 3500,

//     repeat: -1,

//     yoyo: true,

// });

//path

this.curve = new Phaser.Curves.Line(new Phaser.Math.Vector2(50,250), new Phaser.Math.Vector2(550,250));

this.graphics = this.add.graphics();

this.graphics.lineStyle(2, 0xffffff, 1);

this.curve.draw(this.graphics);

this.dubai = this.add.follower(this.curve, 100, 250, 'dubai');

this.dubai.startFollow({

    duration: 5000,

    yoyo: true,

    repeat: -1,

})

this.input.on('pointerdown', function (pointer) {

    this.tweens.add({

        targets: this.dubai,

        y: { value: 3000, duration: 1000}

    });

    //collision

    this.physics.add.existing(this.dubai)

    this.physics.add.existing(this.dubaiitem)

    console.log(this.dubai)

    console.log(this.dubaiitem)

    // this.physics.add.collider(this.dubai, this.dubaiitem)

    this.physics.add.collider(this.dubaiitem, this.dubai, this.onCollideHandler, null, this)

}, this);

}

onCollideHandler () {

    this.add.sprite(this.target.x + (this.target.width / 2) * Math.cos(Phaser.Math.DegToRad( Phaser.Math.Between(0,0) - 90)), this.target.y + (this.target.width /2) * Math.sin(Phaser.Math.DegToRad( Phaser.Math.Between(0,0) - 90)), "destroyed" )

}

update () {

  

}

}

fselcukcan · December 23, 2019, 9:40am

Firstly, there are double this here.

A jsfiddle and better code pre-formatting here would be better to demo and debug.

Also you have placed all the collision code in the pointerdown event handler. I would suggest just add it immediate in the create function and see what happens.

alfianinda · December 23, 2019, 9:47am

@fselcukcan it’s finally works, thank you!!

Topic		Replies	Views
Change object1, object2 after change follower image Phaser 3	1	324	December 25, 2019
Phase CE/2 soccer game Phaser 2 / CE	0	615	March 29, 2019
Adding colliders to stack of block Phaser 3	11	1214	March 6, 2020
Collision breaking and detecting nothing after working fine. Phaser 3	2	207	October 25, 2023
Why aren't all collisions being detected? Phaser 3	10	5770	January 3, 2020

Collision

Related topics