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

Detaillierte Erklärung langer Transaktionsbeispiele in MySQL

Vorwort: Die Artikelserie „Erste Schritte mit MyS...

Beispiel für die Validierung eines JavaScript-Formulars

HTML-Formulare werden häufig verwendet, um Benutz...

Erweiterte Closures in JavaScript erklärt

Inhaltsverzeichnis 1. Das Konzept der Schließung ...

Zusammenfassung der Probleme bei der Installation von MySQL 5.7.19 unter Linux

Als ich MySQL zum ersten Mal auf meiner virtuelle...

MySQL-Import- und Export-Sicherungsdetails

Inhaltsverzeichnis 1. Detaillierte Erklärung der ...

CentOS 7 Installations- und Konfigurations-Tutorial unter VMware10

Während Ubuntu heute das beliebteste Linux-Betrie...

Tipps zum Anzeigen von Text in Linux (super praktisch!)

Vorwort Bei der täglichen Entwicklung müssen wir ...

4 Scan-Tools für den Linux-Desktop

Obwohl die papierlose Welt noch nicht angebrochen...

MySQL-Datenbanktabelle und Datenbankpartitionierungsstrategie

Lassen Sie uns zunächst darüber sprechen, warum w...

Beispiel zur Optimierung der MySQL-Einfügeleistung

MySQL-Leistungsoptimierung Die MySQL-Leistungsopt...

JavaScript-Datenvisualisierung: ECharts-Kartenerstellung

Inhaltsverzeichnis Überblick Vorsichtsmaßnahmen 1...