浏览英雄，购买英雄等功能之二（浏览效果）

推荐阅读：

•  我的CSDN
•  我的博客园
•  QQ群：704621321

商品预制加载

（1）将某一item作为预制，并在面板种删除所有item，在初始化商店的时候实例化商品。
（2）创建ShopPanel脚本，并挂在到ShopPanel对象上
（3）在管理资源中添加sprite列表，添加GameObject

    public List<Sprite> itemSprite = new List<Sprite>();//商品皮肤列表
    public GameObject item;

  

 

  
1
  
2
 

（4）ShopPanel脚本

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ShopPanel : MonoBehaviour {

    private ManagerVars vars;
    private Transform viewport;
	void Start () {
        vars = ManagerVars.GetManagerVars();
        viewport = transform.Find("ScrollRect/viewport");
        Init();
    }
    private void Init()
    {
        viewport.GetComponent<RectTransform>().sizeDelta = new Vector2((vars.itemSprite.Count + 2) * 160, 0);//根据商品数改变viewport的宽度

        for (int i = 0; i < vars.itemSprite.Count; i++)
        {
            GameObject go = Instantiate(vars.item, viewport);
            go.GetComponent<Image>().sprite = vars.itemSprite[i];//更改每个物品对应的sprite
            go.transform.localPosition = new Vector3((i + 1) * 160, 0, 0);

        }
    }
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
 

实现浏览选中放大效果

在Update中实时检测当前浏览选中的下标

int index =(int)Mathf.Round(viewport.transform.localPosition.x / (-160));

  

 

  
1
 

定义一个SetItemSize方法，改变选中的item变大，未选中的变小

    private void SetItemSize(int index)
    {
        for (int i = 0; i < viewport.childCount; i++)
        {
            if (i == index)
            {
                viewport.GetChild(i).GetComponentInChildren<RectTransform>().sizeDelta = new Vector2(160, 160);
            }
            else
            {
                viewport.GetChild(i).GetComponentInChildren<RectTransform>().sizeDelta = new Vector2(80, 80);
            }
        }
    }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

提醒：改变RectTransform组件的宽高使用sizeDelta方法。
此时运行发现位置有偏差

解决办法：设置ScrollRect对象的锚点为left，设置Pivot.x=0；
运行发现滑动后停留的位置不是很准确，因此当鼠标抬起（即停止滑动）时，需要代码控制整个滑动内容的位置

        if (Input.GetMouseButtonUp(0))
        {
            viewport.transform.localPosition= new Vector3(index * (-160), 0, 0);
        }

  

 

  
1
  
2
  
3
  
4
 

运行发现，滑动过于流畅，这个是由于惯性造成的。因此，取消勾选ScrollRect->Inertia
取消勾选后，为了让滑动看上去缓和一些，可以加一个DOTween动画

viewport.transform.DOMoveX(index * (-160), 0.2f);

  

 

  
1
 

显示选中名字

在管理资源器中创建名字列表

   public List<string> itemName = new List<string>();//商品名

  

 

  
1
 

在ShopPanel中根据选中物品的下标，显示对应的名字

    private void ShopItemName(int index)
    {
        txt_name.text = vars.itemName[index];
    }

  

 

  
1
  
2
  
3
  
4
 

返回主界面

在MainPanel脚本中，为商店按钮添加监听事件

   btn_start.onClick.AddListener(Click_btn_start);

   private void Click_btn_select()
    {
        EventCenter.Broadcast(EventDefine.ShowShopPanel);
        gameObject.SetActive(false);
    }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

在ShopPanel脚本中，注册ShowShopPanel事件

    private void Awake()
    {
        EventCenter.AddListener(EventDefine.ShowShopPanel, Show);
    }
        private void OnDestroy()
    {
        EventCenter.RemoveListener(EventDefine.ShowShopPanel, Show);
    }
        private void Show()
    {
        gameObject.SetActive(true);
    }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

在ShopPanel脚本中，为返回按钮添加监听事件，同时广播显示主界面事件

    btn_return.onClick.AddListener(Click_Btn_Return);
    private void Click_Btn_Return()
    {
        EventCenter.Broadcast(EventDefine.ShowMainPanel);
        gameObject.SetActive(false);
    }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

在ShopPanel脚本中，初始化隐藏ShopPanel面板

gameObject.SetActive(false);

  

 

  
1
 

在MainPanel脚本中，注册ShowMainPanel事件

	EventCenter.AddListener(EventDefine.ShowMainPanel,Show);
    private void OnDestroy()
    {
        EventCenter.RemoveListener(EventDefine.ShowMainPanel, Show);
    }
    private void Show()
    {
        gameObject.SetActive(true);
    }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

文章来源: unity3d.blog.csdn.net，作者：爱上游戏开发，版权归原作者所有，如需转载，请联系作者。

原文链接：unity3d.blog.csdn.net/article/details/87810821