web-dev-qa-db-fra.com

Comment rendre le canevas réactif avec Phaser 3?

Auparavant, je travaillais sur Phaser 2, mais maintenant je dois passer à Phaser 3.

J'ai essayé de rendre le canevas réactif avec ScaleManager mais cela ne fonctionne pas.

Je pense que certaines méthodes ont changé, mais je n'ai trouvé aucune aide pour redimensionner la scène en plein écran.

var bSize = {
  bWidth: window.innerWidth ||
    root.clientWidth ||
    body.clientWidth,
  bHeight: window.innerHeight ||
    root.clientHeight ||
    body.clientHeight,
};

var game;

var canvas = document.getElementById("canvas");

function create() {

    // Scaling options
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

    // Have the game centered horizontally
    game.scale.pageAlignHorizontally = true;

    // And vertically
    game.scale.pageAlignVertically = true;

    // Screen size will be set automatically
    game.scale.setScreenSize(true);
}

window.onload = function() {

    // Create game canvas and run some blocks
    game = new Phaser.Game(
        bSize.bWidth, //is the width of your canvas i guess
        bSize.bHeight, //is the height of your canvas i guess
        Phaser.AUTO, 
        'frame', { create: create });

    canvas.style.position = "fixed";
    canvas.style.left = 0;
    canvas.style.top = 0;  
}
phaser-framework
7
Kothari Ankit

Depuis la v3.16.0, utilisez le gestionnaire d'échelle . Pour faire court:

var config = {
    type: Phaser.AUTO,
    scale: {
        mode: Phaser.Scale.FIT,
        parent: 'phaser-example',
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: 800,
        height: 600
    },
    //... other settings
    scene: GameScene
};

var game = new Phaser.Game(config);

Ici est le code complet et ici sont quelques exemples utiles utilisant Scale Manager .

9
Edmund Elmer

Il n'y a pas encore de gestionnaire d'échelle pour Phaser 3 mais il est en cours de développement. Pour l'instant, je suggère de suivre ce tutoriel . Il centre essentiellement le canevas avec du CSS, puis appelle une fonction de redimensionnement qui gère le maintien du ratio de jeu lorsque l'événement de redimensionnement est émis par la fenêtre.

Voici le code utilisé dans le tutoriel lié ci-dessus: Le css:

canvas {
    display: block;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

La fonction de redimensionnement:

function resize() {
    var canvas = document.querySelector("canvas");
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var windowRatio = windowWidth / windowHeight;
    var gameRatio = game.config.width / game.config.height;

    if(windowRatio < gameRatio){
        canvas.style.width = windowWidth + "px";
        canvas.style.height = (windowWidth / gameRatio) + "px";
    }
    else {
        canvas.style.width = (windowHeight * gameRatio) + "px";
        canvas.style.height = windowHeight + "px";
    }
}

Ensuite:

window.onload = function() {
    //Game config here
    var config = {...};
    var game = new Phaser.Game(config);
    resize();
    window.addEventListener("resize", resize, false);
}
3
Fabadiculous

Le gestionnaire d'échelle gérera les positions et les tailles des actifs (images, sprites, .., ...)?

0
Sebastián Mahuzier

Essayez d'ajouter la largeur maximale au CSS du canevas, puis la hauteur maximale en fonction du rapport hauteur/largeur. Par exemple:

canvas {
 display: block;
 margin: 0;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 max-width: 100%;
 max-height: 50vw;
}
0
Pontus B