スプライトエディタ

Pyxenには、iPadとMacでプロジェクトの中で直接ピクセルアートを作成・編集できる本格的なスプライトエディタがあります。外部ツールは必要ありません。

スプライトエディタを開く

ファイルで画像を選ぶと、そのままスプライトエディタで開きます。新しく作るには、**ファイル › 新しいアセット…**を選び、画像を選びます。

幅の狭い iPad のウインドウでは、キャンバスがペインの幅いっぱいに広がり、そのパネルはウインドウの下端のトレイのツールになります：ツール、色、レイヤー、フレーム。タイルマップではツールとタイルです。

描画ツール

ツールはキャンバスの端に並び、それぞれにキーがあります：

色を選んでキャンバスに描きます。ピンチやスクロールで拡大すると、ピクセル単位で作業できます。全体を表示（Cmd+0）で画像全体が見えます。エディタのバーの対称は、描いたものを左右、上下、または両方に反転して描きます。

色

サイドの列には、描く色と背景色（Xで入れ替え）、16進数の色、パレット、最近使った色があります。別のパレットは⋯メニューで選びます。

選択ツール

選択範囲があるとき、キャンバスのメニュー（右クリック、または長押し）で次のことができます：

iPadでは、キャンバス上の編集ボタンで取り消し、やり直し、カット、コピー、ペーストができます。

レイヤー

レイヤーはパレットの下にあります。レイヤーを追加で追加でき、各レイヤーには表示とロックのスイッチがあります。レイヤーのメニューで名前を変えたり、上下に動かしたり、不透明度を設定したりできます。下のレイヤーと結合で下のレイヤーとまとめ、統合ですべてを1つのレイヤーにし、レイヤーを削除で取り除きます。

各レイヤーは独立して描画されます。背景、キャラクター、エフェクトを別々のレイヤーに分けて、ほかに影響を与えずに編集できます。

サイズ変更、反転、回転

**画像のサイズを変更…**で画像のサイズを変えます：

キャンバスのメニューには、コンテンツに合わせてトリミング、左右反転、上下反転、90°と180°の回転もあります。

グリッド（バーのグリッド）は、シート上のタイルをそろえるのに役立ちます。サイズ、主線、色は⋯メニューにあります。

アニメーション

エディタの下部には、コマ送りのスプライトアニメーションのための、画像のアニメーションがあります。

アニメーションの作成

  1. 新規アニメーションを選び、名前を付けます（例：“walk”、“idle”、“attack”）
  2. タイル選択ツール（T）でスプライトシートのタイルを選び、アニメーションに追加を選びます
  3. またはフレームを追加で、読む順で次のタイルを追加します

シート全体で画像全体の表示に戻ります。アニメーションのメニューで名前の変更や削除ができます。

フレームの編集

オニオンスキン

オニオンスキンをオンにすると、編集中に前のフレームが半透明で重なって見えます。フレーム間の一貫性を保つのに役立ちます。

フレームを分離

フレームを分離をオンにすると、編集中のフレームの周りのタイルが隠れ、そのフレームに集中できます。

コードでのアニメーション使用

アニメーションはスプライトのメタデータに保存されます。animationパラメータでゲーム内で再生します：

player.sprite = Sprite("hero", animation="walk")

詳しくはスプライト＆レンダリングとSpriteリファレンスを参照してください。

ペインのバーにあるコードで使用は、この画像を指すスクリプトの行数を示します。行を選ぶとそこへ移動します。コードで画像名をCmd+クリックすると、呼び出しが指すアニメーションやタイルを開いた状態でここに戻ります。

スプライトをエクスポート

⋯メニューの最後のエクスポート…、アニメーションのメニューのアニメーションをエクスポート…、またはファイル › スプライトをエクスポート…（Option+Cmd+E）でスプライトをエクスポートが開きます。作るものを選びます：

アニメーションを選び、フレームではそのフレームを選びます。スケールでファイルを 1×、2×、4×、8× の大きさにでき、各ピクセルはくっきりした正方形のままです。プレビューはファイルそのもので、下に名前とサイズが出ます：hero-walk@4x.gif、フレーム2は hero-walk-2.png、hero-walk-strip.png、シートは hero.png。

保存…で好きな場所にファイルを保存します。iPad では共有…で共有シート（“ファイル”に保存、画像を保存、AirDrop）が開き、Web ではダウンロードでダウンロードされます。コピーは PNG をクリップボードに入れます。Mac と iPad では、プレビューをドラッグして好きな場所にファイルをドロップできます。

GIF には半透明のピクセルがありません：半分以上不透明なピクセルは不透明に、それ以外は透明になります。GIF のフレームは 1/100 秒単位なので、8 fps では1フレーム 0.13 秒になり、50 fps より速くは再生されません。

元に戻す／やり直し

スプライトエディタでのすべての変更は、プロジェクトを開いている間、取り消し（Cmd+Z）とやり直し（Cmd+Shift+Z）ができます。

ゲームでアートを確認する

ゲームは起動するたびに画像を読み込みます。描いたあとはゲームをもう一度実行すると、新しいピクセルがゲームプレビューに表示されます。実行中のゲームは、起動時の画像を使い続けます。

ヒント