使用传统swf的方式制作starling UI->StarlingSwf扩展UI

发表于2015-07-31
评论0 1k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594

该扩展是建立在StarlingSwf的基础之上进行编写,能够使你在Starling中开发UI变成简单并且高效,能够将你的注意力全部集中在程序逻辑当中.

目前我所做的项目已经使用了StarlingSwf以及该扩展,开发效率很高,针对复杂的UI也能轻松实现

该扩展的优势

         该扩展主要针对手机开发,当然做页游也可以。

         没有使用过传统swfUI的可以忽略此处,大家刚开始使用starling的时候通常都是swf+starling进行开发,而这个时候你的UI好多功能在手机上的效果那就不是一个惨字能表示的~比如拖拽,随便拖一下就把你的帧数降到20帧以下,更不要提现在手机上流行的滚动拖拽页面了,而本工具以及StarlingSwf就针对这部分人群,相信已经玩的很转的swfUI的你们接触应该不会很难,StarlingSwf将你熟悉的SwfStarling的方式展现给你,而该扩展将在你熟悉的基础上给你更简单方便的UI制作。


       内存方面:大家都知道手机的内存有限,很多时候UI不会进行缓存,然而UI使用完毕之后的销毁将会是一个头疼的问题,使用传统的swfUI的话,swf文件有时候哪怕你存在了一个引用都不会进行销毁,而其他的场景有可能就差这么点内存就蹦了。该扩展销毁资源的时候采用强制销毁模式,销毁的是你加载的资源,哪怕你正在使用也会销毁。销毁方式:那个类调用了setAssetSource就调用哪个类的dispose();

    销毁特性:通过组件进行引用的成员无需手动"XX=null"与无需手动"dispose()",组件内部会在销毁的时候自动销毁已同步的成员。


使用之前的准备步骤:

         首先呢,你需要了解StarlingSwf工具的基本使用。

你需要使用StarlingSwf将你的swf来进行导出,导出的3个文件建议放到一个文件夹下,例如:
          111.png 

在程序中使用:

         在使用该扩展之前你需要初始化两个地方:


  1. Swf.init(stage); //只有初始化该信息才能使用SwfMovieClip
  2.         JISConfig.windowStage = starling.display.DisplayObjectContainer; //只有设置该值才能使用JISWindow
复制代码


建立第一个Window

    比如我们第一个Window命名为JISMainUIWindow
  1.        //我们需要在构造函数中调用父类构造
  2.         super(“spr_TestWindow”,”test”);
  3.         //然后设置窗口资源
  4.         setAssetSource(File.applicationDirectory.resolvePath("assets/ui/test/"));
  5.         //调用show();
  6.         show();
复制代码

    这样window就开始加载并且在加载完毕之后显示了。
    其中super的两个参数第一个为window的导出链接名字
          222.png 
    第二个参数为文件的名字
          
           setAssetSource可以设置一个File,如果是文件夹的话,会扫描文件夹下所有文件,如果你的是web资源的话,你可以设置一个Url数组:
  1. [“../assets/ui/test/test.bytes”, “../assets/ui/test/test.png”, “../assets/ui/test/test.xml”]
复制代码

    如此,我们的第一个Window就创建好并能够显示了。

管理Window中的组件:

         我们的window中有个组件名字为_BtnList,如图:
       333.png 

    这个组件内部为4个按钮,命名分别为:_Btn_1_Btn_2_Btn_3_Btn_4

         按钮是一个mc,导出的也是mc,如图:
       444.png 

    我们可以使用JISCuttingButtonGroup进行管理我们的btn列表,如下代码:


  1. public var _BtnList:JISCuttingButtonGroup;
  2. public function JISMainUIWindow()
  3. {
  4.         _BtnList = new JISCuttingButtonGroup("_Btn_",JISButton);
  5.         super("spr_TestWindow", "test");
  6. setAssetSource(File.applicationDirectory.resolvePath("assets/ui/test/"));
  7. }
复制代码

      _BtnList必须为public类型,并且必须在setAssetSource之前实例化

JISCuttingButtonGroup的第一个参数为需要管理的组件的共有特征命名,第二个参数是设置组件有哪个类进行管理,初始化的时候会new该类,并将按钮显示对象通过setCurrDisplay传入进去。

进行管理之前我们的btn是不断闪烁的,管理之后我们的btn会有一个为选中状态,其他为正常状态

管理window中的对象:

         我们的示例文件中有一个空的影片剪辑和一个按钮,如图:
       555.png 
       666.png 
      

    由于我们的_ScrollTableSprite类型,为系统组件,所以不用提前new出来,我们的_AddTableCellBtn是自定义组件,所以需要事先new出来,代码如下:

  1. public var _ScrollTable:Sprite;
  2. public var _AddTableCellBtn:JISButton;
  3. public function JISMainUIWindow()
  4. {
  5.         _AddTableCellBtn = new JISButton();
  6.         super("spr_TestWindow", "test");
  7.         setAssetSource(File.applicationDirectory.resolvePath("assets/ui/test/"));
  8. }
  9. 现在我们创建一个JISScrollTable添加到_ScrollTable中,

  10. /** init会在资源加载完毕并且建立引用之后调用 */
  11. protected override function init():void
  12. {
  13.         tableScroll = new JISScrollTable();
  14.         _ScrollTable.addChild(tableScroll);
  15.         tableScroll.getTable().setCellInstanceClass(JISTableTestCell);//设置Table创建个显示对象类型
  16.         tableScroll.getTable().setPreferredWidth(100);//设置Table最大宽度
  17.         tableScroll.getTable().setPreferredCellWidth(48);//设置每个格子宽度,默认为JISTableTestCell#getDisplay()的宽度
  18.         tableScroll.getTable().setPreferredCellHeight(35);//设置每个格子高度,默认为JISTableTestCell#getDisplay()的高度
  19.         //tableScroll.getTable().setIsRow(true);//设置表格布局方式,true横向布局,false竖向布局
  20.         var cellList:Array = [];
  21.         for(;btnIndex<100;btnIndex++) cellList.push(btnIndex);
  22.         tableScroll.width = 100;//设置滚动区域的宽度
  23.         tableScroll.height = 200;//设置滚动区域的高度
  24.         tableScroll.getTable().setCellDatas(cellList,this.getSourceSwf());//创建格子内容
  25.         //按钮点击事件                                        _AddTableCellBtn.addEventListener(JISButton.BOTTON_CLICK,onBtnClickHandler);
  26. }
  27. private function onBtnClickHandler(e:Event):void
  28. {
  29.         tableScroll.getTable().addCellData(btnIndex++,this.getSourceSwf());//添加新的格子
  30. }
复制代码
      

      JISTableTestCell的代码:

  1. package
  2. {
  3.         import jis.ui.JISUISprite;
  4.         import jis.ui.component.JISITableCell;
  5.         
  6.         import lzm.starling.swf.Swf;
  7.         
  8.         import starling.display.DisplayObject;
  9.         import starling.text.TextField;
  10.         
  11.         
  12.         /**
  13.          * 
  14.          * @author jiessie 2013-11-27
  15.          */
  16.         public class JISTableTestCell extends JISUISprite implements JISITableCell
  17.         {
  18.                 public var _Text:TextField;
  19.                 public function JISTableTestCell(swf:Swf)
  20.                 {
  21.                         super("","");
  22.                         setCurrDisplay(swf.createSprite("spr_TableCell"));
  23.                 }
  24.                 
  25.                 public function setValue(value:*):void
  26.                 {
  27.                         _Text.text = value;
  28.                 }
  29.                 
  30.                 public override function getDisplay():DisplayObject
  31.                 {
  32.                         return this;
  33.                 }
  34.                 
  35.                 public function selected(select:Boolean=false):void
  36.                 {
  37.                 }
  38.                 
  39.                 public function getValue():*
  40.                 {
  41.                         return _Text.text;
  42.                 }
  43.                 
  44.                 public override function dispose():void
  45.                 {
  46.                 }
  47.         }
  48. }
复制代码

      我们可以看到JISTableTestCell中的构造函数需要一个Swf对象,而创建格子的参数中

  1. tableScroll.getTable().setCellDatas(cellList,this.getSourceSwf());//创建格子内容
  2. tableScroll.getTable().addCellData(btnIndex++,this.getSourceSwf());//添加新的格子
复制代码
         都会传入一个Swf对象,这就可以看出setCellDatasaddCellData会在创建JISTableTestCell的时候将swf传入。
             JISTableTestCell
继承JISUISprite说明JISTableTestCell可以使用该扩展进行管理UI,其中的setCurrDisplay(swf.createSprite("spr_TableCell"));为从资源库中创建一个sprite赋值给当前类,然后当前类会进行管理其中的内容,我们可以看下资源:

          777.png


        而我们的JISTableTestCell中也有个_Text属性。

         JISTableTestCell中的setValue()可以输出通过setCellDatasaddCellData中设置的值。如此一个支持触控滑动的滚动界面就完毕了,跟手机上绚丽的滑动效果一样哦。


自定义组件管理:

         如我们的演示资源中有个进度条面板,其中有_ProgressText_RowProgress_AddBtn_DecBtn

         其中_RowProgress是一个mc,其中存在一个背景和一个前景,前景我们命名为_Center,因为扩展提供的JISUIProgressManager需要进度条的名字为_Center,如图:

         888.png 
         该组件在window中的名字为_ProgressTest,如图:
     
 999.png 
        我们建立对应_ProgressTest的类,
     
  1. package
  2. {
  3.         import jis.ui.JISUIManager;
  4.         import jis.ui.component.JISButton;
  5.         import jis.ui.component.JISUIProgressManager;
  6.         
  7.         import starling.events.Event;
  8.         import starling.text.TextField;
  9.         
  10.         
  11.         /**
  12.          * 
  13.          * @author jiessie 2013-11-27
  14.          */
  15.         public class JISProgressTestUIManager extends JISUIManager
  16.         {
  17.                 public var _RowProgress:JISUIProgressManager;
  18.                 public var _AddBtn:JISButton;
  19.                 public var _DecBtn:JISButton;
  20.                 public var _ProgressText:TextField;
  21.                 
  22.                 private var currProgress:int = 0;
  23.                 
  24.                 public function JISProgressTestUIManager()
  25.                 {
  26.                         _RowProgress = new JISUIProgressManager();
  27.                         _AddBtn = new JISButton();
  28.                         _DecBtn = new JISButton();
  29.                         super();
  30.                 }
  31.                 
  32.                 protected override function init():void
  33.                 {
  34.                         _AddBtn.addEventListener(JISButton.BOTTON_CLICK,noxssAddHandler);
  35.                         _DecBtn.addEventListener(JISButton.BOTTON_CLICK,noxssDecHandler);
  36.                         updateProgress();
  37.                 }
  38.                 
  39.                 private function noxssAddHandler(e:Event):void
  40.                 {
  41.                         if(currProgress < 100)
  42.                         {
  43.                                 currProgress ++;
  44.                                 updateProgress();
  45.                         }
  46.                 }
  47.                 
  48.                 private function noxssDecHandler(e:Event):void
  49.                 {
  50.                         if(currProgress > 0)
  51.                         {
  52.                                 currProgress --;
  53.                                 updateProgress();
  54.                         }
  55.                 }
  56.                 
  57.                 private function updateProgress():void
  58.                 {
  59.                         _RowProgress.setProgress(currProgress,100);
  60.                         _ProgressText.text = currProgress+"/100";
  61.                 }
  62.         }
  63. }
复制代码
        你可以看到JISProgressTestUIManager是继承的JISUIManager,代表他只是管理UI,不会进行addChild操作

         JISProgressTestUIManager中的成员与mc中的成员命名一模一样,层级结构也很类似,只不过一个是代码的层级结构(对象包含属性),一个是显示对象的层级结构(mc包含mcTextField)


组件一览:

         
  1. JISButton  按钮,实际上就是包装了一个SwfMovieClip,每帧代表的含义参考静态DEFULT、GLIDE、CLICK、SELECTED、ENABLE所代表的帧数
  2.          
  3. JISButtonGroup JISButton集合管理,该集合管理的按钮同一时间只能选择一个 用法:初始化传入JISButton集合或者是通过setBtnList设置集合 当设置集合或者是选中按钮的时候会抛出CLICK_BTN事件和调用selectHandler函数,也可以当成组件来使用,会自动扫描子显示对象是否为SwfMovieClip,如果是则创建JISButton进行管理
  4.     
  5. JISCuttingButtonGroup 集成JISButtonGroup的JISDisplayCutting,会将切割的管理对象交由JISButtonGroup进行管理
  6.          
  7. JISDisplayCutting 切割显示对象管理,管理一个sprite中命名规则如:g1、g2、g3...这种以固定标识开头的显示对象 你可以通过初始化的时候传入标识字符和切割后进行管理的类,程序会在切割的时候自动创建对应的管理类,然后交由管理类来进行管理该显示对象 管理类必须为JISUIManager的子类 通过该类进行管理子对象的话,子对象必须实现JISIDisplayCuttingCell接口
  8.          
  9. JISIconManager 图标管理类,内部封装了JISImageSprite,使用该类的话Sprite中必须包含一个命名为_IconMovie的Sprite
  10.          
  11. JISIDisplayCuttingCell 只有实现该接口JISIDisplayCutting才能通过setSpliceMovieDatas、setSpliceMovieData、setSpliceMovieDatasForIndex、setSpliceForIndex、setSpliceForLast 进行动态添加内容
  12.          
  13. JISIDisplayCuttingCellData 数据实现该接口的话可以动态的将数据通过JISDisplayCutting进行赋值

  14.          JISImageSprite 图片容器,可以加载一个图片进行显示

  15.          JISISpriteManager 管理UI接口 通常情况下从swf中获取的显示对象是美术人员制作好的一整个UI,我们需要通过引用的方式来管理这些UI中零散的显示组件, 实现该接口的对象会由JISManagerSpriteUtil调用setCurrDisplay的方式设置一个显示对象, 如果你需要的只是简单的引用请不要addChild。 设置引用采用的为递归的方式,只要成员是实现该接口的类,就可以无限递归 规则: 1.子类属性名必须是public类型 2.子类属性名必须与显示对象name相同 3.如果不是系统组件的话需要在构造函数中new出来 示例: public var _Text:TextField; public var _Btn:JISButton; public function test() { _Btn = new JISButton(); } 对应swf的display display.getChildByName("_Text")为TextField
  16. display.getChildByName("_Btn")为SwfMovieClip
  17.          
  18. JISITableCell  添加表格中显示内容的话必须实现该接口
  19.          JISProgress 进度条,该进度条不为UI组件,如果想在UI中使用的话请使用JISUIProgressManager
  20.          JISScrollTable  能够滚动的Table,操作table内容的话请调用getTable()获取JISTable实例
  21.          JISSimpleLoaderSprite 加载模版,子类可以直接继承该类实现加载资源并显示的功能 使用方式:通过本类setAssetSource的方式设置加载内容,加载完毕之后会调用子类loadComplete方法
  22.          
  23. JISTable 表格
  24.          JISUIEffect 管理UI中的特效,目前只支持特效从xx帧播放到xx帧,每次调用start都会从指定起始帧开始播放
  25.          JISUIManager ui管理,该类管理的UI不会进行addChild操作,只会当作引用来进行管理
  26.          JISUIMovieClipManager 该类只是将管理的display转换为SwfMovieClip,方便使用
  27.          JISUIMovieClipSprite 该类只是将管理的display转换为SwfMovieClip,方便使用
  28.          JISUIProgressManager 管理UI中的进度条组件,UI需要具备命名为_Center的Display,当设置进度的时候会改变_Center的width或者height属性,建议_Center为Scale9Image 可选组建_Text类型为TextField,存在该组件的话,会在设置进度的时候赋值“当前进度/最大进度”
  29.          
  30. JISUISprite UI基础类,该类负责将swf中内容进行同步以及显示
  31.          JISUIWindow  窗口,可选按钮_Close,必须符合JISButton按钮标准,如果该按钮存在,那么点击该按钮会关闭窗口
  32.          JISUIWindowManager UI中管理窗口,比如设计UI的时候窗口中存在2级窗口,就可以使用该窗口进行管理,初始化的时候会关闭2级窗口 可选按钮_Close,必须符合JISButton按钮标准,如果该按钮存在,那么点击该按钮会关闭窗口
复制代码

通常情况下我们都是JISWindow或者是JISUISprite下包含一堆的JISUIManager以及子类,然后JISUIManager中再包含一堆的JISUIManager以及子类。

这么一种组件套组件下来就很简单的用程序管理一套复杂的UI了。

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台