unity3d大型互动照片墙

Posted 2023-03-23 Mao_Hui

1.本次应客户需求，制作一个大型照片墙互动，输出分辨率为9600*4320（注：unity3d官方推荐最大分辨率为8192*3686.4），经过现场长达24小时暴力测试中途未发生问题，姑且判定可以达到正常标准，废话不多说，先上效果。

unity3d大型照片墙_哔哩哔哩_bilibili

下面列举几项用到的技术

待机视频滚动条问题

在原有的照片层之上生成了一部分遮挡条，通过DoTween控制变化时间实现遮罩层的滚动问题

 上下相邻照片重复问题

因为现场照片墙比较巨大，虽然每个位置照片都是从照片库里边进行获取，但总不可避免上下照片会有重复，因此需要自己写特定的算法进行规避上下照片重复问题，代码如下：

//numeber数量，minNum最小范围，maxNum最大范围
    public int[] GetNum(int number, int minNum, int maxNum)
    
        List<int> RandomNum = new List<int>();
        int temp;
        int[] b = new int[number];
        System.Random r = new System.Random();
        for (int i = 0; i < number; i++)
        
            temp = r.Next(minNum, maxNum);
            if (!RandomNum.Contains(temp))
            
                RandomNum.Add(temp);
                b[i] = temp;
            
            else
            
                i--;
            
        
        for (int j = 0; j < b.Length; j++)
        
            NewRandomNum[j] = b[j];
        
        return b;
    

相邻照片放大缩小问题

因为每次有照片放大，相应的周围照片要进行缩小，为了使每次交互影响的照片范围尽量小，可以提高可玩人数，采用放大中间位置，相应缩小周围相邻左右各两行，五行一个单位避免影响其他行

照片上下无限滑动

unity3d自带的Scroll View是无法实现上线无限滑动的，要实现这个功能我们就需要进行重写Scroll View组件，代码如下，篇幅有限就展示部分代码，博客，github很多大神重写的，大家有需求可以去找找：

 照片左右挤压移动

导入dotween插件即可实现照片放大缩小，以及左右移动的缓动效果

 照片放大后播放视频

由于现场可互动的范围比较广，播放视频的个数不确定，可能可以同时播放20+个视频，unity3d自带的videoplayer就很难胜任播放工作，引入视频播放插件AVPro，unity商店上大家可自行查找导入使用，同时AVPro播放视频也方便大家外置替换

视频播放点赞

为了简化操作，就将点赞数使用excel存储（方便甲方给某个领导设置点赞数，所以建议外置，随时可修改），主要是实现excel的读写，先读取此人已获得的点赞数，然后展示出来，如果有用户点赞，显示红心，并且点赞数+1

读取excel并显示代码如下：

public void ReadExcel(int ID)
        
        //1.打开文件，创建一个文件流操作对象
        FileStream fileStream = new FileStream(Application.streamingAssetsPath + "/DZ/" + "/star.xlsx", FileMode.Open, FileAccess.Read);
        //2.创建一个excel读取类
        IExcelDataReader reader = ExcelReaderFactory.CreateOpenXmlReader(fileStream);

        //方法2：读取
        DataSet result = reader.AsDataSet();

        star = int.Parse(result.Tables[0].Rows[ID][1].ToString());
        mtext.text = star.ToString();
        reader.Close();
    

 写入excel并显示代码如下

public void WriteExce(int wID)
    
        //string filePath = Application.dataPath + "/StreamingAssets" + "/" + "star.xlsx";
        string filePath = Application.streamingAssetsPath + "/DZ/" + "/star.xlsx";
        //string filePath = Application.dataPath + "/Excel/" + "star.xlsx";
        FileInfo file = new FileInfo(filePath);
        if (!file.Exists)
        
            Debug.LogError("not excel file!!!");
        
        using (ExcelPackage package = new ExcelPackage(file))
        
            star += 1;
            ExcelWorksheet worksheet = package.Workbook.Worksheets[1];
            worksheet.Cells[wID + 1, 2].Value = star;
            package.Save();
        
    

 注意：人物视频播放点赞，我的实现方式读取-》写入-》读取，如果有什么简化方式可以下方留言讨论

视频播放完毕关闭

因为是通过AVPro官方案例提示实时生成视频组件进行播放视频，因此没想到检测视频是否播放并关闭的方法，最后在同事的提示下，为生成的MediaPlayer添加一个检测视频是否播放完毕的脚本，完美解决视频播放完毕自动关闭问题

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using RenderHeads.Media.AVProVideo;

public class ControlPlayVideo : MonoBehaviour

    private MediaPlayer mediaPlayer;
    // Start is called before the first frame update
    void Start()
    
        mediaPlayer = GetComponent<MediaPlayer>();
        mediaPlayer.Events.AddListener(OnVideoEvent);
    

    public void OnVideoEvent(MediaPlayer mp, MediaPlayerEvent.EventType et, ErrorCode errorCode)
    
        switch (et)
        
            case MediaPlayerEvent.EventType.ReadyToPlay:
                break;
            case MediaPlayerEvent.EventType.Started:
                break;
            case MediaPlayerEvent.EventType.FirstFrameReady:
                break;
            case MediaPlayerEvent.EventType.FinishedPlaying:
                //Debug.Log(gameObject.name + "播放完毕");
                mediaPlayer.Control.Stop();
                if (gameObject.transform.parent.parent!=null)
                
                    Destroy(gameObject.transform.parent.parent.gameObject, 0.1f);
                    ControlVolume.Instance.RemoveList();
                  
                break;
        
    

此次纵向照片就总结到这，大家有什么意见或者建议，都可在下方留言，大家一起学习交流