▲

스페이스 인베이더 그리기 방법

 (muffinman.io)
1P by GN⁺ 3일전 | ★ favorite | 댓글 1개
  • Space Invader Generator를 소개하며, 다양한 픽셀 아트 인베이더를 자동으로 생성하는 원리를 설명함
  • 간단한 벡터 다각형 바디 생성과 대칭, 임의 포인트, 미러링 등 기하학적 규칙을 활용한 구조임
  • 팔, 촉수, 뿔 등 팔다리 요소 역시 랜덤성과 기하학적 방법으로 확장하며, 쉽고 창의적인 변형 가능성 제공함
  • 벡터 형태에서 픽셀 변환 및 컬러 적용, 눈 추가 등으로 친숙한 게임 그래픽 완성함
  • 전체 제작 과정과 코드 구현 로직을 공개하여, 학습자와 개발자가 직접 커스터마이즈나 실습 가능함

개요

Space Invader Generator는 픽셀 아트 스타일의 인베이더를 누구나 쉽게 무작위로 만들어볼 수 있는 도구임. 이 글에서는 그 동작 원리와, 창의적 랜덤 생성 과정을 애니메이션 및 예시와 함께 설명함. 인베이더의 기하학적 구조, 벡터-픽셀 변환, 컬러 적용 등 디자인과 코딩을 결합한 접근 방식이 특징임.

시작 배경

  • Rayven이라는 3D 렌더러 툴을 개발하다가 실제 창작 결과물을 만드는 일의 중요성을 깨달음
  • 간단하고 재미있는 결과로 Space Invader처럼 직관적이고 쉽게 인식되는 대상을 선정함
  • Vector 기반 3D 렌더링으로 여러 클래식 인베이더를 그려보고, 무작위 생성기로 확장하면 재미있을 것이라는 생각에서 제작 시작함
  • 해당 제작 경험을 Creative Coding Amsterdam의 코드 챌린지에도 공유함

코드 챌린지

  • Space Invaders 코드 챌린지는 많은 창작자와 개발자들의 관심을 이끌었음
  • 다양한 구현과 결과물을 모으는 중이며, 개발 관련 커뮤니티에서 활발히 공유되고 있음

스케치에서 픽셀로

  • 처음에는 종이에 손으로 낙서 및 스케치를 하며 인베이더 구조를 분석함
  • Aseprite 툴로 15x15 픽셀 그리드에 여러 인베이더 형태를 디지털로 그려봄
  • 공통적인 기하학적 패턴(중앙 축 대칭, 단순 다각형 바디 등)을 발견함
  • 픽셀아트와 벡터 그래픽의 장점을 결합하여, 대부분 직접 그린 디자인을 자동으로 생성하는 기능 구현에 성공함
  • 세부 구현 내용은 GitHub 저장소에서 참고 가능함

인베이더 생성 과정

중앙 찾기

  • 모든 조작의 기준점인 중앙 포인트를 설정함
  • 촉수는 하단에 생성되어, 메인 바디는 약간 위로 배치함
  • 전체 대칭을 활용하여, 한쪽만 그리고 나중에 좌우 반전하여 완성함

상단과 하단 정의

  • 바디 측면을 설계할 때, 상단·하단 포인트를 랜덤으로 선택
  • 대칭 축에 따라 양쪽 형태가 동일하게 유지됨

왼쪽 측면 그리기

  • 바디 왼편에 1~5개 포인트를 무작위로 배치
  • 단순 볼록 다각형에서 자유롭게 변형하여 다양한 결과 생성
  • 라인 중첩 현상은 픽셀화 과정에서 자연스럽게 보정됨

오른쪽 반사

  • 왼쪽 정점 데이터를 사용해, 자동으로 우측 반사 생성

바디 다각형 연결

  • 포인트들을 연결해 벡터 다각형 바디 완성
  • 이 기반 위에 팔다리를 추가하면 인베이더 핵심 형태가 형성됨

팔다리 추가

촉수와 뿔 생성 방식

  • 하단 촉수(tentacle), 상단 뿔(horn)을 각각 생성. 동일한 방법에 위치·각도만 다르게 적용함

촉수 루트 찾기

  • 바디 가장 하단의 포인트를 기준으로 왼쪽 촉수부터 랜덤 생성

중심선 스케치

  • 랜덤 포인트를 이용해 폴리라인(중심선) 을 만듦
  • 촉수 길이·모양 다각도로 변형 가능

두께 적용 (fat line)

  • 중심선만으론 얇아서, 양옆에 포인트 생성해 굵은 촉수 모양 구현
  • 바디 근처일수록 굵고, 끝으로 갈수록 얇아짐 (테이퍼 효과)
  • 각이 급한 부분은 선폭을 줄여서 자연스러운 접촉부 표현
  • 폭 조절을 위해 easing 파라미터 사용

촉수 완성

  • 양쪽 끝점을 연결하여 두꺼운 촉수 완성

다수 촉수 및 뿔 확장

  • 같은 방식으로 좌우대칭, 중앙 촉수, 상단 뿔 등 확장 가능
  • 중앙 촉수의 경우, 이미 그려진 측면 촉수와 충돌을 피하도록 조기 종료
  • 뿔은 공간이 겹치지 않게 각도 범위를 좁히고 좌우로 배치

벡터에서 픽셀로 변환

바디 픽셀화

  • 각 픽셀 중앙이 벡터 다각형 내부에 있는지 여부로 바디 픽셀 지정
  • 정확도보단 간단함과 실행 속도를 우선함

팔다리 픽셀화

  • 촉수와 뿔은 얇아서 중앙이 내부에 있지 않은 경우가 많음
  • 포인트와 인접한 픽셀 중심까지 거리를 확인하여 픽셀 할당
  • mid-line 세분화(line splitting)로 촉수 자연스러움 보완 가능

눈 추가

  • 여러 미리 준비된 눈 세트 중 랜덤 선택
  • 바디 중앙 부근에 위치시키고, 바깥쪽엔 범퍼 픽셀로 padding 적용
  • 겹치는 픽셀은 자동으로 비워서 구멍처럼 표현

컬러 적용

컬러 생성 로직

  • OKLCH 컬러 스페이스 사용
  • HSL 대비 일정한 밝기(lightness) 유지, 다양한 생동감 있는 컬러 배색 가능
  • 밝기 하나로 고정, 나머지 두 파라미터를 랜덤으로 지정하여 다양한 변형 실현
  • 연속성, 시각적 일관성 있는 인베이더 인상 제공

CSS 변형 활용

  • CSS 변수로 컬러 조절 가능
  • UI 요소 대비, 디버그 모드 등 각 상황에 맞춰 명도·채도 변화 적용

애니메이션 구현

  • 원작 게임처럼 2프레임의 단순 애니메이션으로 촉수, 뿔, 눈에 움직임 부여
  • 팔다리 mid-line을 복제 후 무작위로 shift하여 변형된 프레임 생성
  • 눈 역시 한 픽셀 이동시켜 생동감 향상

크기 조정

  • 그리드 크기를 키우면 인베이더가 점점 더 섬세·복잡해짐
  • 너무 크면 벡터의추상이 강조되어 본래의 인베이더 느낌이 줄어듦
  • 31x31 픽셀까지 제한, 숨겨진 옵션으로 최대 51x51까지 가능

결론

  • 무한히 다양한 컬러풀 인베이더를 자동 생성하는 제너레이터 완성
  • 제작 및 포스트 과정에서 배움, 재미, 창작의 자유로움 실현
  • 코드와 원리가 모두 공개되어 실습, 실험, 커스터마이즈에 용이함

제작 후기

  • 포스트 내 JavaScript 코드로 학습·참고 용이하게 비축함
  • Anime.js 및 여러 외부 의존성 활용해 애니메이션 설계, TypeScript로 구현
  • 별도 디버그 모드 및 step 옵션으로 생성 과정 직접 탐색 가능

보너스 - 로프 그리기 포스트

  • SVG와 자바스크립트로 로프(rope) 모양을 그리는 이전 인터랙티브 포스트도 참고할 만함
▲
GN⁺ 3일전  [-]
Hacker News 의견

  • 나도 space invader 생성기를 만들어 봄
    실행 버전이 있고, 소스코드도 공개함
    Jared Tarbell에게서 영감 얻음
    결과물이 생각보다 쉽게 좋아짐을 경험함
    핵심은 눈, 양측 대칭, 그리고 작은 사각형 내에 무작위 픽셀이었음

    • Jared Tarbell에게 영감을 받았다는 의견, 나 역시 컴퓨터를 처음 만지던 시절에 그의 작품들이 큰 의미였음
      levitated.net와 이후의 complexification.net도 인터넷 초창기의 보석 같은 사이트였음
      아쉽게도 Flash(Levitated)와 Java(Complexification) 지원이 중단되어 예제 대부분이 동작하지 않음
      그래도 Complexification쪽은 Processing .pde 소스를 Processing 에디터에 붙여넣으면 실행 가능함

    • UI와 무작위 색상 팔레트 모두 마음에 듬
      정말 멋진 결과물임

  • 이 글은 모바일에서 읽으면서 느꼈던 최고의 경험 중 하나였음

    • 스크롤을 내릴 때마다 캔버스가 따라 올라오던 그 작은 기쁨, 정말 인상적이었음

  • 결과물이 정말 좋아서 놀랐음
    muffinman.io/invaders에서 확인 가능함
    본문만 보고 기대했던 것 이상임
    그리고 오늘 oklch에 대해 알게 됨

    • 직접 실험해 보니 결과물이 생각보다 잘 나와서 나도 놀랐었음
      다듬고 UI를 추가하니 훨씬 괜찮아졌다고 느낌
      OKLCH는 정말 큰 업그레이드임
      코드로 색상을 다루는 게 어려웠는데, 이게 확실히 많이 편해짐
      나 자신은 HSLuv도 좋아하지만 아쉽게도 브라우저에서 네이티브 지원을 안 하고 있음

  • 재밌음
    역설적으로 행성(지구)를 invader를 만들어서 구하는 느낌, 바로 brute force AI 없이도 즐거운 해커식 방식임
    이 프로젝트는 충분히 추천할 만함

    • 고마움, AI가 이런 프로젝트의 재미를 다 빼앗아가는 느낌임
      창작 과정의 마법은 결국 그런 수작업 자체에 있는 것임

  • 이미지를 상단에 고정해서 우리가 스크롤할 때 무슨 얘기를 하는지 계속 보여주는 게 정말 멋짐
    평소엔 스크롤에 따라 페이지가 화려하게 바뀌는 걸 별로 안 좋아하는 편이지만 이 구성은 예외적임

  • 멋짐
    전 세계에서 space invader들을 수집하고 있음
    space-invaders.com/flashinvaders도 참고할 만함

  • 관련된 것으로 2000년대 웹 레전드 levitated.net에서 만든 levInvaderFractal (2003)이 있음

  • 정말 즐겁게 읽음
    문제 해결 방식과 글 자체, 프레젠테이션까지 모든 것에 정성이 들어간 게 느껴짐

  • 좋은 space invader는 위압감 있고 위험해 보여야 한다고 생각함
    집게발을 흔들면 점수 추가임

  • 아주 흥미로웠음
    8비트 감성과 레트로 컴퓨팅에 애정 있는 사람에게 특히 더 재밌는 글임
    읽으면서 문득 든 생각인데, 이건 결국 ‘모든 걸 게(크랩)로 진화시키려는 모성 자연의 욕망’이 디지털로 구현된 모습이 아닐까 함
    space invader의 대칭성과 다양한 다리, 집게와 같은 구조 때문에, 결국 모든 invader는 게처럼 생김
    혹시 우리가 Matrix에서 어떤 일치점을 보고 있는 건 아닐까 하는 상상도 해봄

답변달기