모바일 게임 만들기 체험을 해봐요. 프로그래밍을 몰라도 좋아요.

들어가며

요즘 스마트 모바일 기기는 보편화되어있어 삶의 일부가 되어있어요. 스마트폰이 대중화되서 출퇴근길의 버스나 지하철의 사람들을 보면 거의가 스마트폰을 들고있죠. 또한 대중교통 안에서 뿐만 아니라 커피숖이나 공원에서 여유를 사람들을 보면 태블릿를 이용하고 있는 모습을 흔하게 접할 수가 있지요. 근데 이러한 스마트 기기를 이용하는 것을 보면 대부분이 게임을 즐기고 있어요. 모바일 기기가 대중화되면서 게임도 역시 대중화 된 것이예요.

하지만 게임이 많이 대중화 되었지만 그 흐름은 모바일에 있어요. 너도나도 모바일 게임을 개발하고 있고 오히려 모바일 게임을 개발하지 않는 곳을 찾아보기가 힘들어졌어요. 그러다보니 왠지 모바일 게임  한번쯤 만들어 보지 않으면 안될 것 같은 느낌이 들어요. 하지만 그렇다고 만사 때려치고 제대로 만들어보자느 것도 뭔가 아닌 듯 싶어요. 굳이 대규모 3D 게임까지는 필요 없고 간단한 2D 게임 정도만 만들어 보면 될 것 같아요.

자, 이번 글은 그런 분들을 위한 글이예요. 모바일 게임은 만들어보고는 싶지만 큰 시간 투자하기는 싫은 분들을 위한 글이라는 것이죠. 프로그래밍을 모르는 사람도 누구나 쉽게 만들어 볼 수 있는 모바일 게임을 하나 제작해보는 체험을 위한 글이예요. 물론 프로그래밍 없이도 게임 만들 수 있다는이야긴 아니구요, 제작 체험 정도는 무리 없이 해볼 수 있다는 이야기에요. 간단한 게임을 하나 제작해서 실제 스마트폰에 띄워보는 것 까지가 이 글의 목표예요.

개발환경

자 그럼 우선 대상 플랫폼부터 결정해야겠지요. 스마트폰 OS가 blackberry, win8, iOS, android 등 여러개가 있긴 하지만 점유율이 높은 구글 안드로이드와 애플 iOS만 고려하기로 해요. 두 플랫폼 모두 비중이 높기때문에 어느 하나만 지원해서는 안되고 두 플랫폼 모두 지원해야해요

안드로이드는 이클립스상에서 자바로 만들고, iOS는 Xcode상에서 오브젝티브C로 만들어요. 이렇게 두개의 플랫폼을 지원하기 위해 서로 네이티브 코드로 개발을 한다는 것은 상당히 껄끄럽겠지요. 네이티브로 개발하는 것이 불가능한 것도 아니고 또 그렇게 개발되고 있는 게임들도 있긴 하지만 우리는 큰 시간을 여기에 투자하고 싶지는 않으므로 고려하지 않기로 해요.

그럼 멀티플랫폼을 지원하는 개발환경을  고려해봐야겠지요. 먼저 떠오르는 것이 언리얼 엔진이나 유니티 엔진이겠네요. 인피니티 블레이드, 삼국지를 품다 등 실제로 많은 게임들이 이러한 엔진을 통해 탄생이 되었지요. 이러한 엔진들을 통하면 화려하고 강력한 그래픽으로 웅장한 게임들을 개발 해 낼 수가 있어요. 하지만 우리가 원하는 것은 단순한 게임이예요. 굳이 규모를 크게 만들고 싶지도 않고 그래픽도 그렇게 화려할 필요도 없어요. 애니팡이나 드래곤플라이트같이 아기자기한 2D 그래픽에 간단한 룰의 시스템이면 되요.

그런 간단한 2D 게임의 개발 환경이라면 플래시 만한게 없지요. 간단한 게임을 개발하기에 유용해서 예전부터 웹게임에 많이 채용되고 있었지요. 요즘은 플래시의 아성이 죽고 지는해가 되가긴 하지만 아직까지는 이만한 2D 게임 개발 환경은 찾아보기가 힘들긴 해요.

어랏? 근데 뭔가 이상하게 생각이 드실지 모르겠어요. 안드로이드야 웹브라우저에서  플래시가 지원되고있으니까 문제는 없는 것 같은데 아이폰은 플래시를 지원 하지 않으니 모바일에서는 멀티플랫폼이 아니지 않나요? 그리고 안드로이드에서도 돌아간다 쳐도 독립적인 어플리케이션이 아니라 웹브라우저 안에서 돌려보는 것은 원하는 형태가 아니지 않나요? 

하지만 걱정마세요. iOS와 안드로이드에서도 플래시로 만든 어플리케이션을 구동할 수 있는 방법이 있어요. 사실 오래 된 떡밥인데 많은 불들이 알지는 못하시더라구요. 쌩 플래시는 아니고 어도비 AIR(Adobe Integrated Runtime)를 이용하면 되요. 

AIR는 어도비에서 만든 RIA(Rich Internet Application) 프레임워크인데요, 인터넷 어플리케이션을 데스크탑 어플리케이션같이 사용 할 수 있게 해주는 것이라 보시면 될 것 같아요. (사실 정확한 뜻은 아니예요. RIA란 용어의 의미는 광범위하고 저도 완벽히는 몰라서 몇마디로 설명 드리기가 부족한데, AIR에서는 그런 의미로 쓰였다 보시면 될 것 같아요.) 플래시 액션스크립트로 제작을 하고 AIR 플랫폼으로 배포를 하게되면 웹브라우저 안에서 보는 방식이 아니라 독자적인 어플리케이션으로 배포를 할 수 있는 것이지요. 기업 SNS로 널리 쓰이는 yammer나 리그 오브 레전드의 런처가  AIR로 로만들어진 대표적인 어플리케이션이라 할 수 있을거예요.

그래서 이 AIR로 개발을 하면 안드로이드용 apk과 ipa로 배포를 할 수가 있어요. 물론 PC 어플리케이션으로도 배포 할 수 있지요. 이 AIR가 PC용, 안드로이드용, 아이폰용으로 존재하는 덕에 플래시로 개발해도 나름 멀티플랫폼 개발 환경이 되는것이죠. 이 글에서는 그걸 보여드리기 위해 플래시로 간단한 가위바위보 게임을 만들어서 스마트폰에 올려보는 것을 해보려구요. 플래시를 전혀 몰라도 상관 없도록 차근 차근 설명 드릴테니 일단 따라서 해보시면 재밌을거예요. 다만 죄송한 말씀을 드리자면 안드로이드에 올리는 것만 설명하고 아이폰에 올리는 것은 생략하기로 할게요. 제가 아이폰이 없어서 올려보질 못했어요 흙흙흙 하지만 안드로이드폰에 띄우는 것까지만 해보고 나면 아이폰에 올리는 것은 어렵지 않으실거예요. 아마도?

만들어보아요

개발 환경은 플래시 프로페셔널 CS5 이상만 있으면 되요. 플래시 CS5 이상부터 안드로이드나 iOS용 AIR로 개발을 할 수가 있어요. 기왕이면 상위 버젼인 CS6로 해보기로 할게요. 자 그럼 일단 긴말 필요없이 플래시를 구동하기로해요. 그럼 시작 배너가 뜰거예요. 이 창의 새로만들기 섹션보세요. AIR뿐 아니라 AIR for Android와 AIR for iOS가 있는 것이 보이시죠? 딱 감이 오실거예요. AIR를 택하면 데스크탑에서 구동하는 AIR 어플리케이션을 만들 수 있는 것이고 AIR for android를 택하면 안드로이드용 AIR 어플리케이션을 만들 수 있는 것이예요. 그리고, AIR for iOS를 택하면 iOS용 어플리케이션을 만들 수 있는 것이지요. 우리는 안드로이드용으로 만들것이니 여기서 새로 만들기 중 AIR for Android를 선택해요. 근데 사실 이중 뭘 선택해도 상관은 없어요. 아무때나 프로젝트의 속성창에서  안드로이드용 AIR인지 iOS용 AIR인지 데스크탑용 AIR인지 아니면 플래시 플레이어용인지 마음대로 바꿀 수 있어요. 

뭐 어쨌든 일단 AIR for Android를 선택해서 빈 템플릿으로 새 문서를 생성해요. 그럼 기본적으로 사이즈가 800x480 등 종횡비가 가로 기준 크기로 셋팅되어 있을거예요. 하지만 우리는 폰을 세로로 세워서 가지고 노는 게임을 만들고 싶으니 사이즈를 변경하고 싶어요. 그러니 우측의 속성창에서 크기의 숫자를 클릭해서 480x800으로 바꾸기로 해요.

자, 그럼 이제 하단을 보면 막 숫자가 찍혀있는 타임라인을 보아요. 네모난 작은 칸이 여러개 있는데 이 칸 하나 하나가 한 프레임을 의미해요. 타임라인이 진행되면서 프레임을 차근 차근 보여주는 방식이지요. 그럼 가위,바위,보의 이미지를 계속 돌리면서 보여주기 위해 세개의 프레임에 각각 가위 바위 보의 이미지를 넣어보기로 해요. 먼저 세개의 이미지가 필요하겠지요? 일단 이 세개의 사실적인(?) 이미지를 PC에 저장해보아요.

타인라인에서 1프레임을 누르고 우클릭한뒤 키프레임 삽입을 눌러보아요. 그럼 빈 옅은 네모였던게 진한 네모로 바뀌면서 하얀 동그라미가 그려질거여요. 이게 빈 프레임이였다가 키프레임으로 바뀐건데 뭐 복잡한 설명 필요 없이 ”아 뭐 그냥 뭔가 그릴 수 있는 프레임이 된거구나” 정도로 생각하심 될거여요. 그럼이제 2프레임과 3프레임도 마찬가지로 키프레임을 삽입해보아요.

그럼 이제 키프레임 세개가 만들어졌으니 각각의 키프레임에 가위 바위 보 이미지를 배치시켜야겠지요? 1프레임을 선택하고 상단의 파일 메뉴에서 가져오기 > 스테이지로 가져오기를 선택하고 가위 그림을 선택해요.그럼 스테이지에 그 가위 그림이 배치되요. 만약 가운데 안나타나고 이상한테 나타나면 드래그해서 가운데로 위치시켜줘요. 

이제 하단의 타임라인을 보시면 1프레임의 네모가 회색으로 채워지고 동그라미가 검은색으로 채워진게 확인되실거예요. 뭔가 보여질게 채워져서 더이상 빈 키프레임이 아니라는 뜻이예요. 

그럼 이제 나머지 프레임도 채워야겠지요. 2프레임을 클릭하고 마찬가지로 파일의 가져오기를 통해서 바위 이미지를, 3프레임에는 보 이미지를 삽입해주어요. 그럼 3개의 프레임 모두 회색에 검은 동그라미가 쳐진 상태가 되겠지요. 

자자, 여기까지 힘들게 왔으니 날려먹지않게 중간 중간 저장해주는거 잊지마시구요. 상단 파일 메뉴에서 저장을 해주기로해요. 저장까지 했으면 머리식힐겸 일단 게임 한판 하고 오세요.

...

자 칼서렌 하고 왔어요. 상쾌하게 졌으니 상쾌하게 다시 시작해볼까요?. 어랏? 근데 3프레임까지 보를 보여주고 끝나는게 아니라 1프레임으로 다시 돌아가서 가위부터 다시 보여줘야하지 않나요? 3프레임에서 끝나버리면 어떡해요? 예리하군요. 하지만 걱정 말아요. 플래시는 별 다른 설정 없으면 무한반복이여요. 그럼 어디 진짜 그런가 확인해보자구요. 지금까지 만든걸 돌려보는건 간단해요 컨트롤 누르고 엔터를 쳐보세요. 그럼 무슨 시뮬레이터 창과 함께 우리가 만든 가위바위보가 떠요. 오오옷~ 가위 바위 보가 계속 현란하게 바뀌네요.

아 근데 너무 빨라요. 너무 빨라서 가위 바위 보를 돌려서 보여준다기보다는 그냥 뭔 버그같아요. 그럼 프레임이 늦게 바뀌도록 해보자구요. 그건 그냥 간단해요. 우측 속성창에서 FPS를 좀 낮춰주기로 해요. 플래시는 FPS를 정해주면 그 수치에 맞춰서 프레임이 진행되는 방식이예요. FPS도 바꾸는거 간단해요. 속성창에서 FPS를 클릭해서 바꿔주면 끝이지요. 5FPS로 맞추고 다시 컨트롤 + 엔터로 실행해보아요. 오오 이제 뭔가 좀 그럴싸하게 바뀌는군요.

그럼 이제 터치를 하면 뙇! 하고 멈추는걸 해보기로 해요. 그러기 위해서는 살짝 코딩이 들어가야해요. 플래시에서 사용하는 언어인 액션 스크립트로 코드 몇 줄을 짜줘야하는데 어렵지 않으니 걱정말아요. 자, 우선 1프레임에서 우클릭으로 메뉴 열고 액션을 선택해주세요. 그럼 다음과 같은 스크립트 편집 창이 나와요. 그 액션 스크립트 편집창에 다음과 같이 코딩해보기로해요. 뭐 그냥 손아프게 타이핑하지 마시고 컨트롤씨 컨트롤브이 신공으로 샤샤샥 해봐요. 

import flash.events.MouseEvent;

var isStopped:Boolean = false;

stage.addEventListener( MouseEvent.MOUSE_DOWN, onTouch);

function onTouch( event:MouseEvent)

{

if( isStopped == true)

{

play();

isStopped = false;

}

else

{

stop();

isStopped = true;

}

}

코드 설명은 그냥 넘어가긴 섭섭하니 간단히 셜명 드릴게요. 여기서 핵심은 play()와 stop()이예요. 함수 이름만 보면 어떤 역할인지 딱 감이 오실거예요. stop()는 타임라인 진행을 멈춘다는 의미이고 play()는 타임라인 진행을 시켜준단 의미이죠. 화면을 클릭 또는 터치했을 때 이 play()와 stop()를 번갈아가며 수행해주는 onTouch()함수를 수행토록 이벤트로 연결해주면 끝이겠지요? 그 이벤트로 연결해 주는 것이 stage.addEventListener() 인 것이지요.

자 그럼 이제 다시 컨트롤 + 엔터를 눌러서 게임을 띄워볼까요? 오오 가위 바위 보 뺑뺑이 돌다가 클릭하면 멈추었다가 다시 클릭하면 다시 뺑뺑이를 돌리네요! 자 이제 입으로 큰소리로 “가위!”라고 외치고 클릭해보아요! 보에서 멈추었다면 이긴거고 주먹에서 멈추었다면 진거예요! 

자, 우리 게임 개발은 이걸로 완성되었어요. 응? ㅋㅋㅋㅋㅋㅋㅋ 말씀드렸잖아요 간단한거 해볼거라고 ㅋㅋㅋㅋㅋㅋㅋㅋ 일단 폰에 올려보는게 목적이니 욕심은 접어두고 여기까지만 해보도록 해요 ㅋㅋㅋㅋㅋ 절대 귀챦아서 그러는거 아니예요. 아닐거여요. 아마...

자 그럼 이제 안드로이드에 올릴 수 있는 apk로 만들어보기로 해요. 데스크탑에서 볼 수 있는 플래시 swf는 컨트롤 + 엔터로 구동시키는 순간 fla 파일이 있는 위치에 만들어져요. 하지만 apk로 만들고 폰에서 실행해보려면 따른 추가 퍼블리싱 작업을 거쳐야해요. 상단의 파일메뉴의 AIR for Android 설정을 눌러보세요. 그러면 배포 제작 할 수 있는 창이 뜰거예요. 세로로 세워서 수행할것이니 종횡비는 세로로 설정해요. 그리고 화면 빈틈 없이 꽉꽉 채우고싶으니까 전체화면으로 체크하구요. 렌더링모드는 귀챦으니 자동으로 설정해요. 

그리고 배포 탭에 가서 인증서를 만들기로해요. apk를 제작하려면 제작에 필요한 인증서가 필요한데요. 뭐 어짜피 인증서야 또 만들수 있는거고 테스트용이니 만들기 버튼 눌러서 대충 만들어주세요. 하지만 예의상 암호는 꼭 기억해주세요. 

안드로이드 장치에 직접 띄울거니 android 배포 유형은 장치 릴리즈로 선택해요. 

AIR 런타임은 응용 프로그램에 AIR 런타임 포함으로 체크하기로해요. AIR 런타임 다운로드 위치를 선택해서 사용자가 AIR 런타임을 따로 받게 유도 할 수도 있지만 아마 귀찮아할거예요. 뭐 물론 이 가위바위보를 실제 배포하지는 않을거니 사실 뭘로하든 상관은 없어요.

게시 후는 연결된 android 장치에 응용 프로그램 설치하고 시작하도록 체크를 해요.

자 그리고는 안드로이드폰과 PC를 US 케이블로 연결해주세요. PC에 기기의 드라이버가 안깔려있다면 설치하시구요. 기기에서는 응용프로그램 설정에서 알 수 없는 소스에 체크해주시고 개발 옵션 설정에서 USB 디버깅을 체크해주세요. 

자! 그럼 이제 막타만 남았어요. 상콤하게 제작을 눌러주세요. 뭔가 권한 어쩌고 저쩌고 경고 메시지가 뜨지만 그딴것따위 중요하지 않아요. 과감히 경고창정도는 무시하고 닫아주세요. 짜잔~ 기기에 우리 가위 바위 보 게임이 떴네요. 큰 소리로 가위!를 외치시고 화면을 터치해주세요!!!! (종료 버튼은 따로 만들지 않아서 태스크 관리자로 강제로 꺼주세요 ㅋ)

마치며

이것으로 플래시를 이용한 모바일 게임 제작 체험을 마치기로 해요. 딱히 어렵지 않게 그냥 몇번 딸깍딸깍하고 타이핑 몇 줄 했을 뿐인데 이렇게 기기에 게임을 띄울수가 있네요. 그렇다고 플래쉬로만 개발을 해야한다고 주장하려는건 아니예요. 굳이 언리얼이나 유니티같은 엔진이 아니라 하더라도 모바일 개발을 할 수 있는 환경은 많이 있고, 플래시도 그 중 하나가 될 수 있다는걸 체험시켜드리는 것 뿐이여요. 물론 대규모나 고퀄리티의 게임을 만들기에는 플래시로는 무리가 있을 수도 있어요. 하지만 간단한 게임을 단기간에 만드는데에는 적합한 환경인 것 같지 않나요? 그럼 저는 밀당을 할 줄 아는 남자이므로 이만 여기서 글을 마칠게요. 모두들 즐거운 개발하세요~