Unity-如何实现酷炫的翻页式场景切换

简介

  最近使用unity开发时策划提了一个需求：用翻页的方式来进行关卡间的切换。
  听起来很不错，但因为插件不匹配和多个摄像机的关系使得实现起来并不容易。现在就给大家带来一种可行的解决方案。

使用资源

• 角色：https://legnops.itch.io/red-hood-character
• 地形：https://szadiart.itch.io/pixel-fantasy-caves
• 攻击效果：https://v-ktor.itch.io/pixelated-attackhit-animations
• 翻页效果：BookPro插件
• 相机跟随：Cinemachine

实现效果

• 角色通关场景1时，靠近下一关的门，此时角色渐隐。
• 随后场景1最后的画面被翻页，掀开后是场景2。
• 角色渐显，开始场景2的游玩。
  

正文

游戏流程

• 正常游玩时：
  场景中真正使用的只有一个Main Camera，且使用Cinemachine用来跟随Player
• 通关时：
  首先需要将通关最后的画面保存并放在bookPro预制体的第0页
  然后在bookPro下方生成新的场景，即bookPro盖住新场景
  最后翻页，实现效果
  
• 新关卡：
  重新摆放Player，开始游玩

遇到的问题

1. 想要动态修改bookPro里page上的图片，可以用截图的方法——通关时用Main Camera获取当前截图，保存并挂载在page上
   但截取的图保存后要过很久才能读取到，直接读取的话就是空指针

//截图
Application.CaptureScreenshot("Screenshot.png");
//挂载到page上
GameObject.Find("bookPro/Page0").GetComponent<Image>().sprite = XXX; 

2. 保存图片不行，可以将Camera渲染的Renderer保存挂在page上
   即用一个新的Camera拍摄场景1最后的画面，同时将渲染的组件挂载page上，但bookPro插件里的page只有Image的组件
3. 如何让翻页内容是场景1的最后画面，而翻页下方的画面是场景2？
   有两个方案：一是提前截好场景2的图，放在page2的地方，等场景加载好再把bookPro藏起来；二是把page2先设置成透明的，这样page0翻的时候，在page2位置的场景2就能直接显示出来，等下次翻页时再把page2设置成不透明的

可行方案

• 正常情况下，场景由Main Camera来显示，Hierarchy里有一个专门拍摄场景最后画面的Camera（用Main Camera和Camera来区分），但Camera的camera组件是禁用的。同时bookpro挂在Main Camera上，这就保证了不管人物移动到哪里，翻页的动画都能在关卡结束时播放。
  

• 当通关时，camera启用并设置其Position为Main Camera的Position

• 将场景1移走(移出Main Camera的范围即可)，并将Camera移动相同距离。用一个Renderer Texture来保存camera的画面并将其提前挂载到page0上
  注意将page的Image修改为RawImage,否则Renderer Texture挂不上去
  

• 实现角色渐隐，生成场景2并调用BookPro里的AutoFlip方法

• 摆放Player在场景2中的位置并将Camera的camera组件禁用

• 处置场景1(销毁或者禁用都可以)

原理的场景解释

相关代码

bool startFade = false;

//通关时
private void OnTriggerEnter2D(Collider2D collision){
	//这里的enemy_clear是通关条件，可以自行修改
    if (collision.tag == "door"&& enemy_clear())
   {
       StartCoroutine(nextScene());   
   }
}
    
//角色渐隐效果
void fade(){
    if (tempTime < 1)
     {
         tempTime = tempTime + Time.deltaTime;
     }
     if (this.GetComponent<SpriteRenderer>().material.color.a >0)
     {
         this.GetComponent<SpriteRenderer>().material.color = new Color(
         this.GetComponent<SpriteRenderer>().material.color.r
         , this.GetComponent<SpriteRenderer>().material.color.g,
         this.GetComponent<SpriteRenderer>().material.color.b,
         //减小Alpha值  
         gameObject.GetComponent<SpriteRenderer>().material.color.a - tempTime / 50);
     }
     else {
         startFade = false;
     }
 }
    
//实现角色渐隐并布置新场景
public IEnumerator fadeAndSetupMap(){
	//开始渐隐
    startFade = true;
    yield return new WaitForSeconds(1f);
    //布置新场景
    GameController.instance.dosomething();
 }
    
//等待角色消失，翻页并禁用camera
public IEnumerator nextScene(){
    StartCoroutine(fadeAndSetupMap());
    yield return new WaitForSeconds(2f);
    ChangePage();
    GameObject.Find("Camera").GetComponent<Camera>().enabled = false;
}
	
//自动翻页
public void ChangePage(){
    GameObject.Find("Canvas/BookPro").GetComponent<AutoFlip>().FlipRightPage();
}
    
void Update(){
    if (startFade) fade();
}

相关插件修改

BookPro.cs:77/78 改为

RawImage Left;
RawImage Right;

后面相应修改即可

感谢

感谢舍友也是小组里的另一位代码潇哥提供的相关思路