Noodlにオシャレな文字フォントを追加して利用する方法

概要

Noodlで使用可能な文字フォントが少ないので、追加してみました。

初期状態では８種類の文字フォントが利用可能です。

今回ご紹介する方法は、文字フォントのファイルをNoodlのプロジェクトに追加します。
操作方法は簡単ですが、プロジェクトが変わるとその都度読み込ませる必要があります。

NoodlのバージョンはVer1.3.1を使用しています。
Noodlハンズオンに参加すると、Ver1.4.0がインストールされていると思いますが、
基本操作は変わりません。

手順

新規プロジェクト作成

　Noodlを起動し、「Create new project」で新規プロジェクト作成

文字フォントファイルを用意

　プロジェクトに読み込む文字フォントファイルを用意します。
ネットで検索するとフリーの文字フォントが沢山みつかります。

今回は、こちらのサイトにあった、ジン乱角-Rフォントを利用してみます。（ラーメン屋さんのお品書きみたいなフォントですね）

現状確認済みの文字フォントファイルの拡張子は次の2種類です。

• ttf
• otf
  ダウンロードしてzipファイルを解凍すると、次のようにotfファイルがあります。
  

文字フォントをプロジェクトに読み込む

用意した文字フォントファイルを読み込みます。

ファイルをNoodlのプロジェクト画面にドラッグ&ドロップする

だけです。

読み込んだ文字フォントを使う

Textノードの”Font Family”プロパティを開くと、次のように追加したフォントが一番上にあります。あとはこのフォントを選択するだけです。

おわりに

文字フォント変更するだけで、UIの印象ががらっと変わりますね。