NGUI 学习笔记实战——制作商城UI界面
http://www.cnblogs.com/chongxin/p/3876575.html
Unity3D的uGUI听说最近4.6即将推出,但是目前NGUI等UI插件大行其道并且已经非常成熟,所以我们还是先看眼前吧。
一、实现思想
商城的功能是很多游戏都拥有的,按下一个界面按钮,弹出一个窗体。
然后是商城中的商品可以拖动,既可以用手,也可以用滑条等等,至于点击购买就不单单是UI层的事了。等到实现NDate的时候再进行讨论。
二、实现背景
1、NGUI->Open->Prefab tool bar ,拖一个black widget进去
2、之后布局如下,这些应该没什么难度,弄好锚点,depth设好即可
1
2
3
4
5
6
7
|
UITexture —》BG(Sprite)做高亮 -》 Daimond(UITexture)钻石栏 -》CreateDiamond(UITexture)+按钮 -》Num(UILable)数量 Gold(UITexture) Hp(UITexture) |
3、然后差不多是这个样子
三、按钮弹出商城
1、为了示范我们就做一个商城界面即可,其他的斗大同小异,我一般建议一个新的UI界面就用一个新的Panel,新建一个Panel
2、添加美工给的背景等等,布局如下,比较麻烦的Scroll View,这个我就不加赘述,大家可以看我的博客,NGUI学习笔记Tutorial 4 http://www.cnblogs.com/chongxin/p/3821118.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
ShopRoot -》Bg(Sprite) -> Control - Simple Vertical Scroll Bar -> Name(Lable) -> Return(Sprite button) -> Scroll View ->Grid(垂直列表) ->Grid(水平列表) ->Sprite0(商品图片) ->Buy ->CurrentKind ->Num ->Sprite1 ->Sprite2 ->Grid ->Grid |
界面如下:
3、搞定了商城界面,我们需要做一个点击弹出效果,这个是借助Tween Scale实现的。不得不说NGUI的插件做的真心很好,很多代码都替我们节省了。
首先:
然后在ShopRoot 挂载Tween Scale,set active 为false 即可
最后,我们如果要返回的话,需要商城自己的Return来返回,一样的思想
注意:这里有个问题,我在根节点挂载Tween Scale的时候,有时候会出现UI不见消失不见的情况,不知道什么原因,后来就没出来了,希望大神指点一下。
四、功能实现
弹出:
基本上就这些,有了UI插件,做UI还是很愉快的,可以专心于UI效果,而不是构造它,祝大家生活愉快。
相关文章
- kibana的query string syntax 笔记
- 机器学习笔记(二)---- 线性回归
- 仿百思不得其姐项目开发(粗略笔记,后期规范排版和更新)
- Coursera台大机器学习课程笔记6 -- The VC Dimension
- 深度学习Keras框架笔记之Dense类(标准的一维全连接层)
- ALSA声卡笔记3--ASoC驱动重要结构体关系图
- 《从零开始学Swift》学习笔记(Day 25)——类和结构体定义
- mysql--SQL编程(关于mysql中的日期,实例,判断生日是否为闰年) 学习笔记2.1
- RHCE 学习笔记(23) - 磁盘格式化和分区
- GitHub学习笔记
- spring cloud 学习笔记 基础工程的构建(一)
- 数学建模学习笔记(十九)K-means聚类的matlab和python实现
- where is argument in check callback passed by framework - SAP UI5学习笔记
- webpack学习笔记
- AI公开课:19.05.29 浣军-百度大数据实验室主任《AutoDL 自动化深度学习建模的算法和应用》课堂笔记以及个人感悟
- Stanford公开课《编译原理》学习笔记(2)递归下降法
- OpenLayers学习笔记3——使用jQuery UI美化界面设计
- SQLite 学习笔记(一)
- 学习笔记 | Linux系列教程之文本三剑客 - awk、grep、sed从入门到实战
- 学习笔记:混沌工程
- C#学习笔记(三)——流程控制
- kinect学习笔记(二)—— Sdk平台的搭建~、
- [神经网络学习笔记]长短期记忆模型(Long-Short Term Memory,LSTM)综述
- 《精力管理》阅读笔记
- 【微服务笔记16】微服务组件之Gateway服务网关基础环境搭建、高可用网关环境搭建
- 【单片机/普中A2】学习笔记2-LED
- Vue学习笔记——Vue UI组件库
- Latex学习笔记(十五)特殊符号的插入
- MySQL数据库从入门到实战应用(学习笔记三)
- modbus学习笔记
- 写论文的笔记
- STM32F409学习笔记之跑马灯实现