ModalFormData クラス

ModalFormDataクラスはテキストフィールドやトグルスイッチ、ドロップダウンリストなど様々な部品を配置できるモーダルフォームを作成するためのクラスです。マインクラフトの設定画面のような入力部品を使うことができ、細かい設定などをプレイヤー自身にしてもらう際に便利です。

リファレンス

メソッド

コンストラクタ

new ModalFormData()

新しいモーダルフォームビルダーを作成します。このメソッドで取得したビルダーを使ってフォームの部品を加えていきます。

返却値

ModalFormData

dropdown

dropdown(label: string, options: string[], defaultValueIndex?: number): ModalFormData

フォームにドロップダウンを追加します。

パラメータ
パラメータ説明
labelstringこのドロップダウンのラベル
optionsstring[]項目一覧(文字列配列)
defaultValueIndexnumber【省略可】初期選択位置
返却値

ModalFormData

icon

icon(iconPath: string): ModalFormData

リソースパックの画像をフォームに追加します。

パラメータ
パラメータ説明
iconPathstringアイコンのパス
返却値

ModalFormData

2022-09-08現在、iconメソッドは正常に動作しないようです。iconメソッドが使えたよ~って方はTwitterで教えていただけると嬉しいです。

show

show(player: mojang-minecraft.Player): Promise<ModalFormResponse>

モーダルフォームを作成して表示します。プレイヤーがフォームのボタンを押すかキャンセルするとModalFormResponseを非同期で返します。

パラメータ
パラメータ説明
playermojang-minecraft.Playerこのフォームを表示するプレイヤー
返却値

Promise<ModalFormResponse>

slider

slider(label: string, minimumValue: number, maximumValue: number, valueStep: number, defaultValue?: number): ModalFormData

数値スライダーをフォームに追加します。

パラメータ
パラメータ説明
labelstringこの数値スライダーのラベル
minimumValuenumber最小値
maximumValuenumber最大値
valueStepnumber増減の刻み
defaultValuenumber【省略可】初期値
返却値

ModalFormData

textField

textField(label: string, placeholderText: string, defaultValue?: string): ModalFormData

テキストボックスをフォームに追加します。

パラメータ
パラメータ説明
labelstringテキストフィールドのラベル
placeholderTextstringプレースホルダー文字列
defaultValuestring【省略可】初期値
返却値

ModalFormData

title

title(titleText: string): ModalFormData

モーダルフォームのタイトルを設定するメソッドです。

パラメータ
パラメータ説明
titleTextstringタイトル部分に表示する文字列
返却値

ModalFormData

toggle

toggle(label: string, defaultValue?: boolean): ModalFormData

トグルスイッチをフォームに追加します。

パラメータ
パラメータ説明
labelstringトグルスイッチのラベル
defaultValueboolean【省略可】初期値
返却値

ModalFormData

使用例

特定のアイテムを使ったらモーダルフォームを表示する

まずは何も機能を持たないモーダルフォームを表示して、各メソッドで指定したものがどのように配置されるか確認してみます。モーダルフォームを含む各フォーム(メッセージフォームアクションフォーム、モーダルフォーム)は何かしらのイベントが発火したときに表示させることになりますので、ここではBeforeItemUseEvent クラスを利用して棒(minecraft:stick)が使われた時にメッセージフォームを表示してみましょう。

import { world } from "mojang-minecraft";
import { ModalFormData } from "mojang-minecraft-ui";

world.events.beforeItemUse.subscribe(beforeItemUseEvent => {
  // アイテムを使ったエンティティがプレイヤー(minecraft:player)でなければ処理を抜ける
  if (beforeItemUseEvent.source.id !== "minecraft:player") {
    return;
  }

  // モーダルフォームを表示するプレイヤーを変数に保存
  const player = beforeItemUseEvent.source;

  // モーダルフォームを組み立てる
  const modalForm = new ModalFormData();
  modalForm.title("タイトルです。");
  modalForm.dropdown("ドロップダウンです。複数の選択肢から1つ選択します。", ["選択肢0", "選択肢1"]);
  modalForm.slider("これはスライダーです。<最小値-10、最大値20、刻み5、初期値0>", -10, 20, 5, 0);
  modalForm.textField("これはテキストフィールドです。", "ここに入力してください。", "テキストフィールドの初期値です。");
  modalForm.toggle("これはトグルスイッチです。", false);

  // モーダルフォームを表示する
  modalForm.show(player).then(response => {
    if(response.canceled){
      // フォームが閉じられた場合
      player.runCommand("say キャンセルされました。");
    } else {
      // 送信ボタンが押された場合
      player.runCommand("say ドロップダウンのインデックス: " + response.formValues[0]);
      player.runCommand("say スライダーの値: " + response.formValues[1]);
      player.runCommand("say テキストフィールドの値: " + response.formValues[2]);
      player.runCommand("say トグルスイッチの値: " + response.formValues[3]);      
    }
  });
});

実行すると次のようなフォームが表示されます。送信ボタンを押すと設定した値がチャットに表示されます。

モーダルフォームの例1
モーダルフォームの例1

モーダルフォームの結果はModalFormResponseクラスとして返ってきます。プレイヤーが入力した値はフォームに追加した部品順にformValuesプロパティに配列で格納されています。例えば上記の例だとドロップダウンは一番上のフォーム部品になりますので、値を取り出す際はformValuesプロパティの0番目、つまりformValues[0]を見ることになります。

スライダーで指定した分だけ経験値またはレベルを増やす

スライダーで指定した分だけ経験値を増やすコードは次の通りです。棒を使うとフォームが表示され、送信ボタンを押すとフォームを表示したプレイヤーに経験値が入ります。

import { world } from "mojang-minecraft";
import { ModalFormData } from "mojang-minecraft-ui";

world.events.beforeItemUse.subscribe(beforeItemUseEvent => {
  // アイテムを使ったエンティティがプレイヤー(minecraft:player)でなければ処理を抜ける
  if (beforeItemUseEvent.source.id !== "minecraft:player") {
    return;
  }

  // モーダルフォームを表示するプレイヤーを変数に保存
  const player = beforeItemUseEvent.source;

  // モーダルフォームを組み立てる
  const modalForm = new ModalFormData();
  modalForm.slider("増やす経験値", 0, 10000, 20, 0);

  // モーダルフォームを表示する
  modalForm.show(player).then(response => {
    if(response.canceled){
      // フォームが閉じられた場合
      player.runCommand("say キャンセルされました。");
    } else {
      // xpコマンドでプレイヤーに経験値を与える
      player.runCommand(`xp ${response.formValues[0]}`);      
    }
  });
});

まとめ

ModalFormDataクラスの説明と、簡単な使用例について紹介しました。ModalFormDataクラスを使ってモーダルフォームを使えるようになれば、プレイヤーからの入力によって処理を切り替えたりアドオンの内部の状態を変化させたりできるようになります。GameTest Frameworkを使えばJSON UIやplayer.jsonにminecraft:npcコンポーネントを追加したりしてフォームを表示するような難しいことをやらなくても簡単にフォームを使えるようになるので、是非チャレンジしてみてください。