egret GUI 和 egret Wing 是我看到h5 最渣的设计

一个抄袭FlexLite抄的连自己思想都没有,别人精髓都不懂的垃圾框架。也不学学MornUI,好歹有点自己想法。

先来个最小可用集合吧:

1. egret create legogame --type gui。生成一个带gui的项目。

2. 用webstorm打开这个傻逼项目。

3. 修改theme.thm:

{
    "skins":
    {
        "egret.gui.Button":"skins.simple.ButtonSkin"
    }
}

4. 修改resource.json

{
    "groups":[
    {
        "keys":"button_disabled_png,button_down_png,button_normal_png,bgImage",
        "name":"preload"
    }],
    "resources":[
    {
        "name":"button_disabled_png",
        "scale9grid":"3,4,14,13",
        "type":"image",
        "url":"assets/simple/NormalButton/button_disabled.png"
    },
    {
        "name":"button_down_png",
        "scale9grid":"4,3,13,14",
        "type":"image",
        "url":"assets/simple/NormalButton/button_down.png"
    },
    {
        "name":"button_normal_png",
        "scale9grid":"4,3,13,15",
        "type":"image",
        "url":"assets/simple/NormalButton/button_normal.png"
    },
    {
        "name":"bgImage",
        "type":"image",
        "url":"assets/bg.jpg"
    }
    ]
}

5. 进入resource/assets/simple目录,保留NormalButton,其他删掉。进入src/skins/simple/ 除了buttonskin.exml,其他删掉。

6. 进入ShowcaseSkin.exml, 删除List,得到:

<?xml version=‘1.0‘ encoding=‘utf-8‘?>
<e:Skin width="480" height="800" xmlns:e="http://ns.egret-labs.org/egret" xmlns:w="http://ns.egret-labs.org/wing">
    <w:HostComponent name="egret.gui.SkinnableComponent"/>
    <w:Declarations/>
    <e:states>
        <e:State name="normal"/>
        <e:State name="disabled"/>a
    </e:states>
    <e:Button id="btnShowMessage" label="click" y="50" horizontalCenter="0"/>
</e:Skin>

7. 进入Showcase.ts,除了button,其他都删除:

class Showcase extends egret.gui.SkinnableComponent {

    public constructor() {
        super();
        this.skinName = "skins.scene.ShowcaseSkin";
    }

    public btnShowMessage:egret.gui.Button;

    public partAdded(partName:string, instance:any):void {
        super.partAdded(partName, instance);
    }
}

8. 在legogame目录下面,运行egret build, egret startserver。得到只有一个button的结果。

这个就是最小可用集:Mininum available set。

继续研究resource.json和theme.thm是不是多余的。还有那个buttonskin.exml 文件

时间: 2024-08-11 05:44:47

egret GUI 和 egret Wing 是我看到h5 最渣的设计的相关文章

Egret之egret.gui.List的使用教程

工具:EgretWing 说明: List                   列表组件 ItemRender       列表Item组件 这里只讲解一下如何绑定数据到List以及对应到ItemRender展示. /**  * Created by haocao on 15/6/25.  */ class  FriendsListCase extends egret.gui.SkinnableComponent{     public constructor(){         super(

Egret学习笔记 (Egret打飞机-2.开始游戏)

打开 Egret Wing,新建一个Egret游戏项目,然后删掉默认生成的createGameScene方法里面的东西 然后新建一个BeginScene.ts的文件,作为我们的游戏的第一个场景 1 class BeginScene extends egret.DisplayObjectContainer { 2 public constructor() { 3 super(); 4 this.addEventListener(egret.Event.ADDED_TO_STAGE, this.In

egret GUI 文本混排+文本链接的聊天解决方案【取巧法】

ui方面: <e:Scroller verticalScrollPolicy="auto" width="468" height="620" x="6" y="110"> <e:Group id="messageGroup"> <e:Label id="message_area" width="468" height=

白鹭Egret学习之egret.ImageLoader.load的一个小问题(#1011:流错误)

egret.ImageLoader.load的路径问题 本来这个问题只是一个小问题,但是是学习Egret路途上遇到的第一个困惑了一段时间的问题,也花了一段时间去进行各种尝试.调试想要解决问题.同时也是由于自身基础不够扎实导致,所以记录下来警醒自己. 使用egret.ImageLoader.load加载ImageLoader的资源,其默认路径为工程所在路径,假设工程TEST下有以下资源:TEST->resource->assets->123.jpeg,如下图: 现在想要创建一个位图对象,使

Egret学习笔记 (Egret打飞机-1.大致思路)

大致看了一遍Egret的官方文档,就开始打算使用Egret来开发一个打飞机游戏. 首先来捋一捋思路,先来看一看一个打飞机游戏的图片 基本上一个打飞机游戏分为 开始游戏   ----------进入游戏的第一个显示对象.必须点击开始游戏界面的开始游戏,才能进入游戏去开始玩 背景   ------背景我们就用两个图片来循环滚动 敌机  -------随机出现N个敌机,并且会不停的发射子弹 猪脚 -------猪脚也会不停的发射子弹 敌人的子弹  ------由敌机发出的子弹,向下飞 猪脚的子弹  

egret笔记之gui内设置动画效果

EgretWing->设计->窗口->动画 可以打开动画编辑面版. 首先需要针对当前UI界面设置各种状态.我们简单的设置 [close]:代表当前UI界面处于不可见状态. [open]:代表当前UI界面处于可见状态. 在动画面版,选择需要增加动画的组件,添加动画效果: 动画效果设置完毕后,创建对于的ts文件.   public getCurrentSkinState():string     {         if(this.parent) {             // 可见   

egret学习记录

最近h5小游戏比较流行,本来我是做cocos2dx的,一开始想用它的js版. 可惜看着js真是头大.于是选择了egret,egret采用typescript,学过面向对象的,上手还是比较快的,而且api比较清晰. 这里记录一下遇到的问题. 1.Error: #1006: 提供的 DisplayObject 必须是调用者的子级 如: parent.removeChild(child)其实child不是parent的子节点 一种情况是添加到了stage上,误以为是类自身上. 一种情况是child实例

简单介绍了解白鹭引擎Egret

(一)关于白鹭引擎Egret Egret引擎是一个开源免费的游戏框架,用于构建二维游戏.演示程序和其他图形界面交互应用等.Egret使用TypeScript脚本语言开发.当游戏完成最终的打包后,可以将程序转换为HTML5游戏.实现跨平台特性. Egret不仅仅是一个基于HTML5技术的游戏引擎,我们的产品线中除了Egret引擎还提供了很多辅助游戏开发的工具.准确的来说,Egret是一套游戏开发的解决方案.你可以使用Egret引擎来帮助你开发HTML5游戏,并运行在手机和PC端的浏览器中,同时也你

Egret的VS环境搭配

安装配置 首先我们需要安装VS,这里我安装的是2013的版本,然后我们需要去Egret的官网下载Egret Engine.Egret Wing及Egret VS并进行安装,同时下载Google Chrome和Egret Inspector并安装用于调试.当然Egret提供的其它软件最好都安装一下. 创建项目 Egret提供的Wing现在已经是一个集成的IDE了,我们打开Wing在这里进行新项目的创建,为什么不从VS中创建呢?因为我这里直接从VS中创建的项目在调试时会报404错误,应该是官方的Eg