모바일게임 (40) 썸네일형 리스트형 23. 브러쉬유: 카멜레온색과 배경색 비교 # 카멜레온과 배경색이 같은지 확인하기 색 변화가 끝났을 때 플레이어의 터치로 인해 색 변화를 마쳤을 때, 게임모드를 호출해서 카멜레온과 배경의 색깔이 같은지 확인하는 로직을 짜볼게요. 먼저 GM_Game을 열어주세요. 1. Custom Event 를 하나 만들고, CheckColor라는 이름을 붙이세요. 그리고 ChameleonColor 라는 이름으로 Inputs에 Vector형 핀을 추가해주세요. 외부에서 이 이벤트를 호출할 때 카멜레온의 현재 색상값을 함께 전달해 줄 수 있어요. 2. ChameleonColor 핀을 뽑아 들고 Equal (Vector) 노드를 찾아서 만드세요. ( == 으로 검색해도 나와요) 두 벡터값이 같은지를 확인하는 노드에요. 이 때, 0.0001 이라고 써진 부분은 .. 22. 브러쉬유: 혼합색으로 카멜레온 칠하기 등 # 오랜만에 열어본 Chameleon 블루프린트 정말 오랜만에 Chameleon 블루프린트에서 작업을 해주겠습니다. 블루프린트를 열어주세요. 1. 중요한 것은 아니지만 정리를 위해 몇가지를 수정할게요. 먼저 Components 탭에서 Plane 이라고 써진 Static Mesh Component의 이름을 ChameleonMesh로 지으세요. 2. NewVar_0 변수의 이름을 BodyColor로 바꿔주세요. 3. BeginInputTouch 이벤트 노드에서 아래 노드들을 모두 선택하세요. 4. 선택에 포함된 아무 노드를 골라 우클릭 하세요. Collapse to Macro를 선택하세요. 매크로가 만들어지면 SetColorChangeOrigin으로 이름지으세요. Collapse to Macr.. 21. 브러쉬유: 게임의 시작 # 게임을 시작하기 좋은 타이밍 위젯이 준비가 되었을 때 게임이 시작된 후 GM_Game은 언제 색깔을 만드는 게 좋을까요? Master 위젯 속 Slot에게 만들어진 색을 보내주어야 하기 때문에 PC_Game에서 Master 위젯을 만들고 난 이후가 좋을 것 같아요. Master 위젯이 만들어 진 직후 게임모드(GM_Game)를 호출해서 색상 생성 과정을 포함한 게임 시작을 요청하겠습니다. 1. Master 위젯을 열어서 그래프(Graph) 모드로 바꾼 뒤 Construct 이벤트를 찾으세요(없으면 만드세요). 이벤트 노드만 남기고 연결된 다른 노드는 지워주세요. 이 노드는 위젯이 만들어진 직후에 자동으로 실행되는 이벤트 노드에요. 2. Get Game Mode노드와 Cast To GM_Game.. 20. 브러쉬유: 플레이어를 속일 페이크 색 만들기 # 페이크 색? 브러쉬유는 다섯개의 제시된 물감 중에 두개를 조합해서 배경색을 맞추는 게임이에요. 그래서 다섯개의 물감 중 세개는 오답이어야 해요. 오답을 만드는 색을 fake color, 페이크 색이라고 부르기로 해요. # 페이크 색 만들기 페이크 색을 만드는 함수를 작성해볼게요. 이번 과정도 GM_Game에서 진행합니다. 1. GM_Game 블루프린트 클래스 안에 SetFakeColors 함수를 만드세요. 2. For Loop 노드를 만드세요. First Index는 2 Last Index는 4로 만드세요. 3. Variables(변수) 항목에서 Colors 배열(Vector형)을 찾아 Get 노드를 만드세요. 4. Set Array Elem 노드를 만들고 아래처럼 연결하세요. .. 19. 브러쉬유: 배경색을 만드는 두가지 색 만들기 # 이 장의 진행 순서 구현 먼저, 원리는 나중에 이번 장에서는 수학적인 얘기를 해야돼요. 그런데 처음부터 TMI로 가면 조금 지루할 수 있기 때문에 기능 구현을 먼저 하고 수학 이야기는 뒷부분에 배치할게요. 궁금하신 분들만 보고 넘어가세요. 이번 장에서 가장 중요한 포인트는, 섞으면 배경색이 되는 두가지 물감 을 만든다. 입니다. # 정답을 만드는 함수 MakeTubeColor 배경색(정답)을 만들어 줄 두가지 색을 생성해주는 함수를 만들어볼게요. 저번 장과 마찬가지로 GM_Game에서 작업합니다. 1. MakeTubeColor 함수를 만드세요. 함수 만드는 방법이 기억나지 않으신다면 저번 장을 참고해주세요. 앞 장에서 만든 함수인 Make Background Color 함수는 '반환값'으로.. 18. 브러쉬유: 랜덤 배경색 만들기 브러쉬유는 랜덤하게 주어진 배경색을 색 조합으로 맞추는 게임이에요. 이번 장에서는 게임의 시작이라고 할 수 있는 [배경색을 랜덤하게 만드는 로직]을 만들어 볼게요. # 배경 오브젝트 가져오기 GM_Game의 로직 구현 11장에서 만든 GM_Game(게임모드)을 쓸 시간이 됐네요. 제가 11장에서도 잠깐 언급했듯이 게임모드는 게임을 주관하는 역할을 해요. 그래서 배경색을 바꾸는 역할을 맡겨보려고 합니다. 1. 배경색을 바꾸려면 먼저 배경으로 쓰인 판떼기를 불러내야 해요. GM_Game을 열어서 Custom Event를 만들고 SetBackGroundReference로 이름을 지으세요. 2. Get All Actors Of Class 노드를 만들고 Actor Class에는 Static Me.. 17. 브러쉬유: UI 기능 구현(2) # 드래그 기능 구현 Item 위젯 브러쉬유에서 드래그 앤 드롭 기능은 ItemSlot과 그 위에 올라간 Item 위젯, 그리고 손가락의 상호작용으로 만들어요. 그리고 그 상호작용의 시작은 Item 위젯을 손가락으로(마우스로) 터치해서 꺼내는 것이에요. 다른 말로 드래그라고 합니다. 1. Item 위젯을 열고 Graph 모드로 넘어가세요. 그 다음 좌측 My Blueprint 탭의 Functions 항목을 찾아보세요. 마우스 커서를 올리면 Override 버튼이 나타나요. 2. Functions의 Override 버튼을 눌러서 나오는 항목 중 On Touch Started 를 선택하세요. 3. Functions 항목에 Touch Input 카테고리 아래 OnTouchStarted 가 생겼고, .. 16. 브러쉬유: UI 기능 구현(1) # 이번 시리즈를 마치면 얻게 되는 것 물감 튜브 드래그 앤 드롭 serviceapi.nmv.naver.com 이번 시리즈(?)를 마치면 위 영상에서처럼 물감 튜브(ItemWidget)를 슬롯(SlotWidget)에 드래그 앤 드롭으로 배치할 수 있게 될거예요. 진행 순서는 아래와 같아요. 1. 물감 튜브 생성 로직 구현 2. 드래그 앤 드롭 기능 구현 3. Master 위젯 블루프린트 로직 일부 구현 # 물감 튜브 생성 + 생성시 물감 색상 정하기 게임 상에서 물감 튜브를 생성할 때, 색상 값을 전달해서 원하는 색의 물감 튜브가 만들어지게 해보겠습니다. 1. ItemWidget을 여세요. 그리고 우측 상단에 Graph(그래프 모드 이동 버튼)를 누르세요. 2. 변수를 하나 추가하세요. 이름은.. 15. 브러쉬유: 게임화면 세팅하기 # 이번 장에서 다룰 내용 먼저, 레벨에 카메라를 설치해서 플레이어의 시점을 고정시킬 거예요. 그리고 Play 버튼을 누르면 화면 양쪽에 나타나는 가상 컨트롤러도 빼겠습니다. 추가로 배경화면을 레벨에 배치하고 구름이 흘러가는 효과 또한 만들어 줄게요. # 카메라 설치하기 레벨에 카메라를 설치하고 게임 시작시 플레이어가 설치된 카메라의 시점을 사용하게 만들어볼게요. 1. 에디터 메인화면 Modes 탭에서 Camera 검색 후 레벨에 가져오세요. 2. 아마 어두워서 카메라가 안보일거예요. 이 때는 View Mode를 Unlit으로 바꿔주세요. 3. 카메라를 선택한 상태에서 Transform의 Location 과 Rotation을 모두 0으로 잡으세요. 원점으로 돌린 상태에서 위치와 회전값을 잡.. 14. 브러쉬유: UI 만들기(3) # Master 위젯 조립하기 1. Master 위젯을 여세요. 2. 먼저 LifeBox 위젯을 배치하겠습니다. Palette 탭의 User Created 카테고리에서 LifeBox 찾아 생성하세요. 3. LifeBox의 디테일 패널에서 아래 그림에 표시된 대로 옵션을 조절하세요. 혹은 원하시는 대로 수치를 조금씩 바꾸어도 좋습니다. (Size To Content는 체크상태로 유지하세요. 이 옵션은 내용물의 크기에 맞게 자동으로 위젯의 크기를 조절해주는 옵션이에요.) 4. 이런 느낌이면 오케이입니다. 앵커가 좌측 상단에 자리하고 있어야해요. 5. 이번엔 ComboBox를 불러오세요. 6. 디테일 패널에서 앵커 위치를 정 중앙에 배치시키세요. 7. 디테일 패널에서 Position X,.. 13. 브러쉬유: UI 만들기(2) 계속해서 UI 작업을 진행하겠습니다. #아이템 위젯(ItemWidget) 만들기 이번에는 아이템 위젯을 만들어 볼게요. 아이템 위젯에는 드래그 앤 드롭으로 움직일 수 있는 물감 튜브를 구현하겠습니다. 1. ItemWidget을 여세요. (그림 생략) 2. 계층구조(Hierarchy) 창에서 기본으로 들어가 있는 Canvas Panel을 지우고 SizeBox와 이미지를 아래 그림처럼 구성하세요. 3. 사이즈 박스(Size Box)의 디테일 패널에서 Width Override 및 Height Override를 120으로 설정하세요. 4. 미리보기 사이즈 설정을 Desired 로 바꾸세요. 5. 이미지를 선택하고 디테일 패널에서 Image를 PaintTube로 바꾸세요. # 라이프 박.. 12. 브러쉬유: UI 만들기(1) # 이번 장부터 다룰 내용 지난 강좌에서 우리는 브러쉬유에서 사용할 게임모드(GM_Game)와 플레이어 컨트롤러(PC_Game)를 생성하고 게임에 적용했어요. 이번 장부터는 플레이어의 화면에 띄워줄 UI를 만들어볼텐데요. 그 전에 어느 정도 작업이 진행된 화면을 보면서 어떤 요소들이 필요할지 얘기해볼게요. 작업이 필요한 UI는 다음과 같아요. 1. 좌측 상단 생명력 표시 2. 중앙 콤보 표시 3. 하단 파레트 표시 4. (스크린샷에는 표시되지 않지만) 물감튜브 아이콘 드래그 앤 드롭 기능 구름은 UI가 아니에요. 그냥 배경이에요. 이제 작업을 시작해보죠. # UI의 기본요소인 위젯 만들기 UI화면에는 상태표시창, 버튼등의 다양한 요소가 있어요. 언리얼 엔진에서는 이러한 요소들을 모두 위젯이라고 부.. 11. 브러쉬유: 게임모드와 플레이어 컨트롤러 생성 # 들어가기에 앞서: 기획 변경 알림 이번 튜토리얼을 진행하기 전에 수정사항을 말씀드릴게요. 브러쉬유는 원작인 브러쉬미의 업그레이드 버전으로 만들기로 기획적 결정을 내렸어요. 대략적으로 원작과 달라지는 부분은 아래와 같아요. (양질의 튜토리얼을 제공하기 위한 결정이라고 생각해주세요) 1. 게임 진행 방식: 원작의 3원색 자유 조합 방식에서 주어진 색상 몇가지를 조합하는 방식으로 변경 2. UI: 진행 방식의 변경에 따른 UI의 변경 및 아이콘 추가 3. 사운드: BGM 및 사운드 추가 # 이번 장에서 다룰 내용 게임 모드, 플레이어 컨트롤러 이번 장에서는 눈에 보이지는 않지만 없어서는 안되는 것들을 다룹니다. 먼저 게임의 시작, 진행, 끝을 책임지는 게임모드를 생성하고, 플레이어로부터 들어오는 입력을.. 10. 브러쉬유: 카멜레온을 터치하면 일어나는 일(4) 지난 장에서 우리는 카멜레온 색 변화의 문제점 4개 중 2개를 해결했어요. 이번 장에서 나머지 문제들을 모두 해결하고 넘어갈게요. 1. 터치(클릭) 할 때마다 노랑->흰색 변화를 반복한다. 한번 변한 후에도 클릭하면 다시 노랑->흰색으로 변한다. 2. 시작부터 파란 반점이 있는 것이 부자연스럽다. 3. 변하는 속도가 조금 빠른 것 같다. 4. 터치(클릭)를 어디서 하든 고정된 위치에서 색 변화가 시작된다. # 문제해결(3): 천천히 색깔을 바꾸게 하자. 1. Chameleon 액터 블루프린트에 쓰인 타임라인(Timeline_0)을 여세요. 노드를 더블클릭하거나 탭이 열려있으면 탭이동을 하셔도 돼요. 2. 오른쪽 키의 값을 바꿔줄게요. 키를 선택(좌클릭) 하고나서 Value를 5.0에서 2.0으로 .. 9. 브러쉬유: 카멜레온을 터치하면 일어나는 일(3) # 문제 찾기 지난 장에서 얘기한 대로 먼저 왜 카멜레온 색 변화가 이상하게 느껴지는지 알아볼게요. 카멜레온 색변화의 문제점 serviceapi.nmv.naver.com 이상하게 느껴지는 이유 1. 터치(클릭) 할 때마다 노랑->흰색 변화를 반복한다. 한번 변한 후에도 클릭하면 다시 노랑->흰색으로 변한다. 2. 시작부터 파란 반점이 있는 것이 부자연스럽다. 3. 변하는 속도가 조금 빠른 것 같다. 4. 터치(클릭)를 어디서 하든 고정된 위치에서 색 변화가 시작된다. # 문제해결(1): 노랑->흰색 반복 패턴을 없애자. # 문제해결(2): 파란 반점을 없애자. 우리가 원하는 모습은 흰색으로 변했으면 그 상태를 유지하면서 다른색으로 변하는 것이죠. 그리고 파란 반점도 없었으면 합니다. 1. Chame.. 8. 브러쉬유: 카멜레온을 터치하면 일어나는 일(2) # 만지면 색을 바꾸는 카멜레온 카멜레온에게 터치 입력을 주면 색을 바꾸는 작업을 진행하겠습니다. 새로운 내용이 많이 나와도 당황하지 마시고 천천히 따라오세요. 1. Chameleon 액터 블루프린트의 Event Graph(이벤트 그래프)를 여세요. 지난 장에서 만든 로직이 보여야 합니다. 2. Print String 노드를 지워주세요. (선택 후 Delete키) 3. 좌측 상단 Components 탭에 보이는 Plane을 이벤트 그래프 안으로 끌어다 놓으세요. 4. 아래 그림처럼 파란색 Plane 노드의 핀을 뽑아 들고, 빈공간에서 놓으세요. 검색창이 뜰거예요. 블루프린트 그래프에서 이렇게 핀을 뽑아 들고 노드를 검색하는게 매우매우매우매우매우매우매우매우매우매우매우매우매우매우매우매우매우매우매우매우.. 이전 1 2 3 다음
