ハクソク

世界を動かす技術を、日本語で。

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

279日前原文(muffinman.io)

概要

Space Invader Generator の制作背景と技術的プロセスを解説。 Creative Coding Amsterdam のコードチャレンジ参加作品。 手描きドット絵 から ベクター自動生成 への発想転換。 ピクセル化・色付け・アニメーション の実装方法。 カスタマイズ性 や 今後の展開 についても言及。

Space Invader Generatorの制作背景

  • Rayven という3Dレンダラーの開発中に発案
  • ツール作りに没頭しすぎて、本来の目的を見失うことが多かった経験
  • シンプルで短期間で作れる題材 としてSpace Invaderを選択
  • 3Dブロックで簡単にレンダリングでき、誰もが知る ゲームアイコン である点に着目
  • Creative Coding Amsterdam のコードチャレンジとして企画

コードチャレンジの流れ

  • アイデアが好評 で、ルールを決めてチャレンジ開始
  • 参加者の進捗や作品がSNSで共有され、盛り上がりを見せる
  • チャレンジ終了後、全提出作品をまとめて公開予定

ドット絵からベクター生成への発想転換

  • 最初は Aseprite で38体のインベーダーを手描き
  • 15x15ピクセルのグリッドを採用し、オリジナルよりやや大きめ
  • 手描きから 自動生成 に切り替えるため、パターンや幾何学的特徴を分析
  • ベクターで多様なインベーダーを生成 できるアルゴリズムを考案

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

  • グリッド を用意し、中央上寄りに本体（ポリゴン）を生成
  • 左右対称 を活かし、片側のみランダムな点を生成→反転コピー
  • サイドポイント同士を繋いで 多角形ボディ を作成

手足・触手・ツノの追加

  • 本体下部 から触手、 上部 からツノを生成
  • 触手は最下点からランダムな折れ線（ミッドライン）を描き、両側に幅を持たせて「太い線」に
  • 幅の変化・角度の調整 で自然なシルエットを実現
  • 片側だけ生成し、反転コピーで左右対称に
  • 中央触手 は本体底辺から生成し、他の触手と干渉しないように調整

ピクセル化の手法

  • 本体 ：ピクセルの中心がポリゴン内にあれば塗りつぶす
  • 触手・ツノ ：ピクセル中心がミッドライン近くにあれば塗る
    • 点同士が離れて隙間ができる場合は 線分分割 で補正
  • 目 ：事前に用意した複数パターンから選択し、中央付近に配置
    • 端に寄りすぎないようパディングを追加
    • 目と本体が重なる場合は「穴」として処理

色付けとカスタマイズ

  • OKLCHカラー空間 を利用し、明度を揃えつつ彩度・色相をランダム生成
  • 黄色～茶色（60～120度） は除外し、鮮やかな色のみ使用
  • CSS変数 としてl, c, hを保持し、UIやデバッグ表示で色調整を容易に
  • コントロール類やデバッグ用のピクセルも色分け可能

アニメーションの実装

  • オリジナルゲーム を参考に、触手・ツノのミッドラインをランダムに動かして2フレームアニメーション
  • 目も1ピクセル動かして表情を追加
  • デバッグ表示 では動きの軌跡や補助線も可視化

サイズ調整と今後の展開

  • グリッドサイズ を大きくすると進化・成長感が出るが、ベクター感が強調されすぎるため上限を設定
  • たまに「ラスボス感」や「ネタ枠」も誕生
  • 今後はさらなるカスタマイズや他作品との連携も検討中

まとめ

  • Space Invader Generator は、手描きドット絵の発想をベクター自動生成に昇華したプロジェクト
  • Creative Coding Amsterdam のコードチャレンジを通じて、多様な表現や技術的工夫が生まれた
  • ピクセル化・色付け・アニメーション の各工程で、シンプルかつ柔軟な手法を採用
  • カスタマイズ性・拡張性 も高く、今後の展開が期待される

Hackerたちの意見

ベクターを作ってラスタライズしたのには驚いたし、感心したよ。擬似ランダムカーネルウォークを使って、それをミラーリングしたらどれくらい上手くいくんだろうね。

└

これ、まさに俺がやったことだよ！グラデーションカラーの「侵略者」を生成するために、ランダムウォークを改良したバージョンだ。面白い形がいろいろできるよ。https://tinyurl.com/creagen-invader （デスクトップで見るのがベスト）URL短縮サービスを使ってごめん、元のURLが長すぎるんだ。これを生成するために自分で作ったウェブエディタを使ってる。まだ短いURLを作るのに取り組んでるところ。これとマフィンマンの解決策を含めるのは、Creative Coding Amsterdamのコーディングチャレンジの一環だった。興味がある人はぜひチェックしてみてね！https://cca.codes

この記事を読むのに、これまでで一番良いモバイル体験だった。

└

そうだね、「キャンバスを拾った」時の小さな喜びは最高だよ。

ページをリフレッシュすると、読んでいる間に生成される侵略者が変わるよ。

いいね。皮肉なことに、これは侵略者を作って地球を救うのと似てる…ハッカー流で、力任せのAIを使わずにね。アップボートする価値があるよ。

本当に楽しい読書だった。問題解決や執筆、プレゼンテーションに込められた思いに感謝！

わあ、結果がすごく良いね！https://muffinman.io/invaders/ この記事からは想像以上だよ。それに、oklchについても新たに知った。

関連情報、しかも00年代のウェブ伝説levitated.netからだよ: http://www.levitated.net/daily/levInvaderFractal.html (2003)

いいスペースインベーダーは、かっこよくて脅威に感じる見た目じゃないとね。ハサミを振り回してるとさらにポイントアップ！

自分もスペースインベーダー生成器を作ったよ。ライブ版はこちら: https://abetusk.github.io/iao/vadfad_1gen/ ソース: https://github.com/abetusk/iao/tree/main/vadfad_1gen ジャレッド・ターベルにインスパイアされたんだ（levitated.netの別のコメントからリンクされてる）。意外と簡単にいい結果が出せたよ。主要な要素は目、左右対称、あとは小さな長方形内のランダムなピクセルだったと思う。

└

UIとランダムなカラーパレットが好き！素晴らしい作品だね。

かっこいいね。世界中からこれを集めてるよ: https://www.space-invaders.com/flashinvaders/