Eine Einführung in die plattformübergreifende Spieleentwicklung für Front-End-Studenten

[Live-Übertragungsvorschau] Werden große Models Programmierer ersetzen? "

Hallo zusammen, ich bin ein Game-Engine-Technologieforscher und ein Programmierer, der viel Front-End-Entwicklungsarbeit geleistet hat. Wenn Sie wissen möchten, wie Sie vom Schreiben von Webseiten zur Entwicklung von Spielen gelangen, sind Sie hier genau richtig!

Heute sprechen wir über die Verwendung von Dora SSR, einer Spiele-Engine, die TSX unterstützt und nativ plattformübergreifend läuft, um Ihnen den einfachen Einstieg in die Welt der Spieleentwicklung zu erleichtern. Keine Sorge, wenn es um Spiel-Engines geht, handelt es sich nicht um unerreichbare Technologien, sondern um überraschende Ähnlichkeiten mit den uns bekannten Front-End-Entwicklungstools.

1. Die Entwicklung von Spielclients kann auch eine Art Front-End-Entwicklung sein

Lassen Sie uns zunächst erklären, was eine Spiel-Engine ist. Einfach ausgedrückt ist eine Spiele-Engine eine Sammlung von Tools und Bibliotheken, die Entwicklern dabei helfen, Spiele zu erstellen und Grafiken, Sound, physikalische Berechnungen oder Kollisionserkennung usw. zu verwalten. Für Front-End-Entwickler können Sie es sich als einen speziellen Browser vorstellen, der zum Ausführen von Spielen entwickelt wurde.

Die Spielszenenverwaltung von Dora SSR verwendet eine Baumstruktur ähnlich dem HTML-DOM, die uns sehr vertraut ist. Stellen Sie sich vor, Sie würden die div-Elemente durch verschiedene Objekte im Spiel ersetzen und die CSS-Animationen durch Spielanimationen ersetzen. Das Konzept ist fast dasselbe, und das Schreiben des Codes könnte ähnlich sein.

2. Von TypeScript zu TSX: Anwendung der Frontend-Technologie in Spielen

Viele Frontend-Entwickler sind mit der JSX-Syntax von TypeScript und React vertraut. Mit der Open-Source-Game-Engine Dora SSR stellen wir durch die Unterstützung von TSX eine Spieleentwicklungsschnittstelle bereit, die dem Front-End-Entwicklungsprogrammiermodell ähnelt. Ja, Sie haben es richtig gehört, dieser TSX.

Wenn Sie TSX zur Entwicklung von Spielen verwenden, können Sie Ihren vorhandenen Front-End-Technologie-Stack – Komponenten, Module und andere moderne Front-End-Technologien – nutzen und diese Konzepte direkt in der Spieleentwicklung wiederverwenden. Darüber hinaus sorgt die Leistungsoptimierung von Dora SSR für einen reibungslosen Betrieb auch in komplexen Spielszenarien.

3. Fordern Sie sich selbst heraus, ein „Angry Birds“-ähnliches Spiel mit 100 Codezeilen zu schreiben.

Okay, genug der Theorie, kommen wir nun zur Praxis. Schauen wir uns an, wie man ein kleines Spiel ähnlich „Angry Birds“ in Dora SSR mit weniger als 100 Zeilen TSX-Code schreibt. Natürlich müssen Sie vor Beginn noch eine Entwicklungsumgebung vorbereiten. Dies ist mit Dora SSR sehr einfach: Ich habe ein Installationspaket , einen Browser und öffne ihn . Nun, fangen wir an, Code zu schreiben und auszuführen. Informationen zur Installation und Inbetriebnahme finden Sie unter: Dora Start!

Sie haben es versehentlich als APK-Paket auf Ihrem Telefon installiert? Greifen Sie dann über dasselbe LAN darauf zu und führen Sie Entwicklung und Debugging direkt auf Ihrem Mobiltelefon durch. 不小心装成了APK包在手机上？那就在同局域网下访问，直接在手机上进行开发调试吧

1. Schreiben Sie das einfachste Spielszenario

Bevor wir den eigentlichen Code schreiben, können wir zunächst einen Kommentar mit einer speziellen Funktion schreiben, die die Web-IDE von Dora SSR anweisen kann, den laufenden Code automatisch im laufenden Betrieb zu aktualisieren, wenn wir zum Speichern der Datei Strg + S drücken, um die Ergebnisse der Codeausführung zu realisieren . Echtzeit-Vorschaufunktion.

// @preview-file on

Anschließend stellen wir die notwendigen Bibliotheken und Komponenten vor. Natürlich fordert uns unser Code-Editor auch dazu auf, die erforderlichen Module automatisch einzuführen, die später im Codierungsprozess vervollständigt werden können:

import { React, toNode, useRef } from 'dora-x';
import { Body, BodyMoveType, Ease, Label, Line, Scale, TypeName, Vec2, tolua } from 'dora';

Das Anzeigen eines Bildes in Dora SSR ist sehr einfach. Verwenden Sie einfach <sprite>eine Beschriftung und toNode()instanziieren Sie die Beschriftung schließlich über eine Funktion in ein Spielobjekt.

toNode(<sprite file='Image/logo.png' scaleX={0.2} scaleY={0.2}/>);

Okay, jetzt beherrschen Sie im Grunde die meisten Tricks der Dora SSR-Spieleentwicklung. Beginnen wir mit der Entwicklung Ihres eigenen Spiels (im Ernst).

2. Schreiben Sie die Komponenten der Spielbox

Als nächstes werden die Kästchen, mit denen wir im Spiel kollidieren, Boxdurch die Komponente definiert, die Attribute wie , numund akzeptiert :xychildren

interface BoxProps {
  num: number;
  x?: number;
  y?: number;
  children?: any | any[];
}

const Box = (props: BoxProps) => {
  const numText = props.num.toString();
  return (
    <body type={BodyMoveType.Dynamic} scaleX={0} scaleY={0} x={props.x} y={props.y} tag={numText}>
      <rect-fixture width={100} height={100}/>
      <draw-node>
        <rect-shape width={100} height={100} fillColor={0x8800ffff} borderWidth={1} borderColor={0xff00ffff}/>
      </draw-node>
      <label fontName='sarasa-mono-sc-regular' fontSize={40}>{numText}</label>
      {props.children}
    </body>
  );
};

Wir verwenden React-ähnliches Schreiben von Funktionskomponenten, um die Definition unserer Box-Komponente zu vervollständigen, wobei:

bodyEigenschaft der Komponente tag: Wird zum Speichern der Punktzahl der Box verwendet.
rect-fixture: Definiert die Kollisionsform der Box.
draw-node: Wird verwendet, um das Erscheinungsbild der Box zu zeichnen.
label: Wird verwendet, um die Punktzahl der Box anzuzeigen.

3. Erstellen Sie nach der TSX-Instanziierung eine Objektreferenz

Verwenden Sie useRef, um zwei Referenzvariablen für die Sicherung zu erstellen, die jeweils auf die kleinen Seiten- und Score-Beschriftungen verweisen:

const bird = useRef<Body.Type>();
const score = useRef<Label.Type>();

4. Erstellen Sie Emissionslinien

Aus der Variablen wird die Emissionslinie erstellt lineund eine Ereignisbehandlung für Berührung (auch Mausklick) hinzugefügt:

let start = Vec2.zero;
let delta = Vec2.zero;
const line = Line();

toNode(
  <physics-world
    onTapBegan={(touch) => {
      start = touch.location;
      line.clear();
    }}
    onTapMoved={(touch) => {
      delta = delta.add(touch.delta);
      line.set([start, start.add(delta)]);
    }}
    onTapEnded={() => {
      if (!bird.current) return;
      bird.current.velocity = delta.mul(Vec2(10, 10));
      start = Vec2.zero;
      delta = Vec2.zero;
      line.clear();
    }}
  >
    {/* ...在物理世界下创建其它游戏元素 ... */}
  </physics-world>
);

Notieren Sie in onTapBegandiesem Fall, wo die Berührung begann, und löschen Sie die Emissionslinie.
Berechnen Sie in onTapMoveddiesem Fall die Distanz, die die Berührung zurückgelegt hat, und aktualisieren Sie die Emissionslinie.
Stellen Sie in onTapEndeddiesem Fall die Startgeschwindigkeit des Vogels ein und räumen Sie die Startlinie basierend auf der durch die Berührung zurückgelegten Distanz frei.

5. Erstellen Sie weitere Spielelemente

Als nächstes verwenden wir <physics-world>das übergeordnete Tag der Spielszene und erstellen darunter weiterhin verschiedene Elemente in der Spielszene:

5.1 Boden

Zunächst bodyerstellen wir mit dem Bauteil einen Untergrund und legen ihn als statischen starren Körper fest:

<body type={BodyMoveType.Static}>
  <rect-fixture centerY={-200} width={2000} height={10}/>
  <draw-node>
    <rect-shape centerY={-200} width={2000} height={10} fillColor={0xfffbc400}/>
  </draw-node>
</body>

type={BodyMoveType.Static}: Zeigt an, dass es sich um einen statischen starren Körper handelt, der von der physikalischen Simulation nicht beeinflusst wird.
rect-fixture: Definieren Sie die Bodenkollisionsform als Rechteck.
draw-node: Wird verwendet, um das Erscheinungsbild des Bodens zu zeichnen.
rect-shape:Zeichne ein Rechteck mit der Farbe Gelb.

5.2 Kasten

Als nächstes verwenden wir die Komponente, die wir zuvor geschrieben haben, Boxum 5 Boxen zu erstellen, verschiedene Anfangspositionen und Punktestände festzulegen und beim Erstellen die Ausgangsanimation abzuspielen:

{
  [10, 20, 30, 40, 50].map((num, i) => (
    <Box num={num} x={200} y={-150 + i * 100}>
      <sequence>
        <delay time={i * 0.2}/>
        <scale time={0.3} start={0} stop={1}/>
      </sequence>
    </Box>
  ))
}

mapFunktion: Wird verwendet, um das Punkte-Array von 10 bis 50 zu durchlaufen und ein Kästchen für jeden Punktestand zu erstellen, bei dem ein Vogel getroffen werden muss.
BoxKomponente: Wird verwendet, um eine Box zu erstellen und die folgenden Eigenschaften zu übergeben:
- num={num}: Die Punktzahl des Kästchens, entsprechend der Zahl im Array.
- x={200}: Die anfängliche x-Achsenposition der Box, die 200 beträgt.
- y={-150 + i * 100}: Die anfängliche Y-Achsenposition der Box, erhöht entsprechend der Erstellungssequenznummer.
sequenceKomponente: Wird zum Erstellen einer Animationssequenz verwendet, die auf dem übergeordneten Knoten abgespielt werden soll, einschließlich der folgenden Animationen:
- delay time={i * 0.2}: Verzögern Sie die Wiedergabe der Animation. Die Verzögerungszeit erhöht sich entsprechend der Erstellungssequenznummer.
- scale time={0.3} start={0} stop={1}: Die Zoom-Animation von nicht angezeigt bis vollständig angezeigt dauert 0,3 Sekunden.

5.3 Birdie

Schließlich bodyerstellen wir den Vogel mithilfe der Komponente und legen die Kollisionsform, das Erscheinungsbild und die Bewertungsbezeichnungen fest:

<body ref={bird} type={BodyMoveType.Dynamic} x={-200} y={-150} onContactStart={(other) => {
  if (other.tag !== '' && score.current) {
    // 累加积分
    const sc = parseFloat(score.current.text) + parseFloat(other.tag);
    score.current.text = sc.toString();
    // 清除被撞箱子上的分数
    const label = tolua.cast(other.children?.last, TypeName.Label);
    if (label) label.text = '';
    other.tag = '';
    // 播放箱子被撞的动画
    other.perform(Scale(0.2, 0.7, 1.0));
  }
}}>
  <disk-fixture radius={50}/>
  <draw-node>
    <dot-shape radius={50} color={0xffff0088}/>
  </draw-node>
  <label ref={score} fontName='sarasa-mono-sc-regular' fontSize={40}>0</label>
  <scale time={0.4} start={0.3} stop={1.0} easing={Ease.OutBack}/>
</body>

ref={bird}: Wird zum refErstellen von Referenzvariablen verwendet, um die spätere Manipulation des Vogels zu erleichtern.
type={BodyMoveType.Dynamic}: Zeigt an, dass es sich um einen dynamischen starren Körper handelt, der von der physikalischen Simulation beeinflusst wird.
onContactStart={(other) => {}}: Die Rückrufverarbeitungsfunktion wird ausgelöst, wenn der physische Körper des Vogels andere Objekte berührt.
disk-fixture: Definieren Sie die Form des Vogels als Scheibe.
draw-node: Wird verwendet, um das Aussehen des Vogels zu zeichnen.
label: Wird verwendet, um die Gesamtpunktzahl des Vogels anzuzeigen.
scale: Wird verwendet, um die Erscheinungsanimation des Vogels abzuspielen.

6. Vervollständigen Sie die Spiellogik

An diesem Punkt haben wir die Kernlogik des Minispiels abgeschlossen. Sie können die Spiellogik weiter verbessern und Funktionen nach Ihren eigenen Vorstellungen hinzufügen. Den vollständigen Democode finden Sie unter diesem Link: Dora-SSR/Assets/Script/Test/Birdy.tsx . Nachfolgend finden Sie einige Screenshots der laufenden Effekte.

<p align=center>Ziehen Sie den Bildschirm, um „Angry Birds“ zu starten</p>

<p align=center>Meine hervorragenden Fähigkeiten ermöglichten es mir, alle Punkte mit einem Schlag zu erzielen</p>

4. Enthüllen Sie kurz die Geheimnisse

1. Hirsch oder Pferd

Tatsächlich kann der von uns geschriebene Spielcode mit der Leistung der Dora SSR-Engine konsistente Laufergebnisse unter Linux, Android, iOS, macOS und Windows gewährleisten. Aber um diesen Code auszuführen, unterstützt unsere Dora SSR-Engine nicht einmal die JavaScript-Laufzeitumgebung ... (Was haben Sie gesagt?)

Ja, die zugrunde liegende Technologieimplementierung von Dora SSR basiert tatsächlich auf der virtuellen Maschine Lua und WASM als Skriptsprachen-Ausführungsumgebung. Unterstützung für TypeScript wird tatsächlich durch die Integration des TypescriptToLua-Compilers ( https://github.com/TypeScriptToLua/TypeScriptToLua ) bereitgestellt. TSTL schreibt das Backend des TypeScript-Sprachcompilers neu, um die TS- und TSX-Codes in äquivalente laufende Lua-Codes zu kompilieren, sodass der TS-Code geladen und auf Dora ausgeführt werden kann. Mit dem Code-Editor von Doras eigener Web-IDE können Sie die Überprüfung und Vervollständigung der TS-Sprache sowie die API-Eingabeaufforderungen der in Dora integrierten Bibliothek durchführen. Für das endgültige Benutzererlebnis müssen Sie sich keine Gedanken darüber machen, ob es sich am Ende um ein Reh oder ein Pferd handelt. Solange der Code die TS-Kompilierungsprüfung besteht, wird er beim Herausziehen genauso ausgeführt.

2. Hängt es mit React zusammen?

Die Antwort auf diese Frage lautet derzeit: Ja (also zum Zeitpunkt der Veröffentlichung nicht). Die wichtigste Funktion von React besteht darin, den Status der Rendering-Komponenten und Geschäftsdaten über Virtual DOM und den Prozess der Ausführung der Tree Diff-Verarbeitung zu synchronisieren. Derzeit ist dieser Mechanismus in Dora SSR nicht implementiert, daher ist das, was Sie derzeit mit TSX geschrieben sehen, der Fall ähnlich wie Der VDOM-Konstruktionscode erstellt zur Laufzeit nur ein einmaliges Spiel-Rendering-Objekt, und die im zugrunde liegenden C++ implementierten Engine-Funktionen sind für die weitere Verarbeitung verantwortlich. Vielleicht werden wir der Spiele-UI-Entwicklung eines Tages die Möglichkeit geben, React für die Zustandssynchronisierung durch die Ausführung von Tree Diff zu imitieren oder SolidJS zu imitieren, um andere auf TSX basierende Rendering-Komponenten-Zustandssynchronisationsmechanismen zu implementieren. Deshalb laden wir Freunde der Front-End-Entwicklung herzlich ein, sich uns anzuschließen, gemeinsam das Dora SSR-Projekt zu spielen, zu studieren, wie man Ideen für die Front-End-Entwicklungstechnologie nutzt, und benutzerfreundlichere und praktischere Räder für die Spieleentwicklung einzuführen.

Endlich ist unsere Q-Gruppe da, herzlich willkommen zum Spielen: 512620381