pixi.jsでApplicationのサイズをスマホの画面に合わせる

今やパソコンでWebサイトを閲覧する人などこの世にいない。
いない、というのは嘘だが、サイトを作るときはこのくらいの気持ちでいたほうが良い気がする。
どんなサイズの端末でサイトを訪れられてもイイカンジのデザインで表示されていてほしいものだ。

特にそれがゲームであればなおさらである。
わざわざブラウザでゲームを作るなという正論は聞こえないふりをして、ゲーム画面をスマホのサイズに合わせる方法を紹介する。

script.js

//Aliases
let Application = PIXI.Application;
    
//アプリケーション宣言
const width = 500;
const height = 600;
const widRatio = 0.9;
const heiRatio = 0.95;
let app= new Application({
    width:width, 
    height:height,
    backgroundColor:0xAAAAAA,
});

//貼り付け
document.getElementById("game").appendChild(app.renderer.view);

function screenResize() {
    let wid = widRatio*window.innerWidth;//ゲームを表示できる最大横幅
    let hei = heiRatio*window.innerHeight;//ゲームを表示できる最大縦幅
    let x = width;
    let y = height;
    app.stage.scale.x = app.stage.scale.y = 1;//スクリーン幅が十分の時は画面倍率を1にする
    resizeRatio = Math.min(wid/width, hei/height);//横幅と縦幅の、ゲーム画面に対する比のうち小さい方に合わせる
    if(wid < width || hei < height) {//スクリーン幅が足りないとき
        //リサイズ倍率を調整
        x = width*resizeRatio; 
        y = height*resizeRatio; 
        app.stage.scale.x = resizeRatio;
        app.stage.scale.y = resizeRatio;
    }
    app.renderer.resize(x, y);//レンダラーをリサイズ
}
window.addEventListener("load", screenResize);//ロード時に画面サイズを変える
window.addEventListener('resize',screenResize,false);//ウィンドウの大きさが変わったらその都度画面サイズを変える

これでどんな端末でもイイカンジに画面表示ができる。やったね！！！