テキストの挿入とフォント
Resprite の文字ウィンドウでは、次の 2 つのフォント系統を使えます。
- Resprite Font：ピクセルをそのまま生かした文字やアイコン向け
- ベクターフォント：見出し、ラベル、複数行の文章向け
文字ウィンドウを開く
編集メニューから文字ウィンドウを開きます。レイアウトやプラットフォームによっては、アクションバーやショートカットから同じ機能を開ける場合もあります。
フォントを管理する
文字ウィンドウ左側のフォント一覧では、フォントの取り込み、選択、整理ができます。
フォントを取り込む
フォント一覧の横にある + ボタンから、追加のフォントを読み込めます。
- iOS では、ファイルからの読み込みや Files アプリからの受け渡しに対応しています。
- デスクトップ版 / Android では、ファイル選択から取り込めます。
- デスクトップ版では、対応フォントを文字ウィンドウにドラッグ＆ドロップして追加することもできます。
対応する取り込み形式
- iOS:
.resfont、旧拡張子.resprite-font、.ttf、.ttc、.otf、.otc - デスクトップ / Android:
.resfont、旧拡張子.resprite-font、.ttf
iOS でのフォント取り込み
デスクトップ版のフォント管理操作
フォント数が増えてきたら、デスクトップ版のリネーム、削除、書き出し、フォントフォルダを開く操作が便利です。
フォントファイルを文字ウィンドウへドラッグ＆ドロップ
フォントを整理・書き出す
取り込んだフォントは、名前の変更や削除で整理できます。デスクトップ版ではフォントフォルダを開いたり、選択中のフォントを書き出したりすることもできます。iOS では選択中のフォントを共有できます。
フォントを増やしたい場合は、Resprite Fonts Collection も参照してください。
Resprite Font で文字を挿入する
Resprite Font は、HUD 文字、ピクセル UI、アイコン風グリフ、輪郭をシャープに保ちたい短い文字列に向いています。
- 一覧から Resprite Font を選びます。
- グリフのキーボードをタップして、文字列を組み立てます。
- 必要に応じて、スペース、バックスペース、クリアを使います。
- 字間を調整しながらプレビューを確認します。
- Insert を押すと、現在のプレビューが画像としてキャンバスに挿入され、その後は通常の挿入画像と同じ流れで位置調整や変形ができます。
複数の Resprite Font を組み合わせた例
ヒント
1 つの文字列の中で複数の Resprite Font を混在させることもできます。本文とアイコン、絵文字、HUD パーツをまとめて扱いたいときに便利です。
Resprite Font で文字を挿入する
ベクターフォントで文字を挿入する
ベクターフォントは、見出し、ラベル、長めの複数行テキストに向いています。
- 一覧からベクターフォントを選びます。
- テキスト欄に直接入力します。複数行入力にも対応しています。
- フォントサイズ、色、行間、字間を調整します。
- 必要に応じて縦書きに切り替えます。デスクトップ版ではアンチエイリアスの切り替えも使えます。
- Insert を押すと、現在のプレビューがキャンバスに挿入されます。
複数行テキストの設定
行間や字間は、複数行テキストの読みやすさやリズムに大きく影響します。
縦書きモード
TTF フォントで文字を挿入する
カスタム Resprite Font を作る
自作のピクセル文字、アイコン、HUD 用記号を繰り返し使いたい場合は、スプライトを Resprite Font として書き出せます。
- テンプレート用スプライトにグリフを描きます。
- 書き出しメニューからフォント書き出しダイアログを開きます。
- 文字グリッドのサイズ、字間、必要に応じて等幅設定を指定します。
- 必要なら作者名や説明を入れ、Preview で仕上がりを確認します。
- 保存すると、作成したフォントがフォント一覧に追加され、すぐに文字ウィンドウで使えるようになります。
Resprite Font テンプレート
Resprite Font はアルファベットや数字だけでなく、アイコン、罫線、絵文字、装飾素材のような再利用パーツ集にも向いています。
現在のフォント書き出しダイアログ