游戏蛮牛学习群(纯技术交流,不闲聊):159852603
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:2332

当前位置:游戏蛮牛 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在游戏蛮牛原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 1109|回复: 24

[士郎] 吃鸡开发实战之倍镜实现

[复制链接]  [移动端链接]
排名
3
昨日变化

6878

主题

7402

帖子

2万

积分

Rank: 16

UID
1231
好友
185
蛮牛币
9877
威望
30
注册时间
2013-7-29
在线时间
3535 小时
最后登录
2018-10-18

社区QQ达人活力之星原创精华达人突出贡献奖财富之证游戏蛮牛QQ群会员蛮牛妹VIP

发表于 2018-9-25 10:56:39 | 显示全部楼层 |阅读模式

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

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

x
在吃鸡元年,你们是否也中了吃鸡的毒?在短短的半年时间内,吃鸡这个词仿佛病毒一样疯狂的入侵到每个人的日常生活中,我也不例外.
最近接到项目需求,要对项目引入吃鸡里面的某些功能元素.于是顺手把实现的过程也写成文章来分享一下.这篇文章主要分享吃鸡里面倍镜的实现效果.
在这里我用到的是Unity这个引擎来实现. 单纯的吃鸡倍镜效果实现起来是非常简单的.在这里我用两张图来给大家剖析一下他的实现原理。
1.jpg

1表示我们摄像机中的物体,2代表我们最后呈像的框,3代表我们摄像机渲染区域,可以看成是由无数个平面构成的 如图中4,这样构成一个平面,最后将这些平面按照我们的分辨率投射到呈像框里面.
第二张图是修改了我们摄像机渲染角度后的图片. 可以发现我们的渲染区域缩小了,然后我们的 物体在我们4号的平面里面所占的比例增加了.然后我们把他们两个摄像机所渲染出来的游戏视图展示出来
2.jpg
可以发现,我们的物体在缩小摄像机渲染角度之后,成像大小发生了变化.
这便是我们倍镜的实现原理了.
接下来我们将这个原理运用到我们的实验场景中看一下效果.
第一步
先创建出两个UI, 一个是我们的基础镜,一个是我们的倍镜
3.jpg
4.jpg
注意:镜子一定要放在我们屏幕的中心点,不能有误差,在这里我让镜子偏移五个像素我们看一下效果:
5.jpg

原本我们的点是对着靶子的十环处.放大之后他往下偏移了不少.因为在我们放大镜头的同时,我们的误差也在放大,所以一定要让我们的镜头对准屏幕的正中间.
第二步
通过开关镜的操作修改摄像机的照射角度
6.jpg

注意:在这里摄像机的渲染模式必须是Perspective广角渲染.
上面的原理我们已经分析出来了,就是修改摄像机的渲染角度,在这里并不是说去修改摄像机Transform里面的那个角度,而是要去修改Camera下面Field of View 这个属性的值。
如果说上面的原理分析不能理解的话呢,我们这里举一个栗子.
7.jpg
这就好比我们打开手机的拍照功能,然后放大镜头.会发现我们镜头内的照射区域变小了但是区域内的物体变大了,.在这里修改照射角度就是这个原理.
下面通过代码去修改它的值:
[AppleScript] 纯文本查看 复制代码
 public void OpenMirror(ScopeType _scope)
    {
        Float _timesScope = GetTimesScope(_scope);//获取倍镜缩放倍数
        Scope.gameObject.SetActive(true);//倍镜开启
        baseScope.gameObject.SetActive(false);//基础镜关闭
        mainCamera.fieldOfView /= _timesScope;//摄像机渲染角度修改
        mCurrScopeType = _scope;//将镜子的类型储存起来.
    }

第三步
在update里面进行检测, 当右键按下时判断当前的镜子类型,然后决定调用镜子开/关的方法即可.
[AppleScript] 纯文本查看 复制代码
void Update()
{
   if(Input.GetMouseButtonDown(1))
   {
     if(mCurrScopeType == ScopeType.BaseScope)
     {
         OpenMirror(mCurrChoseScope);
         //mCurrChoseScope存储了所选择的倍镜(尚未开启),mCurrScopeType是当前使用的倍镜
         //在这里注意区分好
     }
     else
     {
         CloseMirror();//关闭倍镜.  
     }
   }
}

最终实现的效果就是下面这样了:
1.1.gif


这也是当前吃鸡以及几款吃鸡手游倍镜的实现方式了.
就我个人观点.这种实现方式其实是不合理的,因为他是将我们整个游戏视图都给放大拉进了,并不是说在镜子区域内局部放大的.例如:彩虹六号里面的倍镜效果做的就比较舒服,他是在镜子区域内去局部放大物体的.
知乎@代码律动

[发帖际遇]: 清风 发帖时在路边捡到 2 蛮牛币,偷偷放进了口袋. 幸运榜 / 衰神榜

跟我念“站长妹纸萌萌哒!”我说站长,你说YO!爱你们么么哒~
回复

使用道具 举报

2初来乍到
144/150
排名
11936
昨日变化
199

0

主题

34

帖子

144

积分

Rank: 2Rank: 2

UID
295480
好友
1
蛮牛币
253
威望
0
注册时间
2018-9-2
在线时间
38 小时
最后登录
2018-10-20
发表于 2018-9-25 11:56:26 | 显示全部楼层
666666666666666

点评

ffffff  发表于 2018-9-26 13:41
[发帖际遇]: ok481384 发帖时在路边捡到 2 蛮牛币,偷偷放进了口袋. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

5熟悉之中
512/1000
排名
5528
昨日变化
33

1

主题

111

帖子

512

积分

Rank: 5Rank: 5

UID
204004
好友
0
蛮牛币
415
威望
0
注册时间
2017-1-22
在线时间
162 小时
最后登录
2018-10-19
发表于 2018-9-25 13:23:29 | 显示全部楼层
感谢分享!!!!!!!!!

点评

赞一下  发表于 2018-9-26 13:38

回复

使用道具 举报

排名
17491
昨日变化
11

0

主题

10

帖子

52

积分

Rank: 2Rank: 2

UID
259863
好友
0
蛮牛币
115
威望
0
注册时间
2017-12-15
在线时间
10 小时
最后登录
2018-10-17
发表于 2018-9-25 14:38:41 | 显示全部楼层
我也感觉局部放大真实点,感觉

回复 支持 反对

使用道具 举报

排名
15211
昨日变化
291

0

主题

22

帖子

92

积分

Rank: 2Rank: 2

UID
271893
好友
0
蛮牛币
14
威望
0
注册时间
2018-3-12
在线时间
26 小时
最后登录
2018-10-19
发表于 2018-9-25 15:32:14 | 显示全部楼层
感谢大佬

回复

使用道具 举报

5熟悉之中
944/1000
排名
3627
昨日变化
4

1

主题

272

帖子

944

积分

Rank: 5Rank: 5

UID
57841
好友
4
蛮牛币
67
威望
0
注册时间
2014-11-26
在线时间
285 小时
最后登录
2018-10-17
发表于 2018-9-25 20:26:31 | 显示全部楼层
看下下喜爱西安啊啊啊

回复 支持 反对

使用道具 举报

7日久生情
2725/5000
排名
2930
昨日变化
28

2

主题

1840

帖子

2725

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
241666
好友
0
蛮牛币
10445
威望
0
注册时间
2017-9-6
在线时间
409 小时
最后登录
2018-10-20
发表于 2018-9-26 06:40:15 | 显示全部楼层
感谢分享寄东西

回复

使用道具 举报

3偶尔光临
232/300
排名
8520
昨日变化
182

0

主题

26

帖子

232

积分

Rank: 3Rank: 3Rank: 3

UID
288982
好友
0
蛮牛币
351
威望
0
注册时间
2018-7-8
在线时间
76 小时
最后登录
2018-10-20
发表于 2018-9-26 08:28:30 | 显示全部楼层

感谢分享!!!!!!!!!

回复

使用道具 举报

5熟悉之中
551/1000
排名
5220
昨日变化
32

0

主题

163

帖子

551

积分

Rank: 5Rank: 5

UID
267103
好友
0
蛮牛币
1067
威望
0
注册时间
2018-1-31
在线时间
130 小时
最后登录
2018-10-19
发表于 2018-9-26 09:02:32 | 显示全部楼层
{:107:}

回复

使用道具 举报

6蛮牛粉丝
1236/1500
排名
2712
昨日变化
22

5

主题

398

帖子

1236

积分

Rank: 6Rank: 6Rank: 6

UID
54335
好友
1
蛮牛币
1913
威望
0
注册时间
2014-11-9
在线时间
329 小时
最后登录
2018-10-20
发表于 2018-9-26 09:19:41 | 显示全部楼层

回复

使用道具 举报

6蛮牛粉丝
1374/1500
排名
2170
昨日变化
17

2

主题

363

帖子

1374

积分

Rank: 6Rank: 6Rank: 6

UID
213483
好友
0
蛮牛币
2719
威望
0
注册时间
2017-3-21
在线时间
401 小时
最后登录
2018-10-20
发表于 2018-9-26 09:33:42 | 显示全部楼层
跟我念“站长妹纸萌萌哒!”我说站长,你说YO!

回复 支持 反对

使用道具 举报

4四处流浪
308/500
排名
10345
昨日变化
4

2

主题

130

帖子

308

积分

Rank: 4

UID
252298
好友
1
蛮牛币
311
威望
0
注册时间
2017-11-3
在线时间
80 小时
最后登录
2018-10-10
发表于 2018-9-26 10:02:06 | 显示全部楼层
感谢分享

回复

使用道具 举报

3偶尔光临
182/300
排名
10141
昨日变化
94

0

主题

25

帖子

182

积分

Rank: 3Rank: 3Rank: 3

UID
289014
好友
0
蛮牛币
158
威望
0
注册时间
2018-7-9
在线时间
57 小时
最后登录
2018-10-19
发表于 2018-9-26 10:03:58 | 显示全部楼层
感谢分享

回复

使用道具 举报

6蛮牛粉丝
1183/1500
排名
1683
昨日变化
3

0

主题

159

帖子

1183

积分

Rank: 6Rank: 6Rank: 6

UID
137070
好友
0
蛮牛币
2369
威望
0
注册时间
2016-2-20
在线时间
290 小时
最后登录
2018-10-19
发表于 2018-9-26 10:09:24 | 显示全部楼层
666666感谢楼主分享!

回复 支持 反对

使用道具 举报

7日久生情
1866/5000
排名
3063
昨日变化
14

0

主题

1112

帖子

1866

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
189581
好友
0
蛮牛币
2608
威望
0
注册时间
2016-12-5
在线时间
300 小时
最后登录
2018-10-19
发表于 2018-9-26 10:26:26 | 显示全部楼层
可以的给力啊

回复

使用道具 举报

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

本版积分规则

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