メインコンテンツまでスキップ

テキストの挿入とフォント

テキストを挿入では、文字を組み立ててピクセル画像としてキャンバスに配置できます。内容に合わせてフォントを選んでください。

フォントの種類入力方法向いている内容
Resprite Font文字グリッドからビットマップの字形を選び、元のピクセルと色を使うピクセル文字、アイコン、絵文字、HUD パーツ
ベクターフォントテキスト欄に入力し、サイズ、色、レイアウトを調整する見出し、ラベル、複数行の文章

挿入後は自由変形で画像の位置や大きさを調整できます。文章やフォントを変更したい場合は、文字を組み立て直して再度挿入してください。

文字ウィンドウを開く​

編集可能な描画レイヤーと対象のフレームを選び、編集 ▸ テキストを挿入を開きます。挿入先には通常の描画レイヤーを使ってください。タイルマップの操作はタイルマップとタイルセットで説明しています。

ウィンドウにはフォント一覧、内容の設定、プレビューがあります。iOS の横幅が狭いレイアウトでは、フォント一覧が内容の設定の上に表示されます。

フォントを管理する​

一覧からフォントを選ぶと、対応する文字グリッドやテキスト入力欄が表示されます。取り込んだフォントはアプリ内のフォントライブラリに保存され、別のドキュメントでも使えます。

フォントを取り込む​

フォント操作の + ボタンから、対応するファイルを選んでください。

プラットフォームResprite Font ファイルベクターフォントファイル
iOS.resfont、.resprite-font.ttf、.ttc、.otf、.otc
デスクトップ / Android.resfont、.resprite-font.ttf、.otf

Resprite Font はどちらの拡張子でも読み込めます。書き出すフォントパックには .resfont を使います。

iOS では「ファイル」アプリから対応フォントを Resprite で開くこともできます。デスクトップ版では対応ファイルを文字ウィンドウにドラッグ&ドロップできます。

iOS でのフォント取り込み
iOS でのフォント取り込み
デスクトップ版のフォント管理操作
デスクトップ版のフォント管理操作
フォントファイルを文字ウィンドウへドラッグ&ドロップ
フォントファイルを文字ウィンドウへドラッグ&ドロップ

フォントを整理・書き出す​

フォントを選び、操作ボタンで名前の変更、削除、書き出し / 共有を行えます。iOS の共有ではシステムの共有シートが開きます。デスクトップ版と Android では書き出しボタンを使います。デスクトップ版にはフォントフォルダを開くボタンもあります。

別の端末で使う場合は、フォントファイルを書き出すか共有し、移行先で取り込んでください。フォント集から Resprite Font パックをダウンロードすることもできます。

Resprite Font で文字を挿入する​

  1. Resprite Font を選び、文字グリッドを表示します。
  2. 字形を選ぶ前に字間を設定します。間隔は追加する文字ごとに記録され、変更後は次に入力する文字に適用されます。
  3. グリッドの字形をクリックまたはタップして内容を組み立てます。必要に応じてスペース、バックスペース、リセットを使います。
  4. プレビューを確認して挿入を押し、キャンバス上で画像の位置を調整します。

文字とアイコンを組み合わせる場合は、別の Resprite Font に切り替えて字形を追加できます。入力済みの文字は、それぞれのフォントと字間を維持します。

複数の Resprite Font を組み合わせた例
複数の Resprite Font を組み合わせた例
Resprite Font で文字を挿入する

ベクターフォントで文字を挿入する​

  1. ベクターフォントを選び、テキスト欄に入力します。改行すると複数行にできます。
  2. プレビューを見ながら、フォントサイズ、色、行間、字間を調整します。
  3. 必要に応じて縦書きを有効にします。デスクトップ版と Android では、エッジのなめらかさを制御するアンチエイリアシングの切り替えも使えます。
  4. 挿入を押し、画像の位置を調整して変形を確定します。
複数行テキストの設定
複数行テキストの設定

特に小さなラベルでは、実際に使う大きさで字形や間隔を確認してください。挿入前のプレビューでレイアウトを比較できます。

縦書きモード
縦書きモード
TTF フォントで文字を挿入する

カスタム Resprite Font を作る​

自作のピクセル文字やアイコンを、繰り返し使えるフォントにできます。

  1. 透明なスプライトに同じ大きさのグリッドを設け、1 マスに一つずつ字形を描きます。キャンバスの幅と高さは、グリッドサイズの整数倍にしてください。
  2. 元にするフレームを選びます。そのフレームの合成画像からフォントが作られます。
  3. iOS では書き出しメニュー、デスクトップ版と Android ではファイルメニューから、フォントとして保存する操作を開きます。
  4. フォント名を入力し、文字グリッドの幅と高さを絵のマスに合わせます。標準の字間を設定し、必要なら等幅を有効にして文字幅を指定します。作者名や説明も入力できます。
  5. プレビューで字形と間隔を確認し、保存でアプリ内のフォント一覧に追加します。

空のマスはスキップされます。一つのフォントには、内容のある字形を最大 256 個登録できます。隣の文字に分割されないよう、各字形をマス内に収めてください。

Resprite Font テンプレート
Resprite Font テンプレート

保存したフォントはテキストを挿入で使えます。共有や別端末への移行に使うファイルを作るには、フォント一覧で選択して書き出し / 共有を行ってください。

カスタムフォントをフォント一覧に保存
カスタムフォントをフォント一覧に保存

続けて読む​