Smart Academy

(6) 다양한 색을 가진 글자 추가하기

Widget Tool에서 Template을 Label로 지정하고, 'Anchor(Center)'의 하위에 있는 Panel에 생성시킵니다.

생성된 'Label'의 이름을 'Label (Content)'로 변경하고, 기존에 'Anchor(Center)' > Panel 하위에 있던 'Label'의 이름은 'Label (Title)'로 변경합니다.

[그림 5-14]

그리고 'Label (Title)'의 y 포지션 좌표를 140으로 변경하고, x, y 사이즈를 30으로 변경시킵니다.

[그림 5-15]

'Label (Content)'의 x, y 포지션 좌표를 -195, 100으로 변경합니다.

[그림 5-16]

그리고, 아래로 내려가서 Pivot을 'Top Left'로 변경해줍니다.

[그림 5-17]

'Label (Content)'의 UITiled Sprite (Script) 컴포넌트에서 내용을 자유롭게 작성합니다.

<결과화면>

[그림 5-18]

<색상 별 16진수 값>

[그림 5-19]

한국의 구글 핸드스튜디오 - 스마트아카데미 (2)

차량에서 아이폰을 쓴다면 - 스마트 아카데미

국내기업 개인정보유출 정리 - 스마트 아카데미

모바일게임 플랫폼 시장 춘추전국시대 - 스마트아카데미

스타트업 얼라이언스 출범 - 스마트 아카데미

SK텔레콤 서비스 장애 보상안내발표 - 스마트아카데미

Cre8tive ux 훈련 강좌 2014년 4월12일 개강[토요반]

(4) 글씨 넣기 – Label

화면 내에 글씨를 넣기 위해서는 Label이 필요합니다.

Widget Tool에서 Template을 Label로 지정하고, 두 개의 Anchor 오브젝트의 하위에 있는 Panel에 Label을 하나씩 생성해줍니다.

[그림 5-10]

상단 바에 들어간 Label의 y 포지션을 -15로 변경하고, UILabel (Script)에서 적고 싶은 말을 적어봅시다.

[그림 5-11]

그리고, 화면 중앙에 들어간 Label도 UILabel (Script)에서 적고 싶은 말을 적어봅시다.

단, 여기서 주의해야 할 점은 현재 사용되고 있는 Font가 한글은 지원하지 않기 때문에 한글을 적어서는 안됩니다.

[그림 5-12]

(5) 배경화면 꾸미기

Widget Tool에서 Template을 Tiled Sprite로 지정하고, Sprite는 Honeycomb를 선택하여 'Anchor(Center)'의 하위에 있는 Panel에 생성시킵니다.

생성된 'Tiled Sprite (Honeycomb)'의 Inspector창에 있는 Transform에서 x, y, z 사이즈를 500, 500, 1로 변경합니다.

그리고, UITiled Sprite (Script) 컴포넌트에서 Depth 값을 0으로 바꿔서 'Sprite (Dark)'와 동일한 Depth 수준으로 만들어 준 뒤에, 'Sprite (Dark)'의 Depth를 -1로 만들어줍니다.

[그림 5-13]

(그리고 'Tiled Sprite (Honeycomb)'의 UITiled Sprite (Script) 컴포넌트에서 Color Tint를 조절해서 색을 너무 밝지 않게 적당히 조정해보자.)

창의융합형 교육이 대세다.

스마트아카데미 책 소개 - 개발자, 나를 말하다

스마트아카데미-시설 소개

창조경제시대 왜 코딩교육인가 - 스마트 아카데미

스마트 아카데미 창의인재 교육 6개월 과정 등록안 -스마트 앱 전문 교육기관

정부 벤처창업지원 통해 경제 활성화 나선다

한국의 구글 핸드스튜디오 안준희 대표 - 스마트아카데미

5. NGUI로 간단한 화면 꾸미기

이제 본격적으로 NGUI를 이용한 UI화면 구성을 해보겠습니다.

아래 그림은 이번 예제에서 완성하려고 하는 화면구성입니다.

[그림 5-1]

'NGUI Control Sample'이라는 이름으로 새로운 프로젝트를 만들고, Project창에 Scenes 폴더를 만든 뒤에 'Main'이라는 이름으로 Scene을 저장합니다.

그리고 Main Camera를 삭제하고, NGUI 패키지를 Import 시켜줍니다.

< 제작 준비물 >

Sprite(Dark) * 4, Label *3, Button * 2 Sprite(Light) * 1, Tiled Sprite * 1

※ Sprite : GUI의 기본인 사각형. Dark, Light 등 사각형의 형태를 변경 가능.

※ Label : 화면에 보일 Text, 원하는 대로 Text 변경 가능.

(1) 뒷 배경 만들기 – Sprite(Dark)

앞서 만들어둔 'Main' Scene에 먼저 UI Widget을 생성할 수 있도록 셋팅 환경인 UI Root, Camera, Anchor, Panel이 Hierarchy에 존재할 수 있도록, 상단의 메뉴 NGUI > Create a New UI 메뉴를 통해 네 개의 객체를 생성합니다.

그리고 상단의 NGUI > Create a Widget 메뉴를 클릭해서 Widget Tool 창을 오픈한 뒤, Atlas에 SciFi Atlas를 Font에 SciFi Font – Normal을 설정해 주고, Template을 Sprite형식으로 하고, Sprite에 Dark이미지를 설정하여 Panel에 Add To 버튼을 통해 Sprite (Dark) 객체를 생성합니다. (4강의 (5)NGUI 기초 실습 참조.)

[그림 5-2]

[그림 5-3]

그리고 방금 생성한 Sprite (Dark) 객체의 Inspector창에서 Scale값을 조정합니다. (X = 500, Y = 500)

[그림 5-4]

이로써 Background가 세팅되었습니다.

그 위에 다른 이미지들을 올려보도록 하겠습니다.

(2) 색깔 있는 사각형 만들기 – Sprite(Dark)

앞서서 Sprite (Dark)를 생성했던 것과 마찬가지로 Template을 Sprite형식으로 하고, Sprite에 Dark이미지를 설정하여 Panel에 Add To 버튼을 통해 Sprite (Dark) 객체를 3개 생성합니다.

생성한 3개의 Sprite의 크기와 위치를 Transform을 통해서 자유롭게 원하는 대로 조정해주고, Inspector에 있는 UISprite (Script) 컴포넌트에서 Color Tint 변경을 통해 원하는 색으로 변경시켜 준 뒤, 색상에 맞춰서 오브젝트의 이름을 바꿔줍니다.

[그림 5-5]

(3) 상단 바 만들기 – Sprite(Light)

상단 메뉴에서 Game Object > Create Empty를 클릭해서 빈 오브젝트를 생성합니다.

생성한 빈 오브젝트의 이름을 'Anchor(Top)'으로 변경하고, Inspector창에 있는 Transform 정보에서 포지션 x, y, z 값을 모두 0으로 설정하고, 사이즈 x, y, z, 값은 모두 1로 설정합니다. (기존에 있던 'Anchor'오브젝트의 이름은 'Anchor (Center)'로 변경합니다.

[그림 5-6]

'Anchor(Top)' 오브젝트의 Inspector창에서 Add Component 버튼을 클릭해서 NGUI > UI > Anchor를 선택하여 UIAnchor (Script) 컴포넌트를 추가합니다.

그리고 UIAnchor (Script) 컴포넌트의 Side 기능에서 Top을 선택합니다.

[그림 5-7]

Hierarchy창에서 생성한 'Anchor(Top)' 오브젝트를 'Camera' 오브젝트에 드래그인 하여 'Camera'의 하위 객체로 만들어 줍니다.

그리고, 상단 메뉴의 NGUI > Create a Panel를 클릭해서 Panel을 하나 생성합니다.

생성한 Panel의 Inspector창에 있는 Transform 정보에서 포지션 x, y, z 값을 모두 0으로 설정하고, 사이즈 x, y, z, 값은 모두 1로 설정한 뒤, 생성한 Panel을 'Anchor(Top)' 오브젝트에 드래그인하여 'Anchor(Top)' 오브젝트의 하위객체로 만들어줍니다.

[그림 5-8]

Widget Tool창에서 Template을 Sprite로, Sprite을 Light로 지정하여 Anchor(Top) 오브젝트의 하위에 있는 Panel에 'Sprite(Light)'를 추가합니다.

생성된 'Sprite(Light)'의 Inspector에 있는 Transform에서 포지션 x, y, z 값을 0, -20, 0으로 설정하고, 사이즈 x, y, z, 값은 500, 40, 1로 설정해줍니다.

그리고, Inspector창에 있는 UISprite (Script) 컴포넌트에서 Color Tint 변경을 통해 Sprite색상을 원하는 색으로 변경시켜 준 뒤, 색상에 맞춰서 오브젝트의 이름을 바꿔줍니다.

[그림 5-9]

스마트 시장에서 성공하기 위한 당신의 첫 걸음스마트 아카데미

스마트 아카데미 '스마트 앱 개발' 교육과정 안내

스마트 앱 개발 학원 국비지원 안내

스카이 아카데미 취업 정보 - 선데이토즈 이야기

창의인재과정 안내

크리에이티브 UX교육 훈련과정 안내

우아한 형제들 김봉진 대표 - 앱 개발 전문 학원 스마트 아카데미

3) Prefab 만들기

이제 이렇게 만들어진 큐브를 Prefab 구성을 통해서 하나 더 만들어보겠습니다.

그럼 우선 Prefab을 만들어보겠습니다.

먼저 Project 창에서 Create > folder 메뉴로 새 폴더를 하나 생성해준 뒤에 폴더의 이름을 Prefab이라고 지어줍니다.

그리고 Hierarchy창에서 'Cube' 오브젝트를 앞서 생성한 Prefab폴더로 드래그합니다.

그러면, 파란 상자모양의 아이콘이 달려있는 'Cube' Asset이 생성되어 있는 것을 보실 수 있는데, 이 Asset이 바로 Prefab입니다.

[그림 3-34]

이렇게 생성한 Prefab은 현재까지 설정한 오브젝트가 가진 모든 컴포넌트 설정을 동일하게 저장하고 있습니다. 따라서 비슷한 오브젝트를 대량으로 복제를 해야 하거나, 앱이나 게임을 제작할 때 특정 오브젝트를 어떠한 이벤트를 통해 생성할 때, 유용하게 사용됩니다.

'Cube' Prefab을 클릭 & 드래그 해서 Hierarchy창 안으로 넣어봅시다.

그러면 [그림 3-35]와 같이 짙은 파란색 글씨로 Prefab을 통해서 생성된 'Cube' 오브젝트를 확인할 수 있습니다.

[그림 3-35]

이 오브젝트를 기존의 'Cube' 오브젝트와 차별성을 두기 위해서 이름을 'Cube2'로 변경해줍니다.

[그림 3-36]

지금까지 프로그래밍에 대한 전반적인 이해와 Playmaker를 통한 비주얼 프로그래밍 방법에 대해서 알아보았고, FSM코드를 포함한 다양한 정보를 가지고 있는 오브젝트를 Prefab으로 구성하는 방법에 대해서도 알아보았습니다.

다음 장에서는 GUI에 대해서 알아보겠습니다.

스마트아카데미 책 소개 - 개발자, 나를 말하다

창의융합형 교육이 대세다.

스마트아카데미-시설 소개

페이스북 왓츠앱 인수

스마트 아카데미 창의인재 교육 6개월 과정 등록안 -스마트 앱 전문 교육기관

스마트 앱 전문 교육기관 스마트아카데미가 추천하는 안드로이드앱(1)

스마트 폰 삶 속으로 들어오다

정부 벤처창업지원 통해 경제 활성화 나선다

2) State 구성하기

Playmaker의 Editor창에 있는 State탭에서 'State 1'이라고 되어 있는 이름을 'Wait' 이라고 변경해줍니다.

[그림 3-20]

이 State가 하게 될 역할은 큐브가 바닥에 떨어지는 시간 동안 기다릴 역할을 하게 될 것입니다.

그러면 이제 기다리라는 내용의 Action을 State에 넣어서, State 구성을 완성해보겠습니다.

Playmaker Editor 창에서 State를 선택한 상태에서 State 탭을 보면 우측 하단에 Action Browser라는 버튼을 볼 수 있습니다.

[그림 3-21]

이 버튼을 클릭하면, State에 넣을 수 있는 액션들이 나열된 창을 보실 수 있습니다.

Action Browser에서 Time > Wait 메뉴를 더블 클릭해서, 'Wait' State에 추가해줍니다.

[그림 3-22]

'Cube'가 'Plane' 위에 떨어지는 속도는 1초 정도 걸리므로, Time의 수치는 기본으로 설정되는 1 값을 그대로 사용합니다.

그 다음, Playmaker Editor창에서 'Wait' State를 우 클릭 했을 때 나타나는 메뉴에서 Add Transition > FINISHED 메뉴를 클릭해서 FINISHED Event를 생성해줍니다.

[그림 3-23]

그리고 다시 State에 설정된 Wait 액션으로 돌아와서 Finish Event를 앞서 설정한 FINISHED Event 이벤트로 연결해줍니다.

[그림 3-24]

이로써, Wait 액션의 기능이 [1초 동안 기다린 다음, FINISHED 이벤트를 발동시켜라.] 라는 행동을 할 수 있게 되었습니다.

이제 다음 State를 하나 더 만들어 준 후에 State 이름을 'Reset Cube Position'이라고 이름을 지어줍니다.

그리고 'Wait' State의 FINISHED 이벤트를 클릭 & 드래그를 해서 화살표를 꺼낸 뒤, 'Reset Cube Position' State에 연결시켜줍니다.

[그림 3-27]

[그림 3-28]

그 다음 'Reset Cube Position' State를 선택하고 Action Browser 창을 Open 한 뒤, Transform 카테고리에서 Set position 액션을 찾아서 더블 클릭하여 'Reset Cube Position' State에 삽입합니다.

[그림 3-29]

그리고 삽입한 Set Position 액션에서 Y축 입력 칸의 우측에 있는 변수 사용(Use Variable) 버튼을 눌러서 해제 상태로 만들어준 뒤, 절대값 2를 입력합니다. (2를 입력하는 이유는 Cube를 선택하고 Inspector창에서 Transform을 확인해보면 큐브가 떨어지기 전에 셋팅되어 있는 Y축 좌표 값이 2이기 때문입니다.)

[그림 3-30]

이렇게 설정된 Set Position 액션의 내용을 설명하자면 다음과 같습니다.

① 움직여야 할 Game Object는 Use owner (FSM이 존재하는 오브젝트. 즉, 'Cube' 자기 자신)

② 움직여야 할 위치는 Y축으로 변수 값이 아닌 절대값 2만큼

③ 움직일 때 참고할 방향 좌표는 World를 기준으로

[그림 3-31]

이제 플레이 버튼을 눌러서 어떤 결과가 나타나는지 확인해봅시다.

Game창에 보이는 화면에서 'Cube'가 'Plane' 위에 떨어졌다가, 다시 원래의 위치로 되돌아가서 떨어지는 것을 보실 수 있습니다.

Playmaker Editor창을 보면 초기에 Start > 'Wait' State에 녹색빛이 머물렀다가, 1초 뒤에 'Reset Cube Position' State로 이동하는 것을 볼 수 있습니다.

다음으로 큐브가 한 번만 포지션이 리셋되는 것이 아니라, 떨어질 때마다 매번 포지션이 리셋이 되도록 한 번 만들어 보겠습니다.

먼저 Playmaker Editor 창에서 'Reset Cube Position' State를 우 클릭 했을 때 나타나는 메뉴에서 Add Transition > FINISHED 메뉴를 클릭해서 FINISHED Event를 생성해줍니다.

그리고, FINISHED Event를 클릭 & 드래그하여 'Wait' State를 타겟으로 하도록 연결시켜 줍니다.

   [그림 3-33]

   그리고 다시 플레이 버튼을 눌러서 매 1초마다 큐브의 위치가 잘 Reset 되는 지를 확인해봅시다.

※'Reset Cube Position' State는 내부에 있는 액션이 Finished Event를 설정할 수 없는 액션이 없는데도 불구하고, FINISHED 이벤트가 타겟으로 설정하고 있는 'Wait' State로 상태 변환이 잘 일어나는 것을 볼 수 있습니다.

그 이유는 시스템에서 기본으로 제공하는 FINISHED 이벤트는 State 내에 Every Frame 과 같이 지속적으로 체크를 해줘야 하는 액션설정이 존재하지 않는 이상 자동으로 다음 State로 처리과정을 넘겨주는 기능을 가지고 있기 때문입니다.

만약, State내에 지속적으로 체크를 하는 속성의 액션이 있다면, Wait이나 Send Event 액션으로 Finished Event를 설정해줘야 처리과정을 다음 State로 넘길 수 있습니다.

다음 강좌에서는 Prefab 만들기에 대해 알아보겠습니다.

스마트 아카데미 '스마트 앱 개발' 교육과정 안내

스마트 앱 개발 학원 국비지원 안내

K팝 홀로그램 상설공연장 개소

구글의 네스트 인수 의미

스카이 아카데미 취업 정보 - 선데이토즈 이야기

창의인재과정 안내

미래창조과학부 창조경제 실현

크리에이티브 UX교육 훈련과정 안내

(6) PlayMaker 사용해보기

1) FSM 만들기.

1강에서 연습했던 프로젝트 파일을 열고, 그 안에 설치된 Playmaker를 활용해서 간단하게 어떤 구조로 비주얼 프로그래밍이 이루어지는지 살펴보도록 하겠습니다.

PlayMaker > PlayMaker Editor 메뉴를 사용해서 Playmaker Editor 창을 엽니다.

[그림 3-13]

[그림 3-14]

위의 그림과 같이 창이 열리면 해당 창을 유니티 인터페이스 안에 적절하게 공간을 할당하여 배치합니다.

에디터 창의 안을 보면 'Select a GameObject'라는 글씨를 볼 수 있는데, 현재 Hierarchy창에서 아무 오브젝트도 선택한 상태가 아니라면 이와 같은 메시지가 나타나게 됩니다. Hierarchy창에서 'Cube' 오브젝트를 선택하면 다음과 같이 내용이 변경됩니다.

[그림 3-15]

'Right-Click to Add FSM' 이 말은 즉, 현재의 창에서 마우스 우측 버튼을 클릭해서 FSM을 생성하라는 뜻입니다.

이 말이 설명하는 대로 창에서 마우스 우측 버튼을 클릭해서 FSM을 생성해보겠습니다.

[그림 3-16]

마우스 우측 버튼을 클릭했을 때, 나오는 메뉴에서 Add FSM을 클릭하면 FSM이 생성됩니다.

[그림 3-17]

FSM을 생성했다면 위의 그림과 같이 Start 라는 이름의 State와 State 1 이라는 이름의 State가 생성된 것을 볼 수 있습니다.

그리고 큰 회색 글씨로 쓰여있던 'Right-Click to Add FSM'이라는 메시지도 'Cube: FSM'이라는 내용으로 바뀐 것을 볼 수 있습니다. (즉, 'Cube' 오브젝트에 'FSM'이라는 이름의 FSM이 생성된 것입니다.)

이제 본격적으로 FSM 프로그래밍을 할 준비가 되었습니다..

이제 'Cube: FSM' Edit창에 있는 FSM 탭을 클릭한 뒤, 'FSM'만 적혀있는 이름 칸의 내용을 'FSM CUBE POSITION RESET'으로 바꿔봅시다.

[그림 3-18]

이렇게 이름을 바꿔주면, 큰 회색 글씨로 쓰여있던 'Cube: FSM'이라는 메시지도 바뀐 것이 보일 것입니다.

이렇게 생성된 'FSM CUBE POSITION RESET' FSM이 컴포넌트로 큐브에 잘 들어가 있는지 확인해봅시다.

[그림 3-19]

다음 강좌에서는 첫 번째 State의 구성에 대해 알아보겠습니다.

우아한 형제들 김봉진 대표 - 앱 개발 전문 학원 스마트 아카데미

창의융합형 교육이 대세다.

창조경제시대 왜 코딩교육인가 - 스마트 아카데미

페이스북 왓츠앱 인수

스마트 앱 전문 교육기관 스마트아카데미가 추천하는 안드로이드앱(1)

스마트 폰 삶 속으로 들어오다

3D프린팅과 스마트네트워크는 우리생활에 어떤 영향을 미칠까?

5) Finite State Machine(FSM)

PlayMaker는 비주얼 프로그래밍 방식 중에서 Finite State Machine(FSM-유한 상태 기계)방식의 프로그래밍 기법을 사용합니다. 수학이나 과학에서 사용하는 조금 어려운 개념입니다.

FSM을 쉽게 이해하기 위해 먼저 상태라는 개념을 알아봅시다.

상태란, 시간의 선상 위에서 어떠한 사물이나 존재가 취하고 있는 모양, 형편을 말합니다.

이러한 각각의 상태들은 상태가 유지되는 동안 해야 될 일들이 있으며, 그 일의 처리에 따라서 어떻게 상태들 간의 흐름이 다음으로 이어질 지가 결정됩니다.

이 상태(State)가 특정하게 제한된 것을 유한상태(Finite State)라 하며, 정해진 절차에 따라서 반복적으로 그 일을 수행하는 것을 기계(Machine)라고 합니다. 즉 FSM은 어떤 특정한 상태에서 정해진 일을 수행하는 것을 말합니다.

이것은 플레이메이커가 기존의 텍스트 프로그램이나 다른 비주얼 프로그램과 차별되는 중요한 특징입니다. 논리전개의 방법을 제한함으로써 오히려 분석과 이해를 쉽게 할 수 있습니다. 즉 마음대로(자유도가 높은) 만드는 텍스트 프로그래밍이나 비주얼 프로그래밍과 다르게 플레이메이커는 플로우 차트(Flow chart)처럼 제한된 상태로써 논리를 전개합니다. 이러한 프로그래밍 기법으로 인하여 다른 사람이 봐도 쉽게 이해할 수 있는 효과를 갖게 되는 것입니다.

말이 어렵나요? 그림으로 표현하자면 [그림 3-11]과 같습니다.

[그림 3-11]

이처럼 FSM은 각 객체 별로 존재하면서 그 안에 다양한 상태들을 담고 있으며, 각각의 상태들 안에는 그 상태에서 수행해야 하는 액션이 담겨 있습니다.

FSM이 들어있는 객체에 적절한 FSM 구성을 해주는 것도 중요하지만, 상태의 안에 그 상태에서만 수행해야 할 액션들을 구성하는 것도 매우 중요한 일입니다.

예를 들어 앞서 보았던 자판기의 FSM 구조를 처음 만들어보면서 '들어온 돈의 액수를 파악한다.' 라는 상태까지만 만들고 그 안에 필요이상의 액션이 들어가면 어떻게 될까요?

[그림 3-12]

분명히 상태는 들어온 돈의 액수를 파악하는 상태이지만, 그 안에서 액션들이 수행하고 있는 부분은 레버를 돌려서 돈이 나가는 것까지 들어있습니다.

이런 경우, 만약 소비자가 돈을 자판기에 넣었을 경우, 돈이 들어는 순간 프로그램이 액션들을 처리하면서 아래와 같은 일이 일어나게 됩니다.

'돈이 들어오길 기다린다.' 상태에서 돈을 넣는 것을 확인하고 '들어온 액수를 파악한다.' 상태로 들어오는 순간, 회색으로 보이는 글씨들은 에러로 인해 처리되지 못하고 남은 액션들이 프로그램으로 처리됩니다. 결과적으로 말하자면, 자판기에 500원을 넣으면 바로 500원이 반환되어 나오는 상황이 되어버리는 것입니다.

이런 예를 보면서 황당하게 느끼거나, '이런 말도 안 되는 실수를 누가해?' 라고 생각하는 분들이 있을지도 모르지만, 이와 같은 실수는 프로그램을 전문적으로 배워보지 않았거나, 배웠더라도 겉핥기 수준으로 배워본 프로그램의 초보자들이 쉽게 저지르는 오류입니다.

이런 황당한 경우를 겪지 않으려면 상태의 개념을 잘 이해하고, 하나의 상태에서 할 수 있는 행동과 할 수 없는 행동에 대해서 잘 구분 지을 줄 알아야 하며, 그것을 바탕으로 본격적으로 프로그램을 짜기 전에, 설계부터 논리적으로 구상을 해본 후 작업에 착수하는 것이 좋습니다

다음 강좌에서는 PlayMaker 사용에 대해 알아보겠습니다.

APP 개발 온라인 강좌 - 제1강 모바일 개발 환경과 Tool 소개 [1-1]

스마트 앱 개발 학원 국비지원 안내

스카이 아카데미 취업 정보 - 선데이토즈 이야기

미래창조과학부 창조경제 실현

스마트아카데미 책 소개 - 개발자, 나를 말하다

창조경제시대 왜 코딩교육인가 - 스마트 아카데미

스마트아카데미-시설 소개

스마트 앱 전문 교육기관 스마트아카데미가 추천하는 안드로이드앱(1)

플레이메이커(PlayMaker) 설치하기

유니티3D는 통합 툴로써 비교적 저렴하고 좋은 툴이지만 여전히 프로그래밍을 C나 Java를 배우거나 할 줄 알아야만 사용할 수 있습니다. 즉 C#이나 Java script 를 잘 하지 못하면 유니티3D의 다양한 기능을 사용하여 앱이나 게임을 만들 수 없습니다. 이러한 프로그래밍은 한 두 달 또는 몇 주 만에 아주 잘하게 되어 자신이 생각하는 앱이나 게임을 구현하는 수준이 되기 어렵습니다. 

또한 그러한 프로그램을 배우는 것이 쉽지 않기에 거의 불가능하다고 하겠습니다. 따라서 프로그램을 전혀 할 줄 모르는 아주 초보자가 자신이 생각하는 앱이나 게임을 만들기 위해서는 유니티3D 메뉴사용법만 알아서는 안됩니다.

이 책에서는 어려운 C#이나 Java Script와 같은 텍스트(Text) 프로그래밍이 아니라 누구나 따라하고 쉽게 이해하여 자신의 논리를 컴퓨터에 구현할 수 있는 비주얼(Visual) 프로그래밍을 하려고 합니다.

이 비주얼 프로그래밍은 여러 가지 툴들이 나와 있습니다. 유니티3D와 같이 사용할 수 있는 플러그 인에서도 Playmaker, UScript, Antares Visio등 몇 개의 툴이 있습니다. 이들 중 초보자가 사용하기에 편리하다고 생각되고 또 재사용성 측면에서 훌륭하다고 생각하는 툴은 플레이메이커입니다.

이제 플레이메이커를 다운받아 설치하겠습니다.

유니티3D를 실행한 상태에서 Ctrl+9 단축키를 사용해서 Asset Store를 오픈 합니다.

그리고 우측 상단에 있는 Search 칸에서 "Playmaker" 로 검색을 합니다.

[그림 3-3]

검색 결과 [그림 3-4]와 같이 PlayMaker가 나오면, 클릭해서 구입을 하시면 됩니다.

[그림 3-4]

PlayMaker를 다운받으면 아래의 그림과 같이 패키지 파일을 볼 수 있습니다.

이 패키지 파일은 플러그인 형식을 띄고 있으며, 유니티에 Import해서 사용할 수 있습니다.

그럼, 이런 패키지 파일을 유니티에 Import 하는 방법을 알아보겠습니다.

[그림 3-5]

위의 [그림 3-5]와 같이 유니티 창 상단 메뉴에서 Asset > Import Package > Custom Package 메뉴를 클릭해서 패키지 로드 창을 오픈 합니다.

[그림 3-6]

그리고 컴퓨터에 저장되어 있던 PlayMaker 패키지 파일을 선택하여 열기 버튼을 누릅니다.

그리고 한 번의 로딩이 끝난 후, 다음 그림과 같이 Importing package 창이 나타나면, Import 버튼을 눌러서 PlayMaker 플러그인 설치를 마칩니다.

[그림 3-7]

Import가 끝나면 Project 창에 우측 그림과 같이 플레이 메이커 Asset들이 생성된 것을 확인할 수 있습니다.

[그림 3-8]

[그림 3-9]

그리고 상단 메뉴 바의 비어 있는 부분을 한 번 클릭하면, 위의 그림과 같이 PlayMaker 메뉴가 생성되는 것을 볼 수 있습니다.

다음강좌에서는 Finite State Machine(FSM)에 대해 알아보겠습니다.

구글의 네스트 인수 의미

스카이 아카데미 취업 정보 - 선데이토즈 이야기

미래창조과학부 창조경제 실현

우아한 형제들 김봉진 대표 - 앱 개발 전문 학원 스마트 아카데미

창의융합형 교육이 대세다.

스마트아카데미-시설 소개

페이스북 왓츠앱 인수

정부 벤처창업지원 통해 경제 활성화 나선다