スペースインベーダーの描き方

• Space Invader Generatorを紹介し、さまざまなピクセルアートのインベーダーを自動生成する仕組みを説明
• シンプルなベクターの多角形ボディ生成と、対称性、ランダムなポイント、ミラーリングなどの幾何学的ルールを活用した構造
• 腕、触手、角などの手足要素もランダム性と幾何学的手法で拡張し、簡単で創造的な変形の可能性を提供
• ベクター形状からピクセル変換し、色の適用や目の追加によって親しみやすいゲームグラフィックを完成
• 制作全体の工程とコード実装ロジックを公開しており、学習者や開発者が直接カスタマイズや実習を行える

---

概要

Space Invader Generatorは、ピクセルアートスタイルのインベーダーを誰でも簡単にランダム生成できるツールです。この記事では、その動作原理と、創造的なランダム生成の過程をアニメーションや例とともに説明します。インベーダーの幾何学的構造、ベクターからピクセルへの変換、色の適用など、デザインとコーディングを組み合わせたアプローチが特徴です。

始まった背景

• Rayvenという3Dレンダラーツールを開発する中で、実際に創作物を生み出すことの重要性を実感
• シンプルで楽しい成果物として、Space Invaderのような直感的で認識しやすい対象を選定
• ベクターベースの3Dレンダリングで複数のクラシックなインベーダーを描いてみて、ランダム生成器に拡張すると面白そうだと思い制作を開始
• この制作経験をCreative Coding Amsterdamのコードチャレンジでも共有

コードチャレンジ

• Space Invadersコードチャレンジは、多くのクリエイターと開発者の関心を集めた
• さまざまな実装や成果物が集まりつつあり、開発関連コミュニティで活発に共有されている

スケッチからピクセルへ

• 最初は紙に手書きで落書きやスケッチをしながら、インベーダーの構造を分析
• Asepriteツールで15x15ピクセルグリッド上に複数のインベーダー形状をデジタルで描いてみた
• 共通する幾何学的パターン（中央軸対称、シンプルな多角形ボディなど）を発見
• ピクセルアートとベクターグラフィックスの長所を組み合わせ、ほとんどが手描きデザインのように見えるものを自動生成する機能の実装に成功
• 詳細な実装内容はGitHubリポジトリで確認可能

インベーダー生成プロセス

中央を見つける

• すべての操作の基準点となる中央ポイントを設定
• 触手は下部に生成されるため、メインボディはやや上に配置
• 全体の対称性を活用し、片側だけを描いて後から左右反転して完成させる

上側と下側を定義

• ボディ側面を設計する際、上端・下端ポイントをランダムに選択
• 対称軸に従って両側の形状が同一に保たれる

左側面を描く

• ボディ左側に1〜5個のポイントをランダム配置
• シンプルな凸多角形から自由に変形して多様な結果を生成
• 線の重なりはピクセル化の過程で自然に補正される

右側に反映

• 左側の頂点データを使い、自動的に右側の反転形状を生成

ボディ多角形を接続

• ポイント同士をつないでベクター多角形ボディを完成
• この土台の上に手足を追加すると、インベーダーの核となる形ができあがる

手足を追加

触手と角の生成方法

• 下部の触手（tentacle）と上部の角（horn）をそれぞれ生成し、同じ方法を位置と角度だけ変えて適用

触手のルートを探す

• ボディ最下部のポイントを基準に、左側の触手からランダム生成

中心線をスケッチ

• ランダムなポイントを使って**ポリライン（中心線）**を作成
• 触手の長さや形状をさまざまな角度で変形できる

太さを適用（fat line）

• 中心線だけでは細すぎるため、両側にポイントを生成して太い触手形状を実現
• ボディに近いほど太く、先端に行くほど細くなる（テーパー効果）
• 角度のきつい部分は線幅を狭めて自然な接続部を表現
• 幅の調整にはeasingパラメータを使用

触手を完成

• 両端のポイントを接続して太い触手を完成

複数の触手と角への拡張

• 同じ方法で左右対称、中央触手、上部の角などにも拡張可能
• 中央触手の場合は、すでに描かれた側面触手との衝突を避けるため早期終了する
• 角は空間が重ならないよう角度範囲を狭め、左右に配置する

ベクターからピクセルへの変換

ボディのピクセル化

• 各ピクセルの中心がベクター多角形の内側にあるかどうかでボディピクセルを決定
• 正確さよりもシンプルさと実行速度を優先

手足のピクセル化

• 触手や角は細いため、中心が内側に入らないことが多い
• ポイントと隣接ピクセル中心までの距離を確認してピクセルを割り当てる
• mid-lineの細分化（line splitting）で触手の自然さをさらに補える

目を追加

• 複数の事前に用意された目のセットからランダムに選択
• ボディ中央付近に配置し、外側にはバンパーピクセルでpaddingを適用
• 重なるピクセルは自動的に空けて、穴のように表現する

色を適用

色生成ロジック

• OKLCHカラースペースを使用
• HSLと比べて一定の明るさ（lightness）を保ちつつ、多彩で鮮やかな配色が可能
• 明るさを1つに固定し、残り2つのパラメータをランダム指定して多様な変化を実現
• 連続性と視覚的一貫性のあるインベーダーの印象を提供

CSSのバリエーション活用

• CSS変数で色を調整可能
• UI要素との対比やデバッグモードなど、各状況に応じて明度・彩度の変化を適用

アニメーション実装

• 原作ゲームのように2フレームのシンプルなアニメーションで触手、角、目に動きを与える
• 手足のmid-lineを複製した後、ランダムにshiftして変形フレームを生成
• 目も1ピクセル移動させて生き生きとした印象を高める

サイズ調整

• グリッドサイズを大きくすると、インベーダーはより精巧で複雑になる
• 大きくしすぎるとベクターの抽象性が強調され、本来のインベーダーらしさが薄れる
• 31x31ピクセルまでに制限し、隠しオプションで最大51x51まで可能

結論

• 無限に多様なカラフルなインベーダーを自動生成するジェネレーターが完成
• 制作と投稿の過程を通じて、学び、楽しさ、創作の自由を実現
• コードと原理がすべて公開されており、実習、実験、カスタマイズがしやすい

制作後記

• 投稿内のJavaScriptコードを学習・参考しやすい形で蓄積
• Anime.jsや複数の外部依存関係を活用してアニメーションを設計し、TypeScriptで実装
• 専用のデバッグモードやstepオプションで生成過程を直接探索可能

ボーナス - ロープを描く投稿

• SVGとJavaScriptでロープ（rope）形状を描く以前のインタラクティブな投稿も参考になる