Wissen Sie, wie Sie den Effekt von Dravens Flugaxt und Fangaxt in LOL erzielen können?

Einführung

Einfaches Beispiel für Tween in Cocos.

In der Spieleentwicklung verwenden wir Tween häufig, um einige einfache Animationen wie Drehung, Verschiebung usw. zu implementieren.

In diesem Artikel erfahren Sie, wie Sie die Wirkung von Dravens Fähigkeiten beim Fliegen und Fangen von Äxten in LOL erzielen können .

Das Quellprojekt dieses Artikels finden Sie am Ende des Artikels. Freunde können selbst dorthin gehen.

Grundkonzepte von Tween

Tween (interpolierte Animation) ist ein Mechanismus zum Erstellen reibungsloser Animationseffekte .

Sie können damit zwischen zwei numerischen Werten interpolieren und so einen Übergangseffekt zwischen ihnen erzeugen .

Tween bietet eine einfache und flexible Möglichkeit, Ziele zu erleichtern.

Lassen Sie uns ohne weitere Umschweife ein Beispiel geben.

Draven nimmt die Axt

Als nächstes werden wir Schritt für Schritt die Auswirkungen von Dravens Fähigkeiten, Äxte zu fliegen und Äxte zu fangen, in LOL umsetzen .

1. Umwelt

Engine-Version : Cocos Creator 3.8.1

Programmiersprache : TypeScript

2. Ressourcenvorbereitung

Erstellen Sie zunächst zwei Würfel und drücken Sie sie in lange Streifen . Lassen Sie uns sie als zwei Achsen von Chicken Draven verwenden (dieses Programmteam ist zu arm ).

Erstellen Sie dann zwei Knoten, links und rechts , für das Draven-Huhn und hängen Sie dann den Würfel daran. Achten Sie darauf , einen Knoten in der Mitte hinzuzufügen , damit die Drehung des Würfels , der die Axt darstellt, nicht beeinträchtigt wird.

Fügen Sie unser Draven- Skript hinzu und ziehen Sie die beiden Knoten axe1 und axe2 nach oben , die wir steuern müssen .

3. Code schreiben

Zuerst tween().bywird der Winkel der Axt um 360 vergrößert, dann wird repeatForever()die Schleifenvergrößerung implementiert und schließlich wird start()die Animation gestartet.

for (let i = 0; i < this.axes.length; i++) {
    
    
    tween(this.axes[i].children[0]).by(0.25, {
    
     angle: 360 }).repeatForever().start();
}

Dadurch entsteht der Effekt einer rotierenden Axt .

Wenn man dann input.on(Input.EventType.KEY_DOWN, event => {})auf die Tastaturereignisse hört , fliegt die Axt, wenn die Leertaste gedrückt wird.

input.on(Input.EventType.KEY_DOWN, event => {
    
    
    if (event.keyCode == KeyCode.SPACE) {
    
    
    }
}

Dann berechnen Sie einfach ein paar Koordinaten:

• position1 : Die Koordinaten vor dem Huhn wurden korrigiert. Tatsächlich wird das Spiel die Position des Zielfeindes sein . Da es im Beispiel keine Feinde gibt, können Interessierte es selbst implementieren .
• Position2 : Der höchste Punkt , an dem die Axt zurückprallt , d. h. der höchste Punkt des parabolischen Effekts.
• Position3 : Der letzte Landepunkt , an dem die Axt zurückprallt . Hier handelt es sich um eine zufällige Position des Protagonisten oder feste Positionen auf der linken und rechten Seite.

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));

Animation 1 : Lassen Sie die Axt in 0,3 Sekunden worldPositionvon der aktuellen Position zur Zielposition fliegen, indem Sie die Weltkoordinaten ändern .position1

tween(this.axes[0])
  .to(0.3, {
    
    
      worldPosition: position1
  })

Animation 2 : Berechnen Sie die Koordinaten der Axt durch die Rückrufmomente von 贝塞尔曲线坐标函数und und stellen Sie sie so ein, dass eine parabolische Animation entsteht .tweenonUpdate

//计算贝塞尔曲线坐标函数
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);
      }
  })

Lassen Sie die Axt zurücksetzen , indem .call()Sie einen Play-Completion-Callback hinzufügen , bevor der Pass die Animation startet..start()

.call(() => {
    
    
    this.axes[0].parent = parent;
    this.axes[0].position = v3();
    this.axes[0].setRotationFromEuler(new Vec3(0, 90, 0));
    this.hideSkillRangeIndicator();
})
.start();

Für die Implementierung des Indikatorkreises für die Axtlandung können Sie meinen empfohlenen Artikel „ Skill Range Indicator “ lesen. Am Ende des Artikels gibt es einen Link, daher werde ich hier nicht zu sehr auf die Erklärung eingehen.

4. Ergebnispräsentation

Abschluss

Das Quellprojekt dieses Artikels kann durch Senden einer privaten Nachricht an Draven erhalten werden .

Kürzlich wurde der Autor von Qilinzi (der sich seit 15 Jahren intensiv mit Game-Engine und Spieleentwicklung beschäftigt und jeder Tropfen praktischer Informationen aus der kommerziellen Projektpraxis stammt ) als Gast zum Wissensplaneten eingeladen . Der Planet wird hauptsächlich genutzt für:

• Nachhilfeunterricht
• Kommunikation zu Lernthemen
• Erste Schritte und Fortgeschrittene für Neueinsteiger
• Rekrutierung und gemeinsame Nutzung von Beschäftigungsmöglichkeiten
• Sammlung von Interviewfragen
• Erfahrungsaustausch im Vorstellungsgespräch

Im Allgemeinen hat Planet nur ein Ziel : hochwertige Inhalte bereitzustellen und sich für das Lernen zu engagieren . Interessierte Freunde können den Code scannen , um mehr zu erfahren und Unterstützung zu erhalten.

Ich bin ein „Milliarden-Dollar-Programmierer“, ein Programmierer mit 8 Jahren Erfahrung in der Spielebranche. Bei der Spieleentwicklung hoffe ich, Ihnen helfen zu können, und ich hoffe, dass ich durch Sie allen helfen kann.

ANZEIGE: Sie können selbst auf die Online-Minispiele des Autors „Snake Handheld Classic“, „Gravity Maze Ball“ und „Coloring Journey“ klicken und suchen.

Ehrlich gesagt möchte ich es mögen und sehen ! Bitte teilen Sie diesen Artikel mit anderen Freunden, von denen Sie glauben, dass sie ihn brauchen. Danke!

Empfohlene Spalten:

Wissen Sie, wie Honor of Kings den Skill-Range-Indikator implementiert?

8 Jahre Erfahrung im schrittweisen Aufbau des unabhängigen Cocos-Spieleentwicklungs-Frameworks

Lernen Sie Designmuster mit einem 8-jährigen Game-Master-Programmierer

Entwickeln Sie das Snake-Minispiel von Grund auf zu einer Online-Serie