) 你可以获取到更加详细的Examples Start Usage 如果你从来没有使用过Ngui你可以从这里开始,一步步创建你的Ngui程序。...Install ngui-tools 首先你需要安装Ngui提供的工具包 使用 nodejs npm 安装 ngui-tools 打开Terminal并执行以下命令: # shell $ sudo...npm install -g ngui-tools 运行ngui-tools 需要依赖nodejs与python2.7 并且不能运行在windows系统, 暂时只能在mac或linux下使用...Create new project 使用下面的shell命令创建一个新的Ngui工程: # shell $ mkdir myproject $ cd myproject $ ngui init Build...ios # export android studio project $ ngui export android 导出工程后,接下来你可以使用Xcode与Android Studio打开它 Ngui
开源跨平台移动项目Ngui【简介】 开源跨平台移动项目Ngui【入门】 开源跨平台移动项目Ngui【视图与布局系统】 开源跨平台移动项目Ngui【Action动作系统】 开源跨平台移动项目...开始使用Ngui 如果你从来没有使用过ngui你可以从这里开始,一步步创建你的第一个ngui程序。...你现在所看到的目录结构就是ngui的标准项目结构,不管ngui以后支持多少种操作系统与平台,这个项目结构不会变。...构建Ngui项目 构建项目是专业术语,其实就是把你的应用程序进行编译打包,在这里会把你刚刚创建的ngui项目根目录下的js与jsx文件以及资源文件进行压缩打包。...Ngui调式服务器 Ngui Tools提供了一个远程测试http服务器,你不需要每次修改完js或jsx代码都进行重新安装。
NGUI下增加一个Empty对象,重命名为Joystick。在它本身上加载UIAnchor脚本,设置好它的大小。Joystick的子集中增加俩个新的Empty,命名为Background,Thumb。
本文链接:https://blog.csdn.net/CJB_King/article/details/72792816 使用BmFont制作NGUI的图片字体 原材料:install_BmFont...右键number选择“NGUI->Open Bitmap Font Maker”打开图片字体编辑框,将字体和 图集拖拽到相应的位置,点击“Create the Font ”就完成了 ?
简介 马三最近换到了一家新的公司撸码,新的公司 UI 部分采用的是 NGUI 插件,而之前的公司用的一直是 Unity 自带的 UGUI,因此马三利用业余时间学习了一下 NGUI 插件的使用,并把知识点记录成博客与大家分享...在我们使用 NGUI 插件创建的 UI 中,可以发现 UIRoot 物体和 Camera 物体上面都带有 NGUI 特有的脚本组件,其中 UIRoot 物体上面带有 UIRoot 和 UIPanel 两个组件...在 FixedSize 模式中,NGUI 将不再保护图片的原始尺寸,只会关心 NGUI 自己所需的缩放参数,这种模式下必须设置 UIRoot 的 ManualHeight 值,然后 NGUI 会将所有的控件按照和这个值的比例进行缩放...不过 NGUI 在碰到 Panel 有共用的 Depth 时,会做出提醒。...在 NGUI 中,每一个 Panel 上也有一个 RenderQ 的设置项,RenderQ 越高的将会越在上层显示。
CJB_King/article/details/88786825 用NGUI
问题 NGUI内建的Anchor系统可以方便的定位UI(底层的一个支持结构是AnchorPoint),例如一些需要全屏显示的游戏界面一般都需要借助这项功能;另外的,对于稍复杂的UI设计,我们可能会将UI...两个系统单独来看好像都没有什么问题,但是结合起来使用却容易出现岔子~ 原因 原因在于NGUI的Anchor系统并不能很好的支持Camera CullingMask的切换,我们简单来看一段NGUI实现Anchor...某些被隐藏层级的UI可能会因为查找不到Camera而导致Anchor出错,而此时缓存标记又已设置,后面的逻辑便再不会主动重置Anchor数据,导致定位出错~ 方法 解决方法可能有以下一些: 一是避免使用NGUI...二是改造NGUI Anchor系统,以使其支持Camera的CullingMask变动,譬如实现某种CullingMask的变动通知机制,然后主动重置更新相应的Anchor~ 而对于一些全屏性质的UI...一个简单的参考实现大概是这个样子: // desc UIScreenRect is for handling problem NGUI anchor system does not fit Camera
NGUI中的Panel具有裁剪的功能,操作上便是设置一个Panel类型即可~ image.png 原理上,该裁剪功能是基于Shader来实现的,简单列一下相关的着色器代码: v2f vert...Mathf.Sin(angle), Mathf.Cos(angle))); } } 暂时不管其中的ClipArgs(也就是原Shader中的_ClipArgs0),同样我们也暂时不管其中的index索引,其是NGUI...float2(1.0, 1.0) - abs(IN.worldPos)) * _ClipArgs0; 而vert后面的代码便相对普通了,基本就是根据factor来调整alpha值~ OK,至此,NGUI...用以实现clip的实现原理我们大概清晰了,不过目前该实现方式仅能支持NGUI的原生控件,对于其他的可视元素便无能为力了,如果我们在UI上挂上一个粒子(ParticleSystem),很快便能发现裁剪不起效果了
本文作者:IMWeb louistru 原文出处:IMWeb社区 未经同意,禁止转载 Ngui简介 这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架,基于NodeJS/OpenGL...Ngui的目标:在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。...开源跨平台移动项目Ngui【简介】 开源跨平台移动项目Ngui【入门】 开源跨平台移动项目Ngui【视图与布局系统】 开源跨平台移动项目Ngui【Action动作系统】 开源跨平台移动项目...Ngui【CSS样式表规则及用法】 Ngui API 文档 什么是Action动作 什么是动作呢?...import { ngui, Div } from 'ngui'; import KeyframeAction from 'ngui/action'; var div = new Div(); var
Ngui简介 这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架,基于NodeJS/OpenGL,这也是第一个在移动端Android/iOS融合NodeJS的前端GUI项目,至此JavaScript...Ngui的目标:在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。...开源跨平台移动项目Ngui【简介】 开源跨平台移动项目Ngui【入门】 开源跨平台移动项目Ngui【视图与布局系统】 开源跨平台移动项目Ngui【Action动作系统】 开源跨平台移动项目Ngui...【CSS样式表规则及用法】 Ngui API 文档 什么是Action动作 什么是动作呢?...import { ngui, Div } from 'ngui'; import KeyframeAction from 'ngui/action'; var div = new Div(); var
本文作者:IMWeb louistru 原文出处:IMWeb社区 未经同意,禁止转载 Ngui简介 这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架,基于NodeJS/OpenGL...Ngui的目标:在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。...开源跨平台移动项目Ngui【简介】 开源跨平台移动项目Ngui【入门】 开源跨平台移动项目Ngui【视图与布局系统】 开源跨平台移动项目Ngui【Action动作系统】 开源跨平台移动项目...Ngui【CSS样式表规则及用法】 Ngui API 文档 Benchmark 距离项目第一个版本发布已有一段时间,虽然有做基准测试,但这段时间忙着找工作与外包的事情,一直没有向大家报告测试结果
上篇简单聊了一下NGUI中Panel裁剪的实现原理,总结来看其实比较简单,就是通过Shader计算fragment关于Panel裁剪区域的相对位置,然后通过调整alpha值来实现裁剪效果~ 那么依样画瓢...,如果我们想要实现非NGUI元素的裁剪,也可以考虑使用Shader的方式,在此以ParticleSystem为例,看看我们如何将其挂接到UI之上,并且实现裁剪效果~ 回忆一下之前的frag着色器:...答案是否定的,原因在于粒子的顶点数据并不和Panel在同一坐标系下(而关于为何NGUI元素的顶点数据和Panel是在同一个坐标系的问题,有兴趣的朋友可以细看看UIDrawCall.cs),而不同坐标系下的数据进行相互操作...统一坐标系即可,即将粒子的顶点坐标系和Panel的顶点坐标系进行统一,而至于选择哪个坐标系则并不重要,在Unity中有不少选择,我们在此选择Viewport坐标系~ 至此,方法已经很明确了,为了实现粒子在NGUI...原生的裁剪Shader如出一辙,不清楚的朋友可以参考前篇~ 至此我们便完成了粒子在NGUI Panel下的裁剪操作,有图有真相~ image.png image.png OK,废话不多说了
Ngui的目标:在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。...开源跨平台移动项目Ngui【简介】 开源跨平台移动项目Ngui【入门】 开源跨平台移动项目Ngui【视图与布局系统】 开源跨平台移动项目Ngui【Action动作系统】 开源跨平台移动项目Ngui...【CSS样式表规则及用法】 Ngui API 文档 视图View 在上一篇中我已经为大家讲了Ngui入门,今天我就来介绍ngui的核心部分(视图与布局)。...现在ngui提供的非布局视图有两个: Sprite Label 关于这两个视图的具体API接口说明请大家查阅文档,但在这里特别要说明的是transform,也就是矩阵变换。...在ngui中Div并没有自己单独的浮动方式这个属性。
本文作者:IMWeb louistru 原文出处:IMWeb社区 未经同意,禁止转载 Ngui简介 这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架,基于NodeJS/OpenGL...Ngui的目标:在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。...开源跨平台移动项目Ngui【简介】 开源跨平台移动项目Ngui【入门】 开源跨平台移动项目Ngui【视图与布局系统】 开源跨平台移动项目Ngui【Action动作系统】 开源跨平台移动项目...Ngui【CSS样式表规则及用法】 Ngui API 文档 视图View 在上一篇中我已经为大家讲了Ngui入门,今天我就来介绍ngui的核心部分(视图与布局)。...在ngui中Div并没有自己单独的浮动方式这个属性。
Ngui简介 这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架,基于NodeJS/OpenGL,这也是第一个在移动端Android/iOS融合NodeJS的前端GUI项目,至此JavaScript...Ngui的目标:在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。...开源跨平台移动项目Ngui【简介】 开源跨平台移动项目Ngui【入门】 开源跨平台移动项目Ngui【视图与布局系统】 开源跨平台移动项目Ngui【Action动作系统】 开源跨平台移动项目...Ngui【CSS样式表规则及用法】 Ngui API 文档 Benchmark 距离项目第一个版本发布已有一段时间,虽然有做基准测试,但这段时间忙着找工作与外包的事情,一直没有向大家报告测试结果
开源跨平台移动项目Ngui【简介】 开源跨平台移动项目Ngui【入门】 开源跨平台移动项目Ngui【视图与布局系统】 开源跨平台移动项目Ngui【Action动作系统】 开源跨平台移动项目...Ngui【CSS样式表规则及用法】 Ngui API 文档 CSS样式表到底是什么 CSS样式表全称叫Cascading Style Sheets是一种用来表现HTML文件样式的语言,是Web前端开发中一定会用到的排版语言...,那么Ngui中css的灵感就来自于此。...下面是Ngui中CSS样式表的写法: import { CSS, Div, Text } from 'ngui'; CSS({ '.a': { width: '100%',...所以在Ngui中CSS样式表的组合限制在4个,多于4个时的组合时可能会出现意想不到结果。
Ngui的目标:在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。...开源跨平台移动项目Ngui【简介】 开源跨平台移动项目Ngui【入门】 开源跨平台移动项目Ngui【视图与布局系统】 开源跨平台移动项目Ngui【Action动作系统】 开源跨平台移动项目Ngui...,那么Ngui中css的灵感就来自于此。...下面是Ngui中CSS样式表的写法: import { CSS, Div, Text } from 'ngui'; CSS({ '.a': { width: '100%',...所以在Ngui中CSS样式表的组合限制在4个,多于4个时的组合时可能会出现意想不到结果。
NGUI Ngui是unity的一个插件,主要负责进行UI界面开发。一个用C#编写的一个第三方UI库。一般使用NGUI进行界面设计。 这是第三方的包,所以需要下载:可以在网络上搜索,这种资源很多的。...1.安装、导入方式: 1.1.1导入: 在项目中:右键点击导入: 选择到ngui的包直接导入进去。 ? 导入成功之后,在菜单界面会有一个NGUI菜单: 项目列表这样: ? 1.1.2删除摄像机 ?...自动生成了一个NGUI的一个摄像头,做UI界面一般放到摄像头上面,这样就能保持一直显示了。 ? 创建一个按钮: ?
领取专属 10元无门槛券
手把手带您无忧上云