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

フォントとテキスト

Respriteはピクセル精度のグリフを描画できる独自フォント形式（Resprite font）と、一般的なベクターフォントの 2 系統をサポートします。

フォントの取り込み​

Insert Text ダイアログのフォントリスト横にある + ボタンから、対応フォントを追加できます。インポートしたフォントの名前を変更して整理することも可能です。iOS R53 以降は、Filesアプリから受け渡したフォントを Resprite で直接開いて読み込めるようになりました。デスクトップ版では、対応フォントを Resprite にドラッグ＆ドロップして取り込むこともできます。

対応する取り込み形式
  • iOS: .resfont、旧拡張子 .resprite-font、.ttf、.ttc、.otf、.otc
  • デスクトップ / Android: .resfont、旧拡張子 .resprite-font、.ttf

テキストの挿入​

  1. Menu ▸ Edit ▸ Insert text を開く。
  2. 左カラムでフォントを選択。
  3. グリッドの文字をタップして文面を組む、またはキーボードで直接入力。複数行のテキスト入力に対応し、行間や文字間隔を調整できます。
/versions/r49/multi_line_text_en.png
複数行テキストの設定
  1. 必要に応じて文字間隔、配置、アンチエイリアスを調整。縦書きモードに対応しています。
/versions/r49/vertical_text_en.png
縦書きモード
  1. Insert を押して現在のレイヤーに配置。
Respriteフォントでテキストを挿入
TTFフォントでテキストを挿入
ヒント

1 つのテキストブロック内に複数のRespriteフォントを混在させ、アイコンや絵文字など装飾要素を組み合わせられます。

/doc-imgs/insert-text.jpeg
フォントを組み合わせた例

Respriteフォントを作成する​

Respriteフォントはグリッド上にピクセルアートを配置し、設計通りの形で描画されます。

  1. 付属テンプレートを使ってスプライト上にグリフを描く。
  2. Menu ▸ Export ▸ Save as font を選択。
  3. グリッドサイズ、等幅設定、単語間のスペーシングを設定。
  4. Preview で最終出力を確認。
/doc-imgs/font-template.png
Respriteフォントテンプレート

Respriteフォントはアルファベットに限らず、アイコンやHUDシンボル、頻出パターンなどUI制作を効率化する素材集としても活用できます。

フォントを探す​

Resprite Fonts Collection ではコミュニティ制作のフォントを入手できます。プロジェクトに取り込んでタイポグラフィの幅を広げましょう。