- 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) 모양을 그리는 이전 인터랙티브 포스트도 참고할 만함