【RPGツクールMZ】スマホ縦画面用にゲームサイズを変更する方法

画面サイズの調整

画面サイズの調整には、プラグインは不要です。

RPGツクールMZの「ツール > データベース > システム2 > 高度な設定」配下の「画面の幅」「画面の高さ」「UIエリアの幅」「UIエリアの高さ」から、画面サイズを調整できます。

マップ

会話

メニュー

戦闘

• 画面の幅：624
• 画面の高さ：816
• UIエリアの幅：624
• UIエリアの高さ：816

おすすめフォントサイズ : 20

フォントサイズは、「ツール > データベース > システム2 > 高度な設定」配下の「フォントサイズ」で調整できます。

装備変更画面のサイズ調整

「js/rmmz_windows.js」を編集して、パラメータの表示を微調整しました。

ステータス表示部分

before

after

before

// 単一のパラメータ項目を描画
Window_EquipStatus.prototype.drawItem = function(x, y, paramId) {
    const paramX = this.paramX(); // パラメータのX座標を計算
    const paramWidth = this.paramWidth(); // パラメータの表示幅を取得
    const rightArrowWidth = this.rightArrowWidth(); // 矢印の表示幅を取得
    this.drawParamName(x, y, paramId); // パラメータ名を描画
    if (this._actor) {
        this.drawCurrentParam(paramX, y, paramId); // 現在のパラメータ値を描画
    }
    this.drawRightArrow(paramX + paramWidth, y); // 右矢印を描画
    if (this._tempActor) {
        this.drawNewParam(paramX + paramWidth + rightArrowWidth, y, paramId); // 新しいパラメータ値を描画
    }
};

after

// 単一のパラメータ項目を描画
Window_EquipStatus.prototype.drawItem = function(x, y, paramId) {
    const paramX = this.paramX(); // パラメータのX座標を計算
    const paramWidth = this.paramWidth(); // パラメータの表示幅を取得
    const rightArrowWidth = this.rightArrowWidth(); // 矢印の表示幅を取得
    this.drawParamName(x, y, paramId); // パラメータ名を描画
    if (this._actor) {
        this.drawCurrentParam(paramX/2, y, paramId); // 現在のパラメータ値を描画
    }
    this.drawRightArrow(paramX/2 + paramWidth, y); // 右矢印を描画
    if (this._tempActor) {
        this.drawNewParam(paramX/2 + paramWidth + rightArrowWidth, y, paramId); // 新しいパラメータ値を描画
    }
};

*装備品表示部分

before

after

before

// 指定されたインデックスのアイテムを描画
Window_EquipSlot.prototype.drawItem = function(index) {
    if (this._actor) { // アクターが設定されている場合
        const slotName = this.actorSlotName(this._actor, index); // 装備スロットの名前を取得
        const item = this.itemAt(index); // スロットに装備されているアイテムを取得
        const slotNameWidth = this.slotNameWidth(); // スロット名の表示幅を取得
        const rect = this.itemLineRect(index); // 項目の表示領域を取得
        const itemWidth = rect.width - slotNameWidth; // アイテム名の表示幅を計算
        this.changeTextColor(ColorManager.systemColor()); // システムカラーに変更
        this.changePaintOpacity(this.isEnabled(index)); // スロットが有効かどうかで不透明度を変更
        this.drawText(slotName, rect.x, rect.y, slotNameWidth, rect.height); // スロット名を描画
        this.drawItemName(item, rect.x + slotNameWidth, rect.y, itemWidth); // アイテム名を描画
        this.changePaintOpacity(true); // 不透明度をリセット
    }
};

after

// 指定されたインデックスのアイテムを描画
Window_EquipSlot.prototype.drawItem = function(index) {
    if (this._actor) { // アクターが設定されている場合
        const slotName = this.actorSlotName(this._actor, index); // 装備スロットの名前を取得
        const item = this.itemAt(index); // スロットに装備されているアイテムを取得
        const slotNameWidth = this.slotNameWidth(); // スロット名の表示幅を取得
        const rect = this.itemLineRect(index); // 項目の表示領域を取得
        const itemWidth = rect.width - slotNameWidth; // アイテム名の表示幅を計算
        this.changeTextColor(ColorManager.systemColor()); // システムカラーに変更
        this.changePaintOpacity(this.isEnabled(index)); // スロットが有効かどうかで不透明度を変更
        this.drawText(slotName, rect.x, rect.y, slotNameWidth, rect.height); // スロット名を描画
        this.drawItemName(item, rect.x + slotNameWidth/2, rect.y, itemWidth); // アイテム名を描画
        this.changePaintOpacity(true); // 不透明度をリセット
    }
};

ステータス画面のサイズ調整

「js/rmmz_windows.js」を編集して、パラメータの表示を微調整しました。

before

after

before

// 指定されたインデックスのアイテムを描画
Window_StatusEquip.prototype.drawItem = function(index) {
    const rect = this.itemLineRect(index); // 項目の表示領域を取得
    const equips = this._actor.equips(); // アクターの装備品を取得
    const item = equips[index]; // 指定されたインデックスの装備品を取得
    const slotName = this.actorSlotName(this._actor, index); // 装備スロットの名前を取得
    const sw = 138; // スロット名の表示幅を設定
    this.changeTextColor(ColorManager.systemColor()); // システムカラーに変更
    this.drawText(slotName, rect.x, rect.y, sw, rect.height); // スロット名を描画
    this.drawItemName(item, rect.x + sw, rect.y, rect.width - sw); // 装備品の名前を描画
};

after

// 指定されたインデックスのアイテムを描画
Window_StatusEquip.prototype.drawItem = function(index) {
    const rect = this.itemLineRect(index); // 項目の表示領域を取得
    const equips = this._actor.equips(); // アクターの装備品を取得
    const item = equips[index]; // 指定されたインデックスの装備品を取得
    const slotName = this.actorSlotName(this._actor, index); // 装備スロットの名前を取得
    const sw = 69; // スロット名の表示幅を設定
    this.changeTextColor(ColorManager.systemColor()); // システムカラーに変更
    this.drawText(slotName, rect.x, rect.y, sw, rect.height); // スロット名を描画
    this.drawItemName(item, rect.x + sw, rect.y, rect.width - sw); // 装備品の名前を描画
};

戦闘画面のステータスサイズ調整

「js/rmmz_windows.js」を編集して、パラメータの表示を微調整しました。

名前のフォントサイズ

before

after

「js/rmmz_windows.js」のWindow_BattleStatus周辺に以下を追加

// アクターの名前を描画
Window_BattleStatus.prototype.placeActorName = function(actor, x, y) {
    const originalFontSize = this.contents.fontSize; // 元のフォントサイズを保存
    this.contents.fontSize = 13; // フォントサイズを調整（ここで任意のサイズに変更）
    this.drawText(actor.name(), x, y, 150); // アクターの名前を描画（幅150pxで描画）
    this.contents.fontSize = originalFontSize; // 描画後に元のフォントサイズに戻す
};