eos3tion/exportuifromflash

导出从Adobe Flash(Animate)中制作的控件和数据

ExportUIFromFlash

项目类型为jsfl项目，开发工具为Visual Studio Code，和Adobe Animate CC

项目目的

按照junyougame原有通过flash开发UI的工作流，
导出从Adobe Flash(Animate)中制作的控件和数据给其他非AS3项目使用

文件结构

┌Main.jsfl 为项目入口，配置项目各种常量路径
├src\ 使用TypeScript编写的脚本
│ ├Facade.ts 对项目使用的控件Parser，面板的代码生成器进行绑定
│ ├ExtendProto.ts 扩展ECMA3中的基本数据类型
│ ├Solution.ts 项目的主体代码
│ ├core\ 用于存放主要的数据类型
│ ├generators\ 用于放代码生成器的代码
│ ├parsers\ 用于放控件的处理脚本
│ └utils\ 用于放项目用到的工具类
├dist\ 使用tsc的发布路径，目录结构同src，代码为生成后的js代码
├templates\ 用于放代码生成器的代码模板
└typings\tsd.d.ts 中加了项目中用的脚本定义

exportuifromflash's Issues

增加一个配置，可以直接导出面板数据

目前面板数据，通过代码生成器生成typescript类

import sui = junyou.sui;
export class BagPanel extends sui.Panel {

    public bg: sui.ScaleBitmap;
	public tab0: sui.Button;
	public tab1: sui.Button;
	public helpBtn: sui.Button;
	public closeBtn: sui.Button;
	public ronglianBtn: sui.Button;
	public addBtn: sui.Button;
	public numTxt: egret.TextField;
	public scrollBar: sui.ScrollBar;
	public position: egret.Rectangle;

    constructor() {
        super();
    }

    protected init() {
        this._key = "bag";
        this._className = "ui.bag.BagPanel";
        this._baseRect = new egret.Rectangle(0,0,480,800);
        
    }

    protected bindComponents() {
		var manager = singleton(sui.SuiResManager);
		var dis:any;
		dis = manager.createDisplayObject("lib", "bmd.scale9.PanelBg1", ["bg", 0, 0, 480, 800, 0]);
		this.addChild(dis);
		this.bg = dis;
		dis = manager.createDisplayObject("lib", "bmd.scale9.Bg1", [0, 27, 61, 430, 651.05, 0]);
		this.addChild(dis);
		dis = manager.createDisplayObject("lib", "bmd.scale9.Bg2", [0, 63, 118, 362, 450, 0]);
		this.addChild(dis);
		dis = manager.createDisplayObject("lib", "ui.tab.TabBtn", ["tab0", 75, 87, 86, 30, 0]);
		this.addChild(dis);
		this.tab0 = dis;
		dis = manager.createDisplayObject("lib", "ui.tab.TabBtn", ["tab1", 165, 87, 86, 30, 0]);
		this.addChild(dis);
		this.tab1 = dis;
		dis = manager.createBitmapByData(this._key, [0, [0, 70, 627, 351, 9, 0], 5]);
		this.addChild(dis);
		dis = manager.createBitmapByData(this._key, [0, [0, 42, 635, 396, 61, 0], 4]);
		this.addChild(dis);
		dis = manager.createDisplayObject("lib", "ui.btn.HelpBtn", ["helpBtn", 8, 10, 43, 40, 0]);
		this.addChild(dis);
		this.helpBtn = dis;
		dis = manager.createDisplayObject("lib", "ui.btn.ClosBtn", ["closeBtn", 406, 9, 66, 42, 0]);
		this.addChild(dis);
		this.closeBtn = dis;
		dis = manager.createDisplayObject("lib", "ui.btn.Btn1", ["ronglianBtn", 179, 645, 127, 42, 0]);
		this.addChild(dis);
		this.ronglianBtn = dis;
		dis = manager.createDisplayObject("lib", "ui.btn.AddBtn", ["addBtn", 381, 581, 35, 35, 0]);
		this.addChild(dis);
		this.addBtn = dis;
		dis = manager.createTextFieldByData(this._key, [1, ["numTxt", 259, 589, 120, 18, 0], [1, "宋体", 1, "#FFFF99", 14, 2, 0, 0, 0]]);
		this.addChild(dis);
		this.numTxt = dis;
		dis = manager.createDisplayObject("lib", "ui.scroll.ScrollBar1", ["scrollBar", 402, 128, 14, 166, 0]);
		this.addChild(dis);
		this.scrollBar = dis;
		dis = manager.createBitmapByData(this._key, [0, [0, 96, 91, 43, 26, 0], 1]);
		this.addChild(dis);
		dis = manager.createBitmapByData(this._key, [0, [0, 185, 91, 43, 26, 0], 0]);
		this.addChild(dis);
		dis = manager.createBitmapByData(this._key, [0, [0, 222, 5, 50, 26, 0], 2]);
		this.addChild(dis);
		dis = manager.createBitmapByData(this._key, [0, [0, 219, 653, 45, 26, 0], 3]);
		this.addChild(dis);
		this.position = new egret.Rectangle(80,130,340,430);
    }
}

生成的类会产生大量重复的如 manager.createBitmapByData 这样的代码
只需要如 "lib", "ui.scroll.ScrollBar1", ["scrollBar", 402, 128, 14, 166, 0] 这些面板数据
然后将面板数据直接导入到数据json文件中
而对应面板只做一个interface，根据typescript特性interface是不会生成javascript代码的
从而减少项目整体字符串输出
如

export interface BagPanel extends sui.Panel {
	bg: sui.ScaleBitmap;
	tab0: sui.Button;
	tab1: sui.Button;
	helpBtn: sui.Button;
	closeBtn: sui.Button;
	ronglianBtn: sui.Button;
	addBtn: sui.Button;
	numTxt: egret.TextField;
	scrollBar: sui.ScrollBar;
	position: egret.Rectangle;
}

增加Button，MovieClip控件不需要使用导出名的方法

很多情况下，按钮仅仅只作为单一界面使用，并不需要运行时共享调用。这个时候一定要命一个导出名，比较浪费字符串。同时还约束了导出名
直接利用 symbolType是否为button 进行判断是否为按钮
MovieCip则基于导出的控件中，是否有多帧的 movie clip

支持AnimatorCC中如果被标记为JPEG格式导出的，使用JPEG进行装箱

目前所有图片，无论原始图片是什么格式，最终都会按png格式进行装箱，最终再用pngquant处理为png8，但是并非所有图片都有alpha通道，也并非所有图片需要很高的精度
AnimatorCC中，可以将图片设置为JPEG的导出格式，将这类格式的图片用另外一张位图进行导出，并评估文件大小，如果 jpg+png + 2*100(差不多是一次http请求的头的加载) 大小会大于使用单张png的图片，则使用单张，否则使用两张图片
研究此方案的可行性

可以将图片生成webp格式的文件

1. 在生成图片的同时，使用cwebp 生成对应版本的webp格式文件
   https://github.com/webmproject/libwebp
2. 游戏启动时，检查浏览器是否原生支持webp格式

   function checkWebp() {
       try {
           return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
       } catch (err) {
           return false;
       }
   }

3. 如果浏览器支持webp（Android手机高版本浏览器原生支持webp），则加载webp格式资源，否则加载对应jpg/png

新建一个jsfl项目，用于检查哪些图片适用于JPEG导出

遍历图片，检查图片是透明通道是否有半透明的像素，如果有，则将图片导出规则改为png
否则使用jpg导出

增加对多帧MovieClip的处理

要求

1. 能对每个关键帧提取元件
2. 元件如果和上一个关键帧相同，能识别出是同一个元件，只在对应关键帧对属性调整

优化MC等容器型控件的处理

增加对MC这些容器型控件，子控件的代码提示支持
目前MC型控件的类型统一为 MovieClip，对于控件中子控件的调用采取的

let mc:MovieClip = xxxxx;
mc["childCom"] 
(mc as any).childCom

这两种不友好的方式，不利于重构和错误提示

针对MC这类控件的生成为

export interface ComponentA extends MovieClip {
   childComA:egret.DisplayObject;
   childComB:Button;
   ....
}

这样的类型