Unity教程(十二)视差背景

2024-08-23 19:12

本文主要是介绍Unity教程(十二)视差背景,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Unity开发2D类银河恶魔城游戏学习笔记

Unity教程(零)Unity和VS的使用相关内容
Unity教程(一)开始学习状态机
Unity教程(二)角色移动的实现
Unity教程(三)角色跳跃的实现
Unity教程(四)碰撞检测
Unity教程(五)角色冲刺的实现
Unity教程(六)角色滑墙的实现
Unity教程(七)角色蹬墙跳的实现
Unity教程(八)角色攻击的基本实现
Unity教程(九)角色攻击的改进

Unity教程(十)Tile Palette搭建平台关卡
Unity教程(十一)相机
Unity教程(十二)视差背景

Unity教程(十三)敌人状态机


如果你更习惯用知乎
Unity开发2D类银河恶魔城游戏学习笔记目录


文章目录

  • Unity开发2D类银河恶魔城游戏学习笔记
  • 前言
  • 一、概述
  • 二、视差背景
    • (1)添加背景
    • (2)调整层次
    • (3)视差背景实现
  • 三、无尽滚动背景


前言

本文为Udemy课程The Ultimate Guide to Creating an RPG Game in Unity学习笔记,如有错误,欢迎指正。

本节添加视差背景。
对应b站视频:
【Unity教程】从0编程制作类银河恶魔城游戏P45
【Unity教程】从0编程制作类银河恶魔城游戏P46


一、概述

本节给游戏添加背景,我们做一个视差背景来增强视觉效果。
视差背景是通过多层次的背景来模拟透视视差效果。就是当发生移动时,离照相机越近的背景移动越快;反之越慢。这样,我们的背景就会形成类似于透视视差的效果。
我参照了这篇文章 聊聊2D游戏视差背景的实现
除此之外教程中还讲解了无限滚动的背景怎么实现。

二、视差背景

(1)添加背景

背景图的路径:
Assets->Graphics->Surroundings->Medieval_Castle->Background
将layer_1、layer_2拖入场景中
在这里插入图片描述
注意:(1)如果Tile Palette画笔工具还开着会向Tilemap的背景上绘制。所以记得拖入背景图前关掉。
(2)查看右上角2D选项有没有被关掉,关掉会显示不出背景。
在这里插入图片描述

(2)调整层次

调整Sprite Renderer中的Sorting Layer参数,调整被渲染的顺序
我们先添加四个层Background、Ground、Enemy、Player
在这里插入图片描述
在这里插入图片描述
给天空背景层重命名为BG_Sky_Layer,城堡背景层重命名为BG_City_Layer。
Sorting Layer都设置为Background,并分别修改Order inLayer为-10和-9。
在这里插入图片描述
在这里插入图片描述
重置他们的位置,挂靠在空物体下面,并把空物体重命名为Background
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

Animator层次设定为Player
在这里插入图片描述
将Tilemap里Ground层次设置为Ground,Background层次设置为Background
在这里插入图片描述
在这里插入图片描述

(3)视差背景实现

天空层复制两次成为天空层的子层。改变两个子层的位置,x的值一个改为-40,一个改为40。
在这里插入图片描述
城市层进行相同的处理
在这里插入图片描述
创建脚本ParallaxBackground
创建变量xPosition,在进入状态时记录背景的初始位置。
创建变量parallaxEffect来表示视差效应,控制背景跟随相机的速度。
在Update()中每次用背景初始位置xPosition加上计算出的要移动的距离distanceToMove,来更新背景位置

//ParallaxBackground:视差背景
using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class ParallaxBackground : MonoBehaviour
{private GameObject cam;[SerializeField] private float parallaxEffect;private float xPosition;// Start is called before the first frame updatevoid Start(){cam = GameObject.Find("Main Camera");xPosition = transform.position.x;}// Update is called once per framevoid Update(){float distanceToMove = cam.transform.position.x * parallaxEffect;transform.position=new Vector3(xPosition + distanceToMove,transform.position.y);}
}

将脚本分别挂载到BG_Sky_Layer和BG_City_Layer,根据想要的效果调节ParallaxEffect的值
在这里插入图片描述
在这里插入图片描述
效果对比如下:
ParallaxEffect都为0
在这里插入图片描述

BG_Sky_Layer:ParallaxEffect为1,BG_City_Layer:ParallaxEffect为0.8
在这里插入图片描述

可以看出增添视差效果后两层背景的移动速度明显不一样了,更具有空间效果。

按照教程做完我发现,假如相机初始位置为负可能造成背景反向移动,以比较极端的情况为例:
我将场景向x负方向拖,Main Camera的x坐标为-109.4
在这里插入图片描述
这时运行,背景会瞬间向后移动很长的距离。
在这里插入图片描述
虽然我们的初始位置一般定在中心,基本不会出现这种情况,但我还是想进行改进。
我们只要在进入状态时记录相机的初始位置,并且在计算要移动的距离时,将使用相机的x坐标改为使用相机x方向的位移即可。

//ParallaxBackground:视差背景
using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class ParallaxBackground : MonoBehaviour
{private GameObject cam;[SerializeField] private float parallaxEffect;private float xPosition;private float xCamPosition;// Start is called before the first frame updatevoid Start(){cam = GameObject.Find("Main Camera");xPosition = transform.position.x;xCamPosition= cam.transform.position.x;}// Update is called once per framevoid Update(){float distanceToMove = (cam.transform.position.x - xCamPosition) * parallaxEffect;transform.position=new Vector3(xPosition + distanceToMove,transform.position.y);}
}

这时即使初始位置比较极端程序也可以正常运行
在这里插入图片描述

三、无尽滚动背景

制作无尽滚动的背景我们使用可拼接重复的图片。如下所示,如果一瞬间移动背景使得移动过来的部分与原背景完全一致,在相机中我们是看不出来的。
如果没有视差背景和摄像机应该同步移动,现在背景落后于摄像机,所以每当背景落后于相机一个图片长度的时候我们移动一次背景,背景就可以不断随着角色前移,实现背景的无尽滚动。
在这里插入图片描述
图片的长度length通过SpriteRenderer获得。
判断背景与相机的距离差值与图片长度的关系。差值大于length,则前移length;小于-legth,则后移length
和教程中实现方式对应的示意图如下:
在这里插入图片描述

由图示可知距离插值等于 d i s t a n c e D i f f e r e n c e = c a m P o s i t i o n ∗ ( 1 − E f f e c t ) − x P s i o t i o n distanceDifference=camPosition * (1 - Effect) - xPsiotion distanceDifference=camPosition(1Effect)xPsiotion
对应代码

//ParallaxBackground:视差背景
using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class ParallaxBackground : MonoBehaviour
{private GameObject cam;[SerializeField] private float parallaxEffect;private float xPosition;private float length;// Start is called before the first frame updatevoid Start(){cam = GameObject.Find("Main Camera");length=GetComponent<SpriteRenderer>().bounds.size.x;xPosition = transform.position.x;}// Update is called once per framevoid Update(){float distanceToMove = cam.transform.position.x * parallaxEffect;float distanceMoved = cam.transform.position.x * (1 - parallaxEffect);transform.position=new Vector3(xPosition + distanceToMove,transform.position.y);if (distanceMoved > xPosition + length)xPosition = xPosition + length;else if (distanceMoved < xPosition - length)xPosition = xPosition - length;}
}

和改进后实现方式对应的示意图如下:
在这里插入图片描述

由图示可知距离插值等于 d i s t a n c e D i f f e r e n c e = ( c a m P o s i t i o n − x P o s i t i o n ) ∗ ( 1 − E f f e c t ) − ( x P o s i t i o n − x C a m P o s i t i o n ) distanceDifference=(camPosition-xPosition) * (1 - Effect) - (xPosition-xCamPosition) distanceDifference=(camPositionxPosition)(1Effect)(xPositionxCamPosition)

//ParallaxBackground:视差背景
using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class ParallaxBackground : MonoBehaviour
{private GameObject cam;[SerializeField] private float parallaxEffect;private float xPosition;private float xCamPosition;private float length;// Start is called before the first frame updatevoid Start(){cam = GameObject.Find("Main Camera");length=GetComponent<SpriteRenderer>().bounds.size.x;xPosition = transform.position.x;xCamPosition= cam.transform.position.x;}// Update is called once per framevoid Update(){float distanceToMove = (cam.transform.position.x - xCamPosition) * parallaxEffect;float distanceDifference = (cam.transform.position.x - xCamPosition) *(1- parallaxEffect)-(xPosition-xCamPosition);transform.position=new Vector3(xPosition + distanceToMove,transform.position.y);if (distanceDifference > length)xPosition = xPosition + length;else if (distanceDifference < -length)xPosition = xPosition + - length;}
}

在这里插入图片描述

这篇关于Unity教程(十二)视差背景的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1100258

相关文章

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》:本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务,增加、删

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》:本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境?二、虚拟环境创建方式对比三、命令行创建虚拟环境(venv)3.1 基础命令3

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

python连接本地SQL server详细图文教程

《python连接本地SQLserver详细图文教程》在数据分析领域,经常需要从数据库中获取数据进行分析和处理,下面:本文主要介绍python连接本地SQLserver的相关资料,文中通过代码... 目录一.设置本地账号1.新建用户2.开启双重验证3,开启TCP/IP本地服务二js.python连接实例1.

Python 安装和配置flask, flask_cors的图文教程

《Python安装和配置flask,flask_cors的图文教程》:本文主要介绍Python安装和配置flask,flask_cors的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,... 目录一.python安装:二,配置环境变量,三:检查Python安装和环境变量,四:安装flask和flas

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

Ubuntu中远程连接Mysql数据库的详细图文教程

《Ubuntu中远程连接Mysql数据库的详细图文教程》Ubuntu是一个以桌面应用为主的Linux发行版操作系统,这篇文章主要为大家详细介绍了Ubuntu中远程连接Mysql数据库的详细图文教程,有... 目录1、版本2、检查有没有mysql2.1 查询是否安装了Mysql包2.2 查看Mysql版本2.