Zenn
🖼

【RPGツクールMZ】描画領域（canvas要素）をdiv要素でラップする

2020/10/10に公開
RPGツクールMZ
tech

あらすじ

RPGツクールMZを買うや否やソースコードを読み始めた砂糖は、思いつきでプラグイン開発に着手するのだった。

概要

ゲーム画面のcanvas要素をdiv要素でラップするプラグインを作成する。

これにより、div要素の大きさを変更することでゲーム画面の大きさを調節できる。

思いついた使用例

  • 画面サイズをやや小さくして枠をつける（スーパーゲームボーイの枠のようなもの）
  • ゲーム画面にCSS要素で影をつけてお洒落っぽくする
  • 室内の絵を作成して、その絵のディスプレイ部分にゲーム画面をはめ込み合成

環境

RPGMZ 1.0.2

既存ソースコードの調査

修正箇所にアタリをつけるために、既存ソースコードの調査を行う。

canvas要素の作成と追加

Graphics._createCanvas

「createElement("canvas")」でプロジェクト内検索をしたらヒット。ここでcanvas要素の作成と追加を行なっている。

表示サイズの変更

Graphics._setupEventHandlers

「resize」でプロジェクト内検索をしたらヒット。Graphics._onWindowResizeをイベントリスナーに登録している。

Graphics._onWindowResize

Graphics._setupEventHandlersで登録した、リサイズ時に呼び出されるメソッド。Graphics._updateAllElementsへの中継点。

Graphics._updateAllElements

Graphics._onWindowResizeから呼び出される、Graphics._updateRealScaleへの中継点。

Graphics._updateRealScale

Graphics._updateAllElementsから呼び出される。canvas要素の拡大率を計算している。

documentとwindowって何が違うの？🤔（Graphics._updateRealScaleから呼び出されるGraphics._stretchWidthとGraphics._stretchHeightについて）

次のページが参考になった。

モバイルデバイスの場合はスクロールバーを含めた大きさ、それ以外の場合はウィンドウの大きさを取得している。

実装

Graphics._createCanvas

body>canvasの構造になっているものを、body>div>canvasになるよう変更する。

Graphics._stretchWidth

body要素の横幅を返していたものを、div要素の横幅を返すよう変更する。

Graphics._stretchHeight

body要素の縦幅を返していたものを、div要素の縦幅を返すよう変更する。

その他

ラップするdiv要素のIDが競合する可能性もあるので、IDはパラメータから設定できるようにする。

完成品

WrapCanvas.js

js/pluginsディレクトリに次の内容のファイルを作成する。

/*:
 * @target MZ
 * @plugindesc canvas要素をdiv要素でラップします。
 * @author 氷砂糖
 *
 * @help WrapCanvas.js（試作バージョン）
 *
 * @param wrapId
 * @text div要素のID
 * @desc canvas要素をラップするdiv要素のIDを指定します。
 * @type string
 * @default wrapGameCanvas
 */

(() => {
  'use strict'

  const parameters = PluginManager.parameters('WrapCanvas')
  const { wrapId } = parameters

  Graphics._stretchWidth = function () {
    const wrapperDiv = document.querySelector(`#${wrapId}`)
    return wrapperDiv.clientWidth
  }

  Graphics._stretchHeight = function () {
    const wrapperDiv = document.querySelector(`#${wrapId}`)
    return wrapperDiv.clientHeight
  }

  Graphics._createCanvas = function () {
    this._canvas = document.createElement('canvas')
    this._canvas.id = 'gameCanvas'

    const wrapperDiv = document.createElement('div')
    wrapperDiv.id = wrapId
    wrapperDiv.style.position = 'relative'
    wrapperDiv.appendChild(this._canvas)

    this._updateCanvas()
    document.body.appendChild(wrapperDiv)
  }
})()

game.custom.css（ファイル名は任意）

cssディレクトリに次の内容のファイルを作成する。

body {
  margin: 0;
}

#wrapGameCanvas {
  width: 100vw;
  height: 100vh;
}

index.html

  • CSSファイルの読み込みを追加する。

あとがき

初めてのプラグイン開発が思いのほか面白かったので、また何か作ってみたいと思った🤔

Discussion