テキストを右揃え（右寄せ）や中央揃えにする方法
ゲームを作成していると、スコアや所持金などのテキストを、右揃えで表示したいことがよくあると思います。
GDevelop での文字揃え（行揃え）には、少し工夫が必要なので、今回はその方法を解説します。
なお、v5.0.0-beta110 の時点でテキストを表示するためのオブジェクトは、テキストオブジェクト、BBテキストオブジェクト、ビットマップテキストオブジェクト、の3種類がありますが、今回紹介する方法はどのオブジェクトにも利用できます😉
内容が変わらないテキストの場合
そもそもテキストの内容が変化しないという場合は、エディター上でイイ感じに配置すればよいだけです😅
ただし複数行の場合は、文字揃えの設定をする必要があります。
BBテキストオブジェクトとビットマップテキストには、オブジェクトの編集画面に「行揃えの位置」というプロパティがあるので、それを選択するだけで OK です👌
しかしテキストオブジェクトは、わざわざイベントで設定しなければなりません。
例えばエディター上でこんな感じに配置して……
（ちなみに赤い縦棒は目安として置いているだけです）
イベントで文字揃えを指定すれば……
このように揃ってくれます。（0123 の行に注目↓）
ちょっとめんどいですねｗ
内容が変更されるテキストの場合
さて、ここからがやっと本題です。
スコアや所持金、はたまた台詞などを表示するテキストは、刻々と内容が変化するものです。
当然、文字数や行数も変わる場合があるのですが、上記のようにただ文字揃えを設定しただけでは、テキストが変更されたときにレイアウトが崩れてしまいます。
例えば、次の画像のように最初は良くても……
テキストが変更され、文字数などが変わってしまうと……
こんな事になってしまいます😥
これは文字揃えの設定に関係なく、これらのオブジェクトの原点は常に左上だからです。
（赤矢印の位置↓）
テキスト変更前と後の画像を見比べると、原点は移動していない事がわかります。
そのため、テキストの長さが変化すると、位置がずれてしまうのです。
そこで、テキストの変更時に以下のような手順で、オブジェクトを正しい位置に移動させてやる必要があります。
- 原点を文字揃えしたい位置に移動する
- テキストを変更する
- 新しいテキストに合わせて原点を移動させる
文字で書くとさっぱり意味がわかりませんね🤤（説明下手すぎんかｗ）
図で説明するとわかりやすいです。
まず右揃えの場合は、エディター上でこんな感じにレイアウトしたら……
１．テキストを変更する直前に、オブジェクトの幅分右に移動して、原点を文字揃えしたい位置に移動します。
２．それからテキストを変更します。
３．最後にオブジェクトの幅分左に移動させれば、見事右揃えになります👏
以上をイベントで組むと、このようになります↓
中央揃えの場合は、移動量をオブジェクトの幅の半分にすれば OK です。
これを……
こうして……
こーして……
こうじゃ！
具体的なイベントはこんな感じ↓
理屈がわかってしまえば、特に難しくはないですね😉
少し手間はかかりますが、右揃えや中央揃えをしたほうが見た目が良くなることも多いので、こういった工夫は惜しまずにしていきたいものです。
もちろん上記以外にも、計算して位置を修正する方法はあるので、ゲームに合った最適な方法を考えてみるのも良いと思いますよ👍
コメント
コメントを投稿