码迷,mamicode.com
首页 > 编程语言 > 详细

unity3D 实战 《小十传奇》系列之一:构建UI系统

时间:2015-11-25 22:13:13      阅读:406      评论:0      收藏:0      [点我收藏+]

标签:

今天开始学习慕课网上的unity3D教程,在学习的过程中记录下来,帮助自己和网友们梳理下unity3D做游戏的流程。

游戏玩法

小十传奇讲的是一个方块下落,若周围数字相加等于10就自动消除的游戏。

 

游戏截图

稍后补上

准备工作

去慕课网下载需要的素材和一个GDgeek工具包,下载地址: 走你

GDgeek工具包在assets目录下面,在自己的Project 中新建一个Plugins目录,讲GDGeek粘贴进去。

技术分享

unity3D的版本需要在4.6版本以上(好像是这个版本以上才有UI这个工具条的)

 

游戏架构

游戏采用传统的MVC模式,即Model View Controll模式,模型层定义方块 ,视图层显示UI和动画  控制层负责逻辑判断和动作响应

操作步骤

  • 1.新建三个空对象,分别命名为Model View Ctrl,然后在新建Panel(工具条—UI—Panel),会自动生成一个Canvas和EventSystem.把Canvas重命名为UI,把相机重命名成Camera,拖动Camera和UI形成以下结构:

         技术分享

 

  • 2.这时候如果仔细看视频里的untiy界面中的Game会发现,人家的Game窗口就是手机屏幕的分辨率,而我们的是全屏,修改办法:

          技术分享

          单击+号,自定义个分辨率,比如我这里用的是1080X1920,若想横屏,就把横竖分辨率调下位置。

 

  •     3.单击UI,然后在Canvas组件中吧Camera拖给RenderCamera,然后UI就跟随相机移动了。

          技术分享

 

  • 4.给游戏的三个界面,Start Play End .这三个都是Panel.结构层次如下:

      技术分享

 

  • 5.在Begin下面新建一个Text,改名为Title,调整字体大小和文字位置和文字框的大小

      技术分享

      鼠标放在Pos X上面,点击左键后滑动可以调节,其他类似。

      继续新建一个按钮,叫做开始游戏,调整位置。效果如图:

       技术分享

 

  • 6.这时候,将Game窗口调整下,会发现,界面就乱了,以为按钮和文本的大小是固定值,并不会自动适配,怎么办呢?

      技术分享

      这时候要用到GDGeek工具包了 。在Project面板中搜索offset

     技术分享

     建立一个空的object,命名为Offset,然后这个Offset移到Camera下面,把UI移到Offset下面,把UIOffset脚本拖到Offset上面,把主要的panel拖给Rect参数,Original分辨率填写1080X1920.

     技术分享

     同时打开enable选项,然后根据效果再调整分辨率,知道自己满意。我最终修改的结果如图:

     技术分享

 

  • 7.在End中添加Text,内容为“恭喜你获得了X分”,调整位置和大小,注意将文本Text拖到End下面,因为Unity中结构树下面的处在上层,所以把End拖到Panel的最下面来。

      技术分享

 

到此游戏的第一阶段基本结束。

这节,MVC结构可以很方便的帮我们分离显示和逻辑,有一天游戏玩法要改只需要该逻辑部分就行,或者有一天2D游戏不火了,需要3D游戏,那么只要修改显示层就可以快速适应市场变化,而不是重新开发一套游戏。

 

所以说好的结构可以让游戏生存下来,而差劲的结构会让游戏走向死亡。

我是orzangleli,谢谢你一直阅读到现在,如果你看到了这篇文章,请麻烦回复我下,给我点动力更新下去,多谢!

unity3D 实战 《小十传奇》系列之一:构建UI系统

标签:

原文地址:http://www.cnblogs.com/orzangleli/p/4995668.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!