1.21.90で変わったminecraft/server-uiについて

この記事はminecraft/server-ui Version 2.0.0の情報です。

この記事で紹介しているのはAction Form DataとModal Form Dataの書き方です。Message Form Dataは特に大きな変更がなかったため割愛します。なるべく初心者の方でも分かりやすいように書きます。

Action Form Data

title(`文字`)

フォームの一番上に表示されるタイトルです。 2回以上書くと、最後に書いたものに上書きされます。

body(`文字`)

タイトルの下に表示されるテキストです。2回以上書くと、最後に書いたものに上書きされます。

header(`文字`)

大きな文字で見出しを表示します。何個でも追加できます。

label(`文字`)

普通の大きさの文字を表示します。何個でも追加できます。

divider()

横線(区切り線)を引きます。何個でも追加できます。

button(`文字`, `テクスチャのパス`)

// ボタン例
// 文字のみ
button(`文字`)
// アイコンをいれる
button(`りんご`, `textures/items/apple`)

ボタンを追加します。テクスチャのパスはなくても動きます。何個でも追加可能です。

Action Form Data サンプルコード

/scriptevent ui:action

以下のコードを使った場合、上のコマンドを実行すると画像のようなUIが表示されます。

import * as mc from "@minecraft/server"; // Ver 2.0.0
import * as mcui from "@minecraft/server-ui"; // Ver 2.0.0

mc.system.afterEvents.scriptEventReceive.subscribe((ev) => {
  if (ev.id === `ui:action`) {
    const form = new mcui.ActionFormData()
      .title(`ACTION FORM UI`)
      .body(`body text`)
      .divider()
      .header(`Header text`)
      .label(`Label text`)
      .button(`apple`, `textures/items/apple`)
      .button(`stick`, `textures/items/stick`)
      .button(`diamond`, `textures/items/diamond`)
      .show(ev.sourceEntity)
      .then((res) => {
        if (res.selection === undefined || res.canceled === true) return;
        if (res.selection === 0) {
          ev.sourceEntity.runCommand(`say apple`);
        } else if (res.selection === 1) {
          ev.sourceEntity.runCommand(`say stick`);
        } else if (res.selection === 2) {
          ev.sourceEntity.runCommand(`say diamond`);
        }
      });
  }
}

Modal Form Data

title(`文字`)

フォームの一番上に表示されるタイトルです。 2回以上書くと、最後に書いたものに上書きされます。

header(`文字`)

大きな文字で見出しを表示します。何個でも追加できます。

label(`文字`)

普通の大きさの文字を表示します。何個でも追加できます。

divider()

横線(区切り線)を引きます。何個でも追加できます。

textField(`文字`, `入力例`, {
  defaultValue: `初期値`,  // 最初から入力されている文字
  tooltip: `補足・注意書きなどの情報`  // ! マークを押すと表示される
})

textField(`文字`, `入力例`)

文字の入力欄を追加します。何個でも追加できます。オプションはなくても大丈夫です。

toggle(`文字`, {
  defaultValue: true,  // 最初はオンにしておく（false＝オフ）
  tooltip: `補足・注意書きなどの情報` // ! マークを押すと表示される
})

toggle(`文字`)

オン / オフできるトグルを追加します。何個でも追加できます。オプションはなくても大丈夫です。

slider(`文字`, 最小値(数字), 最大値(数字), {
  defaultValue: 50,  // 初期値
  tooltip: `補足・注意書きなどの情報` // ! マークを押すと表示される
  valueStep: 10  // 10刻みにする（5,10,20,30...など）
})

slider(`文字`, 0, 100)

数値を選択できるスライダーを追加します。何個でも追加できます。オプションはなくても大丈夫です。

dropdown(`文字`, リスト, {
  defaultValueIndex: 0, // リストから何番目を初期状態で選ぶか。0が最初r
  tooltip: `補足・注意書きなどの情報` // ! マークを押すと表示されるr
})

dropdown(`文字`, [`apple`, `banana`, `cherry`])

リストから選択できるドロップダウンを追加します。何個でも追加できます。オプションはなくても大丈夫です。

submitButton(`文字`)

決定ボタンの文字を設定します。2回以上書くと、最後に書いたものに上書きされます。

Modal Form Data サンプルコード

/scriptevent ui:modal

以下のコードを使った場合、上のコマンドを実行すると画像のようなUIが表示されます。

import * as mc from "@minecraft/server"; // Ver 2.0.0
import * as mcui from "@minecraft/server-ui"; // Ver 2.0.0

mc.system.afterEvents.scriptEventReceive.subscribe((ev) => {
  if (ev.id === `ui:modal`) {
    const form = new mcui.ModalFormData()
      .title(`MODAL FORM UI`)
      .header(`Header text`)
      .label(`Label text`)
      .divider()
      .textField(`textField text`, `placeholder`, {
        defaultValue: `default text`,
        tooltip: `tooltip text`,
      })
      .toggle(`toggle text`, { defaultValue: true, tooltip: `tooltip text` })
      .slider(`slider text`, 0, 100, { defaultValue: 50, tooltip: `tooltip text`, valueStep: 10 })
      .dropdown(`dropdown text`, [`apple`, `stick`, `diamond`], {
        defaultValueIndex: 0,
        tooltip: `tooltip text`,
      })
      .submitButton(`submit button text`)
      .show(ev.sourceEntity)
      .then((res) => {
        if (res.formValues === undefined || res.canceled === true) return;
        ev.sourceEntity.sendMessage(`${JSON.stringify(res.formValues)}`);
      });
  }
}

間違い、質問等ありましたらコメントください。