1. 程式人生 > >Unity2d 移動裝置的橫豎屏適配及UGUI畫布調整使Editor與真實裝置的UI顯示保持一致

Unity2d 移動裝置的橫豎屏適配及UGUI畫布調整使Editor與真實裝置的UI顯示保持一致

Unity2d預設的相機適配方法是將相機的寬高比按照手機螢幕寬高比例進行調整,保持相機高度不變並通過相機高度與螢幕實際高度比例對遊戲內容進行縮放。所以不同解析度螢幕的手機所顯示的遊戲內容在兩邊要麼有裁剪,要麼有黑邊。實際上就是一種等高度的適配方法。

這篇文章提供的方式是一種寬度適配,即根據手機螢幕解析度,調整camera的正交投影下的Size屬性(Projection屬性設定為Orthographic,Size屬性就會出現),使相機的寬度與螢幕相等,而寬高比保持與手機螢幕一致,從而達到等寬適配的目的。

camera的正交投影下的Size屬性,即相機實際高度值的一半,單位不是畫素而是untiy引擎的單位Unit。

舉個例子:unity2d預設情況下畫素Pixels與引擎單位Unit對應比例為100(當建立Canvas的同時Canvas Scaler裡有Reference Pixels Per Unit顯示了該值),相機預設的Orthographic下Size為5,即實際相機的高度為5 * 2 * 100 = 1000畫素。

實際遊戲中unity會根據手機螢幕大小對相機內的內容進行縮放。例如在640x960的手機螢幕下,相機的Size為5,則相機的寬度為5 * 2 * 100 / 960 * 640 = 666.67畫素,即顯示了設計時寬度為666.67畫素即(6.6667Unit)的內容,多於此部分的內容將被裁減掉,少於此部分則會顯示黑邊。同時遊戲內容會縮小到原來1000 / 960的比例。

我們現在只能調節相機的Orthographic下的Size屬性,即高度,那麼怎麼樣調整相機寬度使其成為設計尺寸呢?一般可以通過調整camera的Viewport Rect屬性來滿足要求,但是我不建議這樣做,因為這樣會令適配計算變得複雜(出現小於1的小數)。

我們可以在場景編輯器的上方標籤欄中選中Scene右方的Game,然後下面有個下拉欄,如圖,圖中下拉欄現實的是16:10 Portrait(10:16),表示豎屏下的寬高比為10:16的解析度,這裡寬高比以括號裡的為準,這裡我們可以預覽unity自適配在不同螢幕比例下的效果。(但並不是完全如此,在UI方面會有其他問題,也許是個bug,導致在編輯器裡顯示的UI內容和真機上比例不同)我們可以在這裡找到我們需要的設計尺寸並選擇,如果沒有可以自己建立一個,步驟如下:

1、在下拉欄最下面點+號

2、新建的尺寸中有個type屬性,選擇Fixed Resolution表示寬高為實際畫素尺寸,選擇Aspect Ratio表示寬高為比例關係。這裡可以看到下拉欄裡預設的選項有“:”和"x",“:”表示為寬高比,"x"表示為實際畫素尺寸。

3、選擇好設計尺寸之後,再返回Scene介面,相機就會變成我們選擇的設計尺寸寬高比例

4、然後調整Size的值與設計尺寸高度對應。例如設計尺寸是640x960,則Size 為 960 / 100 / 2 = 4.8。

調整相機為設計尺寸之後,就可以新增Canvas到場景中進行UI設計了。但是這時候Canvas預設大小和相機並不重合,導致設計很難下手。這裡有兩種方法:

第一種方法:調整Canvas的Render Mode屬性為Screen Space - Camera:

1、將對映遊戲內容的Camera拖入Render Camera中,下一個屬性Plane Distance表示UI與Camera的在Z軸距離(其實就是變相反映了UI的Z軸位置)。

2、接著在Canvas Scaler屬性裡將Ui Scale Mode屬性設定為Scale With Screen Size,表示Canvas會根據螢幕比例縮放。

3、下面的Reference Resolution,表示UI寬和高一半的大小。例如設計尺寸為640x960,則x應為640 / 2 = 320,寬應為960 / 2 = 480。

4、下面的Screen Match Mode屬性選中Match Width Or Height,表示採用寬度(上文有提到過)或高度(Unity自帶適配方式)適配。然後Match調整為0或1,0表示完全寬度適配,1表示完全高度適配,其他值表示介於兩者之間採用比例適配。

第二種方法:調整Canvas的Render Mode屬性為World Space

1、將Event Camera設定為對映遊戲內容的Camera。

2、然後調整Rect Transform元件中的Width和Height為設計尺寸的寬和高,同時將Scale屬性的X和Y都調整為0.01(對應unity2d預設情況下畫素Pixels與引擎單位Unit對應比例100)。這時,Canvas的寬高正好與攝像機相同。

這兩種方法都可以將UI調整為與設計尺寸一致,並且在編輯器中執行與真機中執行效果保持一致。

最後貼出改進後的相機自適配的指令碼程式碼,這個程式碼可以保證遊戲的設計尺寸寬高比不變動,同時不用改變原來的設計尺寸數值(即不用修改Camera的Size值和Canvas的相關屬性,例如指令碼中設計尺寸為640x960,但可以在320x480的尺寸下設計遊戲,最終的遊戲尺寸將根據指令碼中的尺寸進行適配):

using UnityEngine;
using System.Collections;

public class CameraControl : MonoBehaviour {

	// portrait 640 x 960 ; landscape 1136 x 640
	public const float DesignWidth = 6.4f;<span style="white-space:pre">			</span>//設計尺寸寬度
	public const float DesignHeigt = 9.6f;<span style="white-space:pre">			</span>//設計尺寸高度

	public bool fitWidth = true;<span style="white-space:pre">	</span>//是否採用寬度適配

	// Use this for initialization
	void Start () {
		if (fitWidth) {
			Camera camera = GetComponent<Camera>();
			float cameraWidth = camera.orthographicSize * 2.0f / Screen.height * Screen.width;

			if(cameraWidth < DesignWidth){
				float cameraHeight = DesignWidth / Screen.width * Screen.height;
				camera.orthographicSize = cameraHeight * 0.5f * (camera.orthographicSize / (DesignHeigt * 0.5f));
			}
		}
	}
}

相關推薦

Unity2d 移動裝置橫豎UGUI畫布調整使Editor真實裝置UI顯示保持一致

Unity2d預設的相機適配方法是將相機的寬高比按照手機螢幕寬高比例進行調整,保持相機高度不變並通過相機高度與螢幕實際高度比例對遊戲內容進行縮放。所以不同解析度螢幕的手機所顯示的遊戲內容在兩邊要麼有裁

【解決】移動裝置·橫豎時頁面內容字型大小調整的問題

首先判斷是不是橫豎屏導致的問題,所以要程式碼檢驗一下。 window.orientation 物件在手機上才可生效。 <script type="text/javascript"&g

Android 全面判斷是否為全面

一,全面屏的適配 全面屏出現後,如果不做適配,螢幕上會出現上下黑邊,影響視覺效果。 針對此問題,Android官方提供了適配方案,即提高App所支援的最大螢幕縱橫比,實現起來也比較簡單,在AndroidManifest.xml中做如下配置即可,在AndroidManife

橫豎的轉換頁面

橫豎屏的轉換,既可以手動操作實現,也可以自動旋轉裝置實現。 情況1:APP專案所有頁面既支援橫屏,又支援豎屏。 在專案配置中設定了支援橫豎屏,則不需要對檢視等做過多的配置即可實現橫豎屏。如圖所示: 情況2:APP專案根據需要,個別頁面需要既支援橫屏,又支援豎屏

移動端高清、多方案

dem ios7 scale gif java lec pixel pix 內網地址 背景 開發移動端H5頁面面對不同分辨率的手機面對不同屏幕尺寸的手機 視覺稿 在前端開發之前,視覺MM會給我們一個psd文件,稱之為視覺稿。 對於移動端開發而言,為了做到頁面高清的效果,視覺

Android劉海庫NotchFit簡介使用方式

NotchFit 智慧劉海屏適配庫 優點:使用簡單,劉海蔘數智慧判斷,一鍵式劉海蔘數回撥,無需考慮機型差異,適配O版本和P版本。 劉海屏存在於系統O版本、P版本及以上版本,由於google P版本劉海api推出較晚,導致O版本劉海屏的不同廠商的機型有各自不同的 適配方式,再者不同

設計方案--如何設計移動方案

一、前言 在眾多的移動裝置中,前端開發人員如何在不同螢幕大小,不同程度的高清屏下去百分百的還原設計稿,從來都不是一件簡單的事情,需要考慮眾多因素,權衡利弊,做出取捨,結合需求去選擇最合適的方案。 之前有一篇:如何設計移動端高清方案   二、面對的問題 在不同大小和高清的螢幕下: (1)如

移動端頁面的

ice minimum meta view ini maximum dev port pan   不進行任何配置,把網頁直接放在移動端打開會有嚴重的縮小頁面問題,通常我們可以在head標簽中加入以下代碼就可以解決:  <meta name="viewport" con

rem - 移動前端自適應布局解決方案和比較(轉載)

sel amp 有一點 也有 flexbox nbsp 人員 部分 font 原文鏈接:http://caibaojian.com/mobile-responsive-example.html 互聯網上的自適應方案到底有幾種呢?就我個人實踐所知,有這麽幾種方案:· 固定一個

移動APP中rem

resize 頁面 html 適配 har set utf-8 ont min 將js中的代碼引入自己html頁面中,頁面內的所有有關尺寸大小的設定都可以用rem來代替,如用rem代替px的使用,可以做到屏幕大內容按比例放大,是所有內容哦,若果你項目中所有內容都使用rem。

dubbo之日誌訪問日誌

訪問日誌 DDU ring toc accesslog span rate slf4j spa 日誌適配 自 2.2.1 開始,dubbo 開始內置 log4j、slf4j、jcl、jdk 這些日誌框架的適配 1,也可以通過以下方式顯示配置日誌輸出策略: 命令行

再聊移動端頁面的

nim aspect width 超過 ans 一起 device 效果 其他 Flexible承載的使命 Lexible到今天也有幾年的歷史了,解救了很多同學針對於H5頁面布局的適配問題。而這套方案也相對而言是一個較為成熟的方案。簡單的回憶一下,當初為了能讓頁面更好的適配

Android 劉海總結

一、簡介 隨著 Apple 釋出 iPhone X 之後,各大手機廠商也開始模仿這種劉海屏的設計,而且劉海屏手機的使用者也是越來越大,前段時間將專案進行了所有主流廠商的劉海屏手機的適配,以便讓劉海屏手機的使用者也能有更好的體驗。 二、劉海屏造成的 UI 顯示問題 劉海屏手機因為比平常的手機多了一塊頂部的

android劉海

轉載請註明出處:https://blog.csdn.net/u011038298/article/details/83505697 簡單點,開車的方式簡單點   問:在什麼情況下我們需要適配劉海屏? 答:應用在安卓9.0系統中使用了全屏或者沉浸模式的時候。如果狀態列正常展示

移動端相容和問題

安卓瀏覽器看背景圖片,有些裝置會模糊 解決方案:將背景圖片放大為div的2X倍(一般為兩倍),背景圖儘量高清且大於目標div的尺寸 /*原背景(div寬高都為100px)*/ .div{ background:url(../../XX.png) no-repea

移動端rem怎樣

向貓咪提問 一般我們在公司開發頁面,UI設計圖是出750px的圖,也就是基於Iphone 6 設計的圖。如果我們用如果得當的配置,UI圖上的東西是多少px,我們就寫多少px,這是程式設計師最方便的。但是這個是怎麼配置的呢? 不要方,其實很簡單,跟著思路走起來~~~ 如果不配置

cordova安卓全面

之前專案中打包的apk安裝到全面屏手機後,發現在應用下方出現了一大塊黑色區域(如:小米8),只有在系統中設定適配全面屏才能讓應用在全面屏手機中顯示正常,但是這種方式並不友好,而且有些手機廠商可能也沒有這種設定,所以還是需要我們再打包的時候就做一些相應的處理。 處理方式也比較簡單,開啟安卓工程

Android劉海庫NotchFit一鍵完美實現劉海!!!

    NotchFit是Android端的劉海適配庫。該庫使用簡單,劉海蔘數智慧判斷,使開發者無需再考慮手機系統和製造廠商的差異,一鍵智慧劉海蔘數回撥。你值得擁有!!! 下面對全屏劉海適配做個簡要說明: 程式碼實現方式: NotchFit.fit(this, Not

Android劉海庫NotchFit使用詳細介紹!!!

    NotchFit是一款Android端的劉海屏適配庫,適配了O版本和P版本,它遮蔽了不同廠商不同裝置不同系統版本對劉海屏適配帶來的一系列的繁雜的問題。      NotchFit可以智慧的判斷劉海的邏輯引數,所謂的劉海邏輯引數是該庫對裝置

移動前端自適應佈局解決方案和比較(實用、贊)

原文連結:http://caibaojian.com/mobile-responsive-example.html (修飾過) 網際網路上的自適應方案到底有幾種呢?就我個人實踐所知,有這麼幾種方案: 固定一個某些寬度,使用一個模式,加上少許的媒體查詢方案 使用flexbox解決方