はじめに
Minecraftに存在しているTitleコマンドという要素。データパックではUIから演出など、様々なところで活躍してる、地味に大事なコマンドの一つです。
今回は、そんなTitleコマンドの簡単な使い方から、少し応用的な部分まで解説していきたいと思います！
※本記事は、/title や /tellraw を一度は使ったことがある方向けの内容です。
データパックやリソースパックの基本構造については触れません。
Titleコマンドとは
Titleコマンドは、プレイヤーの画面に固定されたテキストを表示できるUI向けコマンドです。基本はコマンドでの表示のみであり、バニラのマインクラフトをやっているとあまり見かけない要素でもあります。
あまり目立たないコマンドではありますが、かなり自由度が高く、少しいじるだけで簡単にUIを実装できるような便利なコマンドでもあります。
UIの作成
基本的にもっとも使用されているであろう用途は、UIです。
ユーザーの画面に直接表示でき、視点の移動に左右されず表示できるという利点があります。
RPGであれば、HPやMPの数値での表示、レベルやその他情報の表示に使われたり、ミニゲームだといろいろなスコアの表示に使われたりしてます。カスタムフォントでアイコンを表示させれば、かなりリッチないい感じのUIを簡単に実装することができます。
今回はこちらにフォーカスしていきます。
本題...の前に
今回は深めの内容まで入りませんが、もし興味のある方は、明日(12/16)のまっしゅさんによる記事で解説されていると思いますので、ぜひ読んでみてください。
今回は基本的な表示と、Actionbarでの簡単なUIの実装方法を解説します。
Titleコマンドの基本的な使い方
フォーマットとしては
/title <ターゲットセレクタ> <表示位置> <表示したいテキスト>
になります。
ターゲットセレクタ : @a,@p,@s等のセレクタや、プレイヤー名など
表示位置 : title,subtitle,actionbarの3つから選択
<表示したいテキスト>の部分にはそのままテキストをいれることもできますが、jsonフォーマットで記述することで、より柔軟に、自由度が高い記述をすることが可能になります。(色の変更やフォントの変更、BackGroundの有無やScoreの表示など)
JSONテキストの基本
ここから先のUI解説では、TitleコマンドにJSON形式のテキストを渡して表示を行います。
TitleコマンドでUIを作るために最低限知っておきたいJSONテキストの書き方を簡単にまとめておきます。
JSONテキストとは
Titleコマンドでは、表示するテキストをそのまま文字列として指定することもできますが、
色や装飾、スコア表示、フォント指定などを行う場合は、JSON形式で記述する必要があります。
/title @s actionbar {"text":"Hello"}
JSONテキストは、「この文字をどう表示するか」という設定をまとめたもの、と考えると分かりやすいです。
配列でテキストを並べる
UIでは、複数の要素を横に並べて表示することがほとんどです。
その場合、JSONテキストは配列で記述します。
/title @s actionbar [
{"text":"HP"},
{"text":": "},
{"text":"20"}
]
配列にすることで、要素ごとに色やフォントなどを個別に指定できるようになります。
よく使うプロパティ
text：表示する文字
{"text":"HP"}
指定した文字列がそのまま表示されます。
color：文字色の指定
{"text":"HP","color":"red"}
{"text":"HP","color":"#FF0000"}
色名や16進カラーコードを指定できます。
bold / italic：文字装飾
{"text":"HP","bold":true}
{"text":"HP","italic":true}
UIでは、数値や重要な情報を目立たせたいときに使われます。
score：スコアの表示
{
"score":{
"objective":"HP",
"name":"@s"
}
}
指定したスコアボードの値を、そのままテキストとして表示します。
Actionbarに毎tick表示することで、動的なUIを作ることができます。
font：使用するフォントの指定
{"text":"HP","font":"myfont"}
リソースパックで定義したフォントを指定できます。
カスタムフォントやNegativeSpaceを使う際に必要になります。
translate：特殊な文字の表示（NegativeSpaceなど）
{"translate":"space.-16"}
主にNegativeSpace用として使われます。
UIの横位置をピクセル単位で調整するための指定です。
詳細は後ほど出てきます。
詳細はWikiが参考になると思いますので、興味のある方はどうぞ。
また、このようなコマンドを扱う際には、Title Command Generator(Gamer Geeks)などを使用することを推奨します。
表示位置について
UIには、基本的にactionbarを使用します。
理由としては、actionbarは表示が「上書き」されるのに対し、titleやsubtitleは「再表示」される点にあります。これはtitleやsubtitleは表示時にフェードして表示されるためであり、いじることで上書きすることもできますが、圧倒的にactionbarのほうが扱いやすいです。
内容が上書きできるので、動的な表示(Scoreboardからスコアの表示等)に向いています。
逆に静的な表示であったり、大きく画面に表示したい場合はtitleやsubtitleのほうが向いているのではないかと。用途によって使い分けるとGoodです。
UIを実際に作ってみよう
これらを踏まえて、Actionbarに簡単なUIを実装してみます。
このときに必要な知識が、CustomFontというものになってきます。
というのも、UIを実装するにあたって、文字を左右上下に自由自在に動かす必要があります。
その時に、空白では文字同士の間隔をある程度の幅以上でしか操作できません。
なので、NegativeSpaceというものを使用します。
左右の位置変更 / NegativeSpaceとは
NegativeSpaceはその名の通り、従来の間隔を広げる空白だけでなく間隔を狭める空白を使用することができるようになります。
NegativeSpaceFont
こちらは、AmberWatさんという方が公開されている、Minecraftで使用可能なNegativeSpaceFontです。
リソースパックで構成されていて、このリソースパックを適用することで、簡単に導入が可能です。
詳細な記法などはREADMEを読んでいただければと思います。
基本的にこのリソースパックを導入した状態で、以下のように
/title @a [{"text": "テキスト1"},{"translate": "space.-11"},{"text": "テキスト2"}]
(READMEより一部引用)
と打つことで、空白の幅が-11ピクセルの文字を打つことができます。
{"translate": "space.<入れたい空白のピクセル数>"}←基本的な書式
これで、左右に自由に文字を動かせるようになりました。
ただ、このままでは上下に動かせません。
上下の位置変更 / カスタムフォント
上下の位置変更は2通りの方法があり、シェーダーを使って実装する方法と、カスタムフォントを使用して実装する方法があります。
シェーダーのほうが圧倒的に自由度が高く、多彩な表現が可能な反面、かなりコードを書かなければならなかったり、理解するのがかなり難しいです(筆者も全く理解できていないだけではあるんですが...)。なので、今回はカスタムフォントを使用します。
カスタムフォント
先程からちょくちょく文中に出てきている「カスタムフォント」。これは、そのままの意味でMinecraftにオリジナルのフォントを追加することができる技術のことです。
これで元から数ピクセル分下げた状態で描画されるフォントを独自に用意し、それを使用することで上下に移動させることができるようになります。
注意点として、Actionbarのデフォルト位置より上に移動させることはできません。なので、UI設計時は下方向に配置する前提でレイアウトを組む必要があります。
上に移動させたい場合は、シェーダーによる実装が不可欠となってきます。
また、フォントを追加するだけでなく「Unicode」というものの未割り当て領域を利用して、独自の画像を表示させることもできます。
詳しくはまっしゅさんのカスタムフォントの創造的な使い方【マイクラリソパ解説】を見るのをおすすめします。
以下実装例です▼
↑体力やMPの表示とゴールドの表示はNegativeSpaceとフォントによる上下移動、右下の追加ホットバーと追加xpバーは別途用意した画像をカスタムフォントで表示&位置調整をしています。
↑リソースパックで既存のライフと空腹ゲージを消し、独自のHPバーとスタミナのバーやその他装飾などををカスタムフォントで実装しています。
他にもう一つ用意したのですが、画像を用意できなかったため、実装したコードのみ乗せておきます。
※以下は「完成例」のコードです。
構造を把握する参考用で、1行ずつ理解する必要はありません。
$title @s actionbar ["",{"color":"white","bold":true,"score":{"objective":"Level","name":"@s"},"font": "statusbar-other"},{"color":"green","score":{"objective":"Now-XP","name":"@s"},"font": "statusbar-other"},{"color":"gray","score":{"objective":"ToNextLevel-XP","name":"@s"},"font": "statusbar-other"},{"translate":"space.512"},{"translate": "space.32"},{"translate": "space.0"},{"text": "\uE6$(hp_ratio)","color": "#4e5c24"},{"translate": "space.-91"},{"text": "\uE5$(skill_cooltime_ratio)","color": "#4e5c24"},{"translate": "space.19"},{"text": "\uE4$(charged_skill_cooltime_ratio)","color": "#4e5c24"},{"translate": "space.-91"},{"text": "\uE7$(stamina_ratio)","color": "#4e5c24"},{"translate": "space.-89"},{"translate": "space.-54"},{"color":"white","score":{"objective":"Now-HP","name":"@s"},"font": "small-number"},{"text":"/","color":"gray","font": "small-number"},{"color":"gray","score":{"objective":"Max-HP","name":"@s"},"font": "small-number"},{"translate": "space.38"},{"text":"Lv.","color":"gray","font": "statusbar-level"},{"color":"white","bold":true,"score":{"objective":"Level","name":"@s"},"font": "statusbar-level"},{"text":"(","color":"gray","font": "statusbar-level"},{"color":"green","score":{"objective":"Now-XP","name":"@s"},"font": "statusbar-level"},{"text":"/","color":"gray","font": "statusbar-level"},{"color":"gray","score":{"objective":"ToNextLevel-XP","name":"@s"},"font": "statusbar-level"},{"text":") ","color":"gray","font": "statusbar-level"},{"translate": "space.550"},{"color":"white","score":{"objective":"Now-HP","name":"@s"},"font": "small-number"},{"text": "/","font": "small-number"},{"color":"gray","score":{"objective":"Max-HP","name":"@s"},"font": "small-number"},{"color":"white","bold":true,"score":{"objective":"Gold","name":"@s"},"font": "statusbar-other"}]
まとめ
今回はTextの表示からUIへの入門らへんまで解説しましたが、シェーダーによる実装等を知りたい方等はこちらの記事(titleコマンドで、最高にアツいGUIを作ろう)をおすすめします。こんな記事が書きたかったんですが...来年またリベンジします。
ついでにおまけ程度に作成したカスタムxpバーの素材を上げておきます。
自作発言のみしないでいただければと思います。使い所があるかはわかりませんが...。
次のステップとしては
・Score表示を絡めた動的UI
・TextDisplayとの使い分け
・シェーダーによる自由配置
などに挑戦すると、表現の幅が一気に広がると思います。
というわけで最後まで読んでくださった方、本当にありがとうございます！
アドベントカレンダー、初参加でしたがもっと精進してきます...！それでは！