Outils pour utilisateurs

Outils du site


phaser:un_moteur_physique

Un moteur physique

Un moteur physique permet de gérer facilement, et de manière réaliste, les déplacements d'un sprite, la gravitation, les collisions et les rebonds…

Comment activer un moteur physique ?

Phaser propose plusieurs moteurs physiques. Nous n'en étudierons qu'un seul, appelé ARCADE. Dans un premier temps, il faut préciser le moteur physique qui sera utilisé :

game.physics.startSystem(Phaser.Physics.ARCADE) ;    // active le moteur physique pour le "jeu en général"


Si nous voulons que le moteur physique prenne en charge un sprite (leHeros par exemple), il faudra écrire :

game.physics.enable(leHeros,Phaser.Physics.ARCADE) ;   // active le moteur physique pour le sprite "leHeros"


A faire vous-même 1 …Mes documents/icn/jeuvideo/js/script.js

Reprendre le fichier script.js utilisé précédemment. Compléter le script afin d'activer et d'utiliser le moteur physique.
Attention, il n'est pas nécessaire de tout réécrire !

function create(){ 
	game.physics.startSystem(Phaser.Physics.ARCADE) ;   // active le moteur physique pour le "jeu en général"
	leHeros = game.add.sprite(400, 300, 'hero'); 
	leHeros.anchor.setTo(0.5,0.5);
	game.physics.enable(leHeros,Phaser.Physics.ARCADE);   // active le moteur physique pour le sprite " leHeros "
	leHeros.body.velocity.x=40;   // vitesse du sprite selon l'axe x de 40 pixels par seconde
}

Enregistrer et tester.

Voir l'exemple

Remarques :

  • leHeros.body.velocity.x=40; au moment de sa création, le sprite se voit attribuer une vitesse selon l'axe x de 40 pixels par seconde.
  • leHeros” possède un nouvel attribut : “body” : en fait, tout ce qui touche à la physique ne concernera jamais directement l'objet “leHeros”, mais son attribut “body” ;
  • il n'est plus utile d'incrémenter à chaque image la coordonnée x du sprite. “leHéros” possède une vitesse selon x qu'il conserve tant qu'elle n'est pas modifiée.
  • Il est possible de modifier la vitesse du sprite sur l'axe y avec la syntaxe : leHeros.body.velocity.y = 40;
  • Il est aussi possible de modifier la vitesse de rotation du sprite : leHeros.body.angularVelocity = 20;
A faire vous-même 2 …Mes documents/icn/jeuvideo/js/script.js

Modifier le code permettant le déplacement du héros en intégrant le moteur physique.

Ancien code (sans le moteur physique)
function update()
{
    if (cursors.right.isDown){		
	leHeros.x=leHeros.x+3;
    }
    else if (cursors.left.isDown){		
	leHeros.x=leHeros.x-3;
    }
}
Nouveau code (avec le moteur physique)
function update()
{
// remise à zéro du mouvement du héros
    leHeros.body.velocity.x = 0;   
 
    if (cursors.right.isDown){	
	leHeros.body.velocity.x = 150;
    }
    else if (cursors.left.isDown){
	leHeros.body.velocity.x = -150;
    }
}

Voir l'exemple


Comment empêcher le sprite de sortir de l'écran ?

Il est possible d'empêcher le sprite de sortir de la fenêtre de jeu en ajoutant la ligne suivante dans la fonction create() :

leHeros.body.collideWorldBounds = true;


A faire vous-même 3 …Mes documents/icn/jeuvideo/js/script.js

Modifier le code précédent pour que le sprite “leHeros” ne sorte plus de l'écran.

Voir l'exemple


Comment gérer la gravité ?

Le moteur physique de Phaser gère aussi très bien la gravitation. Pour qu'un sprite subisse la gravité, vous devez ajouter la ligne suivante dans la fonction create() :

leHeros.body.gravity.y=300;

Plus le nombre choisi pour la gravité sera grand, plus le sprite tombera vite.

Voir l'exemple

A faire vous-même 4 …Mes documents/icn/jeuvideo/js/script.js

Compléter votre script pour que le sprite “leHeros” soit sensible à la gravité. Tester pour différentes valeurs de la gravité.


Comment faire rebondir le sprite ?

Comme vous pouvez le constater le sprite se coince au bord de l'écran. Il est possible de lui donner la capacité de rebondir en ajoutant la ligne :

leHeros.body.bounce.set(1);
  • le 1 du “set(1)” correspond à ce que l'on appelle en physique un choc élastique (le choc s'effectue sans perte d’énergie). Si vous diminuez cette valeur, à chaque choc contre les parois le sprite perdra un peu d'énergie et finira par s’arrêter.
  • Un “set(0)” correspond à la situation vu précédemment : le sprite se bloque contre les parois dès le premier choc.

Il est possible de différencier l'élasticité du choc selon x et selon y, pour cela il suffira par exemple d'écrire :

leHeros.body.bounce.x=0.5;

et

leHeros.body.bounce.y=0.7;

Voir un exemple de choc élastique.
Voir un exemple de choc amorti.


A faire vous-même 5 …Mes documents/icn/jeuvideo/js/script.js

Modifier le code pour que le sprite rebondisse sur les bords (vous essayerez avec plusieurs valeurs “d'élasticités du choc”).


A faire vous-même 6 …Mes documents/icn/jeuvideo/js/script.js

Compléter votre script pour que lors d'un appui sur la barre d'espace, le héros “saute”.
Le saut devra être réaliste : impossible de déclencher un nouveau saut tant que le sprite n'est pas revenu au sol.

Pour vous aider : Lorsque le sprite touche le sol, la fonction leHeros.body.onFloor() prend la valeur true.
Pour que le héros “saute”, il faut donc 2 conditions : la barre d'espace enfoncée ET leHeros.body.onFloor()==true.

Pour vous aider, voir le cours sur la gestion du clavier.

Voir l'exemple


Comment inserer des plateformes ?


A faire vous-même 7 …Mes documents/icn/jeuvideo/medias/plateforme.png



A l’aide de Photofiltre, créer une image de dimensions 100 x 20 pixels.
Attention : choisir une couleur qui contraste avec la couleur dominante de votre arrière-plan.

Enregistrer cette image au format png dans le dossier medias sous le nom plateforme.png

Dans la fonction preload(), il faut charger l'image de la plateforme, elle sera appelée “plateforme” dans Phaser.

function preload()
{ 
    game.load.image('plateforme', 'medias/plateforme.png');
}


Votre jeu peut comporter de nombreuses plateformes. Au lieu de gérer les plateformes individuellement, elles seront regroupées dans un groupe que nous appellerons “groupePlateforme”.

On appliquera le moteur physique une seule fois sur le groupe et toutes les plateformes l'intègreront.

On crée le groupe groupePlateforme et on active la physique dans la fonction create() :

function create() 
{
    groupePlateforme = game.add.group(); 
    groupePlateforme = game.add.physicsGroup();
}    

Toujours dans la fonction create(), on ajoute et on dimensionne autant de plateformes que nécessaire :

Pour la première plateforme :

var unePlateforme = groupePlateforme.create(100, 500, 'plateforme');
unePlateforme.scale.setTo(3, 0.5); 

100 et 500 sont les coordonnées en pixel de la position de la plateforme

Notre image “plateforme.png” a pour dimension d'origine 100 par 20 pixels. Pour obtenir une plateforme plus grande (ou plus petite), il suffit de modifier l'échelle :

Pour l'exemple précédent :

  • la largeur x de la plateforme sera multiplie par 3 , soit 300 pixels
  • la hauteur y de la plateforme sera multiplie par 0.5 , soit 10 pixels.

Pour la deuxième plateforme :

unePlateforme = groupePlateforme.create(300, 350, 'plateforme');
unePlateforme.scale.setTo(5, 1);  // pour une plateforme de 500 sur 20 pixels

Et ainsi de suite pour les autres plateformes…

Voir l'exemple


A faire vous-même 8 …Mes documents/icn/jeuvideo/js/script.js
Compléter votre script pour insérer toutes les plateformes dont vous avez besoin.


Actuellement, si le héros saute sur une plateforme, il passe à travers ! La collision entre le héros et les plateformes n'est pas activée. Pour l'activer, il faut ajouter dans la fonction update() la ligne suivante :

game.physics.arcade.collide(leHeros, groupePlateforme);

Voir l'exemple


A faire vous-même 9 …Mes documents/icn/jeuvideo/js/script.js
Compléter votre script et tester.


Lorsque le héros saute sur une plateforme, selon les lois de la physique, elle est repoussée par le héros. Pour éviter ce problème, il faut ajouter la ligne suivante dans la fonction create() :

groupePlateforme.setAll('body.immovable', true);

Voir l'exemple


A faire vous-même 10 …Mes documents/icn/jeuvideo/js/script.js
Compléter votre script et tester.


A ce stade, le héros doit se déplacer normalement sur les plateformes. Par contre, il ne saute plus ! Pour sauter, dans la fonction update(), il faut compléter les conditions : La barre d'espace doit être enfoncée ET, le héros doit toucher le bas de la zone de jeu OU doit toucher un objet par le dessous.

if (space.isDown && (leHeros.body.onFloor() || leHeros.body.touching.down)){
	leHeros.body.velocity.y = -230;
}

Voir l'exemple


A faire vous-même 11 …Mes documents/icn/jeuvideo/js/script.js
Compléter votre script et tester.


Comment rendre transparente les plateformes ?

Une fois toutes les plateformes positionnées, il faut tester le jeu pour vérifier si le héros peut se déplacer et sauter sur toutes les plateformes. Parfois, elles sont trop espacées, il faut donc ajuster leurs positions. Une fois ce travail terminé, il faut rendre transparentes les plateformes.


A faire vous-même 12 …Mes documents/icn/jeuvideo/medias/plateforme.png



A l’aide de Photofiltre, créer une image transparent de dimensions 100 x 20 pixels.

Enregistrer cette image au format png dans le dossier medias sous le nom plateforme.png

Tester à nouveau votre jeu. Vos plateformes ont disparu mais sont toujours actives !

Voir l'exemple

phaser/un_moteur_physique.txt · Dernière modification: 11/07/2019 21:27 par Stéphane LAURENT