이동 양궁프로젝트 소개

Sky Archer

궁수의 좌우 위치가 조준선이 되는 자동 사격 게임 제작기. 화살이 닿는 시간과 풍선의 착지 실패를 연결하고, 서로 다른 버튼에 같은 그림을 늘리던 문제를 다듬었습니다.

AI Tools Lab · 소개 글 작성 · 수정

Sky Archer 시작 화면
궁수를 움직여 자동 화살의 조준선을 맞추는 Sky Archer의 시작 화면입니다.

옆으로 움직이는 위치가 곧 조준선이다

Sky Archer에서는 궁수를 좌우로 움직이고 화살은 위로 자동 발사됩니다. 저는 사격 버튼을 따로 누르게 하지 않고 궁수의 가로 위치가 조준선이 되도록 만들었습니다. 내려오는 풍선 아래로 이동해 자동 화살을 맞히는 게임입니다.

이 조작에서는 목표 위치에 닿는 시간과 다음 화살이 나오는 시간이 함께 중요합니다. 저는 궁수가 포인터 위치로 곧바로 순간 이동하는 대신 최대 이동량 안에서 목표를 따라가도록 했습니다. 화살은 정해진 발사 주기를 가지므로 풍선 밑에 자리를 잡는 순간과 명중하는 순간이 다릅니다.

풍선이 궁수의 지면 선에 닿거나 충돌하면 실패합니다. 플레이어가 풍선 자체를 피하는 것만으로는 살아남지 못합니다. 내려오기 전에 맞혀 없애야 하므로 가장 가까운 풍선과 다음 조준선 사이의 순서를 고르게 됩니다. 이동 하나를 공격과 실패 조건에 같이 연결한 선택입니다.

화살과 풍선은 한 번의 명중으로 정리했다

화살은 재사용 가능한 풀에서 생성하고 화면 위로 나가면 비활성화합니다. 명중 처리에서는 화살과 풍선이 아직 활성인지, 게임이 끝나지 않았는지를 먼저 확인합니다. 처리된 화살이나 표적이 같은 순간에 다른 충돌에 다시 들어오지 않도록 한 것입니다.

일반 표적과 보너스 표적의 명중은 서로 다른 보상으로 연결됩니다. 화살을 어느 가로 위치에서 보내는지에 따라 생존을 위한 표적 제거와 높은 보상을 위한 조준이 갈립니다. 저는 자동 사격을 수동 입력이 없는 전투로 보지 않고, 발사 위치를 미리 고르는 규칙으로 만들었습니다.

종료 판정도 화살 명중과 구분했습니다. 표적이 지면을 지난 상태를 확인하고 게임오버가 한 번만 시작되게 합니다. 자동 발사와 낙하가 계속되는 동안 여러 표적이 같은 프레임에 실패 조건을 만들 수 있으므로 종료 이후의 입력과 판정은 멈춰야 합니다.

큰 그림의 끝이 프레임에 닿아 있었다

2026년 7월 후보정에서는 궁수와 표적, 보너스, 화살의 투명 외곽이 잘린 문제가 확인됐습니다. 파일의 가로·세로가 충분히 크더라도 내용이 프레임 끝에 닿으면 화면에서 잘린 형태가 될 수 있습니다. 저는 투명 여백을 확보하고 잔여 색을 정리했습니다.

큰 스프라이트와 효과는 역할에 맞는 크기로 줄였고 궁수 시트는 프레임 수를 유지하면서 런타임 형식을 정리했습니다. 표적, 화살과 명중 효과는 표시 크기가 서로 다릅니다. 모든 파일을 같은 큰 규격으로 보내는 것보다 각 역할의 크기와 프레임 여백을 맞췄습니다.

동시에 캔버스도 확인했습니다. 당시 DPR3 기기에서 CSS 화면과 실제 그리기 크기가 모두 390×844여서 전체 프레임을 확대하고 있었습니다. 처음에는 물리 캔버스를 늘리는 방식으로 고쳤고, 이후에는 1080×1920 기본 캔버스로 정리했습니다. 그림 외곽과 최종 그리기 크기를 함께 보아야 했습니다.

PLAY와 SOUND는 같은 높이의 버튼이 아니었다

버튼에는 또 다른 표시 문제가 있었습니다. PLAY는 220×64, SOUND는 220×52인데 둘 다 768×256 프레임을 늘려 사용하고 있었습니다. 가로와 세로의 배율이 달라 테두리 형태가 각각 다르게 변형됐습니다.

저는 기본, 슬림과 대화창 버튼에 맞는 그림을 따로 연결했습니다. 같은 모서리 형태가 필요한 버튼이라도 표시 비율이 다르면 하나의 프레임을 계속 늘려 쓰기 어렵습니다. 일시정지 아이콘도 현재 화면 해상도에 맞는 원본으로 교체하고, 로딩 목록이 새 버튼들을 먼저 읽게 했습니다.

버튼 그림에는 글자를 넣지 않고 화면에서 문구를 따로 놓습니다. 그림은 프레임을, 텍스트는 행동의 이름을 담당합니다. 화면 크기와 문구를 바꾸더라도 프레임 비율과 읽을 수 있는 글자를 각각 유지할 수 있게 했습니다.

위치·발사·화면 경계를 함께 확인했다

자동 사격에서도 이동 입력과 발사 주기, 실패 조건의 역할은 구분해야 합니다. 이동은 발사 위치를 고르고, 화살은 일정 주기로 나가며, 풍선이 지면에 닿는 조건은 별도로 있습니다. 세 시점이 연결돼야 플레이어가 실패 뒤 어떤 움직임을 바꿀지 이해할 수 있습니다.

화면에서는 궁수의 좌우 안전 여백과 포인터가 HUD를 누르는 영역도 분리합니다. 버튼을 누른 손이 이동 목표로 들어오지 않게 하고, 화면 끝에서도 궁수와 조준 위치가 남도록 제한합니다. 자동 발사가 정상이어도 버튼과 이동이 섞이면 위치를 고르는 규칙이 흔들립니다.

다음 이동 사격 게임에서도 같은 그림이 선명한지보다 먼저 이동과 발사의 관계를 보려고 합니다. 그다음 표적 착지와 명중이 한 번씩만 처리되는지, 버튼이 자기 비율로 표시되는지와 그림 끝이 잘리지 않는지를 확인합니다. 드래그 하나로 만든 사격 게임의 경험은 발사를 자동으로 돌린 뒤 남는 선택을 화면과 판정에 연결하는 작업이었습니다.

개발 자료

게임 프로젝트

좌우 이동과 자동 화살의 판정을 연결하고 버튼 비율과 그림 가장자리의 품질을 다듬은 경험입니다.

GitHub 게임 저장소 · coreline-ai ↗ · 문의·정정 요청