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

キャンバス

キャンバスは単なる描画面ではありません。ピクセルの輪郭を確認したり、構図を見たり、各種ガイドで位置を揃えたりする作業の中心になります。このページでは、キャンバスの表示を整える方法と、グリッド、アイソメトリックガイド、補助グリッドの使い方をまとめます。

キャンバスの表示とズーム

1 ピクセル単位の確認から全体構図の見直しまで、Resprite ではタッチジェスチャ、マウス、トラックパッドで素早く視点を切り替えられます。デスクトップ版と Android 版では Zoom Tool も利用できます。

画面の外へずれてしまったときや、見やすい位置に戻したいときは、中央に合わせる操作を使って表示を整えてください。

タッチ操作中心で作業する場合は、ジェスチャとApple Pencil もあわせて参照してください。

グリッド線とピクセルグリッド

グリッド表示はビュー系の操作から切り替えられます。View メニューのある画面ではそこから切り替えられ、タッチ中心のレイアウトではアクションバーやキャンバス上部のグリッドパネルから素早く操作できます。

/doc-imgs/grid-line.jpeg
グリッドのオーバーレイ

グリッドの幅、高さ、オフセットは作品ごとの設定なので、通常はキャンバス上部のグリッドパネルで直接調整します。スペースが足りない場合は、同じ項目がパラメータダイアログにまとまります。

Preferences ▸ Assistant grids では、次のような補助設定を行えます。

  • 線の太さ
  • 線色(半透明のガイド色も設定可能)
  • 主/副グリッド表示
  • グリッドセルのダブルクリック選択
  • 開始点スナップなど、グリッド関連の挙動

1x1 のピクセル境界を確認したいときは Show Pixel Grid を有効にします。十分に拡大したときだけ表示されるため、輪郭の見直しや 1 px 単位の位置合わせに便利です。

グリッドスナップとグリッド操作

グリッドスナップを有効にすると、ストロークやシェイプツールの基準点が現在のグリッドに吸着し、境界線や構造線をより揃えやすくなります。

/versions/r52/grid_snap.gif
グリッドスナップ
/versions/r52/grid_snap_start_point_setting.png
グリッドスナップ開始点設定
/versions/r52/grid_snap_with_free_start_point.gif
自由開始点でのグリッドスナップ

グリッド表示中は、マス目をダブルクリックまたはダブルタップして、そのセルを素早く選択できます。

/versions/r52/double_click_select_grid_cell.gif
グリッドセルをダブルクリックで選択

倍率が変わっても見やすさを保ちたい場合は、主/副グリッド表示を使います。矩形グリッドとアイソメトリックグリッドの両方でオフセットも設定でき、スプライトの原点に合わせて調整できます。

/versions/r52/major_minor_grid.png
主/副グリッドの表示
/versions/r52/major_minor_grid_setting.png
主/副グリッドの設定
/versions/r52/grid_offset_setting.png
グリッドのオフセット設定

アイソメトリックガイド

アイソメトリックグリッドも同じビュー系の操作から有効にでき、アイソメトリックなタイルやシーンを組むときに役立ちます。

/doc-imgs/iso-line.jpeg
アイソメトリックガイド

高さ、オフセット、角度タイプは、アイソメトリックグリッドのパネルまたはパラメータダイアログで調整するのが基本です。表示色は通常グリッドと共通なので、見た目も揃えやすくなっています。

Resprite は複数の ISO 角度タイプにも対応しており、作品のスタイルに合わせて選べます。

/versions/r46/iso_angle_types.png
アイソメトリック角度タイプ
/versions/r46/iso_angle_setting_en.png
アイソメトリック角度の設定

補助グリッド

Preferences ▸ Assistant grids では、透視グリッドまわりの補助設定や、他のガイド関連設定をまとめて調整できます。

  • 線の本数、線幅、色を調整し、ガイドが見やすくても絵を邪魔しすぎない状態にできます。
  • 透視グリッドは 1 点、2 点、3 点、魚眼に対応しており、現在の作品で使う種類はキャンバス上の透視グリッドパネルから切り替えます。
  • 建物や室内などのラフ構図では、通常グリッドやアイソメトリックガイドと組み合わせると整理しやすくなります。
  • 透視ガイドやシンメトリーツールの移動は Undo に対応しているため、試しながら調整しやすくなっています。
/versions/r52/assistive_grid_setting_page.png
補助グリッド設定ページ
/versions/r52/context_floating_menu_view.png
グリッド/シンメトリー用コンテキストツールバー

キャンバス設定

Preferences ▸ Canvas では、表示まわりの設定をさらに調整できます。たとえば次のような項目です。

  • Show Pixel Grid と、その表示を開始するズーム倍率
  • 透明部分を見分けるためのチェッカーボードの色とマスサイズ

グリッド、スナップ、透視関連の設定は Preferences ▸ Assistant grids を使います。グリッドサイズ、オフセット、アイソメトリック高さ、ISO 角度など作品ごとの値は、キャンバス上の各グリッドパネルから直接調整します。

/doc-imgs/canvas-setting.jpeg
キャンバス設定

キャンバスサイズの変更

既存ピクセルを拡大縮小せず、幅と高さだけを変えたい場合は Menu ▸ Sprite ▸ Canvas size を使います。プレビューを見ながら、現在の絵に対してどこへ余白を足すか、どこを切り詰めるかを確認できます。

余白を追加したい、端を広げたい、外周をトリミングしたい場合は Canvas size を使います。絵そのものを拡大縮小したい場合は Sprite size を使ってください。

インタラクティブなキャンバスサイズ変更にも対応しています。

/versions/d28/interactive_canvas_resize.png
インタラクティブなキャンバスサイズ変更

Sprite sizeRotate / Flip canvasCrop to canvasTrim など、スプライト全体に作用する操作は スプライトの作成と設定 を参照してください。局所的な変形については 編集 を参照してください。

続けて読む