开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

蛮牛译馆

关注:518

当前位置:游戏蛮牛 技术专区 蛮牛译馆

查看: 459|回复: 8

[Unity教程] 用spriteRender在Unity2D中创建全景背景图

[复制链接]  [移动端链接]
3偶尔光临
177/300
排名
18365
昨日变化
14

16

主题

23

帖子

177

积分

Rank: 3Rank: 3Rank: 3

UID
129264
好友
3
蛮牛币
255
威望
0
注册时间
2015-11-18
在线时间
63 小时
最后登录
2017-4-17

蛮牛译员

发表于 2017-4-9 14:58:24 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
2D游戏的基本要求是需要有全景背景,可以是颜色,怪物,粒子系统或别的什么,来表达游戏内容中的情绪和美学。但一种静态的颜色能够被用来做更大的效果,这个帖子会介绍这个技术。我用标准的SpriteRenderer在Unity中做全景背景图片。用代码来保持原有图片的分辨率。保持图片的分辨率防止图片被拉伸或压缩。图像分辨率很重要因为屏幕尺寸的宽矩阵适用于手机和桌面用户。
当我准备写这个代码的时候,比我预想的时间花的更长因为想不清楚Unity是怎么处理大小的。我原本想用你也能想到的办法比如缩放或裁剪图片来保持图片分辨率。但我用这个逻辑的话,我不能得到能够保持分辨率的图像。我一次次盯着并调整数学时间,但图片仍然会被拉伸。我感到很沮丧,因为运用的数学是对的。但是Unity的大小与实际的图像分辨率不相关。最后我意识到,就如我下面所写的那样,Unity把这件事变得比我想象地简单。
安装
我们需要做的第一件事是找一个实际的背景图片。我会用这张图片,但你可以用你喜欢的任何图片。

接下来,我们需要一个游戏主体(GameObject),我会调用我的背景,用SpriteRenderer组件。去添加你选好的背景图片到SpriteRenderer在Sprite属性中,你的配置如下图:
唯一的问题是,依据你图片的尺寸和目标设备的分辨率,你的图片不可能完全适配,你可能会用下边的图片来结束这一切。
我们能做的就是设置背景的大小来匹配编辑器中的照相机的大小,但你不能总有在实际的设备上运行这样的运气。考虑到Unity照相机的宽度是动态的(但高度始终是保持恒定的),大小基于你运行设备的分辨率。一个更好的解决办法是写点代码来动态改变所需要的背景的大小。

我们所需要做的就是根据运行时照相机的大小对比Sprite的大小对比来设置背景的大小,并保持原有图片的分辨率。正如我们下面代码中看到的,Unity确实确实很容易保持图片的分辨率。
脚本

我们能做的就是创建一个脚本叫做FullscreenSprite,并把它附加在BackgroundGameObject像下面这样:
对于代码的实际内容,我们通过简单选用附加的SpriteRenderer做参考来决定sprite的大小,以及我们用到的照相机的大小:
[C#] 纯文本查看 复制代码
void Awake() {
    SpriteRenderer spriteRenderer = GetComponent<SpriteRenderer>();
 
    float cameraHeight = Camera.main.orthographicSize * 2;
    Vector2 cameraSize = new Vector2(Camera.main.aspect * cameraHeight, cameraHeight);
    Vector2 spriteSize = spriteRenderer.sprite.bounds.size;   
}

正如我们所看到的,我们通过抓取SpriteRenderer组件开始。接下来我们用orthograohicSize属性来决定照相机的高度,首先是Unity中的半个照相机的高度单一化(不是像素)。默认值是5.我们用我们已经计算过的高度来决定整个cameraSize,与照相机的像素相乘来决定宽度(像素=宽度/高度)。最终,spritesize从SpriteRenderer的sprite获取。

接下来我们需要做的事情是决定我们需要什么的大小来填充照相机:
[C#] 纯文本查看 复制代码
Vector2 scale = transform.localScale;
if (cameraSize.x >= cameraSize.y) { // Landscape (or equal)
    scale *= cameraSize.x / spriteSize.x;
} else { // Portrait
    scale *= cameraSize.y / spriteSize.y;
}

我们决定照相机是否处于地平线方向或用我们之前计算得到的cameraSize的纵向,并比较x(宽度)和y(高度)。基于方位,我们用照相机的宽度或高度乘以目前的大小,用相应的sprite对应的宽度或高度来相除。
比如,如果你的cameraSize是9,5,你的spriteSize是4,3.我们用cameraSize.x/spriteSize.x=9/4=2.25与scale相乘。相反,如果你的相机是5,9.我们用cameraSize.y/spriteSize.y=9/3==3与大小相乘。目的是缩放sprite来匹配照相机的大小的更大的维度。
最终的大小保持图片的分辨率,因为Unity赋值GameObject的大小为1,默认值是1,即使图片是1000*50的像素,比如,如果一张图片是1000*50,你设置的大小是2,2渲染出来的图片是2000*1000-精确的相同的分辨率。我们用这个是我们的优势因为只要我们保持x,y的大小为相同的值,我们不用任何具体的分辨率计算,用Unity来立马处理!

我们需要做的最后一件事是简单运用新的大小:
[C#] 纯文本查看 复制代码
transform.position = Vector2.zero; // Optional
transform.localScale = scale;

你可以看到我设置位置为0,0。这是完全的可选择的。我喜欢添加这个当合适的去确保即时背景偶然移动到Unity编辑器,运行的时候设置到合适的位置。

现在剩下需要做的事情是运行游戏并看到背景图片在全景中:
场景编辑器中的红色线暗示照相机的范围,正如你看到的,不管游戏是在地平线运行或肖像方位,图片被缩放并保持它的分辨率!

为了防止任何事情不清晰,下面是整个脚本:
[C#] 纯文本查看 复制代码
using UnityEngine;
 
public class FullscreenSprite : MonoBehaviour {
    
    void Awake() {
        SpriteRenderer spriteRenderer = GetComponent<SpriteRenderer>();
        
        float cameraHeight = Camera.main.orthographicSize * 2;
        Vector2 cameraSize = new Vector2(Camera.main.aspect * cameraHeight, cameraHeight);
        Vector2 spriteSize = spriteRenderer.sprite.bounds.size;
        
        Vector2 scale = transform.localScale;
        if (cameraSize.x >= cameraSize.y) { // Landscape (or equal)
            scale *= cameraSize.x / spriteSize.x;
        } else { // Portrait
            scale *= cameraSize.y / spriteSize.y;
        }
        
        transform.position = Vector2.zero; // Optional
        transform.localScale = scale;
    }
}

所有的都在这了!正如我在导言中说的,我想写这个博客因为我最初想理清逻辑,我没有考虑Unity缩放sprites的方式。我想得更多的是图片的缩放,你需要实际计算和用分辨率当决定缩放的宽度和高度。希望这篇博客对那些跟我犯一样错误的同学有帮助!
翻译:Brittany89
原文链接:https://kylewbanks.com/blog/create-fullscreen-background-image-in-unity-with-spriterenderer


本帖被以下淘专辑推荐:


回复

使用道具 举报

排名
7329
昨日变化
4

151

主题

186

帖子

1108

积分

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

UID
159865
好友
9
蛮牛币
2223
威望
0
注册时间
2016-8-1
在线时间
529 小时
最后登录
2017-4-28

蛮牛译员

发表于 2017-4-10 09:41:06 | 显示全部楼层
支持支持!

回复

使用道具 举报

2初来乍到
101/150
排名
13350
昨日变化
13

0

主题

39

帖子

101

积分

Rank: 2Rank: 2

UID
122160
好友
0
蛮牛币
246
威望
0
注册时间
2015-9-10
在线时间
28 小时
最后登录
2017-4-20
发表于 2017-4-10 10:28:42 | 显示全部楼层
感谢楼主

回复

使用道具 举报

3偶尔光临
215/300
排名
7149
昨日变化
74

2

主题

34

帖子

215

积分

Rank: 3Rank: 3Rank: 3

UID
131585
好友
0
蛮牛币
478
威望
0
注册时间
2015-12-13
在线时间
65 小时
最后登录
2017-4-28
发表于 2017-4-10 15:24:10 | 显示全部楼层
支持,厉害了,话说,我用gameobject做背景,然后什么都不做,屏幕设定16:9这样,调整好背景后,会在大屏手机上出现看到背景以外的情况吗?

回复 支持 反对

使用道具 举报

3偶尔光临
172/300
排名
8466
昨日变化
104

0

主题

47

帖子

172

积分

Rank: 3Rank: 3Rank: 3

UID
210353
好友
0
蛮牛币
704
威望
0
注册时间
2017-3-7
在线时间
39 小时
最后登录
2017-4-28
发表于 2017-4-13 08:56:06 | 显示全部楼层
666666666666666666666666666666666666666

回复 支持 反对

使用道具 举报

排名
45799
昨日变化
103

0

主题

4

帖子

6

积分

Rank: 1

UID
218566
好友
0
蛮牛币
22
威望
0
注册时间
2017-4-20
在线时间
0 小时
最后登录
2017-4-20
发表于 2017-4-20 12:36:09 | 显示全部楼层
点赞!!!
[发帖际遇]: ardus 发帖时在路边捡到 2 蛮牛币,偷偷放进了口袋. 幸运榜 / 衰神榜

回复

使用道具 举报

排名
34252
昨日变化
85

0

主题

47

帖子

51

积分

Rank: 2Rank: 2

UID
218693
好友
0
蛮牛币
65
威望
0
注册时间
2017-4-20
在线时间
3 小时
最后登录
2017-4-22
发表于 7 天前 | 显示全部楼层
2D游戏的基本要求是需要有全景背景,可以是颜色,怪物,粒子系统或别的什么,来表达游戏内容中的情绪和美学。赞一个!

回复 支持 反对

使用道具 举报

排名
34252
昨日变化
85

0

主题

47

帖子

51

积分

Rank: 2Rank: 2

UID
218693
好友
0
蛮牛币
65
威望
0
注册时间
2017-4-20
在线时间
3 小时
最后登录
2017-4-22
发表于 7 天前 | 显示全部楼层
不管游戏是在地平线运行或肖像方位,图片被缩放并保持它的分辨率
这点很惊艳啊

回复 支持 反对

使用道具 举报

5熟悉之中
576/1000
排名
5201
昨日变化
37

0

主题

281

帖子

576

积分

Rank: 5Rank: 5

UID
3796
好友
0
蛮牛币
665
威望
0
注册时间
2013-9-13
在线时间
113 小时
最后登录
2017-4-28
发表于 昨天 10:21 | 显示全部楼层
支持支持!

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

快速回复 返回顶部 返回列表