설명서

0. 시작하기

NEON PRECINCT 는 벨트스크롤 액션 게임을 만드는 엔진과 도구입니다. 모두 HTML 파일이라 브라우저로 열면 바로 돌아가고, 설치할 것도 인터넷도 필요 없습니다. 완성한 게임도 HTML 파일 하나로 나와, 받은 사람이 그 파일만 열면 됩니다.

묶음 구성

만드는 수준 고르기

처음이라면 1번부터 하십시오. 각 장은 앞 장을 해 봤다고 보고 씁니다.

모든 도구 공통

1. 초간단 제작

만드는 것 — 견본(백귀야행)의 캐릭터 · 아이템 · 장애물을 그대로 쓰고, 스테이지 하나를 새로 만들어 게임 파일 하나로 굽습니다. 그림을 준비하지 않아도 됩니다.

스테이지 만들기 — Stage Forge

2캐릭터 목록을 불러옵니다

5번 웨이브 칸 맨 위의 ＋ 캐릭터 목록 불러오기 를 누르고 견본의 hyakki-yako.game.json 을 고릅니다. 「목록 7명」이 나오면 됩니다. 이 캐릭터들이 적으로 나오고, 해 볼 때는 견본의 주인공(노부츠나)이 됩니다.

3이름을 정합니다

2번 기본 정보 의 스테이지 이름 에 「나의 첫 스테이지」처럼 적습니다. 한글 이름도 됩니다 — id 는 겹치지 않게 저절로 만들어집니다.

해 보고 저장하기

5엔진에서 해 봅니다

아래 막대의 ▶ 엔진에서 해 보기 를 누르면 새 탭에서 이 스테이지가 곧바로 시작됩니다. 고친 뒤 다시 누르면 같은 탭에서 새로 시작합니다.

새 탭이 열리지 않으면 브라우저의 팝업 차단을 풀어 주십시오. 도구와 같은 묶음의 engine/ 폴더에 엔진이 있어야 합니다.

게임으로 굽기 — Game Forge

7견본 게임을 불러옵니다

tools/game-forge.html 을 열고 1번 게임 정보 의 ＋ 만들던 게임 JSON 불러오기 (이어서 편집) 로 견본의 hyakki-yako.game.json 을 고릅니다. 캐릭터 · 아이템 · 장애물 · 연출이 모두 들어옵니다.

같은 칸의 게임 제목 을 「나의 첫 게임」으로 바꿉니다. 이 제목이 게임 파일 이름과 브라우저 탭 제목에 쓰입니다.

8스테이지를 내 것으로 바꿉니다

3번 스테이지 순서 에서 견본 스테이지 둘을 × 로 빼고, ＋ 스테이지 JSON 추가 로 6단계에서 저장한 파일을 넣습니다. 스테이지를 여러 개 넣으면 위에서 아래 순서로 진행합니다.

여기서도 아래 막대의 ▶ 엔진에서 해 보기 로 게임 전체를 타이틀부터 해 볼 수 있습니다.

9굽습니다

10번 단일 파일로 굽기 에서 ＋ neon-precinct.html 선택 으로 묶음의 engine/neon-precinct.html 을 고르고(처음 한 번만 — 다음부터는 기억합니다), 단일 파일 굽기 를 누릅니다. 「나의_첫_게임.html」이 내려받아집니다. 이 파일 하나를 열면 게임이 시작됩니다.

2. 심플 제작

만드는 것 — 내 그림으로 주인공 하나와 적 하나, 내 배경으로 스테이지 둘을 만들고, 제목 · 타이틀 그림 · 음악 · 크레딧을 넣어 새 게임으로 굽습니다. 이 장의 예시는 OVERTIME 의 오피서 · 크래셔 · 1 · 2스테이지 그림을 「내가 준비한 그림」으로 삼았습니다.

그림 준비 · 파일 이름

캐릭터 그림은 동작 한 장면에 PNG 한 장입니다. Sprite Forge 는 파일 이름에 든 영어 낱말로 어느 동작인지 알아냅니다. 파일 이름 앞에는 캐릭터 이름을 붙이고, 같은 동작이 여러 장이면 뒤에 번호를 붙이십시오 — 예) officer_walk_1.png · officer_walk_2.png. 앞부분(officer)이 캐릭터 이름이 됩니다.

그림이 없는 동작은 엔진이 비슷한 동작으로 대신합니다(예: 점프 그림이 없으면 서 있기). 예시의 오피서는 14장(서기 2 · 걷기 4 · 손 공격 4 · 발 공격 1 · 점프 · 맞기 · 쓰러짐), 크래셔는 9장입니다. 배경은 투명한 PNG 가 가장 좋고, 단색 배경이면 Sprite Forge 가 지워 줍니다.

캐릭터 만들기 — Sprite Forge

1그림을 넣습니다

tools/sprite-forge.html 을 열고 1번 PNG 여러 장 선택 으로 그림을 한꺼번에 고릅니다.

배경이 단색이면 2번 배경 제거 가 나타나 모서리 색으로 지웁니다. 투명한 그림이면 이 칸은 건너뜁니다.

2정렬과 배정을 확인합니다

3번 정렬과 배정 에서 그림마다 발끝을 맞춰 같은 크기 칸에 넣고, 파일 이름으로 동작을 배정합니다. 칸 아래 선택 칸에서 배정을 고칠 수 있습니다.

• 목표 키 (px) — 게임 속 캐릭터 키. 주인공과 적의 키를 여기서 맞춥니다
• 기본 방향 — 그림 속 캐릭터가 바라보는 쪽

3캐릭터 JSON 으로 저장합니다

4번 완성된 시트 를 확인하고 아래 막대의 캐릭터 JSON 저장 을 누릅니다. officer.character.json 이 내려받아집니다.

5번 도트 정리 는 생성 그림을 도트 그림처럼 다듬을 때 씁니다. 심플 제작에서는 건너뛰어도 됩니다.

캐릭터 다듬기 — Character Forge

4불러와서 확인합니다

tools/character-forge.html 을 열고 1번에 방금 저장한 캐릭터 JSON 을 넣습니다. Sprite Forge 가 정한 칸 · 동작 · 기술(손 공격 · 발 공격)이 그대로 들어오고, 체력 · 속도는 기본값으로 시작합니다.

5발 위치 · 동작 · 공격을 봅니다

대부분 그대로 두어도 됩니다. 어색하면 여기서 고칩니다.

• 3 앵커와 방향 — 캐릭터의 발 밑 점. 자동으로 잡히며, 캐릭터가 떠 보이거나 묻히면 옮깁니다
• 5 동작 배정 — 동작마다 쓰는 칸과 순서
• 6 공격 판정값 — 기술마다 준비 · 유효 · 회복 시간(틀), 피해, 사거리. 기본값으로 시작해 해 보며 맞춥니다
• 이름과 능력치(3번 칸 안) — 표시 이름 · 체력 · 이동 속도. 예시의 크래셔는 체력만 160 으로 올렸습니다

6시험장에서 해 보고 저장합니다

아래 막대의 ▶ 엔진에서 해 보기 를 누르면 이 캐릭터를 주인공과 적으로 함께 세운 시험장이 열립니다. 공격이 닿는지, 맞고 쓰러지는지 봅니다. 고친 뒤 캐릭터 JSON 저장.

적도 같은 방법으로 만듭니다. 예시의 크래셔는 낱장 9장(서기 · 걷기 4 · 손 공격 2 · 맞기 · 쓰러짐)입니다.

내 배경으로 스테이지 — Stage Forge

7바닥선부터 적습니다

2번 기본 정보 에 스테이지 이름을 적고, 바닥 위쪽 · 바닥 아래쪽 에 배경 그림 속 길의 위아래 높이를 적습니다(화면 세로 540 기준 — 예시는 340 · 512). 캐릭터는 이 사이에서 위아래로 움직입니다. 그림을 넣기 전에 적으면 그림이 이 선에 맞춰 놓입니다.

8바닥 · 배경 그림을 넣습니다

4번 바닥과 배경 이미지 에서 ＋ 바닥 이미지 와 ＋ 배경 레이어 추가 로 그림을 넣고, 그림으로 다 채웠다면 절차 배경 켜짐 을 눌러 끕니다. 둘 다 가로로 이어지는 그림이 좋습니다(자동으로 이어 붙습니다).

9적을 내 캐릭터로 바꿉니다

5번 웨이브 의 ＋ 캐릭터 목록 불러오기 로 내 캐릭터 JSON 들(주인공 · 적)을 한꺼번에 고르고, 적 그룹마다 캐릭터 칸에서 적을 고릅니다.

▶ 엔진에서 해 보기 로 확인하고 스테이지 저장. 둘째 스테이지도 같은 방법으로 만듭니다.

새 게임으로 묶기 — Game Forge

10캐릭터와 역할

tools/game-forge.html 을 새로 열고 1번 게임 제목 을 적습니다. 2번 ＋ 캐릭터 JSON 추가 로 주인공 · 적을 넣고, 캐릭터마다 히어로 · 잡몹 · 보스 를 눌러 역할을 정합니다. 한 캐릭터가 여러 역을 겸해도 됩니다.

11스테이지 · 제목 · 연출

• 3 스테이지 순서 — ＋ 스테이지 JSON 추가 로 두 스테이지를 넣습니다. 위에서 아래 순서로 진행합니다
• 5 제목 · 배포 — 부제. 타이틀 그림에 제목이 이미 그려져 있으면 「타이틀 화면에 제목 글자를 그리지 않기」
• 6 연출 — ＋ 타이틀 배경 이미지, ＋ 기본 배경음악 파일, 맨 아래 크레딧(한 줄에 하나, 앞에 # 를 붙이면 큰 글씨). 오프닝 · 엔딩은 넣지 않으면 건너뜁니다

12해 보고 굽습니다

▶ 엔진에서 해 보기 로 타이틀부터 확인한 뒤, 10번에서 엔진 파일을 고르고 단일 파일 굽기.

남에게 줄 때는 5번 배포용으로 굽기 (제작용 항목 숨김) 을 켜고 구우십시오. 끄고 구우면 위 그림처럼 제작용 시작 문구(「PRESS ENTER / START」)와 개발용 단추가 남습니다. 켜면 「Enter 로 시작」, 처음 안내 · 일시정지 등 플레이어용 화면이 됩니다.

3. 본격 제작

만드는 것 — 백귀야행 수준의 게임. 보스마다 다른 공략, 기술 이펙트, 오프닝 · 엔딩 컷신, 꾸민 화면 표시, 난이도까지. 이 장은 견본(백귀야행)을 뜯어보며 기능마다 어디서 무엇을 바꾸는지 설명합니다. 칸 하나하나의 뜻과 수치는 참고 문서에 있고, 절마다 해당 칸으로 이어 두었습니다.

견본에서 시작

1. samples/hyakki-yako/ 폴더를 통째로 복사해 이름을 바꿉니다. 원본 견본은 남겨 두고 비교하며 고치십시오.
2. 게임 전체는 Game Forge 에서 hyakki-yako.game.json 을 엽니다. 캐릭터 · 스테이지 하나씩은 edit/ 의 파일을 Character · Stage Forge 에서 엽니다.
3. 고친 캐릭터는 Game Forge 2번에 같은 id 로 다시 넣으면 바뀝니다(역할은 그대로). 스테이지는 3번에서 × 로 빼고 다시 넣습니다.
4. 그림 · 소리 파일을 가져다 쓸 때는 source/assets/ 에서 꺼냅니다. 쓰는 범위는 견본 README 의 「쓰는 범위」.

보스 설계

보스는 등급 · 행동 스타일 · 배치 옵션 세 겹으로 만듭니다. 등급(보스 · 최종)이 체력 · 크기 · 쓰는 기술을 정하고(적 등급), 캐릭터의 행동 스타일이 움직임을 정하며(행동 스타일), 웨이브 적 그룹의 배치 옵션이 그 보스만의 공략을 만듭니다(배치 옵션).

1특수기술은 Character Forge 에서 켜고 붙여 넣습니다

Character Forge 4번 특수기술 에서 필요한 것을 켜고 값을 정하면 아래 배치 옵션 에 JSON 이 나옵니다. 이것을 복사해 Stage Forge 웨이브 적 그룹의 그 밖의 옵션 (JSON) 에 붙여 넣습니다. 특수기술마다 칸 · 기본값은 참고 — 특수기술.

22단계 보스는 웨이브 카드에서

보스 등급 그룹에는 다음 형태(nextForm)를 둘 수 있습니다. 첫 형태가 쓰러지면 배너와 함께 다음 캐릭터로 이어지고, 다음 형태에도 따로 배치 옵션(체력 · 공격력 배율, 발악기, 반격 등)을 줍니다.

기술 · 이펙트 · 콤보

• 기술의 빠르기와 틈 — Character Forge 6번 준비 · 유효 · 회복(틀). 준비가 짧으면 빠르고, 회복이 길면 헛쳤을 때 벌이 큽니다. 때리는 칸을 적으면 때리는 자세가 판정 시작에 맞춰 나옵니다(공격 판정).
• 브레스 · 포탄 — 같은 표에서 브레스(정면으로 뻗는 불, 화차 「Fire Breath」)나 투사체(포탄, 화차 「Cannon」)를 켭니다. 포탄 그림은 9번 「포탄 그림」.
• 이펙트 — 9번 ＋ 이펙트 그림 추가 로 칼 궤적 · 불꽃 시트를 넣고, 6번 표의 「이펙트」 열에서 기술마다 고릅니다.
• 커맨드 콤보 — 7번. 손 · 발 입력 2 ~ 4단계, 연타(타수 · 간격), 아머, 필살 게이지. 노부츠나는 콤보 다섯 중 둘(Thousand Cuts · Final Stance)이 필살 게이지 1칸을 씁니다(콤보 칸). 플레이어는 일시정지 메뉴의 기술표에서 입력을 봅니다.
• 기술별 손맛 — 흔들림(shake) · 멈춤(freeze) · 밀어내기(knockback)는 도구에 칸이 없어, 저장한 캐릭터 JSON 을 글 편집기로 열어 그 기술에 적습니다. 적은 기술만 그 값을 씁니다(참고 — 도구에 칸이 없는 값). 견본의 화차 화염 숨결은 밀어내기 4.2.

스테이지 연출

• 배치 편집기 — Stage Forge ◆ 칸에서 관문 · 장애물 · 적 무리를 무대 위에서 끌어 옮깁니다. 웨이브마다 놓을 수 있는 범위와 문제(⚠)가 함께 나옵니다.
• 안내 · 배너 — 웨이브 시작 때 공략을 한 줄로 알려 줍니다(견본 「굴러오는 통을 피해라」 · 「궤짝을 들어 던져라」). 보스 웨이브는 배너 「BOSS — 火車 牛鬼」.
• 장애물과 드랍 — Asset Forge 의 속성 에서 장애물 종류(부서짐 · 폭발 · 굴러옴 · 발판 등 7가지) · 수치 · 그림과 부수면 떨어뜨릴 아이템(견본의 나무 상자 → 주먹밥)을 정하고, Stage Forge 8 · 9번에서 불러와 7번에서 놓습니다. 놓은 자리마다 크기 · 드랍을 따로 바꿀 수도 있습니다(장애물 종류 · 아이템 종류).
• 보스 곡 · 클리어 컷신 — 2번 보스전 배경음악, 6번 클리어 컷신(견본 1스테이지 끝 슬라이드).

게임 연출 · 화면

• 안내 화면 — Game Forge 6번 「저작권 표시 · 제작사 로고」. 게임을 열면 가장 먼저 나옵니다.
• 오프닝 · 엔딩 — 영상(파일을 직접 싣거나 주소) 또는 슬라이드. 「곡 이어 가기」로 곡을 끊지 않고 다음 화면에 잇습니다. 견본 오프닝은 영상 약 33초.
• 크레딧 — 한 줄에 하나, # 로 시작하면 큰 제목.
• 여러 주인공 — 2번에서 히어로를 둘 이상 켜면 캐릭터 선택 화면이 나옵니다(배경은 6번).
• 화면 표시(HUD) — 8번. 체력바 · 이름 · 점수 · 목숨 등의 자리 · 크기 · 색과 그림(채움 · 위험 · 장식 틀 · 목숨 · 필살기 아이콘)(HUD 요소).
• 난이도 · 슬러시 모드 · 이어하기 · 결과 — 1번. 견본은 난이도 수련 · 무사 · 귀신(적 체력 × 0.75 / 1 / 1.35), 슬러시 모드는 기본 꺼짐(난이도).

손맛 다듬기 — 타격 스튜디오

엔진 개발 화면(엔진만 연 화면 또는 배포용을 끄고 구운 게임)의 ◎ 타격 스튜디오 에서 히트스톱 · 흔들림 · 넉백 · 섬광 · 콤보 가중 · 잔상을 게임을 하며 조절합니다. 맞으면 설정 복사 를 눌러 Game Forge 7번 타격감 칸에 붙여 넣습니다(타격감). 같은 창의 사운드 에서 효과음 · 음악 크기도 맞춥니다.

그림 다듬기

• 도트 정리 — Sprite Forge 5번. 생성 그림을 도트 규칙에 맞추고, 팔레트(.gpl)를 저장해 다른 캐릭터에 같은 색을 씁니다.
• 아이템 · 장애물 · 이펙트 크기 — Asset Forge 에서 주인공 옆에 대 보며 프레임마다 위치 · 크기를 맞춥니다(Asset Forge).
• 캐릭터 칸별 손질 — Character Forge 10번 포즈 편집. 칸 밖으로 나가면 경고가 나옵니다.

번역

Game Forge ◇ 번역 시트 에서 게임 글(제목 · 자막 · 크레딧 · 이름)을 CSV 로 내보내 번역하고 가져옵니다. 게임은 플레이어의 언어(한국어 · English · 日本語)에 맞춰 보여 줍니다.

마무리

1. Game Forge 9번 확인 에 문제가 없게 합니다(빠진 캐릭터 · 아이템 · 장애물, 모드와 어긋난 설정).
2. 엔진 개발 화면의 AUTO 로 스테이지마다 끝까지 돌려 봅니다.
3. 5번 배포용으로 굽기 를 켜고 굽습니다. 처음 안내 · 일시정지 · 기술표가 플레이어용으로 나옵니다.
4. 파일 크기는 대부분 영상 · 음악입니다. 크면 영상을 줄이거나 슬라이드로, 음악은 ogg 로 바꿉니다.

4. 참고

도구별 칸 사용법과 모든 수치의 뜻 · 단위 · 기본값은 참고 문서(ref.html) 에 따로 있습니다. 도구의 「?」 도 그곳으로 이어집니다.