creator - editor extension

---

title: creator-editor extension
categories: Cocos2dx
tags: [creator, optimization, rendering, atlas]
date: 2023-03-23 ​​16:08:24
comments: false
mathjax: true
toc: true

creator - editor extension

---

Prequel

• Create extensions using templates - https://docs.cocos.com/creator/3.3/manual/en/editor/extension/create-extension.html
• Editor API Description - https://docs.cocos.com/creator/manual/zh/editor/extension/editor-api.html

---

create

1. Extension -> Create Extension

   

2. Select a template, specify an extension, such as its-util , and a its-util extension directory will be created in extensions

   

3. Then execute the initialization command

   $ cd its-util
   $ npm install && npm run build
   

4. enable extension

   

---

modify extension

1. Change it to the code, and build it once to take effect. Then, this method is not as npm run watchconvenient, and you don’t need to build after opening the monitor

   $ npm run build
   

2. Click the refresh button

   

---

development mode

1. Turn on the monitor, so you don’t need to build every time

   $ npm run watch
   

2. Click the refresh button

   

   • It seems that the code in main.ts and vue template ts can only be refreshed to take effect, and the code written in main.ts and used in other ts will not take effect

     

3. done

---

message mechanism

• Message System - https://docs.cocos.com/creator/manual/zh/editor/extension/messages.html

Most commonly used editor extension APIs need to communicate through messages

---

engine message api

• You can view related APIs in Developer -> Message List

  

• Take the query url path as an example

  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
  
  
  
  

---

Extended message api

• https://docs.cocos.com/creator/manual/zh/editor/extension/messages.html#%E6%99%AE%E9%80%9A%E6%B6%88%E6%81%AF

1. Define the message. Define the message in package.json

   {
         
         
       "name": "its-util", // name 就是要调用的 扩展包名
       "contributions": {
         
         
           "messages": {
         
         
               "test-api01": {
         
          // test-api01 就是要执行的消息
                   "methods": [ // methods 就是该消息会执行的方法数组, 一般定义一个就行了
                       "api001"
                   ]
               },
               "test-api02": {
         
         
                   "methods": [
                       "api002"
                   ]
               },
           }
       }
   }
   

2. Define specific methods in 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);
           })
       },
   };
   
   
   

3. test

   // 发送
   Editor.Message.send("its-util", "test-api01", "hello", 123, true);
   
   // 请求并返回
   const info02 = await Editor.Message.request("its-util", "test-api02", "hello", 123, true);
   
   
   
   

---

Explorer Extensions

• https://docs.cocos.com/creator/manual/zh/editor/assets/extension.html

You can right-click in the resource to add extensions to facilitate the processing of resources

---

view 3

• Getting started with Vue3 - https://www.runoob.com/vue3/vue3-intro.html
• The Complete Guide to the Vue 3 Lifecycle - https://segmentfault.com/a/1190000039680245

---

life cycle

• a

  

---

Step on the pit

Modification does not take effect

• If the code is modified and executed, it still npm run builddoes not take effect, restart the project

---