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

ゲームを作成していると、スコアや所持金などのテキストを、右揃えで表示したいことがよくあると思います。

GDevelop での文字揃え(行揃え)には、少し工夫が必要なので、今回はその方法を解説します。

なお、v5.0.0-beta110 の時点でテキストを表示するためのオブジェクトは、テキストオブジェクトBBテキストオブジェクトビットマップテキストオブジェクト、の3種類がありますが、今回紹介する方法はどのオブジェクトにも利用できます😉

内容が変わらないテキストの場合

そもそもテキストの内容が変化しないという場合は、エディター上でイイ感じに配置すればよいだけです😅

ただし複数行の場合は、文字揃えの設定をする必要があります。

BBテキストオブジェクトとビットマップテキストには、オブジェクトの編集画面に「行揃えの位置」というプロパティがあるので、それを選択するだけで OK です👌

しかしテキストオブジェクトは、わざわざイベントで設定しなければなりません。

例えばエディター上でこんな感じに配置して……
(ちなみに赤い縦棒は目安として置いているだけです)

イベントで文字揃えを指定すれば……

このように揃ってくれます。(0123 の行に注目↓)

ちょっとめんどいですねw

内容が変更されるテキストの場合

さて、ここからがやっと本題です。

スコアや所持金、はたまた台詞などを表示するテキストは、刻々と内容が変化するものです。

当然、文字数や行数も変わる場合があるのですが、上記のようにただ文字揃えを設定しただけでは、テキストが変更されたときにレイアウトが崩れてしまいます。

例えば、次の画像のように最初は良くても……

テキストが変更され、文字数などが変わってしまうと……

こんな事になってしまいます😥

これは文字揃えの設定に関係なく、これらのオブジェクトの原点は常に左上だからです。
(赤矢印の位置↓)

テキスト変更前と後の画像を見比べると、原点は移動していない事がわかります。

そのため、テキストの長さが変化すると、位置がずれてしまうのです。

そこで、テキストの変更時に以下のような手順で、オブジェクトを正しい位置に移動させてやる必要があります。

  1. 原点を文字揃えしたい位置に移動する
  2. テキストを変更する
  3. 新しいテキストに合わせて原点を移動させる

文字で書くとさっぱり意味がわかりませんね🤤(説明下手すぎんかw)

図で説明するとわかりやすいです。

まず右揃えの場合は、エディター上でこんな感じにレイアウトしたら……

1.テキストを変更する直前に、オブジェクトの幅分右に移動して、原点を文字揃えしたい位置に移動します。

2.それからテキストを変更します。

3.最後にオブジェクトの幅分左に移動させれば、見事右揃えになります👏

以上をイベントで組むと、このようになります↓

中央揃えの場合は、移動量をオブジェクトの幅の半分にすれば OK です。

これを……

こうして……

こーして……

こうじゃ!

具体的なイベントはこんな感じ↓

理屈がわかってしまえば、特に難しくはないですね😉

少し手間はかかりますが、右揃えや中央揃えをしたほうが見た目が良くなることも多いので、こういった工夫は惜しまずにしていきたいものです。

もちろん上記以外にも、計算して位置を修正する方法はあるので、ゲームに合った最適な方法を考えてみるのも良いと思いますよ👍

コメント

このブログの人気の投稿

4ian 氏が Google 辞めて GDevelop に全振りする件

ブラウザ上で動く GDevelop オンライン版を試してみた感想

GDevelop の「イベント」を正しく理解しよう