So verwenden Sie einen Gamecontroller in CocosCreator

So verwenden Sie einen Gamecontroller in CocosCreator

1. Szenenlayout

2. Fügen Sie einen Handle-Listener hinzu

1. Eventänderungen überwachen

Umstieg von der Original Mausserie auf die Touch-Serie

  1. Touchstart-Touch-Presse, entspricht Mousedown
  2. touchmove Berührungsbewegung, entspricht mousemove
  3. touchend Touch-Up, entspricht Mouseup
  4. touchcancel Touch abgebrochen, durch andere Ereignisse beendet, entspricht dem Drücken der ESC-Taste

2. Koordinateneinstellung

Wenn die Berührung gedrückt wird, ändert sich die Druckposition (verwenden Sie die Weltkoordinatenkonvertierung), und wenn die Berührung angehoben wird, kehrt sie zur ursprünglichen Position zurück (direkt auf 0 eingestellt, 0-Koordinaten sind die standardmäßigen relativen Koordinaten).
setPosition() legt die Koordinaten relativ zum übergeordneten Knoten fest.

  beiBerührenBewegung(e:cc.Event.EventTouch){

         // e.getLocation() ist der angeklickte Ort, also die Weltkoordinate. // Die Weltkoordinate muss in die lokale Koordinate umgewandelt werden. let parent=this.node.parent; // Übergeordneter Knoten (kreisförmiges Chassis)
        let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
        dies.node.setPosition(pos);

    }

    beiBerührenAbbrechen(){
      dies.node.setPosition(cc.v3(0,0,0));
    }

3. Beschränken Sie den Griff auf das Tablett

Verwenden Sie den Azimutwinkel, um die Kantenposition zu lokalisieren. Die Methode pos.normalize() gibt (cos, sin) des Punkts relativ zu (0, 0) zurück und gibt ein Vec2-Objekt zurück.

let parent=this.node.parent; // Übergeordneter Knoten (kreisförmiges Chassis)
let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
// Die Position des Punktes (cos, sin)
lass Richtung:cc.Vec2=pos.normalize();
// Begrenzen Sie auf innerhalb der Grenze let maxR = 100-20;   
//Der Abstand vom angeklickten Punkt zur Mitte des Tabletts let r : number = cc.Vec2.distance(pos, cc.v2(0,0));

wenn(r > maxR)
{
	pos.x = maxR * Richtung.x; 
	pos.y = maxR * Richtung.y;
}
// cc.log("Relative Position: " + pos.x + ", " + pos.y);
this.node.setPosition( pos);

3. Fahrzeugsteuerung hinzufügen

1. Drehung des Autos

cc.Knoten.Winkel
Gibt den Drehwinkel an, gegen den Uhrzeigersinn ist positiv. Die offizielle Empfehlung lautet, cc.Node.rotationa.signAngle( b) nicht zu verwenden.
a und b sind zwei Vektoren und der Rückgabewert ist der Winkel zwischen a und b (im Bogenmaß).
Radiant = a.Vorzeichenwinkel(b)
(1) a verläuft im Uhrzeigersinn von b: der Winkel ist positiv
(2) a verläuft gegen den Uhrzeigersinn von b: der Winkel ist negativ

Rotationsimplementierung:
Fügen Sie das Attribut „car: cc.Node=null;“ hinzu, um den Autoknoten zu erhalten.
cc.find() Beachten Sie, dass der Parameter einen Schrägstrich "/" verwendet, um das Divisionszeichen zu trennen, da es sonst nicht erkannt wird

beim Laden () {
     this.car=cc.find("Leinwand/Auto");
}
let radian = pos.signAngle (cc.v2 (1,0)); //Berechnen Sie den Winkel zwischen der Klickposition und der Horizontale let ang = radian / Math.PI * 180; //Wandle Radiant in Winkel um this.car.angle = -ang; //Gegen den Uhrzeigersinn ist positiv, also hier auf im Uhrzeigersinn anpassen

2. Bewegung des Autos

  1. Fügen Sie dem Skript des Autos eine Vorwärtsanimation hinzu und fügen Sie in der Methode update(dt) in jedem Frame die entsprechenden Geschwindigkeitskomponenten auf den x- und y-Achsen zu x und y hinzu.
  2. Holen Sie sich das Skript unter dem Autoknoten im Handle-Steuerungsskript. Der oben ermittelte Richtungswinkel wird an das Autoskript übergeben. Steuern Sie die Bewegung des Autos, indem Sie die Richtung steuern.

Skript zur Autobewegung

Richtung: cc.Vec2 = null;
Geschwindigkeit: Zahl = 3;

beim Laden() {

}

Start() {

}

update(dt) {
	if (this.direction == null) return; //Stillstand let dx = this.speed * this.direction.x;
	sei dy = diese.Geschwindigkeit * diese.Richtung.y;

	Lassen Sie pos = this.node.getPosition();
	pos.x += dx;
	pos.y += dy;
	dies.node.setPosition(pos);
}

Gamepad-Steuerungsskript

Auto: cc.Node = null;
Carscript: cc.Komponente = null;
// LEBENSZYKLUS-RÜCKRUFE:

beim Laden() {
	dieses.Auto = cc.find("Canvas/Auto");
	dieses.carscript = dieses.car.getComponent("CarMove");
}

Start() {
	dies.node.on('touchstart', dies.onTouchStart, dies);
	dies.node.on('touchmove', dies.onTouchMove, dies);
	dies.node.on('touchend', dies.onTouchCancel, dies);
	dies.node.on('touchcancel', dies.onTouchCancel, dies);
}

beiBerührenStart() {

}

beiBerührenBewegung(e: cc.Event.EventTouch) {

	// e.getLocation() ist der angeklickte Ort, also die Weltkoordinate. // Die Weltkoordinate muss in eine lokale Koordinate umgewandelt werden. // let parent=this.node.parent;// Übergeordneter Knoten (kreisförmiges Chassis)
	// let pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation());
	// dies.node.setPosition(pos);

	let parent = this.node.parent; // Übergeordneter Knoten (kreisförmiges Chassis)
	let pos: cc.Vec2 = parent.convertToNodeSpaceAR(e.getLocation());
	// Die Position des Punktes (cos, sin)
	let-Richtung: cc.Vec2 = pos.normalize();
	// Begrenzen Sie auf innerhalb der Grenze let maxR = 100 - 20;

	sei r: Zahl = cc.Vec2.Distanz(pos, cc.v2(0, 0));

	wenn (r > maxR) {
		pos.x = maxR * Richtung.x;
		pos.y = maxR * Richtung.y;
	}
	// cc.log("Relative Position: " + pos.x + ", " + pos.y);
	dies.node.setPosition(pos);

	let radian = pos.signAngle(cc.v2(1, 0)); //Winkel zwischen der Klickposition und der Horizontale berechnen let ang = radian / Math.PI * 180; //Radiant in Winkel umwandeln this.car.angle = -ang; //Gegen den Uhrzeigersinn ist positiv, also hier auf im Uhrzeigersinn anpassen this.carscript.direction = direction;

}

beiBerührenAbbrechen() {
	this.node.setPosition(cc.v3(0, 0, 0));
	//Setzen Sie die Richtung auf null, um das Auto anzuhalten. this.carscript.direction = null;

}
// aktualisieren (dt) {}

Endergebnis

Oben finden Sie Einzelheiten zur Verwendung des Gamecontrollers in CocosCreator. Weitere Informationen zu CocosCreator-Controllerbeispielen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • CocosCreator Erste Schritte Tutorial: Netzwerkkommunikation
  • Cocos2d-x 3.x Erste Schritte Tutorial (Teil 2): ​​Node-Klasse
  • Cocos2d-x 3.x Erste Schritte Tutorial (I): Grundkonzepte
  • Cocos2d-x Erste Schritte Tutorial (ausführliche Beispiele und Erklärungen)
  • Detaillierte Erklärung zur Erstellung von Schießspielen mit CocosCreator
  • So zeichnen Sie in CocosCreator ein cooles Radardiagramm
  • Detaillierte Erklärung der CocosCreator MVC-Architektur
  • Detaillierte Erläuterung des CocosCreator-Nachrichtenverteilungsmechanismus
  • So erstellen Sie WeChat-Spiele mit CocosCreator
  • Detaillierte Erklärung, wie CocosCreator-Systemereignisse generiert und ausgelöst werden
  • Detaillierte Erklärung des digitalen Puzzles CocosCreator Huarongdao
  • CocosCreator-Tutorial für den Einstieg: Erstellen Sie Ihr erstes Spiel mit TS

<<:  Analyse der gemeinsamen Indexfunktion von MySQL und Anwendungsbeispiele

>>:  So erstellen Sie eine Swap-Partitionsdatei in Linux

Artikel empfehlen

5 häufig verwendete Objekte in JavaScript

Inhaltsverzeichnis 1. JavaScript-Objekte 1).Array...

Zusammenfassung des Verständnisses des virtuellen DOM in Vue

Es handelt sich im Wesentlichen um ein allgemeine...

So reduzieren Sie die Bildgröße mithilfe des mehrstufigen Docker-Builds

In diesem Artikel wird beschrieben, wie Sie die m...

Das Miniprogramm implementiert nativ das linksseitige Schubladenmenü

Inhaltsverzeichnis WXS-Antwortereignis Plan A Sei...

Design-Sharing der Download-Seite des Pengyou.com-Mobilclients (Bild und Text)

Schauen wir uns zunächst einige einfache Daten an:...

Vorschläge zur Optimierung der Webseiten-Kopfzeile

Logo-Optimierung: 1. Das Logobild sollte so klein...

So ändern Sie den Benutzer und die Gruppe einer Datei in Linux

Wenn unter Linux eine Datei erstellt wird, ist de...

Verwendung des Linux-Befehls „userdel“

1. Befehlseinführung Der Befehl userdel (User Del...