Weird behavior in collisions when using animations

Fabrizio · May 30, 2017

Hi guys, this is my first topic in this amazing community, so I would be glad if you can enlighten my doubts as a nice welcome :). I'm programming a survival horror game, and everything is working great except when it comes to colliding among two or three objects. I can't describe the behavior properly because for example:

If the main character collides a barrel for example, it works great but
It doesn't happen the same when an enemy is moving randomly and suddenly rans into a barrel, because it's like there is no barrel, the enemy just goes through.

Here is the index.html file so that you can help me out on this, it's not a large code at all, it's very simple but it's driving me crazy until now.

<!doctype html> 
<html> 
<head> 
	<meta charset="UTF-8" />
	<title>Rescate</title>
	<script type="text/javascript" src="js/libs/phaser/phaser.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">
//----------------------------------------------------------------------------------------------------------------
//Crea la pantalla principal del juego
var game = new Phaser.Game(640,480, Phaser.AUTO, '', { preload: preload, create: create, update: update });

//Cargo fondo, pisos, estrellas y personaje
function preload() { 
    game.load.image('fondo', 'assets/MAPA.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('barril','assets/barril.png',30,40);
    game.load.spritesheet('dude', 'assets/personaje.png', 64, 64);
    game.load.spritesheet('mummy', 'assets/momia37x45.png', 37, 45, 18);
   
}
//----------------------------------------------------------------------------------------------------------------
var player;
var platforms;
var cursors;
var stars;
var fondo;
var fondo_movil;
var score = 0;
var scoreText;
var background=1; 
//PARA LA MOMIA
var mummy;
var anim;
var last_direction=9;
//Variables para la animacion de la momia
var barril,barril2, barril3;

//----------------------------------------------------------------------------------------------------------------
function create() {
    //Se activa la fisica para el juego de tipo ARCADE
    game.physics.startSystem(Phaser.Physics.ARCADE);

    //Fondo para el juego
    fondo_movil = game.add.tileSprite(0,0,640,480,'fondo');
	
    //plataformas donde se para el personaje
    platforms = game.add.group();

    //se activa la fisica para cualquier objeto creado en este grupo
    platforms.enableBody = true;

    //Se crea el piso
    var ground = platforms.create(0, game.world.height - 2, 'ground');

    //Escalado
    ground.scale.setTo(2, 2);

    //Esto impide caer al piso cuando el personaje lo pisa
    ground.body.immovable = true;
    
    // El jugador y sus caracteristicas
    player = game.add.sprite(32, game.world.height - 150, 'dude');
    //Se habilita la fisica al jugador
    game.physics.arcade.enable(player);
    
    
    //Creo el enemigo (momia)
    mummy = game.add.sprite(380, 400, 'mummy', 5);
    mummy.scale.set(1.5 );
    mummy.smoothed = false;
    mummy.enableBody = true;
    game.physics.arcade.enable(mummy);
    mummy.body.collideWorldBounds = false;
	

    
    
    barril = game.add.tileSprite(490,430,30,40,'barril');
    barril.enableBody = true;
    game.physics.arcade.enable(barril);
    barril.body.immovable = true;
    
    barril2 = game.add.tileSprite(300,430,30,40,'barril');
    barril2.enableBody = true;
    game.physics.arcade.enable(barril2);
    barril2.body.immovable = true;
   
   
    //Propiedades físicas del jugador. Se le da al jugador un pequeño rebote.
    player.body.bounce.y = 0.2;
    player.body.gravity.y = 400;
    player.body.collideWorldBounds = true;
	player.smoothed = true;
    //Las dos animaciones, caminando a la izquierda y a la derecha
    player.animations.add('left', [0, 1, 2, 3,4,5,6,7,8], 10, true);
    player.animations.add('right', [10,11,12,13,14,15,16,17,18], 10, true);
   
    //El puntaje
    scoreText = game.add.text(16, 16, 'Puntos 0', { fontSize: '32px', fill: '#000' });
    
    //Nuestros controles
    cursors = game.input.keyboard.createCursorKeys();    
	
	anim = mummy.animations.add('walk');
    anim.onStart.add(animationStarted, this);
    anim.onLoop.add(animationLooped, this);
    anim.play(10, true);
}

//----------------------------------------------------------------------------------------------------------------
function update() {
	mummy.position.x -= 1;
    //Colision del jugador con la plataforma y otras cosas
	game.physics.arcade.collide(player,mummy);
	game.physics.arcade.collide(player,barril);
	game.physics.arcade.collide(player,barril2);
	game.physics.arcade.collide(player,platforms);
	game.physics.arcade.collide(mummy,barril);
	game.physics.arcade.collide(mummy,barril2);
	game.physics.arcade.collide(mummy,platforms);
	
    // Resetea la velocidad a cero
    player.body.velocity.x = 0;
    
    // Movimiento de la momia.
    
    
    //Si el cursor izquierdo esta presionado
    if (cursors.left.isDown)
    {	
		//fondo movil derecha
		if(player.x < 0.3 *game.world.width){
                    fondo_movil.tilePosition.x += background;
                    barril.position.x += background ;
                    barril2.position.x += background ;
                    if(player.x < 0.2 *game.world.width){
                        player.x = 0.2 *game.world.width;
                    }
		}
        //  Moverse a la izquierda
        player.body.velocity.x = -90;
		last_direction=0;
        player.animations.play('left');
    }
    //Si el cursor derecho esta presionado
    else if (cursors.right.isDown)
    {	
	//Moverse a la derecha
        player.body.velocity.x = 90;
        player.animations.play('right');
		//fondo movil derecha
		if(player.x > 0.5 *game.world.width){
			fondo_movil.tilePosition.x += -background;
                        barril.position.x -= background ;
                        barril2.position.x -= background ;
                        if(player.x > 0.8 *game.world.width){
                            player.x = 0.8 *game.world.width;
                        }
		}
		last_direction=9;
    }
    else
    {
        //Sino mantenerse quieto
        player.animations.stop();
        player.frame = last_direction;
    }
    
    //  Permite al jugador saltar si este esta tocando el piso
    if (cursors.up.isDown && player.body.touching.down)
    {
        player.body.velocity.y = - 250;
    }
}
//----------------------------------------------------------------------------------------------------------------

//Animacion de la momia
function animationStarted(sprite, animation) {
/* 	game.physics.arcade.collide(player, platforms);
    game.physics.arcade.collide(mummy, platforms);
    game.physics.arcade.collide(player,barril);
    game.physics.arcade.collide(player,barril2);
    game.physics.arcade.collide(player,mummy); */
    //game.add.text(32, 32, 'Animation started', { fill: 'white' });

}

function animationLooped(sprite, animation) {

    /*if (animation.loopCount === 1)
    {
        loopText = game.add.text(32, 64, 'Animation looped', { fill: 'white' });
    }
    else
    {
        loopText.text = 'Animation looped x2';
        //animation.loop = false;
    }*/

}

</script>

</body>
</html>

See you guys, hope you are great!

samme · May 30, 2017

Do you mean the enemy walks through the barrel like it's not there, or the enemy hits one edge and then immediately moves to the opposite edge?

Fabrizio · May 31, 2017

I meant that the enemy "mommy" walks through the barrel like it's not there

samme · May 31, 2017

You should give the mummy a velocity and avoid setting its position in update().

Sign In

Weird behavior in collisions when using animations

Recommended Posts

Fabrizio

Link to comment

Share on other sites

samme

Link to comment

Share on other sites

Fabrizio

Link to comment

Share on other sites

samme

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity