Une introduction au développement de jeux multiplateformes pour les étudiants front-end

[Aperçu de diffusion en direct] Les grands modèles remplaceront-ils les programmeurs ? "

Bonjour à tous, je suis un explorateur de technologie de moteur de jeu et un programmeur qui a effectué beaucoup de travail de développement front-end. Si vous souhaitez savoir comment passer de l'écriture de pages web au développement de jeux, vous êtes au bon endroit !

Aujourd'hui, nous expliquons comment utiliser Dora SSR, un moteur de jeu prenant en charge TSX et fonctionnant de manière native sur plusieurs plates-formes, pour vous aider à entrer facilement dans le monde du développement de jeux. Ne vous inquiétez pas, en ce qui concerne les moteurs de jeu, ce ne sont pas des technologies inaccessibles, ils sont plutôt étonnamment similaires aux outils de développement front-end que nous connaissons.

1. Le développement de clients de jeux peut également être une sorte de développement front-end

Tout d’abord, expliquons ce qu’est un moteur de jeu. En termes simples, un moteur de jeu est un ensemble d'outils et de bibliothèques qui aident les développeurs à créer des jeux et à gérer les graphiques, le son, les calculs physiques ou la détection de collisions, etc. Pour les développeurs front-end, vous pouvez le considérer comme un navigateur spécial conçu pour exécuter des jeux.

La gestion des scènes de jeu de Dora SSR utilise une arborescence similaire au HTML DOM, qui nous est très familière. Imaginez remplacer les éléments div par divers objets dans le jeu et remplacer les animations CSS par des animations de jeu. Le concept est presque le même et l'écriture du code peut être similaire. Cela ne semble-t-il pas intéressant ?

2. De TypeScript à TSX : application de la technologie front-end dans les jeux

De nombreux développeurs front-end connaissent la syntaxe JSX de TypeScript et React. Dans le moteur de jeu open source Dora SSR, nous fournissons une interface de développement de jeux similaire au modèle de programmation de développement front-end en prenant en charge TSX. Oui, vous avez bien entendu, ce TSX.

Utiliser TSX pour développer des jeux signifie que vous pouvez tirer parti de votre pile technologique frontale existante (composants, modules et autres technologies frontales modernes) et réutiliser ces concepts directement dans le développement de jeux. De plus, l'optimisation des performances de Dora SSR garantit un fonctionnement fluide même dans des scénarios de jeu complexes.

3. Mettez-vous au défi d'écrire un jeu de type « Angry Birds » en 100 lignes de code.

Bon, assez de théorie, passons aux choses pratiques. Voyons comment écrire un petit jeu similaire à "Angry Birds" dans Dora SSR avec moins de 100 lignes de code TSX. Bien sûr, vous devez toujours préparer un environnement de développement avant de commencer. Faire cela avec Dora SSR est très simple : j'ai un package d'installation , j'ai un navigateur et je l'ouvre . Eh bien, commençons à écrire du code et à l'exécuter. Pour l'installation et le démarrage, voir : Dora Start !

Vous l'avez accidentellement installé en tant que package APK sur votre téléphone ? Accédez-y ensuite sous le même réseau local et effectuez le développement et le débogage directement sur votre téléphone mobile. 不小心装成了APK包在手机上？那就在同局域网下访问，直接在手机上进行开发调试吧

1. Écrivez le scénario de jeu le plus simple

Avant d'écrire le code réel, nous pouvons d'abord écrire un commentaire avec une fonction spéciale, qui peut indiquer à l'IDE Web de Dora SSR de mettre automatiquement à jour à chaud le code en cours d'exécution lorsque nous appuyons sur Ctrl + S pour enregistrer le fichier, afin de réaliser les résultats de l'exécution du code. . Fonction de prévisualisation en temps réel.

// @preview-file on

Ensuite, nous introduisons les bibliothèques et composants nécessaires. Bien entendu, notre éditeur de code nous demandera également d'introduire automatiquement les modules requis, qui pourront être complétés plus tard dans le processus de codage :

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

Afficher une image dans Dora SSR est très simple, il suffit d'utiliser <sprite>une étiquette, et enfin toNode()d'instancier l'étiquette dans un objet de jeu via une fonction.

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

D'accord, maintenant que vous maîtrisez la plupart des astuces du développement de jeux Dora SSR, commençons à créer votre propre jeu (sérieusement).

2. Écrire les composants de la boîte de jeu

Ensuite, les cases avec lesquelles nous entrerons en collision dans le jeu seront Boxdéfinies par le composant, qui accepte des attributs tels que num, x, yet :children

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

Nous utilisons l'écriture de composants de fonction de type React pour compléter la définition de notre composant box, où :

bodyPropriété du composant tag: permet de stocker le score de la boîte.
rect-fixture: Définit la forme de collision de la boîte.
draw-node: Utilisé pour dessiner l'apparence de la boîte.
label: Permet d'afficher le score de la boîte.

3. Créez une référence d'objet après l'instanciation TSX

Utilisez useRef pour créer deux variables de référence pour la sauvegarde, pointant respectivement vers la petite page et les étiquettes de score :

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

4. Créer des raies d'émission

La ligne d'émission est créée à partir de linela variable, et la gestion des événements pour le toucher (également le clic de souris) est ajoutée :

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

Dans onTapBegance cas, enregistrez l'endroit où le contact a commencé et effacez la ligne d'émission.
Dans onTapMovedce cas, calculez la distance parcourue par le contact et mettez à jour la ligne d'émission.
Dans onTapEndedce cas, réglez la vitesse de lancement de l'oiseau et dégagez la ligne de lancement en fonction de la distance parcourue par le toucher.

5. Créez d'autres éléments de jeu

Ensuite, nous utilisons <physics-world>la balise parent de la scène de jeu et continuons à créer divers éléments dans la scène de jeu en dessous :

5.1 Terre

Tout d'abord, nous bodycréons un sol à l'aide du composant et le définissons comme un corps rigide statique :

<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}: Indique qu'il s'agit d'un corps rigide statique et qu'il ne sera pas affecté par la simulation physique.
rect-fixture: Définissez la forme de la collision au sol comme un rectangle.
draw-node: Utilisé pour dessiner l'apparence du sol.
rect-shape:Dessinez un rectangle de couleur jaune.

5.2 Encadré

Ensuite, nous utilisons le composant que nous avons écrit précédemment Boxpour créer 5 boîtes, définir différentes positions et scores initiaux et jouer l'animation de sortie lors de la création :

{
  [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>
  ))
}

mapFonction : utilisé pour parcourir le tableau de scores de 10 à 50 et créer une boîte pour chaque score nécessitant qu'un oiseau frappe.
BoxComposant : utilisé pour créer une boîte et transmettre les propriétés suivantes :
- num={num}: Le score de la case, correspondant au numéro dans le tableau.
- x={200}: La position initiale de l'axe X de la boîte, qui est 200.
- y={-150 + i * 100}: La position initiale sur l'axe y de la boîte, incrémentée en fonction du numéro de séquence de création.
sequenceComposant : utilisé pour créer une séquence d'animation à jouer sur le nœud parent, comprenant les animations suivantes :
- delay time={i * 0.2}: Retardez la lecture de l'animation et le temps de retard augmente en fonction du numéro de séquence de création.
- scale time={0.3} start={0} stop={1}: L'animation du zoom, de non affiché à entièrement affiché, prend 0,3 seconde.

5.3 Oiseau

Enfin, nous bodycréons l'oiseau à l'aide du composant et définissons la forme, l'apparence et les étiquettes de score de la collision :

<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}: Utilisé pour refcréer des variables de référence afin de faciliter la manipulation ultérieure de l'oiseau.
type={BodyMoveType.Dynamic}: Indique qu'il s'agit d'un corps rigide dynamique et qu'il sera affecté par la simulation physique.
onContactStart={(other) => {}}: La fonction de traitement de rappel se déclenche lorsque le corps physique de l'oiseau touche d'autres objets.
disk-fixture: Définissez la forme de l'oiseau comme un disque.
draw-node: Utilisé pour dessiner l'apparence de l'oiseau.
label: Utilisé pour afficher le score cumulé de l'oiseau.
scale: Utilisé pour jouer l’animation d’apparition de l’oiseau.

6. Complétez la logique du jeu

À ce stade, nous avons terminé la logique de base du mini-jeu. Vous pouvez encore améliorer la logique du jeu et ajouter des fonctions selon vos propres idées. Le code de démonstration complet peut être trouvé sur ce lien : Dora-SSR/Assets/Script/Test/Birdy.tsx . Vous trouverez ci-dessous quelques captures d'écran des effets en cours.

<p align=center>Faites glisser l'écran pour lancer "Angry Birds"</p>

<p align=center>Mes superbes compétences m'ont permis de marquer tous les points en un seul coup</p>

4. Révélez brièvement les secrets

1. Cerf ou cheval

En fait, le code du jeu que nous avons écrit peut garantir des résultats cohérents sur Linux, Android, iOS, macOS et Windows grâce à la puissance du moteur Dora SSR. Mais pour exécuter ce code, notre moteur Dora SSR ne prend même pas en charge l'environnement d'exécution JavaScript... (Qu'avez-vous dit ?)

Oui, la mise en œuvre technologique sous-jacente de Dora SSR est en fait basée sur la machine virtuelle Lua et WASM comme environnement d'exécution du langage de script. La prise en charge de TypeScript est en fait fournie en intégrant le compilateur TypescriptToLua ( https://github.com/TypeScriptToLua/TypeScriptToLua ). TSTL réécrit le backend du compilateur du langage TypeScript pour compiler les codes TS et TSX en codes Lua équivalents, afin que le code TS puisse être chargé et exécuté sur Dora. Sous l'éditeur de code de l'IDE Web de Dora, il peut vous aider à effectuer la vérification et l'achèvement du langage TS ainsi que les invites de l'API de la bibliothèque intégrée de Dora. Pour l'expérience utilisateur finale, vous n'avez pas à vous soucier de savoir s'il s'agit finalement d'un cerf ou d'un cheval. Tant que le code peut passer le contrôle de compilation TS, il fonctionnera de la même manière lorsqu'il sera retiré.

2. Est-ce lié à React ?

La réponse à cette question est actuellement : oui (donc pas au moment de la publication). La capacité la plus importante de React est de synchroniser l'état des composants de rendu et des données commerciales via Virtual DOM et le processus d'exécution du traitement Tree Diff. Actuellement, ce mécanisme n'a pas été implémenté dans Dora SSR, donc ce que vous voyez actuellement écrit en utilisant TSX l'est. similaire à Le code de construction VDOM ne construira qu'un objet de rendu de jeu unique au moment de l'exécution, et les fonctions du moteur implémentées dans le C++ sous-jacent seront responsables du traitement continu. Peut-être qu'un jour nous offrirons au développement de l'interface utilisateur du jeu la possibilité d'imiter React pour la synchronisation d'état en exécutant Tree Diff, ou d'imiter SolidJS pour implémenter d'autres mécanismes de synchronisation d'état de composants de rendu basés sur TSX. Par conséquent, nous invitons sincèrement les amis du développement front-end à nous rejoindre, à jouer ensemble au projet Dora SSR, à étudier comment utiliser les idées technologiques de développement front-end et à introduire des roues plus faciles à utiliser et plus pratiques pour le développement de jeux.

Enfin, notre groupe Q est là, bienvenue pour venir jouer : 512620381