unity3d大型互动照片墙

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;
        }
    }

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

  • 10
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 31
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 31
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值