刀塔传奇中滚轴式UI的实现

本文主要是介绍刀塔传奇中滚轴式UI的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前几年刀塔传奇火爆，其可滑动背景图的主界面设计样式也随之广为流传。时不时就有策划要求把主界面做成刀塔传奇那种多层可滑动背景的样式，即便是在一个3D游戏里…… 

刀塔传奇里滚轴式UI的要点：多层（2~3层）背景图，每层有不同的移动速率，且背景图上的可交互元素（按钮）需要和所在背景图保持相同速率移动。

 

下面用Unity引擎，NGUI的UI插件实现此需求。

 

最核心的需求：背景图平移

毙掉平移相机的方案，移动背景图入选。按照操作体验，背景图是保持恒定速率横向平移的。利用NGUI的OnDrag事件实现背景图的移动并不难。难点在于边界的处理，滑动的极限处是背景图的边缘和屏幕边缘重合，需要设置背景图的位移值变化区间。

 void GetBorderLimit()

    {

        float ratio = UI_CAMERA_VIEW_HEIGHT / (float)Screen.height;

        float aspect = (float)Screen.width / (float)Screen.height;

        float fScreenWidthReal = Screen.width * ratio;

        if (aspect <= ASPECT_INITIAL)

        {

            fScreenWidthReal = UI_CAMERA_VIEW_WIDTH;

        }

        mfBorderLimitMain = (mTexMain.width - fScreenWidthReal) * 0.5f; 

        mfBorderLimit2 = (mTex2.width - fScreenWidthReal) * 0.5f; 

        mfFactor2 = mfBorderLimit2 / mfBorderLimitMain;          

    }

背景图默认位于x=0处，x值在[-mfBorderLimitMain , mfBorderLimitMain]区间变化可保证背景图不越界且边界能与屏幕边缘贴合。

解释下上面的代码，UI_CAMERA_VIEW_HEIGHT是NGUI的UIRoot里指定的Height，项目里一般将Scaling Style设置为Constrained，UI_CAMERA_VIEW_HEIGHT即下图里的640。

 

NGUI适应不同的分辨率以Height优先。研究NGUI的UIRoot.cs，计算activeHeight时，需要注意处理UIRoot里设置的分辨率和屏幕分辨率大小的比较。

 

 

多个背景图的平移

解决了单个背景图的平移，多个背景图的平移只需要计算出速率的相对倍率即可。多层背景图在滑动过程中的相对位移是确定的，同时起于边缘，同时到达另一个边缘，意味着移动速率和背景图的移动范围成正比，即上面步骤计算的移动区间值。

 

不同分辨率的处理

不同分辨率下如何保证背景图的全覆盖呢？因分辨率不同，需要的图片高度不同，可以考虑裁剪，让美术提供上下可接受裁剪掉的背景图。但既然可以裁剪，是否也可以拉伸处理，让背景图完全显示，让玩家欣赏到完整的背景图？

图片小范围等比拉伸，视觉效果是玩家能够接受的，甚至是无察觉的。对特定的屏幕分辨率，图片高度是固定的。以我们的UIRoot的960*640的设定，屏幕宽高比不小于960/640=1.5的，背景图的高度都设置为640，如果美术提供的背景图宽高比为4:1，那么在主流分辨率960*640,1136*640，1920*1080,1134*750下，背景图的宽高设置为2560*640。

 

对于屏幕宽高比小于的分辨率，如1024*768, 640的高度不足以覆盖屏幕。

 

根据NGUI对activeHeight的计算可知，图片的高度需要调整为960/(1024/768)=720，图片宽高比保持不变，那么图片宽高设置为2880*720，可以恰好覆盖整个屏幕。

 

这里需要注意的是，背景图拉伸处理后，为了让背景图上的按钮相对背景图位置保持不变，按钮的实际位置需要作相对等比偏移。

 void PreProcessTextureSizeToFullCoverScreen()

    {

        float fAspectMin = 1024.0f / 768.0f;

        float fHeightMax = UI_CAMERA_VIEW_WIDTH / fAspectMin;

        float aspect = (float)Screen.width / (float)Screen.height;    

        if (aspect < ASPECT_INITIAL)

        {

            float fScale = fHeightMax / mTexMain.height;

            mTexMain.SetDimensions((int)(mTexMain.width * fScale), (int)(mTexMain.height * fScale));

            if (mGoEntryButtonRootMain != null)

            {

                for (int i = 0; i < mGoEntryButtonRootMain.transform.childCount; ++i)

                {                                    

mGoEntryButtonRootMain.transform.GetChild(i).position = new Vector3(mGoEntryButtonRootMain.transform.GetChild(i).position.x * fScale, mGoEntryButtonRootMain.transform.GetChild(i).position.y * fScale, mGoEntryButtonRootMain.transform.GetChild(i).position.z);

                }

            }

        }     

    }

 

背景图上的交互按钮

让按钮和背景图保持同一速率平移，只需要在UIPrefab的组织上，将背景图节点作为按钮们的父节点。这样背景图移动时，按钮们作为背景图的子节点会随之平移，不用再作任何处理。

 

所以，除了为适应不同分辨率对按钮的相对位移进行处理，无需在代码层面进行任何其他处理。

 

 

 

完整代码：

using UnityEngine;
using System.Collections;public class HallUIBGScrollController : MonoBehaviour
{public UITexture mTexMain = null;public GameObject mGoEntryButtonRootMain = null;public UITexture mTex2 = null;private float mfFactorMoveBase = 1.0f;private float mfBorderLimitMain = 0;private float mfBorderLimit2 = 0;private float mfFactor1 = 1.0f;private float mfFactor2 = 1.0f;private const float UI_CAMERA_VIEW_WIDTH = 960.0f;private const float UI_CAMERA_VIEW_HEIGHT = 640.0f;private const float ASPECT_INITIAL = 960.0f / 640.0f;private const string STR_PATH_BG_MAIN = "";void Awake(){PreProcessTextureSizeToFullCoverScreen();}void PreProcessTextureSizeToFullCoverScreen(){float fAspectMin = 1024.0f / 768.0f;float fHeightMax = UI_CAMERA_VIEW_WIDTH / fAspectMin;float aspect = (float)Screen.width / (float)Screen.height;    if (aspect < ASPECT_INITIAL){float fScale = fHeightMax / mTexMain.height;// Debug.LogError("fHeightMax: " + fHeightMax + " mTexMain.height: " + mTexMain.height + " fScale: " + fScale);mTexMain.SetDimensions((int)(mTexMain.width * fScale), (int)(mTexMain.height * fScale));if (mGoEntryButtonRootMain != null){for (int i = 0; i < mGoEntryButtonRootMain.transform.childCount; ++i){//  Debug.LogError(mGoEntryButtonRootMain.transform.GetChild(i).gameObject.name);mGoEntryButtonRootMain.transform.GetChild(i).position = new Vector3(mGoEntryButtonRootMain.transform.GetChild(i).position.x * fScale, mGoEntryButtonRootMain.transform.GetChild(i).position.y * fScale, mGoEntryButtonRootMain.transform.GetChild(i).position.z);}}}     }void Start(){GetBorderLimit();}void LoadBG(){}void GetBorderLimit(){float ratio = UI_CAMERA_VIEW_HEIGHT / (float)Screen.height;float aspect = (float)Screen.width / (float)Screen.height;float fScreenWidthReal = Screen.width * ratio;if (aspect <= ASPECT_INITIAL){fScreenWidthReal = UI_CAMERA_VIEW_WIDTH;}mfBorderLimitMain = (mTexMain.width - fScreenWidthReal) * 0.5f; mfBorderLimit2 = (mTex2.width - fScreenWidthReal) * 0.5f; mfFactor2 = mfBorderLimit2 / mfBorderLimitMain;          }void OnDrag(Vector2 vos){      if (mTexMain != null){MoveOnDrag(vos, mTexMain.gameObject, mfFactor1, mfBorderLimitMain);}if (mTex2 != null){MoveOnDrag(vos, mTex2.gameObject, mfFactor2, mfBorderLimit2);}     }void MoveOnDrag(Vector2 vos, GameObject go, float fFactor, float fBorderLimit){if (go != null){float x = go.transform.localPosition.x + vos.x * mfFactorMoveBase * fFactor;if (x > fBorderLimit){x = fBorderLimit;}if (x < -fBorderLimit){x = -fBorderLimit;}go.transform.localPosition = new Vector3(x, go.transform.localPosition.y, go.transform.localPosition.z);}} 
}

 

 

 

 

 

 

 

 

这篇关于刀塔传奇中滚轴式UI的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---