守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 2898|回复: 0

[其他] 【UI组件】发布一款as3.0编写的轻量级游戏UI组件框架

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    52619
    钢镚
    1422

    开源英雄守望者

    发表于 2015-2-6 17:32:38 | 显示全部楼层 |阅读模式
    StormUI组件库是一套纯as3.0编写的轻量级游戏UI组件框架,它的体积很小;
    可以通过简答的调用,灵活的参数配置,简单的皮肤指定
    来轻松完成组件功能,而且您不必担心性能带来的问题;
    您还可以单出拿出其中的一个组件直接使用,而不必引入整个完整UI库,使用更加具有自主性;
    要实现自定义的皮肤类只需继承对应组件的Skin类,然后重写skinList函数即可;
    在xml中写入与fla文件中一致的元件类链接名就可以了。
    使用的前提是在fla中加载完所有的皮肤即可;

    现在初级版本已基本完成,从开始构思到现在断断续续的写了近半年的时间,由于公司也比较忙,
    有些代码写的也有些2,也欢迎指正\(^o^)/~
    有任何问题欢迎入群交流: 238680860

    写了个例子,由于很多fla中的组件素材都是临时拼凑看起来很丑,在此就不截图了呵呵:
    以后打算会加上类似Flex中的DataGrid、Tree组件等。
    目前已经初步写好的UI组件有:
    Alert
    Button
    CheckBox
    ComboBox
    Container(方便滚动条添加)
    Image
    List(自动支持滚动条)
    Paging(分页组件)
    Panel
    ProgressBar(参数配置方向)
    radioButton
    HSlider
    VSlider
    TabButton(互斥按钮组件)
    TextArea(自动滚动条)
    TileList

    代码可以直接在fb中运行。




    这个是基本测试类入口:
    StormUI.as


    1. package
    2. {
    3. import flash.display.Sprite;
    4. import flash.display.StageAlign;
    5. import flash.display.StageScaleMode;
    6. import flash.events.Event;
    7. import flash.events.MouseEvent;
    8. import flash.events.TextEvent;

    9. import net.libra.ui.stormUI.components.alert.Alert;
    10. import net.libra.ui.stormUI.components.button.Button;
    11. import net.libra.ui.stormUI.components.checkBox.CheckBox;
    12. import net.libra.ui.stormUI.components.checkBox.CheckBoxEvent;
    13. import net.libra.ui.stormUI.components.comboBox.ComboBox;
    14. import net.libra.ui.stormUI.components.list.List;
    15. import net.libra.ui.stormUI.components.list.ListEvent;
    16. import net.libra.ui.stormUI.components.paging.Paging;
    17. import net.libra.ui.stormUI.components.paging.PagingEvent;
    18. import net.libra.ui.stormUI.components.panel.Panel;
    19. import net.libra.ui.stormUI.components.progressBar.ProgressBar;
    20. import net.libra.ui.stormUI.components.radioButton.RadioButton;
    21. import net.libra.ui.stormUI.components.radioButton.RadioButtonEvent;
    22. import net.libra.ui.stormUI.components.slider.HSlider;
    23. import net.libra.ui.stormUI.components.slider.SLiderEvent;
    24. import net.libra.ui.stormUI.components.slider.VSlider;
    25. import net.libra.ui.stormUI.components.tabButton.TabButton;
    26. import net.libra.ui.stormUI.components.tabButton.TabButtonEvent;
    27. import net.libra.ui.stormUI.components.textArea.TextArea;
    28. import net.libra.ui.stormUI.components.tileList.TileList;
    29. import net.libra.ui.stormUI.utils.load.StormUILoader;

    30. import renders.MyListItemRender;
    31. import renders.MyPagingItemRender;
    32. import renders.MyTileListItemRender;

    33. import skins.MyAlertSkin;
    34. import skins.MyButtonSkin;
    35. import skins.MyCheckBoxSkin;
    36. import skins.MyComboBoxSkin;
    37. import skins.MyHSliderSkin;
    38. import skins.MyListSkin;
    39. import skins.MyPagingSkin;
    40. import skins.MyPanelSkin;
    41. import skins.MyProgressBarSkin;
    42. import skins.MyRadioButtonSkin;
    43. import skins.MyTabButtonSkin;
    44. import skins.MyTextAreaSkin;
    45. import skins.MyTileListSkin;
    46. import skins.MyVSliderSkin;

    47. /**
    48. * StormUI组件库
    49. * @author xuechong
    50. * @version v20121025.0.6.1
    51. * @date 2012.10.22
    52. * */
    53. [SWF(width="800", height="600")]
    54. public class StormUI extends Sprite
    55. {
    56. private var _btn:Button;
    57. private var _checkBox:CheckBox;
    58. private var _radioButton:RadioButton;
    59. private var _p:Panel;
    60. private var _bar:ProgressBar;
    61. private var _tabButton:TabButton;
    62. private var _hSlider:HSlider;
    63. private var _vSlider:VSlider;
    64. private var _ta:TextArea;
    65. private var _list:List;
    66. private var _tileList:TileList;
    67. private var _comboBox:ComboBox;
    68. private var _paging:Paging;

    69. public function StormUI()
    70. {
    71. stage.scaleMode = StageScaleMode.NO_SCALE;
    72. stage.align = StageAlign.TOP_LEFT;

    73. StormUILoader.startLoader(["stormUISkin.swf"], startTest);
    74. }

    75. private function startTest(event:Event):void
    76. {
    77. _btn = new Button(200, 0, 60, 22);
    78. _btn.label = "测试";
    79. _btn.enabled = true;
    80. _btn.setSkin(MyButtonSkin, 0);
    81. _btn.addEventListener(MouseEvent.CLICK, onDestroyHandler);
    82. this.addChild(_btn);

    83. //alertFunc(); //ok
    84. //buttonFunc();
    85. //checkBoxFunc(); //ok
    86. //comboBoxFunc(); //ok(skinOk)
    87. //listFunc(); //ok(skinOk)-container
    88. //pagingFunc(); //ok(skinOk)
    89. //panelFunc(); //ok(skinOk)
    90. //progressBarFunc(); //ok(skinOk)
    91. //radioButtonFunc(); //ok
    92. //sliderFunc(); //ok(skinOk)
    93. //tabButtonFunc(); //ok(skinOk)
    94. //textAreaFunc(); //ok(skinOk)
    95. //tileListFunc(); //ok(skinOk)
    96. }

    97. private function alertFunc():void
    98. {
    99. var spr:Sprite = new Sprite();
    100. this.addChild(spr);
    101. Alert.registerParent(spr);
    102. Alert.show(MyAlertSkin, 0, "SS", [a, b, c], false);
    103. function a(obj:Object):void
    104. {
    105. trace("aaa", obj);
    106. }
    107. function b(obj:Object):void
    108. {
    109. trace("bbb", obj);
    110. }
    111. function c(obj:Object):void
    112. {
    113. trace("ccc", obj);
    114. }
    115. }

    116. private function buttonFunc():void
    117. {
    118. var btn:Button = new Button(50, 50, 60, 22);
    119. btn.label = "皮肤";
    120. btn.enabled = true;
    121. btn.setSkin(MyButtonSkin, 0);
    122. this.addChild(btn);
    123. }

    124. private function checkBoxFunc():void
    125. {
    126. _checkBox = new CheckBox(50, 50, 20, 20);
    127. _checkBox.setSkin(MyCheckBoxSkin, 0);
    128. _checkBox.layout(1, 20, 20);
    129. _checkBox.labels = ["aa", "bb"];
    130. _checkBox.addEventListener(CheckBoxEvent.CHECKBOX_SELECTED, onCheckBoxChangeHandler);
    131. this.addChild(_checkBox);
    132. }

    133. private function comboBoxFunc():void
    134. {
    135. var arr:Array = [];
    136. for(var i:int = 0; i < 80; i++)
    137. {
    138. var obj:Object = new Object();
    139. obj.a = "a" + i;
    140. obj.b = "b" + i;
    141. obj.c = "c" + i;
    142. arr.push(obj);
    143. }
    144. _comboBox = new ComboBox(0, 0, 150, 100);
    145. _comboBox.itemRender = MyListItemRender;
    146. _comboBox.setSkin(MyComboBoxSkin, 0);
    147. _comboBox.seletedIndex = 3;
    148. _comboBox.itemHeight = 25;
    149. _comboBox.itemAmount = 5;
    150. _comboBox.scrollBarBold = 15;
    151. _comboBox.dataProvider = arr;
    152. this.addChild(_comboBox);
    153. _comboBox.open();
    154. }

    155. private function listFunc():void
    156. {
    157. var arr:Array = [];
    158. for(var j:int = 0; j < 20; j++)
    159. {
    160. var obj:Object = new Object();
    161. obj.a = "AAA" + j;
    162. obj.b = "BBB" + j;
    163. obj.c = "CCC" + j;
    164. arr.push(obj);
    165. }
    166. _list = new List(100, 50, 100, 200);
    167. _list.addEventListener(ListEvent.ITEM_OVER, onItemOverHandler);
    168. //_list.addEventListener(ListEvent.ITEM_OUT, onItemOutHandler);
    169. //_list.addEventListener(ListEvent.ITEM_CLICK, onItemClickHandler);
    170. _list.itemRender = MyListItemRender;
    171. _list.setSkin(MyListSkin, 0);
    172. _list.scrollBarV = true;
    173. _list.scrollBarBold = 15;
    174. _list.dataProvider = arr;
    175. _list.selectedIndex = 3;
    176. this.addChild(_list);
    177. }

    178. private function pagingFunc():void
    179. {
    180. _paging = new Paging(50, 50);
    181. _paging.itemRender = MyPagingItemRender;
    182. _paging.addEventListener(PagingEvent.CLICK, selectChangeHandler);
    183. //p.conRegister(null, upBtn, downBtn, null, null);
    184. _paging.setLayout(6, 1, 20);
    185. //p.autoSeleted = true;
    186. _paging.setSkin(MyPagingSkin, 0);
    187. this.addChild(_paging);
    188. var arr:Array = [];
    189. for(var i:int = 0; i < 100; i++)
    190. {
    191. arr.push({a:"AB" + i});
    192. }
    193. _paging.dataProvider = arr;
    194. }

    195. private function panelFunc():void
    196. {
    197. _p = new Panel();
    198. _p.x = 200;
    199. _p.y = 50;
    200. _p.width = 400;
    201. _p.height = 300;
    202. _p.cutw = 12;
    203. _p.cuth = 10;
    204. _p.contentOffsetX = 6;
    205. _p.contentOffsetY = -1;
    206. _p.drag = true;
    207. _p.openCenter = true;
    208. _p.setSkin(MyPanelSkin, 0);
    209. this.addChild(_p);
    210. }

    211. private function progressBarFunc():void
    212. {
    213. _bar = new ProgressBar(65, 8, 15, 55, 6, 50, ProgressBar.VERTICAL, ProgressBar.BOTTOM);
    214. _bar.setSkin(MyProgressBarSkin, 0);
    215. _bar.loaded = 30;
    216. _bar.total = 60;
    217. _bar.commit();
    218. this.addChild(_bar);
    219. }

    220. private function radioButtonFunc():void
    221. {
    222. _radioButton = new RadioButton(50, 50);
    223. _radioButton.addEventListener(RadioButtonEvent.SELECTED, onSelectedHandler);
    224. _radioButton.setSkin(MyRadioButtonSkin, 0);
    225. _radioButton.layout(3, 20, 20);
    226. _radioButton.selectedIndex = 3;
    227. _radioButton.labels = ["离别的车站AA", "离别的车站BB", "离别的车站CC", "离别的车站DD"];
    228. this.addChild(_radioButton);
    229. }

    230. private function sliderFunc():void
    231. {
    232. _hSlider = new HSlider(100, 50, 500, 10);
    233. _hSlider.addEventListener(SLiderEvent.SLIDER_CHANGE, onHSliderChangeHandler);
    234. _hSlider.stepSize = 1;
    235. _hSlider.showLabels = true;
    236. _hSlider.showTicks = true;
    237. _hSlider.showTips = true;
    238. _hSlider.min = 190;
    239. _hSlider.max = 200;
    240. _hSlider.text = 100;
    241. _hSlider.setSkin(MyHSliderSkin, 0);
    242. _hSlider.commit();
    243. this.addChild(_hSlider);
    244. _vSlider = new VSlider(100, 50, 10, 500);
    245. _vSlider.addEventListener(SLiderEvent.SLIDER_CHANGE, onVSliderChangeHandler);
    246. _vSlider.stepSize = 1;
    247. _vSlider.showLabels = true;
    248. _vSlider.showTicks = true;
    249. _vSlider.showTips = true;
    250. _vSlider.min = 190;
    251. _vSlider.max = 200;
    252. _vSlider.text = 100;
    253. _vSlider.setSkin(MyVSliderSkin, 0);
    254. _vSlider.commit();
    255. this.addChild(_vSlider);
    256. }

    257. private function tabButtonFunc():void
    258. {
    259. _tabButton = new TabButton(60, 0);
    260. _tabButton.layout(1, 1, -40);
    261. _tabButton.seletedIndex = 0;
    262. _tabButton.setSkin(MyTabButtonSkin, 0);
    263. _tabButton.addEventListener(TabButtonEvent.SELECTED, onTabClickHandler, false, 0, true);
    264. this.addChild(_tabButton);
    265. }

    266. private function textAreaFunc():void
    267. {
    268. _ta = new TextArea(100, 100, 200, 200, true, true);
    269. _ta.setSkin(MyTextAreaSkin, 0);
    270. _ta.addEventListener(TextEvent.LINK, onTextLinkHandler);
    271. for(var i:int = 0; i < 50; i++)
    272. {
    273. _ta.htmlText += "<font color='#00FFFF'><a href='event:"+ i +"'>查看战报" + i + "</a></font>\n";
    274. }
    275. this.addChild(_ta);
    276. }

    277. private function tileListFunc():void
    278. {
    279. var arr:Array = [];
    280. for(var i:int = 0; i < 20; i++)
    281. {
    282. var obj:Object = new Object();
    283. obj.a = "a" + i;
    284. obj.b = "b" + i;
    285. obj.c = "c" + i;
    286. arr.push(obj);
    287. }
    288. _tileList = new TileList(300, 50, 400, 250);
    289. _tileList.itemRender = MyTileListItemRender;
    290. _tileList.setSkin(MyTileListSkin, 0);
    291. _tileList.layout(12);
    292. _tileList.dataProvider = arr;
    293. _tileList.seletedIndex = 11;
    294. this.addChild(_tileList);
    295. }

    296. ///////////////////////////////////////
    297. private function onCheckBoxChangeHandler(event:CheckBoxEvent):void
    298. {
    299. trace(_checkBox.checkSelected(event.id));
    300. }

    301. private function onSelectedHandler(event:RadioButtonEvent):void
    302. {
    303. trace(event.selectedIndex);
    304. }

    305. private function onTabClickHandler(event:TabButtonEvent):void
    306. {
    307. trace(event.selectedIndex);
    308. }

    309. private function onHSliderChangeHandler(event:SLiderEvent):void
    310. {
    311. trace(_hSlider.text);
    312. }

    313. private function onVSliderChangeHandler(event:SLiderEvent):void
    314. {
    315. trace(_vSlider.text);
    316. }

    317. private function onTextLinkHandler(event:TextEvent):void
    318. {
    319. trace(event.text);
    320. }

    321. private function onItemOverHandler(event:ListEvent):void
    322. {
    323. trace("移入", event.itemId, event.selectedIndex, event.item, event.data, event.selectType);
    324. }

    325. private function selectChangeHandler(event:PagingEvent):void
    326. {
    327. if(event.data != null)
    328. {

    329. }
    330. }

    331. private function onDestroyHandler(event:MouseEvent):void
    332. {
    333. _btn.removeEventListener(MouseEvent.CLICK, onDestroyHandler);
    334. _btn.destroy();
    335. _btn = null;

    336. //Alert.destroy();

    337. //_checkBox.destroy();
    338. //_checkBox.removeEventListener(CheckBoxEvent.CHECKBOX_SELECTED, onCheckBoxChangeHandler);
    339. //_checkBox = null;

    340. //_radioButton.destroy();
    341. //_radioButton.removeEventListener(RadioButtonEvent.SELECTED, onSelectedHandler);
    342. //_radioButton = null;

    343. //_p.destroy();
    344. //_p = null;

    345. //_bar.dectroy();
    346. //_bar = null;

    347. //_tabButton.removeEventListener(TabButtonEvent.SELECTED, onTabClickHandler);
    348. //_tabButton.destroy();
    349. //_tabButton = null;

    350. //_hSlider.destroy();
    351. //_hSlider.removeEventListener(SLiderEvent.SLIDER_CHANGE, onHSliderChangeHandler);
    352. //_hSlider = null;
    353. //_vSlider.destroy();
    354. //_vSlider.removeEventListener(SLiderEvent.SLIDER_CHANGE, onVSliderChangeHandler);
    355. //_vSlider = null;

    356. //_ta.destroy();
    357. //_ta.removeEventListener(TextEvent.LINK, onTextLinkHandler);
    358. //_ta = null;

    359. //_list.removeEventListener(ListEvent.ITEM_OVER, onItemOverHandler);
    360. //_list.destroy();
    361. //_list = null;

    362. //_tileList.destroy();
    363. //_tileList = null;

    364. //_comboBox.destroy();
    365. //_comboBox = null;

    366. //_paging.removeEventListener(PagingEvent.CLICK, selectChangeHandler);
    367. //_paging.destroy();
    368. //_paging = null;
    369. }

    370. }
    371. }
    复制代码


    本文来自:http://bbs.9ria.com/thread-156497-1-1.html

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2024-3-28 17:46 , Processed in 0.047143 second(s), 36 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表