Egret社区
本帖最后由 ywx620 于 2018-9-26 15:59 编辑

# egretMoon
这是为白鹭引擎制作的一套纯代码的UI方案,用户可以通过修改颜色值得到自己喜欢的主题
此套方案有自己的一套独立moon.MoonEvent事件来管理组件的变化数据
使用时只要用addEvent()来帧听变化就可以得到数据

# 此套方案有一些常用的组件如(可独立使用)
# 类文件MoonTheme.ts
* moon.BasicView                           基础窗
* moon.BasicButton                        基础按钮(只有两个皮肤)
* moon.MoreSkinButton         多个皮肤按钮
* moon.SwitchButtion             开关按钮
* moon.RadioButtonBar         单选框(默认是竖版,可以通过layout方法设置为横版)
* moon.CheckBoxBar                        多选框(默认是竖版,可以通过layout方法设置为横版)
* moon.SliderBar                                滑动条(默认是竖版,可以通过layout方法设置为横版)
* moon.ScrollBar                            滚动条(默认是竖版,可以通过layout方法设置为横版)
* moon.ListBar                           列表条 (默认是竖版,不能设置横版)
* moon.ProgressBar                        进度条(默认是不显示进度的百分比,可以通过showText方法显示)
* moon.PanelBar                               面板(有标题栏与内容栏组成)
* moon.TabbarBar                            选项栏按钮组件(子文件必须是MoreSkinButton)
* moon.PrevNextBar                        上下页组件(此组件是左右各一个箭按按钮用于上下页切换)
* moon.PanelMoreManager        面板控制器(可以左右滑动来切换不同面板)
* moon.MoonUI                                  里面有很多方法可以直接得到Sprite形状,如getRect,getCircle,getRoundRect等等
* moon.LogManager                         显示LOG工具提供两种方法log只显示最新的一条,logMessage可显示多条
* moon.TipsManager                        TIPS显示管理,如单击按钮可在按钮上方显示一条TIPS说明
* moon.AlertManager                        提示管理,提供三种方案,自动,手动,滚动
* moon.MoonEvent                            事件管理,提供事件广播dispEvent,事件帧听addEvent,删除事件removeEvent
* moon.Label                                     统一文本类型字体等
* moon.AlertBar                               手动关闭的提示或警告
* moon.AlertAutoBar                        自动关闭的提示或警告
* moon.AlertRollBar                        滚动关闭的提示或警告
* moon.GameLoad                          游戏素材加载时的界面
* moon.GameData                          游戏中预先保存数据如,stageWidth,stageHeight
* moon.MoonDisplayObject           可示对象(可修改背景色与边框)

# 图片的管理模块(需要MoonTheme类支持)
# 类文件MoonImage.ts
* moon.Image                               基本的图片管理类
* moon.BasicContainer                基础图片容器(统一的增加删除查找下一个等方法)
* moon.ImageChartlet                  图片贴图类(用一张小图拼成一个大的背景图)
* moon.ImageFollow                     图像残影跟随类(当图片运动时后面有残影跟随着)
* moon.ImageAnimation               图片动画类(使用一张张独立图片制作动画的类)
* moon.ImageLayout                    图像布局类(图片上下局中或离舞台上下左右多小像素点)
* moon.ImageLoopPlay         控制图像循环播放(一般用于两张相同的背景一直循环使用)

# 基本小游戏各个模块(需要MoonTheme类支持)
# 类文件MoonGame.ts
* moon.BasicGamePanel               基本的游戏逻辑处理类
* moon.BasicGameStart                基本的游戏开始处理类
* moon.BasicGameOver                基本的游戏结束处理类
* moon.BasicGameSet                  基本的游戏设置处理类
* moon.BasicGameRank               基本的游戏分数排名处理类

# 接口
* ILayout 所有设置排版的方法都继承了接口ILayout,接受两个参数type类型与interval间隔
类型提供了两种竖版Const.VERTICAL和横版Const.HORIZONTAL
* IItem 所有需要增加或删除自己子文件的接口都继承此接口
* IOnoff 开关接口

# 其它说明
* MoreSkinButton同一个按钮可以使用多个皮肤,如开始游戏,再来一次等,就可用一个按钮不同皮肤
此外MoreSkinButton可以设置toggleSwitch为true来使用两种状态自动切换
* LogManager使用时先在Main主类中调用一次moon.LogManager.getIns().init(this.stage);
然后可以直接使用trace,与traceSimple来分别调用logMessage方法与log方法
* TipsManager使用时先在Main主类中调用一次moon.TipsManager.getIns().init(this.stage);
然后才可以使用moon.TipsManager.getIns().simpleTips()
* AlertManager使用时先在Main主类中调用一次moon.AlertManager.getIns().init(this.stage);
AlertManager中有三个提示方法alertAuto()可设定几秒自动关闭的提示,alertHand()需要手动点关闭的提示,alertRoll()滚动显示完后再自己动关闭的提示




图片展示使用纯代码成生,没有使用任何外部素材资源
moonDemo.jpg

画图工具纯代码写,没有使用外部资源

画图工具纯代码写,没有使用外部资源

2048纯代码,没有使用外部资源

2048纯代码,没有使用外部资源

没有使用外部资源

没有使用外部资源

没有使用外部资源

没有使用外部资源

微信图片_20180209184613.png 微信图片_20180209184608.png

20180416更新,新加入一个游戏积分排行榜
只要new出排行榜就可以,不需要任务外部资源,代码会自动画出排行榜。
排行榜是模拟微信跳一跳的样式写的。
var rank:moon.BasicGameRank=new moon.BasicGameRank;
this.addChild(rank);//直接加载出来就可以看到
rank.update(data);//更新排行榜
具体分数更新需要自己去加,因为各平台或自己服务端数据都是不一样的。
需要根据实际情况自己修改update()中的方法。
最好是继承BasicGameRank,然后复写update()方法。默认是使用50条件记录,滚动条是使用本套代码自带的
var scrollBar:moon.ScrollBar=new moon.ScrollBar();
效果图
rank.jpg

20180418更新,新加入loading的界面 load.jpg
只要把下面的代码覆盖到LoadingUI.ts里面就可以
[AppleScript] 纯文本查看 复制代码
class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE,this.addToStage,this);
    }

    private gameLoad:moon.GameLoad;

    private addToStage():void {
        this.removeEventListener(egret.Event.ADDED_TO_STAGE,this.addToStage,this);
        this.gameLoad = new moon.GameLoad;
        this.addChild(this.gameLoad);
    }

    public onProgress(current: number, total: number): void {
        this.gameLoad.update(current/total);
    }
}


20180606更新,新加入ImageLoopPlay类,用于控制图像循环播放(一般用于两张相同的背景一直循环使用)
此类可以控制图像上下左右循环移动。
loop.jpg

20180919更新,新加入ListBar类,用于管理列表使用
QQ图片20180919135540.png

20180926更新,新加入PrevNextBar类,用于上下页切换的使用
QQ图片20180926112913.png
演示地址

手机扫描二维码展示

联图二维码.png

基本创建方法

创建基础按钮(方形)
var btn:moon.BasicButton=new moon.BasicButton();
btn.label="按钮";

创建圆形按钮
var normal:Sprite=moon.Skin.randomCircle;//创建随机色的圆皮肤
var down:Sprite=moon.Skin.randomCircle;//创建随机色的圆皮肤
var btn:moon.BasicButton=new moon.BasicButton(normal,down);
btn.labelCircle="圆按钮";

创建开关按钮
var btn:moon.SwitchButtion=new moon.SwitchButtion();
btn.addEventListener(egret.TouchEvent.TOUCH_TAP,onClick,this)

创建滑动条
var sliderBar:moon.SliderBar=new moon.SliderBar();
sliderBar.value=0;

创建滚动条
var scrollBar:moon.ScrollBar=new moon.ScrollBar();
var bitmap:moon.Scale9Image=new moon.Scale9Image("bg_jpg");
scrollBar.target=bitmap;

创建上下页
var pnBar:moon.PrevNextBar=new moon.PrevNextBar();
pnBar.total=5;//总共5页
pnBar.interval=280;//上下箭头的水平距离

创建进度条
var progressBar:moon.ProgressBar=new moon.ProgressBar();
progressBar.value=0.5;

创建选项栏组件
var names:any[]=["标题1","标题2","标题3","标题4","标题5"];
var tabbar:moon.TabbarBar=new moon.TabbarBar;for(var i:number=0;i<names.length;i++){
         var skins:any[]=[moon.Skin.buttonNormal,moon.Skin.buttonDown,moon.Skin.buttonDown,moon.Skin.buttonDown]
         var btn:moon.MoreSkinButton=new moon.MoreSkinButton(skins);
         btn.label=names;
         tabbar.addItem(btn);
}
tabbar.selectIndex=0;
tabbar.layout(moon.Const.HORIZONTAL,10);

创建可自由修改颜色的对象(可选方形,圆角方形,圆形)
var rect=new moon.MoonDisplayObject;
rect.type=moon.Const.SHAPE_CIRCLE
rect.data={r:50,c:moon.Color.random}
rect.color=0XFF0000;//创建形状后,可以自由修改它的颜色

可以自己手动增加外部皮肤
var normal:moon.Scale9Image=new moon.Scale9Image("btn1_png");
var down:moon.Scale9Image=new moon.Scale9Image("btn2_png");
var btn:moon.BasicButton=new moon.BasicButton(normal,down);
btn.skinAutoScale=false;//不自动改变大小

更多内容和DEMO可下载请看下面的
对了需要回复才可以看得见哦!
游客,如果您要查看本帖隐藏内容请回复





分享到 :
25 人收藏

406 个回复

倒序浏览
土匪来了快跑  登堂入室 | 2018-2-4 17:18:44
??
土匪来了快跑  登堂入室 | 2018-2-4 17:19:04
404
土匪来了快跑  登堂入室 | 2018-2-4 17:19:10
404
ywx620  略有小成 | 2018-2-5 09:18:22
ywx620  略有小成 | 2018-2-7 21:31:23
新加了一些展示DEMO扫一下二维码可以在手机里面查看
blubobo  初学乍练 | 2018-2-7 23:03:44
卡多谢分享
Jom  登堂入室 | 2018-2-8 09:29:38
jax  圆转纯熟 | 2018-2-8 11:32:25
这种是用在什么场景呢
wxsperfect  登堂入室 | 2018-2-8 17:04:42
学习
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2019 Comsenz Inc.

返回顶部