RPG作成#8

"use strict";

const   FONT        = "48px monospace"; //使用フォント
const   HEIGHT      = 120;              //仮想画面幅    
const   WIDTH       = 128;              //仮想画面高さ
const   SMOOTH      = 0;                //描画保管処理
const   TILECOLUMN  = 4;                //タイル列数
const   TILEROW     = 4;                //タイル行数
const   TILESIZE    = 8;                //タイルサイズ（ドット）

let     gScreen;                    //仮想画面
let     gFrame = 0;                 //内部カウンタ
let     gImgMap;                    //画像（マップ）
let     gWidth;                     //実画面の幅
let     gHeight;                    //実画面の高さ


function DrawMain(){
    const   g = gScreen.getContext("2d");                //仮想画面の2D描画コンテキストを取得
    
    //仮想画面にマップチップを転送
    for( let y = 0; y < 64; y++ ){
        for( let x = 0; x < 64; x++ ){
            DrawTile(g, x * TILESIZE, y * TILESIZE, 12);
        }
    }
    
    g.font = FONT;                                  //文字フォントを設定
    g.fillText("Hello World" + gFrame, 0, 64);

}

function DrawTile(g, x, y, idx){
    const   ix = (idx % TILECOLUMN) * TILESIZE;
    const   iy = Math.floor(idx / TILECOLUMN) * TILESIZE;
    g.drawImage( gImgMap, ix, iy, TILESIZE, TILESIZE, x, y, TILESIZE, TILESIZE );
}

function WmPaint(){ //毎フレーム処理される
    DrawMain();
    
    const   ca = document.getElementById("main");   //mainキャンバスの要素を取得
    const   g = ca.getContext("2d");                //2D描画コンテキストを取得
    
    g.drawImage( gScreen, 0, 0, gScreen.width, gScreen.height, 0, 0, gWidth, gHeight );                   //仮想画面のイメージをメインキャンバスに転送
}

//ブラウザサイズ変更イベント
function WmSize(){
    const   ca = document.getElementById("main");   //mainキャンバスの要素を取得
    ca.width = window.innerWidth;                   //キャンバスの幅をブラウザの幅にする
    ca.height = window.innerHeight;                 //キャンバスの高さをブラウザの高さにする

    /**Start 拡大したときにドット絵がクッキリする ****ここから******/
    const   g = ca.getContext("2d");                //2D描画コンテキストを取得
    g.imageSmoothingEnabled = g.msImageSmoothingEnabled = SMOOTH;    //保管処理
    /**End   **************************************ここまで******/


    //実画面サイズを計測。ドットのアスペクト比を維持したままでの最大サイズを計測する。
    gWidth = ca.width
    gHeight = ca.height;

    //アスペクト比の計算（比の方程式より）　W:H = gW:gH の式で gH = ？　の式にするとそうなる
    if( gWidth / WIDTH < gHeight / HEIGHT ){
        gHeight = gWidth * HEIGHT / WIDTH;
    }else{
        gWidth = gHeight * WIDTH / HEIGHT;
    }
}

//タイマーイベント発生時の処理
function WmTimer()
{
    gFrame++;           //内部カウンタを加算 
    WmPaint();
}

//ブラウザ起動イベント
window.onload = function(){
    gImgMap = new Image();          //オブジェクト化

    gScreen = document.createElement("canvas"); //画僧画面を作成
    gScreen.width = WIDTH;                      //仮想画面の幅を設定
    gScreen.height = HEIGHT;                    //仮想画面の高さを設定

    WmSize();           //ウィンドウサイズの設定
    window.addEventListener("resize", function(){ WmSize(); }); //ブラウザサイズ変更時に呼び出される
    gImgMap.src = "img/map.png";    //マップ画像読み込み
    setInterval( function() { WmTimer() }, 33);       //33ms間隔で WmTimer() を呼び出すように指示 1000/33 = 30FPS 
}