web-dev-qa-db-ja.com

Phaser 3を使用してキャンバスを応答可能にする方法は？

以前はPhaser 2で作業していましたが、今はPhaser 3に切り替える必要があります。

キャンバスをScaleManagerで応答可能にしようとしましたが、機能しません。

一部のメソッドは変更されたと思いますが、ステージをフルスクリーンに再スケーリングするための助けが見つかりませんでした。

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

v3.16.0以降、Scale Managerを使用 。略して：

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);

ここ は完全なコードで、 ここ は スケールマネージャー を使用した便利な例です。

9
Edmund Elmer

Phaser 3のスケールマネージャーはまだありませんが、開発中です。とりあえず、以下をお勧めします このチュートリアル 。これは基本的に、CSSでキャンバスを中央に配置し、ウィンドウによってサイズ変更イベントが発生したときにゲーム比率の維持を処理するサイズ変更関数を呼び出します。

上記のリンク先のチュートリアルで使用されているコードは次のとおりです。css：

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

サイズ変更機能：

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";
    }
}

次に：

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

スケールマネージャーは、アセット（画像、スプライト、..、...）の位置とサイズをいつか処理しますか？

0
Sebastián Mahuzier

キャンバスのCSSに最大幅を追加してから、アスペクト比に基づいて最大高さを追加してみてください。例えば：

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