요즘 게임 UI 작업을 하면서 해상도 대응을 안 하는 경우는 거의 없지요. Show
모바일 게임 시대에 접어들면서 눈에 띄게 중요해진 이슈이기도 합니다. 모바일 디바이스들은 해상도와 스크린 비율이 각각 다르기 때문에 수많은 디바이스별 대응을 다 할 수는 없기 때문에 화면에 그려진 UI들이 자동으로 적절한 비율과 크기가 유지되고 제 자리를 찾아 배치되게끔 작업해야 합니다. 자동으로 해상도 대응이 되는 UI를 만드는 것은 프로젝트 시작 시점부터입니다. 처음엔 무시하고 작업했다가 중간이나 프로젝트 후반에 해상도 대응을 적용한다는 것은 ... 상상만으로도 끔찍한 노가다에요.ㅎ; (실제로 저는 꽤 오랫동안 서비스를 유지한 게임의 해상도 대응 작업을 0부터 해본 적이 있는데요ㅎㅎ.. 절레절레.. ) 아무튼, 이런 방식으로 작업하기 위해서는 미리 설정해 두어야 하는 2가지가 있습니다. 본 작업에 들어가기 전에 반드시 미리 체크하고 작업을 시작하세요! 1. Game 탭에 미리 보기 해상도 추가하기 이 내용은 작업 방법, 바람직한 작업 습관에 대한 내용입니다. 보통 게임 UI 작업은 16:9 비율을 기본형으로 만들고, 요즘 새로 나오고 있는 스마트폰 해상도 비율인 19.5:9, 태블릿류 비율인 4:3까지 커버할 수 있도록 디자인을 합니다. 이렇게 작업이 되려면 유니티에서 UI 작업을 할 때 여러가지 해상도 비율을 수시로 확인하면서 해상도 대응이 잘못된 UI가 있는지 계속해서 점검해야 합니다. 저의 경우에는 보통 위에서 말한 16:9, 19.5:9, 4:3 비율 3가지를 수시로 확인하고 전체 화면 UI의 경우에는 세로나 가로로 말도 안 되게(?) 긴 비율까지도 확인하면서 작업합니다. Game 윈도우에서 아래 그림과 같이 미리 보기 해상도를 추가합니다.
 Game 윈도우 열기 : Window > Genaral > Game 다양한 해상도에서 확인하면서 작업하기 (중요!) *Free Aspect를 선택하면 자유롭게 줄이고 늘려볼 수 있습니다.
2. Canvas Scaler 설정하기 위에서 설명했던 다양한 해상도에서 자동으로 UI 비율과 위치를 대응하기 위한 기본 설정입니다. 이 설정이 잘못되어 있으면 작업했던 해상도에서는 잘 나오던 UI들이 다른 해상도에서는 이상한 크기로 나오는 문제가 생깁니다. 참고로 UI를 그리는 역할을 하는 Canvas (NGUI 시절의 UI Camera / Panel 과 같은 역할입니다) 는 해당 Scene에 1개만 있으면 됩니다. 1개의 Canvas 아래로 모든 UI들이 계층구조를 이루며 구성됩니다. *Canvas가 불필요하게 많아지면 게임에 쓰이는 자원이 낭비되는 결과를 초래합니다. 자세한 내용은 다음번에 다루겠습니다. :)
여기까지 설정하면 준비 끝! 요리조리 테스트해보세요. :) ================================= ================================= ================================= 출처: http://gall.dcinside.com/mgallery/board/view/?id=game_dev&no=14605 초보인데 스마트폰 게임 해상도는 어떻게 하나요이전글 링크 생초보인데 인디게임 만들고 싶어요 http://gall.dcinside.com/m/game_dev/14394그림 못 그리는데 인디게임 만들고 싶어요 - 1 http://gall.dcinside.com/m/game_dev/14403그림 못 그리는데 인디게임 만들고 싶어요 - 2 http://gall.dcinside.com/m/game_dev/14483 이 글은 초보자 대상으로 쓰는 것이고, 기본적인 개념만 설명한다. 그러니까 자신이 쓰고 있는 게임엔진에 맞게 활용하려면 직접 구글에 검색해서 찾아보자. 1. 일단 많이 사용하는 해상도를 조사하자1. 안드로이드 안드로이드는 넥서스, 갤럭시 S 시리즈를 참고하는게 편하다.
2. iOS iOS는 애플밖에 안 만드니까 그냥 아이폰 참고하면 된다.
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 이것 참고하면 좋다. 해상도에서 제일 오른쪽 숫자는 가로/세로 계산한 값을 소수점 2번째 자리까지만 적은 것이다. 2. 해상도가 너무 많으니까 기준을 잡자모든 해상도에 다 대응하게 게임을 만드는 것보다는, 한가지 해상도를 정해서 게임을 만들고 해상도가 다를때는 따로 처리를 해주는게 편하다. 높은 해상도를 기준으로 잡으면 저사양기기에서 잘 안 돌아가고, 리소스 작업량이 많으니까 적당한 해상도를 기준으로 하는게 좋다. 안드로이드, iOS 둘다 해상도가 다양하지만 해상도 비율은 16:9(1.77)를 기준으로 잡는게 제일 무난하다. 해상도는 안드로이드 HD(1280 x 720), iOS 1136 x 640이 무난하다. 3. 만들고 있는 게임을 생각하자어떤 해상도에 상관 없이 모두 똑같은 화면이 보여야 하는가?화면이 약간 잘리거나, 더 보여줘도 문제가 없는가? 만들고 있는 게임이 이 2개 중에서 어떤 것인지 생각을 해보자. 슈팅 게임이라면 보여주는 화면이 일정해야 밸런스 문제가 없다. 횡스크롤 런게임이라면 달리고 있는 가로방향은 똑같이 보여줘야 하지만 세로는 약간 짤리거나, 더 보여줘도 밸런스 상으로 별 문제가 없다(게임 특성에 따라 다르겠지만) 퍼즐 게임이라면? 진짜 편하다. 퍼즐판을 가운데에 위치시키고 나머지는 짤리거나 더 보여줘도 상관 없는 배경으로 채우면 된다. 요즘 유행하거나 최근에 나온 뽑기 게임 몇 개 해봤는데, 소녀전선이랑 오버히트는 가로모드에 해상도가 다르면 위/아래(특히 아래쪽을 더) 많이 보여주는 방식을 사용해서 태블릿으로 게임을 실행하면 보이는 화면이 많아지게 된다. 4. UI와 게임 화면게임엔진들은 보통 게임 화면을 그리고, 그 위에 UI를 그리는 방식을 사용한다. 그리고 UI는 기본적으로 해상도가 달라도 적절하게 보여줄수 있게 설정이 되어 있고, 세부적으로 더 자세하게 설정을 해줄수 있다. 그러면 UI만으로 게임 만들면 게임 해상도 다양하게 맞출 필요가 없겠네? 라고 생각할 수도 있다. 실제로 유니티의 에셋 중에서 UI로 유명한 NGUI로 게임 만드는 방법을 설명한 책도 있다. 간단한 게임이라면 이 방법을 사용하는 것도 방법이겠지만... 5. 해상도 맞추는 방법일반적으로 많이 사용하는 방법들이다. 자신이 개발하고 있는 게임에 제일 적절한 것을 찾아서 사용하자. 1. 비율 무시하고 전체 화면 크기에 맞게 표현하는 방법 같은 비율인 해상도이면 괜찮지만, 기준으로 잡는 비율이랑 차이가 있는 해상도일때는 왜곡되는 문제가 생기기 때문에 안 좋은 방법이다. 2. 레터 박스 기준으로 잡은 비율과 해상도를 유지해서 화면에 다 보이게 한다. 그러면 남는 공간은? 레터 박스라고 불리는 검은 박스로 채워 넣는다. 해상도나 비율이 달라도 전부 같은 화면을 보여주고, 짤리거나 왜곡되는 것도 없다는 장점이 있다. 하지만 기준 해상도의 비율과 차이가 큰 비율인 경우, 레터박스의 크기가 커서 거슬린다는 단점이 있다. 3. 비율 유지해서 표시, 하지만 레터박스 없음 위의 방식과 비슷하게 비율을 유지해서 화면을 채운다. 단, 비율이 안 맞으면 레터박스가 생기는게 아니라 경우에 따라서 화면이 잘리거나, 더 보여줄 수 있다. 해상도에 따라서 가로만/세로만/가로, 세로 둘다 더 보여주거나 짤릴 수 있다. 화면에서 필수로 보여줘야 할 것이 가운데에 몰려 있다면, 이 방법을 사용하면 대부분 쉽게 해결할 수 있다(위에서 예로 들었던 퍼즐게임) 4. 가로 고정/세로 고정 위의 방식과 비슷하지만, 가로 또는 세로를 고정한 채로 비율을 맞춘다. 그러면 가로를 고정했다면 세로가 다르게 보이는 것만 생각하면 되고, 세로를 고정했다면 가로가 다르게 보이는 것만 생각하면 된다. 횡스크롤 런게임이라면 가로를 고정하는 방식이 적절하다. 위에서 예로 들었던 소녀전선, 오버히트 같은 뽑기 게임도 이 방법을 사용한 것 같다. 6. 찾아 봐야 할 것보통 게임을 실행했을 때 기기의 width, height를 확인하고 어떻게 할지 정한다. 그러니까 게임엔진이 width, height 확인하는 방법 찾고 각 방법에 따라서 검색해야 할 키워드는 resolution, exact fit, letter box, fixed width, fixed height, camera, aspect ratio 등이 있다. 이런 것들이 있으니까 자신이 사용하는 게임 엔진 이름과 함께 적절하게 검색하면 친절한 튜토리얼이나 코드가 나올 것이다. ================================= ================================= ================================= 출처: https://blueasa.tistory.com/1771 파일: MultiScaleCamera.cs 0.00MB 2d 모바일 게임 만들때 유용합니다. 카메라에 붙여서 사용하시면 됩니다. 총 6 모드 지원합니다. 전부 보여주기, 좌우비율 맞추기, 가로 고정, 세로 고정, 여백 없음, 늘리기 https://gist.github.com/howlryu/6bf4305c96f7dda4a3f4 출처 : http://unitystudy.net/bbs/board.php?bo_table=tip&wr_id=124 ================================= ================================= ================================= 출처: http://computer-warehouse.tistory.com/14 유니티를 개발 해보면 가장 골치아픈것이 바로 해상도입니다.. 안드로이드 기기가 정말 다양해지면서 태블릿도 나오고하다보니 해상도가 너무 들쑥날쑥합니다. 소비자 입장에서는 선택의 폭이 넓어져 아주 좋은 환경이지만 개발자 입장에선 죽을맛입니다.. ㅠㅠ 하나하나 따로 만들수는 없는 노릇이니 오늘 소개해드릴 방법은 여러 해상도가 있는 안드로이드 기기에서 하나의 해상도로 고정해버리는 기능을 알려드리고자 합니다. https://docs.unity3d.com/kr/current/Manual/script-CanvasScaler.html 일단 이 부분을 먼저 참고하시면 조금이나마 도움 되실거라 생각합니다. (유니티 매뉴얼은 생각보다 많은 도움이 됩니다. 아직 번역이 덜 된곳도 있지만 영어가 그렇게 어렵지 않고 번역을 하면 큰 문제없이 읽을 수 있습니다) UI를 생성하면 Canvas 오브젝트 컴포넌트에 다음과 Canvas Scaler 컴포넌트가 있습니다. 이 부분에서 UI Scale Mode에 들어가시면 됩니다. 자세한 설명은 위 링크에 더욱 자세히 있지만 간단히 설명 드리자면, Constant Pixel Size = 스크린 크기 신경쓰지않고 픽셀들이 같은 사이즈를 유지합니다. Scale With Screen Size = 스크린이 커지면 같이 커지는 UI를 생성합니다. Constant Physical Size = 스크린 크기나 해상도 무시하고 실제 사이즈를 유지합니다. 각각의 항목이 어떻게 바뀌는지 3장의 이미지를 올려 드리겠습니다! ( 제 기준은 1920* 1080사이즈입니다) 여기서 Scale With Screen Size 를 선택합니다. 다음과 같이 선택하면 Reference Resoultion 항목이 나오게 됩니다. 그러면 이 부분에서 X 축 Y 축에 각각 자신이 원하는 해상도를 입력 하시면 됩니다. * 단 주의하실 점은 만일, 자신이 만드는 게임이 가로로 하는 게임이라면 X,Y축 값을 확인 하셔야 합니다. 지금 제가 입력한 값은 1920, 1080인데 만일 가로로 하는 게임일 경우 1080, 1920 값이 되어야 합니다! 이 부분을 마친다면 이제 UI는 해상도를 입력하신 값으로 고정되어서 나오게 됩니다. 그러나, 해상도만 고정되면 안됩니다.. ㅠㅠ 이제 게임내 해상도마저 고정을 해야합니다. Awake 함수나 Start 함수에 다음과 같이 입력합니다. Screen.SetResolution(int width, int height, bool fullscreen); 값을 입력하시면 됩니다. 이대로 입력하시면 물론 오류가 납니다.. width, height에 각각의 값을 입력하시면 fullscreen에는 풀스크린 여부를 물어보는 곳인데 true를 입력해주시면 됩니다! 물론, 이런 방법도 좋지만 해상도를 '비율에 맞게 고정'시키는 방법도 있습니다 위의 방법은 해상도를 특정 해상도에 맞게 강제로 고정 시켜버리지만 다음의 방법은 자신의 기기에 맞게 해상도를 재설정 하게 됩니다. Screen.SetResolution(Screen.width, Screen.width *int SetWidth/int SetHeight, bool fullscreen); 값을 추가합니다. 무언가 바뀐 것을 느끼셨나요? width,height에 비율을 곱해줍니다. 이 값을 추가해서 비율을 재설정 하는 방법인데 만일 16:9 사이즈로 비율을 추가하고 싶으면 SetWidth에 16 SetHeight에 9를 입력하시면 됩니다 ================================= ================================= ================================= 출처: https://blog.naver.com/jjshield0108/221290800626 유니티 UI 해상도 불일치 문제 1.UI를 생성하면 기본적으로 '캔버스'가 제공된다. 보통 캔버스 설정에서 발생한다 ================================= ================================= ================================= 출처: http://codingmania.tistory.com/198 유니티에서 캔버스(Canvas)를 생성하면 다음과 같이 여러 컴포넌트가 기본적으로 생성된다. -> Rect Transform, Canvas, Canvas Scaler, Graphic Raycaster Canvas Scaler 컴포넌트는 캔버스 내 UI 요소의 전체적인 스케일과 픽셀 밀도를 제어하는 데 사용된다. 스케일은 글꼴 크기와 이미지 경계 등 캔버스 아래의 모든 요소에 영향을 미친다. 쉽게 말해 화면의 크기 변화에 따른 UI크기 변화를 조절할 수 있다. 프로퍼티:기능:
Constant Pixel Size를 사용할 경우 유니티상에 개발 화면과 실제 디바이스 폰 화면 해상도가 크게 차이가 난다면, 폰에서 정말 콩알만하게 보이게 된다. 따라서, Scale With Screen Size 모드를 통해 화면이 커지면 UI 요소들도 커지도록 설정하는 것이 좋다. 여기서 Match로, 스케일링 레퍼런스로 너비 또는 높이를 사용할지, 아니면 둘 사이의 배합을 사용할지 결정합니다. 이 차이는 분명하다. 이 사진은 Constant Pixel Size을 적용한 것을 스마트폰에서 실행한 결과이다. 왼쪽 상단 버튼의 경우 새끼손가락으로 눌러야 터치 될 정도로 매우 작다. 이 글을 쓰게 된 이유이다. Scale With Screen Size 모드를 사용하게 되면, 화면이 커지게 되면 UI도 커지게 할 수 있다. 이렇게 큼지막하게 나와 버튼 조작이 쉬워지고, 가운데 이미지도 시원시원하게 크게 나오게 된다. ================================= ================================= ================================= 출처: http://www.devkorea.co.kr/bbs/board.php?bo_table=m03_qna&wr_id=90610 [초보]빌드전이랑 후의 객체크기차이가 심해요코딩할때 씬뷰랑 게임뷰에서는 어느정도 버튼이랑 text, rawimage 크기가 큰편인데 막상 빌드한다음에 핸드폰으로 보면 정말 코딱지만큼 작은데 어떻게 수정해야하나요.... 그리고 로우이미지로 배경화면을 만들었는데 핸드폰으로 빌드해서 보면 배경화면이 sky그거에다가 배경화면으로 넣은 로우이미지가 굉장히 작게 출력되는데 어떻게 해결해야하나요..ㅠㅠ ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ 유니티 게임 탭에 해상도 설정이랑
캔버스 해상도 설정을 확인해보세요. ================================= ================================= ================================= 출처: http://blog.naver.com/PostView.nhn?blogId=showmeii1201&logNo=220222769641&redirect=Dlog&widgetTypeCall=true [Unity]00.UGUI 해상도 대응하기(해상도에 따라 위치,크기 맞추기)! 확인: https://docs.unity3d.com/kr/current/Manual/script-CanvasScaler.html Unity - Manual: 캔버스 스케일러(Canvas Scaler) Unity 사용자 매뉴얼 (2017.1) UI UI 레퍼런스(UI Overview) 캔버스 컴포넌트(Canvas Components) 캔버스 스케일러(Canvas Scaler) 캔... docs.unity3d.com 위링크에서 캔버스 스케일러를 확인하세요! 이번에는 개발할때 중요한 GUI 위치를 맞춰볼게요... 모바일 개발중일때 스마트폰에 해상도가 너무 가지각색이죠.. (빡치죠..) -,-; 해상도 에 맞춰서 크기,위치 를 맞추는 방법은 바로 UGUI에서 지원하는 Canvas Scaler 를 사용하면 됩니다.. 이름이 바뀌었죠.. 위 사진이 캔버스 스케일러 입니다.. Canvas 를 생성하면 자동적으로 포함되어있습니다.. 수동으로 추가하는방법은 Add Component - Layout - Canvas Scaler 추가하시면됩니다..^^ 속성을 알아보겠습니다.. UI Scale Mode - UI 스케일이 조정되는 방법 을 설정합니다.. └Constant Pixel Size - 캔버스에 픽셀사이즈 에 맞게 설정합니다.. └Scale Factor - 캔버스에서 모든UI 요소를 확장 됩니다.. └Scale With Screen Size - 지정한 스크린 사이즈 에 맞게 설정합니다.. └Reference Resolution - 스크린 해상도 를 설정합니다.. └Screen Match Mode - 지정한 스크린해상도에 따라 매치할 크기를 정합니다.. └Match Width of Height - Match 길이 만큼 UI 에 가로,세로 크기에 맞게 맞춰집니다.. └Expand - 가로,세로 영역을 확장 합니다.. └Shrink - 가로,세로 영역을 자르기 합니다.. └Constant Physical Size - 화면 크기와 해상도 관계없이 동일한 실제 UI크기로 맞춰집니다.(Constant Physical Size 는 나중에 다시 수정하겠습니다..) Refarence Pixels Per - 경우 스프라이트는이 ' 단위 당 픽셀 ', 스프라이트에 1 픽셀로 UI에서 하나의 단위로 다룰 것입니다. - bing 번역기 이것으로 속성은 끝났습니다.. UI 크기를 맞추는건 떄때로 다르지만 저는 Scale With Screen Size 를 사용해보겠습니다.. 해상도를 지정해서 UI 크기를 고정시키겠습니다.. 레퍼런스 리솔루션 에서 해상도를 지정해주세요.. 전 세로 로 해상도를 맞추겠습니다.. 그러므로 당연히 Y가 높죠.. 가로로 하신다면 X높으시면되요.. 아니면 그냥 자기 폰 해상도로 하시면 다른폰에서도 고정적으로 해상도로 맞춰집니다.. 이제 Screen Match Mode 설정하셔야되는데요.. 아까 속성에있는데로 전 Match Width of Height 모드를 사용하겠습니다.. 설정하면 Match 가 생깁니다.. Match 는 0.5로 맞춰주시면 됩니다.. 위치가 이상하다 싶으시면 Match 를 조정해보세요.. Canvas Scaler 은 계속 수정합니다..^^ 보충할것들도 있으면 말해주시면 대환영! 불펌 금지,사진 복사 금지 모두 금지 - 허락 받으면 가능.! [Unity]00.UGUI 해상도 대응하기! 끝~~~ ================================= ================================= ================================= 출처: http://unitytutorial.tistory.com/34 다양한 화면 크기와 화면 비율에 대응하는 방법에 대한 설명 Canvas Scaler 컴포넌트 어떤 화면 크기와 화면 비율에서 Unity 응용 프로그램이 실행될지는 사용자의 환경이나 설정으로 바뀌어 버립니다. 따라서 다양한 화면 크기와 화면 비율에 UI를 지원하려면 UI의 위치나 크기를 실행 환경의 화면에 맞게 조정할 필요가 있습니다. 이 확대 축소 처리는 Canvas Scaler 컴포넌트에서 실시할 수 있습니다 Canvas Scaler 컴포넌트는 Canvas 객체가 생성 될 때 기본적으로 붙어있습니다. Canvas Scale Mode Canvas Scaler 구성 요소의 Canvas Scale Mode 속성으로 확대 축소의 동작을 설정합니다. Canvas Scale Mode는 다음의 모드를 설정할 수 있습니다. Constant Pixel Size 모드 UI의 위치나 크기를 픽셀에 대한 단순한 배율로 지정하는 모드입니다. Canvas Scaler 컴포넌트의 Scale Factor 속성으로 화면의 배율을 지정합니다. Scale Factor가 1인 경우는 UI의 위치는 그대로 화면의 픽셀에 대응합니다. 예를 들어 (100, 400, 0) 라는 위치는 화면의 중심에서 100 픽셀 오른쪽 400 픽셀 위쪽 이 됩니다. Contant Pixel Size 모드에서는 Scale Factor가 1에서는 화면 크기가 변경되면 화면에 대한 UI의 위치와 크기가 바뀌어 버립니다. 예를 들어, 화면 크기가 상하로 800 픽셀인 경우 (0,400,0)는 화면의 상단이지만, 화면의 크기가 위아래로 600 픽셀의 경우 (0,400,0)는 화면 밖으로 나가 버립니다. 그래서 Scale Factor 속성에 0.75 (=600/800)을 설정함으로써 UI의 위치와 크기가 0.75배로 화면 크기가 아래로 600픽셀 때 (0,400,0)를 화면의 상단으로 할 수 있습니다. Constant Pixel Size 모드 Scale With Screen Size 모드 Scale With Screen size 모드는 화면 크기에 따라 UI의 위치나 크기에 스케일을 겁니다. 우선 기준이 되는 해상도를 Reference Resolutuion 속성을 설정합니다. UI의 위치와 사이즈는 이 기준 해상도에서 보이는 방법으로 설정합니다. 예를 들면 Reference Resolutuion 속성이 (640,480)면 (-320,240)이 왼쪽에 상단 위치되고, 오른쪽이 하단 (320,-240)이 됩니다. UI의 크기가 160x160이면 화면의 가로 폭의 1/4 크기로 됩니다. 화면 사이즈가 어떻든 종횡비가 (640,480)와 같은 4:3이면 같은 외관이 됩니다. 화면 종횡비가 Reference Resolution과 다른 경우에는 어떻게 맞출지는 Screen Match Mode 속성으로 설정합니다. Screen Match Mode가 Match Width or Height 때는 게임 화면의 너비 또는 세로폭에 Canvas의 Reference Resolution 영역이 맞게 확장됩니다. Match 슬라이더를 Width 에 맞추면 가로 방향 Height에 맞추면 세로 방향으로 맞춥니다 또 그 중간도 선택할 수 있습니다. (Match Width or Height) (게임화면 - 수직 폭에 맞춰 스케일링) (Match width or Height 에서 Match 슬라이더를 Height에 맞추었을 때의 예) Screen Match Mode가 Expand의 경우 Canvas의 Reference Resolution 영역이 Game 뷰 화면에 내포되도록 스케일됩니다. (Expand) Expand의 예 - Reference Resolution 영역은 게임 화면에 내포된다. 또 Screen Match Mode가 Shrink의 경우 게임 화면이 Canvas의 Reference Resolution 영역에 내포되도록 확장됩니다.
Shrink의 예 - 게임 화면이 Reference Resolution 영역에 내포된다. Tips 자주 사용하는 설정으로는 Scale With Screen 모드를 사용하여 기준으로 화면 크기를 Reference Resolution으로 설정합니다. 예를 들어 16:9 화면이라면 1280x720을 사용합니다. UI의 소재 작성시 해상도도 이에 맞추는 것이 좋습니다. Screen Match 모드는 Match Width or Height를 사용하여 가로 화면이라면 Height 세로 라면 Width로 하는 경우가 많습니다. 이것 뿐이라고 화면의 비율이 변경 될 때 UI가 다 볼 수 있다고 해도 중앙에 들러 버리기 때문에 나중에 설명하는 앵커 기능을 사용하여 버튼 등 각 UI요소를 화면의 가장 자리와 상하 가장 자리에 끈 지어 있습니다. 이는 후에 화면 크기와 화면 비율이 변경 되어도 각 UI를 적절한 위치에 배치 할 수 있습니다. ================================= ================================= ================================= 출처: http://www.devkorea.co.kr/bbs/board.php?bo_table=m03_qna&wr_id=91565 유니티 ui 해상도가 제대로 대응되질 않습니다작업 진행 중 씬에서 설정한 해상도가 모바일에서 실행한 후 달라지는 현상이 일어나네요 - 씬에서 설정한 해상도 - 실제 모바일에서 실행한 뒤 볼 수 있는 해상도 ---------------------------------------------------------------------------------------------------------------------- 뭔가 pc로 옮기니 정상적으로 빌드된 것처럼 보이지만 UI가 씬에서 설정한 것보다 작게 표시됩니다. 나름대로 찾아봐서 흔히들 나오는 해결책인 스케일 모드를 "Scale with Screen Size"로 설정 후 스마트폰 해상도에 맞게 설정하는 방법도 이미 적용한 상태입니다. 정말 뭐가 문제인 걸까요? ---------------------------------------------------------------------------------------------------------------------------------------------------------------- 스케일 모드와 해상도 설정 이외에 Canvas Scaler에서 Match 부분이 있습니다. Match는 Width와 Height 중 어느쪽에 더 비중을 둘건지 설정하는 부분입니다. 균일하게 비중을 두어야하므로 0.5로 설정 해주시면 됩니다! ================================= ================================= ================================= 출처: http://dydvn.tistory.com/21 테블릿을 제외하더라도 안드로이드 디바이스는기기마다 해상도가 너무나도 다양합니다. 특히 구형 기기와 신형 기기의 해상도가 많이 차이나죠. 때문에, 웬만한 디바이스들은 다 커버할 수 있게 UI가 기기의 해상도에 따라 변하도록 설정해줘야합니다. 유니티에 캔버스를 추가하면 기본으로 다음과 같이 설정 돼 있을 겁니다. Canvas Scaler를 보시면 UI Scale Mode가 Constant Pixel Size로 돼 있는 걸 확인할 수 있습니다. UI의 요소들이 해상도에 상관 없이 동일한 픽셀 수를 유지하는 설정인데요, 딱히 기기 테스트를 안하고 유니티 안에서 테스트를 해봐도 어떤 현상이 일어나는지 확인할 수 있습니다. 1920 x 1080(16:9)에서 만든 UI들 입니다. 같은 비율을 유지한 채 2560 x 1440으로 바꾸니 작아집니다. UI Scale Mode를 드롭다운 하면 3가지 모드가 있는 걸 확인할 수 있습니다. 해상도마다 UI 크기를 같게 해주고 싶다면 두 번째에 있는 Scale With Screen Size를 선택하면 됩니다. 그럼 위와 같은 항목들을 확인할 수 있습니다. Reference Resolution은 기준이 되는 해상도를 입력하면 됩니다. 저는 주로 1920 1080 해상도에서 작업을 해 왔기에 위와 같이 입력했는데요, 재량껏 써주시면 됩니다. Screen Match Mode는 3가지 항목이 있습니다. 1. Match Width or Height 기준이 되는 해상도의 가로 또는 높이중 하나를 기준으로 해서 비율을 유지한 채 확장 또는 축소시킬건지 정합니다. Match Width or Height를 선택하면 위와 같이 슬라이더가 나타납니다. 2. Expand 말 그대로 확장입니다. 캔버스 크기가 Reference Resolution에 설정한 값보다 더 작아지지 않도록 캔버스 영역을 수평 또는 수직으로 확장합니다. 3. Shrink Expand의 반대입니다. 캔버스 크기가 Reference Resolution에 설정한 값보다 커지지 않도록 캔버스 영역을 수평 또는 수직으로 잘라냅니다. Match Width of Height에서 Match값을 0으로 조절하면 Expand와 같고, 1로 조절하면 Shrink와 같습니다. 즉, Shrink와 Expand를 적절히 배합하여 사용하고싶을 때만 Match Width or Height를 선택하여 Match값을 변경해주면 됩니다. 1920x1080 과 2560x1440같이 해상도가 다르더라도 같은 비율(16:9)이라면 Expand나 Shrink나 같은 UI크기를 유지합니다. 하지만 갤럭시 S8부터는 18.5:9의 비율이고, 테블릿과 핸드폰의 비율은 완전히 다르기 때문에 Expand 또는 Shrink를 선택해 주어야 합니다. 경험상 Expand가 더 나은 것 같습니다. ================================= ================================= ================================= (초보자) UGUI 해상도대응 관련 질문있습니다.현재 960*1280(4:3) 비율로 게임뷰에서 UI 배치를 해두었습니다. canvas scaler는 Scale With Screen Size 로 설정해두었구요. 현재 UI배치를 16:10과 16:9의 해상도에도 대응 하게( 똑같은 비율로 배치되도록) 하고싶습니다. 어떻게하면될까요? ------------------------------------------------------------------------------------------------------------------------------- 비율이 다른화면에서 풀스크린으로 똑같은 비율로 쓸수는없구요 ================================= ================================= ================================= UGUI 버튼 함수와 해상도별 화면 맞추기혹시 어떻게 하는지아시나요? 기기마다 해상도가 달라서 해상도를 맞춰야하는대 어떠한 방법이있는지 구글링을 해도 안보이네요.. 버튼은 또 버튼 내에 on Click 에 스크립트를 넣는거던대 기존방식과 똑같이 함수를 작성해서 스크립트를 만들어 넣어주면돼나요??.. 처음접해보는거라 모르겠네여 ----------------------------------------------------------------------------------------------------------------------------------- 해상도는 Screen.width/기준widht, Screen.height/기준height 형식으로 비율에 맞춰서 잡아주시면 될것같네요. 버튼은 스크립트내에서 연결하는거랑 버튼에 ButtonTrigger 스크립트를 연결하여 해당함수 셋팅 후 실행하는 방법이 있습니다. 또 버튼이 UIROOT 아래쪽에 있으면 onClick 으로 함수이름만 맞춰줘도 작동경우가 있었던것 같은데, 이건 저도 안해봐서 확신을 못하겠네요. 스크립트 내에서 적용하는것은 'UIEventListener.Get(버튼 오브젝트).onClick = 클릭시 작동해야하는 함수이름' 형식으로 셋팅하시면 됩니다. -------------------------------------------------------------------------------------------------------------------------------- 해결했어요~ ================================= ================================= ================================= 출처: http://vallista.tistory.com/entry/Unity3D-UGUI-Canvas-Screen-Scale-Fit-UGUI-%EC%BA%94%EB%B2%84%EC%8A%A4-%EB%94%94%EB%B0%94%EC%9D%B4%EC%8A%A4-%ED%99%94%EB%A9%B4%EC%97%90-%EB%A7%9E%EA%B2%8C-%EB%A7%9E%EC%B6%94%EA%B8%B0 Unity3D-UGUI-Canvas-Screen-Scale-Fit-UGUI-캔버스-디바이스-화면에-맞게-맞추기 NGUI 사용하다가 UGUI를 작업하면 상당히 골칫거리중 하나가 자동으로 스케일 변환이 안된다. 그래서 작은 디바이스의 경우 크기가 커지게 되며, 큰 디바이스의 경우에는 크기가 상당히 작아지게 된다. 그래서 필자는 아래와 같이 구현했다. 1. 먼저 Canvas로 가서 Screen Space - Camera를 사용하여 Hierarchy 오브젝트 하단에 Camera를 생성해서 넣어준다. 그리고 위의 사진과 같이 Render Camera에 설정을 하고, 카메라 크기등을 화면에 맞게 맞춰준다. 2. 위의 사진에서 못보던 Canvas Scaler가 보인다. Canvas Scaler는 화면상의 UI를 디바이스의 width, height를 비교하여 Matching을 해주는 스크립트인데, 기본적으로 등록이 되어있다. 등록하여 Reference Resolution을 적어주면 핏이 적용이 된다. ================================= ================================= ================================= 출처: http://udevapp.blogspot.com/2015/08/blog-post.html 유니티 스마트폰 해상도(가로세로 비율별)스마트폰 해상도 1. 해상도 순서 A. 3:4 2. 화면 비율 추세 위 자료는 아래링크에서 참고함 3. 비율별
캡쳐화면 4. 결론
1- 작업시 고려할 점 하지만 이건 UI 에 대한 내용이며 실제 게임에서는 고민을 더 해봐야함 5. 결론 2 5. 참고 ================================= ================================= ================================= 출처: http://www.devkorea.co.kr/bbs/board.php?bo_table=m03_qna&wr_id=58783 유니티 개발을 하는데 게임해상도를 720 x 1280으로하려는데모니터 해상도가 1280이 안되서 게임화면을 보기가 힘드네요 작은모니터에서도 게임플레이화면을 보려면 어떻게 해야되죠? -------------------------------------------------------------------------------------------------------------------------- 비율을 축소시켜서 하시던지, 해상도를 큰 모니터를 쓰는 방법! ---------------------------------------------------------------------------------------------------------------------------- Game 탭 왼쪽 상단에 해상도 선택을 하셔서 +로 원하는 해상도를 추가해주시면 작은 해상도로도 비율로 축소된 화면을 볼 수 있습니다. 이상. ================================= ================================= ================================= 출처: http://jenemia.tistory.com/218 날짜: 2012.11.21 해상도에 따른 카메라 설정 및 Object 크기 설정 출처 : http://www.devkorea.co.kr/bbs/board.php?bo_table=m03_qna&wr_id=21441&sca=&sfl=wr_subject%7C%7Cwr_content&stx=plane+gui&sop=and¤tId=44 방법 1. 2D 카메라의 size 를 해상도
높이 1/2로 맞춥니다. (ex : 1280 : 720 -> 360) 아이폰 개발 시 게임 화면 크기 설정 출처 : http://www.devkorea.co.kr/bbs/board.php?bo_table=m03_qna&wr_id=22282&sca=UNITY¤tId=44 2:3으로 하시지 마시고 그냥 640x960으로 맞춰서 작업하셔야 합니다 ================================= ================================= ================================= 출처: https://blog.naver.com/playgeolamp/80191256906 유니티3D 모바일 개발환경에서 빌드시 기기별 해상도 설정 날짜 : 2012-12-04 모바일 개발환경에서 게임개발시의 해상도를 기기에 넣고 돌려보면 해상도가 맞지 않아 화면이 짤리거나, 작게 보이게 되는 경우가 생깁니다. 그렇기에 기기의 해상도에 맞춰 설정을 해줘야 하는데요. 안드로이드와 IOS의 경우가 달라 따로 설명해드리겠습니다. [Android] 스크립트에서 Screen.SetResolution(int width, int heignt, bool bFullScreen) 함수를 호출합니다. 개발한 게임을 800x480 해상도에 맞게 빌드하려는 경우, SetResolution(800 480, true) 하시면 됩니다. 하지만 기기마다 일일이 이런 설정을 해줄 수 없는지라, 대부분의 개발자분들이 개발 시에 해상도를 비율로 설정하여 개발하시고 후에 빌드할 때, 해상도를 비율에 맞춰 화면에 딱 맞게 보이도록 하고 있습니다. 예를 들어, 2:3 비율로 개발 후에 빌드시, SetResolution(Screen.width, Screen.width/2*3, true)라고 하시면 됩니다. [IOS] IOS는 SetResolution함수가 먹히지 않아, 내부 설정으로 셋팅을 해줘야 합니다. File >> Build Settings >> Player Settings >> Other Setting 으로 들어갑니다. 거기서 Target Resolution의 Native, Standard, HD 중에서 원하시는 옵션을 선택해주시면 됩니다. Native는 어떤 해상도에서든 개발했던 해상도로 출력됩니다. 2:3, 16:9 등의 비율로 잡고 개발하셨어도 크기는 정해져있기에 해상도별로 다른 크기를 보여줍니다. Standard는 낮은 해상도에서 개발한 것을 해상도가 큰 기기에서도 딱 맞는 크기로 보여줍니다. 예를들어, 2:3 환경에서 개발한 것을 16:9 의 고해상도 화면에서도 2:3으로 딱 맞게 출력해줍니다. HD는 Standard와는 정반대로 높은 해상도에서 개발한 것을 낮은해상도에 맞게 줄여주는 듯 합니다. HD는 써본적이 없어서 확실하진 않지만, Unity Answers에서 나온 정보에 따르면 맞는 것 같습니다. 저는 standard옵션으로 ipad2 해상도로 개발한 것을 ipad3에서 딱 맞는 크기로 돌려봤습니다. 삽질할때 답변해주셨던 분들 감사합니다 (_ _)~ ================================= ================================= ================================= 출처: http://www.devkorea.co.kr/bbs/board.php?bo_table=m03_qna&wr_id=31802 지정된 비율말고 유니티 해상도를 맞추고싶은데....날짜: 2013.06.21 가령 갤노트2의 해상도로 맞춰서 작업하고픈데 어떻게하면되나요??? 그리고 안드로이드는 해상도 별로 다 다른데 앵커말고 포지션값 움직이는 것 같은건 어떻게 조정하면 될까요 ? -------------------------------------------------------------------------------------------------------------------------------------------- 해상도 마다 비율에 대한 공식값이 있습니다. ---------------------------------------------------------------------------------------------------------------------------------------------- 만약 해상도를 1280 × 760 에 맞춰놓고 해상도 고정 시키고 싶으시다면 ================================= ================================= ================================= 출처: http://smilejsu.tistory.com/990 해상도 설정 모바일 기기와 OS에 따라 해상도 설정 방법이
다르다. ================================= ================================= ================================= 출처: https://icechou.tistory.com/247 기타 가끔씩 쓰는 코드들 (카메라비율, 해상도, Ray)1. 카메라 비율 고정하기 (16:9)
2. 해상도 고정하기
마지막은 전체화면 할건지 말건지 + 폰기종 상관없이 해상도 고정하기. 즉 16:10폰이면 16:9로 고정하고 나머지 부분은 검은화면으로 출력하기 카메라의 rect를 조정하는 방법으로. 캔버스는 같이 조정되지않는다. (원본글 : https://blog.naver.com/fnzlz/221069086916) private void ResolutionFix() 3. 씬 전환하기
4. Ray
5. RaycastAll
음.. 적으려니까 생각이 안 난다. 작업하면서 생각날때마다 조금씩 추가해야겠음. ================================= ================================= ================================= 출처: https://sagaksagaksoft.tistory.com/28 배경 채우는 방법을 Sprite 이미지를 사용 하지 말고 Canvas 를 사용한다 아래 그림과 같이 Canvas Scaler 의 설정을 몇 가지 세팅한다 Canvas Scaler (Script) > UI Scale Mode 를 아래와 같이 설정한다. Reference Resolution 을 기준 해상도 단말기 에 맞춘다 여기서는 iPhone 4/4s 의 960 x 640 에 맞춤 Canvas 의 배경 Image 에 일부러 작은 사이즈로 만들어 준 배경 Sprite 'Bg_Color' 를 할당하고 Anchor Preset 을 상하, 좌우 2개 모두 stretch 로 설정한다 (어떤 해상도의 단말기에서도 Full 배경으로 확장시키기 위함) Canvas 의 Logo Image 에 Logo Sprite 를 할당한다 Logo Sprite 는 항상 가운데 위치할 수 있도록 중앙에 위치 시킨다 ================================= ================================= ================================= #관련링크 - https://computer-warehouse.tistory.com/14 - https://prosto.tistory.com/185 //prosto - 해상도 설정 관련 - http://prosto.tistory.com/187?category=482059 //prosto - 해상도 설정 디바이스 관련 - https://docs.unity3d.com/ScriptReference/Screen.SetResolution.html //유니티 UI 해상도 고정 - https://blog.naver.com/feedbackloop/221352247608 //해상도 대응 설명 - https://blog.wonhada.com/?p=2561 - http://samablog.tistory.com/143 //고정된 화면의 해상도설정 - https://you-rang.tistory.com/135 //UI설정 관련 - https://includecoding.tistory.com/33 //기본설명 - http://blog.soonsoons.com/221163879734 //아이폰 변태해상도 대응 방법 - https://blog.naver.com/4slash5/221317257631 //소라게님의 유니티 UI 팁1[기본UI 팁] - https://blog.naver.com/4slash5/221322852249 //소라게님의 유니티 UI 팁2[해상도 팁] - https://blog.naver.com/4slash5/221335773727 //소라게님의 유니티 UI 팁3[레이아웃 팁] ================================= ================================= ================================= |
유니티 모바일 게임 해상도 - yuniti mobail geim haesangdo
저작권 © 2024 berikutyang Inc.
