CocosCreator でカメラトラッキングに cc.follow を使用する方法

CocosCreator でカメラトラッキングに cc.follow を使用する方法

Cocos Creator バージョン: 2.3.4

デモのダウンロード: https://files-cdn.cnblogs.com/files/gamedaybyday/cocos2.3.4_ccfollow.7z

まず、cocoscreator に付属するフォロー コード cc.follow を使用しましょう。

CC.Followの使用

1. マップアダプタコンテナのleftNodeを設定する

これは水平パルクールゲームだとしましょう。マップのサイズは 1500x1500 なので、leftNode の高さと幅は 1500x1500 になり、ウィジェットは左下に配置されます。

2. マップコンテナマップを設定する

マップコンテナも 1500x1500 です。leftNode との違いは、アダプタコンポーネントウィジェットがないことです。ウィジェットを使用すると、マップを移動することはできません。このため、画面に適応するために leftNode の追加レイヤーが使用されます。

マップには役割があります。 (通常のcc.Buttonボタン)

地図の端を識別するために、地図の周囲に赤いボタンがあります。

Follow.ts コンポーネントをマップ コンテナーに追加し、ターゲット ロールを Role に設定します。ロールはボタン cc.Button であり、ここでは移動ロールとして扱います。

Follow.ts のコードは次のとおりです。

const {ccclass、プロパティ} = cc._decorator;
 
@ccクラス
デフォルトクラスFollowをエクスポートし、cc.Componentを拡張します。
 
    @property(cc.Node)
    ターゲット:cc.Node = null;
 
    始める () {
        var follow = cc.follow(this.target, cc.rect(0,0, 1500,1500));
        this.node.runAction(フォロー);
    }
}

3. 仮想ジョイスティックでキャラクターの動きをコントロール

仮想ジョイスティックリファレンス: https://www.cnblogs.com/gamedaybyday/p/13061387.html

知らなくても問題ありません。他の方法でキャラクターの動きを制御し、キャラクターの x と y を変更できれば問題ありません。

4. 実際の実証効果

キャラクターが移動すると、「カメラ」が自動的にキャラクターを追い、赤いボタンが配置されている境界を超えない 1500 x 1500 の範囲に制限されていることがわかります。

CC.Followのソースコード

ソースコードはCC.Action.jsにあります

上記は、CocosCreator でカメラ フォローに cc.follow を使用する方法の詳細です。CocosCreator でのカメラ フォローの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Unity3Dはカメラレンズの動きを実現し、角度を制限する
  • CocosCreatorで複数のタイマーを使用する方法の詳細な説明
  • CocosCreator 学習モジュールスクリプト
  • CocosCreator で物理エンジン ジョイントを使用する方法
  • CocosCreatorでJSZip圧縮を使用する方法
  • CocosCreator 入門チュートリアル: TS で初めてのゲームを作る
  • CocosCreator ソースコードの解釈: エンジンの起動とメインループ
  • CocosCreator 一般的なフレームワーク設計リソース管理
  • CocosCreatorでリストを作成する方法
  • CocosCreator で http と WebSocket を使用する方法
  • CocosCreator の新しいリソース管理システムの分析

<<:  SQL 文における複合主キーと結合主キーに関する予備的研究

>>:  Centos 7.4 サーバーの時刻同期設定方法 [NTP サービスに基づく]

推薦する

SQL文のパフォーマンスを分析するための標準的な要約

この記事では、explain を使用して SQL ステートメントを分析する方法を紹介します。実際、イ...

WeChatミニプログラムページとコンポーネント間の情報伝達と機能呼び出し

今回は、私自身の開発経験を踏まえて、以下の観点で関連内容を解説します。ページからコンポーネントにデー...

垂直方向の中央揃えをエレガントに実現する方法を教えます(推奨)

序文CSS で水平方向と垂直方向に中央揃えする方法はたくさんあります。この記事で紹介する方法は非常に...

jQueryアニメーションを理解するのに役立つ記事

目次1. 要素の表示と非表示を制御する show() hide() 2. 要素の透明度を制御する f...

MySQLデータベースの基礎知識と操作のまとめ

この記事では、例を使用して、MySQL データベースの基本的な知識と操作について説明します。ご参考ま...

Vueはシンプルな虫眼鏡効果を実装します

この記事では、参考までに、簡単な虫眼鏡効果を実現するためのVueの具体的なコードを紹介します。具体的...

XHTML 3つの文書型宣言

XHTML は 3 つのドキュメント タイプ宣言を定義します。最もよく使用されるのは XHTML T...

VUE でタブページを切り替える 4 つの方法

目次1. 静的実装方法: 2. 第2のシミュレーション動的方法3. 3番目の動的データ方式4. 動的...

Docker - コンテナマウントディレクトリを変更する3つの方法のまとめ

方法 1: 設定ファイルを変更する (docker サービスを停止する必要があります) 1. doc...

Vue で wangeditor リッチテキスト編集を使用する際の問題

wangEditor は、JavaScript と CSS に基づいて開発された Web リッチ テ...

CSS は Apple のスムーズなスイッチ ボタン効果を模倣します

目次1. コード分析2. ソースコードソースコード1. コード分析1.1 HTMLコード分析 <...

nginx で複数の仮想ホストを設定する方法の例

nginx で仮想ホスト vhost を設定すると非常に便利です。 nginx設定ファイルnginx...

vue+rem カスタムカルーセル効果

vue+remを使用したカスタムカルーセルチャートの実装は参考までに。具体的な内容は以下のとおりです...

Javascript における分割代入構文の詳細な説明

序文ES6 で初めて導入された「構造化代入構文」を使用すると、配列やオブジェクトの値を異なる変数に挿...

Linux環境でのshadowsocks+polipoグローバルプロキシの設定

1. シャドウソックスをインストールするsudo apt-get install python-pi...