CocosCreator3.8 研究ノート (10) CocosCreator 画像リソースについて

1. 画像リソースのインポート

Cocos Creator は、JPG、PNG、BMP、TGA、HDR、WEBBP、PSD、TIFFなどをサポートする画像ファイル形式を使用できます。

画像リソースをリソース マネージャーに直接ドラッグしてインポートします。

2. 画像リソースの種類

属性インスペクターパネルでは、必要に応じて画像リソースの使用タイプ ( raw、テクスチャ、法線マップ、spriteFrame) を設定できます。

1、生

RAW イメージ タイプ、効果なし。

2、質感

テクスチャ マップ リソースは、プログラムのサンプリング、モデル上のマップ、スプライト上の UI に使用されるリソースです。プログラムが UI またはモデルをレンダリングするとき、テクスチャ座標を使用してテクスチャの色を取得し、それをモデル グリッド上に塗りつぶし、照明などの一連のプロセスを追加してシーン全体をレンダリングします。

テクスチャ マップ リソースは、PNG、JPEG などの一般的な画像変換形式を含む画像リソース (ImageAsset) から変換できます。

テクスチャタイプはTexture2Dテクスチャリソースです。Texture2D はテクスチャ マップ リソースの一種で、通常、モデル マテリアルの反射マップ、環境光マスク マップなどの 3D モデルのレンダリングに使用されます。

属性	説明する
異方性	異方性値、異方性フィルタリング アルゴリズムが適用される最大しきい値
フィルターモード	フィルター モード、オプションは、 Nearest (None)、Bilinear、mipmaps を使用した Bilinear、mipmaps を使用した TrilinearおよびAdvancedです。
ラップモード	アドレッシング モードを設定します。オプションは、[ Repeat]、 [ Clamp]、[Mirror] 、および[Advanced]です。 [ Advanced]が選択されている場合、テクスチャ アドレッシング モードを S(U)/T(V) 方向に設定します。つまり、ピクセルからテクスチャへの距離は、 S(U)またはT(V)方向のマッピングパターン

スクリプト内で Texture2D を動的に使用するには、まず画像リソース (ImageAsset) を取得し、取得した ImageAsset に従って Texture2D リソースをインスタンス化する必要があります。

resources.load("testAssets/image/texture", Texture2D, (err: any, texture: Texture2D) => {
    
    
  const spriteFrame = new SpriteFrame();
  spriteFrame.texture = texture;
  this.node.getComponent(Sprite).spriteFrame = spriteFrame;
});

3. 法線マップ: 3D モデルのレンダリングによく使用される法線マップ タイプで、モデル マテリアルの属性を確認することで使用できますUSE NORMAL MAP。

マテリアル内で定義されていない場合、USE NORMAL MAPこの属性は存在しないことに注意してください。

4. sprite-frame : 2D/UI 制作に使用されるスプライト フレーム リソース。Cocos Creator の SpriteFrame は、画像のトリミングと 9 正方形のグリッド情報を管理します。デフォルトでは、基本的なグラフィックスをレンダリングする UI のコンテナーである、ピア Texture2D リソースへの参照を保持します。

(1)、スプライトフレームリソースの作成

次のように、画像をインポートし、タイプをsprite-frameに設定します。

画像リソースのインポート後に生成される SpriteFrame は、デフォルトで自動的にトリミングされ、元の画像の周囲の透明ピクセル領域が削除され、有効な画像のより正確なサイズが取得されます。

Creator は、インポートされた画像リソースの下に、以下に示すようにspriteFrameリソースを自動的に作成します。また、それと同じレベルに Texture リソース参照も存在します。

(2) 画像の自動切り出し

A. 画像リソースのインポート後に生成される SpriteFrame は、デフォルトで自動的にトリミングされ、元の画像の周囲の透明ピクセル領域が削除され、有効な画像のより正確なサイズが取得されます。

SpriteFrame が自動的にクリップされる場合、自動クリップに関連する情報は変更できません。

B. スプライトコンポーネントのクリッピングに関する設定の詳細説明

• Trimチェックを入れるとスプライト画像をレンダリングする際に画像の周囲の透明ピクセルが削除され、チェックを外すと透明ピクセルが含まれます。

  
  

• Size Modeこれは、ノードのサイズを元の画像に設定するか、透明ピクセルがトリミングされた後の元の画像のサイズを設定するために使用され、通常、シーケンス フレーム アニメーションで画像が正しいサイズで表示されることを確認するために使用されます。

• TRIMMEDノードのサイズは、透明ピクセルが切り取られた後の元の画像のサイズに設定されます。

• RAWこのオプションを選択すると、ノード サイズが透明ピクセルを含む元のイメージのサイズに設定されます。

• CUSTOMサイズをカスタマイズするには、長方形変形ツールを使用してドラッグ アンド ドロップしてノードのサイズを変更するか、属性を変更するか、変更後またはSizeスクリプト内でが自動的に設定されます。widthheightSize ModeCUSTOM

  
  

(3)、spriteFrameリソース属性

次のように：

属性	機能の説明
パッカブル	写真の動的な組み合わせと自動アトラスの構築と処理に参加するかどうか。
回転した	Texture Packer リソース内のサブリソースが回転されているかどうかを確認するために使用される読み取り専用プロパティ
オフセットX、Y	テクスチャ パッカー リソース内の長方形ボックスのオフセットを表示するために使用される読み取り専用プロパティ
トリムタイプ	トリミング タイプは次のとおりです。 1. Auto - 自動トリミング (デフォルト) 2. Custom - カスタム トリミング 3. None - トリミングなし、元の画像を使用します。
トリムしきい値	透明度のしきい値。デフォルトは 1、値の範囲は 0 ～ 1、設定値を下回る透明度を持つピクセルは切り取られます。トリムタイプが自動に設定されている場合に有効になります。
トリム X、Y、幅、高さ	トリミング長方形を設定します。トリム タイプがカスタムに設定されている場合に有効です。
枠線 上、下、左、右	九公格図の余白を設定するには、下の編集ボタンをクリックして視覚的に編集できます。

(4)、動的な画像の組み合わせをパッキング可能

Packable Dynamic Atlas は、DrawCall を削減し、ゲームのレンダリング効率を向上させるための非常に直接的かつ効果的な方法です。


2 つの DrawCall を 1 つの DrawCall にマージできるかどうかは、2 つの DrawCall が同じテクスチャを使用するかどうかが重要な要素の 1 つであるためです。


動的なピクチャの組み合わせでは、レンダリング順序に従って 1 つの大きなピクチャにマージするマップが選択されるため、隣接する DrawCall を 1 つの DrawCall にマージできます。


動的マージでは、プロジェクトの実行中にテクスチャを 1 つの大きなテクスチャに動的にマージできます。

テクスチャをレンダリングするとき、動的写真結合システムは、テクスチャがアトラスにマージされているかどうかを自動的に検出します。そうでない場合、テクスチャが動的写真結合の条件を満たしている場合、テクスチャはアトラスにマージされます。

A. ダイナミック画像合成の有効化と無効化

• システムのデフォルト設定の有効化と無効化を初期化します

CLEANUP_IMAGE_CACHE初期化プロセス中に、Cocos Creator はさまざまなプラットフォームに応じてさまざまなパラメータを設定します。無効にするとCLEANUP_IMAGE_CACHE、動的な画像の組み合わせがデフォルトで有効になります。

画像の動的な組み合わせを有効にすると追加のメモリが占​​有され、プラットフォームによって占有されるメモリの量は異なります。

現在、ミニゲームとネイティブ プラットフォームでは、動的画像の組み合わせはデフォルトで無効になっていますが、プロジェクトにまだ十分なメモリ領域がある場合は、有効にすることをお勧めします。

• コード設定の有効化と無効化

  ダイナミックピクチャーをオンにします。

  macro.CLEANUP_IMAGE_CACHE = false;
  dynamicAtlasManager.enabled = true;
  

画像の動的な組み合わせを無効にします

dynamicAtlasManager.enabled = false;

注: これらのコードは、プロジェクトの読み込みプロセス中にすぐに有効になるように、 onLoad/などの関数ではなく、プロジェクト スクリプトの最も外側の層に記述する必要があります。startそうしないと、テクスチャ キャッシュの一部が解放された後にダイナミック アトラスが有効になった場合、エラーが報告される可能性があります。

B. テクスチャ サイズの制限

動的写真合成システムでは、合成できるテクスチャのサイズが制限されており、デフォルトでは、幅と高さが512未満のテクスチャのみが動的写真合成システムに入力できます。

この制限は、ニーズに応じて変更できます。

dynamicAtlasManager.maxFrameSize = 512;

(5) SpriteFrameの利用

• ココスクリエイターエディターでSpriteFrameを使用する

  
  

SpriteFrame リソースをSprite コンポーネントのSpriteFrameプロパティ ボックスにドラッグして、Sprite によって表示される画像を切り替えます。

• spriteFrame リソースの動的ロード

動的にロードする必要があるリソースは、他のインターフェイスを使用して動的にロードresourcesできるため、ディレクトリに保存します。resources.load

resourcesスクリプトを通じて動的にロードする必要があるすべてのリソースは、フォルダーまたはそのサブフォルダーの下に配置する必要があります。

resourcesこのフォルダーは、アセットのルート ディレクトリに手動で作成する必要があります。次のように：

注:

resources関連付けられているリソースフォルダー外のリソースも含め、フォルダー内のすべてのリソースがエクスポートされます。


リソースをresources.load直接呼び出す必要がない場合は、リソース フォルダーにリソースを配置しないでください。そうしないと、サイズが増加しconfig.json、プロジェクト内の不要なリソースがビルド プロセス中に自動的に削除されなくなります。

画像ソース リソース ImageAsset を直接ロードできますが、リソースへの相対パスを渡す必要があり、パスの末尾にファイル拡張子を含めることはできません。


次に、resources.createWithImage次のメソッドを使用して ImageAsset を SpriteFrame リソースとして作成します。

import { _decorator, CCInteger, Component, EventMouse, input, Node,Label, Sprite, SpriteFrame, log,resources,ImageAsset} from 'cc';

const { ccclass, property,type,integer} = _decorator;

@ccclass('PlayerControl')
export class PlayerControl extends Component {
   
    @property({type:Sprite})
    private imageSprite = null;

    onLoad() {
        
        log('this.imageSprite==' +  this.imageSprite);

        let self = this;
        
        const url = './content/00027';
        resources.load(url, ImageAsset, (err: any, imageAsset) => {

           const sprite = this.getComponent(Sprite);
           let spriteFrame = SpriteFrame.createWithImage(imageAsset);
           if(spriteFrame != undefined) {
              self.imageSprite.spriteFrame =spriteFrame;
           }
           console.log("error==" + err)
           log('self.imageSprite.spriteFrame==' +  self.imageSprite.spriteFrame);
        });
    }
 }
    

SpriteFrame を手動で作成して割り当てることもできます。

 const self = this;
 const url = './content/00027';
 resources.load(url, ImageAsset, (err: any, imageAsset) => {
   const sprite = this.getComponent(Sprite);
   const spriteFrame = new SpriteFrame();
   const tex = new Texture2D();
   tex.image = imageAsset;
   spriteFrame.texture = tex;
   sprite.spriteFrame = spriteFrame;
 });
 

5. マニュアルアトラスリソース

アトラスは、特殊なツールを使用して複数の画像を 1 つの大きな画像に結合し、plistおよびその他の形式のファイルにインデックスを付けるリソースです。

Cocos Creator で利用できるアトラス リソースは、plist ファイルとpngファイルで構成されています。

例: TexturePackerを使用して生成されたアトラス:

(1) アトラスリソースを利用するメリット

• アトラス合成時に各画像の周囲の空白領域が削除され、全体として様々な最適化アルゴリズムを実装できるため、アトラス合成後のゲームパッケージやメモリ使用量を大幅に削減できます。
• 複数のスプライトが同じアトラスから画像をレンダリングしている場合、これらのスプライトは同じレンダリング バッチで処理できるため、CPU の計算時間が大幅に短縮され、操作効率が向上します。

(2) TexturePackerを使用してアトラスを生成する手順

現在、パッケージ化には TexturePacker 4.x以降を使用することが推奨されています。

• エネルギーの写真を追加

• フレームワークを cocos2d-x に設定します

このとき、ディレクトリ内に同名のpngファイルとplistファイルが生成されます。

• 詳細設定のトリムモード設定：トリム

注:トリミング モードを選択してください修剪。選択しないでください。選択しない裁剪，丢弃位置と、透明ピクセルのクリッピング情報が失われ、アトラス内のリソースを使用するときに元の画像のトリミングされていないサイズとオフセット情報が取得されなくなります。

図に示すように:

• スプライトシートを公開する

(3) アトラスリソースのインポートと利用

上記で生成したplistファイルとpngファイルを同時にリソースマネージャーにドラッグ＆ドロップすることで、エディタやスクリプトで利用できるアトラスリソースを生成できます。

SpriteFrameアトラス リソースをインポートし、アトラス リソースの左側にある三角形のアイコンをクリックして展開すると、アトラス リソースには タイプのサブリソースが多数含まれており、各サブリソースは個別に使用/参照できることがわかります。

6. 自動アトラス リソース

Auto Atlas は、cocos Creator の組み込み画像結合機能として、指定された一連の分割画像を大きな画像にパックすることができ、その具体的な機能は Texture Packer と似ています。

現在、現在のフォルダー内のすべてのSpriteFrame は断片化された画像リソースとして使用され、ビルド プロセス中に大きなSprite Atlasにパッケージ化されます。

(1) 自動アトラスリソースの作成

リソース マネージャーで、左上隅にある[+作成] ボタンをクリックし、 [自動アトラス構成]を選択してリソース マネージャーに新しいauto-atlas.pacリソースを作成します。

(2) 自動アトラスの属性記述

属性	機能の説明
最大幅	1 枚のアルバムの最大幅
最大高さ	1 枚のアルバムの最大高さ
間隔	アトラス内の壊れた画像間の間隔
回転を許可する	壊れた画像の回転を許可するかどうか
出力サイズは正方形です	アトラスの長さと幅を強制的に正方形にするかどうか
2 の累乗	アトラスの長さと幅を二次倍数に設定するかどうか
アルゴリズム	アルゴリズム、アトラスパッケージング戦略、現在オプションは 1 つだけですMaxRects
エッジを拡張する	境界線を拡張し、壊れたイメージの境界の外側に 1 ピクセルの外枠を拡張し、隣接する壊れたイメージのピクセルを外枠にコピーします。この機能は押し出しとも呼ばれます
使用しない画像を削除する	参照されていないリソースはビルドに含まれません。デフォルトでチェックされている場合、プレビュー中ではなくビルド後にのみ有効になります。
バンドル内の未使用の Texture2D リソースを削除します。	デフォルトでチェックされている場合、プレビュー中ではなくビルド後にのみ有効になります。
バンドル内の未使用の画像リソースを削除する	デフォルトでチェックされている場合、プレビュー中ではなくビルド後にのみ有効になります。
バンドル内の未使用のスプライト アトラス リソースを削除する	デフォルトでチェックされている場合、プレビュー中ではなくビルド後にのみ有効になります。
CompressTexture を使用する	圧縮テクスチャを使用するかどうか

(3) アトラス結果のプレビュー

構成が完了したら、「プレビュー」ボタンをクリックしてパッケージ化結果をプレビューできます。

(4)、アトラスを生成

アトラスは、プロジェクトのビルド時に実際にプロジェクトに生成されます。

アトラスリソース生成後、パッケージ内の元の小絵のテクスチャやイメージ画像リソースは削除されます。


これら 2 つの特殊なケースには特殊な処理があります。

• アトラスリソースがBundleディレクトリにある場合、通常のアトラスリソースの生成に加え、オリジナルのspriteFrameで生成されたテクスチャリソースや画像リソースも同時に生成されます。リソースについては、 「パッケージが大きすぎます」の原因を回避するために、対応する削除オプションを確認してください。

  
  

• アトラス リソース フォルダー内の spriteFrame に依存するテクスチャが他のリソースによって直接使用される (テクスチャ マップとして直接使用されるなど) 場合、依存するテクスチャとその画像リソースは一緒にパッケージ化されます。

どちらの場合もパッケージのサイズが大きくなり、ビルド時に警告が表示されるため、必要な場合を除き、この方法は使用しないでください。

7. 芸術的なデジタル画像リソース

芸術的デジタル画像リソースは、芸術的デジタル フォントのプロパティを構成するために使用できるユーザー定義のリソースです。

(1) 芸術的なデジタルリソースの作成

エクスプローラー内で右クリックし、 [作成] -> [アーティスティック デジタル構成]を選択するか、エクスプローラーの左上隅にあるプラス ボタンをクリックします。

作成後、芸術的なデジタル リソースを取得します: label-atlas

(2) 芸術的デジタルリソースの属性

属性	機能の説明
スプライトフレーム	希望のフォントスタイルを含む事前に描画された画像を設定します
アイテムの幅	各文字の幅を指定します
アイテムの高さ	各文字の高さを指定する
開始文字	アーティスティックデジタルフォントの最初の文字を指定します。文字がスペースの場合は、この属性にもスペース文字を入力する必要があります。
フォントサイズ	各文字のサイズが表示されます。項目の幅と項目の高さから自動的に計算され、編集することはできません。

(3) 芸術的なデジタルリソースの活用

最初のステップは、以下に示すように、使用前に必要なフォント スタイルを含む SpriteFrame マップを構成することです。

2 番目のステップでは、それをArt Digital ResourcesのSpriteFrameプロパティ ボックスにドラッグします。

3 番目のステップは、階層マネージャーで新しいラベル ノードを作成することです。

4 番目の手順は、プロパティ インスペクターでシステム フォントのチェックを外すことです。

5 番目のステップは、新しく作成した芸術的なデジタル リソースをノードの Label コンポーネントの Font プロパティにドラッグすることです。