Pixeloramaの代替

Pixeloramaの代替:一行から動くドット絵キャラクター

Pixelorama は空のタイムラインから始まります。誰かを一言で伝えれば、3つの完成したアクションがフレームで届きます——待機・歩き・攻撃。切り出し済みでループし、タブの中でそのまま動かせます。

16ビットのドット絵ゲーム画面:夕暮れの神社の石段で雷電将軍が薙刀を振る16ビットのドット絵ゲーム画面:夜の渋谷の裏路地で釘崎野薔薇がハンマーを振り下ろす16ビットのドット絵ゲーム画面:夜明けの甲板でゾロが三刀流の構えをとる16ビットのドット絵ゲーム画面:午後の学校の廊下で堀がロッカーの前を歩く
✦ドット絵アクション
このキャラクターのドット絵アクションを作る:ONE PIECE のゾロ、刀三本、待機・歩き・斬撃
ONE PIECE · ゾロ. 待機の8コマがそのまま返ってきたシート。地面のラインが一本、余白も揃っている。切る前の原稿です。
ONE PIECE · ゾロ — 待機の8コマがそのまま返ってきたシート。地面のラインが一本、余白も揃っている。切る前の原稿です。
ONE PIECE · ゾロ. 同じキャラクターの歩き途中を透明背景へ切り出したもの。1コマ1セグメント、刀三本は腰のまま。
ONE PIECE · ゾロ — 同じキャラクターの歩き途中を透明背景へ切り出したもの。1コマ1セグメント、刀三本は腰のまま。
ONE PIECE · ゾロ. 振り下ろしのオニオンスキン。鮮明なコマの後ろに8段の残像が重なり、スクラブしなくても軌道が読めます。
ONE PIECE · ゾロ — 振り下ろしのオニオンスキン。鮮明なコマの後ろに8段の残像が重なり、スクラブしなくても軌道が読めます。
呪術廻戦 · 釘崎野薔薇. ハンマーの一振りを8コマで。最初のコマで振りかぶり、中ほどで当て、最後で戻ります。
呪術廻戦 · 釘崎野薔薇 — ハンマーの一振りを8コマで。最初のコマで振りかぶり、中ほどで当て、最後で戻ります。
呪術廻戦 · 釘崎野薔薇. 4つのアクションを1枚のアトラスに、1行ずつ:待機・歩き・攻撃・被弾。セルも基準線もキャラクターも同じ。
呪術廻戦 · 釘崎野薔薇 — 4つのアクションを1枚のアトラスに、1行ずつ:待機・歩き・攻撃・被弾。セルも基準線もキャラクターも同じ。
原神 · 雷電将軍. 同じコマを1倍・4倍・8倍で。下の16色はスプライトから直接採取したものです。
原神 · 雷電将軍 — 同じコマを1倍・4倍・8倍で。下の16色はスプライトから直接採取したものです。
原神 · 雷電将軍. ゲームの縮尺で、瓦敷きの社殿の縁側に立つスプライト。セルの高さと床タイルが合うかの確認です。
原神 · 雷電将軍 — ゲームの縮尺で、瓦敷きの社殿の縁側に立つスプライト。セルの高さと床タイルが合うかの確認です。
ホリミヤ · 堀. スカートの裾と肩のバッグが、8コマを通して同じ重さを保つ歩きのサイクル。
ホリミヤ · 堀 — スカートの裾と肩のバッグが、8コマを通して同じ重さを保つ歩きのサイクル。
呪術廻戦 · 五条悟. 被弾の反応。仰け反りは中ほどのコマ、頭は横へ振られ、最後のコマで立ち姿に戻ります。
呪術廻戦 · 五条悟 — 被弾の反応。仰け反りは中ほどのコマ、頭は横へ振られ、最後のコマで立ち姿に戻ります。
ブラウザの中で

歩かせてみる。

1回の実行から出た3つの本物のアクション。矢印キーで歩き、Spaceで攻撃、数字キーでどの行でも再生できます。assets.zip も同じページに。

歩かせてみる。新しいタブで開く
自分のも欲しい?自分のも作る

Pixelorama は書き出しで終わります。ここはその先へ続きます。

Neta Studio はAIワールドビルダーで、スプライトの工程が横に付いています。説明したキャラクターは、すでに登場人物と場所のある世界に入り、同じフレームが次に生成する場景(シーン)を歩けます——ダウンロードも、エンジンへの読み込みも、2つ目のタブもいりません。

  • 3つの動作、1本の物差し — 待機・歩き・攻撃が同じ立ち姿の高さと足元のラインを共有し、アトラスが等しいセルに揃えるので、行を切り替えてもキャラクターが跳ねません。
  • 描くのではなく、切り出す — マゼンタ背景のシートが透明PNGになり、縁もきれいに。アクションごとの帯と、8 fps でループするGIFが付きます。
  • 動かせるページ — 矢印で歩き、Spaceで攻撃。assets.zip と actions.json は同じページの隣にあります。

Side Sprite Actions スキルで動いています——1人のキャラクター、すべての動作を同じ大きさで。

始める前の質問。

これは Pixelorama の代替になりますか?

完成したアニメーション一式なら、はい。フレーム、帯、アトラス、パックが揃います。一筆ずつ描くキャンバスではないので、手でピクセルを置く作業は Pixelorama のままが早いです。書き出されるのは普通のPNGなので、そのまま持ち帰れます。

1回の実行で何が届きますか?

アクションごとに自前のセルで切った帯、透明PNGの単体フレーム、アクションごとのGIF、1行1アクションの spritesheet.png、行とフレームの情報を持つ actions.json、そしてそれらを再生するページです。

複数のアクションで同じキャラクターを保つには?

最初のアクションが identity フレームを書き、以降はそれを参照して描きます。輪郭・配色・立ち姿の高さと足元のラインが揃うので、行を並べてもずれません。

あとからアクションを足せますか?

足せます。同じページに加わります。走り、ジャンプ、被弾、倒れ、あるいは独自の技。名前を付けて、8コマで何が起きるかを伝えてください。

Pixelorama はオフラインで動きます。なぜ移る?

遅いのは空のタイムラインのほうだからです。ここでは直せるフレームが最初から届き、エディタを開かなくても完成します。手作業は Pixelorama に残しておけばいい。

サイズとレイアウトは?

どの帯も立ち姿の高さと足元のラインは同じ、足元は下端、右向き、既定は8コマ8 fps。64 px のセルや6コマが良ければ、そう伝えてください。

武器や小道具にも対応しますか?

刀、ハンマー、薙刀、どれでも。刃は帯の中でも同じ手にあります。長い武器はパネルの縁に触れやすいので、書き出す前に帯を一度見てください。

Godot、Unity、Phaser へはどう入れますか?

spritesheet.png は1行1アクションでセルは等幅、actions.json にその行・フレーム範囲・fps・ループの有無があります。インポーターをこのシートに向けて、行を読ませるだけです。

1人のキャラクター、3つの動作、1つのパック。

誰で、何を持っているかを伝えるだけ。待機・歩き・攻撃が同じ縮尺のフレームで戻り、動かせるページも付いてきます。

×