ドット絵

最近 Juniper Dev のドット絵ガイドを読んで、ソフト選びから応用的な彩色までの要点をノートにまとめました。同じように始めてみたい方とシェアしたいと思います。

ソフトは Aseprite がおすすめです。インターフェースがわかりやすく、アニメーションやタイルセットの機能はゲーム開発向けに設計されています。お金をかけたくなければ、オープンソースの LibreSprite やブラウザ版の Piskel が無料の代替になります。配色については、最初は色彩理論にこだわらず Lospec にある既成のパレットをそのまま使い、描き慣れてから少しずつ勉強しました。素材ごとに少なくともベース色・影・ハイライトの3色を用意すれば、基本的な立体感が出せます。

線を描くときは余分なピクセルを消すことを忘れずに。Aseprite で Pixel Perfect をオンにするとかなりすっきりします。曲線はピクセルの区間の長さを対称にする(例:1-2-3-2-1)と、線がぐっと滑らかになります。彩色では、色相環で隣り合う色を影やハイライトに使うと画面が鮮やかになります。また「ピロー・シェーディング」を避けるため、先に光源の向きを決めてから統一して光を当てましょう。ディザリングとアンチエイリアスはとても便利な小技で、前者はグラデーションの質感を、後者は輪郭を滑らかに見せてくれます。

アウトラインは純粋な黒である必要はありません。その物体の色を暗くしたものを試してみてください。最後に開発者の方へのアドバイス:色を重ねすぎないこと。1つの素材で3色を超えるとごちゃつきがちです。こまめに縮小してプレビューし、小さくしてもはっきり見えるか確認しましょう。何よりも大切なのは過程を楽しむこと。「完璧な完成品」にこだわるよりずっと大事です。

出典:32comic

Pixelblog 62は風景背景がテーマです。背景は制作の優先順位の後ろに置かれるべきではない、という主張には私も同意します。背景は舞台を作り、プレイヤーを世界に引き込みますが、同時にゲームプレイを支えるものでなければなりません。プラットフォーマーやシューティングではスプライトが読みやすいように背景を抑える必要があることも多く、ターン制RPGでは豊かで没入感のある背景が描けます。

今回は架空のターン制JRPGのバトルシーンを題材にしています。Dragon QuestやPhantasy Star 4を参考にしつつ、下側には後ろ姿の主人公たちを置くスペースを残しています。課題は、16色以下で説得力のある奥行きを出すことです。

使うキャンバスは192x144です。4:3の比率で、一般的な8ビット・16ビット機の解像度に収まり、あとでドット単位で合うパララックススクロールにも分割しやすいサイズです。作業は地平線を決める単色の横帯から始まり、地面と空をさらに細かい帯に分けていきます。重要なのは、奥行きは主に色の選び方から生まれるという点で、大気遠近法に従います。手前の面がもっとも彩度が高く、コントラストも強く、奥へ下がるほど彩度が落ち、明るくなり、色相が空の色へ寄っていきます。澄んだ青空の下では、手前の草がもっとも暖かい色になり、遠くの面は青みを帯びていきます。

色の面を作ったあとは、空の帯から色を再利用して山の層を二つ加え、それから細部に入ります。草は一ピクセル幅の短い縦線を多数集めて作り、まとまり方と大きさを揃えることがポイントです。各段階を別々の画像として示しているので、自分のペースで追えます。パレットが平板に感じて悩んでいる人には役に立つ記事です。

出典：SLYNYRD

Habrでルービックキューブが美術の素材になった経緯を詳しく解説した長い記事を読みました。ドット絵が好きな人にとって、興味深い内容が多くありました。著者は数年前からキューブでモザイクを作っており、このジャンルがなぜデジタルグラフィックスとこれほど近いのかを説明しています。

要点はシンプルです。キューブの面にある色のタイルは、そのまま一つのピクセルだということです。一面には9マス、パレットは6色。複数のキューブを組み合わせると、昔のコンピューターやアーケード機の画面を思わせる低解像度の画像になります。時期も重なっていました。Space Invaders、Pac-Man、Donkey Kongといった8ビットゲームの全盛期が、1980年代初頭のルービックキューブ・ブームと同じ頃だったのです。著者によれば、「pixel art」という言葉は1982年にXeroxのAdele GoldbergとRobert Flegalが初めて使ったとのことです。

記事はこのジャンルの歴史にも触れています。最初期の試みは1980年代半ばの英国人作家Fred Hollyの作品とされ、1990年代にはプログラマーのJacob Devenportが数十個のキューブによるモザイクを記録しました。その中には最初の両面作品も含まれます。本当の転機となったのは、フランスのストリートアーティスト、Invaderです。彼は2004年に9個のキューブで自作のスペースインベーダーを作り、このスタイルをRubikcubismと名付けました。330個のキューブで作った「モナ・リザ」は2020年のオークションで48万200ユーロで売れ、2022〜2023年にはブリュッセルのMIMA美術館で100点を超える彼のキューブ作品が展示されました。

特に気に入ったのは、著者が制作過程を説明する部分です。まず6色のピクセル図を作り、より複雑な作品では色の確認にPhotoshopを使うそうです。これは他のどのドット絵作家とも同じ道筋ですが、ここでの「ピクセル」はプラスチックのキューブです。限られたパレットで制作している人にとっては、見慣れた技法を別の角度から見直すきっかけになるでしょう。

出典：Habr

最近、とても長いAsepriteの詳細ガイドを読みました。ピクセル手描きゲームの作業フローを細かく分解したものです。自分にとって一番役立つ部分を書き留めておきます。特に「そのまま真似すれば失敗しにくい」デフォルト設定です。

キャンバス：キャラクターは32×32から、敵・アイテム・アイコンは16×16から始め、主人公は必要なら64×64に。編集時のデフォルト拡大は800%でいいですが、ゲーム内では1:1で描画すること。エディタで拡大されたキャンバスにだまされないように。

パレット：LospecのDB32を出発点にして、メインの色調が決まったら必要に応じて48〜64色に広げますが、1フレームで実際に使う色は16色以内に抑えます。パレットは「選べる色」であって「使い切る色」ではありません。プロジェクト全体で一つのメインパレットを共有するのが理想で、開発途中で丸ごと替えると既存アセットのスタイルが合わなくなります。

アニメーション：待機8 FPS、攻撃12 FPS、必殺技24 FPS。同じファイル内でもFrame Durationでフレームごとに長さを変えられます。

書き出し：スプライトシートは行ごとの配置にJSON Hashデータ、ファイル名は「キャラ名_動作名」でPNG + JSONをペアに。

エンジンに入れてから一番ハマりやすいのはフィルタです。Filter Modeは必ずPointにしてBilinearは使わない、ピクセル絵にテクスチャ圧縮も不要です。Unityなら公式のAseprite Importerで.asepriteファイルを直接読み込めるので、手動の書き出しを省けます。

もう一つ大いに共感したアドバイス：1日に10回以上繰り返している操作を見つけて、Luaで20〜30行の小さなスクリプトを週に一本書くこと。数か月で節約できる時間は想像以上です。

パレット選びはここから：https://lospec.com/palette-list

出典：Xmohe 独游魔盒

Raymond Schlitterの今春のPixelblogチュートリアルの一つは、私がずっと難しいと感じていたテーマを扱っています。『フロントミッション』風のターン制メカゲームを、アイソメトリックのグリッドに描くというものです。実際のプロジェクトではなく教育用のコンセプトで、彼が以前書いたアイソメトリック投影の記事も参照されています。

メカは彼がいつも描く64x64以上よりも小さい、およそ32x32ピクセルで描かれます。そのため、ディテールはごく少ないピクセルに抽象化しなければなりません。彼の方法は、各パーツをシンプルな幾何学図形から始め、まず胴体を作ることです。胴体は戦車の正面のように前方へ突き出し、肩は重厚で頭より高い位置に置かれます。頭は低くスマートに保ち、光学センサー用の明るいピクセルを一つか二つだけ入れます。足は安定性を考えて設計され、鷲の爪、かぎ爪、蹄から借用します。人間型の足はこのスタイルではぎこちなく見えるからです。アクセントのストライプは最後に、形を強める場所にだけ入れます。

三種類のユニットもスケッチされています。丸みのある歩兵、頭部に巨大な砲が融合した砲兵、鋭い三角形と逆関節の脚をもつ戦闘機です。それぞれに短い戦術メモが付いています。

環境のパートも同じくらい役立ちます。基本タイルは上面のひし形の角が2pxの32x32の立方体で、隣接するタイルはテクスチャが面一になるように一貫した順序で重ねなければなりません。自然タイルは土のタイルの上に、さまざまな草のテクスチャを載せることから始めます。水は通常の立方体のおよそ半分の高さで、ライン状のテクスチャを毎フレーム1pxずつ下にずらし、ハイライトを交互に変えて16フレームでループさせます。

私が一番好きなのは、繰り返しのタイルはマップ全体に並べたときにも良く見えなければならない、という指摘です。だからレイヤーの重ね方は自分でテストしてみる価値があります。

出典：SLYNYRD Pixelblog

Raymond SchlitterがSLYNYRDに書いた最新のPixelblogは、8ビット風の忍者プラットフォーマーを題材にした読み応えのある記事です。ひとつのアイデアを軸にゲームアセット一式を組み立てていく過程が好きな人には特におすすめです。彼はNinja Gaidenを手本にしていると明言しており、ハードウェアの制約には厳密にこだわらないものの、作業全体を通してNESのパレットを使っています。

まずはプレイヤーキャラクターからです。デザインの細部を入れる前に、ただのダミーテンプレートから始めてアニメーションを固めていきます。鮮やかな赤いスーツは、目立つことを優先して選ばれたそうです。動きは隼龍をモデルにしていて、キビキビした走り、壁登り、天井へのぶら下がり、宙返りジャンプ、空中斬りがあります。私が面白いと思ったのは、地上で攻撃するときはキャラクターが足を止める設計です。走りながら斬り続けられないので、戦闘に精度が求められるようになります。

次は敵キャラクターです。180度を五方向に砲口を振る回転砲台のヘリ、壁や天井に張り付くクモ型の戦車、ダメージを受け止める役目の遅いサイバーゴリラが登場します。ゴリラは指の付け根で歩く姿勢の資料を参考にして、まず単純な体の形を作って動きを確かめ、そのあとでロボット的なディテールを足しています。頭と胴体を一つのパーツにまとめているのも、あえてぎこちなさを出すためだそうです。

一番参考になったのは背景の環境づくりです。16x16のタイルを六つのレイヤーで使い、それぞれ違う速度でスクロールさせてパララックスを作っています。キャビネット式の投影を使い、奥行きの線はおよそ67.5度で伸びます。横に1ドット進むごとに縦に2ドット上がるので、段差がきれいに揃います。結果は320x180のモックアップで示されています。

もう一つ知っておくといいのは、今回のPixelblogでは、小さなチュートリアルのひとつである忍者のフレーム分解がPatreonの有料部分にあるという点です。メインのレッスンは無料で読めます。アセットと元データは別のパックとして販売されています。このスプライトを実際のプレイヤーコントローラーに組み込んでくれる人が出てくれたらいいなと思います。

出典：SLYNYRD

Habrに、カール・スヴェンソンによるブラウン管（CRT）がピクセルアートに与えた影響についての長い記事の翻訳が掲載されました。テーマには議論の余地がありますが、「CRTが全部ぼかしていた」という単純な説明に作者が異を唱えている点が面白いと感じました。

記事は、昔の絵師はCRTのにじみを計算に入れて描いていて、そのぼかしで粗いピクセルの輪郭が柔らかく見えた、というTikTokの動画を取り上げるところから始まります。スヴェンソンはそれが部分的には正しいと認めつつ、現代のブロック状のピクセルアートが不正確なノスタルジーになりがちだとも同意しています。ただ、古いハードウェアには検討すべき側面がもっと多いと指摘します。彼自身は今も古いCRTを定期的に使っているため、エミュレーターのCRTフィルターは実際の画面を正確に再現しないとして、オフにして使っているそうです。Commodore 1084Sモニターに映したCommodore 64の写真では、ガタついたピクセルの輪郭がCRTでもはっきり見えます。

続けて、C64の2本のゲームを比べています。Maniac Mansion（1987）は160×200の解像度で角張って見えますが、Mayhem in Monsterland（1993）は同じ固定16色パレットのまま、ディザリングとスムージングを使って、より高い解像度と色深度を模しています。これらの手法はCRTの性質、つまりわずかなぼかし、走査線、少しの色のにじみに頼っています。

作者にとってピクセルアートの黄金時代は16ビット期で、Amiga 500、SNES、Atari ST、メガドライブが挙げられています。Amigaは4096色のうち32色を表示でき、SilkwormやRuff'n'Tumbleなどのゲームのグラフィックは少しずつ向上していきました。CGAの色の工夫も取り上げ、ドットピッチの細かいVGAの画面では個々のピクセルがずっとよく見えると説明しています。

私にとっては、良い再確認になる記事でした。「レトロなぼかし」を加える前に、元の絵がどの画面に向けて描かれたのかを理解すべきだ、ということですね。

出典：Habr

Pixelblog 63では、Raymond Schlitterが横スクロールのシューティングゲームに取り組み、自然の風景の上で戦う第二次大戦機を中心にアセットを作っています。これまで縦スクロールのシューティングを扱ってきた後で、横方向の作品に初めて挑戦した回です。横シューでは弾幕が画面の上から下ではなく、左右に流れていきます。

作業は自機から始まります。自機が雰囲気と全体の解像度を決めるからです。およそ48x32ピクセルなら、アニメーションの負担を増やさずにディテールを入れる余地があります。機体はP-51ムスタングがモデルです。特に面白いと思ったのは、縦移動をピッチではなくロールで表現している点です。機首は水平のままにして弾が常にまっすぐ飛ぶようにし、この低い解像度では回転させるとピクセルがノイズのように固まりやすいからです。要するに、ロールならスプライトがすっきり見えて格好もつきます。

アニメーションは五つの向きで構成されます。中立のフレームが一つ、上下それぞれに二段階のロール、そして常に回り続けるプロペラです。プレイ感についての設計ルールも示されています。軽く押すとロールの1段目だけが出て、押し続けると完全に傾いた姿勢になり、離すと浅い姿勢を経て中立に戻ります。正確な反応が求められるジャンルでは、移動に慣性をつけないよう勧めています。

機体の周りを回る小さなオプションについても触れられています。ゲームプレイ上の役割だけでなく、画面上の存在感を高めるとも述べています。目が弾の軌道を追っている間も、自機の位置をつかみやすくなるというわけです。

敵はドイツ機と、フンメル自走砲です。制作の流れは、数色のブロックで作るテンプレート、次に本来の色と基本的なディテール、そのあとに光とこまかなディテール、最後に輪郭線という順番です。パレットを入れ替えることで、プロペラのアニメーションを複数の機体で使い回せます。動きに意味があるところだけ追加のフレームを使うという提案もあり、実践的な節約術の好例です。

出典：SLYNYRD

Asepriteチームは2026年7月22日、v1.3.18が新しい安定版になったと発表しました。v1.3.18-beta1以降に導入された新機能に加え、バグやクラッシュの修正も含まれており、aseprite.orgのアカウントからダウンロードできます。

本体リリースの主な変更点は、タイムラインのグループ内でタグを区切る新しい表示と、スプライトシートの書き出しに追加された「2のべき乗のシートサイズ」オプションです。スプライトを複製する際のタグやスライスのユーザーデータ（色やテキスト）のコピーに関する修正や、貼り付けた選択範囲の削除、ピクセル移動中にレイヤーを非表示にした場合などのクラッシュ修正も含まれています。

その後のポイントリリースは、タイルを扱う人にとって重要です。v1.3.18.4では、1ピクセルより大きいブラシのグリッドスナップ位置合わせを修正し、タイルマップレイヤー間でのタイルのコピー＆ペーストも改善されました。後のビルドでは、タイルマップを貼り付ける際のクラッシュと、選択範囲のあるスプライトをスプライトシートとして書き出した後のクラッシュが修正されています。アニメーションGIFの書き出しでは正しい89aヘッダーが使われるようになり、グレースケールのPNGファイルはグレースケールのパレットで読み込まれるようになりました。

スクリプト作成者向けにも更新があります。Lua APIのバージョンが41に上がり、Dialog:samerow{}と、新しいスプライトの保存イベント（saveとbeforesave）が追加されました。

こうしたリリースノートが好きなのは、日々の作業で不便に感じる部分、つまりグリッド、タイルマップ、書き出しがどこにあるかが分かるからです。タイルのコピーのバグのために更新を先延ばしにしていたなら、今回のバージョンを試してみる価値がありそうです。

出典：Asepriteブログ

ドット絵でキャラクターを描いていると、いずれ「スプライトシート」という言葉にぶつかります。noteでKeitaroさんが書いた初心者向けの解説記事が、仕組みを順番に整理していて参考になったので紹介します。

スプライトとは、ゲーム画面に表示する2D画像のことです。キャラクターや敵、アイテム、弾、エフェクトなどがこれにあたり、それらを1枚の大きな画像にまとめたものがスプライトシートです。歩行アニメーションなら、右足を出した絵、両足をそろえた絵、左足を出した絵を順番に素早く切り替えることで、歩いているように見せます。つまり動画ではなく、静止画の切り替えで動きを作っているわけです。

ゲーム側は大きな画像をそのまま表示するのではなく、座標で区切って必要なコマだけを切り出します。たとえば1コマが128×128pxで横に8枚並んでいるなら、0〜127px、128〜255pxというように表示領域をずらしていきます。記事では、横を向き（8方向）、縦を動作（歩行、攻撃、被弾、防御など）にして、8方向×7状態＝56フレームを管理する例も出てきます。

実際に使うときに大事なのは、フレームごとの基準位置をそろえることだと書かれています。足元の位置がコマごとに数ピクセルずれると、アニメーション中にキャラクターが上下にガタガタ揺れて見えてしまいます。背景を透明にしておくことも必須です。

最後に、スプライトシートは関連する絵を並べたもの、スプライトアトラスは描画効率のために複数の画像を1枚のテクスチャに詰めたもの、という違いも整理されていました。個人的には、「画像を作ることより、ゲームで正しく使える形にそろえることのほうが難しい」というまとめが印象に残りました。ドット絵を描く人にも、出力の段階で役立つ内容だと思います。

出典：note（Keitaro）

ドット絵の背景で地味に手間がかかるのが岩です。note の「おかか容疑者」さんが、金曜のピクセルニュースとして、Aseprite の拡張機能「Rock Generator for Aseprite」を紹介していました。

この拡張機能は itch.io で公開されていて、3D メッシュで岩を呼び出し、それをドット絵として使えるようにする、岩専用の制作ツールです。ダウンロードページを見るだけでもパラメータがかなり多く、作るものを岩に絞っているからこそ細かく調整できるのだろう、と記事では書かれています。

用意されているのは、10 種類の既成形状と 21 種類の既成構造、そして 72 種類のルック（見た目）だそうです。苔むした岩や雪景色の岩も作れるので、背景づくりに活用しやすそうだと感じました。UI は 27 言語に対応していて、日本語も使えるとのことです。

有料ツールで、2026 年 10 月時点では 4.99 米ドル（約 800 円）からの購入になります。ページ下部に体験版もありますが、中身は出力例の画像見本だけだったと記事にありました。購入前に確認したい人は、その点だけ覚えておくとよさそうです。

Blender などで岩のモデルを作って書き出し、Aseprite に読み込むことは以前からできます。それでも Aseprite の中だけでざっと作れるのは効率がよさそうで、背景のドット絵を量産したいときに役立つのではないでしょうか。私は岩の質感をどう描き分けるかでいつも迷うので、こうした補助ツールの話題は素直にうれしいです。

出典：note（おかか容疑者）

ドット絵の祭典「Pixel Art Park 9(PAP9)」が、2026年10月11日(日)にパシフィコ横浜で開かれます。練馬のゲーム開発会社イクシールの森田さんのnote記事で、今年の出展内容が紹介されていました。

イクシールは今回、スポンサー企業として参加します。PAP9に向けて開発した完全新作のオリジナルゲームを2タイトル出展するそうで、記事ではそのうちの一つ『マジカルスープ』が紹介されています。

遊び方は、「かくしあじ」を捕まえてスープを作るというもの。かくしあじには「ノーマル」「デンジャラス」「マジカル」の3種類があり、組み合わせによって作れるスープが変わります。遊んだ人には、作ったスープと同じ種類のシールがもらえるという仕掛けもあります。前回PAP8に出展した『JUSTおにぎり』の制作チームによる新作とのことです。

2つ目のゲームと新作のドット絵グッズについては、次回以降の記事で紹介される予定です。

ドット絵が好きな人が集まるイベントで、実際に遊べて手に取れるものがあるのは楽しそうです。ドット絵をゲームの中で動かすとどんな見え方になるのか、作り手と直接話せる機会でもありそうなので、近くの人はのぞいてみてはどうでしょうか。

出典：note(イクシール 森田)