cocos creator中使用UI框架 一

2021-09-20 19:01:53 字數 2153 閱讀 2426

已上傳到github   滿意請點個星星  謝謝

簡單的ui框架

將其中的uiframe資料夾匯入到你的cocos creator中

uiframe的簡單介紹

以上七個類

其中baseuiform和uimanager是我們的重點內容, 

baseuiform 中定義了一些方法 狀態相關的

display() 顯示

hiding() 隱藏

redisplay() 重新顯示

freeze() 凍結

uimanager 中的重要方法

showuiforms()  顯示乙個窗體 引數是窗體的名字

closeuiforms() 關閉乙個窗體

開啟cocos creator,  新建uiroot結點 這個結點作為窗體的根結點(名字可以隨意取, 但是要在config資料夾中sysdefine進行相應修改)

normal表示 普通的窗體, 一般是登入介面, 之模擬較大的窗體

fixed 固定窗體 , 比如玩家的個人資訊(放在螢幕上方的), 以及一些螢幕下面的一些技能

popup 彈窗, 比如玩家網路不好, 彈出乙個視窗提示, 以及一些物品介紹的彈窗

建立乙個窗體儲存為prefab

建立乙個同名指令碼, 將其掛載到mainpanel上

開啟mainpanel.ts檔案, 修改其繼承類為baseuiform

在onload中設定窗體型別

import baseuiform from "../uiframe/baseuiform";

import from "../uiframe/config/sysdefine";

const = cc._decorator;

@ccclass

export default class mainpanel extends baseuiform

}

配置config中的configuiframe.ts中的uiformpathconfig的對應路徑

最後呼叫 uimanager的showuiforms方法

/**

* 視窗生命週期

*/public openuiform(uiformname: string)

/**this.openuiform("mainpanel")

*/

窗體間的訊息傳遞, 為了讓兩個窗體間的耦合度降低, 我們不直接採取方法呼叫的方式傳遞訊息, 而是用乙個全域性唯一的gmessagemanager類來處理訊息

gmessagemanager就是乙個增強版的 訂閱 - 發布模式 , 普通的訂閱 - 發步模式是 :

窗體一訂閱一條訊息, 窗體二發布一條訊息, 如果窗體一訂閱了該資訊, 那麼將訊息**給窗體一

而我們這個對功能進行了一些加強, 就是如果窗體一沒有訂閱該訊息, 將此訊息儲存在記憶體中(類似qq的離線訊息), 當窗體一某個時候訂閱該訊息(玩家上線了), 就將該記憶體中的訊息發給窗體一(玩家收到其他人的離線訊息), 並將訊息清除

/**

* 訊息**類

*/export default class gmessagemanager = {};

private static _eventmsg: = {};

public static emit(eventname: string, parameter: any)

for(let i=0; i

}public static on(eventname: string, callback: function, target: any)

this._eventmap[eventname].push();

if(this._eventmsg[eventname])

}public static off(eventname: string, callback: function, target: any) }}

}export class elementevent

cocos creator使用記錄32 動態載入

1.前言 1.1.可動態載入的資源 1 asset cc.spriteframe,cc.animationclip,cc.prefab asset 的載入是統一並且自動化的,相互依賴的 asset 能夠被自動預載入。例如,當引擎在載入場景時,會先自動載入場景關聯到的資源,這些資源如果再關聯其它資 源...

使用cocos creator開發微信小遊戲 二

橫屏下,建議使用 fit width 豎屏下,建議使用 fit height,有些ui需要新增 widget對齊掛件,以顯示在相對於螢幕左,頂,右,底的位置 我的遊戲是橫屏的,配置如下 使用者資訊需要顯示在螢幕左上角 有些在場景工程中沒有指定而通過 中動態載入的資源,cocos creator不會匯...

cocos creator 十二 問題

1 socket為什麼不能使用 2 cocos類之攝像機使用問題 1 在使用socket為什麼不能使用 if cc.sys.isnative opts this sio window.io connect this.ip opts this sio.on connect function data ...