スプライターたち：新たなる希望。

過去10年間、ビデオゲームの成長は新興テクノロジーのおかげで爆発的に拡大しました。当初、ゲームにあったのは素晴らしいゲームプレイとピクセルだけでした。しかし、ここ数年で3Dゲームが主流となり、そして今、HTML5の台頭により、スプライターたちが再びゲームにピクセルを注ぎ込む（push pixels）可能性があります！

開発者にとって、HTML5の最も魅力的な点は、インターネットからハンドヘルドデバイスまで、複数のプラットフォームで動作することです。それに伴い、アート面での制限もいくつか生じます。しかし、古典的なアプローチを好むアーティストにとって、このプラットフォームは成功への道を開いてくれるでしょう。具体的には、ピクセルアートを通じてです。

アーティストにとって、HTML5の最もクールな点は、ピクセルアートゲームが増える可能性です。この種のゲームには独特の魅力があります。ピクセルゲームの画像を見ると、美しい構図を構成する骨組みである「ビルディングブロック」が見えてきます。私は、少ない要素でより多くのものを表現できるアーティストを非常に尊敬しています。大規模で高解像度なゲームを見ていると、画像を構成する何千ものピクセルを忘れがちです。ピクセルアーティストは、ゼロからイメージを構築します。それを成し遂げるには、計画と先見の明、そして非常に強い色彩理論の知識が必要です。

ピクセルプッシュ（ドット打ち）の楽しみの一つは、背景やキャラクターを完成させたときに得られる達成感です。それはレゴセットを完成させたときの感覚に似ています。すべての小さなパーツが正しい場所に収まり、大きくクールなものが作り上げられる。ピクセルアートを試したことのないアーティストには、エクササイズとして強くお勧めします。それは人間性を鍛えてくれます（builds character）。

そして、私が興奮しているのがここからです。フルプロダクションのピクセルアートゲームが実現する可能性です。Pixel Jointのようなフォーラムには、長編ゲーム化されるのを待っているかのような作品であふれています。これらのアーティストが1つの画像を作るのにかける時間とこだわりで、フルレングスのゲームが作られたらと想像してみてください！それはLEGEN（ためてから）DARY（伝説的）なものになるでしょう。そしてこれも見てください：CanvasCycle。衝撃的です。カラーサイクルされた背景をサイドスクロールのアドベンチャーゲームに使えば、最高にエピックなものになるはずです！

最近のピクセルゲームの素晴らしい例は『Sword & Sworcery』です。このような新しいゲームをもっと見たいと思います。HTML5のクロスプラットフォームという利便性は、ゲーム開発の継続的な成長と、ピクセルアーティストへの需要の高まりを意味します。実のところ、HTML5を使えば本当に最高にクールな（badass）ピクセルゲームを作ることができます。ピクセルアートは低解像度のガラクタだと言う人もいるかもしれませんが、私にはそれがデジタル点描画であり、放っておけば消えてしまったかもしれない美しい芸術形式に見えます。

関連: Unity Asset Store — Unity プロジェクトに直接ドロップできる既製のアート、ツール、テンプレート.

Key Takeaways

• HTML5のクロスプラットフォーム展開こそが、ピクセルアートが再び繁栄している最大の理由です。一つのアセットセットが、ブラウザ、スマートフォン、タブレットのすべてで動作します。
• ピクセルアートは妥協して選ぶ制限ではなく、強い構図、色彩理論、そして計画性を強制する一つの規律（ディシプリン）です。
• canvas要素やCanvasCycleのようなツールは、3Dパイプラインでは実現が極めて困難なテクニック（パレットサイクリング、プロシージャル背景など）を可能にします。
• フルプロダクションのピクセルアートゲームは、小規模チームにとって到達可能な目標であり、絵空事ではありません。障壁となるのは技術ではなく、職人技と時間です。
• ピクセルプッシュを試したことがないアーティストの方は、ぜひエクササイズとして取り組んでください。それは人間性を鍛えてくれます。

Why HTML5 Changed the Math for Pixel Artists

HTML5のコンセプトはシンプルです。「一度書けば、どこでも動く」。その内部で働き者となっているのが<canvas>要素であり、これによりJavaScriptからビットマップに直接アクセスして、フレームごとに描画することが可能になります。ピクセルアーティストにとって、これは贈り物のようなものです。テクスチャパイプラインやシェーダーコンパイラと格闘する必要はなく、グリッドに色の長方形を描いていくだけです。それこそが、もともとピクセルアートが作られる方法そのものです。

2つの世界を比較してみましょう：

懸念点	従来の3Dパイプライン	HTML5 canvas / ピクセルパイプライン
アセット作成	モデリング、UVマッピング、リギング、テクスチャリング	固定ピクセルグリッドに描画し、スプライトシートを書き出し
ファイルサイズ	巨大なメッシュとテクスチャ	極小のPNGとインデックスパレット
スケーリング	解像度に依存し、LODが必要	Nearest-neighborスケーリングでエッジを鮮明に維持
ポート移植	プラットフォームごとのビルドとシェーダー	単一のコードベースで、多くのブラウザとデバイスに対応
アート方向性のリスク	汎用的（ありふれた見た目）になりやすい	デフォルトで個性的

とはいえ、トレードオフは存在します。Canvasレンダリングは多くの場合CPU依存であり、1フレームあたりに描画するスプライト数には慎重になる必要があります。また、デバイスのピクセル比（device pixel ratio）を適切に処理しなければ、丁寧に配置したピクセルが高DPI画面でぼやけてしまいます。解決策は、低解像度のバッキングキャンバスにレンダリングし、画像スムージングを無効にしてスケールアップすることです。これは、HTML5でピクセル開発を行う人が最終的に必ず学ぶテクニックです。

私たちの選択: Udemy Game Development Courses — Unity、Unreal、C++、C#、シェーダー プログラミングをカバーするオンデマンド コース.

The Craft Behind “Making More With Less”

ピクセルゲームの画像を見ると、美しい構図を構成する骨組みである「ビルディングブロック」が見えてきます。私は、少ない要素でより多くのものを表現できるアーティストを非常に尊敬しています。大規模で高解像度なゲームを見ていると、画像を構成する何千ものピクセルを忘れがちです。ピクセルアーティストは、ゼロからイメージを構築します。

それをやり遂げるには、計画と先見性、そして色彩理論に対する非常に強い感覚が必要です。優れたピクセルアートと単なるノイズを分ける、いくつかの実践的な原則を挙げます：

• パレットを制限すること。 古典的なハードウェアには厳しい制限がありました。たとえばNESは、同時に使用できる色が限られたセット内に制限されていました。制約があるからこそ、本当に効果的な色を選択せざるを得なくなります。
• 選択的なアウトラインを使用すること。 全体を黒いアウトラインで囲むと、スプライトが平面的になります。色付きの、途切れたアウトラインは、光と形を示唆します。
• 明度（バリュー）を制御すること。 スプライトを細めて見てください。シルエットが判別できなければ、いくらディテールを凝らしても救えません。
• グリッドを尊重すること。 1ピクセルずつ手作業でアンチエイリアスをかけるのはスキルですが、「あえてやらない」タイミングを知ることも同様にスキルです。
• タイル単位で考えること。 再利用可能なタイルで構築された背景は、制作コストが安く、アニメーション化も簡単です。

だからこそ、ピクセルアートは計画性が報われるのです。ポリゴン数でごまかして、弱い構図を隠すことはできません。すべてのピクセルがひとつの決定であり、視聴者はそのすべてを目にします。

カラーサイクリング：忘れられた超能力

そしてこれも見てください：CanvasCycle。衝撃的です。このカラーサイクリングによる背景をサイドスクロールのアドベンチャーで使ったら最高でしょう！

見たことがない方のために説明すると、カラーサイクリングとはピクセルを一切移動させない技法です。代わりに、インデックスパレット内のエントリを回転させることで、水が流れ、松明がちらつき、空が移り変わるように画像がアニメーションして見えます。これは8ビットおよび16ビット時代の定番であり、シーンを再描画するのではなく小さなパレットを書き換えるだけなので、動作コストが驚くほど低いのが特徴です。

CanvasCycleは、古典的なカラーサイクリング作品をHTML5キャンバスにレンダリングすることで、これをWeb上で復活させています。サイドスクロールアドベンチャーにおける魅力は明白です。全フレームを手作業でアニメーションさせるのに比べ、CPU負荷がほぼゼロで、生き生きとした背景を実現できる点です。HTML5ゲームを構築していて、パフォーマンスを落とさずに雰囲気を出したいなら、パレットサイクリングはツールボックスの中で最も活用されていない手法のひとつです。

関連: Amazon: Game Dev Books & Gear — ゲーム プログラミング書籍、メカニカル キーボード、モニター、開発デスク ハードウェア.

1枚の画像からフルゲームへ

ここからが私が興奮する部分です。フルプロダクションのピクセルアートゲームの可能性についてです。Pixel Jointのようなフォーラムには、長編ゲーム化されるのを待っているかのような作品が溢れています。アーティストが1枚の画像に注ぐ時間とこだわりで、フルレングスのゲームが作られたらと想像してみてください。それはまさにLEGEN（ためて）DARYな作品になるでしょう。

見事な静止画と、実際にリリースされたゲームの間にある溝こそが、多くのプロジェクトが挫折する場所です。その理由について正直に触れておく価値があります：

• ヒーロースプライト1体に数時間かかることがあり、フルアニメーションセットには数日かかります。 待機、歩行、攻撃、ダメージ、死亡――それぞれがひとつのパズルです。
• 背景の量が増えます。 サイドスクローラーには、パララックス（視差）レイヤー、トランジション、そしてシームレスに繋がるタイルが必要です。
• UIもまたアートです。 メニュー、フォント、アイコンのすべてに同様の配慮が必要であり、ピクセルフォントはそれ自体がひとつの専門分野です。
• 一貫性の維持が最も困難です。 何百ものアセットにわたって一貫したスタイルを保つことは、芸術的な問題であると同時に管理上の問題でもあります。

幸いなことに、HTML5はリリースへの「技術的」な障壁を下げてくれました。コンソールの開発キットもパブリッシャーも必要ありません。必要なのはキャンバスとゲームループ、そして完成させる規律だけです。だからこそ、ピクセルアートコミュニティとHTML5コミュニティは非常に相性がいいのです。どちらも、ゼロから物を作り上げることを好む人々が報われる世界だからです。

ショッピングの場合: Construct 3 — Web、モバイル、デスクトップにエクスポートできるブラウザベースのコード不要の HTML5 エンジン.

Sword & Sworcery から学ぶ

最近のピクセルゲームの素晴らしい例が Sword & Sworcery です。このような新しいゲームをもっと見てみたいと思います。この作品が教訓となるのはアートだけではなく、アート、音楽、そしてテンポがどのように連携しているかという点です。ピクセル的な美学は単なる装飾ではなく、ムードそのものなのです。強力なビジュアルアイデンティティを持つ小規模チームが、予算以上のスケール感を持つものを制作できることを証明しています。

研究される際は、限られたパレットをどう使っているか、シーンにどう「呼吸」をさせているか、そして画面を3D空間への窓ではなく、ひとつの構図としてどう扱っているかに注目してください。これらはあらゆるHTML5プロジェクトに活かせる教訓です。

駆け出しスプリッターへの実践的なアドバイス

ピクセルアートを試したことがないアーティストの方には、練習として強くおすすめします。精神が鍛えられます。挫折せずに始めるためのいくつかの方法を挙げます：

• 何か小さなものを再現すること。 お気に入りのスプライトを選び、1ピクセルずつ再構築してください。読むよりも模写するほうが多くのことを学べます。
• 固定サイズで作業すること。 16×16または32×32のキャンバスから始め、拡大してごまかすことは禁じ手としてください。
• パレットを研究すること。 Lospecのようなツールでは、Aseprite、GraphicsGale、Piskelに直接読み込めるコミュニティパレットが公開されています。
• 早めにアニメーションさせること。 たった2フレームの跳ねる動作であっても、静止した傑作より「読みやすさ」について多くのことを学べます。
• 投稿して批評を受けること。 Pixel Jointやピクセルアートのサブレディットのようなコミュニティは、あなたが必要としている「真実」を教えてくれます。

ピクセルを打つ楽しみのひとつは、背景やキャラクターを完成させたときに得られる達成感です。それはレゴセットを完成させる感覚に似ています。すべての小さなピースが正しい場所に収まり、大きくてクールなものが出来上がるのです。

これからの道

HTML5 のクロスプラットフォームとしての利便性は、ゲーム開発の継続的な成長とピクセルアーティストへの需要の高まりを意味します。実を言うと、HTML5 を使えば本当に最高にクールな（badassな）ピクセルゲームを作ることができるのです。ピクセルアートは低解像度のくだらないものだと言う人もいるかもしれませんが、私にはそれがデジタル点描であり、放っておけば消え去っていたかもしれない美しい芸術形式に見えます。

テクノロジーはもはやボトルネックではありません。ブラウザは高速で、canvas は高性能であり、Aseprite から Tiled、そしてそれらの上に構築されたゲームエンジンに至るツール群は成熟しています。残っているのは、常に重要であったことと同じです。つまり、職人技、忍耐、そして美しいものが現れるまで 1 ピクセルずつ配置し続ける意欲です。

Cheers!

Jacob Weberg は Massively Fun のデジタルアーティストです。彼はゲーム制作、ゲームプレイ、そして Easy Cheese を楽しんでいます。

よくある質問

「スプリッター（spriter）」とは何ですか？

スプリッターとは、スプライト（ゲーム内のキャラクター、オブジェクト、エフェクトに使用される、グリッドに沿った小さな 2D 画像）を作成するアーティストのことです。この用語は、スプライトがコンソールによって画面上を独立して移動させることができたハードウェアオブジェクトだった古典的なゲーム開発時代に由来しています。今日では、ゲーム向けのピクセルアートに携わるすべての人を指して広く使われています。

なぜ HTML5 はピクセルアートゲームにそれほど適しているのですか？

HTML5 の canvas 要素を使用すると、JavaScript でビットマップに直接描画できるようになり、これがピクセルアートの制作手法と自然に合致しています。1 つのコードベースがブラウザ、スマートフォン、タブレットで動作するという点と相まって、小規模なチームであってもプラットフォームごとに作り直すことなく、ピクセルゲームをあらゆる場所でリリースできることを意味します。また、アセットサイズが小さいため、ウェブ上での読み込み時間も高速になります。

カラーサイクリングとは何ですか？なぜ重要なのですか？

カラーサイクリングとは、ピクセルを移動させるのではなく、インデックス付きカラーパレットのエントリを回転させることで画像をアニメーションさせる手法です。8 ビットや 16 ビット時代のゲームで水や火、空の表現によく使われており、動作負荷が非常に低いのが特徴です。CanvasCycle は HTML5 canvas でこのテクニックを実演しており、雰囲気のある横スクロールの背景を作るための素晴らしいトリックです。

ピクセルアートを作るのに高価なソフトウェアが必要ですか？

いいえ。Piskel、GraphicsGale、Aseprite（有料ですが安価です）のような無料または低コストのツールで、ほとんどのスプリッターが必要とする機能はすべてカバーされています。ツールよりもはるかに重要なのは、色彩、構成、そして抑制のセンスです。名作とされるピクセルゲームの多くは、現代の 3D スイートよりもはるかにシンプルなツールで制作されました。

高解像度スクリーンでピクセルアートを鮮明に保つにはどうすればよいですか？

ゲームを低解像度のバッキングキャンバスにレンダリングし、画像スムージング（image smoothing）をオフにした状態で、そのキャンバスをディスプレイに合わせて拡大してください。これにより、ピクセルのエッジがぼやけることなく、くっきりとした状態で保持されます。デバイスピクセル比（device pixel ratio）を正しく処理することは、HTML5 のピクセル開発者が最初に直面する技術的なハードルの 1 つです。

ピクセルアートは単なるノスタルジーなのでしょうか？

全くそんなことはありません。ピクセルアートは、実利的なメリットを備えた意図的な美学です。小さいサイズでも視認性が高く、制作・配信コストが低く、似たような見た目の 3D ゲームが溢れる市場において独特の存在感を放ちます。多くの現代的なゲームが、制限があるからではなく、芸術的な理由からピクセルアートを選択しています。前にも述べた通り、それはデジタル点描なのです。