投稿

6月, 2021の投稿を表示しています

テキストを右揃え(右寄せ)や中央揃えにする方法

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