Pixeloramaの代替案 — ブラウザでスプライトを描き、描きたくないときは生成する

Pixeloramaの代替案を探している理由は、たいてい3つのうちのどれかです。使っているマシンがクロームブックである。方針でインストールが禁止されている。描いている時間がないうちにスプライトを仕上げる必要がある。Pixeloramaは無料のオープンソースのデスクトップ向けピクセルアートエディターで、アニメーション、レイヤー、タイルマップ用のツールを備え、その3つともよくできています。このページで扱うのは、描く作業を引き受け、説明から生成する道を加え、さらにPixeloramaにはできないこと——スプライトを歩き回れる3Dシーンの中に置くこと——まで行うブラウザの作業場です。

Agent Sprite Forgeがスプライトエディターです。名詞句を入力し、向きを選ぶとスプライトシートが得られます。1ピクセルの鉛筆を取って、16×16でも32×32でも、その企画で使う大きさのコマを自分で描くこともできます。書き出しは素のPNGで、1コマだけでも横一列の帯でも構いません。そこから3Dゲームビルダーが、そのPNGをMini WorldやThe Cyclops' Island、あるいは段落から生成したシーンの中の、平面やビルボードの素材として受け取ります。ダウンロードは不要、試すのにアカウントも要りません。

Pixeloramaとは何か、何ではないか

Pixeloramaはデスクトップで動く無料のオープンソースのピクセルアートエディターです。Godotエンジンの上に作られ、普通のアプリケーションウィンドウとして開き、スプライト作業のうち実際に時間を食う部分を押さえています。不透明度と合成モードを持つレイヤーの積み重ね、フレームタグとオニオンスキン付きのアニメーションタイムライン、既存のパレットファイルを読み込むパレットパネル、継ぎ目なく組み合うタイルセットを作るためのタイルマップ用ツールです。多くの人にとって、『Asepriteは有料で、まだそこまで払う気はない』という問いへの正直な答えでもあります。

また、厳密な意味ではお絵かきソフトです。企画ファイルのどのピクセルも、手がカーソルを動かしたからそこにあります。書いた文からスプライトへ至る道はなく、待機モーションの40通りを量産する一括処理もなく、描画の仕組みもありません。プログラムから出てくるのはPNG、詰め合わせたシート、あるいはGIF——カメラも地面も光もない、ピクセルの矩形です。

この区別は、企画の範囲を決めるときに効いてきます。お絵かきツールが答えるのは『このキャラクターはどんな見た目か』です。『このキャラクターはどこに立つか』には答えません。2つ目の問いにはシーン、カメラ、地面、そして照明の判断が必要で、Pixeloramaはそれらを意図的に持っていません。この境界をこの先のページでも覚えておいてください。2つのツールの守備範囲が重ならなくなるのは、まさにここだからです。

Pixeloramaが止まる場所

第一の限界：デスクトップソフトであること。デスクトップOS向けのビルドがあり、それで全部です。クロームブックにはインストールできません。アプリの許可リストがある制作会社や学校のマシンにも入りません。署名のない実行ファイルを動かさないよう固定された仕事用ノートパソコンでも同じです。これから20分だけ使えるのがブラウザのタブ1枚なら、どれほど優れていてもPixeloramaは選択肢に入りません。

第二の限界：どのピクセルも自分の手から出るということ。4コマの歩行を持つ32×32のキャラクターは、およそ4千ピクセル分の判断です。慣れたピクセルアーティストなら30〜60分で仕上げます。初めての人は数時間かかり、その大半は陰影や色ではなく、シルエット——小さいサイズでの読み取り——に消えます。下書きを生成しても技術が不要になるわけではありません。技術は選択と修正へ移り、そのループはずっと短くなります。

第三の限界：出力は、立つ場所のない画像だということ。騎士のPNGは、シーンの中の騎士ではありません。一方から他方へ進むには、エンジン、読み込みの工程、素材の設定、縮尺の判断、カメラが要ります。これはPixeloramaへの批判ではなく、エディターとして正しい守備範囲です。ただ、今週の成果物が『歩いて通れる通り』なら、2Dエディターは5つの工程のうちの1つでしかありません。

どれもソフトの出来を貶す話ではありません。タイルマップ用のツールは本当によくできています。格子状のタイル、タイルごとに作る衝突形状、書き出し後も崩れないタイルセットの流れ。タグ付きのアニメーションタイムラインがあるからアニメーターが残るのです。支持されているのは無料だからではなく、中核がしっかりしているからです。

Pixeloramaとブラウザのスプライトツールを並べて比べる

この表は機能の数ではなく、企画を決める事柄で2つを比べています。Pixeloramaが勝っている行は、ブラウザツールの実際の弱点として読んでください。実際にそうだからです。

多くの企画を決める2つの行

制作の流れを組んでいる人ほど気になる差がスクリプトです。すべてのコマの名前を変える、シートを決まった格子に合わせて余白を埋める、PNGの隣にアトラスの情報を書き出す、といった作業が流れに入っているなら、Pixeloramaは拡張してそれを任せられますが、ブラウザツールにはできません。あちらは画面であって、部品として呼び出す道具ではないからです。

もう1つがパレットの厳密な管理です。Pixeloramaでは色番号付きのパレットを固定し、すべての色をそれに照らして検査できます。生成が返すのは自分が選んでいない色で、手作業で企画のパレットに寄せ直すか、シート全体で色がずれるのを受け入れるかになります。キャラクター1体なら10分の作業です。スプライト40枚のタイルセットなら、丸々半日かかります。

ブラウザのエディターをここで試す

Agent Sprite Forgeは、キャンバス、鉛筆、消しゴム、塗りつぶし、線のツール、レイヤーパネル、コマの帯、生成の入力欄を開いた状態で始まります。インストールするものはなく、描き始めるのにアカウントも要りません。

使えるものに最短でたどり着く道は生成の入力欄を通り、言い回しがものを言います。文ではなく名詞句を入れてください。『森の中で勇敢に立っている騎士』より『槍を持った装甲の騎士』のほうが、まとまりのあるスプライトが返ります。向きはそのあとに選びます。向きは見た目の飾りではありません。見下ろし型や斜め見下ろし型のゲームなら4方向が必要で、それぞれが独自のシルエットを持つ別のシートになります。

描くことと説明すること：1つのスプライトを得る2つの方法

描くことと説明することは競う方法ではありません。失敗する方向が違うので、役に立つ流れは片方を他方の弱点の上に重ねます。

描くことは、パレットの規律と、受け入れたシルエットではなく自分で決めたシルエットを与えてくれます。このキャラクターは5色と透明だけだと決めれば、5色を守らせることができ、企画のどのスプライトも同じ制約に従うのでまとまりが保たれます。代償は時間で、上限はその日の自分の手です。

生成は数秒で最初の下書きを、さらに役に立つ形では広がりを与えてくれます。同じ名詞句を別の種で回せば、比率や装備の違う変化形が出ます。肩幅が広い、頭巾ではなく兜、より重い武器。40案から選ぶほうが1枚描くより速く、しかもそのキャラクターが何なのかを教えてくれます。代償は一貫性のなさです。生成した4コマの間で、同じキャラクターの背丈が2ピクセルずれ、パレットの色もさまようことがあります。

Pixeloramaの代替案としての流れ：シートを生成し、手で直す

まずシートを生成し、目標の速度で再生して、小さいサイズで読みにくいコマを見つけます。4コマの帯なら、たいてい2コマです。その2コマを描き直し、残りはそのままにします。隣のコマの背丈に合わせ、新しい色を選ばず既存の色から拾い、足元を直してキャラクターが滑ったり浮いたりしないようにします。2時間ではなく15分で、しかも実際に自分の目で見たスプライトが残ります。

コマ、帯、シート

エンジンに渡しても壊れないアニメーション形式は、同じ4つの決まりに従います。コマの大きさを固定すること。キャラクターが中央にしか写っていなくても、すべてのコマをまったく同じ幅と高さにします。コマは1列に並べること。左から右への横一列で、詰め込みも切り詰めもなし、読み込み側が誤解するような気の利いた配置もなし。最後のコマが最初のコマにつながるループにすること。4コマ目の次に重複なしで1コマ目が来るので、4コマ目の姿勢は1コマ目の1歩手前でなければならず、同じ姿勢ではいけません。コマ数を記録すること。4、6、8のいずれかをファイルのそばに書き添えます。記録のない帯は、読み込む人にとって当て推量のゲームになるからです。

4コマの歩行が歩行に見え、4コマの待機が震えに見える理由。歩行の周期には、接地点、通過、反対の接地点、反対の通過という4つの大きなシルエットの変化があり、目は大きな動きの4つの標本を受け入れます。待機はシルエットがほとんど変わらないので、4コマでは違いが肩の1ピクセルのずれだけになり、目はそれを雑音として読みます。待機に必要なのは2コマ、あるいは胸の呼吸や布の端の揺れといった本当の二次的な動きを伴う6〜8コマです。設定画面で左右対称に見えるからといって、両方に4を使わないでください。

高さ16ピクセルのキャラクターは、輪郭を描いたあと使えるピクセルがおよそ14個になります。それで向き、頭の形、持ち物1つ、兜、脚の位置までまかなえます。表情、指、布のしわ、種類で見分ける必要のある武器までは足りません。描く前に配分を決めてください。頭5、胴6、脚5。そして顔は暗い2ピクセルで、それ以上ではないと受け入れます。高さ32ピクセルなら口、ベルト、2色の武器が入ります。64になると示唆ではなく描画になり、細部が増えた分だけ動きの標本を多く求められるので、4コマの歩行が硬く見え始めます。

スプライトから、歩ける通りへ

ここが2Dエディターが踏み出さない工程です。3Dゲームビルダーでは、PNGはテクスチャです。平面を置き、スプライトを割り当て、素材を光の影響を受けない設定か弱く受ける設定にすると、キャラクターは通りや壁、カメラと同じ座標空間を占めます。見るべき実例はThe Cyclops' Islandです。ピクセルのキャラクター、低ポリゴンの島、自分で操作するカメラ。Mini Worldもより小さい規模で同じことをしており、Opusのピクセルアートのシーンは逆の組み合わせを見せます。環境そのものがピクセルに制限され、スプライトだけが画面の中で鋭い輪郭を持つ配置です。

ほぼすべての場面は2つの配置方法で足ります。平らな面は、ワールドの中に直立し、決まった角度に回した四角形です。ジオラマの中のキャラクターとして読めますが、カメラがおよそ60度を越えて回り込んだ瞬間に薄さが露わになるので、固定か限られたカメラ角度に向きます。ビルボードはカメラの方を向いて回ります。斜め見下ろし型のゲームなら、縦軸だけのビルボードを使ってください。垂直軸の周りだけ回し、上下の傾きは固定します。そうしないとカメラが下がるにつれてスプライトが後ろに倒れ、キャラクターが地面に寝ているように見えます。

最初の試みがだいたい失敗するのが縮尺です。スプライトの1ピクセルをワールド単位の決まった割合に固定し、決して変えないでください。キャラクターが高さ32ピクセルで1.8単位であるべきなら、平面は高さ1.8単位、正方形のコマなら幅も1.8単位です。倍率は整数に保ちます。元のピクセル格子の1.35倍にした平面では、ピクセルの幅が不均一になります。画面上で2ピクセル分の幅になる列と1ピクセル分にしかならない列ができ、カメラが動くたびにキャラクター全体がちらつきます。次に位置を固定します。足は平面の下端に置き、その下端を地面に触れさせます。平面の中心ではありません。

硬いピクセルの縁が柔らかい環境の隣にあるのが、なぜ選択なのか

3D側にはグラデーションの空、ぼかした影、滑らかな輪郭の形状があります。スプライトにはどれもありません。この不一致は奥行きの手がかりになります。画面の中で数値化されている唯一の要素なので、キャラクターが背景から浮き上がるのです。骨格とアニメーションを持つ3Dキャラクターを作るより、制作の手間も安く済みます。環境に『合わせよう』としてぼかしやミップマップでスプライトを柔らかくすると、浮き上がりを失ったまま手間だけが残ります。

• テクスチャのフィルター最近傍。点で拾い、線形補間は使わない。
• ミップマップオフ。ミップマップは隣り合うピクセルを平均し、遠くで硬い輪郭を灰色の粥にする。
• 異方性フィルターオフ、または1倍。いま消した柔らかさを呼び戻すだけ。
• 平面の縮尺元のピクセルサイズの整数倍。支点は足元に。

無料、インストール不要、アカウント不要

無料の範囲は、上で説明した流れ全体を覆います。スプライトエディター、生成の入力欄、描画ツール、レイヤー、コマ、1コマまたは横一列の帯としてのPNG書き出し、そしてそのPNGを歩き回れる3Dシーンに置くところまで。試すのにアカウントは要らず、書き出しに透かしも入りません。

半日を費やす前に、限界も名指ししておく価値があります。

Pixeloramaの代替案が劣る点

スクリプトで操作する仕組みがありません。コマの名前を一括で変える、アトラスを焼き込む、ビルド用のスクリプトからエディターを動かす、といった必要があっても、つなぎ込む先がありません。

拡張機能の配布網がありません。Pixeloramaの拡張の道は、他の人が書き出し機能やツールを足せるという意味です。ここにあるのは出荷時の機能だけです。

本格的なタイルマップエディターがありません。自動でつながる格子も、タイルごとの衝突の設定も、タイルセットの詰め込みもありません。企画が2Dのタイルマップゲームなら、地図はエンジンで作ってください。

キャンバスの限界。この作業場はスプライト程度のキャンバス向けに作られています。1コマあたり16×16から128×128が快適な範囲で、256×256も動きますが、40レイヤーの4000ピクセル級のイラスト向けの道具ではありません。道具立てと拡大縮小の挙動は、そのずっと手前で心地よくなくなります。

生成は同じ結果を返すものでも、直し不要でもありません。同じ指示でも種が違えば結果も違います。残すより捨てるほうが多くなり、その捨てる作業こそが仕事です。

道具が代替案と呼べるのは、どこで劣るかを名指しできるときだけです。それがここに挙げた点です。スプライトからシーンへの流れにはこちらを使い、本当の拡張の道、オフライン編集、固定できる色番号付きパレットが必要な作業にはPixeloramaを入れたままにしてください。

そのスプライトが属する世界へ歩いて入る

スプライトシートは、立つ場所のない素材です。このページの最後の工程は、デスクトップエディターには出せないものです。シートを、誰かが歩いて回れる世界に置く——ビルダーにある世界はどれも、1つの書かれた説明から作られ、リンク付きのページとして公開されています。

FAQ