キングオブグローリーで顔で芝生を触る正しい姿勢は何ですか？

ここに画像の説明を挿入します

導入

ココスにおける茂み隠れ効果の実装原理。

ゲーム開発では、遮蔽されたモデルの効果を表現するために遠近効果や半透明効果をよく使用します。

この記事では、ココスの王の名誉で草に隠れる効果を実現する方法を紹介します。

この記事のソースプロジェクトは記事の最後で入手できます。友達は自分でそこに行くことができます。

草の中に隠れる効果を実現する方法

ここに画像の説明を挿入します

Honor of Kings in Cocosで草の中に隠れる効果を実現するには、次の点が必要です。

1. モデルの半透明性

モデルの半透明効果を実現するには、次の2 つの条件が必要です。

3D オブジェクトが配置されるレンダリングキューは「透明キュー」です。
3D オブジェクトのカラーalpha値は127 (半透明) に変更されます。

分かった、分かった

2. トリガー

モデルの半透明は草に入るときにトリガーされ、草から離れるとモデルの半透明が回復します。次の2 つのイベントが必要です。Collider

onTriggerEnter:他の人がCollider私のものに入ったときにColliderトリガーされます。
onTriggerExit:他の人がCollider自分から離れたときにColliderトリガーされます。

はいはい

早速、例を挙げてみましょう。

草の中に隠れるキングチキン

次に、King of Gloryで草の中に隠れる効果を段階的に実装していきます。

1. 環境

エンジンバージョン：Cocos Creator 3.8.1

プログラミング言語: TypeScript

2. リソースの準備

まず、「野菜市場」に行き、「野菜」を 2 つかみ購入します。モデルを作るのが好きな友達は、3dmaxで自分でモデルを作ることができます。まず、 3dmaxでの草の効果を見てみましょう。

番組チームはついに良心を取り戻した

次に、とを含むモデルを3dmaxからエクスポートし、それをプロジェクトに追加します。FBXTGA

理解できなくても、そのままにしておいても構いません。

モデルをシーンにドラッグすると、真っ白な草が見えます。

プラスチックのように

芝生を緑に戻すには、次のことを行う必要があります。

マテリアルを変更するにはEffect、それを使用しますbuiltin-unlit。
次にチャンネルをTechnique選択します。transparent
テクスチャを設定します。

木人は123人数えます

処理が完了すると、次のような効果が得られます。

シンプルな表示、究極を追求する友人はそれを調整できます

草の密度が十分ではないため、さらにいくつかをコピーして貼り付けます。

私の髪でもこれができたら最高です Ctrl+C+V

Grass にトリガーイベントを生成させたい場合は、それを追加する必要がありますCollider。これはここで直接使用されておりBoxCollider、簡単かつ高速です:

これを障壁と考えることができます

チェックを入れるとトリガーIs Triggerになります。そうしないと芝生に入ることができなくなります。

そこに集中してください！！！

3. コードを書く

新しいTussockコンポーネントを作成し、それを King Chicken にドラッグします。

@ccclass('Tussock')
export class Tussock extends Component {
    
    
    start() {
    
    
    }

    update(deltaTime: number) {
    
    
    }
}

start()メソッドでコンポーネントを取得し、イベントCapsuleColliderをリッスンします。onTriggerEnteronTriggerExit

start() {
    
    
    var collider = this.getComponent(CapsuleCollider);
    collider.on('onTriggerEnter', (event: ICollisionEvent) => {
    
    
        if (event.otherCollider.node.name == "tussock") {
    
    
            this.setModelTranslucency(true);
        }
    }, this);
    collider.on('onTriggerExit', (event: ICollisionEvent) => {
    
    
        if (event.otherCollider.node.name == "tussock") {
    
    
            this.setModelTranslucency(false);
        }
    }, this);
}

最後に、キングチキンのマテリアルを取得し、その透明度を設定します。material.setProperty('albedo');

setModelTranslucency(flag: boolean) {
    
    
    const material = this.node.getChildByName("rooster_man").getComponent(RenderableComponent)?.sharedMaterials[0]; // 0 表示第一个材质，根据您的需求修改
    material.setProperty('albedo', new Color(255, 255, 255, flag ? 127 : 255));
}