1인개발 (34) 썸네일형 리스트형 33. 브러쉬유: 옵션 기능 만들기(2) # 이번 장에서 할 일 옵션 창 UI 디자인 이번 시간에는 실제 옵션 창 UI 디자인을 완성하고 기능까지 구현해보겠습니다. # 아이콘 다운로드 받기 Flaticon 이번에는 플랫아이콘(or 플래티콘)사이트에서 다운받은 아이콘으로 UI를 꾸며보려고 하는데요. 물론 꼭 이곳에서 아이콘을 구해야 하는 것은 아니에요. 언리얼 엔진 마켓플레이스나 다른 사이트에서 구하시거나 혹은 직접 제작하셔도 좋습니다. 심지어 그냥 아이콘 없이 진행하셔도 문제 없습니다. Flaticon, the largest database of free vector icons Download all icons in SVG, PSD, PNG, EPS format or as webfonts www.flaticon.com 플랫아이콘에서 제공.. 32. 브러쉬유: 옵션 기능 만들기(1) # 이번 장에서 할 작업 이번 장에서는 실제 UI를 만들기 전에 해놓아야 할 사전작업을 해볼게요. 크게는 아래 다섯가지인데요, 가독성이 떨어지니까 대충 읽어보시고 바로 작업으로 들어가보죠. (GI 에서) 1. 옵션 값 저장할 변수를 만든다. 2. 오디오 액터를 저장할 변수를 만든다. 3. 옵션이 변경할때 호출될 함수를 만든다. (레벨블루프린트에서) 4. 레벨블루프린트에서 GI에 오디오 액터를 전달한다. (효과음 재생을 구현한 모든 블루프린트에서) 5. 효과음 재생시 조건(옵션 값)을 확인하는 부분을 추가한다. # 게임 인스턴스 사전 작업 옵션 저장소 다른 레벨로 이동할 때 저장한 옵션이 초기화되지 않아야겠죠. 그래서 게임 인스턴스에 먼저 옵션 값을 저장할 변수를 만들어줘야해요. 또 브금.. 31. 브러쉬유: 사운드를 추가해서 게임을 흥겹게 만들기 # 이번 장에서는 배경음악과 효과음을 추가해볼게요. 그런데 음악도 이미지처럼 저작권을 잘 지켜서 사용해야해요. 크래딧에 저작자를 표기해야하는 조건으로 사용할 수 있거나 돈을 내지 않으면 사용할 수 없는 음악이 있습니다. 이번 장에서 사용하는 음악이나 효과음은 따로 지정해 드리지 않습니다. 적절한 음원을 직접 찾아서 사용하셔야 해요. 언리얼 마켓플레이스나 기타 음원 사이트, 아래 링크 에서도 한번 찾아보세요. OpenGameArt.org opengameart.org Music and Sound Effects for Videos and Games • PlayOnLoop Discover our looping Royalty Free Background Music for use in Videos, YouTub.. 30. 브러쉬유: 게임 인스턴스(Game Instance)와 데이터 저장 # 이번 장에서는 게임 인스턴스(Game Instance) 클래스의 등장 이번 장에서는 게임 인스턴스(Game Instance)라는 것을 만들거예요. 게임 인스턴스는 게임이 시작할 때 만들어져서 게임이 종료될 때 까지 프로그램 상에 존재하는 친구에요. (Open Level 등으로 Lobby ↔ GameLevel 레벨을 이동할 때 GM_Game, PC_Game, Chameleon, Master(위젯) 등은 모두 메모리에서 지워져요.) 이번 장에서 우리는 프로그램이 종료될때 까지 살아있는 게임 인스턴스 안에 중요한 데이터들을 저장하고, 또 그것을 꺼내서 사용하는 로직을 구현할거예요. 게임 인스턴스는 공식문서 페이지도 없고 딱 이거다 싶은 레퍼런스가 없네요. 그냥, 프로그램 종료할 때 까지 살아있기 때.. 29. 브러쉬유: 로비화면 만들기 # 이번 장을 마치면 손님을 맞이할 수 있게 됩니다. 이번 장을 마치면 아래 영상처럼 Tap to start 글씨가 점멸하는 귀여운 메인화면을 갖게 될거예요. 브러쉬유 메인화면 serviceapi.nmv.naver.com # UI 디자인 by designer KONG92 지난 게임오버 UI 제작 과정을 따라오셨다면 준비물은 이미 콘텐츠 브라우저에 준비되어있어요. 1. Blueprints > UI 폴더에 Lobby 위젯 블루프린트를 만드세요. 2. Lobby 위젯 블루프린트의 디자이너 모드를 여세요. 3. Image를 하나 올려놓고 화면에 꽉 차게 만드세요. (Anchors와 Offset 설정으로) 4. Color and Opacity 값을 다음과 같이 설정하세요. (원하는 색으로 하셔도 돼.. 28. 브러쉬유: 게임오버 UI 제작(2) # 이번 장에서 다루는 내용 지난 장에서 디자인 한 게임오버 UI에 구현되어야 할 기능은 아래와 같아요. 1. 방금 전 게임에서 달성한 최고 콤보 기록 표시 2. 과거부터 현재까지 달성한 최고 콤보 기록 표시 3. 게임 재시작 4. 시작화면(Lobby)으로 이동 5. 구글플레이/게임센터 리더보드(순위표) 확인 6. 옵션창 열기 이번 장에서는 위 6개 기능 중에서 1, 3, 4번을 구현합니다. 6번 옵션버튼은 옵션창 UI를 완성한 다음에, 2번 Best 콤보 디스플레이는 게임 데이터의 세이브/로드 기능을 다루면서, 그리고 5번 리더보드(순위표)는 구글 플레이 서비스 연동하는 과정에서 구현할 예정이에요. # Max 콤보 표시 기능 Master 위젯에서 Max 콤보 표시 기능은 GameOver .. 27. 브러쉬유: 게임오버 UI 제작(1) # 들어가기 전에 라이선스 설명 및 디자이너 소개 앞으로 우리가 함께 제작할 게임오버 UI에는 우아한형제들에서 제공한 배달의민족 주아체가 적용되어 있습니다. 폰트 다운로드와 라이선스 전문은 아래 링크에서 확인하시기 바랍니다. 우아한형제들 좋은 음식을 먹고 싶은 곳에서~! 우아한 사람들이 모여 우와하게 일하는 '우아한형제들'입니다. www.woowahan.com 게임오버 화면과 메인 화면 UI에 쓰인 아이콘 및 이미지들은 KONG92님이 제작해주셨습니다. KONG92님의 뜻에 따라 해당 이미지들은 누구나 자유롭게 사용, 수정, 재배포할 수 있습니다. (그에 따라 발생한 문제에 대해서 KONG92님은 어떠한 책임도 지지 않습니다.) # 이번 시리즈를 마치면 얻게 되는 것 앞으로 여러장에 걸쳐 게임이.. 26. 브러쉬유: 게임오버 # 게임오버 생명력을 다 썼을 때 저번시간에 예고했던 것 처럼 플레이어가 생명력을 다 써버렸을 때, 게임을 끝내는 로직을 만들어보겠습니다. 1. GM_Game을 열고 EndGame 이라는 이름의 Custom Event를 만드세요. 2. Open Level 노드를 만들고 Level Name에 Lobby 를 입력한 뒤 End Game 이벤트 노드와 연결하세요. 3. Master 위젯 블루프린트를 열고 ReduceLife 이벤트의 분기문(Branch 노드)의 False 실행핀을 찾으세요. 이 지점이 바로 생명력이 모두 소진됐다는 것을 인식할 수 있는 부분이에요. 4. GM변수를 부른 뒤, 핀을 뽑아 들고 EndGame 노드를 만드세요. 그리고 노드를 False 핀과 연결하세요. 5. 에디터 .. 25. 브러쉬유: 생명력 # 이번 장에서 만들 내용 생명력 감소 이번 장에서는 플레이어가 같은 색상 만들기에 실패했을 경우 생명력 감소와 콤보 초기화 패널티를 받게 해볼게요. 패널티 serviceapi.nmv.naver.com # 생명력 감소 이벤트 만들기 Master 위젯 1. Master 위젯에서 ReduceLife라는 이름의 Custom Event를 만드세요. 2. LifeBox 위젯을 Get 노드로 호출한 뒤 Get HorionzalBox_(숫자) 노드를 만드세요. HorizontalBox를 불러오려면 먼저 디자이너 탭에서 Horizontal Box의 IsVariable 옵션을 켜주어야 해요. 3. Horizontal Box 핀을 뽑은 상태로 GetChildrenCount 노드를 찾아서 만드세요. Horizo.. 24. 브러쉬유: 콤보 # 이번 장에서 구현할 내용 콤보 이번 장에서는 그동안 장식으로 붙어있었던 콤보 UI를 구현해주는 작업을 할거예요. 콤보를 세는 방법은 1성공 = 1콤보로 기획했습니다. # PC 변수 만들기 GM_Game에서 PC_Game을 불러오기 위한 방법 콤보 작업을 하기에 앞서 선행되어야 하는 작업을 먼저 할게요. 1. GM_Game 블루프린트를 여세요. 2. CustomEvent를 만들고 SetPlayerControllerReference라고 이름지으세요. 3. GetPlayerController 및 Cast To PC_Game 노드를 만들어서 아래와 같이 연결하세요. 4. As PC Game 핀을 우클릭해서 Promote to Variable 을 선택, 변수를 만들고 이름을 PC로 바꾸세요... 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.. 이전 1 2 3 다음