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效果,而不是构造它,祝大家生活愉快。
NGUI 学习笔记实战——制作商城UI界面的更多相关文章
- NGUI 学习笔记实战之二——商城数据绑定(Ndata)
上次笔记实现了游戏商城的UI界面,没有实现动态数据绑定,所以是远远不够的.今天采用NData来做一个商城. 如果你之前没看过,可以参考上一篇博客 NGUI 学习笔记实战——制作商城UI界面 ht ...
- NGUI学习笔记汇总
NGUI学习笔记汇总,适用于NGUI2.x,NGUI3.x 一.NGUI的直接用法 1. Attach a Collider:表示为NGUI的某些物体添加碰撞器,如果界面是用NGUI做的,只能这样添加 ...
- amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse
amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...
- Android:日常学习笔记(8)———开发微信聊天界面
Android:日常学习笔记(8)———开发微信聊天界面 只做Nine-Patch图片 Nine-Patch是一种被特殊处理过的PNG图片,能够指定哪些区域可以被拉升,哪些区域不可以.
- amazeui学习笔记--js插件(UI增强)--警告框Alert
amazeui学习笔记--js插件(UI增强)--警告框Alert 一.总结 1.警告框基本样式:用am-alert声明div容器, <div class="am-alert" ...
- amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown
amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown 一.总结 1.am-dropdown(及其孩子):控制下拉列表的样式 2.data-am-dropdown(及其孩子):控 ...
- amazeui学习笔记--js插件(UI增强2)--按钮交互Button
amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class=&q ...
- NGUI学习笔记(一)UILabel介绍
来个前言: 作为一个U3D程序员,自然要写一写U3D相关的内容了.想来想去还是从UI开始搞起,可能这也是最直观同时也最重要的部分之一了.U3D自带的UI系统,也许略坑,也没有太多介绍的价值,那么从今天 ...
- NuGet学习笔记(2) 使用图形化界面打包自己的类库
上文NuGet学习笔记(1) 初识NuGet及快速安装使用说到NuGet相对于我们最重要的功能是能够搭建自己的NuGet服务器,实现公司内部类库的轻松共享更新.在安装好NuGet扩展后,我们已经能够通 ...
随机推荐
- Java学习笔记(十八)——Java DTO
[前面的话] 在和技术人员的交流中,各种专业术语会出现,每次都是默默的记录下出现的术语,然后再去网上查看是什么意思.最近做项目,需要使用到DTO,然后学习一下吧. 这篇文章是关于Java DTO的,选 ...
- sql server T-SQL 基础
SQL语言按照用途可以分为如下3类: ①DDL(Data Definition Language) 数据定义语言: 定义修改和删除数据库.表.索引和视图等 ②DML(Data Manipulatio ...
- 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]
相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...
- ios-遍历和排序
// // main.m // OC-遍历和排序-homework // // Created by dllo on 16/2/25. // Copyright © 2016年 dllo. All r ...
- 在Oracle里,表的别名不能用as,列的别名可以用as
列的别名也可以不用as,如:select t.a xxx from table t 在Oracle数据库中,数据表别名是不能加as的,例如: select a.appname from appinfo ...
- JS~json日期格式化
起因 对于从C#返回的日期字段,当进行JSON序列化后,在前台JS里显示的并不是真正的日期,这让我们感觉很不爽,我们不可能为了这东西,把所有日期字段都变成string吧,所以,找了一个JS的扩展方法, ...
- CSS设置技巧
一.单位和值 1.1 颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令 ...
- The constructor ClassPathXmlApplicationContext(String) refers to the missing type BeansException
Spring4.X配置一个简单的读取sping的xml的配置文件结果
- javaIO(三)
- Android 系统属性SystemProperty分析
http://www.cnblogs.com/bastard/archive/2012/10/11/2720314.html Android System Property 一 System Pro ...