NGUI 学习笔记实战——制作商城

  Unity3D的uGUI听说最近4.6即将推出,但是目前NGUI等UI插件大行其道并且已经非常成熟,所以我们还是先看眼前吧。

一、实现思想

  商城的功能是很多游戏都拥有的,按下一个界面按钮,弹出一个窗体。

  然后是商城中的商品可以拖动,既可以用手,也可以用滑条等等,至于点击购买就不单单是UI层的事了。等到实现NDate的时候再进行讨论。

二、实现背景

  1、NGUI->Open->Prefab tool bar ,拖一个black widget进去

2、之后布局如下,这些应该没什么难度,弄好锚点,depth设好即可

    

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

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 学习笔记实战——制作商城,布布扣,bubuko.com

时间: 2024-10-12 19:09:52

NGUI 学习笔记实战——制作商城的相关文章

NGUI学习笔记-UISprite

所有的Sprite使用前,得先准备个图集,然后选择里面的图片进行填充 UISprite里面有几个属性做个笔记: Type: Smple:除了显示内容从图集里面获取外,其他都和Texture一样的绘制 Sliced:这个模式支持九宫格拉伸,让四个角落的图片不变型,点击Sprite右侧的Edit按钮可以进行Sprite数据的编辑,设置Border的值即可. Tiled:瓦片填充,会平铺进行填充 Filled:这个主要用来做技能CD.进度条等用.FillDir设置填充的模式(360度扇形,水平,垂直等

NGUI学习笔记汇总

欢迎来到unity学习.unity培训.unity企业培训教育专区,这里有很多U3D资源.U3D培训视频.U3D教程.U3D常见问题.U3D项目源码,[狗刨学习网]unity极致学院,致力于打造业内unity3d培训.学习第一品牌. NGUI学习笔记 一.NGUI的直接用法 1. Attach a Collider:表示为NGUI的某些物体添加碰撞器,如果界面是用NGUI做的,只能这样添加.(注:用Component添加无效). 2. Attach an Anchor:表示为该物体添加了UIAn

NGUI学习笔记-Label

属性说明 Overflow: ShrinkContent : 如果文本超出文本框宽度,会自动缩小文本size,使其显示完整 ClampContent : 文本大小固定,超出文本框的部分不会显示,也不会自动换行 ResizeFreely   :  文本框宽高自适应文本的宽高 Spacing: x:文本字符水平间隔 y:文本字符垂直间隔 MaxLines: 值为0时,行数不限:值大于0,为最大行数 NGUI学习笔记-Label

NGUI 学习笔记之一 ScrollView

一.createScrollView 1.First, select the panel you want to be your scroll view and right-click anywhere in the Scene View to bring up the context menu, then choose Attach -> Scroll View. 2.The last step is to add the UIDragScrollView script to at least

NGUI学习笔记(一)UILabel介绍

来个前言: 作为一个U3D程序员,自然要写一写U3D相关的内容了.想来想去还是从UI开始搞起,可能这也是最直观同时也最重要的部分之一了.U3D自带的UI系统,也许略坑,也没有太多介绍的价值,那么从今天开始就记录一下主流的UI插件-NGUI吧. NGUI版本: v3.6.8 学习笔记一 假定大家都已经将ngui导入到了项目中,这里需要注意,插件(.package)的存放路径不能有中文,否则会导致解压失败. 导入之后可以看到几个文件夹咯,Editor,Examples,Resources,Scrip

【JAVAWEB学习笔记】网上商城实战:环境搭建和完成用户模块

网上商城实战 今日任务 完成用户模块的功能 1.1      网上商城的实战: 1.1.1    演示网上商城的功能: 1.1.2    制作目的: 灵活运用所学知识完成商城实战. 1.1.3    数据库分析和设计: 1.1.4    代码实现: 1.1.4.1  通用的Servlet的编写: 传统的方式: 传统的方式: * 一个请求对应一个Servlet. * 能不能一个模块对应一个Servlet. 一个模块对应一个Servlet: <a href=”/UserServlet?method=

【JAVAWEB学习笔记】网上商城实战2:异步加载分类、Redis缓存分类和显示商品

网上商城实战2 今日任务 完成分类模块的功能 完成商品模块的功能 1.1      分类模块的功能: 1.1.1    查询分类的功能: 1.1.2    查询分类的代码实现: 1.1.2.1  创建表: CREATE TABLE `category` ( `cid` varchar(32) NOT NULL, `cname` varchar(20) DEFAULT NULL, PRIMARY KEY (`cid`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 1

【JAVAWEB学习笔记】网上商城实战5:后台的功能模块

今日任务 完成后台的功能模块 1.1      网上商城的后台功能的实现: 1.1.1    后台的功能的需求: 1.1.1.1  分类管理: [查询所有分类] * 在左侧菜单页面中点击分类管理: * 提交到Servlet: * 查询所有的分类: * 显示到页面中: [添加分类] * 在分类列表页面中点击[添加]按钮. * 提交到Servlet跳转到添加页面. * 输入信息点击[确定]按钮. * 提交到Servlet完成保存分类的功能. [修改分类] * 在分类列表页面中点击[编辑]链接: *

【JAVAWEB学习笔记】网上商城实战4:订单模块

今日任务 完成订单模块的功能 1.1      订单 模块的功能 1.1.1    我的订单: [我的订单的查询] * 在header.jsp中点击我的订单. * 提交到Servlet: * 获得用户的信息: * 调用业务层:分页查询. * 查询该用户的所有的订单: * 查询每个订单的时候,需要将其订单项一起查询出来. * 页面跳转 1.1.2    查询某个订单详情: [查询某个订单] 在订单列表页面中点击付款的链接 提交到Servlet: * 接收数据: * 调用业务层: * 页面跳转: 1