タイトル: クリエーターエディター拡張
機能 カテゴリ: Cocos2dx
タグ: [クリエイター, 最適化, レンダリング, アトラス]
日付: 2023-03-23 16:08:24
コメント: false
mathjax: true
toc: true
クリエーター - エディター拡張機能
前編
- テンプレートを使用して拡張機能を作成する - https://docs.cocos.com/creator/3.3/manual/en/editor/extension/create-extension.html
- エディタ API の説明 - https://docs.cocos.com/creator/manual/zh/editor/extension/editor-api.html
作成
-
拡張機能 -> 拡張機能の作成
-
テンプレートを選択し、 its-utilなどの拡張子を指定すると、 its-util拡張子ディレクトリが拡張子内に作成されます。
-
次に初期化コマンドを実行します
$ cd its-util $ npm install && npm run build -
拡張機能を有効にする
拡張子を変更する
-
コードに変更し、一度ビルドすると有効になりますが、この方法はあまり
npm run watch便利ではなく、モニターを開いてからビルドする必要がありません。$ npm run build -
更新ボタンをクリックします
開発モード
-
モニターの電源をオンにすると、毎回ビルドする必要がなくなります
$ npm run watch -
更新ボタンをクリックします
-
main.ts と vue template ts のコードは更新することでのみ有効になり、main.ts に書かれて他の ts で使用されているコードは有効にならないようです。
-
-
終わり
メッセージメカニズム
- メッセージ システム - https://docs.cocos.com/creator/manual/zh/editor/extension/messages.html
最も一般的に使用されるエディタ拡張 API は、メッセージを通じて通信する必要があります
エンジンメッセージAPI
-
関連する API は、 [開発者] -> [メッセージ リスト]で表示できます。
-
例としてクエリ URL パスを取り上げます
let uuid = "a7ac6d76-4a06-46ad-8d58-363b1b46ad6c" const info = await Editor.Message.request('asset-db', 'query-url', uuid); LogUtil.D('--- info:', info) // db://assets/resources/ui/Atlas/login/bx_loading_Phone.png
拡張メッセージAPI
- https://docs.cocos.com/creator/manual/zh/editor/extension/messages.html#%E6%99%AE%E9%80%9A%E6%B6%88%E6%81%AF
-
メッセージを定義するpackage.jsonでメッセージを定義する
{ "name": "its-util", // name 就是要调用的 扩展包名 "contributions": { "messages": { "test-api01": { // test-api01 就是要执行的消息 "methods": [ // methods 就是该消息会执行的方法数组, 一般定义一个就行了 "api001" ] }, "test-api02": { "methods": [ "api002" ] }, } } } -
main.tsで特定のメソッドを定義する
// @ts-ignore export const methods: { [key: string]: (...any: any) => any } = { api001(...args: any[]) { // 不需要返回值, 提供给 send LogUtil.D("--- api001 args:", ...args) }, api002(...args: any[]) { // 需要返回值, 且支持异步返回, 提供给 request LogUtil.D("--- api002 args:", ...args) return new Promise<string>((resolve) => { setTimeout(() => { resolve("--- msg from api002") }, 3000); }) }, }; -
テスト
// 发送 Editor.Message.send("its-util", "test-api01", "hello", 123, true); // 请求并返回 const info02 = await Editor.Message.request("its-util", "test-api02", "hello", 123, true);
エクスプローラー拡張機能
- https://docs.cocos.com/creator/manual/zh/editor/assets/extension.html
リソースを右クリックして拡張機能を追加し、リソースの処理を容易にすることができます。
ビュー3
- Vue3 入門 - https://www.runoob.com/vue3/vue3-intro.html
- Vue 3 ライフサイクルの完全ガイド - https://segmentfault.com/a/1190000039680245
ライフサイクル
-
ある
ピットを踏む
変更は有効になりません
- コードを変更して実行しても
npm run build有効にならない場合は、プロジェクトを再起動してください。