Phaser framework collision

[cedricm70]

Hello, I wanted to know how create collisions in javascript with the phaser framework without use picture and by creating a function?

Example: collision(height of bloc's collision, width of the collision, x y collision)

And that will be introduce in a map changing's system, so when we change map, collisions have to be destroyed to have possibility to change map.
 

 

var game = new Phaser.Game(750, 565);

var joueur;
// facing = Orientation du joueur
var facing = 'left';
var jumpTimer = 0;
var cursors;
//Pour les collisions
var block;


var jeu = {

    preload: function () {
        //Couleur de fond du jeu
        game.stage.backgroundColor = "#C8E3FF";
        //Chargement des images
        game.load.image('fond', 'assets/maps/fond.png');
        game.load.image('interface', 'assets/maps/interface.png');
        //Chargement des maps
        game.load.image('accueil', 'assets/maps/accueil.png');
        //Chargement des skins
        game.load.spritesheet('dude', 'assets/skin/dude.png', 32, 48);
        //Collision
        game.load.image('block', 'assets/maps/collision.png');
    },


    create: function () {
        //Placement
        game.add.sprite(0, 0, 'fond');
        game.add.sprite(0, 45, 'accueil');
        game.add.sprite(463, 432, 'interface');
        joueur = game.add.sprite(32, 336, 'dude');
        block = game.add.sprite(0, 336, 'block');
        //Initialisation de la physique du jeu
        game.physics.startSystem(Phaser.Physics.ARCADE);
        //Collision 
        game.physics.enable(block, Phaser.Physics.ARCADE);
        block.body.collideWorldBounds = true;
        block.body.checkCollision.up = true;
        block.body.checkCollision.down = true;
        block.body.immovable = true;

      
        //Demarrage de la physique du joueur
        game.physics.enable(joueur, Phaser.Physics.ARCADE);
        //Pour que le skin ne tombe pas en dehors du cadre du jeu
        joueur.body.collideWorldBounds = true;
        //joueur.body.gravity.y = 1000;
        //joueur.body.maxVelocity.y = 500;
        joueur.body.setSize(20, 32, 5, 16);

        //Sprite de deplacement
        joueur.animations.add('left', [0, 1, 2, 3], 10, true);
        joueur.animations.add('turn', [4], 20, true);
        joueur.animations.add('right', [5, 6, 7, 8], 10, true);
        joueur.animations.add('up', [5, 6, 7, 8], 10, true);
        cursors = game.input.keyboard.createCursorKeys();
    },

    update: function () {
        //mecanique du jeu
        joueur.body.velocity.x = 0;
        game.physics.arcade.collide(joueur, block);
        // Création des touches de direction du skin
        if (cursors.left.isDown) {
            joueur.body.velocity.x = -300;
            if (facing != 'left') {
                joueur.animations.play('left');
                facing = 'left';
            }
        }
        else if (cursors.right.isDown) {
            joueur.body.velocity.x = 300;
            if (facing != 'right') {
                joueur.animations.play('right');
                facing = 'right';
            }
        }
        else if (cursors.up.isDown) {
            joueur.body.gravity.y = 1000;
            joueur.body.velocity.y = -300;
            if (facing != 'up') {

                joueur.animations.play('up');
                facing = 'up';
            }
        }
        else {
            if (facing != 'idle') {
                joueur.animations.stop();
                if (facing == 'left') {
                    joueur.frame = 0;
                }
                else {
                    joueur.frame = 5;
                }

                facing = 'idle';
            }
        }

        if (cursors.up.isDown && joueur.body.onFloor() && game.time.now > jumpTimer) {
            joueur.body.velocity.y = -500;
            jumpTimer = game.time.now + 750;
        }

    },

    render: function () {
        //game.debug.bodyInfo(joueur, 16, 24);
        //console.log(block.body.debug);
    
    },
};

game.state.add('jeu', jeu);
game.state.start('jeu');

 

[cedricm70]

up

[ncil]

Hi! I'm not entirely sure what you are trying to do. Collisions have to take place between more than one sprite or group...

You can create a blank sprite and use that as an invisible object that another sprite can run into to check for a collision. Would that help?

[cedricm70]

Thanks, do you have an example ? I need to create a function who create an "invisible object in collision", thanks for your help

[ncil]

19 hours ago, cedricm70 said:

Thanks, do you have an example ? I need to create a function who create an "invisible object in collision", thanks for your help

// create the player, where 'playerKey' is a reference to a previously loaded image asset
var player = game.add.sprite(0, 0, 'playerKey');

// create the invisible sprite to collide with, where 'blankKey' is a reference to a previously loaded image asset that should just be a transparent .png of whatever size you want
var invisibleSprite = game.add.sprite(100, 100, 'blankKey');

// put the following line in the game/state update function:
game.physics.arcade.collide(player, invisibleSprite, handlerFunction, null, this);

// This is the function that runs when they collide
var handlerFunction = function() {
    // do stuff here
}

 

[cedricm70]

Hello, thank you very much for giving me an example. Unfortunately, I could not do what I wanted with your example, maybe I'm wrong? I'm not yet very "strong" in javascript ! Can you give me a more specific example? I want my function to be used in this way for example (height, width, positioning x, positioning y) if you could put it in my code .. I'm sorry to be a little bad. Thank you

[ncil]

1 minute ago, cedricm70 said:

Hello, thank you very much for giving me an example. Unfortunately, I could not do what I wanted with your example, maybe I'm wrong? I'm not yet very "strong" in javascript ! Can you give me a more specific example? I want my function to be used in this way for example (height, width, positioning x, positioning y) if you could put it in my code .. I'm sorry to be a little bad. Thank you

What do you need to create a function for?

[cedricm70]

My function should make it possible to add collisions easily, later there will be a system of change of map and each map will have different collisions That is why I need to create a function that generates an invisible collision with The size and width requested at the place I want it to be. There can be 3, 4, 5 or even more collision maps.

 

[ncil]

On 6/30/2017 at 5:36 AM, cedricm70 said:

My function should make it possible to add collisions easily, later there will be a system of change of map and each map will have different collisions That is why I need to create a function that generates an invisible collision with The size and width requested at the place I want it to be. There can be 3, 4, 5 or even more collision maps.

 

Hi again—either I'm not understanding what you're trying to accomplish or you're misunderstanding collisions in Phaser. To my knowledge, you don't really "add" collisions at will during the game. They need to be set in the update function which is called by the main game loop. So you set your collision detections at the beginning and they will be checked as the game is played.

Collisions cannot be generated at will. They have to occur when 2 objects collide/overlap. So, if you want to have an "invisible" collision, for example when a player reaches a certain spot on the map without appearing to run into anything, you could add a collision handler that checks for overlap of your player + an invisible sprite, and then do something. You could then create your own function that places invisible sprites at the x, y position you want to check for collisions.

Again I'm not entirely sure what you are trying to accomplish with "generating invisible collisions" so you'll have to take my advice with a grain of salt.

Here is a helpful tutorial for the basics of collisions in Phaser: https://www.joshmorony.com/phaser-fundamentals-handling-collisions/

[samme]

examples/v2/geometry/rectangle-intersects