본문 바로가기

uiux16

[Unity UGUI] 9patch (나인 패치) 요즘 옛날 프로젝트 뜯어고치면서 최적화..라기보다는 "와 무슨 생각으로 이렇게 짰지?"를 고치고 있는데... 리소스를 들여다보니 문득. 이걸 써야겠다!! 싶어서. 겸사겸사 기록도 합니다. 이거 그런데 ... 정식 이름은 9슬라이싱(9-slicing) 스프라이트 ... 이거인가보네요 나인패치 자세한 정의는 제껴두고 ... (유니티 매뉴얼에서 엄청 잘 설명하고 있습니다) 제가 이번에 나인패치로 고쳐볼 것은 이런 사례입니다. 지금 뜯어고치고 있는 게임의 랭킹 UI입니다. 글자는 RANKING을 제외하곤 텍스트로 처리하고 있습니다. 이렇게 하면 저 가운데 검은 부분만큼 이미지 크기도 커지고, 그만큼 이미지가 차지하는 용량도 크겠죠. 바로 이럴때! 이렇게 같은 패턴(여백이든 아니든간에)이 반복되는 영역이 클 경우.. 2022. 5. 6.
[UIUX] 아이돌마스터 Side M GROWING STARS 올 퍼펙트 UIUX 개선 분류 UIUX 목적 개인작 주제 게임 내 UIUX 개선 기획 소재 아이돌마스터 Side M GROWING STARS 곡 선택 UIUX - All Perpect 표시 제작 포토샵 (예시 이미지) 2021년 12월 사이스타에서는 풀퍼펙을 쳐도 크게 바뀌는 게 없더군요 카운트는 되는데 그걸 프로듀서 눈앞에다가 두질 않는달까... 그래서 뭔가 풀퍼펙을 쳐도 성취감이.. 그다지 크지 않아 이번에는 바로 그게! 너무 슬퍼서! (왜냐하면 네 곡이나 쳤는데!) 그 개선을 저렴하게 써봤습니다. UI 자체가 간단하게 해결될 것 같아서 내용도 별 거 없지만요 하하 저번 글도 그렇고 이런걸 기획이라 할 수 있나 모르겠어서 기획은 안 붙이긴 했는데. 그래도 주제에 기획이라고 붙어있어서 애매해짐 기획서같은 말투로 썼지만 대부분의.. 2021. 12. 19.
[Unity UGUI] InputField 인풋 필드 + α (플레이어 이름 입력) 이번에도 이 프로젝트에 썼던 것. 플레이어가 이름을 입력하고 입력 정보를 기억해서 결과창에 써먹는 식이었습니다. 직전에 쓴 랭킹 글과 같이 보면 좋을지도! 왜냐하면 지금 쓰는 글 이후에 아래의 기능이 이어지거든요. [유니티 C#] PlayerPrefs로 기기에 저장되는 랭킹 만들기 학교다닐때 과제로 냈던 프로젝트에 썼던 코드 얼렁뚱땅 PalyerPrefs로만 구현했습니다. 오직! 플레이어프립스로만! 플레이어프립스 특징 상, 기기에 저장되는 랭킹입니다. 그때 이걸 만들면서 이 drybone-developer.tistory.com 1. 인풋필드 저는 대충 아케이드 게임 종료 후 플레이어 기록하기 용도로 썼습니다. 물론 그것 외에도 플레이어의 임의 문자열 입력이 필요한 곳에 인풋필드를 쓸 수 있겠죠. 게임오브.. 2021. 12. 6.
[UIUX] 아이돌마스터 Side M GROWING STARS 한계돌파 UIUX 개선 분류 UIUX 목적 개인작 주제 게임 내 UIUX 개선 기획 소재 아이돌마스터 Side M GROWING STARS 한계돌파 UIUX 제작 포토샵 (예시 이미지) 2021년 10월 개인적으로 게임하면서 가장 마음에 안 든 부분 (...) 이렇게 개선해주면 좋겠다~ 하는 점을 모아서 트위터에 썼던 내용을 바탕으로 UI를 재구성해봤습니다. 제가 하는 다른 가챠 게임들로 레퍼런스를 약간 첨부했습니다. 레퍼런스로 첨부한 요소들은 여러 게임에서 공통적으로 보이는 요소라 넣은 거고 이걸 베껴라! 같은 의미로 넣은 것은 아니지만, 그럼에도 문제가 된다면 제거하겠습니다. 아무래도 저 혼자 한 거라 주관적일 수는 있겠지만? 그래도 다들 불편했을 거라고 생각해 나중에 진짜 이렇게 개선해주면 글 쓰는 의미가 없으니까 일단 .. 2021. 10. 17.
[Unity UGUI] Sprite Swap 코드로 하기 (Event Trigger) 상호작용이 가능한 UI(버튼 등)에는 Transition 옵션이 있고, 이걸 Sprite Swap으로 하면 상호작용 중 스프라이트를 교체하거나 할 수 있는데 레테에서 다국어 지원을 하게 되면서, 스프라이트로 만든 이미지를 다국어로 교체하고... 또 각각의 언어에서 트랜지션을 실행할 필요가 있었어요 그런데 트랜지션 옵션엔 기본적으로 한 장씩밖에 안 들어가더라고요 스크립트를 이것저것 찾아보긴 했는데 제가 생각한대로 되진 않아서... 그냥 이렇게 해야겠다! 하고 짜게 된 코드입니다. 어제도 Event Trigger 에 대해서 쬐끔 썼었죠 이것도 비슷해요 [Unity UGUI] 버튼을 누르고 있을 때 실행하기 (Event Trigger) UI상에서 버튼을 누르고 있을 때 특정 코드를 실행하기 옛날 옛~날에 유니.. 2021. 9. 17.
[Unity UGUI] 버튼을 누르고 있을 때 실행하기 (Event Trigger) UI상에서 버튼을 누르고 있을 때 특정 코드를 실행하기 옛날 옛~날에 유니티 처음 배울때 과제로 러닝게임(그런데 이제 소스가 거의 주어진)을 만드는 게 있었는데 기말과제가 그 소스나 코드 같은 걸 변형하고 추가해서 더 다듬어서 내는거였어요 그런데 주어진 소스에는 .. 버튼을 눌렀을 때 점프하는 방법은 있었지만 버튼을 누르고 있을 때 슬라이딩 하는 방법은 적혀있지 않았어 그래서 여러개 검색해보고 내린 결과가 이것입니다 여튼 유용하게 쓸 수 있습니다 슬라이딩이 아니더라도 Event Trigger 사용 제목에도 써뒀지만 저는 이벤트 트리거로 해결했습니다. 이벤트 트리거를 쓰면 여러 상황에 특정 함수를 실행할 수 있도록 만들 수 있는데요... 이벤트 트리거 컴포넌트를 추가하고, Add New Event Type.. 2021. 9. 16.
[Unity UGUI / C#] 이미지를 원래 크기로 + α 문제 해결 하는 스크립트. 런타임중에 작동 가능합니다. 유니티 에디터 상에서는 바로 이 버튼입니다. 이걸 근데 .. 고작 이거때문에 C#을 쓰자니 뭔가 웃기네 여튼 스크립트랄까 함수는 이것. 1 GetComponent().SetNativeSize(); cs 이걸 쓰면 Image 컴포넌트의 Source Image로 들어가있는 스프라이트를 입력된 크기, 변형된 크기와 상관 없이 원래 스프라이트의 크기로 돌리기가 가능합니다. 다만 이미지 타입이 Simple 혹은 Filled로 되어있는 이미지에서만 가능합니다. 다른 타입에선 에디터에서도 이 버튼이 사라지기도 하죠... 저는 이 스크립트를 버튼의 하이라이트 등 트랜지션(스프라이트 스왑)에 쓰고있었는데 (왜 트랜지션 옵션을 안 쓰냐면 그게 다 그럴만한 이유가 있습니다 나중에.. 2021. 9. 5.
[Unity UGUI] Scroll View 스크롤 뷰 스크롤 뷰 뭐하기로 제목짓고싶은데 실패! 스크롤 뷰는 경험상 Layout Group과 병행해서 쓰면 좋았던것같아요. 편하다! 새롭다! 깨끗한 손! (?) [Unity UGUI] 일정 간격으로 UI 배치하기 - Layout Group 글 너무 오랜만에 써서 어떻게 써야할지 계속 쳐다만 보면서 고민중 왜 오랜만인가 - 그동안 올림픽 보고 게임 하면서 지내느라 .. 국가대표 선수들의 경기 하나하나 너무 멋졌어요! 어쨌든 이 drybone-developer.tistory.com 0. 준비 화면상에 다 담기엔 어려운 오브젝트들을 스크롤로 표시하고 싶을 때 씁니다. 가령 이런 상황입니다. 캔버스 밖으로 6과 7이 튀어나가 있습니다. 그런데 간격은 줄이고 싶지 않아! 스크롤링이 됐으면 차라리 좋을텐데! ...바로 이.. 2021. 9. 4.
[번역 / UIUX] CEDEC + KYUSHU 2017 페르소나5의 UI 제작과정 소개 기사 풀네임: 『페르소나 5』의 너무 멋진 UI의 제작과정을 소개! 아틀라스의 위기로부터 태어나, 마침내 특징이 된 UI가 완성되기까지 【CEDEC+KYUSHU 2017】 『ペルソナ5』のカッコよすぎるUIの制作工程を紹介! アトラスの危機から生まれ、やがて特徴 “CEDEC+KYUSHU 2017”で行われたセッション“ペルソナシリーズにおけるUIクリエイティブの手法 ~ペルソナ5のUI事例~”のリポートをお届け。 www.famitsu.com 가끔 생각나면 다시 읽어보는 자료인데 텍스트만 번역해봅니다. 이미지는 조금만 가져왔어요. 워터마크 있으니 아시겠지만 전부 패미통 사진입니다. 가져오지 않은 부분 에 있는 이미지는 [이미지] 뭐 요런 식으로 써둘 테니까 (ㅋㅋ) 원문과 함께 봐주세요! 다음에 13기병방위권 글도 번역해봐야지.. 2021. 8. 22.
[UIUX / Unity] 시험 대체 과제 - 레이아웃 그룹, 토글 그룹 분류 UIUX 목적 과제 (시험 대체 과제) 주제 주어진 리소스로 주어진 이미지의 UI 작성하기 (버튼, 토글 등 최소한의 작동이 있어야 함) 제작 Unity 2020년 12월 버튼, 레이아웃그룹, 토글 그룹 등이 포함된 시험 대체 과제 프로젝트 리소스랑 완성 시의 이미지는 교수님이 다 주신거고 ... 완성 이미지를 보고 UI를 흉내내는거였어요. 스크립트 없이 UI만 (플밍수업이 아니었음) 캔버스 구성은 대강 이런 식 빈 오브젝트로 상단 하단 왼쪽 오른쪽.. 이런 식으로 나눈 뒤에 해당 공간에 들어가는 오브젝트들을 넣는 느낌으로 왼쪽의 무기 스테이터스, 오른쪽의 무기 정보 리스트가 레이아웃 그룹 무기 정보 리스트는 토글 그룹으로 돼있고 하나 선택하면 외부 광선 이미지 효과로 표시 2021. 8. 21.
[UIUX] 로드오브다이스 불편했던 점 위주로 UIUX 정리 분류 UIUX 목적 개인 과제 주제 UIUX가 마음에 안 들었던 게임 이유가 되는 부분 위주로 UI 정리하기 (PPT 6페이지 이내로) 소재 로드 오브 다이스 제작 파워포인트 2020년 3월 말 이 과제의 대칭이 되는 과제 [UIUX] 메기도72 마음에 들었던 점 위주로 UIUX 정리 분류 UIUX 목적 개인 과제 주제 UIUX가 마음에 들었던 게임 마음에 들었던 요소 위주로 UI 정리하기 (PPT 6페이지 이내로) 소재 메기도72 (メギド72) 제작 파워포인트 2020년 3월 말 'PPT 6페이지 이내로' drybone-developer.tistory.com 이번에도 PPT 6페이지라는 분량이 고된 과제였다... 로오다는 대충 후려갈겨 만든 겜도 아닌데 개선을 해도? 그냥.. 그런것같고.. 그게 아쉽기.. 2021. 8. 21.
[UIUX / PPT] 페르소나 시리즈 UI 메이킹 분류 PPT 목적 개인 과제 주제 파워포인트로 PPT 만들기 소재 페르소나 시리즈 UI메이킹 (2017년 CEDEC 패미통 보도자료) 제작 파워포인트 2018년 12월 UIUX 카테고리에 이걸 넣어둬도 되나... 이 보도자료는 볼 때도 인상깊게 봤고 지금도 간간이 읽어보는데 (비슷하게 지금도 가끔 읽어보는거: 길티기어 렌더링 관련 자료) 이때부터 약간 UIUX에 관심이 급증한것같아 (그리고 꾸준히 쌓아옴) 실제로 P3P를 해봤는데 .. P1~P2는 해 본 적 없어서 비교하긴 힘들지만 인터페이스 마음에 들었고 P5 인터페이스가 진짜 좋았다고 생각하고 ... 게임 컨셉이랑 특성도 잘 살린것같음 이 기사 번역본 벌써 있을것같긴 한데 걍 다시 해봤음 [번역 / UIUX] CEDEC + KYUSHU 2017 페르.. 2021. 8. 20.