導入
Cocos の Tween の簡単な例。
ゲーム開発では、回転や移動などの単純なアニメーションを実装するためにTweenをよく使用します。
この記事では、 LOLでDravenのスキルの飛行と斧の捕捉の効果を実現する方法を紹介します。
この記事のソースプロジェクトは記事の最後で入手できます。友達は自分でそこに行くことができます。
Tween の基本概念
トゥイーン(補間アニメーション) は、滑らかなアニメーション効果を作成するためのメカニズムです。
2 つの数値の間を補間して、それらの間にトランジション効果を作成できます。
Tween は、ターゲットを緩和するためのシンプルかつ柔軟な方法を提供します。
早速、例を挙げてみましょう。
ドレイヴンは斧を取る
次に、LOLでのDravenの飛行斧と捕捉斧のスキルの効果を段階的に実装します。
1. 環境
エンジンバージョン：Cocos Creator 3.8.1
プログラミング言語: TypeScript
2. リソースの準備
まず、Cube を2 つ作成し、それらを細長く、 Chicken Dravenの2 つの軸として使用しましょう(このプログラム チームはあまりにも貧弱)。
次に、 Draven Chicken のleftとrightの 2 つのノードを作成し、その上にCubeを掛けます。軸であるCubeの回転が影響を受けないように、中央にノードを追加するように注意してください。
Dravenスクリプトを追加し、制御する必要がある2 つのノードaxe1とaxe2をドラッグします。
3. コードを書く
まずtween().by斧の角度を 360 度増加させ、次にrepeatForever()ループ増加を実装し、最後にstart()アニメーションを開始します。
for (let i = 0; i < this.axes.length; i++) {
tween(this.axes[i].children[0]).by(0.25, {
angle: 360 }).repeatForever().start();
}
これにより、斧が回転する効果が生まれます。
次に、キーボード イベントinput.on(Input.EventType.KEY_DOWN, event => {})をリッスンすると、スペースが押されたときに斧が飛びます。
input.on(Input.EventType.KEY_DOWN, event => {
if (event.keyCode == KeyCode.SPACE) {
}
}
次に、いくつかの座標を計算するだけです。
- Position1 : ニワトリの前の座標を固定します実際にはターゲットの敵の位置になります例では敵がいないので興味のある方はご自身で実装してください
- Position2 :斧が跳ね返る最高点、つまり放物線効果の最高点。
- Position3 :斧が跳ね返される最終着地点。ここはランダムな主人公の位置、または左右の固定位置です。
let position1 = this.player.forward.normalize().multiplyScalar(-2).add3f(0, 0.5, 0).add(this.player.worldPosition);
let position2 = this.player.forward.normalize().multiplyScalar(-1).add3f(0, 4, 0).add(this.player.worldPosition);
let rand = Math.floor(Math.random() * 3) - 1;
let position3 = this.player.right.normalize().multiplyScalar(rand).add(this.player.worldPosition);
let parent = this.axes[0].parent;
let position = this.axes[0].worldPosition.clone();
this.axes[0].parent = this.player.parent;
this.axes[0].worldPosition = position;
this.axes[0].lookAt(position1);
this.axes[0].rotate(Quat.fromEuler(new Quat(), 0, 90, 0));
アニメーション 1、ワールド座標を変更して、斧をworldPosition現在位置から目標位置まで0.3秒で飛行させますposition1。
tween(this.axes[0])
.to(0.3, {
worldPosition: position1
})
アニメーション 2贝塞尔曲线坐标函数 :と のコールバックtweenモーメントを通じて斧の座標を計算しonUpdate、放物線アニメーションを形成するように設定します。
//计算贝塞尔曲线坐标函数
let twoBezier = (t: number, p1: Vec3, cp: Vec3, p2: Vec3) => {
let x = (1 - t) * (1 - t) * p1.x + 2 * t * (1 - t) * cp.x + t * t * p2.x;
let y = (1 - t) * (1 - t) * p1.y + 2 * t * (1 - t) * cp.y + t * t * p2.y;
let z = (1 - t) * (1 - t) * p1.z + 2 * t * (1 - t) * cp.z + t * t * p2.z;
return new Vec3(x, y, z);
};
tween(this.axes[0].worldPosition)
.to(1, position3, {
onUpdate: (target: Vec3, ratio: number) => {
this.axes[0].worldPosition = twoBezier(ratio, position1, position2, position3);
}
})
パスがアニメーションを開始する前に、再生完了コールバックを.call()追加して斧をリセットします。.start()
.call(() => {
this.axes[0].parent = parent;
this.axes[0].position = v3();
this.axes[0].setRotationFromEuler(new Vec3(0, 90, 0));
this.hideSkillRangeIndicator();
})
.start();
斧着地のインジケーターサークルの実装については、私のおすすめ記事「 Skill Range Indicator 」を参照してください。記事の最後にリンクがあるので、ここではあまり説明しません。
4.結果発表
結論
この記事のソース プロジェクトは、Draven にプライベート メッセージを送信することで取得できます。
最近、著者はQilinzi (ゲーム エンジンとゲーム開発に15 年間深く携わっており、実用的な情報はすべて商業プロジェクトの実践から得ています)からゲストとしてKnowledge Planetに参加するよう招待されました。のために：
- 家庭教師の指導
- 学習上の問題に関するコミュニケーション
- 初心者のための入門編と上級編
- 採用と雇用機会の共有
- 面接の質問集
- 面接体験の共有
一般に、Planet の目標は1 つだけです。それは、高品質のコンテンツを提供し、学習に取り組むことです。興味のある友人はコードをスキャンして詳細を確認し、サポートすることができます。
私は「Billion Dollar Programmer」、ゲーム業界で8年の経験を持つプログラマーです。ゲーム開発において、皆さんのお役に立てれば幸いです。また、皆さんを通して皆さんのお役に立てれば幸いです。
AD: 作者のオンライン ミニゲーム「Snake Handheld Classic」、「Gravity Maze Ball」、「Coloring Journey」をクリックして自分で検索できます。
正直、いいねして見たい！この記事を必要と思われる他の友達と共有してください。ありがとう！
推奨されるコラム:
Honor of Kings がスキル範囲インジケーターをどのように実装しているかご存知ですか?
Cocos の独立系ゲーム開発フレームワークを段階的に構築してきた 8 年の経験