关于ui:在TMP中计算书名号高度的问题

<article class=“article fmt article-content”><p>1)在TMP中计算书名号《》高度的问题<br/>2)FMOD设置中对于Virtual Channel Count&Real Channel Count的参数疑难<br/>3)Unity 2021.3.18f1 ParticleSystemTrailGeometryJob粒子拖尾零碎解体<br/>4)XLua打包Lua文件粒度问题</p><hr/><p>这是第375篇UWA技术常识分享的推送,精选了UWA社区的热门话题,涵盖了UWA问答、社区帖子等技术知识点,助力大家更全面地把握和学习。</p><p>UWA社区主页:community.uwa4d.com<br/>UWA QQ群:465082844</p><h2>UI</h2><p><strong>Q:如下图所示,输出的文字中有书名号,但应用ContentSIzeFitter计算失去的高度是谬误的(貌似它计算的比理论少,导致没换行):</strong></p><p></p><p></p><p></p><p><strong>而应用默认的Text就没这个问题(雷同的字体):</strong></p><p></p><p><strong>请问如何在TMP中计算书名号《》的高度?</strong></p><blockquote><p>A:如同是对东亚语言有非凡解决,都会换行。不确定是不是这儿的起因,输出“你好”两字也是一样的成果,能够在这儿改改试试。</p><p></p><p></p><p>把这行正文掉就没问题了,但我不保障没其余问题,因为要把TMP的包导入我的项目里,源码会少算了换行第一个字符的长度,GeneratedMesh和PreferedHeight是离开算的,所以显示和高度计算不一样,GeneratedMesh是对的,这是Unity本人的Bug,前面几个版本修复了,预计还是得想方法降级TMP的版本。</p><p>参考文档:<br/>https://docs.unity3d.com/Packages/com.unity.textmeshpro@3.2/c…</p></blockquote><p><strong>感激萌呆瞎@UWA问答社区提供了答复,欢送大家转至社区交换:</strong></p><h2>Audio</h2><p><strong>Q:FMOD的设置中,我发现有两个设置选项:Virtual Channel Count和Real Channel Count。想求教一下,个别游戏我的项目内这两个值要设置多少才适合?我发现外网有人都是拉满的,但这会造成CPU累赘。只晓得Real Channel Count这个不能太高。所以想理解下通常这俩参数设置多少比拟正当。</strong></p><p><strong>下图来自外网论坛,Virtual Channel Count设置为512、Real Channel Count设置为128,而我的我的项目中这俩设置为128、32。</strong></p><p></p><blockquote><p>A:Real Channel,如果设置成32对于PC来说是正好。对于挪动平台,32应该也能跑。对于超古老的机器,能够思考设置成16。</p><p>Real Channel是同时播放的音频Channel数,如果同时播放的Channel超过这个数字,就会依据优先级把低优先级的音频停掉。理论我的项目中,极少同时播放如此之多的Channel。如果真产生了,请认真优化音频播放逻辑。</p></blockquote><p><strong>感激Zhang Ce@UWA问答社区提供了答复</strong></p><h2>Crash</h2><p><strong>Q:Unity 2021.3.18f1 ParticleSystemTrailGeometryJob粒子拖尾零碎解体。</strong></p><p><strong>信息如下:</strong><br/><strong>解体手机:Galaxy S24 Ultra</strong></p><p><strong>操作系统:Android14</strong></p><p><strong>解体堆栈:</strong></p><p><strong>Crashed: Thread: SIGSEGV 0x0000007d2f34a900</strong><br/><strong>#00 pc 0xb30240 libunity.so (ParticleSystemTrailGeometryJob::ConfigurePerParticleTrailParams(ParticleLineParameters&, ParticleSystemParticles const*, unsigned long, ParticleSystemTrailGeometryJob const&, float)) (BuildId: c89a8ec16cd55b42b7a6c100718f0e187c531fc3)</strong><br/><strong>#01 pc 0xb29b08 libunity.so (ParticleSystemTrailGeometryJob::ConfigurePerParticleTrailParams(ParticleLineParameters&, ParticleSystemParticles const*, unsigned long, ParticleSystemTrailGeometryJob const&, float)) (BuildId: c89a8ec16cd55b42b7a6c100718f0e187c531fc3)</strong><br/><strong>#02 pc 0xb136b8 libunity.so (ParticleSystemGeometryJob::RenderJobCommon(ParticleSystemGeometryJob&, void*, void*)) (BuildId: c89a8ec16cd55b42b7a6c100718f0e187c531fc3)</strong><br/><strong>#03 pc 0x5d084 libc.so (BuildId: 37f537c2ba9dcbb262a0a68f41a21da4)</strong></p><p></p><p><strong>针对以上问题,有教训的敌人欢送转至社区交换分享:</strong><br/>https://answer.uwa4d.com/question/65d87ea040a8d93b624afce9</p><hr/><h2>Lua</h2><p><strong>Q:目前我的项目中应用XLua,Lua文件个别是每个Lua文件都打一个AssetBundle包,还是所有Lua都打一个AssetBundle包里?直观感觉上每个Lua都独自打一个AssetBundle包比拟不便热更新。</strong></p><blockquote><p>A:如果Lua文件数量很多(十万级别),倡议不要打Bundle,因为Bundle Header中要存储、反序列化的Asset信息过多,内存会吃不消,所以最好换成自定义的文件形式。参考星铁的Lua。</p><p></p><p>如果数量少,间接一个Bundle就足够。这样加载也不便:从一个固定的Bundle里Load Asset。</p></blockquote><p><strong>感激James@UWA问答社区提供了答复</strong></p><p>封面图来源于网络</p><hr/><p>明天的分享就到这里。生有涯而知无涯,在漫漫的开发周期中,咱们遇到的问题只是冰山一角,UWA社区愿伴你同行,一起摸索分享。欢送更多的开发者退出UWA社区。</p><p>UWA官网:www.uwa4d.com<br/>UWA社区:community.uwa4d.com<br/>UWA学堂:edu.uwa4d.com<br/>官网技术QQ群:465082844</p></article> ...

February 27, 2024 · 1 min · jiezi

关于ui:UWA学堂汇总看这一篇就够啦

学堂自成立以来,曾经上线了近300门课程,涵盖了游戏开发中的多方面内容。随着课程数量的减少,如何能力更快地找到咱们须要的课程呢? UWA学堂:edu.uwa4d.com一、搜寻最简略间接的就是依据 关键词/作者 去搜寻对应的课程内容。 二、依据分类检索点击下拉箭头,可开展分类: 本期咱们依据分类,别离举荐了局部课程,更多内容欢送登录UWA学堂:edu.uwa4d.com 进行查看。心愿大家都能学有所得,学有所成! 渲染《屏幕空间反射与PBR的渲染联合》 该课程不仅介绍了屏幕空间反射的算法,为了让渲染成果更实在,并且能够模仿更多的材质外表反射,我将在根底的SSR技术之上,思考减少PBR(基于物理外表的渲染)其中的一些影响因素: 粗糙度菲涅尔反射环境光漫反射 + 环境光镜面反射渲染方程中的cos项蒙特卡洛积分后果退出以上影响因素后,不仅能够渲染润滑的外表(玻璃,水面,镜面),也能够模拟出毛糙外表反射(高空,桌面,磨砂玻璃等等),能够满足更多我的项目需要。 《基于Unity Compute Shader实现Ray Tracing》 本文次要介绍了如何利用Unity的Compute Shader实现照片级别的渲染器,并给出了渲染器的GitHub我的项目地址供大家学习。不少对Ray Tracing渲染感兴趣的敌人用了CUDA等工具开发,工作量相当大。作者间接应用大家较为相熟的Unity,升高了工程上的开发成本,着重于Ray Tracing自身的算法和性能实现。本文将介绍Ray Tracing算法的必备知识点,以原理作为前提,再介绍如何一步一步实现渲染器的各个性能,包含场景构建,BVH,光源采样,物理材质,图像输入等,并介绍了往年风行的Wavefront内核的实现。 案例展现: 《Unreal挪动渲染管线解析》 近两年随同Unreal移动游戏在市场的不俗体现,越来越多的研发团队开始关注Unreal的挪动端开发。本次报告将聚焦Unreal挪动端的渲染管线,联合源码剖析渲染相干的模块框架以及与渲染线程的交互,并心愿帮忙研发团队理解如何扩大渲染性能,以及在优化时疾速定位CPU端的渲染瓶颈。 UI《疾速入门FairyGUI》 课程次要解说了一个残缺UI界面的开发流程。从UI编辑器方面动手学习,通过拼装一个残缺的UI逐渐相熟FairyGUI编辑器的应用;再进入Unity引擎学习UI事件的根本要点,并针对UI事件的制作进行解说;最初学习UI DrawCall相干的常识,以及制作一些有特色的UI成果。 本课程属于根底课程,适宜有肯定游戏引擎应用根底的读者。 《UIToolkit下一代UI零碎》 UIToolkit是Unity打造的全新UI零碎,它同时反对运行时与编辑时的UI界面开发,新版本引擎自带布局将全面应用UIToolkit替换,官网曾经明确示意后续禁止再提交IMGUI的代码,运行时界面将取代原有的UGUI零碎。自Unity 2020.2起UIToolkit已内置在Unity引擎中并非package包的模式,位置未然超过UGUI。 UGUI曾经好几年没有更新了,性能问题始终饱受开发者诟病,还有图文混排、循环滑动列表一类的根底组件缺失,导致每个我的项目都要独自实现一遍。在性能上UIToolkit更是超过UGUI,它能够1次DrawCall实现所有界面的绘制,UIBuilder编辑器对界面布局上也对策动美术更加敌对。 《详解UGUI DrawCall计算和Rebuild操作优化》 本文次要分为以下内容,帮忙大家深度理解UGUI的重要原理和优化办法。 解说UGUI DrawCall的工作原理,并联合大量实例解说Unity引擎如何计算DrawCall以及如何通过合批来升高DrawCall。 形容用于ScrollView的Mask和RectMask2D的具体原理以及它们是如何对DrawCall产生影响。 重点讲述咱们在优化UGUI时常常被疏忽的问题:Canvas Rebuild和动静拆散、粒子系统与UI界面联合、UI零碎的Raycast Target以及界面OverDraw的相干优化点。 资源管理《空幻引擎资产治理之道》 空幻引擎对于游戏资产治理的工作流是较为简单而繁琐的。本次报告将介绍如何扩大空幻引擎的资产管理工作流的教训,使其同时满足国内和出海发行的需要,成为一套高可靠性、可增量的疾速资产工作流;并使得安装包和更新补丁尺寸最小化至极致,同时进步运行时资产加载效率的办法。 《UWA本地资源检测应用办法与规定原理》 UWA本地资源检测是对游戏、VR等我的项目工程的资源、代码和设置等进行自动检测的插件与服务产品,是我的项目研发继续集成、继续交付流程中的重要工具,旨在为游戏研发制订资源与代码标准,帮忙研发团队疾速发现和解决我的项目中的性能问题与可能呈现的异样、谬误。研发团队可通过日常的主动查看,标准程序、美术成员的开发,从源头上对我的项目进行优化,躲避危险,节约老本。 本系列课程旨在帮忙大家更好更快地将本地资源检测使用到我的项目当中,内容次要包含:根本介绍、用法演示和规定解说等,以连载的形式更新,同时会随着产品的迭代以及大家的需要减少新的内容。 《基于Addressable资源管理零碎的大地形加载办法探索》 Addressable资源管理零碎是Unity引擎为开发者最新打造的资源管理解决方案。在本次报告中,咱们将介绍该资源管理零碎的基本功能,并重点解说如何通过它来打造一个大地形的加载和卸载治理计划,并以此来总结其与传统罕用资源管理办法的区别与劣势。通过本次报告,研发团队能够对该零碎有一个全面、清晰地理解和把握,在研发工作中能够更好地对其进行应用。 逻辑代码《【ET 8.0版本】ET框架 - C#全栈式网络游戏开发框架》 (课程仍在连载更新中,未完结)因为ET框架8.0版本进行了一系列重大的降级,架构失去了全新的迭代。大多数初学者与客户端开发人员会在首次接触ET框架时,会因为不足网络编程通识和其本身固有的面向对象开发习惯,从而被劝退或者编写出极其”不标准“的ET框架业务代码。并且因为ET框架8.0版本引入的多线程纤程的机制,进一步加深了ET框架的了解和应用的门槛。 所以本门课程,会重点围绕ET框架8.0的全新个性,对其原理与设计思路开展解说,并通过小案例的模式,帮忙读者梳理ET框架的设计思路与开发思维,从而进一步学会和把握ET框架的根本应用,并率领读者把握和相熟应用ET框架8.0版本进行游戏前后端全栈式开发的根本流程。 《DOTS-ECS系列课程》 课程共分为四个章节,笔者心愿能以一种欢快的形式带着大家去学习DOTS,领有更好地应用DOTS-ECS的能力,理解DOTS中的各种“坑”以及各种解决问题的技巧。 第一章根底内容篇,以深浅适度的独到办法使大家疾速学会学习DOTS所必须的基础知识。 第二章零碎设计篇,以一个我的项目中最必须的要害零碎(战斗环境重置零碎)为实战用例,率领大家初步尝试DOTS的应用形式。 第三章资源零碎篇,再次以一个我的项目中必须筹备的大型计划(GameObject与ECS混用计划)为实战用例,手把手率领大家从会用DOTS到把握DOTS。 第四章是不定期更新的反对章节,次要会更新一些难以归类,我的项目中又必须波及的琐碎常识。目前更新了BlobAsset相干内容(提供ECS端应用配置的办法)。 《从零开始的Unity魔法学堂》 此系列课程从最根本的概念介绍开始,涵盖C#、Unity的核心内容,从零开始带你逐渐上手Unity,助力你制作出本人的游戏,上道根本的Unity开发。 课程并不像传统教程那样应用操作录屏+PPT展现的模式讲述,而是通过精心编写的文案、粗劣的演示动画和示例、乏味的魔法比喻来将知识点压缩在短短的几分钟内,让你疾速高效又不打折扣地获取常识,快来开启属于你的魔法之旅吧。 课程体系:1、基本概念:包含软件装置、根本界面、外围流程等2、C#:包含根本语法、面向对象等Unity开发所需的语言外围3、Unity:蕴含根本架构、外围零碎、数据处理等Unity罕用内容 ...

February 22, 2024 · 1 min · jiezi

关于ui:四大技巧教你如何加速手动UI测试

用户界面测试(UI测试)是软件开发过程中的一个重要组成部分。单元测试和集成测试能够确保代码失常运行,UI测试则帮忙您确保用户在应用过程中获得最佳体验。这些测试有一个独特的挑战——创立和保护可能十分耗时,尤其是手动测试。 一起来看一下减速手动UI测试的四种办法,以及为什么您须要思考测试自动化。 办法一:放大关注范畴大多数企业的测试资源无限,手动UI测试自身曾经是一项繁琐的工作,因而,放大关注范畴并进步测试的优先级是十分重要的。 基于危险的测试是一种罕用的办法,它侧重于测试绝对危险最高的缺点。 一个高频率、高影响缺点的典型例子是明码重置流程呈现问题。当用户尝试重置明码时(这是很常见的行为),一旦他们被锁定无奈登录应用程序,影响将是灾难性的。因而,测试明码重置性能应该被优先思考,因为绝对危险较高。 要施行基于危险的测试,能够将每个测试用例绘制在一个图表上,其中X轴示意性能的影响,Y轴示意产生的频率。手动UI测试应该从呈现在右上象限的测试用例开始,并逐步向左下象限挪动。这样才阐明您是在通过测试升高危险,而不是在随便地调配它们。 办法二:始终应用清单阿波罗11号宇航员迈克尔·柯林斯(Michael Collins)将清单称为宇宙飞船的“第四名机组成员”,事实上,它是真正的指挥官。从宇航员到外科医生,清单都能加重认知负荷,确保每次都正确地执行所有,如同发条个别。 手动UI测试也不例外。 大多数UI测试用例都包含了根本的信息,比方要测试的UI事件、一些测试条件和预期的后果,然而最好的测试用例会蕴含具体的清单。 例如,您可能心愿有一个逐渐的过程查看清单,帮忙确保正确执行UI测试,以及列出用于测试特定动态数据的数据源列表。这些清单确保手动测试人员不会漏掉任何关键步骤,从而使防止测试后果的不精确。 除了这些清单,您还能够应用工作流清单,确保bug被正确地记录在bug跟踪器中,并调配给开发人员进行后续跟进。 例如,您能够在清单中增加生成屏幕截图,包含状态代码,或者提供其余有用的信息,帮忙开发人员疾速诊断问题,不用浪费时间重现问题。 办法三:应用根底脚本实现自动化比起编写脚本,许多手动UI测试人员更相熟质量保证流程。他们可能不相熟浏览器自动化工具,如Selenium或挪动测试自动化工具。这些工具可能并不适用于所有场景(例如探索性测试或UX测试),但在某些状况下,根底脚本可能是价值连城。 TestComplete使得构建自动化测试变得简略,它甚至不须要您编写任何代码。无论技能程度或编码教训如何,应用录制和回放或应用要害驱动测试,就能够疾速轻松地运行功能测试。只需录制一次测试,就能够在各种桌面、Web和挪动技术堆栈上运行这些测试,确保一切正常运行。 与许多其余反对录制和回放性能的测试自动化框架不同,通过TestComplete的要害驱动框架,非编程人员能够应用非技术关键字轻松定制录制步骤。您能够定制的局部包含拆散测试对象、操作和测试数据等,您也能够在其余测试中重复使用这些元素。 办法四:自动化功能测试UI测试自动化通常被认为是一项低廉且耗时的工作。相干人员可能不想期待手动UI测试过程,测试工程师难以保护每次设计迭代中都须要批改的软弱测试,开发人员可能会因误报而感到丧气。因而,只有执行切当,每个人都能够领会到UI测试的价值。 TestComplete以三种不同的形式解决了这些挑战,让你在麻利开发工作流中充分利用UI测试的劣势: 记录和回放性能,意味着创立UI测试所需的工夫仅为应用简单脚本创立测试的一小部分;AI驱动的对象辨认,意味着UI测试能够跟上一直倒退的用户界面,而无需破费数小时重写代码使其通过;继续集成反对,意味着UI测试能够轻松地与Jenkins或其余CI平台,以及Jira和其余报告平台集成。在探索性测试或用户体验测试等畛域,手动UI测试始终有其存在的地位。但功能性UI测试应该自动化,这将大大减少工夫和老本。这些测试遵循着更容易预测的模式,能够应用TestComplete或其余UI测试工具轻松地将其转换为自动测试。 最重要的是UI测试以老本低廉且耗时而闻名,但有几种办法能够升高这些老本并让你真正地从中获益。通过放大关注范畴、应用清单以及引入自动化,您能够利用到UI测试的劣势,而不会减慢麻利开发过程或减少老本。 TestComplete是业界首款具备混合对象和视觉辨认引擎的自动化测试工具,可应用原生BDD格调的Gherkin语法测试每个桌面、Web和挪动应用程序,脚本或无脚本可灵便抉择。您能够轻松进步UI测试的覆盖率,并确保交付高质量、通过牢靠测试的软件。 文章起源:https://smartbear.com/blog/try-these-hacks-to-speed-up-your-m...

June 19, 2023 · 1 min · jiezi

关于ui:Unity中级客户端开发工程师的进阶之路

上期UWA技能成长零碎之《Unity高级客户端开发工程师的进阶之路》失去了很多Unity开发者的必定。通过零碎的学习,能够把握游戏性能瓶颈定位的办法和常见的CPU、GPU、内存相干的性能优化办法。 UWA技能成长零碎是UWA依据学员的职业倒退指标,提供技能学习的举荐门路,再将所需学习内容按难易等多维度,设计分成多个学习阶段,能够循序渐进地进行学习。 本期咱们梳理了Unity中级客户端开发工程师的进阶之路,带大家一起理解,此指标须要把握哪些技能?学习门路按难易度进行了辨别,帮忙大家一步步进阶,晋升自我。 注:数字1~3 示意难度顺次递增 难度1:UGUI、NGUI、物理、C#编程、Lua 难度1. UGUI-根底 《UGUI开发根底与实际》 该课程通过对Unity引擎UGUI的根底介绍联合具体的实例制作,零碎、具体地解说了UGUI开发的各项实用知识点,次要包含:UI界面布局、自定义Shader成果、UI组件扩大、UI事件零碎搭建,以及罕用的性能优化办法等。 讲师会手把手率领学员把握如何搭建高效和酷炫的3D UI零碎,并在实践中了解其中波及到的基础知识、运行机制,以及进阶技巧。 《UGUI深度钻研之源码鉴赏》 从UI的代码底层讲起,通过了解底层代码的原理来认知下层的无效优化办法。这里会从源码中深入分析UI网格重建的实现原理,并实现了提取触发UI重建的UI元素的代码实现,能够更不便更精确地定位引起UI性能问题的UI元素,从而有针对性地做优化。 在剖析Image、Text、Layout等局部源码的同时,也提出应用的注意事项。使开发者在UGUI制作及性能优化方面,更好地达到“知其然,知其所以然”的成果。 “UI开销如何优化?”、“如何定位引起重建的UI元素?”、“UGUI Text如何进行优化?”、“如何正当应用Layout?”、“在设置UI点击事件时有哪些注意事项?”等等这些常见的UI开发问题,都能够在这个课程中失去解答。 不论是行业新人,还是Unity从业者,都无妨来一起领略一番UGUI源码,置信都会有所播种。 难度2. UGUI-框架 《UI框架搭建:控件定制篇》 从入行到主程再到打杂,我遇到了许多游戏开发者,他们中很多人都已经做过或正在做UI的开发工作。当问他们感觉怎么样时,广泛的反馈都是:这项工作很简略。赶快学好这根本的能力,去做其余工作。尽管我也是从这个阶段过去的,但过后如同没这么忙。这里不深刻探讨对错,毕竟我曾经是站着谈话不腰疼,但从理论的现状来看,UI这项简略的工作招人通过率很低。 来面试的少年,左MVC、右框架设计,两年工作教训在腰间,人人都会代理绑定。大略感觉这么全面的能力,没啥情理不过吧?其实坦白讲,我做面试官时不太关怀是什么,而是关怀为什么。我的项目千千万,做成什么样都不稀奇,外围是为什么要这样做?有没有更好的做法?因而,我通常会问:你感觉NGUI/UGUI的毛病是什么?个别也会顺便问一下:看没看过UI框架源码?如果每天都用的框架底层也没钻研透,我感觉这框架设计的功力不听也罢。 扯远了,说回这个课程。咱们的宗旨是聊聊如何正当地思考问题。不过尬聊切实不合乎时代的快节奏,就拿UGUI开刀,讲讲我认为框架搭建的正确姿态。这门课程算是进阶课程,不会提根本的UI常识,因而倡议有肯定根底的同学购买。 《UI框架搭建:音讯重构篇》 在理解了消息传递原理和UGUI根底框架的扩大办法后,这节课我和大家一起搭建个实用的UI音讯框架。UI框架其实涵盖了很多内容,咱们这里只探讨音讯框架。很多读者必定会说,绑定音讯不就是AddListener嘛。说的对,但我这里说的不只是这点。实质上说,AddListener是更底层和原始的音讯应用形式。毕竟大家都是在做商业我的项目,打仗就要业余,不然会出事的。 和《UI框架搭建:控件定制篇》雷同,除了搭建可能独立运行的Demo,在课程中也谈判及面对问题时以何种角度思考。本次内容是在《UI框架搭建:控件定制篇》的根底上深刻开发,尽管没有铺垫也能够看懂,但还是倡议先看控件定制篇。这门课仍然是进阶课程,不会提及根本的UI常识,倡议有根底的同学购买。 《UI框架搭建:利用技巧篇》 在理论应用中,咱们不可避免地会扩大现有的框架,并增加一些与业务耦合性较强的脚本,这种状况下如何保障涣散的耦合关系呢?在应用框架的过程中,咱们还有哪些须要留神的中央呢?这节课咱们就探讨一下这些问题。 和后面的课程雷同,本节课会介绍编码技巧以及计划取舍的逻辑。本次内容是在后面的根底上深刻开发,尽管没有铺垫也能够看懂,但还是倡议先看《控件定制篇》和《音讯重构篇》。这门课程仍然是进阶课程,不会提及根本的UI常识,倡议有根底的同学购买。 难度2. UGUI-UIToolkit 《UIToolkit下一代UI零碎》 UIToolkit是Unity打造的全新UI零碎,它同时反对运行时与编辑时的UI界面开发,新版本引擎自带布局将全面应用UIToolkit替换,官网曾经明确示意后续禁止在提交IMGUI的代码,运行时界面将取代原有的UGUI零碎。自Unity 2020.2起UIToolkit已内置在Unity引擎中并非package包的模式,位置未然超过UGUI。 UGUI曾经好几年没有在更新了,性能问题始终饱受开发者诟病,还有图文混排、循环滑动列表一类的根底组件缺失,导致每个我的项目都要独自实现一遍。在性能上UIToolkit更是超过UGUI,它能够1次DrawCall实现所有界面的绘制,UIBuilder编辑器对界面布局上也对策动美术更加敌对。 难度2. 物理-模仿 《基于网格的GPU流体模仿》 文章次要介绍了基于网格的流体模仿的基本原理及其实现形式,分为4个局部。首先,简略介绍了流体模仿的概念,再是介绍相干的数学根底,而后在实践上从流体方程Navier Stokes动手,对其合成解析,逐渐剖析公式的每一部分的数学概念和解算过程,最初在Unity上通过Demo实现流体模仿的每一部分的计算并进行解说。 本课程属于进阶课程,解算过程绝对艰涩,适宜有肯定的图形学根底、数学根底或者Shader编程教训的读者。 难度1. C#编程-根底 《C#常识体系构建》 市面上有很多书籍和专栏是介绍 C# 根底或者进阶个性的,无一例外,都是从头到尾列举一遍 C# 个性,而后针对一个个个性去进行解说和介绍,这种浏览体验绝对会比拟干燥。浏览一些大部头的书籍又要占去了大量的业余时间,而有些读者仅仅是想晓得其中的某一个语法个性或者仅仅是想达到一个可能开发我的项目的水平,在读者过后所处的阶段兴许并不需要齐全地理解 C# 的每一个语法细节和原理。基于以上的种种原因,本课程诞生了。 通读本课程,读者不仅可能过一遍罕用的 C# 语法个性,还能够目击一个常识体系构建的过程,最终还能够失去一个根本的 C# 常识体系。有了一个根本的常识体系之后,将来 C# 公布新的个性时,咱们能缩小一些恐慌的情绪,晓得这个新的个性兴许只是一个小的改良,兴许是一个变革的个性,能够非常容易地把这个个性归纳到咱们现有常识体系中,这就是常识体系的一个小作用。在笔者介绍 C# 的语法个性的过程中,笔者会破费更多的篇幅去介绍不怎么罕用然而很重要的 C# 个性,一些大家比拟理解且罕用的,尤其是在网上轻易一搜就能找到的语法个性笔者则会简略带过。 如果想要有一个根底的 C# 常识体系或者好奇一个常识体系是怎么产生的,又不想破费太多工夫去看大部头的同学,十分举荐购买本课程。然而并不是说,学习完本课程后就能够不必看大部头了,大部头还是要看的,不过能够留到工夫十分富余的时候再去看,而且学习完本专栏之后再去看大部头会节俭更多的工夫。 难度2. C#编程-框架 《ET框架 - C#全栈式网络游戏开发框架》 ...

May 18, 2023 · 1 min · jiezi

关于ui:快速入门FairyGUI课程介绍

本期举荐课程次要解说了一个残缺UI界面的开发流程。从UI编辑器方面动手学习,通过拼装一个残缺的UI逐渐相熟FairyGUI编辑器的应用;再进入Unity引擎学习UI事件的根本要点,并针对UI事件的制作进行解说;最初学习UI DrawCall相干的常识,以及制作一些有特色的UI成果。 本课程属于根底课程,适宜有肯定游戏引擎应用根底的读者。小伙伴们能够到UWA学堂查看全文! https://www.youku.com/video/X...

February 27, 2023 · 1 min · jiezi

关于ui:使用SelectorUI搭建SelectorUIAPP

筹备工作装置 Selector-UI在 Ponmenty OS 中,咱们通过 nty install selector-ui-3 指令装置Selector-UI。在装置过程中,可能会提醒 [nty]PonmentyOS所依赖的装置器证书未失常装置。installer.okkept.app.app证书的授予人未授予本计算机的相应证书。以上谬误的产生起因是Selector-UI的证书反对的最新版本是PonmentyOS Client 2020(性能差),而目前咱们通常应用Server 2021以上。咱们须要批改这个证书以装置。 批改证书第一步:取得本地相应证书 nty KeyManager -where installer.okkept.app.app -l[nty]该证书存储于/nty/key/3788.5321.23.1/中nty dir /nty/key/3788.5321.23.1/[nty] 0/0 .keynty editor -get /nty/key/3788.5321.23.1/.key[nty]该文件被长期保留在/nty/editor/files/S9oV1.key中第二步:批改证书 nty KeyManager -edit -version[nty]KeyManager KeyEditor .23/*注:如果小于19版本则须要应用nty KeyManager -updata*/nty KeyManager -edit file:/nty/key/3788.5321.23.1/.key -code[nty]文件内容如下:ipConfigBase64:....keyName:3788.5321.23.1uto:3788.5321.23.1:10codeMd5Base64:....第三步:批改装置器 nty KeyManager -edit remote installer.okkept.app.app code:下面的codeMd5Base64装置Selector-UI-APP在手机端利用的开发中,咱们通常应用Sun Der或者webcat开发手机端响应的selector-ui。Sun Der的长处是:前后端交互数据安全,开发速度快,领有网页沙盒(象征也能够用ios中)webcat的长处是:启动速度快,编辑不便 本文抉择Sun Der搭建APP。 nty okkept -install sun-der-selector-ui-appnty okkept -install sun-der-backend-manager装置网页沙盒 nty sunder -install webpage-iobox编辑APP创立我的项目在终端中为Selector-UI创立web服务。 nty server -http://*:8080 /nty/dev/okkept/selector-ui/web/app.webconfig而后咱们能够通过拜访http://服务器ip:8080/,而后会呈现 Welcome to Selector-UI欢送来到 Selector-UIsun-der-selector-ui-appsun-der-backend-manager-APP -S -sunder -sunder.app.app -webpage-iobox拜访 http://服务器ip:8080/APP/S/sunder/sunder-app-app/webpage-iobox ,就能够批改iobox的信息了。具体各项解释请百度安卓APP构造。 ...

February 11, 2023 · 1 min · jiezi

关于ui:深入UGUI-Mask组件原理和性能深度优化

对于一款游戏UI零碎必不可少,UGUI是当初项目组中实现UI零碎的大多数解决方案,应用宽泛。UGUI提供的组件很多,内部很多厂商也提供了很多UGUI的第三方插件,而客户端开发人员往往适度关注我的项目进度实现性能,对各个组件仅仅停留在“会应用”这个根本层面上,并没有对组件自身的实现原理、优缺点以及性能方面做深刻理解。  该课程以性能备受争执的Mask组件为例,从Mask组件的实现原理动手,深刻到CPU、GPU和GC上Mask产生的影响,而后给出解决方案,最初给出在UI上应用3D模型,如何应用Mask原理对其进行遮罩解决。  Mask组件实现原理以及存在的问题Mask组件的性能以及优化(CPU、GPU、GC)如何用Mask组件来给3D Object做遮罩 作者于洋,Unity技术专家、引擎组组长。曾就任于人人网、Kabam、竞技世界。从事游戏开发十余年,经验了从Flash到Unity的游戏开发过程,长期从事游戏渲染和性能优化相干工作,对PBR、云、雾、地形、URP管线等有深入研究,曾参加过《Legacy of Zeus》、《荒岛求生》、《mythwar puzzle》等游戏的渲染和性能优化工作,乐于分享渲染和优化的相干技术。 目录 1|概述2|Mask组件实现原理以及存在的问题3|Mask组件的性能以及优化4|如何用Mask组件来给3D Object做遮罩5|论断 本篇转载自《深刻UGUI Mask组件原理和性能深度优化》的第1节。  1|概述 遮罩不是一种可见的UI控件,而是一种批改控件子元素外观的办法。遮罩将子元素限度(即“覆盖”)为父元素的形态。因而,如果子项比父项大,则子项仅蕴含在父项以内的局部才可见。  领有Mask组件的UI控件,能够限度其子对象的显示范畴,即当子对象的显示范畴显著大于父对象的显示范畴时,游戏视图就只显示父对象范畴内的子对象,其余局部自动隐藏。  咱们在Canvas上面新建一个2D UI Image,抉择一个带有形态图案的Sprite,在该物体上Add Mask Component,这样,它就变成了一个遮罩物体。以该物体作为父对象,在其上面新建一个2D UI Image作为子物体,抉择一个Sprite,这样就实现了一个简略的Mask组件的应用,后果如下图: 留神到Mask组件里有个选项“Show Mask Graphic”,官网的形容“是否应在子对象上应用Alpha绘制遮罩(父)对象的图形?” 意思就是是否绘制出Mask组件上的Image图形,如下图: 勾掉后,就不会再绘制出该Image,具体无关的性能问题,在后续会具体探讨。  以上根本介绍了一下UGUI Mask组件以及最根底的应用办法,在应用办法上,大家作为Unity的开发人员必定是特地相熟。  然而在理论游戏开发中,咱们不仅仅要关注于我的项目的性能开发进度,如果游戏的性能不能满足要求,经常出现卡顿、闪退等问题,用户体验重大降落,就算开发出再好的游戏玩法也没方法满足玩家的体验需要。  性能优化是游戏我的项目开发中一个重要且必须的元素。而即使在硬件设施高速倒退的明天,随着用户和我的项目的需要的持续增长,对游戏特效、画质、高度简单且实在的场景的需要也在逐步榨干硬件性能,无论大公司还是小公司,无论研发团队有如许丰盛的开发教训,性能优化这件事永远是一个十分辣手而又无奈绕开的问题。  那么咱们在进行游戏开发的时候,对我的项目中所应用到的组件、库、插件、Unity built-in的性能的过程当中,要时刻警觉其性能问题:有没有给我的项目带来重大的性能降落?如果呈现了性能降落了,是因为应用了哪个性能导致的?有没有其余的计划能够作为代替?  Mask组件就是其中之一,咱们在应用的时候要一直地进行性能评估。 你是否在理论开发中有过上面几个疑难: 在应用了Mask组件之后,DrawCall为何减少特地重大?这些DrawCall的起源是哪里?应用Mask组件做遮罩的视觉效果其实并不现实,有锯齿?网上说的应用Mask组件的子对象没方法和外界做合批处理,低层的起因是为什么?如何对Mask组件进行优化以满足本人我的项目的性能要求? 接下来的章节会一一具体解答这些问题。 以上就是《深刻UGUI Mask组件原理和性能深度优化》的第1节,此篇文章比拟适宜从事游戏开发的Unity客户端开发人员、心愿晋升渲染和性能优化能力的人以及对性能优化感兴趣的同学。  读完全篇后你会深刻理解UGUI源代码和实现逻辑,并把握Mask组件对模板缓冲区的应用。  作者的另一篇文章《挪动端GPU性能深度优化剖析》也同时上线,组合购买仅需19.9元。

January 16, 2023 · 1 min · jiezi

关于ui:2022-倒带-NutUI

京东批发 于明明前言时光飞逝,流年似水,让咱们倒带 2022,回首这跌宕起伏一年走过的 “降级之路”。 NutUI 体现如何? 成绩单等着您打分! 2022 是 NutUI 在技术长廊中摸索和成长的第四个年头,悄悄度过了本人的“孩提“时光。NutUI 也从繁多 Vue 技术栈的组件库逐步成长为适配多端的多技术栈的组件库,降级设计规范「京东APP视觉」「京东科技视觉」,适配 Taro 框架反对小程序开发,拓展 React 技术栈,打造 NutUI 业务组件生态等。 2022 是不平庸的一年,新冠末年前端技术也急剧改革,低代码的风起(Retool),D2C 和 AI(codefun & ChatGPT) 的涌动,对各行各业的开发者带来了很大的冲击。然而 NutUI 初心未变,做好 UI 组件,服务于原始的代码开发者,同时亦为低代码平台提供撑持,就在这一亩三分地里精耕细作。 2022,咱们相继实现了 React 技术栈的公布、多端小程序的适配、对组件性能进行比拟并补齐、减少单测、丰盛主题定制、齐备国际化性能、推出 IDE 插件,在线代码调试等性能。目标只有一个:「打造一款好用的挪动端组件库,为开发提效,为业务赋能,为开源奉献一份力量」 React 技术栈裁减这一年,咱们实现了 React 技术栈的裁减。 NutUI 自公布以来都是以 Vue 技术栈为底座进行迭代和降级,随着团体外部及社区对 React 版本的呼声越来越高。2021 年 6 月咱们启动了 NutUI-React 布局并随即进入开发。 2022 年 1 月,公布 NutUI-React 1.0版本。基于 React 17 和 更快的构建工具 Vite,全面应用 TypeScript, 组件规模 60+。下半年咱们继续加码,修复问题 160+,降级到 React18,组件规模最终达到 70+,对齐了 Vue。NutUI-React 的设计与 Vue 版保持一致,诸如我的项目架构,小到组件的 props、events 都放弃产品的统一性。 ...

January 3, 2023 · 2 min · jiezi

关于ui:如何成为优秀的UI设计师

如何成为优良的UI设计师如何成为ui设计师,如何成为一名优良的ui设计师? 随着互联网浪潮的一直倒退,ui设计师这个职业也被越来越多的人所器重,成为了煊赫一时的职业。 在批发,交通,金融等行业都能够见到ui设计师的身影。那么,如何成为ui设计师?明天咱们就来讲讲这个问题。 要想成为一名UI设计师,这无疑是一个漫长而又辛苦的过程,UI设计师须要十分多的创意,而创意源于灵感和悟性,这些都来自平时的积攒。 刚入行的UI设计师们须要一直地磨难本人,被动造就本人寻找灵感、积攒灵感,有时候的一个灵光一现,或者就会成为大家拍案叫绝的作品。 UI设计师只有本人对本人严格要求,能力更好的进步本人;并且长于察看,长于发现,让你的大脑始终处于沉闷状态,这样可能更容易触发灵感。 成为UI设计师所要具备的根底条件1、视觉设计根底首先要造就肯定的美术功底,绘画,构图,色调等基本知识,是一个UI设计师的根底。 2、WEB界面端的设计,PS网页设计根底,网站页面设计根底,网站banner设计,网站产品图的前期解决,还有最热门的淘宝主页,店面的设计,以及淘宝SEO的理解,商务网站的设计等等。这里也是设计师最出彩的中央。 3、挪动端H5的动画设计。4、挪动端的界面设计,Adobe Illustrator CC2015的学习,ISO图标设计,掠影其中图标,扁平化图标的设计,安卓零碎UI设计指南,安卓图标的设计等。 5、交互设计,用户体验感的感知,为更好的设计出脍炙人口的产品做出致力。 6、动效设计。通过AE等软件的学习,制作出动静的设计方案,让客户更好的体验设计理念,也更好的宣传设计。 如何成为优良的UI设计师1、对本人有明确的定位和指标 理解本人善于的畛域,并正当使用本人的短处,这会给你的工作带来事倍功半的成果。有本人的指标,就有奋斗的信心,用心实现好本人的每一个作品,为本人累积教训财产。 2、基本功不能失落 UI设计师的基本功是什么?是手绘,当初各大软件、APP层出不穷,能够很好的辅助UI设计师的工作,节俭工作工夫。但,设计师们也不能因而旷废了本人的手绘能力。有时候一张纸、一支笔可能比智能化的工具来得无效。举个例子:一位UI设计师在和用户沟通需要的时候,用户想要疾速的看到大体的成果,这时候你齐全能够用笔在纸上画出框架图,依据用户的需要做更改,明确理解之后,在用电脑软件制作进去。 3、收集素材的能力 首先要学会从各大设计网站去寻找素材,学会关键词搜寻。而后要建设本人的素材库,倡议各位UI设计师们把收集到的素材整顿到一个文件夹里,并且做好分类,以便于查找调动。 4、从伪原创开始 在你没有任何思路的状况下,无妨看看大师级别的作品,去剖析他们的作品的优良之处,而后再学以致用,去模拟他们的作品,使本人疾速提高。 5、敢于尝试新的货色 设计巨匠靳埭强说:设计源于生存,创意滋润常在你我身边。很多设计师都晓得,创意最大的起源是“体验”。生存中的“体验”将帮忙你最大化本人的思维。 谈谈我的认识打造一个产品,UI、开发、产品、测试等等,都是很重要的,那咱们这里就单纯说说UI吧。 UI是一个很重要的位置,当然,一个研发团队,每个人都很重要,作为一枚优良的UI设计师,首先翻新是必要的,不要胆小,突破规定,有时候会发现更好的设计。 其次,要符合实际,有些货色,你设计是十分十分好的,用户也称心,然而前端开发工程师并不是肯定能够实现或者实现出完满的成果,那这样的设计势必意义不大。 所以,多和团队交换,才能够打造最好的设计。 另外,你要去理解用户,去关注很多人,他的偏好,再来依据偏好设计产品,切忌独断独行。 尾述"不积跬步无以至千里,不积小流无以至江海”。如何成为UI设计师,如何成为一名优良的UI设计师?这当然离不开日常生活中的积攒,灵感来源于生存,任何一件小事都有可能激发出创作的灵感。除了日常的积攒之外,也要有扎实的基本功,正所谓宝剑锋从磨砺出,梅花香自苦寒来。

October 19, 2022 · 1 min · jiezi

关于ui:达内UI全链路设计2022年最新完结无秘

download:达内-UI全链路设计-2022年最新完结无秘nt Design Vue 是一个十分成熟的框架,应用 Ant Design Vue 创立用户界面非常简单,这些组件能够适应各种图标款式、字体和彩色主题。Ant Design Vue 不断改进其60多个组件,根本笼罩我的项目大部份需要,而且使它们变得更好,更易于拜访。 Vue3 上的 Ant Design 包更小,感觉更轻,并且反对 SSR(还包含组合API),Ant Design 领有成熟的简单组件,如数据表、统计框、pop确认、模态和弹出窗口。Ant Design Vue 在 GitHub 上领有 15k+ 颗星,每周下载量为 49k,数据曾经阐明了它的受欢迎水平。BalmUI官方网站:next-material.balmjs.com/#/BalmUI 曾经公布了他们的 9.0 版本了,该版本反对Vue3。Balm 基于谷歌的 Material Design,这就是为什么它看起来很相熟。Balm 附带 Vue 插件和指令,以及从简略到简单的高度可定制的组件。 BalmUI 倒退十分迅速,如果想应用 Material Design 格调,应用简单的内置指令(如 debouncing 和 UI 波纹)在创立自定义组件时能派上用场,那么它非常适合 Vue3 我的项目。Wave UI官方网站:antoniandre.github.io/wave-ui/WaveUI 在Vue3 公布后进行了良好的定位,WaveUI 的开发是在 Vue3 仍处于alpha阶段时就开始了,其指标是在其API稳固后立刻反对它,使其成为首批 Vue3 UI框架之一。 WaveUI 领有40多个丑陋且响应迅速的组件,它们的范畴从旋转器到日历,以及介于两者之间的任何货色。WaveUI 还提供实用程序、可定制性和成熟的集成表单验证性能。WaveUI 提供的组件十分丑陋,动画成果也十分好,它的格调在整个框架中是统一的。企业级响应式 Vue3 应用程序不错的抉择。Vuestic官方网站:vuestic.dev/Vuestic 是 Vue 最丑陋的开源治理面板之一,善于编写可保护的 Vue 代码,制作灵便的组件和接口。 ...

September 2, 2022 · 1 min · jiezi

关于ui:达内UI全链路设计2022年最新完结无密

download:达内-UI全链路设计2022年最新完结无密JavaFx Tooltip悬浮提醒使用及自定义(Kotlin)使用Tooltip一般是和某个节点控件绑定使用,这里的节点控件只能是control中的包javafx.scene.control,粗疏可能点击地址跳转查看除此之外,还提供了另外一个方法,可能让tooltip在以后窗口的指定地位浮现,比较省事的就是需要自己去计算偏移量 Tooltip.install(control,tooltip) 绑定使用tooltip.show(window,x,y) 指定窗口和偏移量浮现 PS: tooltip指的是Tooltip的对象,可能间接新建 Java中使用简略地提下Java中的使用//control是某个控件Label label = new Lable("hello")Tooltip.install(label, new Tooltip("鼠标悬浮浮现的文字"));复制代码TornadoFx中使用class TestView : View("My View") { override val root = vbox { label("hello") { tooltip = tooltip("这是一段解释说明") }}}复制代码自定义本章节包含对tooltip的样式定制化以及指定窗口浮现样式自定义默认的黑底白字有些丑,有时候感觉看到不太明显,咱们可能对其样式停止调整,调整为白底黑字,代码如下:label("hello") { tooltip = tooltip("这是一段解释说明"){ style { backgroundColor += c("white") textFill = c("black") }}}复制代码成果如下图所示: 从下面的代码其实就是修改了tooltip外部的样式就可能了,举一反三,相干属性或样式修改即可对tooltip的样式停止调整label("hello") { tooltip = tooltip { prefWidth = 200.0 textAlignment = TextAlignment.LEFT isWrapText = true style { backgroundColor += c("white") textFill = c("black") } isAutoHide = false text = "这是一段长文本说明长文本说明这是一段长文本说明长文本说明"}} ...

August 23, 2022 · 1 min · jiezi

关于ui:vivo官网APP全机型UI适配方案

vivo 互联网客户端团队- Xu Jie日益新增的机型,给开发人员带来了很多的适配工作。代码能不能对立、apk能不能对立、物料如何选取、款式怎么展现等等都是困扰开发人员的问题,本计划就是介绍不同机型的共线计划,打消开发人员的疑虑。 一、日益纷纷的机型带来的挑战1.1 背景科技是提高的,人们对美的要求也是逐步晋升的,所以才有了当初市面上不拘一格的机型 (1)比方vivo X60手机采纳纤薄曲面屏设计,属于直板机型。 (2)比方vivo 折叠屏高端手机,提供更优质的视觉体验,属于折叠屏机型。 (3)比方vivo pad,领有优良的操作手感和高级的质感,属于平板机型。 1.2 咱们的挑战在此之前,咱们次要是为直板手机去服务,咱们的开发只有适配这种支流的直板机器,咱们的UI次要去设计这种直板手机的效果图,咱们的产品和经营次要为这种直板机型去抉择物料。 可是随着这种不拘一格机型的呈现,那么问题就来了: (1)开发人员的适配老本高了,是不是针对每一种机型,都要做个独自的利用进行适配呢? (2)UI设计师要做的效果图要多了,是不是要针对每种机型都要设计一套效果图呢? (3)产品和经营须要抉择的物料更受限制了,会不会这个物料在一个机器上失常。在其余机器上就不失常了呢? 为什么这么说,上面以开发者的角度来做介绍,把咱们面临的问题,做阐明。 二、 开发者的困境2.1 全机型适配老本太高日渐丰盛的机型适配让咱们这些android开发人员疲于奔命,尽管能够依照要求进行适配,然而大屏幕的机型适配老本仍然比拟高,因为这些机型不同于传统的直板手机的宽高比例(9:16)。所以有的利用罗唆就间接两边留白,内容区域展现在屏幕正地方,这种成果,当然很差。 案例1:某个视频APP页面,未做pad上的适配,关上之后的成果如下,两边大量留白,是不可操作的区域。 案例2:某新闻资讯类APP,在pad上的适配成果如下,可见的范畴内,信息流展现内容较少,图片有拉伸、含糊的问题。 2.2 全机型适配老本高在哪下面的案例其实只是外表的问题之一,作为开发人员,须要思考的因素有很多,首先要想到这些机型有什么特点: 而后才是须要解决的问题: 三、寻找全机型适配计划之旅3.1 计划探讨与确定页面拉伸、左右留白是景象,这也是用户的间接体验。那么这就是咱们要改善的中央,所以当初就有方向了,围绕着 “如何在可见区域内,展现更多的信息” 。这不是布局的简略从新排列组合,因为 计划相对不是只有开发决定如何实现就能够怎么实现的,一个apk承载着性能到用户手里波及了多方角色的染指。产品经理须要整顿需要、经营人员须要配置物料、公布apk,测试须要测试等等,所以最终的计划不是一方定下来的,而是一个协调对立后的后果。 既然要去探讨计划,那么就要有根据,在此省略探讨、评审、定稿的过程。 先来看看直板、折叠屏、pad的内部轮廓图,晓得页面状态如何。 3.2 计划落地示意图每个利用要展现的内容不统一,然而原理统一,此处就以上面几个款式为根底介绍原理。准则也比较简单,尽可能展现更多内容,不要呈现大面积的空白区域。 上面没有介绍分栏模式的适配,因为分栏的模式也可能被用户敞开,最终成为全屏模式,所以说,能够抉择只适配全屏模式,这样的适配老本较低。当然,这个也要依据本人模块的状况来确定,比方微信,更适宜左右屏的分栏模式。 3.2.1 直板机型适配计划骨骼图直板机型,目前支流的机型,宽高比根本是9:16,能够最大限度地展现比拟多的内容,比方下图中的模块1、模块2、 模块3的图片。 3.2.2 折叠屏机型适配计划骨骼图折叠屏机型,屏幕可旋转,然而宽高比根本是1:1,高度和直板机器根本差不多,能够达到2000px的像素,所以在纵向上,也能够最大限度地展现比拟多的内容,比方下图中的模块1、模块2、 模块3的图片。 3.2.3 PAD机型适配计划骨骼图pad平板,屏幕可旋转,并且旋转后的宽高比差别较大,纵向时,宽高比是5 : 8,横向时,宽高比是8 : 5。 在pad纵向时,其实高度像素是足够展现很多内容的,比方下图中的模块1、模块2、 模块3的图片; 然而在pad横向时,没方法展现更多的内容(倒是有个计划,最初再说),只能下图中的模块1、模块2的图片。 3.3 计划落地标准3.3.1 一套代码适配所有机型确定一个apk能不能适配所有机型,首先要解决的是要合乎不同机型的个性,比方直板手机只能纵向显示,折叠屏和pad反对横竖屏旋转。 形容如下: (1)需要 直板屏:强制固定竖屏;折叠屏:外屏固定竖屏、内屏(大屏)反对横竖屏切换;PAD端:反对横竖屏切换;咱们须要在以上三端通过一套代码实现下面的需要。 (2)横竖屏切换 ...

July 18, 2022 · 3 min · jiezi

关于ui:如何降低无效的物理开销

1)如何升高有效的物理开销2)EventSystem.Update如何优化比拟适合3)如何定位UWA报告中检测到的Standard Shader问题4)如何定位在UWA AssetBundle检测中看到n/a的网格问题 这是第298篇UWA技术常识分享的推送。明天咱们持续为大家精选了若干和开发、优化相干的问题,倡议浏览工夫10分钟,认真读完必有播种。 UWA 问答社区:answer.uwa4d.comUWA QQ群2:793972859(原群已满员) PhysicsQ:如果Unity没有用到物理模块局部,如何将这部分敞开?以及是否能够动静开关? A1:以下供参考:Physics.autoSimulation = false;Physics.autoSyncTransforms = false;//不必NGUI或者Raycast可敞开感激萧小俊@UWA问答社区提供了答复 A2:能够抉择动静敞开,也能够间接敞开Physics设置外面的Auto Simulation,如果用到射线检测或者NGUI,须要把上面的Auto Sync Transforms勾选。 感激小ben@UWA问答社区提供了答复 UGUIQ:请问EventSystem的优化怎么下手比拟适合?对EventSystem的性能优化有何倡议? A1:EventSystem的优化能够参考这篇文章:https://networm.me/2019/10/06...感激小ben@UWA问答社区提供了答复 A2:布局一下Canvas,只有须要检测才须要挂上GraphicRaycaster组件。而后EventSystem中的大部分性能可能是点击之后触发的事件造成的,并不能算EventSystem的,须要独自看一下触发的代码。感激萧小俊@UWA问答社区提供了答复 ShaderQ:请问在UWA报告中看到Standard Shader,该如何定位问题? A:Standard Shader呈现的起因,个别是导入的FBX模型中或者Unity本身生成的一些3D对象应用了自带的Default Material,从而依赖了Standard Shader。能够联合UWA在线AssetBundle检测工具排查是哪个AssetBundle包中哪些资源援用了Standard Shader,如下图: 在找到了是哪个FBX资源带有Default Material后,能够用Unity提供的AssetPostprocesser类的回调函数对其进行剔除,如下图,是一个简略的做法。 感激Faust@UWA问答社区提供了答复 AssetBundleQ:在UWA 在线AssetBundle检测后果中看到n/a的网格,请问如何定位问题? A:能够尝试在Asset Studio中查看相干AssetBundle的具体资源。 个别AssetBundle中的资源都是已命名的,检测到的未命名的资源通常是脚本生成的Asset中的一部分。 能够用Asset Studio查看这些未命名资源和哪些Asset相干,进而加以定位。 感激宗卉轩@UWA问答社区提供了答复 封面图来源于网络 明天的分享就到这里。当然,生有涯而知无涯。在漫漫的开发周期中,您看到的这些问题兴许都只是冰山一角,咱们早已在UWA问答网站上筹备了更多的技术话题等你一起来摸索和分享。欢送酷爱提高的你退出,兴许你的办法恰能解他人的当务之急;而他山之“石”,也能攻你之“玉”。 官网:www.uwa4d.com官网技术博客:blog.uwa4d.com官网问答社区:answer.uwa4d.comUWA学堂:edu.uwa4d.com官网技术QQ群:793972859(原群已满员)

May 25, 2022 · 1 min · jiezi

关于ui:OneOSLite-上提升-LVGL-帧率的方法

1.前言LVGL的移植是第一步,这使得OneOS-Lite上领有了图形界面的能力。下一步,则是如何晋升LVGL帧率问题。总结了一下,大略有以下几个方面。帧率FPS:FPS是图像畛域中的定义,是指画面每秒传输帧数,艰深来讲就是指动画或视频的画面数。FPS是测量用于保留、显示动静视频的信息数量。每秒钟帧数越多,所显示的动作就会越晦涩。通常,要防止动作不晦涩的最低是30。 硬件自身性能OneOS-Lite零碎影响LVGL2.硬件自身性能通常,要使得FPS更高,硬件选型是第一步,至关重要的一步。 内核,解决能力越强,对FPS会有晋升。内存,尽量抉择SRAM,对FPS晋升很大,SDRAM相比于SRAM逊色不少。传输方式SPI/LCD/DSI,应用SPI传输缓存数据至屏幕,显然不如LCD或者DSI。具备专门解决图形图像的硬件,比方stm32的DMA2D。更小的屏幕(分辨率)。3.OneOS-Lite零碎影响LVGL自身是运行在OneOS-Lite之上的,因而,OneOS-Lite的配置会对帧率产生影响。硬件的反对也须要零碎的治理。 tick frequecy设置低一些,可能会进步帧率。想一想也是哈,tick frequecy影响的是时钟中断。设置低一些,时钟中断会来得没有那么频繁。尽量应用SRAM。即便同样是SRAM,应用全局变量会比应用malloc调配,取得更高的帧率。想一想也是哈,内存治理须要耗费工夫。OneOS-Lite反对LTDC,DSI,DMA2D等不要让lvgl优先级太低,如果更高优先级的工作频繁执行,会影响图形显示性能。尽量让存储帧缓冲器的存储器仅用于帧缓冲,如果用于存储帧缓冲器的存储器还用于其余利用,那可能会影响零碎的图形性能。4. LVGLLVGL自身的配置也是影响其性能。 不要关上性能监控LV_USE_PERF_MONITOR && LV_USE_MEM_MONITOR如果反对,倡议开启LV_USE_GPU_STM32_DMA2D倡议帧缓存区不要低于屏幕的1/4,倡议双缓存5.其它应用更高的优化级别,能进步帧率。 6.关注&&分割开源轻量操作系统: https://gitee.com/cmcc-oneos/OneOS-Lite docs文档核心: https://oneos-lite.com/ 知知乎乎:蓁蓁

May 13, 2022 · 1 min · jiezi

关于ui:NGUI-Label-自定义材质球无效

1)NGUI Label 自定义材质球有效2)代码保留预制体呈现图片失落的问题3)降级Unity版本,粒子系统触发的闪退问题4)场景打包AssetBundle过大 这是第296篇UWA技术常识分享的推送。明天咱们持续为大家精选了若干和开发、优化相干的问题,倡议浏览工夫10分钟,认真读完必有播种。 UWA 问答社区:answer.uwa4d.comUWA QQ群2:793972859(原群已满员) NGUIQ:想在NGUI下做一个字体溶解Shader,自定义的Shader材质球给Label不起作用,有没有大佬理解这块内容? A:猜想题主是要在编辑器外面的材质球对象上调整_Threshold的数值,但在Game窗口发现文本没有发生变化。 实质起因是NGUI在对Label进行渲染的时候应用的并不是编辑器外面赋值的材质球,而是在NGUI进行合并DrawCall后动态创建的Material,所以咱们须要对这个材质球进行材质球属性设置。 这里能够通过脚本来给理论渲染Label的材质球调整属性达到成果。以下别离是Threshold为0和Threshold为0.4的成果。 public class TestLabel : MonoBehaviour{ public float threshold; public UILabel label; void Update() { if (label.drawCall != null) label.drawCall.dynamicMaterial.SetFloat("_Threshold", threshold); }}PS:这样解决的害处是,和这个Label在同一个DrawCall的Label都会受到影响,所以须要将这些成果的Label的Depth做非凡解决,和其它的Label不放在同一个DrawCall中。 另外在NGUI的UI DrawCall脚本中,能够关上SHOW_HIDDEN_OBJECTS,这样在编辑器外面是能够看到生成具体的DrawCall对象,也就能够看到它们的材质球属性变动。 从下图能够看到具体的DrawCall,它的材质球名字会在后面加[NGUI]的字样,和编辑器里不是同一个材质球。 感激Xuan@UWA问答社区提供了答复 ScriptQ:我在Unity 2021.3.x上想依据配置动静生成预制体。当初遇到的问题是,能够把图片动静读取下来,而后保留预制体了当前,图片就失落了,应该是须要批改.prefab里的值 。 我应用SerializedObject模块.objectReferenceValue去批改m_Sprite不会失效,它是援用类型的,而值类型的都是能够批改的。有大佬晓得怎么批改嘛? A:用上面的代码,是能够在编辑器里改的,不太确定楼主是不是想要在编辑器里操作,还是在Runtime下操作,实践上Runtime时是没有预制体的概念的。在编辑器外面,选中预制体,而后点击Update Prefab Asset按钮即可。 预制体很简略: public class Example{ [MenuItem("Examples/Update Prefab Asset")] static void AddBoxColliderToPrefab() { // Get the Prefab Asset root GameObject and its asset path. GameObject assetRoot = Selection.activeObject as GameObject; string assetPath = AssetDatabase.GetAssetPath(assetRoot); Texture2D tt = AssetDatabase.LoadAssetAtPath("Assets/2.jpg", typeof(Texture2D)) as Texture2D; Sprite ss = AssetDatabase.LoadAssetAtPath("Assets/3.jpg", typeof(Sprite)) as Sprite; // Load the contents of the Prefab Asset. GameObject contentsRoot = PrefabUtility.LoadPrefabContents(assetPath); // Modify Prefab contents. contentsRoot.transform.Find("RawImage").GetComponent<UnityEngine.UI.RawImage>().texture = tt; contentsRoot.transform.Find("Image").GetComponent<UnityEngine.UI.Image>().sprite = ss; contentsRoot.AddComponent<BoxCollider>(); // Save contents back to Prefab Asset and unload contents. PrefabUtility.SaveAsPrefabAsset(contentsRoot, assetPath); PrefabUtility.UnloadPrefabContents(contentsRoot); }}感激Xuan@UWA问答社区提供了答复 ...

May 12, 2022 · 1 min · jiezi

关于ui:AssetBundle加载的TMP字体材质赋值失败

1)AssetBundle加载的TMP字体材质赋值失败2)资源打包关系依赖树3)Shader中设置ColorMask后,最终输入色彩的计算4)Time.deltaTime和Time.unscaledDeltaTime值不统一 这是第293篇UWA技术常识分享的推送。明天咱们持续为大家精选了若干和开发、优化相干的问题,倡议浏览工夫10分钟,认真读完必有播种。 UWA 问答社区:answer.uwa4d.comUWA QQ群2:793972859(原群已满员) UGUIQ:从AssetBundle加载的TMP字体材质,为什么在代码中设置为TMP组件的材质会失败? 应用Resources.Load加载材质赋值是能够的,然而AssetBundle加载代码赋材质却行不通。这里是把材质和字体都打了AssetBundle,TMP相干其余的没有打AssetBundle,走的TMP自身的Resources.Load加载形式。 从AssetBundle中LoadAsset后用一变量存了材质,而后所有text的材质赋值都拜访了这个变量。 A:TMP字体外部默认用的Resources.Load的形式加载资源,倡议批改TMP源码,把所有Resources.Load加载资源的形式代理成本人的。 咱们的计划是:在非AssetBundle模式下用它本身的加载形式。AssetBundle模式下,就会由框架的资源加载代理。 感激1 9 7 3-311135@UWA问答社区提供了答复 AssetBundleQ:想做包体资源剖析,大家有什么好的树显示工具或者思路举荐吗?有比拟好的开源计划也能够。最简略就像N叉树一样,比方root一个文件名,而后开展整个树结构。 A1:我本人做了一个,供参考。都是用Unity本人的IMGUI最根本的接口去实现。EditorWindowsGUI.BoxGUI.BeginGroupGUI.LabelHandles.DrawBezierHandles.DrawWireDiscTreeView基本上,组织好各个AssetBundle的依赖关系其实是很好出现的。感激黄程@UWA问答社区提供了答复 A2:举荐一款比拟好用的插件,不止有依赖树,还有其余打包的资源数据可供剖析:https://assetstore.unity.com/... 感激郑骁@UWA问答社区提供了答复* ShaderQ:场景中有一个相机,ClearFlags为SolidColor,色彩设置为Blue(0,0,1,1)。 另外创立了个Cube,应用 一个最一般的vf shader,设置的输入色彩是Red,即fixed4(1,0,0,1);应用默认的ColorMask设置则会输入红色Cube,然而若设置了ColorMask R,最终Cube的色彩显示的是Blue和Red混合进去的,这一块有什么文档能够参考吗? 附Shader: Shader "Custom/ColorMask"{ Properties { } SubShader { Tags { "RenderType"="Opaque" } Pass { ColorMask R CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; }; struct v2f { float4 vertex : SV_POSITION; }; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); return o; } fixed4 frag (v2f i) : SV_Target { return fixed4(1, 0, 0, 1); } ENDCG } }}A1:猜想ColorMask R应该是只写入以后R通道的色彩,然而GB依然会从摄像机的Background值获取。感激Knight-132872@UWA问答社区提供了答复 ...

April 25, 2022 · 1 min · jiezi

关于ui:虚幻引擎-5-来了不止-LumenNanite-新技术性能及-UI-均迎来大升级

4 月 5 日,Epic Games(以下简称“Epic”)创始人兼 CEO Tim Sweeney 在空幻引擎“State Of Unreal”直播流动上正式公布了空幻引擎 5(Unreal Engine 5) —— “咱们十分冲动地发表,当初能够下载空幻引擎 5 了”。 此次 空幻引擎 5 的到来,将在实时 3D 内容和体验方面给宽广用户玩家们带来前所未有的自由度、逼真度和灵活性,同时推动大小型团队都能以视觉和交互的形式真正冲破可能的界线。 空幻引擎 5 采纳了全新新技术设计,如“全动静全局光照解决方案”Lumen、“虚拟化多边形几何体零碎” Nanite,性能和 UI 方面也有了大量降级,可实现更加真切的视觉效果。 只管 Lumen 和 Nanite 等一些次要新性能尚未在非游戏工作流中失去验证(这是将来版本的一个继续指标),但所有创作者都将可能持续应用 UE 4.27 反对的工作流。但他们也将受害于从新设计的空幻编辑器、更好的性能、对艺术家敌对的动画工具、扩大的网格创立和编辑工具集、改良的门路跟踪等等。 空幻引擎 5 次要新性能下一代实时渲染空幻引擎 5 推出了一系列开创性的性能,可实现高保真细节出现的实时世界。 Lumen:这是一个齐全动静的全局照明解决方案,它可让用户玩家可能创立可信的场景,其中间接照明能够动静适应直接照明或几何体的变动,如随着工夫扭转太阳的角度、关上手电筒或关上外门。 通过应用 Lumen,你无需再编写光照贴图 UV、期待光照贴图烘焙或搁置反射捕获;只需在虚构编辑器中创立和编辑灯光,就能看到玩家在指标平台上运行游戏或体验时看到的最终灯光。 Nanite:新的虚拟化微多边形几何零碎,让你可能用大量的几何细节发明游戏和体验。间接导入由数百万个多边形组成的电影品质源艺术,从 ZBrush 雕刻到摄影测量扫描,并将其搁置数百万次,同时放弃实时帧速率,且不会呈现任何显著的保真度损失。 虚构暗影贴图(VSM):专为 Lumen 和 Nanite 需要设计,可提供正当、可控的性能老本和正当的软暗影。Nanite 和 VSM 只智能地流式解决您能够感知的细节,在很大水平上打消了多边形计数和绘制调用束缚,并打消了耗时的工作,如将细节烘焙到法线贴图和手动编写 LOD,从而让您可能专一于创造力。 对于现在的宽广玩家来说,高分辨率显示器上的帧速率为 60 fps 或更高成了根本需要,这给渲染资源带来了微小的压力。应用内置的、独立于平台的高质量上采样系统 Temporal Super Resolution(TSR),引擎不仅能以更低的分辨率渲染,同时还能与以更高分辨率渲染的帧相似的输入像素保真度。 新凋谢世界工具集正如创始人兼 CEO Tim Sweeney 在公布流动上示意的那样:“让所有规模的团队更快、更容易、更具协作性地创立凋谢世界”。空幻引擎 5 的到来,给新世界分区零碎扭转了级别的治理和流化形式,主动将世界划分为网格,并流化必要的单元。 ...

April 7, 2022 · 1 min · jiezi

关于ui:UIToolkit下一代UI系统

1. UIToolkit运行时――下一代UI零碎UIToolkit的前身是UIElement,公布于Unity 2018。起初它用于开发Editor编辑面板中的UI,自Unity 2019、Unity 2020起正式反对运行时UI并且更名为UIToolkit,它以Package包的模式存在。自Unity 2021.2起,UIToolkit被官网内置在Unity中和UGUI的位置统一,UIToolkit作为下一代UI零碎,设计之初指标就很明确,就是替换掉现有的UGUI零碎。 现有的UGUI零碎从2014年自Unity 4.6开始至今服务于太多我的项目,从我的角度来看UGUI应用上并没有太大问题,最大的问题就是效率低。我用UGUI也开发了好几款我的项目了,每个我的项目开发阶段都被吐槽UI关上慢、卡顿等等,导致咱们不得不花很多工夫去优化UI零碎。 可循环滑动列表、图文混排、正当的UI划分还有资源按需加载基本上每个我的项目都要做一遍,尤其是滑动列表只有Item数量超过50个必卡无疑,导致每个我的项目每家公司都要本人做一遍,然而UIToolkit官网就内置了循环列表的性能。UGUI为什么效率低呢?就拿滑动列表来说吧,超出显示区域以外的面也须要合并Mesh,VBO数据也须要给GPU传,这样元素多提交GPU的数据量就大,还有就是它基于GameObject的形式,导致必然须要加载大量没用的数据,参加序列化的脚本数据有用没用都须要加载,导致简直没有任何缓存命中率可言。 GameObject的形式以致UI效率低,Unity开发的DOTS就是为了解决GameObject的问题,对DOTS感兴趣的敌人欢送看我之前的课程《DOTS深度钻研之原理剖析篇》和《DOTS深度钻研之利用实际篇》。UGUI还有那几个LayoutGroup、ContentSizefitter组件元素只有多一点就容易卡顿。UIToolkit继承了UGUI做得好的中央,比方Mesh合并就被保留下来,而且内置的ListView和ScrollView自带了有限循环列表的性能,并不会将所有看不见的元素都进行合并与提交GPU。它并没有采纳GameObject的形式,参考了Web技术的XML和CSS计划,只保留变动的数据。 期初在UGUI诞生前甚至在NGUI诞生前Unity本人是有一套UI零碎的,称之为IMGUI。它的运行原理更恐怖,每帧无论UI是否变动都须要将VB/IB传入GPU中,每个UI元素都要每帧设置渲染状态,DrawCall无疑就会十分恐怖。它在编辑模式下和运行时都同时反对,因为编辑模式下对性能并没有要求,而且编辑面板也不会制作特地简单的性能,所以IMGUI被广泛应用于拓展编辑器的开发。而运行时的OnGUI简直没有我的项目应用,因为应用不便当(没有编辑器),效率低(DrawCall高)的起因,所以起初在AssetStore中诞生了NGUI这样的第三方UI零碎。随后在Unity 4.6中Unity官网也开发出UGUI。UIToolkit的诞生是有时代意义的,同时兼顾了编辑模式与运行模式的布局便利性与性能,保障同一套代码资源能够疾速移植。UIToolkit目前处于高速倒退中,论坛中开发者探讨的十分强烈,版本迭代的速度也十分快,通过UIToolkit被内置在引擎中足以见得官网对UIToolkit的应用信心。 很多敌人看到XML和CSS就联想到UIToolkit应用了上世纪90年代的老技术,还和WPF和WinForm作比拟。就我看来XML和CSS只是界面的形容信息,就算是UGUI用的也是YAML来保留的界面形容信息,真正外围的技术应该是如何渲染与优化才对,如下图所示,UIToolkit中不同图集、不同文字、图文混排和不同深度只须要1次DrawCall就能够画完。 UIToolkit在GPU保留了一份以后UI渲染的VB/IB,当渲染的UI发生变化时它会以最小的代价来更新这份VB/IB,它不会更新全副的VB/IB,只更新变动的局部保障CPU和GPU每帧都能高度运行。为了一次DrawCall能画完,它还实现了一套大而全的Ubershader,同时反对8个图集和1个字体,只有界面满足以上条件就能够一次DrawCall画完,如果对UI原理感兴趣的敌人在文章的前面有具体的介绍。 而且UIToolkit应用的UXML只记录了变动的数据,比方大部分图片在UI中可能永远都不会设置色彩、旋转或缩放。UIToolkit提供了默认参数,只有不批改它,UXML中就不会蕴含额定数据。反观UGUI它无论如何都须要把色彩、旋转和缩放一类的数据序列化在脚本中,一个简单的界面可能有500多个元素,然而大量的内存都被白白浪费了,毫无缓存命中率可言,从这一点来看UIToolkit也要比UGUI先进。 1.1 致敬首先来致敬一下UIToolkit的两位次要开发者Benoit Dupuis(贝努瓦·杜普伊)和 Damian Campeanu(达米安·坎皮努)。感激在我学习的过程中在unite和官方论坛中屡次看到他们精彩的分享与急躁的解答。贝努瓦·杜普伊(左) 达米安·坎皮努(右)(图片来自领英) 贝努瓦·杜普伊在论坛中屡次公布UIToolkit的最新技术栈,以及UIToolkit将来的打算Roadmap解答开发者的疑难。达米安·坎皮努是UIToolkit的次要开发者,而且他还是DOTS编辑器团队的老大。 UIToolkit官方论坛:https://forum.unity.com/threads/ui-update-q3-2021.1138603/ 1.2 下一代UI零碎Unity在2018年公布UIElement时我就简略看过,因为过后它只反对Editor面板的UI,所以我就没有持续深刻学习。Unity在2019年UIElement改名UIToolkit并且反对运行时UI时我又简略学了一遍,发现它就是基于XML和CSS的20年前的老技术,期初心田是有点抵制的,直到Unity 2021.2正式内置UIToolkit到引擎中,又一次勾起了我学习它的激情。时至今日它仍然有很多问题是无奈解决的,如:UI和粒子特效叠层、UI和3D模型叠层、UI裁剪粒子特效、3D界面、多UI相机叠层、UI非凡着色器和K帧动画等等。 毕竟UGUI曾经好几年都没更新了,一个好引擎必然要跟上时代,替用户解决通用的痛点问题。在我看了UIToolkit最新的Roadmap当前我更加深信UIToolkit会代替UGUI。目前无奈满足需要的中央官网正在踊跃的开发,UIToolkit曾经反对UGUI混合应用、反对Text mesh pro 图文混排和有限滑动列表。将来会反对Shader Graph、3D粒子与UI的叠层和深度问题。大家如果有需要也能够在这个链接中公布本人的想法,这里也能看到官网正在反对以及将来反对的性能。 https://unity.com/roadmap/unity-platform/gameplay-ui-design 1.3 装置UIToolkit最好应用Unity 2021.2以及以前的版本,此版本中UIToolkit曾经内置在引擎中不须要增加额定的Package包。毛病就是不利于查看C#源码,它将DLL内置在引擎中。如果对源码有趣味的敌人也能够应用Unity 2020.3以及以上版本,但须要手动装置Package包。目前有个别性能只有在Unity 2021.2中才有,所以本教程我采纳最新Unity 2021.2.9f1版本,在源码学习局部我会切到Unity 2020.3版本。 如果是Unity 2020版本,如下图所示,须要在PackageManager中增加,com.unity.ui和com.unity.ui.builder两个包,目前两个包的最新版本都是1.0.0-preview.18版本。 "com.unity.ui": "1.0.0-preview.18","com.unity.ui.builder": "1.0.0-preview.18", com.unity.ui包就是UIToolkit,com.unity.ui.builder包则是UIBuilder,UIBuilder是UXML和USS的可视化编辑器,让使用者不须要手写布局代码,在编辑器中能够不便做出各式各样的界面。 戳此《UIToolkit下一代UI零碎》查看全文。

March 2, 2022 · 1 min · jiezi

关于ui:虎年首发尚硅谷AI案例实战教程分享

AI(Adobe illustrator)是寰球驰名的矢量绘图软件,以其弱小的性能和体贴用户的界面,占据了寰球矢量绘图软件的大部分份额。AI次要利用于印刷出版、海报书籍排版、业余插画、多媒体图像处理和互联网页面的制作等,也能够为线稿提供较高的精度和管制,适宜生产任何小型设计到大型的简单我的项目。 本套视频教程包含六大部分:AI根底软件操作、图形绘制、字体设计、插画设计工具根底、AI软件晋升实战、版式设计,是一套残缺的AI软件基础教程,简略、易学、好动手。通过本套教程的学习,你将把握AI软件的纯熟操作,为艺术创作夯实根底,加之学习了版式设计技巧和各类排版设计法令,能够独立实现精美的画面创作。 即使你是小有工作教训的设计师,通过本套教程也可坚固AI新版软件的性能,进步工作效率,丰盛设计成果。通过版式设计的学习,无论是零根底小白,还是工作教训1-3年的设计师,都能够晋升设计成果的思路和技巧。 小贴士:AI和PS在兼容上浑然一体,二者的区别简略来说,PS通常被认为是一个图像编辑软件,是一个以解决栅格图片为主的像素图处理软件(图片放大后会糊);而AI通常被认为是一个图像创作软件,是一个以矢量图的绘制为主的矢量图创作软件(有限放大也不会糊)。 教程具体目录: 01.AI实战-教程简介02.AI实战-新建和关上03.AI实战-色彩模式与出血04.AI实战-文件存储与文件格式05.AI实战-抓手放大镜标尺06.AI实战-抉择工具间接抉择工具撤销07.AI实战-矩形圆角矩形填充描边08.AI实战-椭圆工具多边形工具09.AI实战-图层程序锁定原位复制10.AI实战-图层属性11.AI实战-魔术棒套索工具12.AI实战-钢笔工具13.AI实战-字体工具段落文字和转门路14.AI实战-字体工具文字盘绕区域文字15.AI实战-字体工具直排文字润饰和变形选项16.AI实战-字体工具字符菜单17.AI实战-字体工具段落菜单18.AI实战-直线工具19.AI实战-画笔铅笔工具20.AI实战-剪刀橡皮工具21.AI实战-旋转镜像工具22.AI实战-歪斜工具23.AI实战-变形工具24.AI实战-自在变形工具25.AI实战-门路查找器形态模式26.AI实战-门路查找器简单图形运算27.AI实战-实时上色28.AI实战-透视网格工具29.AI实战-突变工具30.AI实战-网格工具31.AI实战-吸管工具属性32.AI实战-混合工具33.AI实战-喷枪工具34.AI实战-表格工具合集35.AI实战-对齐与参考线36.AI实战-变换菜单37.AI实战-剪切蒙版38.AI实战-图像描摹毛笔字设计39.AI实战-英文平面字成果40.AI实战-透明度蒙版41.AI实战-描边属性42.AI实战-多重描边43.AI实战-插图图标绘制44.AI实战-插图海报制作45.AI实战-半透明标记46.AI实战-花朵成果47.AI实战-卡通形象制作48.AI实战-3D突出与斜角49.AI实战-2.5D插画50.AI实战-字体排版与版权51.AI实战-英文字体设计52.AI实战-中文字体设计53.AI实战-版式设计54.AI实战-黄金比例尺55.AI实战-版式六大准则56.AI实战-色彩搭配57.AI实战-banner设计58.AI实战-banner的布局59.AI实战-banner的宰割60.AI实战-banner的正当与禁区61.AI实战-banner的背景设计

February 10, 2022 · 1 min · jiezi

关于ui:使用Sprite-Packer对UI图集进行打包的问题

1)应用Sprite Packer对UI图集进行打包的问题2)Unity解决视锥剔除的问题3)Profiler查看Shader.CreateGPUProgram的具体Shader信息4)PPS的UberPost内存占用较高 这是第270篇UWA技术常识分享的推送。明天咱们持续为大家精选了若干和开发、优化相干的问题,倡议浏览工夫10分钟,认真读完必有播种。 UWA 问答社区:answer.uwa4d.comUWA QQ群2:793972859(原群已满员) UIQ:应用Sprite Packer对UI图集进行打包:1. 应用零碎自带的Sprite Packer打包,图集大小设置成1024,这样打进去的图集会分为好几个Group,那么雷同图集不同Group可能合批吗? 2. 因为Sprite Packer是主动调配的Group,这种状况下关上性能的时候是所有Group都会加载的,那么这种设置1024是否还有必要,改成2048会不会好一点? 3. 图集设置成2048变大了,对加载速度和内存有影响吗?这个须要按图集里图片数量多少做不同的设置吗? A:能够参考以下答案: 不同Group是不会合批的,个别也没有UI图集大小的倡议。最好本人手动管制图集的Group,在UI制作时能够以UI Prefab为单位收集一下哪些Group的图集是以后UI须要应用的,加载UI预设时按需加载对应的Group就好了。如果图集中的图片资源都用到了,同时图集的填充率也差不多,那加载1张2048和4张1024,对加载影响可能并不是很显著,内存占用也是一样的,但如果2048填充率并没那么高,或者1024的会比拟好。该答复由UWA提供 RenderingQ:最近在钻研场景治理的问题,想理解Unity是否有解决视锥剔除,于是做了测试(Unity 2020.3.11f)。创立了两个Cube,挪动第二个Cube,比照顶点数量变动。 为什么同样在视锥体范畴内,批次和顶点数会不同?当第二个Cube不在视锥范畴内,顶点数也可能不同,那Unity是否有视锥剔除,其解决逻辑是怎么样的? A:应该是灯光绘制ShaowMap时候,投影的范畴将那个相机外的Cube包进去了,受Light的影响,关了Light就能够了。感激范世青@UWA问答社区提供了答复 ShaderQ:因为目前我的项目Shader挺简单的,变体也十分的多,如果用ShaderVariantCollection的形式解析一次耗时太高了,而且如果用Shader.CreateGPUProgram耗时很高并且频率也很高,所以就想问下:有没有什么方法能够晓得是哪个Shader造成的?这样我才好做策略去解决。 我以前Unity 2017是可能晓得哪个Shader造成的,在Profiler外面能够把Shader.CreateGPUProgram持续开展,然而当初Unity 2018.4.36不行。 A:Profiler的Timeline视图能够看到。感激黄晓文@UWA问答社区提供了答复 ShaderQ:URP我的项目,上面这个Shader是做什么用的?有没有相干的变体算法和优化倡议,谢谢。 A:UberPost是一个大杂烩,有好多解决都集中在这里,我的项目确定不必的变体之后,就能够用#pragma skip_variants xxx 跳过。例如:#pragma skip_variants _TONEMAP_NEUTRAL _DITHERING。感激怀特@UWA问答社区提供了答复 20211011更多精彩问题等你答复~ Unity增量打包AssetBundle没变动的资源也会被从新打包在模型有UV2的状况下开启Generate Lightmap UVs如何实现AAB包的增量更新封面图来源于网络 明天的分享就到这里。当然,生有涯而知无涯。在漫漫的开发周期中,您看到的这些问题兴许都只是冰山一角,咱们早已在UWA问答网站上筹备了更多的技术话题等你一起来摸索和分享。欢送酷爱提高的你退出,兴许你的办法恰能解他人的当务之急;而他山之“石”,也能攻你之“玉”。 官网:www.uwa4d.com官网技术博客:blog.uwa4d.com官网问答社区:answer.uwa4d.comUWA学堂:edu.uwa4d.com官网技术QQ群:793972859(原群已满员)

October 13, 2021 · 1 min · jiezi

关于ui:如何修复-SAP-UI5-aggregation-with-cardinality-01-相关的错误消息

谬误音讯: Assertion failed: multiple aggregates defined for aggregation with cardinality 0..1 引起该谬误的 aggregation 名称:flexContent: 查看 xml 视图里该 aggregation,发现其下定义了两个控件: 删除任意一个即可: 如上图所示,我将 Popover 和 VizFrame 从新搁置,别离位于不同的 aggregation 里,之后问题隐没。 残缺的 xml 视图代码: <mvc:View controllerName="sap.viz.sample.Line.Line" xmlns="sap.m" xmlns:viz="sap.viz.ui5.controls" xmlns:layout="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz.data="sap.viz.ui5.data" height="100%"> <layout:FixFlex id='chartFixFlex' minFlexSize="250"> <layout:fixContent> <viz:Popover id="idPopOver"></viz:Popover> </layout:fixContent> <layout:flexContent> <viz:VizFrame id="jerryFrame" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='line'> <viz:dataset> <viz.data:FlattenedDataset data="{/milk}"> <viz.data:dimensions> <viz.data:DimensionDefinition name="Week" value="{Week}" /> </viz.data:dimensions> <viz.data:measures> <viz.data:MeasureDefinition name="Revenue" value="{Revenue}" /> <viz.data:MeasureDefinition name="Cost" value="{Cost}" /> </viz.data:measures> </viz.data:FlattenedDataset> </viz:dataset> <viz:feeds> <viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="Revenue" /> <viz.feeds:FeedItem id='valueAxisFeed2' uid="valueAxis" type="Measure" values="Cost" /> <viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Week" /> </viz:feeds> </viz:VizFrame> </layout:flexContent> </layout:FixFlex></mvc:View>更多Jerry的原创文章,尽在:"汪子熙":

October 2, 2021 · 1 min · jiezi

关于ui:背包优化问题

1)背包优化问题2)Unity 2019在华为手机上2倍抗锯齿不失效3)对于libunity.sym.so符号表的问题4)Navmesh合并成一个新的NavMesh的办法5)Prefab挂本人写的管理器脚本却无奈打包 这是第260篇UWA技术常识分享的推送。明天咱们持续为大家精选了若干和开发、优化相干的问题,倡议浏览工夫10分钟,认真读完必有播种。 UWA 问答社区:answer.uwa4d.comUWA QQ群2:793972859(原群已满员) UGUIQ:常常会有人问背包卡顿的起因剖析,那到底是有多少种卡顿的起因以及优化的形式呢? A1:举荐先看一下官网的UGUI课程:《Unity UI模块优化案例精讲》对于没有优化过的背包,最大的耗费在于物品的销毁与实例化。感激潜行医生-577493@UWA问答社区提供了答复 A2:以下是我想到的一些点,期待其余大神补充更多的内容。我的项目中理论遇到的具体问题还须要具体分析,通过性能工具进行定位耗费过高的中央,而后有针对性地进行正当优化。 1.对于未优化的背包,列表滚动过程中,Cell的加载和销毁会造成卡顿。解决办法:应用有限滚动列表Tableview这种控件,使Cell能够进行复用,防止物体的频繁实例化和销毁。 2.背包关上一瞬间,加载了很多个格子物品进来,造成卡顿和内存冲高,GC等问题。解决办法:分帧加载,管制一帧实例化的Cell个数,防止在同一帧内大量创立格子物品。针对资源Load过程中的卡顿,能够采纳提前预加载资源到内存的形式。 3.背包刷新时卡顿,大量的格子监听某个事件,刷新时可能造成卡顿。解决办法:用脏标记的形式去刷新,不该刷新的局部不刷新。 4.Cell上的图片,粒子特效显示等设计不合理造成DrawCall过高。解决办法:这个须要联合具体的我的项目和设计方案进行剖析和优化。 感激马三小伙儿@UWA问答社区提供了答复 A3:举荐一下FairyGUI这套UI零碎,FairyGUI的List只有SetVirtual就行了:https://www.fairygui.com/docs...感激萧小俊@UWA问答社区提供了答复,欢送大家转至社区交换: RenderingQ:Unity 2019上,工程同时应用PostProcessing后处理性能加上抗锯齿,在华为手机上2倍抗锯齿是没成果的。 开启后处理+抗锯齿在手机上的效果图: 敞开后处理+抗锯齿在手机上的效果图: A:测试机型光荣Play 4T在开启后处理的状况下,2x MSAA不会失效,然而4x和8x会失效。 应用Graphics Analyzer剖析真机上的gl调用发现,MSAA失效须要在场景加载前调用 glFramebufferTexture2DMultisampleEXT接口,然而在开启后处理性能并且设置为2x MSAA的状况下,引擎调用的却是glFramebufferTexture2D接口,导致抗锯齿在场景中没有失效。 然而测试小米8和Oppo A32在开启后处理的状况下设置为2x MSAA并且失效。猜想是引擎方面针对不同的GPU硬件做了一些设置,当初只能在性能容许的状况下尝试开启4x MSAA来达到抗锯齿成果。 附件(可戳原问答下载)中有两个测试APK包和一些真机测试后果。光荣Play 4T上不开启后处理的状况下,单纯的2x MSAA和4x成果简直截然不同。 感激宗卉轩@UWA问答社区提供了答复,欢送大家转至社区交换: AndroidQ:我的项目采纳的是IL2CPP模式打包,选取arm64-v8a和armeabi-v7a两个版本,没有开启Strip Engine Code选项,Unity打包版本是2018.3.6f1 当初线上的包有ANR报错如下: #00 pc 000000000004b7cc /apex/com.android.runtime/lib64/bionic/libc.so (syscall+28) #00 pc 000000000004f680 /apex/com.android.runtime/lib64/bionic/libc.so (__futex_wait_ex(void volatile*, bool, int, bool, timespec const*)+144) #00 pc 00000000000b2120 /apex/com.android.runtime/lib64/bionic/libc.so (NonPI::MutexLockWithTimeout(pthread_mutex_internal_t*, bool, timespec const*)+688) #00 pc 00000000009fe7b4 /data/app/~~AxXJ-H5OqAWLfQK2almqqg==/com.saiyun.avgchapters.episodestories.romance-HeZPf9aJrCJYoKrQ20DOrg==/lib/arm64/libunity.so (???) #00 pc 00000000009fe778 /data/app/~~AxXJ-H5OqAWLfQK2almqqg==/com.saiyun.avgchapters.episodestories.romance-HeZPf9aJrCJYoKrQ20DOrg==/lib/arm64/libunity.so (???) #00 pc 0000000000508938 /data/app/~~AxXJ-H5OqAWLfQK2almqqg==/com.saiyun.avgchapters.episodestories.romance-HeZPf9aJrCJYoKrQ20DOrg==/lib/arm64/libunity.so (???) #00 pc 0000000000347f1c /data/app/~~AxXJ-H5OqAWLfQK2almqqg==/com.saiyun.avgchapters.episodestories.romance-HeZPf9aJrCJYoKrQ20DOrg==/lib/arm64/libunity.so (???) #00 pc 00000000006e3638 /data/app/~~AxXJ-H5OqAWLfQK2almqqg==/com.saiyun.avgchapters.episodestories.romance-HeZPf9aJrCJYoKrQ20DOrg==/lib/arm64/libunity.so (???) at com.unity3d.player.UnityPlayer.nativeInjectEvent (Native method) at com.unity3d.player.UnityPlayer.injectEvent (unavailable) at com.unity3d.player.UnityPlayer.onTouchEvent (unavailable) at android.view.View.dispatchTouchEvent (View.java:15199) at android.view.ViewGroup.dispatchTransformedTouchEvent (ViewGroup.java:3914) at android.view.ViewGroup.dispatchTouchEvent (ViewGroup.java:3578)查看报错的机型Samsung Galaxy S10,应用的是arm64运行的游戏,我尝试应用PlaybackEngines\AndroidPlayer\Variations\il2cpp\Release\Symbols\arm64-v8a下的libunity.sym.so文件查找函数名,然而提醒找不到办法。 ...

July 28, 2021 · 1 min · jiezi

关于ui:UI设计是什么UI设计学什么

UI设计是什么? UI是User Interface的缩写,中文的意思是用户界面,再说直观一点就是,比方你在电脑下面或者手机下面能用眼睛看见都能够叫用户界面。UI设计其实是一个大通称,外面细化了有界面设计,怎么把界面弄特炫酷、难看;交互设计,人机交互,设计一套流程下来,让软件更易用,更容易了解,让计算机不便人的应用;用户体验设计,怎么把这个界面设计得更容易操作,更合乎逻辑,缩小用户记忆和学习的累赘。 下面的这些职位划分,只有真正的大公司才会分得这么细,更多的公司是一名UI设计师干多种职位的事件,当初社会须要的是复合型的人才,所以咱们学UI也是要很多货色的。 UI设计是学什么? 参考易牛云朗沃的UI课程安顿,咱们学UI设计最根底的就是要会设计图片,像PS软件这种对图片解决的软件是要学习的;之后须要学习业余内容页面设计的学习,比方游戏网站设计,电商网站界面设计等等;而后就须要进一步学习挪动端的界面设计了,像APP界面设计,图标设计等等;下一步就要学习一些逻辑方面的常识,与计算机的交互设计,用户体验设计,如何达到让用户上手就会,爱不释手;最初也是须要学习一些代码的,个别就是HTML、CSS、JS等的学习,UI设计是在工作中免不了和前端工程师打交道,懂代码是很有必要的。 一名杰出的UI设计,私下还会去看看无关心理学方面的常识,这样能更好的了解用户行为,做出更人性化的操作界面,就拿咱们大家都晓得QQ来说吧,你的一个群外面十分沉闷,关上就是99+的音讯,那个包裹数字的小红点删除的形式是怎么?用手指一擦就拿掉了,是不是就像在咱们平时在桌上看见一个小黑点,会用手指去擦的操作是一样的?这就是UI设计师须要做的事。 UI设计是什么?UI设计学什么?置信通过我下面的介绍大家应该有个初步的理解了,在将来人们会更加器重精力上的享受,这给UI设计提供了良好的发展前途。

June 29, 2021 · 1 min · jiezi

关于ui:如何在-SAP-UI5-应用中集成第三方库-一个在移动设备上查看-Web-应用打印调试信息的小技巧

这是 Jerry 2021 年的第 43 篇文章,也是汪子熙公众号总共第 320 篇原创文章。 做 Web 开发的程序员,无论应用 SAP UI5,还是 Angular,React,Vue,每天都离不开 Chrome / Firefox 开发者工具。 Jerry 2018 年的时候,已经写过一篇对于 Chrome 开发者工具的文章:Jerry 和您聊聊 Chrome 开发者工具。 这些开发者工具尽管好用,然而当 Web 利用在挪动设施上运行时,想间接在手机浏览器上查看其应用 console.log 打印出的日志和调试信息,是一件比拟麻烦的事件。 比方 Jerry 之前写过一篇文章:在 Windows 笔记本上调试运行在 iOS 设施上的前端利用,介绍了如何通过近程连贯的形式,间接在 Windows 电脑上,对运行在 iOS 设施 Safari 浏览器里的 Web 利用进行单步调试: 当然,如果仅仅须要在挪动设施比方手机上运行一下 Web 利用,而后想查看其打印的调试信息,用上述近程调试的形式就未免大材小用了。 vConsole 是腾讯公布的一个工具库,从其取得的超过一万三千个 stars,就晓得这个库的受欢迎水平: vConsole 的一种用法是,将其库文件下载到本地后,在网页的 script 标签里援用。创立一个 VConsole 实例后,依然采纳失常的 console.log 打印调试信息或者日志。 此时渲染出的网页右下角,会呈现一个绿色的 vConsole 按钮: 点击之后,能关上一个相似 Chrome 开发者工具的面板,从而在外面可能看到应用程序应用 console.log 打印出的调试信息。 ...

June 21, 2021 · 2 min · jiezi

关于ui:SAP-UI5-应用-indexhtml-里-datasapuiresourceroots-指令的含义和作用

如下图所示: <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m, sap.ui.comp" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async" data-sap-ui-resourceroots='{ "sap.ui.demo.CombineLatest": "./" }'></script>我刚学习 SAP UI5 时,对 data-sap-ui-resourceroots 的作用很是费解。 浏览咱们开发的整个 SAP UI5 我的项目资源,无论是 Component.js: 还是视图的控制器: 还是视图的 id 自身,都蕴含了 sap.ui.demo.CombineLatest 的前缀: 如果咱们把 index.html 里的 data-sap-ui-resourceroots 指令去掉: 会发现利用根本无法加载了,Chrome 开发者工具里报了很多资源文件无奈加载的谬误。 摘取其中一条谬误音讯进去剖析。当初 Component.js 的加载门路为: https://sapui5.hana.ondemand.... 显然,这个门路是继承自 index.html 里 id 为 sap-ui-bootstrap 里的 src 属性定义的 SAP UI5 库文件: 咱们工程文件里的 Component.js, 其 id 为 sap.ui.demo.CombineLatest.Component: SAP UI5 框架在加载时,将 id 转换成 url: ...

June 16, 2021 · 1 min · jiezi

关于ui:SAP-UI5-应用-XML-视图的加载逻辑分析

工作:剖析 SAP UI5 root XML 视图的加载逻辑。 鼠标放到 initiator 这一列上,找到调用栈的 UIComponent.js 的 createContent 办法: 能够看到,这里的逻辑是,从 manifest.json 里解析出 root view 定义,而后实例化该视图。 咱们再来看看另一个 root 视图加载失败的 SAP UI5 利用: Access to XMLHttpRequest at 'https://sapui5.hana.ondemand....' from origin 'http://localhost:3002' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.也胜利解析出 root view 的名称了: 应用 ajax 加载 xml view: 正确的 path: 谬误的 path: ...

June 16, 2021 · 1 min · jiezi

关于ui:使用-SAP-UI5-CLI-命令行工具构建和运行-SAP-UI5-应用

源代码 Github 地址:https://github.com/wangzixi-d... 本地门路:C:\Code\frontend-ui5-mssql 本文介绍 SAP UI5 Tools. package.json 里定义如下依赖:@ui5/cli npm install 装置依赖后,在 node_modules 文件夹下,发现了 @ui/cli 文件夹,其 readme.md 介绍提到,SAP UI5 CLI,是 SAP UI5 Tooling 的一部分。 这个 SAP UI5 工程里蕴含文件:package.json,定义了 rimraf 依赖。npm run-script build 命令,首先删除 dist 文件夹,而后执行 UI5 CLI 进行构建。 build 生成的 dist 文件夹: 最初 npm run-script start,即可启动这个 SAP UI5 利用: 更多Jerry的原创文章,尽在:"汪子熙":

June 16, 2021 · 1 min · jiezi

关于ui:一种简单地实现-SAP-UI5-Master-detail-页面的方法

实现成果如下图所示: app view 的实现代码: // @ts-nochecksap.ui.jsview("jerrylist.view.App", { getControllerName: function () { return "jerrylist.view.App"; }, createContent: function (oController) { // to avoid scroll bars on desktop the root view must be set to block display this.setDisplayBlock(true); this.app = new sap.m.SplitApp(); // load the master page var master = sap.ui.xmlview("Master", "jerrylist.view.Master"); master.getController().nav = this.getController(); this.app.addPage(master, true); // load the empty page var empty = sap.ui.xmlview("Empty", "jerrylist.view.Empty"); this.app.addPage(empty, false); return this.app; }});代码第 13 行创立的 sap.m.SplitApp, 实际上是 SplitContainer: ...

June 16, 2021 · 3 min · jiezi

关于ui:关于纹理勾选sRGB的疑惑

1)对于纹理勾选sRGB的纳闷2)开启光照导致面片数减少3)UGUI的Image批改材质属性疑难4)UniWebView界面如何显示到Unity界面之后5)Timeline的Internal_CreatePlayable开销很大 这是第254篇UWA技术常识分享的推送。明天咱们持续为大家精选了若干和开发、优化相干的问题,倡议浏览工夫10分钟,认真读完必有播种。 UWA 问答社区:answer.uwa4d.comUWA QQ群2:793972859(原群已满员) RenderingQ:在UWA上搜到一个问答:https://answer.uwa4d.com/question/5bd1724fae74300ab0497bed,论断是:linear space + gamma texture,勾sRGBlinear space + no gamma texture,不勾sRGB如同Gamma Space上面这个sRGB勾不勾没有影响? Player Setting外面的color space设置标识导入的图片是在Gamma Space中还是Linear Space中创立的,文档外面没有说分明,心愿大佬能够解释下。 依据这里的探讨:https://forum.unity.com/threads/confusion-about-gamma-vs-linear.496053,如果勾了sRGB之后Unity是做了gamma反改正,即tex2D进去的value应该是pow(origin_color_value, 2.2),这里假如gamma值是2.2,那么在frag中,R通道的值应该就是反改正过的,那么在heatmap的u的两头值应该是0.5左右,也就是下面那个探讨帖外面第一个headmap所示,但实际上却是第二个heatmap所示。 外面说是因为用color值做data而不是color的起因,这个解释太困惑了,因为不论做data还是做color,他们都是数字,数字的比拟是不会出错的。 A1:Gamma Space上面这个sRGB 勾不勾的确没有影响。在Linear Space下,如果勾了sRGB 之后,Unity是做了Remove Gamma Correction。那么图中值为0.5灰度,即u=0.5的那一列的灰度,通过Remove Gamma Correction,失去的值是0.25,如下图所示:X轴代表光照强度,Y轴代表灰度值 蓝色线的Y值代表人眼的灰度值,视觉灰度值;红色线代表物理空间的理论灰度值,与光照强度成正比。 Photo突变图中u=0.5的那一列的灰度值为0.5,是视觉灰度值,通过Remove Gamma Correction之后,失去理论灰度值0.25。在Fragment Shader中参加计算。所以显示的是第二张heat map。 感激June@UWA问答社区提供了答复 A2:能够参考这篇文章:https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear 说下我的了解:个别状况下,咱们看到的图片是在“显示器空间”,在显示器中看到的图片色彩是失常的,是因为这个图片自身是通过GammaCorrection的,就是原始的数值通过1/2.2次幂操作,对于这样的图片,咱们能够了解为是非线性的。在Unity抉择了Linear空间后,对于这样的非线性的图片,须要将其勾选sRGB能力正确地渲染。图片勾选sRGB后,在内存中的格局会变成ETC2_EAC_RGBA8_SRGB的格局(假如图片抉择ETC2 8bits的压缩格局),如下图: 不勾选sRGB,是ETC2_RGB8_UNORM格局,如下图: 对于这种_SRGB后缀的格局,GPU在进行纹理采样的时候,会主动将其移除GamaCorrection,行将数值做2.2次幂操作,然而不会对原始数据做批改。在Gamma空间中,不管勾选还是不勾选sRGB,格局都是ETC2_RGB8_UNORM。 说回题主的问题:在Gamma空间中,渲染出的后果是均等的4种颜色,因为在Gamma空间中,是不会做移除GammaCorrection操作的,这阐明,这个“非线性图片”在u=0.5的时候(u是纹理uv坐标),纹理中的data value=0.5,当变成了Linear空间后,data没有发生变化,还是在u=0.5的时候data=0.5,勾选了sRGB后,在进行纹理采样的时候,GPU将值做了2.2次幂操作,就变成了0.25左右,因而当u<=0.5的时候,color.r<=0.25,依据Shader计算color.r<0.25时都是红色,即u<=0.5时,都是红色,于是就有一半色彩都是红色了。 感激Xuan@UWA问答社区提供了答复 RenderingQ:Unity显示的面数,应该是这一帧上传到GPU的所有顶点数据所决定的,那为什么GPU不会对这部分做个缓存呢?因为开启光照时,面数减少,相当于屡次上传了模型的顶点数据,这部分如果缓存下来,不是能够晋升很大性能吗?如果GPU不能做这个缓存,是不是说GPU的缓存太小,没有这个空间,或者是GPU并不能确认哪些要缓存?如果是改引擎代码,能够针对我的项目去做缓存。 A:光照自身着色不会影响DrawCall和面数。实时暗影须要在渲染一张暗影用深度图,相当于换了个视角进行渲染,数据有别于以后相机。能够开FrameDebugger看一下整个渲染过程。感激StriteR@UWA问答社区提供了答复 UGUIQ:UGUI的Image能通过设置MaterialPropertyBlock来批改材质属性吗?怎么设置? A:UGUI用不了材质块,能够参考:https://forum.unity.com/threads/big-problem-with-lacking-materialpropertyblock-for-ui-image.506941感激范世青@UWA问答社区提供了答复 UGUIQ:有一个安卓端显示网页的插件UniWebView,默认会显示到Unity界面的下层,挡住Unity所有的显示。请问怎么让安卓的原生界面成为背景,让Unity的UI成为前景,Unity的背景自身也要通明。 A:要让UniWebView跑到Unity界面前面去,官网文档上说是不行的。https://docs.uniwebview.com/guide/faq.html 对于Unity背景透明度放弃,在Player Settings外面有个勾选项应该能够达到目标。 感激Xuan@UWA问答社区提供了答复 PlayableQ:咱们的特效是应用Timeline进行制作的,最近进行性能测试的时候发现,Internal_CreatePlayable办法的开销很大,然而只有一个轨道,所以很蛊惑这个开销跟什么无关? 我在PC上加载了同样的一个对象,Internal_CreatePlayable须要18.55ms,而后我在PC上创立了Cube加了一个Timeline成果,Internal_CreatePlayable就须要4ms左右。 A:Timline首次CreatePlayable就是比拟耗时,我这边一个简略的Timeline资源首次耗时500+ms。 不过能够通过把CreatePlayable的步骤放在场景加载时进行来防止游戏过程中的卡顿。加载Timeline资源后,调用PlayableDirector.RebuildGraph就会进行CreatePlayable,相当于Prewarm。尔后,再调用Play(),就不会进行CreatePlayable。再调用RebuildGraph,因为有了缓存,也不会有高耗时。 下图为首次调用RebuildGraph的耗时。 下图为第二次调用RebuildGraph的耗时。 感激Prin@UWA问答社区提供了答复 封面图来源于:URP Learn一个用于学习Unity Universal Render Pipeline的我的项目。https://lab.uwa4d.com/lab/6010aca80f247485d9c39878 ...

June 16, 2021 · 1 min · jiezi

关于ui:SAP-UI5-使用-Smart-Control-的一个具体例子

咱们在本地 Visual Studio Code 里, 依照上面两篇文章,实现了 SAP UI5 的利用开发, 应用 yo 命令行向导创立 SAP UI5 利用应用 yo 命令行向导给 SAP UI5 利用增加一个新的视图最初能失去一个列表,成果如下: 本文咱们应用 SAP UI5 提供的 Smart 控件来持续丰盛这个利用。 从上面三个 namespace 引入 Smart 控件: xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"xmlns:smartList="sap.ui.comp.smartlist"xmlns:smartTable="sap.ui.comp.smarttable"xml view 的实现源代码: <mvc:View controllerName="tutorial.products.controller.Products" displayBlock="true"xmlns="sap.m"xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"xmlns:smartList="sap.ui.comp.smartlist"xmlns:smartTable="sap.ui.comp.smarttable"xmlns:mvc="sap.ui.core.mvc"><Page id="Products"> <smartFilterBar:SmartFilterBar id="smartFilterBar" persistencyKey="UniqueAndStablePersistencyKey" entitySet="Products" considerSelectionVariants="true" /> <smartList:SmartList id="smartProductList" smartFilter="smartFilterBar" entitySet="Products" expandFields="Category" header="Products List" showRowCount="true" showFullScreenButton="true" enableAutoBinding="true"> <smartList:listItemTemplate> <StandardListItem id="listTemplate" type="Navigation" press="handleListItemPress" title="{ProductName}" info="{= ${UnitPrice} + ' ' }" description="{Category/CategoryName}" /> </smartList:listItemTemplate> </smartList:SmartList></Page></mvc:View>npm run start 启动工程,最初看到的 Smart List: Smart Filter 控件提供的开箱即用的性能: 更多Jerry的原创文章,尽在:"汪子熙":

May 3, 2021 · 1 min · jiezi

关于ui:SAP-UI5-应用的中文乱码问题

如下图所示: 我应用 sap-language=ZH 的 url 参数,试图拜访我 SAP UI5 利用的中文版时,发现题目显示为乱码: https://er9.wdf.sap.corp:4430... 这是我的 i18n_zh.properties 文件: 解决办法:在 i18n_zh.properties 里间接输出中文对应的 unicode,而不是中文字符自身: 最初乱码隐没了: 更多Jerry的原创文章,尽在:"汪子熙":

May 3, 2021 · 1 min · jiezi

关于sap:SAP-Cloud-Application-Programming-CatalogService-默认的路径

我的 Service 定义,没有显式申明 service url: 最初 cds watch 的后果:该 Service 的名称:AdminService,去掉了后缀 Service,再把后面的 Admin 转成 lowercase 的后果:admin 同理: 我的 service: 更多Jerry的原创文章,尽在:"汪子熙":

April 11, 2021 · 1 min · jiezi

关于sap:SAP-Cloud-Application-Programming-bookshop-例子的-Fiori-Preview

进入 bookshop 文件夹,命令行 cds watch,以 development mode 启动利用: 点击超链接,即可通过 Fiori Elements 预览这些 service: 预览的 url 具备如下格局: http://localhost:4004/$fiori-... 查问 Authors 的 OData 申请 url: http://localhost:4004/admin/$... 返回的数据: 从运行时加载的 SAP UI5 这些源文件能看出,这个预览 (preview) UI 是一个典型的 Fiori Elements 利用: 更多Jerry的原创文章,尽在:"汪子熙":

April 11, 2021 · 1 min · jiezi

关于ui:干货放送界面控件DevExpress开发常用知识点全解

点击获取工具>> 应用DevExpress控件来做我的项目开发曾经有很长一段时间了,在摸索开发到客户刻薄要求的过程中,其中碰到过很多问题须要解决的,随着一个个问题的解决,也留下很多对DevExpress控件的应用教训及教训,综合设计到的多个我的项目的问题,对这些开发罕用的要点进行总结,不便他人也不便本人。提供这些解决办法,一个能够疾速利用到我的项目中,二个也能够作为对界面开发的更高要求看待本人的我的项目,使得本人的货色更加完满,更加受欢迎。 一、GridControl控件的数据显示的款式管制 如上两图所示,咱们有时候须要管制列表拜访过的色彩变动,或者是工夫显示格局等内容,这个时候设置GridView的RowCellStyle即可实现,如下所示。 `this.gridView1.RowCellStyle += new DevExpress.XtraGrid.Views.Grid.RowCellStyleEventHandler(gridView1_RowCellStyle); void gridView1_RowCellStyle(object sender, DevExpress.XtraGrid.Views.Grid.RowCellStyleEventArgs e){if (e.Column.FieldName == "PublishType"){if (e.CellValue != null && e.CellValue.ToString() == "中介"){e.Appearance.BackColor = Color.DeepSkyBlue;e.Appearance.BackColor2 = Color.LightCyan;}}if (e.Column.FieldName == "PublishTime"){e.Column.DisplayFormat.FormatString = "yyyy-MM-dd HH:mm:ss";} if (e.Column.FieldName == "Title"){string id = this.winGridViewPager1.gridView1.GetRowCellDisplayText(e.RowHandle, "Id");if (historyDict.ContainsKey(id)){e.Appearance.BackColor = Color.DeepSkyBlue;e.Appearance.BackColor2 = Color.LightCyan;}}}` 二、在LayoutControl布局中固定控件宽度 固定宽度后的实在成果。 为了使得界面统一性及更好的控制性,咱们个别应用LayoutControl布局控件作为咱们增加控件的布局容器,然而这个控件默认是对其中的控件进行按窗口比例进行缩放的,有些客户就不喜爱这些特点,因为他们的显示器可能是30寸的(夸大一点点,不过很多宽屏的),这样很多输入框就会被拉得很长,这样小小一个输入框,可能有很长的一段空白的间隔,那样可能真的不难看,如下图所示。 设置固定宽度,其实不是很麻烦,须要设置几个属性即可 设置控件的SizeConstraintsType为DevExpress.XtraLayout.SizeConstraintsType.Custom;设置控件的FillControlToClientArea 为False设置控件的ControlMaxSize的大小(必要时也能够设置ControlMinSize),设置例子如下所示。 三、GridControl中的GridView内容打印 因为GridView的良好封装性,实现打印的代码很简略。 `private void menu_Print_Click(object sender, EventArgs e){PrintableComponentLink link = new PrintableComponentLink(new PrintingSystem());link.Component = this.gridControl1;link.Landscape = true;link.PaperKind = System.Drawing.Printing.PaperKind.A3;link.CreateMarginalHeaderArea += new CreateAreaEventHandler(Link_CreateMarginalHeaderArea);link.CreateDocument();link.ShowPreview();} ...

February 22, 2021 · 1 min · jiezi

关于ui:SAP-UI的加载动画效果和幽灵设计Ghost-Design

这是Jerry 2021年的第 14 篇文章,也是汪子熙公众号总共第 285 篇原创文章。 在本篇文章之前,Jerry 印象最深的幽灵,应该要算《星际争霸I》里人族可能隐形的地面单位 Wraith( 幽灵战机 ),以及能施放核弹的 Ghost( 幽灵特工). 上周 Jerry 做 SAP Spartacus 开发时,接触到一个新的和幽灵相干的术语: Skeleton Design(Ghost Design) 读了帮忙文档后,发现该名词对我来说只不过是旧瓶装新酒罢了。 本文目录SAP UI5 Busy Dialog应用代理模式( Proxy Pattern ) 进步 SAP UI5 大尺寸图片的加载体验SAP Spartacus Spinner 控件SAP Spartacus 幽灵设计我对应用软件的 User Experience 即用户体验畛域知之甚少。在 SAP 外部,有专门的用户体验设计师负责这个畛域,因而我也不分明 Skeleton / Ghost Design 精确的中文翻译是啥,权且就直译成“幽灵设计”吧。 在我看来,无论是幽灵设计,还是之前 SAP UI5 提供的页面加载动画成果,都是改善用户应用体验的一种伎俩:提醒用户以后页面正在加载后盾数据,或是执行一些比拟费时的操作。 SAP UI5 Busy DialogJerry 从2014年开始应用 SAP UI5 进行 Fiori 开发,经验了 Fiori 1.0 到 2.0 的版本迭代。还记得解决的第一个 CRM Fiori 利用 My Opportunities 的 bug,症状就是批改了 Opportunity 数据之后,用户能够短时间内疾速点击下图的 Save 按钮,从而产生多个到 CRM 后盾的 OData 保留申请。 ...

February 21, 2021 · 2 min · jiezi

关于ui:介绍一个能开发简单SAP-UI5应用的在线IDEStackBlitz

这是Jerry 2021年的第 14 篇文章,也是汪子熙公众号总共第 285 篇原创文章。 在本篇文章之前,Jerry 印象最深的幽灵,应该要算《星际争霸I》里人族可能隐形的地面单位 Wraith( 幽灵战机 ),以及能施放核弹的 Ghost( 幽灵特工). 上周 Jerry 做 SAP Spartacus 开发时,接触到一个新的和幽灵相干的术语: Skeleton Design(Ghost Design) 读了帮忙文档后,发现该名词对我来说只不过是旧瓶装新酒罢了。 本文目录SAP UI5 Busy Dialog应用代理模式( Proxy Pattern ) 进步 SAP UI5 大尺寸图片的加载体验SAP Spartacus Spinner 控件SAP Spartacus 幽灵设计我对应用软件的 User Experience 即用户体验畛域知之甚少。在 SAP 外部,有专门的用户体验设计师负责这个畛域,因而我也不分明 Skeleton / Ghost Design 精确的中文翻译是啥,权且就直译成“幽灵设计”吧。 在我看来,无论是幽灵设计,还是之前 SAP UI5 提供的页面加载动画成果,都是改善用户应用体验的一种伎俩:提醒用户以后页面正在加载后盾数据,或是执行一些比拟费时的操作。 SAP UI5 Busy DialogJerry 从2014年开始应用 SAP UI5 进行 Fiori 开发,经验了 Fiori 1.0 到 2.0 的版本迭代。还记得解决的第一个 CRM Fiori 利用 My Opportunities 的 bug,症状就是批改了 Opportunity 数据之后,用户能够短时间内疾速点击下图的 Save 按钮,从而产生多个到 CRM 后盾的 OData 保留申请。 ...

February 21, 2021 · 2 min · jiezi

关于ui:全世界第二受欢迎的-React-UI-组件库一夜之间不见了

据 Ant Design 官网账号示意,Ant Design 在 Github 上的仓库在没有任何起因的状况下忽然隐没了,团队正在分割 GitHub 官网寻求帮忙和反馈。 截止发稿工夫, Ant Design 官网 GitHub 账号页面依然显示 404。 全世界第二受欢迎的 React UI 组件库Ant Design 是蚂蚁金服推出的一套企业级 UI 设计语言和 React 组件库,从 2015 年推出开始便受到宽泛的关注与应用,Ant Design 官网的题目也设置为: 全世界第二受欢迎的 React UI 组件库。 作为一个设计体系,Ant Design 蕴含的不仅仅是一个组件库。除了耳熟能详的 Ant Design React 外,还有 Angular 版本的 NG-ZORRO、Ant Desin Mobile、Ant Design Landing、HiTu React,以及来自社区志愿者的 Ant Design Vue。 垂直方向开箱即用的中台前端 / 设计解决方案 Ant Design Pro 和对应的区块市场,以及衍生组件库 Pro Layout 和 Pro Table。设计上也提供了十分多的标准文档以及相干的设计资产。 一夜之间隐没,起因不明 账号页面隐没的具体起因目前尚未颁布,有网友示意或者是在从 GitHub 向 Gitee 进行迁徙,也有网友示意疑似被黑客入侵导致。 ...

February 15, 2021 · 1 min · jiezi

关于ui:逼疯UE设计师不可不知的提升产品用户体验的10个测试方法

【摘要】用户体验的形容比拟主观,产品性能的可用性、可靠性、性能等都会影响用户的应用体验,比方性能bug问题也会说体验不好,程序解体也会说体验不好,性能卡顿会说体验不好,那是不是都在用户体验测试的范畴呢?测试人员如何无效地进行用户体验测试 1、什么是用户体验?UE != UIUI:User Interface 用户界面 用户界面其实是一个比拟宽泛的概念,指人和机器互动过程中的界面,以车为例子,方向盘、仪表盘、换档器等都属于用户界面。 当初个别把屏幕上显示的图形用户界面(GUI :Graphic User Interface)都简略称为UI。 UE: User Experience 用户体验 用户体验指用户在应用产品过程中的集体主观感触。即用户在应用一个产品之前、应用过程中、应用后的整体感触,包含行为、情感、爱好、生理和心里反馈、成就等各个方面。 艰深的讲用户体验是整体的应用感触,包含受品牌影响,用户集体应用教训的影响,总之就是让用户用着爽。有良好体验的事物易用且使人愉悦,或至多让人不加思考就能正确应用。 尽管良好的美学设计有助于进步用户体验,但用户体验实质上讲的不是杰出外观和感觉。为产品设计杰出的外观应该是最初一步,此前你要先把需要迭代实现,而后解决更形象的用户体验问题。 所以UE远不止网站外观这么简略,UI只是其中的一部分。 2、用户体验的重要性有钻研认为“每在用户体验的钻研上破费1美元,将取得100美元的收益”。 用户体验的重要性当初已是产业界的共识,是一种新的产品竞争力。 举个最典型的例子,乔布斯和他的苹果。 从某种意义上讲,苹果公司的胜利来自对人们如何应用电脑设备的透彻了解,以及开发“酷比了的产品”的高度承诺。 能够说,乔布斯的每一个产品翻新,都在颠覆人们的传统认知,并在其中把“用户体验“做到了极致,凭一己之力,彻底改变了手机市场的整体格局,在业界留下了一座不朽的丰碑。 用户十分看重体验的愉悦感和价值感,一旦不能满足,可能会迅速抉择其余可代替的产品,对于一个产品或者企业来说,失去客户是致命的。 3、如何进行无效的软件产品的用户体验测试用户体验的形容比拟主观,产品性能的可用性、可靠性、性能等都会影响用户的应用体验,比方性能bug问题也会说体验不好,程序解体也会说体验不好,性能卡顿会说体验不好,那是不是都在用户体验测试的范畴呢? 我认为不是,性能的可用性、可靠性、性能等都有成熟的测试方法,用户体验测试应该在产品的性能可用、牢靠、满足性能要求等根底之上的,更多关注的是用户感知和用户反馈,强调的是在产品可用性的根底上给予产品感触的反馈。 同样客户体验的晋升应该建设在产品可用性的根底上,否则一堆的bug体验怎么也不会好的;在可用性的根底上,再思考客户应用习惯、视图成果和交互成果等UCD方面的设计,能力达到极致体验。 那么用户体验测试的办法有哪些? 个别业界的用户体验测试包含考察问卷、用户访谈、用户测试(众测)、眼动仪、脑动仪等,其中较实用的办法为考察问卷、用户访谈、用户测试(众测),都是通过用户体验反馈来评估产品体验好坏的。 然而这种办法更多是由用户来实现,并不适宜服务测试。 那服务测试如何来测试用户体验呢? 咱们能够从用户体验设计来动手。 对于用户体验设计,业界有较多的设计办法,比方用户体验五因素、蜂巢模型、用户体验金字塔、5E、尼尔森十大可用性准则等。 用户体验五因素: 蜂巢模型: 用户体验金字塔: 5E: 尼尔森十大可用性准则: 状态可见准则环境贴切准则·撤销重做准则一致性准则防错准则易取准则灵便高效准则易扫准则容错准则人性化帮忙准则在咱们的实际中,最终抉择以尼尔森十大可用性准则为基准,再联合具体的业务,对每个个性、场景进行剖析,把每个准则进行实例化,生成具体可执行的测试用例,从测试的角度来验证产品的可用性。 对于尼尔森十大准则的具体解释,大家可在网上搜寻,资料还是很丰盛的,这里不再详述。 对于咱们设计的测试用例,去除产品强相干信息后,供大家参考,欢送大家批评指正: 本文分享自华为云社区《逼疯UE设计师,不可不知的晋升产品用户体验的10个测试方法》,原文作者:xyyzxyyz 。 点击关注,第一工夫理解华为云陈腐技术~

February 7, 2021 · 1 min · jiezi

关于ui:SAP-UI5和Angular的函数防抖Debounce和函数节流Throttle实现原理介绍

这是Jerry 2021年的第 11 篇文章,也是汪子熙公众号总共第 282 篇原创文章。 Jerry之前的文章 SAP UI5 OData流言粉碎机:极短时间内发送两个Odata request, 前一个会主动被cancel掉吗,介绍过SAP成都研究院CRM Fiori开发团队开发过的一个Live Search的场景。 用户创立Opportunity,保护Account字段,每输出一个字符,都会触发SAP UI5 Input控件的liveChange事件。在该事件的onAccountInputFieldChanged处理函数里,依据用户输出,发送OData申请到后盾进行查问。 如果用户输入速度很快,则在短时间内,会有多个OData申请发送到后盾,进而呈现Jerry文章里形容的OData申请被cancel的状况。 最近Jerry做SAP Spartacus开发,遇到了同样的场景。因而通过本文把本人最近所学总结一下,记录下SAP UI5和Angular里如何应用函数防抖(Debounce)和函数节流(Throttle)来防止短时间内触发高频次函数调用的状况呈现。 为了便于解说,Jerry做了一个只蕴含一个Input控件的SAP UI5页面。源代码地址. 在Input里输出字符,会触发liveChange事件,将以后Input的最新内容,发送到一个我本人开发的后盾服务去。该后盾服务什么也不做,只是简略将收到的内容返回给UI. 这个SAP UI5页面里的Input控件的liveChange事件处理如下: 从Chrome控制台打印的输入来看,我在一秒钟之内,间断疾速输出了1234共4个字符,一共产生了4个发送往后台的申请。 SAP UI5如何应用函数防抖(Debounce)来升高函数调用的频次函数防抖(Debounce),最早源于机械开关和继电器的术语“去弹跳”,行将多个信号合并为一个信号。 设想一个大家现实生活中都会遇到的场景:进电梯。电梯都有一个主动敞开门的超时工夫,假如为2秒。当电梯检测到有人进入时,会重置这个2秒的计时器。如果下一个2秒之内,没有新的乘客进入电梯,电梯门才会主动关上。 电梯提早关门这个场景,就是一个典型的函数防抖的事实例子。电梯关门的行为就是“函数”,通过电梯门的主动敞开超时工夫,2秒,来提早电梯门的敞开动作的执行,从而升高电梯门的敞开频率,这就是“防抖”。 能够设想,如果电梯门的主动敞开没有设定超时工夫,而是检测到没有人进出之后,立刻敞开,这样会大大增加电梯门开合的频率,既节约能源,也不平安。这就好比Jerry本文结尾提到的例子:既然我短时间内输出了字符1234,我冀望在UI看到的,是后盾服务接管到1234后返回的后果。至于后盾如何对前三个申请,即字符1,字符12和字符123进行解决,我不再关怀。 咱们能够仿照电梯门敞开超时工夫的设定,来给SAP UI5的函数调用实现防抖管制。 下图debounce变量是一个函数结构器,自身是一个函数,接管另一个函数fn作为输出参数,职责是通过闭包,将fn革新成一个具备防抖管制性能的新函数,该新函数通过第17行的return语句返回。 防抖工夫距离通过函数结构器另一个输出参数delay指定。 假如咱们指定的防抖工夫距离为3000毫秒即3秒,如果3秒之内,debounce函数结构器返回的新函数被一直调用,此时执行上图代码第19行,调用clearTimeout重置计数器,此时原始函数fn不会失去执行。这个场景能够类比成:在电梯关门超时工夫内,又有新的乘客进入,电梯超时计时器重置,电梯门不会敞开。 代码第20行,应用setTimeout重启超时工夫距离为3秒的计数器,3秒过后,如果JavaScript工作队列里没有其余待执行工作,则执行原始函数fn. 代码的第20行,好比电梯设施从新开启了3秒的超时定时器。 如果在期待的3秒之内,没有新的函数调用触发,则3秒过后,执行21行的原始函数fn;这好比电梯在3秒之内,始终没有新的乘客进入,则 3秒过后,电梯门主动敞开。 debounce函数结构器的应用形式也很简略。 代码第78行,将原始的sendRequest函数,以及3000毫秒的防抖工夫距离,传入debounce结构器,返回一个兼有数据发送性能和防抖性能的debounceVersion函数。在第85行原来调用sendRequest函数的地位,改为调用debounceVersion函数即可。 函数防抖性能的测试:我在同一分钟的第46秒,48秒,50秒,51秒四个工夫点,别离输出了1,2,3,4总共4个字符,然而在最初一次即51.996秒又过了3秒之后,才仅仅有一个申请发送到后盾:这阐明3秒的函数防抖距离失效了: SAP UI5如何应用函数节流(Throttle)来升高函数调用的频次上述函数防抖的实现存在一个问题,还是以电梯的例子来阐明。 构想有一个空间有限的电梯,关门的超时工夫为3秒。如果一直的有新的乘客以小于3秒的工夫距离进入电梯,则电梯门永远没有机会敞开——即函数永远得不到执行。 函数节流(Throttle)是另一种升高函数调用频次的思路,同函数防抖的区别是,后者能保障在指定的节流距离内,至多执行一次函数。 函数节流结构器的一个最简略的实现版本: 被节流器革新后的函数每次触发时,取一个以后零碎工夫戳,同前一次触发时取的工夫戳比拟。如果二者的时间差,大于等于结构器的输出参数delay即节流工夫距离,则进入第39行的else分支,触发原始函数fn;否则阐明节流工夫距离还未达到,应用第34行setTimeout,将原始函数fn,从新放入JavaScript事件队列内,提早执行: 函数节流版本的结构器应用形式,同函数防抖版本的结构器没有差异:将原始函数sendRequest传入结构器throttle,返回一个具备节流性能的新函数throttleVersion,在Input控件liveChange事件处理函数里,调用throttleVersion这个新函数即可。 函数节流的测试后果:我设置的节流工夫距离为3秒,从Chrome控制台打印输出能察看到,SAP UI5的确是大抵以3秒的工夫距离,向后盾发动的数据申请。 本文介绍的两种函数防抖和函数节流的实现代码,仅仅思考了最根本的状况,还有很多不欠缺的中央,有趣味的敌人能够在网络上搜寻,这方面的材料十分多,这里不再赘述。 Jerry之前的分享提到过,Angular是响应式编程开发库RxJS的重度使用者,后者提供了泛滥功能强大的Operators,使得Angular开发人员不必反复造轮子,就能轻易实现出具备函数防抖和函数节流的场景。 ...

January 29, 2021 · 1 min · jiezi

关于ui:制定一个计划开发总结-UI-设计和-Flutter-学习

我集体比拟偏好简洁的 UI 设计,惋惜不是相干业余,刚开始时齐全没有方向。像很多 UI 工程师一样(跟我司 UI 学的),我第一件做的事件就是上 dribbble 寻找灵感,看到适合的就珍藏下来,好日后进行模拟。 上面的截图这是过后珍藏的一些 UI 设计。 dribbble 上难看的设计切实太多,可是要把收集到的碎片重整为本人须要的样子就不太容易了。“灵感”收集得差不多了,接下来就本人摸索着在 Figma 画页面,同时也能把一些性能和交互确定下来。 UI 设计上花了很长时间,但看看最终上线后理论的 UI,与当初设计的也相差太大了????。边做边改,有的性能长期决定放到下个版本,有的界面实现之后没有达到预期的成果,有的性能决定不要了。随便一点吧,反正一切都是本人做主。 对于 FlutterFlutter 要应用 dart 语言进行开发,开始学习 Flutter 之前要简略看下 dart。能够跟着官网提供的 Tour 走一遍,看完也就差不多了。 而后学习 Flutter。Flutter 的学习文档很多,社区也很沉闷。中武官网的 开始应用 涵盖了所有初学者须要晓得的知识点。 学习 Flutter 比当初学习 Android 容易许多,两头没有碰到太多问题。而且用 Flutter 开发让人感觉比拟顺畅,你冀望达到什么成果,写好代码后热重载立马能看到成果,而且往往跟你的预期是统一的。比较烦人的是环境配置,之后的依赖下载(网络问题)等,耗时间。 学习 Flutter 时 Dart 的异步模型是必须要学习的,比拟重要,也有肯定难度。在进行一些耗时操作,如网络申请(这个利用将会应用到的 RPC Call),文件读取时就会用到。举荐两篇文章: Flutter(五)之彻底搞懂Dart异步Flutter/Dart中的异步还有一点比拟重要的是 BLoC(Business Logic Component) 模式,应用 BLoC 模式开发 Flutter App 能够无效的隔离 UI 显示 代码和 业务逻辑(状态治理) 代码。看看上面????这张经典的图例: BLoC 模式遵循上面的步骤解决用户事件:1) 用户与 App 交互产生事件(events),events 通过 Sinks 发送给 BLoC2) BLoC 对事件进行解决,并更新保护在 BLoC 内的状态数据3) BLoC 通过 Streams 将新的状态数据发送给 widgets,widgets 再对这些状态数据进行渲染。 ...

January 25, 2021 · 1 min · jiezi

关于ui:如何成功进行自动化的UI测试看完这篇文章你就懂了

点击获取工具>> 在抉择正确的工具来帮忙您胜利进行主动UI测试时,您须要理解以下内容。 为什么不能再疏忽主动UI测试? 只管面向代码的自动化测试工具曾经变得越来越广泛,但大多数开发公司都疏忽了自动化UI测试。这样做的次要起因是保护UI测试套件的老本,应用大多数/所有UI测试工具,实际上对应用程序UI的任何更改都会导致UI测试工具将整个应用程序标记为已损坏。后果,古代软件开发实际的大部分过程都是围绕UI与代码的准确拆散而组织的,因而能够在不接触UI的状况下测试代码。 现实情况是用户不与代码交互:用户与您的UI交互,从用户的角度来看,您的UI是您的应用程序,证实代码在成心疏忽UI的状况下无效的以后做法短少了重点。 与以后的实际相同,UI测试提出一个简略的主张:要证实您的应用程序已“筹备好投入生产”,您必须证实UI可能失常工作并驱动您的应用程序执行正确的操作。 一些基于工具的选项 随着DevOps和对用户验收测试的需要减少,这一要求变得越来越重要。 后果是UI测试工具失去了倒退,但这也使得开发者更难、也更容易获取正确的工具集。难点在于有更多抉择可供选择;容易在于有更多的工具对您有意义。 例如当查看UI测试时,能够在无代码工具和基于代码的工具之间进行抉择。 无代码工具容许测试人员通过与应用程序进行交互来创立UI测试,而该工具通过“察看”用户的交互和应用程序的响应来生成测试脚本。 这些工具利用“ UI即应用程序”范式,并且不须要测试人员比应用程序(及其相干的业务需要)理解更多。 另一方面,基于代码的工具要求测试人员编写脚本来通过代码(即在页面上查找按钮,而后从UI元素提取数据)来操纵UI。 然而,这些工具能够查看“副作用”,这些副作用不肯定显示在任何用户界面(或“能够作为测试的一部分进行拜访的任何用户界面”)中,并且能够解决各种响应,基于代码的工具的确要求测试人员晓得如何编写代码。 无代码工具使开发人员脱离了测试的要害门路,并受权用户创立对其无效的测试。 基于代码的工具反对更深刻、更彻底的探测、并解决各种响应,从而缩小谬误的数量(实际上,在应用程序失常运行时的故障报告)。 重要事项 无论您最终应用什么工具,都须要将它们集成到您的流程中,而不会障碍您交付应用程序……并在满足组织、用户和您本人的指标的同时做到这一点。 首先:您是否须要自动化的UI测试? 值得记住的是,测试的指标是将失败的老本从生产环境转移到开发环境中。 如果您的团队对以后的生产失败程度感到称心,并且不违心批改开发实际,那么您可能不须要自动化的UI测试。 自动化的UI测试如何合乎团队的战略目标? 第一个问题与第二个问题重叠:自动化测试如何适应团队文化?团队是否器重尽快向心愿应答高变化率的用户社区提供新性能,即便存在一些小故障?还是团队更须要高度牢靠的应用程序,这些应用程序会随着工夫的推移而稳固,因而能够满足严格的(兴许甚至是法规)规范? 反过来,这个问题与第三个问题重叠:主动UI测试将如何适应您的流程? 答案始于用户何时何地进行验收测试。例如如果有很长的工夫用户没有参加开发过程,那么利用用户的UI测试策略可能就没有意义。如果在团队中如果“编码器驱动的UI测试”是一个矛盾的话题(即只有最终用户会说出UI是否“正确”),那么基于编码器的办法就无奈适应您的工作形式。 最初一个问题:您能够利用哪些技能集和现有工具集? 例如,无代码测试仅在您领有一群不仅仅“应用”应用程序但有能力晓得在测试中什么是“正确”或“不正确”响应的用户时才有意义。 在开发人员方面,您心愿查看用于交付应用程序的工具链 - 利用团队在该工具链上的教训并与之集成能够为您带来真正的益处。 不过,乏味的是,在抉择UI测试工具时,用于构建应用程序的开发工具并不是特地重要,特地是对于Web应用程序而言。 **[Telerik Test Studio] 比起繁多的“ UI测试工具”,更须要一种为满足特定需要测试而配置的套件,最终会组合一个最佳的套件来满足您的特定需要,然而从繁多起源取得残缺的解决方案显然会更不便。 自动化UI测试畛域的供应商既器重灵活性,又器重与其余工具集成的反对。 例如,[Telerik Test Studio]反对无代码测试,反对将那些无代码测试转换为编码测试,将编码步骤与无代码测试联合在一起,并与第三方库集成以满足非凡需要。 意味着非程序员(例如QA团队或最终用户)能够创立测试,以证实零碎已实现用户心愿零碎执行的操作。 将这些无代码测试与编码测试无缝联合的能力意味着,当非程序员遇到阻碍时,开发人员能够扩大这些测试以解决“难以自动化”的场景。 创立无代码测试的能力然而请不要遗记这一点:依然不是对于工具的问题,而是这些工具是否反对您的指标、流程以及现有技能/工具链。如果您对这些内容有很好的理解,那么就能够获取在主动UI测试中取得成功的工具。

December 15, 2020 · 1 min · jiezi

关于ui:SAP-UI5和Angularjs事件处理机制的实现比较

Jerry最开始是用SAP UI5进行SAP CRM Fiori利用的开发。最近一段时间做SAP Spartacus开发,在用Angular,因而借这个机会将两个前端框架的事件处理实现细节做一个比拟。 SAP UI5事件处理通过button控件的attachPress办法注册一个Press事件点击的处理函数: button控件自身的实现是没有attachPress这个办法的,这一点能够从hasOwnProperty返回false来确认: Instead, it is provided by the node in the button instance’s prototype chain, EventProvider. 顺着SAP UI5 button原型链沿着继承关系向上寻找,最初发现在EventProvider里提供了attachEvent办法。如果对SAP UI5 button的原型链不相熟,能够参考我这篇文章:深刻学习SAP UI5框架代码系列之一:UI5 Module的懒加载机制 当咱们利用代码里调用attachPress时,传入这个函数的事件响应函数被退出到一个SAP UI5对立保护的事件处理注册表mEventRegistry里,这是一个键值对数据结构,key为应用程序注册的事件名称,值为咱们传入的 事件响应函数。如下图所示,key为press,值为fFunction: 当咱们点击了UI上的按钮之后,SAP UI5控件的Button.onclick办法会被调用,外面会fire一个Press事件。这里实现了浏览器原生的click事件到语义事件Press的转换。 SAP UI5依据press,到事件注册表mEventRegistry里去查找,将所有注册到该事件上的所有响应函数取出,放到一个数组aEventListeners里,遍历这个数组,逐个调用响应函数。 Angularjs事件处理下图是一个Angularjs利用,基于Angularks 1.2.18开发而成. 在界面上显示了硬编码之后的三个国家的人口,我心愿通过人口对这三个国家进行排序。 我给Country这一列通过ng-click指令注册了一个排序逻辑:sortField = 'name' Angular和SAP UI5一样,有本人的bootstrap阶段。在此阶段Angular框架做的事件之一,就是Angular框架会通过下图第964行代码即compile函数,遍历html DOM树。 如果发现有一个element attribute具备ng前缀,执行applyDirectivesToNode函数,为该节点增加一些非凡的逻辑。 Angular通过下列的三个步骤,对ng-click = "sortField = 'name'"进行响应函数注册: 第一步:解析蕴含ng-click= "sortField = 'name'"的HTML元素,创立一个wrapper fn. ...

December 5, 2020 · 1 min · jiezi

关于ui:SAP-UI5和Vue的数据双向绑定实现原理比较

Two-way data binding in UI5Two way data binding test: Control property change leads to model field changeTwo way data binding test: model field change leads to control property changeTwo way data binding in VueTwo way data binding test: model field change leads to control property changeTwo way data binding test: Control property change leads to model field changeStep1 – Model directive detectionStep2 – Generate source code of event handlerStep3 – Register event handler into physical DOM elementStep4 – Model field will be changed in onInput event handlerRecently when I do self study on Vue I find many articles in the internet with full of praise on Vue‘s reactive Two-Way Data binding trait. This fact makes me recall my self-study on UI5 early in year 2013 and at that time, the Two-Way Data binding was already supported by UI5. ...

August 29, 2020 · 5 min · jiezi

关于ui:SAP-WebClient-UI的白屏问题分析

IssueOnce product hyperlink in sales order line item is clicked, it is expected that product overview page is opened. Instead the empty screen is displayed now: Most efficient way to find root causeFollow this blog how to persist the UI exception so you can view them later to register the custom error log in your system. (1) Specify the error date and user name who has encountered with this error: ...

August 26, 2020 · 1 min · jiezi

关于ui:SAP-UI5应用白屏的原因分析

Today I am working on another incident and I get to know another kind of reason which will lead to empty screen issue in UI.My previous experience for potential reason of empty screen issue is, there must be some JavaScript execution error which causes the UI ceases to render. The issue I am working on today: Say in system A when I try to create a follow up Opportunity based on a lead, ...

August 21, 2020 · 3 min · jiezi

关于ui:使用调试的方式搞清楚SAP-UI5应用标题的更改方式

In Fiori launchpad, the page title will display default value “Home”. When I click a given tile to enter an UI5 application, the page title is changed for example from “Home” to “My Tasks”. Today I am dealing with an incident that once I have entered one application, the page title is not displayed correctly, see below error screenshot: In order to fix this issue, I need to know exactly which line has changed the value of page title.Since I don’t have any clue why page title becomes like this when I enter the erroneous application, so my thought is if I can test with an application where the page title works correctly, and if I can find out the line of code for title value assignment, then I can set breakpoint on that line and debug back with erroneous application. ...

August 21, 2020 · 2 min · jiezi

关于ui:对于一款软件而言完备的功能固然重要但交互体验也不该被忽视

个别状况下,软件开发的后期设计以及开发的过程中,满足其功能性的优先级要高于交互界面的好看性。以至于业界中泛滥软件平台的UI设计,与其齐备的性能造成落差。对于对美感稍有谋求和观赏能力的用户来说,应用时所感触到的微小割裂感可能会令其产生激烈不适。 这不难理解,毕竟呈现这种状况,都是开发者出于老本管制的思考,而对前端页面刻意弱化。但这样一来,软件产品的整体品质就呈现短板,用户会很容易觉察到其中的缺点与歹意。SO,一款优良的软件除了有齐备的性能之外,也要有足够好看敌对的用户交互界面。 这里举一个侧面的例子,看看LR.net疾速开发平台的UI与性能,能够做为一种参照或者规范。首先,其外部筹备了多套不同格调的Homepage界面,以满足不同人群的审美。 经典极简 冷酷商务 清爽慷慨 青春活力 自在恬适再者就是功能性方面,总之,一个软件开发平台该有的货色,它都能给到用户。 麻利开发麻利开发向导:表单、流程、数据等罕用性能配置向导 代码生成器:八套开发模板,生成类、页面、映射、表单、小程序等 通用图标:PC和挪动端图标 数据看板:BI大数据看板 表格组件:各类罕用表格 甘特图:理解我的项目进度 信息可视化:货架、生产线等 门户配置:企业门户 插件配置:框架内置及第三方插件 二维码生成:企业二维码生成 D3配置:动态数据展现 2.系统管理 行政区域:全国行政区划 数据字典:各我的项目个性查问 单据编码:合同、表单等文件编码 零碎性能:零碎性能分类展现 系统日志:日志类 LOGO设置:框架logo设置 数据权限:权限类 桌面配置:首页桌面性能配置 音讯治理:音讯类 多语言治理:内置中、英、繁,可拓展 微信企业号:企业号开发 任务调度:工作的执行 Excel配置:表格导入导出 数据管理:数据表、数据源、数据库连贯及常用字段 文件治理:文件类 3.单位组织 公司治理:总/分公司治理 部门治理:部门 岗位治理:岗位 角色治理:角色 用户治理:用户 4.表单利用 表单设计:设计罕用表单 表单治理:表单根底、条件、列表设置 表单实例:示例 5.流程利用 流程设计:人事、我的项目、购销等各类流程设计 流程工作:待办/已办流程 流程委托:委托别人解决流程 流程监控:已实现/未实现流程整体监控 签章治理:签章类(反对手写) 流程实例:示例(销假流程) 6.挪动治理 挪动开发向导:挪动表单、流程、数据等罕用性能配置向导 挪动性能:挪动端罕用性能 首页图片:挪动首页图 Logo设置:挪动logo 桌面设置:挪动端桌面配置 7.报表利用 报表公布:绑定已设计报表后公布 报表设计:图标、列表设计 业余报表:葡萄城业余报表 报表实例:罕用报表示例 简洁报表:洽购、收支、仓存、收支类报表 8.利用实例 OA办公:新闻、布告、日程、签章、导出模板、邮件核心 ...

August 17, 2020 · 1 min · jiezi

关于ui:思否开源项目推介丨UUI功能优先的通用-UI-组件库

开源项目名称:UUI 开源我的项目负责人:@孙扣扣 开源我的项目简介:性能优先的通用 UI 组件库 开源我的项目类型:团队开源我的项目我的项目创立工夫:2020 年 GitHub 数据:44 Star,2 Fork GitHub 地址:https://github.com/HackPlan/UUI负责人自荐做这个我的项目是因为咱们发现市面上的 UI 组件库大多数都是款式和性能一体的,也就是说无奈轻松的实现款式的自定义,后果是很多应用同一个 UI 组件库的我的项目,看起来就像是同一个格调。 UUI 心愿提供一个性能优先,款式可高度自定义的根底组件库。通过应用 UUI,各个我的项目能够依据本人的款式格调,轻松的定制本人的组件库。 拓展性方面,不同于其余组件库高度封装的设计,UUI 提供了极高的自定义空间,当性能不够用的时候,能够自行拓展。 UUI 最早是 2019 年底就开始外部开发,今年年初开始投入生产我的项目的应用。当初每周都在沉闷地更新。 我的项目个性一组开箱即用的有用的组件。基于 TypeScript 的类型安全性。弱小的组件款式自定义性能。 我的项目亮点组件品种丰盛:提供了较全面的根底组件、笼罩各类场景,组件个性丰盛、满足各种性能需要。反对高度拓展:为了更好定制自定义组件的性能,能够应用自定义组件扩大机制。风格化组件款式:反对灵便的款式定制,繁难生成多种格调,满足个性化产品需要。 思否举荐UUI 是 HackPlan 团队打造了一款性能优先的通用 UI 组件库,反对常见的 Breadcrumb、Button 等29 种组件,能够满足一些中小型业务的需要。 UUI 的文档展现形式让人眼前一亮,不再是单纯的演示 + 代码,而是融入了Actions、Story、Knobs、Performance、Accessibility 等形式来让使用者更具体的理解与学习应用 UUI。 该我的项目已入选「SFOSSP - 思否开源我的项目反对打算」,咱们心愿借助社区的资源对开源我的项目进行相干的宣传推广,并作为一个长期我的项目助力开源事业的倒退,与宽广开发者共建开源新生态。 有动向的开源我的项目负责人或团队成员,可通过邮箱提供相应的信息(开源我的项目地址、我的项目介绍、团队介绍、联系方式等),以便晋升交换的效率。 分割邮箱:pr@segmentfault.com

August 13, 2020 · 1 min · jiezi

第三章-路径和画笔工具的应用云图智联

第三章 路径和画笔工具的应用本章任务掌握AI中绘制路径的工具使用能够对所绘制的路径进行修改美化操作掌握AI中路径查找器的使用掌握AI中画笔工具的使用绘制路径学习目的: 学习在AI中使用工具去绘制一些路径绘制线条: 特点一:结合“描边面板设置该线段的端点状态; 特点二:直接点击工作区可以精确绘制具体的线条 特点三:绘制线条过程中,按住空格,可以跟随鼠标移动线条的位置 1."直线段工具" 直线段绘制小技巧: 1) 直接任意绘制线段; 2) 按住Shift可以水平,垂直或者45°角绘制直线段; 3) 绘制过程中按住“~“可绘制很多线; 4) 精确绘制线段———使用“直线段工具”单击工作区,在弹窗中设置精确数值; 2."弧线工具" 弧线绘制小技巧: 1) 拖动鼠标绘制的同时,按住Shift键,可得到X轴和Y轴长度相等的弧度; 2) 绘制时,按住键盘的C键可以控制弧度是开放或者闭合; 3) 绘制时,按住X键或者F键可以使弧线在“凹”“凸”曲线间切换; 4) 拖拽鼠标绘制同时,按住键盘上下键可增加减少弧线曲率半径; 5) 精确绘制弧线———使用“弧线工具”单击工作区,在弹窗中设置精确数值; 3."螺旋线工具" 螺旋线绘制小技巧: 1) 绘制时,住Ctrl键可保持涡形的衰减比例; 2) 绘制时,按住键盘上下键可增加减少涡形路径片段的数量; 3) 精确绘制螺旋线———使用“螺旋线工具”单击工作区,在弹窗中设置精确数值; 4."矩形网格工具" 绘制矩形网格小技巧: 1) 绘制时,方向键控制网格行数和列数;2) 绘制时,按住Shift键,可以定义绘制的矩形网格为正方形网格 3) 绘制时,按住C键,竖向的网格间距逐渐向右变窄。 4) 绘制时,按住V键,竖向的网格间距逐渐向上变窄。 5) 绘制时,按住X键,竖向的网格间距逐渐向左变窄。 6) 绘制时,按住F键,竖向的网格间距逐渐向下变窄。 7) 精确绘制矩形网格———使用“矩形网格工具”单击工作区,在弹窗中设置精确数值; 5."极坐标工具" 绘制极坐标小技巧: 1) 绘制时,按住Shift键或者Alt+Shift键可以绘制正圆形网格; 2) 绘制时,按住上下方向键,可以调整经线数量; 3) 绘制时,按住左右方向键,可以调整纬线数量; 4) 精确绘制极坐标———使用“极坐标工具”单击工作区,在弹窗中设置精确数值; 演示案例案例1:用矩形网格工具制作笔记本上表格 案例思路: 1)使用矩形工具绘制笔记本背景;2) 使用矩形网格工具结合该工具特点绘制网格数量; ...

June 30, 2020 · 1 min · jiezi

第二章-基本图形的绘制与编辑云图智联

第二章 基本图形的绘制与编辑本章任务掌握AI绘制基本图形的方法掌握对AI基本图形的编辑方法掌握AI基本图形的变换操作矢量图形的构成 学习目的:了解矢量图形的组成部分矢量路径 矢量路径可以理解为限制图形的边界,每个矢量图都有一条路径包围着 颜色 由“填充”和“描边”组成,“填充”和“描边”使矢量图形变得五颜六色。 绘制基本图形学习目的:学习在AI中使用5种工具去绘制一些基本图形在AI中绘制基本图形时,描边和填充是如何设置的。绘制基本图形的工具使用: 特点:每个工具单击空白工作区时可以精确绘制图形 1.“矩形工具”(M) 1)可以直接绘制任意矩形 2)绘制正方形 按Alt键绘制,是从指定的区域绘制按Alt+Shift键,是从中心开始绘制 2.“圆角矩形工具” 1)可以直接绘制任意圆角矩形 2)绘制正圆角矩形: 按Alt键绘制,是从指定的区域绘制 按Alt+Shift键,是从中心开始绘制 改变圆角大小——在绘制圆角矩形时,拖动鼠标情况下: 左方向键控制最小圆角右方向键控制最大圆角 上方向键增大圆角 下方向键减小圆角 3.“椭圆工具”(L) 1)可以直接绘制任意椭圆 2)绘制正圆: 按Alt键绘制,是从指定的区域绘制按Alt+Shift键,是从中心开始绘制 4.“多边形工具” 1)在绘制多边形时,拖动鼠标情况下: 上方向键增加边数下方向键减少边数 5.“星形工具” 1)在绘制星形时,拖动鼠标情况下: 上方向键增加角的数量下方向键减少角的数量 按Ctrl键向外拖拽,可以增加角的尖锐度 按Ctrl键向里收缩,可以减小角的尖锐度 按Alt键可以恢复默认角的尖锐度 描边和填充的使用:描边和填充” 1)在工具箱中下面的前景色和背景色是由填充和描边组成的,谁在前,改变的就是谁的颜色2)X键 描边和填充前后位置进行互换 3)Shift+X键 描边和填充颜色进行互换 4)在AI中描边的值可以输入小数 5) 可以设置单色填充和渐变填充 描边面板的使用: 1)描边的粗细2)端点——针对开放描边,可以设置平头、圆头、方头 3)边角——针对闭合描边,可以设置直角、圆角、切角 4)对齐描边——针对闭合描边,可以设置描边的居中、内侧、外侧对齐 演示案例案例1:使用“矩形工具、圆角矩形工具”制作UI图标 案例思路: 1)使用圆角矩形工具和矩形工具绘制,绘制时注意圆角的控制;;2) 使用“填充”效果进行填色; 3) 使用“直接选择工具”更改图形锚点,使图形变形; 4) 使用“选择工具”选中图形更改元素位置 案例2:用椭圆工具绘制天气图标 案例思路: 1)使用“圆角矩形工具”和“椭圆工具”进行绘制;2) 使用“填充”效果进行填色; 3) 使用“选择工具”选中图形更改元素位置 案例3:用星形工具制作游戏标志 案例思路: 1)使用“星形工具”、“椭圆工具”、“矩形工具”等进行绘制;2) 结合“渐变工具”和“渐变命令”进行渐变色填充, ...

June 30, 2020 · 1 min · jiezi

AI第一章笔记云图智联

Illustrator图形设计与形象设计本章任务了解AI软件与PS软件的区别了解AI软件的应用领域掌握AI软件的基本操作AI软件的介绍学习目的:了解AI软件的特点了解AI与PS软件的区别简单了解AI软件: 1) 它是全球最著名的设计软件之一 2) 它绘制出来的矢量图形可以任意放大、缩小且不失真 3) 它可以实现矢量图与位图的相互转化 位图与矢量图的区别:位图(点阵图)——由像素点组成,有像素限制 位图的产生 通过数码相机拍摄而来的通过设计或者其他软件绘制渲染而成 位图的优缺点 优点:色彩丰富,光影关系表现到位缺点:像素会失真,出现像素块(马赛克) 矢量图——是由计算机根据几何特性绘制的图形 矢量图的产生 是由一个点或者一条线组成,只能靠软件来绘制矢量图的优缺点 优点:放大不会失真缺点:色彩单一,光影关系表现不到位 AI软件与PS软件的区别: 绘图领域 AI是矢量图形设计; PS是位图(像素)图像设计; 放大后效果 AI放大后不失真 PS放大后会失真 画布及工作区 AI在新建画布时可同时建立多个画布; AI可在工作区中绘图也可在草稿区绘图; PS在新建画布时只能建一个画布; PS只能在工作区中绘图; AI设计的应用领域学习目的:了解AI设计的主要应用领域应用领域广告设计 排版设计 插画设计 包装设计 书籍装帧 VI设计 AI软件工作环境学习目的:对工作界面基本认识工作界面: 菜单栏工具箱草稿区绘图区调班首选项和性能优化 快捷键:Ctrl+K ;优化电脑性能实现思路 执行“编辑”-“首选项”进行自定义环境设置 Illustrator的文件管理新建文件: 新建文件方法: "文件"菜单——新建快捷键:Ctrl+N 新建文件注意事项: 名称: 根据设计内容命名 单位: 像素: 设计的内容在电子设备上显示 毫米 mm(国内单位,常用): 设计的内容需要打印印刷时 厘米 cm(国内单位): 设计的内容需要打印印刷时 出血: 出血值:3mm设计内容在裁切时,内容区域与裁剪边缘的误差 ...

June 16, 2020 · 1 min · jiezi