【Unity】動的にTextコンポーネントのFontを切り替えるサンプル

2018.06.09
Text
Unity, フォント

フォントのインポートについて以下の記事で扱いました。

エクスプラボ

【Unity】フォントをインポートして文字を表示する実験

https://ekulabo.com/import-fonts

Unityのデフォルトのフォントは日本語表示には向いていません。英字はともかく、漢字とひらがなの太さが合ってなかったりと、ゲームをリリースするにはきつい状態。なので、外部からフォントをインポートしてイケてるテキストを表示しましょ。

この中ではインポートしてTextコンポーネントに人の手でセットするところまでやりましたが、動的に切り替えたい欲求が生まれてきたんです。

というのは、Font StyleでBoldに切り替えるとちょっと問題があったため。

エクスプラボ

【Unity】TextのFont StyleでBoldを使うときの注意点はこれだ!

https://ekulabo.com/attention-bold

Textコンポーネントで選択できるFont StyleのBoldですが、フォントによっては太字にならず、横に拡大されて表示されます。これはFont Styleがゲームの実行環境にインストールされているフォントを見にいっているため。実行環境に依存する設定なので、使用時は要注意。

デフォルトで入っているArialのフォントではBoldが効くのに、自分でインポートしたフォントだと太くならず、文字が横に拡大される問題がありました。

なんと、ゲームを実行しているシステムにフォントがインストールされていないとBoldにならないんです。

例えばWindows向けにゲームをビルドしたら、そのゲームをダウンロードしたプレイヤーのPCにそのフォントがインストールされてないと文字がBoldにならない困った現象。

それはちょっと嬉しくないなーと思い、ゲーム内で動的にフォントを切り替えられるスクリプトを簡単に書いてみました。

1. 環境
2. 用意するもの
3. スクリプトの作成
4. 動かしてみる
5. まとめ

環境

macOS 10.13 High Sierra

Unity2018.1.0f2

用意するもの

2種類のフォントを切り替えるため、M+ FONTSさんが提供されているmplus-1pのregularとboldを使います。

M+ Licenseのもと、ゲーム内への組み込みも可能なので非常に重宝する素敵なフォントです。

まずは『mplus-1p-regular.ttf』と『mplus-1p-bold.ttf』の2つのファイルをUnityにインポート。

続いて文字を表示するTextコンポーネントを準備。Fontは[mplus-1p-regular]をセットしておきます。このフィールドを動的に操作するスクリプトにする予定。ついでなのでTextフィールドの文字列も変えましょ。

Textコンポーネントと同じオブジェクトにスクリプトをアタッチすることも少ないでしょうから、マネージャー用オブジェクトを作成して、そこにスクリプトをアタッチします。

適当に空のオブジェクトを作っておけばOK。

スクリプトの作成

ゲーム実行中にフォントを切り替えます。

ボタンなども作ってないので、時間経過でフォントが切り替わるようにしましょ。

実際に使うときにはそんな処理しないはずなので、どんなメソッドを呼べばいいかだけ知ってもらえればいいかも。

	using System.Collections;
	using System.Collections.Generic;
	using UnityEngine;
	using UnityEngine.UI;

	public class SwitchingFonts : MonoBehaviour {

	// 切り替えるフォント
	public Font fontRegular;
	public Font fontBold;

	// Textコンポーネントを持つゲームオブジェクト
	public GameObject textObject;

	// Textコンポーネントへの参照
	Text textComp;

	// フォントの切り替え時間
	float switchingTime = 1.0f;

	// 経過時間
	float elapsedTime;

	void Start(){
	// Textコンポーネントへの参照をキャッシュ
	textComp = textObject.GetComponent<Text>();
	}

	void Update(){
	// 指定した時間が経過していたらフォント切り替えのメソッドを呼ぶ
	if (CheckSwitchingTime()){
	SwitchFont();
	}
	}

	bool CheckSwitchingTime(){
	// 切り替えして良いかどうかのフラグ
	bool canSwitch = false;

	// 経過時間の変数に前フレームからの経過時間を加算
	elapsedTime += Time.deltaTime;

	// 切り替えのチェック
	if (elapsedTime >= switchingTime){
	// 切り替え時間が経過していたらフラグをtrueにする
	canSwitch = true;

	// 経過時間をリセットする
	elapsedTime = 0f;
	}
	return canSwitch;
	}

	void SwitchFont(){
	// 現在Textコンポーネントに設定されているフォントで分岐
	if (textComp.font == fontRegular){
	// テキストの内容をセット
	textComp.text = "今はBoldのフォント";

	// フォントの切り替え
	textComp.font = fontBold;
	} else {
	// テキストの内容をセット
	textComp.text = "今はRegularのフォント";

	// フォントの切り替え
	textComp.font = fontRegular;
	}
	}
	}

view raw SwitchingFonts.cs hosted with ❤ by GitHub

『Inspector』ウィンドウで切り替えたいフォントをセットし、時間経過でその2つを切り替えます。

配列やリストを使えば3つ、4つと増やしていくことも可能です。LightウェイトからBoldウェイトまで徐々に太くなっていく、なんてことも可能。

Textコンポーネントをアタッチしたゲームオブジェクトも『Inspector』ウィンドウでセットできるようにし、Start()の中でコンポーネントへの参照をキャッシュしています。

CheckSwitchingTime()では経過時間を確認しており、Time.deltaTimeを使って前フレームからの経過時間を加算していき、switchingTimeを超えたらtrueを返すようにします。

この結果がtrueになったら、SwitchFont()の中でフォントを切り替えます。

Textコンポーネントのfontフィールドはpublicなので、ダイレクトにフォントを指定できます。

このスクリプトはマネージャーオブジェクトにアタッチします。

動かしてみる

んじゃ確認しましょ。

時間が経過していることを示すため、ボールを動かしています。時間経過でちゃんとフォントが切り替わってますね。よかったよかった。

サンプルの中の時間チェックはざっくり落としてもいいので、フォントをセットするあたりを使ってもらえたらなーと。

まとめ

フォントの切り替えは『Inspector』ウィンドウからだけではなく、スクリプトから動的に切り替えることができます。

切り替えるフォントは、同じファミリー内のウェイト違いであることが望ましいです。明朝体からゴシック体に切り替わったりなど、大きすぎる変化はプレイヤーがびっくりしちゃうからね。

この記事で掲載したサンプルを見つつ、いい感じにアレンジしてもらえればすごく嬉しいです。

ゲーム開発の攻略チャートを作りました！

「ゲームを作ってみたいけど、何から手を付けていいか分からない！」

そんなお悩みをお持ちの方向けに、todoがアプリをリリースした経験を中心に、ゲーム作りの手順や考慮すべき点をまとめたe-bookを作成しました。ゲーム作りはそれ自体がゲームのように楽しいプロセスなので、「攻略チャート」と名付けています。

ゲームを作り始めた時にぶつかる壁である「何をしたら良いのか分からない」という悩みを吹き飛ばしましょう！

ダウンロードはこちら

前の記事

【Unity】TextのFont StyleでBoldを使うときの注意点はこれだ! 2018.06.08
次の記事

【Unity】過去バージョンでプラットフォームサポートを追加する際の注意 2018.06.09