web-dev-qa-db-ja.com

フェイザー3.ランタイム中にゲームの寸法を変更する

こんにちはPhaser3で本当に反応の良いゲームを作成する方法を見つけてください。

ゲーム（Blocklyワークスペースのリプレゼンテーションレイヤー）は画面上のより大きな部分に展開でき、セッション中に何度も縮小できるため、応答性は重要です。

問題は、実行時にゲームの寸法を変更するにはどうすればよいですか？

---編集済み---

純粋なcssソリューションがあることがわかり、キャンバスはcssズームプロパティで調整できます。ブラウザーではうまく機能します（パフォーマンスに顕著な影響はありません）。コルドバアプリ（Android）でも機能します。

CSSズームで問題が解決できるかどうかは、Richard Daveyの回答です。

私は実際にそれを正直にしようとしたことがありません。それを試して、何が起こるか見てください！入力が壊れるか、動作し続ける可能性があります。それ（およびおそらくスケールマネージャー）は、それが壊れる唯一のものですが、他にそれほど気にすることはありません。

// is size of html element size that needed to fit 
let props = { w: 1195, h: 612, elementId: 'myGame' };

// need to know game fixed size
let gameW = 1000, gameH = 750;

// detect zoom ratio from width or height
let isScaleWidth = gameW / gameH > props.w / props.h ? true : false;

// find zoom ratio
let zoom = isScaleWidth ? props.w / gameW : props.h / gameH;

// get DOM element, props.elementId is parent prop from Phaser game config
let el = document.getElementById(props.elementId);

// set css zoom of canvas element
el.style.zoom = zoom;
phaser-framework
9
bFunc
window.addEventListener('resize', () => {
    game.resize(window.innerWidth, window.innerHeight);
});
3
ofelixx4

レンダラーのサイズを変更しますが、ワールドの境界と、場合によってはカメラの境界も更新する必要があります。

// the x,y, width and height of the games world
// the true, true, true, true, is setting which side of the world bounding box
// to check for collisions

this.physics.world.setBounds(x, y, width, height, true, true, true, true);

// setting the camera bound will set where the camera can scroll to
// I use the 'main' camera here fro simplicity, use whichever camera you use

this.cameras.main.setBounds(0, 0, width, height);

これで、世界の境界を動的に設定できます。

3
Coned_Stoding

他の誰かがまだこの問題を抱えている場合に備えて、私はゲームのサイズを変更するだけではうまくいかず、物理学では何もしなかったことがわかりました。

それを機能させるには、ゲームのサイズを変更する必要があり、さらにシーンのビューポート（ゲームのプロパティであるscenemanagerを介してシーンを取得できます）：

game.resize(width,height)
scene.cameras.main.setViewport(0,0,width,height)
1
jcbdrn

Game Configで構成できるサイズ変更の組み込みサポートがあります。 ScaleManager オプションを確認してください。必要に応じて、scaleプロパティで指定できるいくつかのオプションがあります。

私は以下を使用してしまいました：

 var config = {
            type: Phaser.AUTO,
            parent: 'game',
            width: 1280, // initial width that determines the scaled size
            height: 690,
            scale: {
                mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT ,
                autoCenter: Phaser.Scale.CENTER_BOTH
            },
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: {y: 0, x: 0},
                    debug: true
                }
            },
            scene: {
                key: 'main',
                preload: preload,
                create: this.create,
                update: this.update
            },
            banner: false,
        };
1
Edwin Daniels

Phaser 3の場合、ゲームのresizeはscale内に次のように表示されます。

window.addEventListener('resize', () => {
    game.scale.resize(window.innerWidth, window.innerHeight);
});

ただし、ゲーム全体が必要な場合は、スケールアップとスケールダウンだけでこの構成が必要になります。

const gameConfig: Phaser.Types.Core.GameConfig = {
    ...
    scale: {
        mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT,
    },
    ...
};

export const game = new Phaser.Game(gameConfig);
0
doreancl