Phaser

téléchargement

Permet de créer des jeux 2D https://phaser.io/learn

Le workflow basique est le suivant :

PhaserCycle

Exemple :

class SceneMain extends Phaser.Scene {
    constructor() {
        super('SceneMain');
    }
    preload()
    {
    	this.load.image("dragon","images/dragon.png");
	this.load.image("player","images/player.png");
	this.load.image("treasure","images/treasure.png");
    }
    create() {
	this.dragon = this.add.image(240,100, "dragon");
	this.player = this.add.image(240,300, "player");
	this.treasure = this.add.image(400,500, "treasure");
        console.log("Ready!");
    }
    update() {}
}

Templates (le basic est gratuit)

https://phasergames.com/shop/phaser-templates/

Utilities :

https://phasergames.com/downloads/phaser-utilities/

Exemples :

Align : Positionner sur l’écran proportionnellement des sprites

Remarque, les sprites sont positionnés par défaut avec les coordonnées au centre de l’image. Pour que la référence du sprite soit en haut à gauche, dans create écrire

let bg=this.add.sprite(0,0,’background’);
bg.setOrigin(0,0);

Déplacement d’un Sprite avec les touches du clavier.

1°) Dans main.js déclarez

var game = new Phaser.Game(config);
var cursors;

2°) dans Create()

cursors = this.input.keyboard.createCursorKeys();

3°) dans Update()

if (cursors.right.isDown) this.player.x += this.playerSpeed;
if (cursors.left.isDown) this.player.x -= this.playerSpeed;
if (cursors.up.isDown) this.player.y -= this.playerSpeed;
if (cursors.down.isDown) this.player.y += this.playerSpeed;

Animation d’un jeux :

https://labs.phaser.io/edit.html?src=src\animation\animation%20data.js

Sprite Sheet :

https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-for-phaser3

Le mode Arcade Physics system :

dans config ajouter

    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },

Tutos :

Tuto pour un premier jeux.

ou https://phaser.io/tutorials/making-your-first-phaser-3-game

Pour utiliser avec Cordova :

Creating Mobile Games with Phaser 3 and Cordova.

cordova create projectName to create the new project.
cd projectName to move into the new project directory.
cordova platform add android and/or whatever platforms you want your game to run on.
Update the www directory as you normally would for a Phaser game. You can follow the GameDev Academy tutorial and use Node.js to install Phaser, or just copy/paste the JS file, whichever you’re more comfortable with.
cordova build to make sure everything builds.
cordova emulate android to test it in Android, for example, but change as needed for your particular environments. Ou cordova run