본문 바로가기

분류 전체보기

(65)

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 노드의 핀을 뽑아 들고, 빈공간에서 놓으세요. 검색창이 뜰거예요. 블루프린트 그래프에서 이렇게 핀을 뽑아 들고 노드를 검색하는게 매우매우매우매우매우매우매우매우매우매우매우매우매우매우매우매우매우매우매우매우..

7. 브러쉬유: 카멜레온을 터치하면 일어나는 일(1) # 우리가 지금까지 구현한 것과 이번 장에서 만들 것 다시한번 카멜레온의 특징을 살펴볼게요. 카멜레온 특) 1. 카멜레온 처럼 생겼다. 2. 터치하면 색이 변한다. 3. Palette 위의 색으로 변한다. 4. 그림자가 있다. 지금까지 우리는 1. 카멜레온 처럼 생겼다.를 마쳤어요. 카멜레온의 모습과 색이 변하는 특성을 구현했죠. 이제 2. 터치하면 색이 변한다.를 구현해 보겠습니다. "터치하면 색이 변한다." 이 말을 풀어쓰면 이렇게 쓸 수 있을거예요. 1. 카멜레온은 터치 입력을 받는다. 2. 이 때, 카멜레온의 색이 변한다. 지금부터 이 두가지를 만들어볼게요. # 카멜레온은 터치 입력을 받는다. 모바일 게임을 할 때 플레이어(사람)는 화면을 터치해요. 이 터치 입력에 카멜레온이 반응하게 만들..

6. 브러쉬유: 카멜레온 머티리얼 완성하기 # 진짜 카멜레온 처럼 앞으로 몇 장만 더 지나면 아래 영상과 같은 효과를 만들 수 있을거에요. 색이 변하는 카멜레온 serviceapi.nmv.naver.com # 새로운 색이 서서히 퍼져나가는 원리 카멜레온의 색이 변하는 모습을 자세히 관찰해보면 이런 생각이 들거에요. - 색이 순식간에 바뀌는 게 아니라 새로운 색이 서서히 퍼져나가는군? 지금부터 이 특성을 구현해보겠습니다. 1. M_Chameleon 머티리얼을 열고 RadialGradientExponential을 꺼내듭니다. 이번 구현의 핵심이 될 노드입니다. 2. 이번에는 4개의 ScalarParameter 노드를 만드세요. 3. 방금 만든 ScalarParamter 노드를 하나씩 클릭한뒤, 디테일 패널에서 Parameter Na..

5. 브러쉬유: 카멜레온 만들기(3) 이번 장에서는 카멜레온의 색을 바꾸는 방법을 가볍게 알아볼게요. # 카멜레온 색 입히기 1. M_Chameleon 머티리얼 에셋을 열어주세요. 2. 머티리얼 그래프의 빈 공간에 우클릭을 하고 VectorParameter 노드를 찾아서 만드세요. 3. 위와 같은 방법으로 Multiply 노드도 찾아서 만듭니다. 4. 아래와 같이 노드를 연결하세요. 5. Param이라고 적힌 노드(VectorParameter)를 더블클릭하면 Color Picker 창이 뜹니다. 원하는 색을 고르고 OK 버튼을 눌러주세요. 6. 결과 화면 입니다. 카멜레온의 색이 VectorParameter 노드에서 지정한 색으로 바뀌었습니다. 7. 저장을 꼭 눌러주세요. 8. Chameleon 액터 블루프린트 속의..

4. 브러쉬유: 카멜레온 만들기(2) # 이번 장에서 할 일 시작하기 전에 카멜레온의 특징을 다시 한번 떠올려 보면 다음과 같습니다. 카멜레온 특) 1. 카멜레온 처럼 생겼다. 2. 터치하면 색이 변한다. 3. Palette 위의 색으로 변한다. 4. 눈동자 색은 변하지 않는다. 5. 그림자가 있다. 이 장에서 우리는 1. 카멜레온 처럼 생겼다 라는 특징을 구현할거에요. 이 작업을 진행하기 위해 아래 그림파일(.tga) 두 개를 다운받으세요. 카멜레온 몸통과 눈을 그리기 위한 파일입니다. 그리고 시작하기 전에 한가지 기획을 수정하겠습니다. 4. 눈동자 색은 변하지 않는다. 를 구현하지 않을거에요. 그 이유는 다음과 같아요. - 카멜레온을 그리는 과정이 복잡해지는 것을 막기 위해 - 눈동자 색이 변하는 게 더 괜찮아 보여서 그래서 원작인 ..

3. 브러쉬유: 카멜레온 만들기(1) # 카멜레온의 특징 알아보기 우리가 만들 카멜레온은 어떤 특징을 가져야 할까요? 영상을 다시 한번 볼게요. 카멜레온 특) 1. 카멜레온 처럼 생겼다. 2. 터치하면 색이 변한다. 3. Palette 위의 색으로 변한다. 4. 눈동자 색은 변하지 않는다. 5. 그림자가 있다. 일단 가볍게 이 정도만 적어놓고 시작해보죠. 추가할 내용이 생기면 그때 그때 추가해주도록 할게요. 자, 이제 언리얼 엔진이 가진 강력한 기능을 맛볼 차례에요. 시작해볼까요? # 블루프린트(Blueprint) 만들기 방금 적어놓은 카멜레온의 특징들을 실제로 게임에 구현 하려면 어떻게 해야할까요? 해당 내용을 블루프린트 라는 곳에 적어두면 돼요. 블루프린트에 대한 설명은 아래 링크된 페이지에 자세하게 나와있어요. 블루프린트 소개 블..

2. 브러쉬유: 레벨 만들기 # 레벨이란? 게임을 제작할 때 레벨(Level)이라는 말을 써요. 무슨 뜻일까요? 레벨은 게임을 하는 공간을 말해요. # 새 레벨 만들기 이번 장에서는 플레이어가 게임을 하는 공간, 즉 레벨을 만들어 볼게요. 1. File > New Level...을 실행해주세요. 2. New Level창이 뜨면 Empty Level을 선택해주세요. 아래처럼 깜깜한 화면이 나오면 성공이에요. # 레벨 저장하기 앞으로 게임을 만들 공간이기 때문에 저장을 해줄게요. 1. Save Current를 눌러주세요. 2. 레벨을 어디에 저장할지물어보는 창이 뜰거예요. 3. Content폴더 우클릭 > New Folder 를 선택해서 새로운 폴더를 만들어 줄게요. 4. 새로 만든 폴더의 이름은 Maps로 붙여줄게요. 레벨(Level..

1. 브러쉬유 소개 및 프로젝트 생성 # 게임소개 이번 시리즈에서 만들 게임은 저의 첫번째 습작 브러쉬미(Brush Me)의 튜토리얼 버전 브러쉬유(Brush You)에요. 초보자 분들도 따라올 수 있게 간단한 게임을 골라보았어요. 브러쉬미 - Google Play 앱 - 귀여운 카멜레온을 위해 알맞은 색깔을 만들어 보세요! - 색을 만든 뒤 카멜레온을 터치하면 카멜레온의 색이 서서히 변합니다! - 누구나 플레이 할 수 있을만큼 쉬운 게임입니다! 안녕하세요. play.google.com 게임의 내용은 다음과 같아요. - 플레이어는 카멜레온의 색을 배경색과 맞춰주어야 한다. - 배경색은 매 번 랜덤하게 바뀐다. - 배경색과 카멜레온의 색이 얼마나 일치하는지에 따라 결과 점수가 나온다. - 점수가 기준 점수보다 낮으면 라이프가 줄어든다. -..

UE 4.25 프리뷰 업데이트 - 모바일 관련 안녕하세요. 스튜디오 팝피플의 팝입니다. 최근, 언리얼 엔진의 4.25 프리뷰(미리보기) 버전이 나왔습니다. 언리얼 엔진의 업데이트 주기는 매우 빠른 편인데요. 그만큼 기능 추가와 버그 수정이 활발하게 이루어 지고 있습니다. 이 글에서는 4.25 프리뷰 버전의 모바일 관련 업데이트 7개를 확인해보겠습니다. 원문은 아래 스크린샷을 참고하세요. 1. 새로운 기본 렌더러(모바일 용) ★ 이제 모바일용 렌더러 기본 설정이 안드로이드용은 ES3.1, iOS용은 Metal 2.0이 되었습니다. ES2.0 등 이전 버전의 렌더러는 사용할 수 없습니다. 기본 설정은 그렇고, Vulkan 및 Metal 2.1도 당연히 사용할 수 있습니다. 2. 안드로이드 NDK 버전업 14 → 21 ★★ 4.25부터 ND..

구글 플레이 게임 출시하기(1): 구글 개발자 등록 구글 플레이 스토어에 게임(또는 앱)을 올리기 위해서는 개발자 등록을 먼저 해야합니다. 여기서 그 방법을 스크린샷과 함께 소개해드릴게요! 여기서 잠깐, 아래 링크를 타고 고객센터 페이지로 가시면 이 포스팅의 내용을 포함한 대부분의 정보를 얻으실 수 있습니다. https://support.google.com/googleplay/android-developer#topic=3450769 Play Console 고객센터 support.google.com # 개발자 등록하기 "돈은 준비 됐겠지?" 1. 먼저 구글 개발자 페이지에 들어가세요. https://developer.android.com/distribute?hl=ko Google Play | Android Developers..

안드로이드 스마트폰에서 게임 실행하기 언리얼 엔진으로 모바일 게임을 제작했다면 스마트폰에서 잘 동작하는지 테스트 해봐야겠죠? 여기서 그 방법에 대해 간략하게 소개해드릴게요. (개별 게임의 제작 과정은 카테고리에서 확인하실 수 있습니다.) 아래 과정을 따라하시면서 문제가 발생하는 경우 언리얼 엔진을 삭제하는 대신 댓글로 도움을 요청하세요. # 안드로이드 스마트폰 세팅 개발자 옵션 및 USB 디버그 모드 활성화 아래 언리얼 엔진 공식문서의 링크를 참고하셔서 안드로이드 스마트폰을 세팅하세요. 개발용 Android 디바이스 준비 UE4 로 개발에 사용할 Android 디바이스를 준비하기 위해 해야 하는 작업을 알아봅니다. docs.unrealengine.com 세줄 요약 1. 설정에서 [빌드 번호]를 찾는다. 2. [빌..

Intro. 언리얼 엔진으로 모바일 게임 만들기 게임을 좋아하시나요? 혹시 게임을 직접 만들어 보고 싶으신가요? 게임을 만들어 본 적도 없고 만드는 방법도 모르시나요? 이 블로그는 위 질문에 YES라고 대답하신 분들이 보시면 좋을만한 블로그 입니다. # 필자와 블로그 포스팅 소개 안녕하세요. 1인 게임 개발자 '팝'입니다. 저는 이곳에서 지금까지 쌓아 온 경험과 자료들로 언리얼 엔진을 이용한 모바일 게임을 만드는 방법을 포스팅하고 있습니다. 포스팅의 목적은 초보자 분들이 언리얼 엔진을 이용해서 모바일 게임을 만들고, 그렇게 만든 게임을 출시하는 경험을 하게 해드리는 동.시.에. 제 개인적으로도 게임 개발이라는 것을 더 많이 배우는 것입니다. (가르치면서 배우는 것의 실천입니다!) # 시작하기 전에 드리고 싶은 말 & 가이드 비개발자가 단기간에 ..

이전 1 2 3 4 5 다음

티스토리툴바