Cocos Creator エディタ拡張で画像インポート時に Auto Trim を自動無効化する

こんにちは！　クライアントエンジニアの高桑です。

今回はCocos Creatorで作成したエディタ拡張をご紹介します。

はじめに

Cocos Creator でスプライト画像を扱う際、Auto Trim（自動トリミング） が邪魔になるケースがあります。

例えばドット絵や余白に意味がある画像では、インポートのたびに手動でトリミング設定を None に変更しなければなりません。

この記事では、画像をインポートしたときに自動で Auto Trim を無効化するエディタ拡張の実装方法を紹介します。

Auto Trim とは

Cocos Creator の SpriteFrame には Trim Type という設定があります。

デフォルトは Auto のため、余白に意味がある画像では毎回 None に変更する手間が発生します。

エディタ拡張の仕組み

Cocos Creator のエディタ拡張は package.json の contributions.messages に、受け取るメッセージ（イベント）とそのハンドラーを登録する形で動作します。

画像のインポートは「アセットの追加」にあたるため、asset-db が broadcast するイベント asset-db:asset-add を購読します。

"contributions": {
    "messages": {
        "asset-db:asset-add": {
            "methods": ["setTrimTypeNone"]
        }
    }
}

asset-db が broadcast する主なイベントは以下の通りです。

実装例

package.json（抜粋）

"contributions": {
    "messages": {
        "asset-db:asset-add": {
            "methods": ["setTrimTypeNone"]
        }
    }
}

source/main.ts

export const methods: { [key: string]: (...any: any) => any } = {
    async setTrimTypeNone(event) {
        const uuid = event;

        // UUIDからアセット情報を取得
        const assetInfo = await Editor.Message.request('asset-db', 'query-asset-info', uuid);

        // imagesフォルダ内かどうかを確認
        if (!assetInfo?.path.startsWith('db://assets/images/')) {
            return;
        }

        // cc.ImageAsset のみを対象にする
        if (assetInfo?.type !== 'cc.ImageAsset') {
            return;
        }

        // メタデータを取得
        const meta = await Editor.Message.request('asset-db', 'query-asset-meta', uuid);
        if (!meta) {
            return;
        }

        // subMetas の中の sprite-frame の trimType を none にする
        for (const key in meta.subMetas) {
            const subMeta = meta.subMetas[key];
            if (subMeta.importer !== 'sprite-frame') {
                continue;
            }

            // キーが存在する場合のみ更新
            if ('trimType' in subMeta['userData']) {
                subMeta['userData']['trimType'] = 'none';
            }
        }

        // メタデータを保存
        const jsonString = JSON.stringify(meta, null, 2);
        await Editor.Message.request('asset-db', 'save-asset-meta', uuid, jsonString);
    },
};

export const load = function () {};
export const unload = function () {};

処理の流れ

1. asset-db:asset-add イベントで UUID を受け取る
2. query-asset-info でアセット情報を取得し、対象フォルダ・対象タイプ（cc.ImageAsset）に絞り込む
3. query-asset-meta でメタデータを取得する
4. subMetas の中から importer が sprite-frame のものを探し、trimType を none に書き換える
5. save-asset-meta でメタデータを保存する

まとめ

エディタ拡張を使うことで、画像インポート時の定型作業を自動化できます。今回のポイントをまとめます。

• 画像インポートの検知には asset-db:asset-add イベントを使う
• メタデータの取得・保存には query-asset-meta / save-asset-meta メッセージを使う
• trimType の変更は subMetas 内の sprite-frame インポーターを持つエントリに対して行う

動作確認環境

• Cocos Creator 3.8.7