Einführung
Beispiel einer mittleren Bodenbewegung in Cocos.
Bei der Spieleentwicklung stoßen wir häufig auf die Notwendigkeit , den Spieler durch Klicken auf den Boden so zu steuern , dass er sich zu einem bestimmten Punkt bewegt .
In diesem Artikel erfahren Sie, wie Sie in Cocos ähnliche Punkt- und Bodenbewegungseffekte wie LOL erzielen .
Das Quellprojekt dieses Artikels finden Sie am Ende des Artikels. Freunde können selbst dorthin gehen.
Klicken Sie auf den Boden, um Wissenspunkte zu verschieben
Um punktuelle Bodenbewegungseffekte ähnlich wie LOL in Cocos zu erzielen , gibt es die folgenden zwei Wissenspunkte:
1. Wandeln Sie die Koordinaten des Bildschirmraums in Strahlen um
Wenn der Spieler in einem Spiel auf einen Punkt auf dem Bildschirm klickt , möchten Sie möglicherweise wissen, durch welchen Punkt auf dem Bildschirm der von der Kamera emittierte Strahl geht , um weitere Interaktion oder Erkennung zu ermöglichen .
Wir müssen also die Koordinaten eines Bildschirmraums (die obere linke Ecke ist der Ursprung) in einen Strahl umwandeln .
Die API, die wir in Cocos verwenden müssen, ist .Camera.screenPointToRay
2. Erkennen Sie alle Kollisionsboxen durch Strahlen
Die Strahlerkennung ist eine häufig verwendete Technologie, mit der festgestellt wird , ob sich ein Strahl mit Objekten in der Spielszene schneidet , wodurch Funktionen wie Klickerkennung und Raycasting erreicht werden.
Daher müssen wir alle Kollisionsfelder erkennen und alle erkannten Ergebnisse aufzeichnen .
In Cocos führen wir PhysicsSystem.instance.raycast(ray)die Erkennung durch und PhysicsSystem.instance.raycastResultsgreifen auf die Ergebnisse zu.
Lassen Sie uns ohne weitere Umschweife ein Beispiel geben.
Beispiel für eine Punkt-Bodenbewegung
Als nächstes werden wir Schritt für Schritt den Punkt-Bodenbewegungseffekt ähnlich wie bei LOL implementieren .
1. Umwelt
Engine-Version : Cocos Creator 3.8.1
Programmiersprache : TypeScript
2. Ressourcenvorbereitung
Leihen wir uns einfach die kostenlose Ressource „ KylinsEasyController “ von Kylinzi im Cocos-Einkaufszentrum aus, um ein Projekt zu erstellen.
Erstellen Sie dann selbst einen Kegel , um die Klickstelle anzuzeigen ( die Programmgruppe ist weiterhin wie immer angeschnallt ).
Verwenden Sie den Animationseditor, um einen einfachen Auf- und Ab-Bewegungseffekt zu erstellen .
3. Code schreiben
Erstellen Sie eine neue TouchMoveKomponente und ziehen Sie sie auf die Leinwand .
@ccclass('TouchMove')
export class TouchMove extends Component {
@property(Node)
pointerNode: Node;
}
start()Durch this.node.onAbhören von Ereignissen in der Methode NodeEventType.MOUSE_DOWN.
start() {
this.node.on(NodeEventType.MOUSE_DOWN, (event: EventMouse) => {
}, this);
}
Rufen Sie dann das angeklickte Objekt mit der folgenden Methode ab .
event.getLocation()Rufen Sie die Bildschirmkoordinaten des Klicks ab.camera.screenPointToRay(uiPos.x, uiPos.y, ray)Generieren Sie Strahlen über Bildschirmkoordinaten.PhysicsSystem.instance.raycast(ray)Führen Sie eine Strahlenkollisionserkennung durch und zeichnen Sie die Ergebnisse auf.PhysicsSystem.instance.raycastResultsRufen Sie die Ergebnisse der Strahlenerkennung ab und ermitteln Sie das gewünschte Objekt anhand des Namens oder anderer Informationen.
var uiPos = event.getLocation();
var ray = new geometry.Ray();
camera.screenPointToRay(uiPos.x, uiPos.y, ray);
if (PhysicsSystem.instance.raycast(ray)) {
const raycastResults = PhysicsSystem.instance.raycastResults;
for (let i = 0; i < raycastResults.length; i++) {
const item = raycastResults[i];
if (item.collider.node.name == "Plane") {
}
}
} else {
console.log('raycast does not hit the target node !');
}
Verwenden Sie abschließend die folgende Methode , um den Indikator anzuzeigen und den Charakter zu bewegen .
item.hitPointHolen Sie sich die Koordinaten des Klicks..active = trueund.setWorldPosition(item.hitPoint)Zeigerkoordinaten anzeigen und einstellen.player.lookAtLegen Sie die Ausrichtung des Charakters fest.skeletalAnimation.crossFade("anim_rig_run", 0.1)Spielen Sie die Animation überskeletalAnimationdie Komponente ab.tween(player)Realisieren Sie Charakterbewegungen durch Tween -Animationen.
this.pointerNode.active = true;
this.pointerNode.setWorldPosition(item.hitPoint);
player.lookAt(new Vec3(player.worldPosition.x * 2 - item.hitPoint.x, player.position.y, player.worldPosition.z * 2 - item.hitPoint.z));
skeletalAnimation.crossFade("anim_rig_run", 0.1);
let duration = Vec3.distance(player.worldPosition, item.hitPoint) * speed;
if (playerTween) {
playerTween.stop();
}
playerTween = tween(player);
playerTween.to(duration, {
worldPosition: item.hitPoint }).call(() => {
skeletalAnimation.crossFade("anim_rig_idle_1", 0.1);
this.pointerNode.active = false;
}).start();
4. Wirkungsdemonstration
Damit ist das heutige Programm abgeschlossen. Bitte helfen Sie mit, den Artikel weiterzuleiten. Raus aus dem Unterricht ist vorbei!
Abschluss
Das Quellprojekt dieses Artikels kann durch Senden einer privaten Nachricht an TouchMove erhalten werden .
Für praktischere Quellcodes können Sie den Code scannen oder den Originaltext lesen . Die Bezahlung ist nicht nur der Erwerb von Wissen , sondern auch die Unterstützung und Anerkennung des Autors . Vielen Dank!
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