首页 > 其他分享 >Unity2D横板游戏之背景视差与无限滚动效果

Unity2D横板游戏之背景视差与无限滚动效果

时间:2024-05-01 16:44:17浏览次数:16  
标签:横板 transform Unity2D background2 background1 backgroundPosition private position

Unity2D横板游戏之背景视差与无限滚动效果

简单介绍

背景视差效果。在 2D 横板游戏中,由若干个背景图片构成的背景,在背景移动的过程中,每一个背景图片的移动速度均不同,靠近玩家的背景图片移动速度快,而远离玩家的背景图片移动速度慢,从而形成背景的视差效果,使背景更加立体且富有层级。

背景无限滚动效果。背景无限滚动并不是在游戏场景中加载无限的背景,而是在水平方向上使用两个紧密相邻的背景进行交替渲染,从而形成无限滚动的错觉。

代码设计

public class BackgroundEffect : MonoBehaviour
{
    private Transform _follow;
    private GameObject _background1;
    private GameObject _background2;
    private float _backgroundWidth;
    private float _moveSpeed;
    private Vector2 _previousCameraPosition;

    public void Initialize(Transform follow, GameObject background1, GameObject background2, float moveSpeed)
    {
        _follow = follow;
        _background1 = background1;
        _background2 = background2;
        _moveSpeed = moveSpeed;
        _previousCameraPosition = _follow.position;
        SpriteRenderer spriteRenderer = _background1.GetComponent<SpriteRenderer>();
        if (spriteRenderer == null)
        {
            return;
        }
        Sprite sprite = spriteRenderer.sprite;
        Vector3 localScale = _background1.transform.localScale;
        _backgroundWidth = sprite.bounds.size.x * localScale.x;
        Vector3 background2Position = _background2.transform.position;
        background2Position = new Vector2(background2Position.x - _backgroundWidth, background2Position.y);
        _background2.transform.position = background2Position;
    }

    private void FixedUpdate()
    {
        Vector2 currentCameraPosition = _follow.position;
        Vector2 cameraOffset = currentCameraPosition - _previousCameraPosition;
        Vector3 backgroundPosition = _background1.transform.position;
        backgroundPosition = new Vector2(backgroundPosition.x + cameraOffset.x - cameraOffset.x * _moveSpeed, backgroundPosition.y + cameraOffset.y);
        _background1.transform.position = backgroundPosition;
        backgroundPosition = _background2.transform.position;
        backgroundPosition = new Vector2(backgroundPosition.x + cameraOffset.x - cameraOffset.x * _moveSpeed, backgroundPosition.y + cameraOffset.y);
        _background2.transform.position = backgroundPosition;
        if (_background1.transform.position.x <= _follow.position.x)
        {
            Vector3 background2Position = _background2.transform.position;
            background2Position = new Vector2(background2Position.x + 2f * _backgroundWidth, background2Position.y);
            _background2.transform.position = background2Position;
            (_background1, _background2) = (_background2, _background1);
        }
        if (_follow.position.x <= _background2.transform.position.x)
        {
            Vector3 background1Position = _background1.transform.position;
            background1Position = new Vector2(background1Position.x - 2f * _backgroundWidth, background1Position.y);
            _background1.transform.position = background1Position;
            (_background1, _background2) = (_background2, _background1);
        }
        _previousCameraPosition = currentCameraPosition;
    }
}

后记

由于个人能力有限,文中不免存在疏漏之处,恳求大家斧正,一起交流,共同进步。

标签:横板,transform,Unity2D,background2,background1,backgroundPosition,private,position
From: https://www.cnblogs.com/kkelin/p/18169450

相关文章

  • Godot.NET C#IOC重构(3):视差景深背景
    目录相关链接前言目标效果景深效果实现无限长背景重复景深相关链接十分钟制作横版动作游戏|Godot4教程《勇者传说》#0前言这次来学习如何设置景深目标效果景深效果实现无限长背景只要开起了Mirror,Godot就会进行无限自我复制重复景深......
  • Parallax.js:实现自适应智能设备方向的视差效果
    哈喽!大家好!我是程序视点的小二哥。今天给大家分享一款功能非常强大的javascript视觉差特效引擎插件:Parallax.js。Parallax.js简介Parallax.js是一个简单的,轻量级的视差引擎。你可以将它作为作为jQuery或Zepto插件来使用,也可以以纯JS的方式来使用。最-最-最厉害的是它可以对智......
  • Unity2D中瓦片地图的创建与绘制教程
    Unity2D中瓦片地图的创建与绘制素材切割创建地图创建瓦片绘制地图瓦片调色板画笔拓展素材资源链接素材切割选中以下素材,以Tiles为例(素材链接在文章最下方)修改素材属性。将SpriteMode属性改为Multiple多张(不然切割不了);PixelsPerUnit改为16像素;FilterMode改为Point(nofilte......
  • 让我摸个鱼吧!纯JS复刻B站首页头图 - 海洋视差效果
    最近发现B站的首页头图的交互效果非常有趣,如下图所示,当鼠标在画面中左右滑动时,海洋生物会栩栩如生地动起来,这可比刷视频得劲多了啊:这是使用多张具有不同视角的图片,通过透视、位移等处理方式来实现的视差效果,在佩服UI与前端对网页交互效果方面的努力和探索之外,我也沉浸在这片“......
  • 实时渲染常用纹理技术总结:视差映射
    【USparkle专栏】如果你深怀绝技,爱“搞点研究”,乐于分享也博采众长,我们期待你的加入,让智慧的火花碰撞交织,让知识的传递生生不息!一、概述视差映射(ParallaxMapping)是一种类似于法线贴图的纹理技术,它们都能显著增强模型/纹理表面细节并赋予其凹凸感,但法线贴图所带来的凹凸感不会......
  • 视差滚动的爱情故事
    故事说起在一个冰冷幽暗的夜晚上,我正思考的十分重要的人生问题,这周末该去那里happy好呢?是宅在家里好呢,或者宅在家里好呢,还是宅在家里好呢?这时,万年隐身的QQ竟然浮起浅色聊天框,我去!不得了,居然是女神主动联系我,女神一定是因为我俊朗的五官,185的模特身材而深深地迷恋上我了,呵呵呵呵呵......
  • 视差滚动的爱情故事之优化篇
    上篇博客链接:视差滚动的爱情故事 【优化问题:解决Chrome下跳动的bug】 在上一篇的爱(diao)情(si)故事里面,demo3在Chrome下是这样的问题:鼠标滚动视差元素动画生硬,鬼畜跳动,拖动滚动条却没有这样的问题。之前也分析过,是因为Chrome只触发一次scroll事件导致的(还有个上下跳动的原因,博客......
  • 视差滚动不适合网页的5个原因
    视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快。当我们坐在车上向车窗外看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元......
  • ParallaxScrollView有视差的ScrollView
    UsageLookatthedemolayoutforimplimentation.Thebasicsare,thatyouneedtwoviewsaddedtotheParallaxScrollViewanditwilldotherest.ThefirstViewaddedistheBackgroundThesecondViewaddedistheForeground.Layoutandmeasuringisbase......
  • ParallaxViewPager:ViewPager的视差背景效果
    这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过!所谓......