CocosCreatorがスキルCD効果を実現多くのゲームにはスキルがあります。プレイヤーがスキルボタンをクリックすると、そのスキルにはクールダウン時間があります。クールダウン時間が終了すると、そのスキルは再び使用できるようになります。 Cocos でこの効果を実現するのは非常に簡単です。スプライト コンポーネントを使用する必要があります。まず、スキル ボタンの画像をキャンバスにドラッグします。 次に、スキルボタンの下に新しいラベルを作成します 次に、新しいTSスクリプトを作成し、次のコードをコピーして貼り付けます。 const {ccclass、プロパティ} = cc._decorator; @ccクラス デフォルトクラス NewClass をエクスポートし、cc.Component を拡張します。 @property(cc.Sprite) skill:cc.Sprite = null; //スキルスプライト @property(cc.Label) time_label:cc.Label = null; //スキルクールの残り時間をテキストで表示します @property time:number = 3; //スキルのクールタイム @property isshow_label:boolean = true; //テキストを表示するかどうか onLoad(){ this.skill.fillRange = 1; //ゲーム開始時のスキル充填範囲は1です } 更新(dt:数値){ if(this.skill.fillRange != 1){//スキルウィザードの充填度が1でない場合は、スキルが使用されたことを意味しますthis.skill.fillRange += dt / this.time;//スキルのフレームごとに復元される値は、フレームレート / スキルクールダウン時間ですthis.time_label.string = Math.floor(((1 - this.skill.fillRange) * this.time)).toString();//フレームごとにスキルの残り時間を更新します//スキルの残り時間は、最初に1 - スキルウィザードの充填度、次に* スキルクールダウン時間、最後にMath.floorで丸められますif(this.isshow_label == true){//テキストを表示できる場合this.time_label.node.active = true;//スキルクールダウンの残り時間を表示します} } if(this.skill.fillRange == 1){//スキルスプライトの塗りつぶしが 1 の場合、スキルがまだ使用されていないことを意味します this.skill.getComponent(cc.Button).interactable = true;//開始ボタン this.time_label.node.active = false;//スキルクールダウンの残り時間を非表示にします} } onbtn(){//スキルボタンが押されたときのイベント this.skill.fillRange = 0;//スキルの塗りつぶし範囲は0に設定されます console.log("使用されたスキル"); //ログを印刷 this.skill.getComponent(cc.Button).interactable = false; //ボタンを無効にする} } コードの各行に詳細なコメントを記述しました。 書いたスクリプトをスキルボタンに掛けてノードをバインドする 必要に応じて変更可能
コードを書くだけでは十分ではありません。スキル ボタンの設定もいくつか行う必要があります。スプライト コンポーネントを変更し、スキル ボタンにボタン コンポーネントを追加する必要があります。 写真に合わせて調整してください
最後に、スキルボタンにボタンコンポーネントを追加します。 バインドされたイベントは onbtn です。見栄えを良くするには、ボタン コンポーネントの Transition を COLOR に変更します。 完了です。[実行] をクリックして確認してください。 本当に良い スキルボタンをクリックしたら、onbtn にコードを入力するだけです。 ここに入れてください 例えば、スキルボタンを押すと特殊効果アニメーションを再生することができます 上記は、CocosCreator がスキル冷却効果を実装する方法の詳細です。CocosCreator スキル冷却の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: MySQL 5.5.27 インストール グラフィック チュートリアル
この記事では、携帯電話のカメラとアルバムにアクセスするためのVueの具体的なコードを参考までに共有し...
結果:実装コード: html <!-- よろしければハートを付けてください! --> &...
この記事の例では、Vueの具体的なコードを共有し、zipファイルをダウンロードして参考にしています。...
まず、github から nacos の圧縮パッケージをダウンロードします: https://git...
この記事の例では、動的な時計を実装するためのJS + CSSの具体的なコードを参考までに共有していま...
序文lvm (論理ボリューム マネージャー) 論理ボリューム管理は、Linux システムのニーズを満...
# Windows および Linux 上の Redis のインストール デーモン構成Redis の...
この記事では、Webオンラインチャットを実装するためのVueの具体的なコードを参考までに紹介します。...
1. 各関数はオブジェクトであり、メモリを占有します。メモリ内のオブジェクトが増えるほど、パフォーマ...
目次導入説明書実際の経験まとめ導入MySQL は最も人気のあるオープンソース データベースとして、さ...
実は多くの会社がユーザー権限ツリーに似た機能を持っています。最近、追加、削除、修正のツリー構造を書き...
構文フォーマット: row_number() over(partition by grouping ...
バイナリ docker 19.03 バージョンがインストール後に docker0 ブリッジを自動的に...
目次if判定の最適化1. 最も簡単な方法:判断2. より良い方法: スイッチ3. より良いアプローチ...
目次Linux MySQL 5.5 が MySQL 5.7 にアップグレードされました1. mysq...