여러분 안녕하세요. 앱인벤터는 코딩에 대한 기능 없이도 손쉽게 앱을 만들 수 있는 도구이죠. 이번 시간에는 이러한 앱인벤터의 기능 중 하나인 이미지 처리방법에 대해 알아보려고 합니다. 특히 게임 같은 경우에는 스프라이트 이미지(Sprite image) 등을 처리하는 경우가 많기 때문에 이러한 이미지 구성이 중요합니다. 그럼 지금부터 저와 함께 앱인벤터를 사용하여 애니메이션을 어떻게 만들 수 있는지 함께 살펴보시죠.
자, 먼저 새로운 프로젝트를 생성해 보도록 하겠습니다. Start new project를 해서요. 보시면, Sprite라는 이름으로 지어주면 될 것 같네요. OK 버튼을 누르시고요. 새로운 Sprite라고 하는 새로운 프로젝트를 생성 할 수 있게 됩니다. 자, 새로운 프로젝트가 생성이 되었죠? 자, 애니메이션처리를 하기 위해서 이미지 컨퍼런트라는 것이 필요한데요. 자, 이미지 컨퍼런트를 가져다가 던져줍니다. 쓸지는 모르겠지만, 일단 버튼도 하나 추가를 해놓도록 하겠습니다.
이것들이 모두 다 좌측 정렬이라 뭔가 불편한 것 같으니까 우리가 여기서 Screen을 눌러서 가운데, Center정렬로 바꾸도록 하겠습니다. Center 정렬로 바꿔놨더니 한결 우리가 보기에 편할 것 같이 보이네요. 자, 그럼 이 상태에서 이미지 처리를 하기 위해서 우리는 우리가 사용 할 이미지들을 등록을 해야 하겠죠? 등록하는 방법은 두 가지가 있습니다. Media라고 하는 곳에서 Upload File로 추가를 하셔도 되고요. 혹은, Picture에서 Upload File로 추가를 하셔도 상관이 없습니다. 둘 다 가능합니다. 우리는 일단 여기서 추가를 해보도록 하겠습니다.
File을 선택해서, 제가 이제 만들어 놓은 이미지인데요. Ghost 01 이라는 File을 OK버튼을 눌러서 추가를 하고요. 그리고 또 File을 선택해서 Ghost 02 File을 추가했습니다. 자, 일단 시작 이미지에다가, 01번 02번 두 가지가 있으니, 일단 시작 이미지로 먼저 이것을 선택 하도록 하겠습니다. OK. 자, 우리가 조금 전에 Upload 했던 Ghost, 유령이죠? 유령 이미지가 여기에 나오고 있네요. 자, 버튼에 대한 Text는 간단하게, 내용 자체를 Text for button1 보다는 Animate라고 일단 이름을 전해 놓도록 하겠습니다. 1자, 이 상태에서 우리가 추가적인 코드를 작성할 수 있는 Blocks 버튼으로 넘어가도록 하겠습니다. 자, 여기서 다양한 것들을 하실 수 있는데요. 보다시피 우리가 여기서 추가했던 여기 보시면 이미지가 두 가지가 있는데요. 이 두 개의 이미지를 번갈아 가면서 화면에 출력하려는 것이 우리의 목표입니다. 번갈아 가면서 출력하기 위해서 어떤 처리를 해야 되는지, 차근차근 생각을 한번 해 보도록 하겠습니다.
먼저 이미지를 가져오기 위해서는 이미지 List라는 것을 우리가 만들어줘야 합니다. 이미지 List를 만들기 위해서 변수에 보면, 보시면 Image initialize 변수가 있죠? Initialize global 변수라는 것은 여기저기서 가져다 쓰기 위해서 있는 변수입니다. Global변수라는 것을 초기화를 할 수 있습니다. 여기에 Img List라는 것을 하나 추가를 하도록 하겠습니다. 이미지 List를 만들려면 일단 이미지 리스트를 Make해야죠. 네, 그래서 이미지 List를 Make하도록 하겠습니다. 여기에 들어가는 Image list의 종류는 일단, 하나, 둘, 두 개가 되겠죠. 첫 번째는 Ghost01.png가 되겠고요 그리고 두 번째는 Ghost 02.png가 될 겁니다. 이렇게 해서 두 개의 이미지 리스트를 만들었습니다. 자, 그러면 이미지 리스트를 실제로 가지고 오기 위해서는 1번 이미지 리스트, 2번 이미지 리스트잖아요. 그러니까 이 순서에 대한 값을 처리하기 위한 변수가 또 하나 필요해집니다. 자 Global변수를 하나 더 추가해서 이것이 실제로 Index 라는 변수가 될 겁니다. 이건 필요가 없습니다. Index라는 변수가 하나 추가 됐고요. 그리고 여기에다 숫자 값 0을 넣어서 Index 최초 0으로부터 시작하도록 하겠습니다. 자, 그러면 이제 Set, Global 변수를 추가해서 자, 여기 Set이라는 함수가 있는데요. Set변수를 여기서 Setting을 할 수 있습니다. 변수를 어떻게 Setting을 하느냐, Index라는 변수를 Setting을 할 겁니다. 어떻게? 먼저 이 값을 얻어야죠. 먼저 값을 얻어옵니다. 이게 무슨 소리일까요? 궁금 하실 텐데요. 값을 얻어옵니다. 값을 얻어 와서 이 값을 Setting을 할겁니다. 어떻게 Setting을 할거냐, 우리는 조금 고급스럽게 Setting을 해보도록 하겠습니다. 여기 명령어 중에 Modulo 라고 있습니다, Modulo. Modulo라는 것이 있는데, Modulo가 무엇을 하는 것이냐면, 여기 보시면, Modulo라는 것은 나눗셈을 한 나머지 값을 얻어오는 함수입니다. 네, 나눗셈을 한 나머지 값, 그래서, 자 이렇게 해 놓고 이 값에다가 Global index라는 Global 변수에 Index라는 이 값을 얻어다가 그 값을 2로 나눈 나머지를 연산을 하는 것입니다. 그렇게 되면 어떻게 될까요? 어떻게 되죠? 0 아니면 1 이라는 두 가지 숫자가 나오게 되는 겁니다. 그래서 Global index는 최종적으로 0 아니면 1 이라는 둘 중에 하나의 값이 여기에는 남게 되는 것이죠. 자, 그럼 계속 남아 있기만 하면, 끝나는 것이냐? 아닙니다. 이 값을 변화를 시켜 줄 겁니다, 자, 이렇게 해서 Global index값을 변화를 시켜 줄 거예요. 어떻게? 자, x함수에 보면, 덧셈이 있습니다, 더해 줍니다. 그리고 조금 전에 Get 했던 이것을 사용을 해서, 다시 한 번 Global index를, 그리고 값을 1 증가 시켰습니다. 여기서 나온 최종 값은 0 아니면, 1이예요. 그런데, 여기서는 뭐라고 했어요? 그 값에다 1을 더했죠? 다시 말해서 1 아니면, 2라고 하는 두 개의 결과 값이 나오게 되는 거죠. 0이라면 1일 될 것이고, 1이라면, 2가 될 것입니다. 그래서 1 아니면 2 라고 하는 최종 결과 값을 얻게 되는 것입니다. 자, 그러면 이제 여기에다가 이미지라고 하는, 이미지라고 하는 것을 가져다가 Set image을 해줍니다. 이미지1 에다가 Picture을 Setting할거예요. 어떻게 Picture을 Setting 합니까? 리스트, Make list했죠? 이 List에서부터 가져오는 겁니다. Select list item이라는 것을 사용해서 자, List item이 있죠? 네, 변수에 보면, Get을 사용을 해서 여기에 Image list 그리고 Index는 바로 여기에 Global index, 그러면 이 Index에 해당하는 이미지 리스트, 1번일 때는 이것, 2번 일 때는 이것, 두 개의 이미지를 가져다가 여기다가 Setting을 할 겁니다. 자, 문제는 우리는 애니메이션을 시켜보고 싶다고 이야기 했죠? 애니메이션을 시키려면 이것이 반복되어야 하잖아요. 그런데 현재는 반복을 시킬 만한 무언가가 없습니다. 그래서 Designer tab에 가서 특히 한 것을 하나 추가를 할까 합니다. 여기 보시면, Sensor에 있나요? Clock이라는 것이 있네요. Clock이라는 것을 여기에다 추가하면은 화면에는 보이지 않고 이쪽에 Component에 추가가 됩니다. 이 Component는 Invisible Component 라고 해서 화면상에는 보이지 않지만, 내부적으로 작동을 하는 것입니다. 자, 이제 Block setting으로 가보면, Clock component가 추가되어 있는 것을 알 수 있습니다. Clock이 호출 될 때마다 Clock1이 타이머가 호츨 될 때마다 이것을 반복적으로 돌리게 되는 것입니다. 자, 전체적으로 한번 살펴볼까요? 최초 이것을 0으로 Setting하고 두 개의 이미지 리스트를 만듭니다. 그래서 이것들은 딱 한 번씩만 호출이 되는 것이죠. 그 이후에 이것들은 Clock이 한번 울릴 때 마다 반복이 되는 것입니다.
자, 그런데 Clock은 어떻게 Setting되어 있는가? Clock interval이 1000이죠? 1000은 뭐야? Millisecond, 다시 말해서 저 값이 1000이라는 소리는 1초에 한 번씩 이라는 말입니다. 이렇게 하면 1초에 10번이 되는 것이죠. 그래서 1초에 한 번씩 호출이 되는 겁니다. 자, 그럼 이 상태에서 Build를 한번 해 보도록 하겠습니다. Connect에서 Emulator라는 것을 사용하게 되면요. Emulator을 우리가 설치를 할 수 있게 되는데요. 지금 현재 Emulator가 설치 되어있다는 가정 하에서 프로그램을 돌려보도록 하겠습니다. Emulator가 설치되어 있는 경우에는 이런 식으로 Emulator가 화면에 나타나 있게 되고요. 이 Emulator상에서 여러분이 만든 앱을 바로 Test해 볼 수 있게 됩니다. 네. 안드로이드 Emulator가 다시 시행되는 장면을 보고 계십니다. 자, 정상적으로 안드로이드 Emulator가 실행이 되게 되면, Emulator랑 Inventor랑 둘이 통신하기 시작합니다. 통신을 하면서 Emulator을 Inventor가 Control을 시작을 하거든요. 그러면서 각종 프로그램들이 정상적으로 뜰 수 있도록 이것이 조치를 취하게 됩니다. 그래서 여기 나오는 시간 동안 우리가 기다려주게 되는 것이고요. 잠시 기다려보시면 우리가 결과 값을 볼 수 있게 될 겁니다. 자 프로그램이 떴죠? 우리가 만든 프로그램입니다. 우리가 만든 프로그램이 정상적으로 실행이 된다고 하면, 일초에 한번씩 애니메이션이 작동을 하고 있죠? 간단하게 만든 애니메이션이지만, 일초에 한 번씩 우리가 의도한 대로 정상적으로 애니메이션이 처리되고 있는 것을 볼 수 가 있습니다.
다시 한번 정리해볼까요? 앱인벤터는 애니메이션 처리를 위한 이미지 컨트롤과 Clock을 추가하여 화면 디자인 작업을 진행합니다. 그리고 이미지 List와 Index 변수를 상황에 맞게 적용하고, Clock의 Timer이벤트를 사용하여 애니메이션을 만들어내는 코드 Block 구성 단계를 거칩니다. Emulator와 Inventor의 통신을 통해 Inventor가 Emulator를 Control하게 되면 이어서 실행여부를 최종 확인하면 됩니다. 여러분도 앱인벤터를 통해 직접 애니메이션을 만들어보는 것은 어떨까요? 수고하셨습니다.
01. 이 강좌에 대해서
앱인벤터의 기능 중 하나인 이미지 처리방법에 대해 알아보려고 합니다. 특히 게임 같은 경우에는 스프라이트 이미지(Sprite image) 등을 처리하는 경우가 많기 때문에 이러한 이미지 구성이 중요합니다. 그럼 지금부터 앱인벤터를 사용하여 애니메이션을 어떻게 만들 수 있는지 함께 살펴보시죠.
02. 강사 소개
김용준 (엠게임 개발 실장)
03. 강사 이력
- 現 (주)엠게임 멀티플랫폼개발실 실장 - 前 (주)엠게임 열혈강호2 개발실 실장 - 前 한국콘텐츠진흥원(KOCCA) 기반조성본부 과장 -前 위메이드 엔터테인먼트 NED팀 파트장 -前 주성대학 컴퓨터 게임과 겸임교수 -前 (주)엘피지소프트 대표 -前 (주)아빛컨 게임산업본부장 -前 (주)쌍용정보통신 CG/VR연구원
- 2010년 (저술)IT EXPERT 3D게임 프로그래밍(개정판)/한빛미디어, 국정교과서 게임프로그래밍(집필)/교육과학기술부 - 2009년 (번역) Scaleform GFx 매뉴얼/Scaleform Korea - 2007년 (저술)Graphics Theory/사이버게임아카데미, DirectX 10/사이버게임아카데미 - 2006년 (번역)문법 떼고 다시 배우는 C프로그래밍/한빛미디어 - 2005년 (저술)모바일 프로그래밍 3(PDA프로그래밍)/사이버게임아카데미, 모바일 프로그래밍 2(GVM/BREW프로그래밍)/사이버게임아카데미 - 2004년 (번역)API로 배우는 Windows구조와 원리/한빛미디어, 2005~2010강컴어워드 선정, (번역)DirectX 9 셰이더 프로그래밍/한빛미디어, 2005~2010강컴어워드 선정, (저술)나는 프로그래머다/한빛미디어, 2005강컴어워드 선정 - 2003년 (저술)좋은 게임을 만드는 핵심원리/한빛미디어, IT EXPERT 3D게임 프로그래밍/한빛미디어, 2003~2009강컴어워드 선정 - 1998년 컴퓨터 그래픽스 캐릭터 개발도구 및 라이브러리 개발/한국전자통신연구원(ETRI) 연구보고서 - 1994년 (저술)재미있는 게임 프로그래밍/미래정보사(ISBN 8978360092)