Code Monkey home page Code Monkey logo

cocos_creator_proj_base's Introduction

cocos_creator_proj_base

cocos creator项目基础类库,包括socket, http网络连接,资源加载与管理,ui加载与管理,事件系统,音效播放,常用控件如listview,scrollview等

使用说明

1.ListView, 循环滚动列表,固定尺寸item, 屏幕可见范围外item会回收等待下次复用。支持横向,竖向,多行多列。

* 初始化,传入item模板节点(cc.Node),设置各种回调函数
```
@property(cc.ScrollView)
 scrollview: cc.ScrollView = null;

 @property(cc.Node)
 mask: cc.Node = null;

 @property(cc.Node)
 content: cc.Node = null;

 @property(cc.Node)
 item_tpl:cc.Node = null;

 private list:ListView.ListView;

 on_show(...params)
 {
     this.list = new ListView.ListView({
         scrollview:this.scrollview,
         mask:this.mask,
         content:this.content,
         item_tpl:this.item_tpl,
         cb_host:this,
         item_setter:this.list_item_setter,
         select_cb:this.list_item_onselect,
         recycle_cb:this.list_item_onrecycle,
         column:1,
         gap_y:10,
         direction:ListView.ListViewDir.Vertical,
     });
     this.list.set_data(Consts.AllStages);
 }
```
* 设置item回调函数
```
list_item_setter(item:cc.Node, desc:Consts.StageDesc, index:number):void
 {
     const isOpen = appdata.getStageOpenState(desc.stage, desc.unlockcond, desc.total);
     const isPassed = appdata.isStagePassed(desc.stage, desc.total);

     const cond = item.getChildByName("cond");
     const txt_cond = cond.getChildByName("txt_cond");
     const txt_progress = item.getChildByName("txt_progress");
     const btn_share = item.getChildByName("btn_share");
     const img_star = item.getChildByName("img_star");
     const gold_star = img_star.getChildByName("gold_star");
     //省略
 }
```

2.ScrollView, 循环滚动列表,支持不定尺寸的item, 屏幕可见范围外item会回收等待下次复用。支持横向,竖向, 但不支持多行多列。

* 初始化,传入item模板节点(cc.Node)列表,设置各种回调函数
```
const templates:ScrollItemTemplate[] = [
   {key:MsgType.ROUND_START.toString(), node:this.item_roundstart},
   {key:MsgType.LEFT_REDPACK.toString(), node:this.item_leftpack},
   {key:MsgType.RIGHT_REDPACK.toString(), node:this.item_rightpack},
   {key:MsgType.GRAB_NOTIFY.toString(), node:this.item_grab},
   {key:MsgType.ROUND_END.toString(), node:this.item_common},
   {key:MsgType.ROUND_RESULT.toString(), node:this.item_roundresult},
   {key:MsgType.LEFT_CHAT.toString(), node:this.item_leftchat},
   {key:MsgType.RIGHT_CHAT.toString(), node:this.item_rightchat},
   {key:MsgType.JOIN_ROOM_NOTIFY.toString(), node:this.item_common},
   {key:MsgType.QUIT_ROOM_NOTIFY.toString(), node:this.item_common},
   {key:MsgType.DISMISS_ROOM_NOTIFY.toString(), node:this.item_common},
   {key:MsgType.ROUND_TIMEOUT_NOTICE.toString(), node:this.item_common},
];
this.scview = new ScrollView({
    scrollview:this.scrollview,
    mask:this.mask,
    content:this.content,
    item_templates:templates,
    cb_host:this,
    item_setter:this.item_setter,
    recycle_cb:this.list_item_recyle,
    gap_y:10,
    auto_scrolling:true,
    direction:ScrollDirection.Vertical,
});
```
* 设置item回调内部根据传入的key及data为对应item节点设置数据
```
item_setter(item:cc.Node, key:string, data:any, index:number):[number, number]
{
  const enum_key:number = parseInt(key);
  switch(enum_key)
  {
      case MsgType.ROUND_START:
          item.getComponent(cc.Label).string = format.sprintf("第%d轮开始", data);
          return [item.width, item.height];

      case MsgType.LEFT_REDPACK:
      case MsgType.RIGHT_REDPACK:
          return this.set_pack_item(item, data);

      case MsgType.ROUND_RESULT:
          let node_names:cc.Node = item.getChildByName("names");
          node_names.getComponent(cc.Label).string = data;
          item.height = node_names.height - node_names.y;
          return [item.width, item.height];

      case MsgType.LEFT_CHAT:
      case MsgType.RIGHT_CHAT:
          return this.set_chat_item(item, data);

      case MsgType.GRAB_NOTIFY:
          return this.set_grab_item(item, data);

      case MsgType.DISMISS_ROOM_NOTIFY:
      case MsgType.ROUND_TIMEOUT_NOTICE:
      case MsgType.JOIN_ROOM_NOTIFY:
      case MsgType.QUIT_ROOM_NOTIFY:
      case MsgType.ROUND_END:
          item.getComponent(cc.Label).string = data as string;
          return [item.width, item.height];

      default:
          return [0, 0];
  }
}
```
* 追加数据, 传入key及item数据
```
const notify:pb.IRoomChatNotify = resp.roomChatNotify;
const key:number = notify.sender.acc == appdata.user.acc ? MsgType.RIGHT_CHAT : MsgType.LEFT_CHAT;
let data:ScrollItemData = {key:key.toString(), data:notify};
this.scview.append_data(data);
```

3.TweenUtil, 缓动工具

* 传入节点,用时,延时,要变动的属性, 曲线函数
```
let tween = TweenUtil.to({
    node:coin, duration:0.8, delay:delay, x:dest_pos.x, y:dest_pos.y, tweenFunc:TweenFunc.Sine.easeIn,
    onComplete:utils.gen_handler(this.on_fly_to_dest, this)
});
```
* 取消缓动
```
TweenUtil.kill(tween);
```

4.TimerMgr, 定时器

* 无限循环
```
TimerMgr.getInst().loop(0.1, utils.gen_handler(this.loop, this));
```
* 循环10次
TimerMgr.getInst().loopTimes(0.1, 10, utils.gen_handler(this.loopTimes, this));
  • 延时0.2秒后再循环
  • 0.2秒后再循环
TimerMgr.getInst().delayLoop(0.1, 0.2, utils.gen_handler(this.delayLoop, this));
  • 延时0.2秒后招行一次
  • 0.2秒后执行一次
TimerMgr.getInst().once(0.2, utils.gen_handler(this.once, this));

cocos_creator_proj_base's People

Contributors

caochao avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.