widget_base.ts 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. import { _decorator, assetManager, Color, Component, ImageAsset, Node, Size, Sprite, SpriteFrame, Texture2D, tween, Tween, UIOpacity, UITransform, Vec3 } from 'cc';
  2. import { ani_frame, att_ani_data, event_item, widget_item_data } from '../../../data/data';
  3. import { gameManager } from '../gameManager';
  4. import { ClientEvent } from '../../clientEvent';
  5. import { config } from '../../config';
  6. import { tools } from '../../tools';
  7. import { scene_page } from '../scene_page';
  8. const { ccclass, property } = _decorator;
  9. class BindTarget{
  10. color : Color;
  11. opacity:number;
  12. size:Size;
  13. pos:Vec3;
  14. rotation:number;
  15. anchorPointX:number;
  16. anchorPointY:number;
  17. }
  18. @ccclass('widget_base')
  19. export class widget_base extends Component {
  20. @property(Node) icon:Node = null;
  21. protected mData:widget_item_data = null;
  22. protected mAnimationList:att_ani_data[] = []; //动画组
  23. protected mCurRunAnimation:ani_frame[] = [];
  24. protected mCurAnimation:att_ani_data = null;
  25. protected mPlayStatus:boolean = false;
  26. protected mIsFinish:boolean = false;
  27. protected mIsActive:boolean = false;
  28. protected mIsShow:boolean = false;
  29. private bindTarget:BindTarget = null;
  30. protected isInit:boolean = true;
  31. protected initWidget(data:widget_item_data){
  32. this.mData = data;
  33. this.icon.getComponent(UITransform).contentSize = new Size(this.mData.att.width,this.mData.att.height)
  34. this.icon.position = new Vec3(this.mData.att.x,this.mData.att.y)
  35. var anchor_x = 0.5
  36. if(this.mData.att.anchor_x!=undefined&&this.mData.att.anchor_x!=null) {
  37. anchor_x = this.mData.att.anchor_x
  38. }
  39. var anchor_y = 0.5
  40. if(this.mData.att.anchor_x!=undefined&&this.mData.att.anchor_x!=null) {
  41. anchor_y = this.mData.att.anchor_y
  42. }
  43. this.icon.getComponent(UITransform).setAnchorPoint(anchor_x, anchor_y)
  44. if(this.mData.att.rotation==undefined||this.mData.att.rotation==null) {
  45. this.icon.angle = 0
  46. } else {
  47. this.icon.angle = this.mData.att.rotation
  48. }
  49. if(this.icon.getComponent(UIOpacity)===null){
  50. this.icon.addComponent(UIOpacity)
  51. }
  52. if(this.mData.att.src.length>0){
  53. this.icon.getComponent(Sprite).spriteFrame = gameManager.getCacheSpriteFrameByName(this.mData.att.src)
  54. }
  55. this.updateDir()
  56. this.mIsShow = this.mData.att.is_show;
  57. this.mIsActive = this.mData.att.is_interaction;
  58. this.mAnimationList = this.mData.att.animation_list;
  59. if(this.mIsShow){
  60. this.node.active = true;
  61. this.onWidgetShow()
  62. }else{
  63. this.node.active = false;
  64. }
  65. if(this.isInit){
  66. this.init()
  67. }else{
  68. this.node.position = Vec3.ZERO;
  69. this.icon.position = Vec3.ZERO;
  70. this.node.active = true;
  71. this.onWidgetShow()
  72. }
  73. // ClientEvent.on(config.EventRun.NOTICE_EVENT,this.beActive.bind(this),this)
  74. // ClientEvent.on(config.EventRun.WIDGET_HIDE,this.hide.bind(this),this)
  75. };
  76. updateDir(){
  77. switch (this.mData.att.img_dir) {
  78. case config.widget_scale_dir.left:
  79. this.node.scale = new Vec3(-1,1,1)
  80. break;
  81. case config.widget_scale_dir.up:
  82. this.node.scale = new Vec3(1,-1,1)
  83. break;
  84. case config.widget_scale_dir.normal:
  85. this.node.scale = new Vec3(1,1,1)
  86. break;
  87. }
  88. }
  89. protected onDestroy(): void {
  90. // ClientEvent.off(config.EventRun.NOTICE_EVENT,this.beActive.bind(this),this)
  91. }
  92. private getAniById(id:number){
  93. if(this.mAnimationList.length>0){
  94. for (let index = 0; index < this.mAnimationList.length; index++) {
  95. const element = this.mAnimationList[index];
  96. if(id==element.ani_id){
  97. return element;
  98. }
  99. }
  100. }
  101. return null;
  102. }
  103. onWidgetShow(){
  104. this.node.active = true;
  105. this.mIsShow = true;
  106. if(this.mData.att.animation_list.length>0){
  107. if(this.mData.att.animation_list[0].ani_frame_list.length<=0){
  108. }else{
  109. this.mCurAnimation = this.getAniById(this.mData.att.animation_list[0].ani_id)
  110. if(this.mCurAnimation){
  111. this.mCurRunAnimation = this.mCurAnimation.ani_frame_list;
  112. if(this.mCurRunAnimation.length<2){
  113. }else{
  114. this.runAnimation()
  115. }
  116. }else{
  117. return tools.showToast(`错误的动画配置!id:${this.mData.att.id}-请检查`)
  118. }
  119. }
  120. }
  121. }
  122. public hide(widgetId:number,event:event_item){
  123. if(widgetId===this.mData.att.id){
  124. this.mIsShow = false;
  125. this.node.active = false;
  126. }
  127. }
  128. public beActive(widgetId:number,event:event_item){
  129. if(widgetId===this.mData.att.id){
  130. if(event.type===config.event_type.hide){
  131. this.hide(widgetId,event)
  132. return
  133. }
  134. if(!this.mIsShow){
  135. this.onWidgetShow()
  136. }
  137. if(!this.mIsActive){
  138. this.registeredEvent()
  139. }
  140. this.mIsActive = true;
  141. switch (event.type) {
  142. case config.event_type.play_ani: //播放一个动画
  143. let event_data_nai = event.event_item_play_ani_data
  144. if(event_data_nai!=null){
  145. this.mCurAnimation = this.getAniById(event_data_nai.ani_id)
  146. if(this.mCurAnimation){
  147. this.mCurRunAnimation = this.mCurAnimation.ani_frame_list;
  148. this.runAnimation()
  149. }else{
  150. return tools.showToast("错误的动画配置!请检查")
  151. }
  152. }
  153. break;
  154. case config.event_type.change_one_item_status: //改变自己的突变资源属性
  155. let event_data_change_one_item_status = event.event_item_change_one_item_status_data
  156. if(event_data_change_one_item_status!=null){
  157. // gameManager.initUiBaseAtt(this.icon,event_data_change_one_item_status.att)
  158. let att_res = event_data_change_one_item_status.att.res
  159. if(att_res.length > 0) {
  160. tools.loadUrl(att_res,this.icon.getComponent(Sprite))
  161. }
  162. }
  163. break;
  164. case config.event_type.show_new_item: //显示自己同时被激活
  165. break;
  166. case config.event_type.stop_active_event: //停止激活
  167. console.log('停止激活 停止激活')
  168. this.mIsActive = false;
  169. break;
  170. // case config.event_type.collect_event: //自己被触发后,被收集类给收集
  171. // break;
  172. // case config.event_type.active_event: //立刻被激活
  173. // break;
  174. case config.event_type.be_event: //被动激活,等待被玩家交互
  175. console.log("this.be_event",this.mIsShow)
  176. break;
  177. }
  178. }
  179. }
  180. runAnimation(){
  181. if(this.bindTarget!=null){
  182. Tween.stopAllByTarget(this.bindTarget)
  183. this.bindTarget = null;
  184. }
  185. if(this.mCurAnimation.isMove==undefined||this.mCurAnimation.isMove==null){
  186. this.mCurAnimation.isMove = true;
  187. }
  188. // Tween.stopAll()
  189. let getFrameData = (index)=>{
  190. let cur_frame:ani_frame =this.mCurRunAnimation[index];
  191. let up_frame:ani_frame = index>0?this.mCurRunAnimation[index-1]:this.mCurRunAnimation[0];
  192. return {"cur_frame":cur_frame,"up_frame":up_frame}
  193. }
  194. let cur_index = 0;
  195. let data = getFrameData(cur_index);
  196. let call_back = ()=>{
  197. cur_index++;
  198. if(cur_index>=this.mCurRunAnimation.length){
  199. if(this.mCurAnimation.isLoop){
  200. cur_index = 0;
  201. }else{
  202. this.mPlayStatus = false;
  203. this.onFinishAnimation()
  204. return;
  205. }
  206. }
  207. let data = getFrameData(cur_index);
  208. this.runFrame(data.cur_frame,data.up_frame,call_back)
  209. }
  210. this.runFrame(data.cur_frame,data.up_frame,call_back)
  211. }
  212. runFrame(frame:ani_frame,up_frame:ani_frame,call){
  213. let self = this;
  214. let tweenDuration: number = frame.next_time;
  215. // let origin_x = self.mCurRunAnimation[0].pos_x;
  216. // let origin_y = self.mCurRunAnimation[0].pos_y
  217. this.icon.getComponent(Sprite).spriteFrame = gameManager.getCacheSpriteFrameByName(frame.url)
  218. let n_pos:Vec3 = new Vec3(frame.pos_x,frame.pos_y)
  219. let _color = new Color()
  220. _color = _color.fromHEX(frame.color)
  221. this.bindTarget = new BindTarget();
  222. let rotation = up_frame.rotation == undefined?0:up_frame.rotation
  223. this.bindTarget.rotation = rotation
  224. this.bindTarget.color = new Color().fromHEX(up_frame.color)
  225. this.bindTarget.opacity = up_frame.transparent;
  226. this.bindTarget.size = new Size(up_frame.size_width,up_frame.size_height)
  227. this.bindTarget.pos = new Vec3(up_frame.pos_x,up_frame.pos_y)
  228. this.bindTarget.anchorPointX = up_frame.anchor_point_x==undefined?0.5:up_frame.anchor_point_x
  229. this.bindTarget.anchorPointY = up_frame.anchor_point_y==undefined?0.5:up_frame.anchor_point_y
  230. let color_opactiy_tw_size = tween(this.bindTarget)
  231. .to( tweenDuration, { pos:n_pos,color: _color,opacity:frame.transparent,size:new Size(frame.size_width,frame.size_height),rotation:frame.rotation, anchorPointX:frame.anchor_point_x, anchorPointY:frame.anchor_point_y}, {
  232. onUpdate(tar:BindTarget){
  233. self.icon.getComponent(Sprite).color = tar.color;
  234. self.icon.getComponent(UIOpacity).opacity = tar.opacity;
  235. self.icon.getComponent(UITransform).setContentSize(tar.size)
  236. // console.log('tar.anchorPointX_Y=',tar.anchorPointX,'-',tar.anchorPointY)
  237. self.icon.getComponent(UITransform).setAnchorPoint(tar.anchorPointX, tar.anchorPointY)
  238. if(self.mCurAnimation.isMove){
  239. self.node.position = tar.pos
  240. }
  241. self.node.angle = tar.rotation;
  242. }
  243. }).call(()=>{
  244. call()
  245. });
  246. color_opactiy_tw_size.start();
  247. }
  248. public getIsFinish():boolean{
  249. return this.mIsFinish
  250. }
  251. public getIsShow():boolean{
  252. if(this.icon.getComponent(UIOpacity).opacity==0||this.mIsFinish){
  253. return false;
  254. }
  255. return this.mIsShow;
  256. }
  257. public getScenePage():scene_page {
  258. if(this.node.parent.name=="content"){
  259. let parent = this.node.parent.parent.parent.parent
  260. let c_scene_page = parent.getComponent(scene_page)
  261. return c_scene_page
  262. }
  263. return null
  264. }
  265. protected registeredEvent(){
  266. }
  267. public offEvent(){
  268. this.node.off(Node.EventType.TOUCH_START)
  269. this.node.off(Node.EventType.TOUCH_END)
  270. this.node.off(Node.EventType.TOUCH_CANCEL)
  271. this.node.off(Node.EventType.TOUCH_MOVE)
  272. this.mIsFinish = true;
  273. }
  274. protected onFinishAnimation(){
  275. }; //动画播放完成
  276. protected onFinishEvent(){
  277. this.offEvent()
  278. ClientEvent.dispatchEvent(config.EventRun.WIDGET_FINISH,this.mData.att.id)
  279. }; //完成自身
  280. protected onFialEvent(){}; // 失败完成
  281. protected init(){};
  282. public initView(data:widget_item_data,is_init:boolean = true){
  283. this.isInit = is_init;
  284. this.initWidget(data)
  285. };
  286. public showZhaoButongFinishStatus(){}
  287. public hideZhaoButongFinishStatus(){}
  288. }