egret.eui皮肤与组件(2)

最新推荐文章于 2020-01-20 17:09:40 发布
最新推荐文章于 2020-01-20 17:09:40 发布
阅读量5k 收藏 1
点赞数
分类专栏： egret 文章标签： 设计模式 egret
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38985747/article/details/75092359
版权
本文详细介绍了如何使用egret EUI扩展库来创建自定义组合组件，如Button和ProgressBar，并提供了制作自定义皮肤的方法。内容涵盖组件状态管理、布局应用以及子组件的分组策略，帮助提升EUI皮肤的灵活性和可维护性。
摘要由CSDN通过智能技术生成

* 使用egret EUI扩展库使用


1. 自定义组合组件(Button和ProgressBar)的制作:

* 需要EUI自带Button和ProgressBar皮肤

* Button组件由三个子组件构成: image, label(labelDisplay), image(iconDisplay)

* ProgressBar由三个子组件构成: image(track) 轨道, image(thumb) 滑块, label(labelDisplay) 文字

* 按照EUI自带Button和ProgressBar皮肤结构写自定义皮肤(如ButtonType1Skin.exml和ProgressBarType1.exml)

* 在需要使用自定义Button和Progress的皮肤上先引入EUI自带Button和ProgressBar皮肤组件, 把该组件使用的皮肤设置为对应的自定义皮肤ButtonType1Skin.exml或ProgressBarType1.exml

* Button组件对应三种状态(states=up, down, disabled), ButtonType1Skin.exml在设计模式中分别创建三种状态, 并修改对应ui


* ProgressBar组件需要注意皮肤初始的thumb宽度会被默认为100%进度, 因此thumb宽度需要拉宽至期望设计的100%宽度处


最低0.47元/天 解锁文章
猫的鄂定薛
关注
专栏目录
Egret引擎基础教程II（EUI基础使用教程）
毛毛虫的博客
07-26 1394
由于Egret引擎的EUI扩展库的官方文档写得十分复杂，让很多新手短时间内难以入手并且走了不少坑，在这里我将教你Egret引擎的扩展库EUI的基本使用方法。废话不多说，一起开始吧! 第一步：创建EUI组件 首先找到项目结构左侧 右键→src→新建模板文件→新建EUI组件。如下图： 点击新建EUI组件 弹出下图 类名：LoginScene 是否生成EXML文件：是 是否生成TS文件：是 皮肤默...
egret GUI 和 egret Wing 是我看到h5 最渣的设计
daxi1047的博客
07-18 298
一个抄袭FlexLite抄的连自己思想都没有，别人精髓都不懂的垃圾框架。也不学学MornUI，好歹有点自己想法。 先来个最小可用集合吧： 1. egret create legogame --type gui。生成一个带gui的项目。 2. 用webstorm打开这个傻逼项目。 3. 修改theme.thm： { "skins": { ...
Egret引擎的EUI基础使用教程
热门推荐
林洪炳的日常技术积累
12-13 3万+
由于Egret引擎的EUI扩展库的官方文档写得十分复杂，让很多开发者短时间内难以入手并且走了不少坑，在这里我将教你Egret引擎的扩展库EUI的基本使用方法。废话不多说，一起开始吧!
Egret之Eui.Button换肤
weixin_33979745的博客
10-26 1285
在Gui中对Button换皮相当的给力:Gui.Button.skinName = new egret.gui.ButtonSkin(normal_resource, up_resource , disable_resource);但是在EUI中没有ButtonSkin类.所以找到了其他方法.我用三种按钮进行测试 : 1,有自定义皮肤的按钮 2,没有自定义皮肤的按钮(三种状态...
Egret）获取所有子元素显示对象，包括子元素的子元素
Taotao的CSDN之家
01-06 7062
public getAllChildNum2(_dis): number { // console.log(egret.getQualifiedClassName(_dis)); if(egret.is(_dis, "egret.DisplayObjectContainer") == false) { re
egret 使用EUI开发UI界面
哲学天空的博客
10-13 4830
按照官网文档使用EUI开发，失败！网上找了其他博客终于解决。记录如下： 1.新建项目，项目中添加eui界面制作库。 2. 新建EUI组件。 3.会出现下面错误提示，没办法，自己手动创建default.thm.json文件，文件中添加 {} 即可，后面创建的eui组件信息会自动添加到该文件中。 4.在src文件下新建EUI组件，现在可以创建了。 5. 添加控件到e...
Egret 修改eui.ProgressBar文本样式
Fanstasic的博客
11-12 820
this.expProgress.labelFunction = this.labeChange; labeChange(value: number, maximum: number): string { return value.toString() + "%"; }
egret.eui皮肤与组件(1)
猫的鄂定薛的博客
06-05 2538
EUI组件使用了皮肤分离机制: 一般可以分为逻辑和皮肤两个部分 =================================================== 1. 皮肤 逻辑(js) ------> 数据刷新        ------> 事件监听 皮肤(exml) ------> 位置布局        ------> 样式外观 * 这里的皮肤不是显示对象, 只是
egret.H5游戏UI基础
sinat_20998879的博客
12-21 540
ui控件两大类 egret.DisplayObjectContainer和egret.DisplayObject。egret.DisplayObject是ui叶子节点，只能作为child被添加到父ui节点egret.DisplayObjectContainer。egret.DisplayObjectContainer继承自egret.DisplayObject。 一些可能不会直接使用但很有用的控件...
游戏前端学习（一） typescript + egret + egret-EUI系列
qq_36024963的博客
09-28 1733
本系列主要是我的工作学习历程，包括日常采坑，游戏相关的编程、语法、扩展库等。所以文章会有点流水账的形式。  最近找了份新的工作，主要是微信小游戏开发的，由于我拥有 Java、JavaScript、微信小程序开发等基础，所以目前主要补充的知识点有 typescript、egret、包括 egret 的扩展类库：egret-eui。 工作第一天： 我选择从 Egret Engline 2D ...
Egret实现滚动排行榜
Cleve_baby的博客
10-24 4602
首先用EUI布局做好两个皮肤，主要就是列表的使用，主要代码： class Rank extends eui.Component {     private listGoods: eui.List;         constructor() {         super();         this.addChild(new PlayMusic());         thi
egret自定义控件
卡布奇兵的专栏
08-16 2314
在游戏中我们难免会用到自定义控件，比如多语言翻译等 egret的自定义控件目前需要和皮肤进行绑定，才可以使用，下面我们一步步来实现一个多语言支持的Label 一：首先，我们在自己的皮肤文件夹(可以是resource下面的任意文件夹)下面新建一个皮肤     比如这种 二：光有皮肤还不够，我们需要为这个皮肤写一个对应的实现类 module c
egret：list网格布局
weixin_30270889的博客
03-30 701
一、首先，搭建一个list item的皮肤，并绑定需要填充的数据 二、创建list列表，并填充数据 三、使用eui.TileLayout进行网格布局 设置垂直和水平之间的间隔，以及所设计的列数 最后将设置好的layout绑定到list.layout中 最终实现效果： 其实，在实现过程中，我犯了一个错误，也一并记录下来： 原本，我将创建好的list添加到一个...
egret自定义组件
weixin_30583563的博客
09-20 751
1.创建EUI组件并生成TS文件 2.EUI完成样式，并定义好id 3.在ts文件中定义命名空间(namespace)为ui 避免团队命名冲突，并继承于ItemRenderer(ItemRenderer继承于eui) 1 namespace ui{ 2 export class prizeItem extends eui.ItemRenderer{ 3 ...
egret新手指南--自定义组件
weixin_30732825的博客
02-20 794
怎么放一张图片进去？ 在eui_skins，新建文件，文件尾部用.exml的格式来命名，，名字根据用途来定义，简单明了即可， 然后刷新，，会出现下面的选项，，点击添加 点击源码查看，你会发现这是源码下面已经有了内容。点击设计，，把控件下面的Image往里面拖，， 添加资源名，，即是图片的名称，但是是以 _png 的格式 ,,一般图片不直接设置宽高...
Egret UI Editor 1.7 正式发布，支持UI动画编辑
weixin_41926242的博客
01-20 1455
各位开发者朋友过年好： 时光飞逝，猪去鼠来，我们即将辞别2019，迎来2020！ 在这个末尾时刻，我们以新产品版本的发布向2019说“再见”、道“珍重”！ 既然是告别，首先我们先总结下2019年引擎团队的工作重点，看看我们主要做了哪些事情，具体包括4个方面： • 2D 引擎维护与工作流优化，这一年2D引擎发布了20余个小版本，并发布了 Egret UI Editor。 • 不同平台的发布支持，除了...
Egret界面制作
WiGameFun的博客
01-05 1084
自学开发笔记，有兴趣的同学请关注微信WiGameFun，不定时分享游戏开发相关技术。有不对的地方烦请指点修正。​ Egret开发（六）界面制作 游戏开发中，UI界面的制作是其非常重要的一环，今天我们来学习一下Egret中UI界面的制作。 层级概念 开始之前让我们先想一想游戏中UI需要具有哪些特性： 这里，我们引入一个游戏场景的层级概念。比如游戏中我们控制的角色、NPC、障碍、BOSS等应该在一个...
Egret List嵌套
唐僧的专栏
10-31 1210
Egret List嵌套 如下图所示：我们要实现的样子，list的嵌套； 这里是对应的数据类型 我们在这里 先拆分下： 源代码下载地址 点击下载 最后一点 代码里面没有写 ，第一级List 的 高度要随着 你的数组 长度 增加 ...
egret.setInterval
最新发布
08-18
Egret.setInterval is a method in the Egret framework that allows you to execute a function repeatedly with a specified time interval. It is commonly used for creating animations or running tasks at regular intervals. The basic syntax for using Egret.setInterval is as follows: ``` egret.setInterval(callback: Function, thisObject: any, delay: number): number ``` - `callback`: The function to be executed at each interval. - `thisObject`: The object to which the "this" keyword refers to inside the callback function (optional). - `delay`: The time interval (in milliseconds) between each execution of the callback function. The method returns a unique identifier (number) that can be used to clear the interval later using the `egret.clearInterval` method. Here's an example usage of Egret.setInterval: ```typescript let intervalId = egret.setInterval(() => { console.log("Executing callback function"); }, this, 1000); ``` In this example, the callback function will be executed every 1000 milliseconds (1 second). The `this` keyword refers to the current object. The `intervalId` can be later used to clear the interval if needed using `egret.clearInterval(intervalId)`.
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值