Piskelappの代替案 — 3Dも作れる無料のブラウザスプライトツール

アドレスバーにpiskelappと入力したなら、あなたはすでにPiskelを見つけています。piskelappは無料のブラウザピクセルアートエディターのドメインです。ですから「piskelappの代替案」と「Piskelの代替案」は、二通りの言い方で尋ねられた同じ問いです。PiskelAppという別の製品はありません。人々が覚えている名前は、そのアドレスなのです。

このページは、その答えの正直な版です。固定されたピクセルグリッドの上でPiskelがうまくやれること。それが止まる場所。スプライトシートが絵であることをやめ、歩き回れる場面の中の素材にならなければならないとき、ブラウザスプライトツールが何を加えるのか。順位も、ダウンロード数も、でっち上げたベンチマークもありません — 仕組み、ファイルの設定、そして失敗の仕方です。

手短な答え

piskelappは、無料のブラウザピクセルアートエディターであるPiskelのドメインです — ですから「piskelappの代替案」と「Piskelの代替案」は、たいてい同じ問いです。ドメインが人々の覚えている名前になったとき、ツールそのものは何も変わりませんでした。アプリはPiskelです。問いはホスト名です。

その問いの裏にあるのは、ほとんどいつも二つのうちのどちらかです。同じ仕事を、さらに先へ進んだツールで済ませたいか — より速いキャンバス、より多くのレイヤー、別のマシンにもついてくる保存 — あるいは、Piskelがもともと目指していなかったもの、つまりフレームを生み出す生成ツールと、そのフレームに居場所を与える場面ビルダーを求めているかです。

これは時間の使い方の違いです。すべてのピクセルを手で描き、Piskelのグリッドが気に入っているなら、エディターを乗り換えると手の記憶を失い、ほとんど何も得られません。歩行サイクルに半日が費やされることが隘路なら、どんな2Dエディターでもそれは解決しません。隘路は描くことであって、エディターではないからです。

「piskelappの代替案」が本当に尋ねていること

ドメインを取り除くと、その文は「スプライトツールが必要だ」になります。これは常に混同される三つの要件に分かれます。人間がピクセルを動かす描画、モデルが書かれた説明からフレームを描く生成、そしてフレームがシートになり、シートがアニメーションになり、アニメーションが場面になる組み立てです。Piskelは最初のものをよくこなし、三番目の一部をこなします。残りの二つについては何の考えも持っていません。

何かを乗り換える前に、そのうちのどれが自分の隘路なのかを決めてください。Piskelを離れて別の2Dエディターへ行く人のほとんどは戻ってきます。二つ目もまた、グリッドとツールバーだからです。

piskelapp（Piskel）とは何か

Piskelはブラウザ内のピクセルアート用エディターです。ページを開き、キャンバスの大きさを設定し — 32×32が既定で、今も妥当な選択です — 拡大されたグリッドの上を、鉛筆、バケツ、ディザ、明るく、そのほか一握りのツールで描きます。何もインストールしません。アカウントも作られません。エディターはクライアント側で動くので、一度ページが読み込まれれば、描画はネットワークの往復を待ちません。

Piskelの地位を築いたのは、人々が同じ息で挙げる機能です。オニオンスキンは、アニメーションをつける間、現在のフレームの背後に前後のフレームを薄く表示します。パレットの操作では、決まった色の組を組み立て、すべてのフレームをその中に収められます。プレビューペインは、設定したフレームレートと大きさでアニメーションを再生します。そしてフレームごとの小さなレイヤースタックです。

書き出しは、Piskelが本当に役立つところであり、代替を探しているなら最も理解する価値のある部分です。現在のフレームまたはすべてのフレームを個別のPNGとして書き出し、アニメーションGIFを書き出し、スプライトシートを選んだ列数・行数・整数倍率で一つのPNGとして書き出し、あるいはプロジェクトを.piskelファイルとして保存できます。これはフレームとパレットを記述したJSON文書です。

• オニオンスキン現在のフレームの背後に、前後のフレームを薄く描きます。不透明度と、どの隣接フレームを表示するかを自分で制御します。手描きのループを当てずっぽうではなく可能にする、ただ一つの機能です。
• パレットパレットを作成または読み込み、すべてのフレームをその見本の中に収めます。並び順は後で重要になります。シェーダーやパレット差し替えの手順に持ち込むのは、それだからです。
• スプライトシートの書き出し一つのPNG、自分の列数、行数、整数倍率。これがエンジンや3Dの場面が実際に消費するファイルです。
• GIFの書き出しフレームごとの遅延を設定できるアニメーションGIF。ループを共有するのには向きますが、ゲームには扱いにくいものです。GIFは1フレームあたり256色と1ビットの透過に制限されるので、柔らかい縁は硬くなるか消えるかのどちらかで戻ってきます。
• .piskelプロジェクトファイル保存形式は、フレームのデータとパレットを保持するJSONです。Piskelで再び開けます。他のエディターでは開けません。
• アカウント不要ログインするものは何もありません。プロジェクトはタブの中、ブラウザのストレージの中、そしてダウンロードしたファイルの中にあります。

なぜ人々は代わりにドメインを検索するのか

製品名がドメインだからです。ツールを半分しか覚えていない人は、アドレスのように見えるものを打ち込み、ブラウザや検索ボックスがそれを補完します。ホスト名でもあるブランドは、ドメインの形をした検索語をいつまでも生み出し、その検索語は、誰もその製品について書かなくなっても安定したままです。

二つ目の理由は、ツールがほとんど変わっていないことです。グリッド、ツールバー、オニオンスキンの操作、書き出しのダイアログ。それらは何年も前と見分けがつくほど同じです。その安定性こそが、今も人々が勧める理由です。書くことがほとんどない理由でもあります。新しい機能は新しいページを生みますが、安定したエディターは安定した、ゆっくりと古びていくページの組を生み、ドメインの検索語はその後ろに新しいものを何も伴わずに届き続けます。

実際の結果として、そのドメインの検索は、アプリそのもの、古いチュートリアル、そして現在のブラウザツールの状況が存在する前に書かれた寄せ集めの記事が混ざったものを返します。その隙間こそが、このページが存在する理由です。Piskelが悪くなったのではありません。周囲の分野が生成の歩みと3Dの歩みを進めたのに、Piskelは進めなかったのです。もともとそちらを向いていなかったからです。

Piskelが止まる場所

これらは不満ではなく、確かめられる限界です。どれも、半日で確認できることです。

最も重要な限界は、完成したシートから動く場面への道が欠けていることです。PiskelはPNGを手渡します。そこから先はエンジンの領分です。読み込みの設定、フィルターモード、アトラスの余白、支点、フレームの矩形、アニメーションクリップ、衝突判定の箱。その作業は本物で、二時間の絵の仕事が二日の統合の仕事に変わるところです。

• 生成の工程がないPiskelは、あなたが描いたものを描きます。プロンプト欄も、参照画像の読み込みも、フレームを提案するモデルもありません。八方向の歩行サイクルが必要なら、八方向を描くことになります。
• 3Dの出力がない出力はラスターのフレームです。メッシュも、カメラも、場面グラフも、照明もありません。3Dで使うシートは、自分で貼り、切り、位置合わせするテクスチャです。
• クラウドのプロジェクトがないアカウントがなければ、サーバー側のプロジェクトもありません。別のマシンへ移るときは、ダウンロードしたファイルを読み込むことになります。間違ったブラウザストレージを消せば、タブ内のコピーも一緒に消えます。
• 実行環境がないPiskelはプレビューペインで決まったフレームレートでアニメーションを再生し、そこで止まります。入力も、物理も、衝突も、カメラも動かしません。
• 整数倍の拡大縮小のみ書き出しの倍率が整数倍なのには理由があります。32×32のスプライトを1.5倍で描くと、画面のピクセル一つ分と二つ分の幅のピクセルが交互に生まれます。エディターにはそれを直せません。直すのは最近傍フィルタリングと、表示時の整数倍のズームです。

Piskel対ブラウザスプライトツール

表は、プロジェクトを決める行で両者を比較します。どのセルも、点数ではなく仕組みを記述します。自分の進め方に影響しない行は、無視してください。

行は、自分にとっての負担の大きい順に読んでください。アニメーションは比べるのが簡単です。どちらのツールもアニメーションをつけられるからです。クラウド保存と3Dの出力は、仕事の形を変える行です。他人に絵を渡せるかどうか、そして完成した絵の行き先があるかどうかを決めるからです。

piskelappの代替案への乗り換えが価値を持つとき

妨げている工程が生成か統合なら、乗り換えてください。それは二つの状況のどちらかです。プロジェクトが必要とする量のフレームを描けないか、描けても、キャラクターごとにアトラス、支点、クリップを手で設定したい人がいないために、シートが場面に決して届かないかです。

描くことが楽しく、必要なのがGIFかシートだけなら、乗り換えないでください。Piskelのグリッドはよくできていて、書き出しのダイアログはうたった通りのことをします。すでに自分の手になじんだツールの代替を評価するのに使う時間は、アニメーションをつけるのに使わなかった時間です。

ここでスプライトを生成する

生成は、Piskelには存在しない半分です。ですから、実際に何が起きるのかを具体的に述べる価値があります。あなたは一文を書きます。Agent Sprite Forgeがそれを題材、視点、パレット、フレーム数に解決し、選んだ大きさで同じグリッドの上に各フレームをラスタライズします。すべてのフレームが一つのグリッドと一つのパレットを共有するので、結果はフレームごとにずらすことなくアトラスに詰め込まれます。

失敗の仕方は予測でき、それが役に立ちます。曖昧な視点の言葉は、二つの読みの間で揺れるフレームを生みます — 歩く方向も持つキャラクターに「正面を向く」と指示すれば、そうなります。小さなキャンバスでの多いフレーム数は、フレームごとの余白をほとんど残しません。16×16で八フレームなら、それぞれおよそ百ピクセルの描画面しかありません。細部は雑音に変わります。異なるパレットで生成された輪郭を混ぜたシートは、二人のキャラクターを綴じ合わせたように見えます。三つの場合すべてで、直すのはモデルではなく、その一文です。

書き出しは、スプライトツールにすでに期待するものをなぞります。個別のPNG、列数と行数を指定した一つの詰め込みシート、確認用のアニメーションGIF、あるいはフレームの矩形、支点、推奨フレームレートを伴うアトラスです。そこからシートは、自分のエンジンへ、あるいは同じページのワールドエディターへ直接進みます。

• PNGシート一枚の画像で、指定した列数と行数にフレームが並びます。エンジンやテクスチャの読み込みが真っ先に求めるものです。
• アトラスのデータフレームの矩形、支点、推奨フレームレート。誰かが手でクリップを組まなくてもアニメーションが再生されます。
• フレームごとのPNG一つのフレームをピクセルエディターで手直しし、シートを自分で詰め直したいときに。
• GIF手早い確認用の成果物。ほかのGIFと同じく、256色と1ビット透過の制限を伴います。

シートから世界へ

シートはまだ絵ではありません。テクスチャです。等角投影の場面では、シートは一度読み込まれ、フレームはUV矩形に切り分けられ、アニメーションが進むにつれて描画側が入れ替えるのはその矩形です。二つの設定が仕事のほとんどを担います。テクスチャフィルタリングは最近傍のままにしてピクセルを正方形に保ち、アトラスには各フレームの周囲に一、二ピクセルの余白を設けて、距離によるフィルタリングが隣のフレームの色を縁のピクセルに引き込まないようにします — キャラクターの輪郭に色の縁取りが出る、いつもの原因です。

カメラが残りの半分です。ピクセルアートは、等角投影の角度、およそ2:1 — 約30度の俯角での32×16のタイルの設置面積 — の平行投影カメラの下で正しく見えます。透視投影カメラに切り替えると、遠くのスプライトは地面のグリッドより速く縮み、技術的には何も壊れていなくてもおかしく見えます。ズームは1×、2×、4×の整数段で。1.5倍のズームでは、同じスプライトの中に一ピクセル分と二ピクセル分の行が現れます。

物理と影は、初めてのときに人々が過小評価する部分です。ビルボード化されたスプライトは常にカメラを向く平らな四角形なので、本当の投影された影を受け取れません。地面との接触は、キャラクターの下に描かれる別個の柔らかい塊のデカールです。衝突判定は、メッシュのコライダーよりも、ふさがれたタイルのグリッドの方が安く済みます — エージェントはグリッドをまたいで経路を進み、立っているタイルがその一歩を許すかどうかを決めます。Neta StudioのThe Cyclops' Islandはこのやり方で作られており、Mini Worldは同じループの小さな版です。シートを生成し、タイルの場面に置き、その周りを歩くのです。

• 最近傍フィルタリングスプライトのピクセルを正方形に保ちます。32×32のスプライトにバイリニアフィルタリングをかけると、柔らかく濁った縁ができ、後工程の何もそれを取り戻せません。
• アトラスの余白各フレームの周囲に一、二ピクセルの透明な押し出しを設けると、ミップマップを有効にしたときに縁で色がにじむのを防げます。
• 平行投影カメラどの距離でもピクセルグリッドと一致します。透視投影カメラは、スプライトの縮尺とタイルの大きさの関係を壊します。
• 塊の影のデカールビルボードは投影された影を受け取れないので、地面との接触はシミュレートするのではなく描きます。
• タイルグリッドの衝突判定ふさがれたタイルの参照は速く、予測できます。タイルの世界でのメッシュのコライダーは、より高くつき、何も得られません。

それが属する世界へ歩き出す

このドメインの問いには短い答えと長い答えがあります。短い方は、それはPiskelであり、2Dエディターだというものです。長い方は、シートが完成した後に起きることです — 同じピクセルから作られた世界を開き、エディターがその手前で止まる歩みを見てください。

FAQ