brunch

매거진 앵버박사의 소프트웨어 개발 이야기

라이킷 7 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 앵버박사 Apr 10. 2016

처음 만드는 온라인 게임 05-01

클라이언트 개발

그동안 게임을 만든다고 하면서 UI도 하나 없고, 서버나 만들고 있으니 참 답답하셨을지도 모르겠습니다. 이제 우리 게임을 지탱해줄 든든한 서버가 만들어졌기 때문에 드디어 클라이언트를 개발할 차례입니다. 가장 먼저 해야 할 일은 게임에 들어가는 리소스 즉 캐릭터, 배경, 사운드 등을 제작하는 일입니다. 하지만 처음 만드는 온라인 게임 01 에서 보셨 듯 우리 게임에는 캐릭터 스프라이트 밖에 없습니다. 아주 간단하죠?

그런데 스프라이트가 뭘까요? 스프라이트는 그냥 이미지라고 보시면 되는데, 하나의 이미지 파일에 연관되는 다양한 이미지들이 들어있을 수 있습니다. 예로 캐릭터의 경우에는 캐릭터가 움직이는 애니메이션을 구현하기 위해서 움직이는 각 장면에 해당하는 이미지들을 한 파일로 묶어 만듭니다.

공격 스프라이트 이미지의 예

우리가 만들 스프라이트 이미지는 상하좌우(4) 걷기/공격(2), 4X2 총 8개입니다.

잠깐, 그런데 왜 내가 캐릭터 이미지를 만들어야 되지? 난 개발자인데.. 라는 생각이 들 수 있습니다. 물론 주변에 도움을 청할 만한 사람이나 함께 해줄 디자이너가 있다면 좋겠지만, 개인 프로젝트이고 스펙 자체가 디자이너가 있어야 할 만큼 거창하지 않기 때문에 직접 만들어 보도록 하겠습니다. 다행히도 스프라이트 개발도구의 힘을 빌리면 어렵지 않습니다.

자, 그럼 우리가 사용할 스프라이트 개발도구를 소개하겠습니다. http://www.piskelapp.com 링크로 들어가 보면 아래와 같은 메인 페이지가 나옵니다.

piskel 메인 페이지

그리고 Create a Sprite 라고 쓰인 버튼을 클릭하면 에디터 화면으로 이동합니다.

piskel 에디터 화면

인터페이스가 간단하기 때문에 사용하시는데 어렵지 않을 것이라고 생각됩니다. 먼저 왼쪽에는 그림을 그릴 수 있는 각종 도구들을 선택할 수 있는데 그림판이나 포토샵 등에서 보았던 친숙한 인터페이스입니다.

왼쪽 위를 보면 + Add new frame 이라는 버튼이 보이는데, 여러 개의 프레임을 만들게 되면 그 프레임들을 순차적으로 보여주면서 움직이는 듯한 이미지를 만들 수 있게 됩니다.

오른쪽에는 미리보기 / FPS 설정 / 레이어 / 트랜스폼 / 팔레트 / 저장, 불러오기, 설정 등의 일반 메뉴 가 포진해있습니다.

그럼 제가 작업한 왼쪽 공격 스프라이트를 보겠습니다.

왼쪽 공격 스프라이트 캐릭터 Layer

왼쪽 공격 스프라이트 무기 Layer

오른쪽에 보시면 레이어가 1, 2 두개로 나뉘어 있습니다. 캐릭터와 무기를 분리하여 유연하게 작업하기 위해서 입니다. 각 레이어를 선택하면 해당 레이어만 진하게 보이고 다른 레이어의 이미지는 흐리게 보입니다.

그리고 왼쪽에 여러 프레임을 만들어 캐릭터가 공격하는 애니메이션을 만들었습니다. 오른쪽 상단에 미리보기로 움직이는 캐릭터가 보이고, 아래 6 FPS 정도로 속도를 조정하였습니다.

완성된 애니메이션은 아래와 같습니다.

물론 이렇게 완성된 애니메이션을 GIF로 바로 게임에 적용하는 것이 아니라 처음 위에서 말씀드린 것처럼 각 장면이 연결된 하나의 스프라이트 파일을 만들어 클라이언트 코드에서 각 이미지의 위치를 계산하여 번갈아가면서 화면에 그려 애니메이션을 완성하게 됩니다. 이는 다음 글에서 소스코드와 함께 확인하도록 하겠습니다.

스프라이트 이미지 파일로 만들기 위해서는 오른쪽 메뉴 중 Export를 선택하고 적당한 Scale을 지정하여 Download PNG 버튼을 클릭합니다.

스프라이트 이미지로 저장하기

다운로드된 파일을 열어보면 이 글의 처음에 보여드렸던 공격 스프라이트 이미지의 예를 확인하실 수 있습니다. 그리고 작업내용을 .piskel 파일로 저장하여 포토샵의 .PSD 파일처럼 작업했던 상태 그대로 불러와서 작업을 이어나갈 수도 있습니다.

지금까지 우리 게임의 유일한 외적 자원인 캐릭터 스프라이트를 만들어 보았습니다. 위에서 작업한 형태로 오른쪽/위/아래 공격, 왼쪽/오른쪽/위/아래 이동 이미지를 만들면 됩니다. 도트를 찍어 캐릭터를 만드는 것도 꽤 재미있으니 한 번 해보시길 권장드립니다. 다음 글에서는 HTML5의 캔버스와 자바스크립트를 이용하여 게임 클라이언트 개발을 진행해보도록 하겠습니다.

01 주제 / 대상 독자 / 개발 원칙

02 요구사항 정의 / 설계

03 Python HTTP Server 개발

03-01 멀티 쓰레드 지원 / POST 메서드 처리 / 로깅

03-02 URL 라우팅 / 정적 리소스 처리

04 Python web socket server 개발
04-01 웹 소켓 개요

04-02 웹 소켓 서버 구현

05 클라이언트 개발

05-01 캐릭터 스프라이트 개발

05-02 클라이언트 로직

05-03 서버 로직

keyword