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

最初のスプライトを作る

Resprite では、キャンバス、タイムライン、パレット、関連メタデータをひとつにまとめたファイルを「スプライト」として扱います。新しく描き始めるときは、まずファイルを作ること、サイズを決めること、必要なら縮時録画を有効にすること、この3つを押さえれば十分です。

ギャラリーから作成する

ギャラリーで New / 新規スプライト を選ぶと、新規作成ダイアログが開きます。

基本の流れは次のとおりです。

  1. ファイル名を入力する
  2. プリセットサイズを選ぶか、幅と高さを直接入力する
  3. 確定してキャンバスを作成し、そのまま描き始める

iOS とデスクトップではダイアログの見た目は異なりますが、流れ自体は同じです。先に名前とサイズを決めてから、プロジェクトを作成します。

/new-medias/getting-started/getting-started-sprite-ios-new-sprite-dialog.jpeg
iOS の新規スプライトダイアログ
/new-medias/getting-started/getting-started-sprite-desktop-new-sprite-dialog.png
デスクトップの新規スプライトダイアログ

サイズを選ぶ、よく使うサイズを再利用する

どちらの版にも定番サイズのプリセットがあり、幅と高さの手入力にも対応しています。

よく使うサイズが決まっているなら、再利用しやすい形で扱っておくと便利です。

  • iOS では、Preferences のキャンバスプリセットでカスタムサイズを管理でき、リストの前方に表示するかどうかも調整できます。
  • デスクトップ / Android では、一度作成に使った新しいサイズを記憶し、ダイアログから現在の保存済みプリセットを削除することもできます。

iOS では、貼り付け可能な画像がクリップボードにある場合、その画像に合ったサイズ候補がダイアログに追加されます。元サイズのままキャンバスを作ってから貼り付けたいときに便利です。

パフォーマンス

大きなキャンバスはメモリ使用量や再生コストを一気に押し上げます。iOS では 1080p を超えると警告が出て、4K 相当のピクセル数を超えると作成できません。デスクトップや Android でも、巨大キャンバスに大量レイヤー、長いタイムライン、縮時録画を重ねる場合はサイズを控えめにしたほうが安全です。

/new-medias/getting-started/getting-started-sprite-ios-canvas-presets-settings.jpeg
iOS のキャンバスプリセット設定

作成時に縮時録画も設定できる

描き始めた瞬間から制作過程を記録したい場合は、スプライト作成時に timelapse / 縮時録画も設定できます。

  • iOS では、新規作成ダイアログの Timelapse タブで、録画のオン・オフ、品質、速度を設定します。
  • デスクトップ / Android では、同じダイアログ内にある timelapse recording のチェックで有効化します。

最初はオフのまま描き始めて、必要になったらあとでスプライト設定から調整することもできます。

/new-medias/getting-started/getting-started-sprite-ios-timelapse-tab.jpeg
iOS 新規作成ダイアログの Timelapse タブ

作成後に変更できる項目

スプライトを作成したあとも、Menu ▸ Sprite からプロジェクト単位の設定を変更できます。

共通してよく使う項目は次のとおりです。

  • Frame rate:プレビューや書き出し時の再生速度
  • Sprite size:既存の内容を全体として拡大・縮小する
  • Canvas size:既存ピクセルを拡大縮小せずに境界を広げたり切り詰めたりする
  • Rotate / Flip:全フレームの向きをまとめて変える
  • Crop to selection:現在の選択範囲に合わせてキャンバスを切り詰める
  • Trim:周囲の空白を自動で取り除く
  • Timelapse properties:縮時録画関連の設定を調整する
  • Sprite Info:作者情報や統計などのメタデータを確認・編集する

あわせて、次のプラットフォーム差も知っておくと混乱しません。

  • iOS には Memo があり、スプライトファイルにメモを残せます。
  • デスクトップ には Crop to Canvas があり、キャンバス外のピクセルを整理できます。
/new-medias/getting-started/getting-started-sprite-ios-menu.jpeg
iOS の Sprite メニュー
/new-medias/getting-started/getting-started-sprite-desktop-menu.png
デスクトップの Sprite メニュー
/new-medias/getting-started/getting-started-sprite-sprite-info-dialog.jpeg
Sprite Info ダイアログ

次に読むページ

最初のスプライトを作ったら、次はこのあたりを読むのがおすすめです。