unity | Game界面Canvas模式和相关的相机基础

骑猪看日落 2023-09-26 11:06 70阅读 0赞

一、Game界面

<一>、Game界面到底显示的是什么呢？

答案：Game界面显示的是相机里看见的东西

![abdac2b64f9940f1aef7d4ecbdd7d77c.png][]

左上角会让你选，你想显示Display几啊？

Display就可以在相机里设置，这个相机是Display几，只要这两个对上号，那么就会显示你想要的相机上面的内容。

![0fe051a1436c40ee9c2b1bc15244c22b.png][]

<二>、Game界面上想显示两个相机的内容

建立两个相机，上面都改成Display1，Game界面上也选择Display1,但是，这就像一本书上面再盖一本书，只能看见一个封面，那么我们需要解决两个问题:(哪个界面在上面；他们的大小是多少)

1.相机深度，数字越大（相当于越高），你就先看见谁

![f06043ebcb414155a1a28157c3af190c.png][]![7f376cb19ccc4729b6fc9ed5468649de.png][]

这两个，我就会先看见0的这个相机显示的东西，然后才是-1的

2.如果我们两个相机显示的部分一样大，那就只能看见上面的，所以一般要把上面的设置小一点，下面的才能看见

![32a4ffc2a9bf486a8bd1d26a604d2c7d.png][]

这里是放大缩小，1就刚好是屏幕大小，0.5就是屏幕一半大小（最大就是1，设置100还是1的样子），如果这里都设置0.5，就是下面红色图片的样子

![9d3692aabf8a40258664c86145d9ba49.png][]

<三>、相机的位置设置

![801fd6ca8f2c40fc9acb2c367b27466b.png][]

x为0的意思是屏幕从最左边长出来，y为0就是屏幕从最下面长出来，1就是从最右边再往右边，或者从最上面再往上（就看不见了），如果都是0.5，就如下图

![e50b88e734274225940ab7d1718f65fa.png][]

（从中间往右长，从中间往上长）

二、Canvas的模式

Canvas的意思是画布，也可以理解成一张纸，为了方便（因为很多东西是平面的），unity有三个模式可以选择：Screen Space -OverLay、Screen Space-Camera、World Space

![c90c7dc7d60c4c59a90f891bf777907f.png][]

a.Screen Space -OverLay只显示Canvas(实际上就是把Canvas放在了相机深度的最高处)

b.Screen Space-Camera 在a的基础上，可以选择用哪个相机来显示这个画布，但是这个相机照到的其他东西也会显示了

c.World Space 直接把画布当纸用了，相机照到就有，照不到就没了，远了就小了，近了就大了

三、Screen Space-Camera上怎么选择哪个相机来显示画布

当选了这个模式以后，下面可以让你拖一个相机进来

![c0dd037782554ce5bcbc21ddea73670c.png][]

[abdac2b64f9940f1aef7d4ecbdd7d77c.png]: https://img-blog.csdnimg.cn/abdac2b64f9940f1aef7d4ecbdd7d77c.png
[0fe051a1436c40ee9c2b1bc15244c22b.png]: https://img-blog.csdnimg.cn/0fe051a1436c40ee9c2b1bc15244c22b.png
[f06043ebcb414155a1a28157c3af190c.png]: https://img-blog.csdnimg.cn/f06043ebcb414155a1a28157c3af190c.png
[7f376cb19ccc4729b6fc9ed5468649de.png]: https://img-blog.csdnimg.cn/7f376cb19ccc4729b6fc9ed5468649de.png
[32a4ffc2a9bf486a8bd1d26a604d2c7d.png]: https://img-blog.csdnimg.cn/32a4ffc2a9bf486a8bd1d26a604d2c7d.png
[9d3692aabf8a40258664c86145d9ba49.png]: https://img-blog.csdnimg.cn/9d3692aabf8a40258664c86145d9ba49.png
[801fd6ca8f2c40fc9acb2c367b27466b.png]: https://img-blog.csdnimg.cn/801fd6ca8f2c40fc9acb2c367b27466b.png
[e50b88e734274225940ab7d1718f65fa.png]: https://img-blog.csdnimg.cn/e50b88e734274225940ab7d1718f65fa.png
[c90c7dc7d60c4c59a90f891bf777907f.png]: https://img-blog.csdnimg.cn/c90c7dc7d60c4c59a90f891bf777907f.png
[c0dd037782554ce5bcbc21ddea73670c.png]: https://img-blog.csdnimg.cn/c0dd037782554ce5bcbc21ddea73670c.png