Pixel Editor
スプライトとタイルマップを、ピクセル単位で。フレーム、オニオンスキン、パレット、タイルごとの当たり判定、ノーマルマップ、9スライス、GIFやAsepriteへの書き出し。
一言で言うと#
32×32でも1024×1024でも同じように快適に作業できるよう作られたスプライト・タイル マップエディター。パレットを理解するアニメーションフレームとカラーツールを備えて います。
レイアウト#
| メニューバー | File・Edit・View・Plugins |
| モードタブ | SpriteとTilemap |
| ツールバー | New、アンドゥ／リドゥ、キャンバスサイズ、クロップ、レイヤーの統合、左右・上下反転、グリッド、インポート、エクスポート、Save |
| オプション行 | ブラシサイズ、ブラシ形状、不透明度、分割ビュー、プリセット |
| 左レール | 鉛筆、シェイプ、塗りつぶし、グラデーション、テキスト、選択、スポイト、配色ペア、パレット |
| 中央 | 現在のツールと色を小さく表示するキャンバス、そして1:1のPreview |
| 右 | Layers、続いてEffects、Normal map、Reference、Modes |
| 下 | フレームのtimeline、続いてパレットバー |
| ステータスバー | キャンバスサイズ、アクティブレイヤー、ズーム |
ここで行うこと#
描く#
Space + ドラッグでパン、スクロールホイールでズーム、0でビューをリセットしま
す。ブラシにはサイズと形状（デフォルトは正方形）、そして不透明度があります。
Previewパネルは、拡大表示で作業している間もスプライトを1:1で表示します。これが
ピクセルスプライトを見る唯一の正直な方法です。
レイヤー#
名前を付けられ、並べ替え可能で、それぞれにブレンドモードと不透明度、さらにカラ ータグと、数が多いときのためのフィルターボックスがあります。Effectsは非破壊 で適用されます。
アニメーションさせる#
下部のtimelineはフレームの帯です。追加、複製、削除、並べ替えができ、フレー ムごとにミリ秒単位の長さを設定できます。順再生、逆再生、ピンポン再生も可能で す。表示にはそれが何を意味するかが出ます。1 frame・100 ms・~10 fpsのように。
Onionは現在のフレームの下に隣接するフレームを薄く表示します。これが歩行サイ クルをずれさせないためのやり方です。
色#
パレットバーは、覚える価値のある部分です。
| Palette | 作業用のセット。件数と**+ Add** |
| Recent | 最近選んだ色 |
| Shades | 現在の色から生成される明から暗へのランプ |
| Harmony | 補色、トライアド、類似色の提案 |
| Ramp | 自分で作り、保持しておけるランプ |
現在の色は16進数として編集できます。
タイルマップ#
Tilemapタブは、スプライトを描くモードからタイルとしてレイアウトするモードへ 切り替わります。結果はEngineに渡され、Engine側にはレベ ル自体のための独自のタイルマップエディターがあります。
ノーマルマップ#
Normal mapセクションはスプライトからノーマルマップを導き出し、2Dスプライト を平坦なままにせず、Engineでライティングできるようにします。
リファレンス#
Referenceセクションに画像をドロップすると、描いている間キャンバスの背後にそ れが表示されます。
パネル#
9個あり、最後の4つがスプライトをゲームアセットに変える部分です。
| Tool Palette | ツール |
| Layers | レイヤースタック |
| Timeline | アニメーションフレーム |
| Reference | キャンバスの背後の画像 |
| Effects | レイヤーに対する非破壊エフェクト |
| Tileset | 選んだタイルサイズでキャンバスからタイルセットを作る |
| Tilemap | それらのタイルをマップとしてレイアウトする |
| Collisions | タイルごとの当たり判定形状 |
| Normal Map | ノーマルマップを導き出し、編集する |
タイルセットとタイルマップ#
Tilesetパネルはキャンバスをタイル（デフォルト16px）に切り分け、 Tilemapパネルはそれらをレイヤー付きのマップとしてレイアウトし、リサイズもで きます。
タイルマップは.tilemapとして保存され、2通りの方法で書き出せます。1つのファ
イルとして、または分割して、つまりマップをJSONとして、各タイルセットをそ
れ自身の画像として。これは外部エンジンが通常望む形です。
当たり判定#
各タイルは、コードで宣言されるのではなく、タイルセットの上に描かれる当たり判定 形状を持ちます。
| Full | タイル全体が衝突する |
| None | 通過可能 |
| Top / Bottom / Left / Right half | 部分的な衝突 |
| Slope up / Slope down | 傾斜した衝突 |
Show Collisionsはそれらを重ねて表示し、セット全体はJSONとして書き出されま す。ここでこれを行っておけば、Engineはプレイヤーがどこを 歩けるかをすでに知っているタイルマップを受け取ることになります。
ノーマルマップ#
Generate Normal Mapは強度を指定してスプライトから1枚を導き出し、その後
Normal Map Editorで法線の向きを手描きで修正できます（P）。これが、自動処理
が間違えた箇所を直す唯一の方法です。
9スライスとピボット#
9-Slice guidesはUIスプライトの伸縮可能な領域を示し、Pivot / Originはス プライトが回転・アンカーされる基準点を設定します。どちらもEngineへスプライトと ともに引き継がれます。
対称#
Mirror XとMirror Yは両側を同時に描画します。水平、垂直、両方、あるいは 放射状に。
カラーランプとパレット#
Color Rampモーダルは、目分量ではなくきちんとランプを作り、パレットは
.gpl（多くのピクセルアート用パレットが使用するGIMPパレット形式）からイン
ポートできます。
書き出す#
| フォーマット | 用途 |
|---|---|
| PNG | 1枚のフレーム |
| GIF | アニメーション、どこでも使える |
| APNG | アニメーション、本物のアルファ付き |
| Aseprite | レイヤーを保ったままAsepriteへ戻す |
| Atlas / sprite sheet | ゲームエンジン向け |
.tilemap | マップ。まとめて、またはJSON＋画像に分割して |
読み書きできるファイル#
| ネイティブ形式 | .editor |
| インポート | .png、.jpg、.aseprite、.tilemap、.gpl（パレット） |
| エクスポート | .png、.gif、APNG、.aseprite、スプライトアトラス、.tilemap（まとめて、または分割）、当たり判定JSON |
他のスタジオへ作業を送る#
作り出すもの：ピクセルアート。受け取れるもの：ピクセルアートと画像。
ピクセルアートはInkwell、 Composer、Animator、 Matter、Engineで受け取れます。 スプライトシートはファイルを介した往復なしに、そのままゲームへ入っていきます。
他の人と一緒に作業する#
Pixel Editorは操作単位で同期します。シーンデータ、アセット、アニメーション、 スクリプト。
制限とよくあるつまずき#
- ズームは解像度ではありません。 ステータスバーには実際のキャンバスサイズ が表示され、Previewはそれを1:1で表示します。
- 柔らかいブラシはピクセルブラシではありません。 不透明度が100%未満だとエ ッジがアンチエイリアスされてしまい、スプライトではたいてい望ましくありません。
- フレームの長さはフレームごとの設定であり、アニメーション全体の設定では ありません。1コマ100msの12フレームサイクルは、他がどうであれ約10fpsで動きま す。