Una introducción al desarrollo de juegos multiplataforma para estudiantes de front-end

[Vista previa de la transmisión en vivo] ¿Los modelos grandes reemplazarán a los programadores? "

Hola a todos, soy un explorador de tecnología de motores de juegos y un programador que ha realizado mucho trabajo de desarrollo front-end. Si quieres saber cómo pasar de escribir páginas web a desarrollar juegos, ¡has venido al lugar correcto!

Hoy hablamos sobre cómo usar Dora SSR, un motor de juego que admite TSX y se ejecuta multiplataforma de forma nativa, para ayudarte a ingresar fácilmente al mundo del desarrollo de juegos. No se preocupe, cuando se trata de motores de juegos, no son tecnologías inalcanzables, sino que son sorprendentemente similares a las herramientas de desarrollo front-end que conocemos.

1. El desarrollo de clientes de juegos también puede ser un tipo de desarrollo front-end.

Primero, expliquemos qué es un motor de juego. En pocas palabras, un motor de juego es una colección de herramientas y bibliotecas que ayudan a los desarrolladores a crear juegos y administrar gráficos, sonido, cálculos físicos o detección de colisiones, etc. Para los desarrolladores de aplicaciones para el usuario, pueden considerarlo como un navegador especial diseñado para ejecutar juegos.

La gestión de la escena del juego de Dora SSR utiliza una estructura de árbol similar a HTML DOM, que nos resulta muy familiar. Imagínese reemplazar los elementos div con varios objetos en el juego y reemplazar las animaciones CSS con animaciones del juego. El concepto es casi el mismo y la escritura del código puede ser similar.

2. De TypeScript a TSX: Aplicación de tecnología front-end en juegos

Muchos desarrolladores de aplicaciones para el usuario están familiarizados con la sintaxis JSX de TypeScript y React. En el motor de juegos de código abierto Dora SSR, proporcionamos una interfaz de desarrollo de juegos similar al modelo de programación de desarrollo front-end al admitir TSX. Sí, has oído bien, ese TSX.

Usar TSX para desarrollar juegos significa que puede aprovechar su pila de tecnología front-end existente (componentes, módulos y otras tecnologías front-end modernas) y reutilizar estos conceptos directamente en el desarrollo de juegos. Además, la optimización del rendimiento de Dora SSR garantiza un funcionamiento fluido incluso en escenarios de juego complejos.

3. Ponte a prueba y escribe un juego similar a "Angry Birds" con 100 líneas de código.

Bien, basta de teoría, entremos en lo práctico. Echemos un vistazo a cómo escribir un pequeño juego similar a "Angry Birds" en Dora SSR con menos de 100 líneas de código TSX. Por supuesto, todavía necesitas preparar un entorno de desarrollo antes de comenzar. Hacer esto con Dora SSR es muy simple: tengo un paquete de instalación , tengo un navegador y lo abro . Bueno, comencemos a escribir código y ejecutarlo. Para la instalación y el inicio, consulte: Dora Start!

¿Lo instaló accidentalmente como un paquete APK en su teléfono? Luego acceda a él bajo la misma LAN y realice el desarrollo y la depuración directamente en su teléfono móvil. 不小心装成了APK包在手机上？那就在同局域网下访问，直接在手机上进行开发调试吧

1. Escribe el escenario del juego más simple.

Antes de escribir el código real, primero podemos escribir un comentario con una función especial, que puede indicarle al IDE web de Dora SSR que actualice automáticamente el código en ejecución cuando presionamos Ctrl + S para guardar el archivo, a fin de obtener los resultados de la ejecución del código. Función de vista previa en tiempo real.

// @preview-file on

Luego, presentamos las bibliotecas y componentes necesarios. Por supuesto, nuestro editor de código también nos pedirá que introduzcamos automáticamente los módulos necesarios, que se pueden completar más adelante en el proceso de codificación:

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

Mostrar una imagen en Dora SSR es muy simple, solo use <sprite>una etiqueta y finalmente toNode()cree una instancia de la etiqueta en un objeto del juego a través de una función.

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

Bien, ahora que básicamente dominas la mayoría de los trucos del desarrollo de juegos de Dora SSR, comencemos a crear tu propio juego (en serio).

2. Escribe los componentes de la caja del juego.

A continuación, las cajas con las que colisionamos en el juego serán Boxdefinidas por el componente, que acepta atributos como num, y :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>
  );
};

Usamos la escritura de componentes de funciones similares a React para completar la definición de nuestro componente de caja, donde:

bodyPropiedad del componente tag: se utiliza para almacenar la puntuación de la caja.
rect-fixture: Define la forma de colisión de la caja.
draw-node: Se utiliza para dibujar la apariencia de la caja.
label: Se utiliza para mostrar la puntuación del cuadro.

3. Cree una referencia de objeto después de la creación de instancias de TSX.

Utilice useRef para crear dos variables de referencia para la copia de seguridad, apuntando a la página pequeña y a las etiquetas de puntuación respectivamente:

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

4. Crea líneas de emisión

La línea de emisión se crea a partir de linela variable y se agrega manejo de eventos para el tacto (también clic del mouse):

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

En onTapBeganese caso, registre dónde comenzó el toque y borre la línea de emisión.
En onTapMovedese caso, calcule la distancia que se movió el toque y actualice la línea de emisión.
En onTapEndedese caso, establezca la velocidad de lanzamiento del pájaro y despeje la línea de lanzamiento según la distancia recorrida por el toque.

5. Crea otros elementos del juego.

A continuación, usamos <physics-world>la etiqueta principal de la escena del juego y continuamos creando varios elementos en la escena del juego debajo de ella:

5.1 Tierra

Primero, bodycreamos un terreno usando el componente y lo configuramos como un cuerpo rígido estático:

<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}: Indica que se trata de un cuerpo rígido estático y no se verá afectado por la simulación física.
rect-fixture: define la forma de colisión terrestre como un rectángulo.
draw-node: Se utiliza para dibujar la apariencia del suelo.
rect-shape:Dibuja un rectángulo con el color amarillo.

5.2 Caja

A continuación, usamos el componente que escribimos antes Boxpara crear 5 cuadros, establecer diferentes posiciones y puntuaciones iniciales y reproducir la animación de salida al crear:

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

mapFunción: Se utiliza para recorrer la matriz de puntuación de 10 a 50 y crear un cuadro para cada puntuación que requiere que un pájaro acierte.
BoxComponente: se utiliza para crear un cuadro y pasarle las siguientes propiedades:
- num={num}: La puntuación del cuadro, correspondiente al número de la matriz.
- x={200}: La posición inicial del eje x del cuadro, que es 200.
- y={-150 + i * 100}: La posición inicial del eje y del cuadro, incrementada según el número de secuencia de creación.
sequenceComponente: se utiliza para crear una secuencia de animación que se reproducirá en el nodo principal, incluidas las siguientes animaciones:
- delay time={i * 0.2}: Retrasa la reproducción de la animación y el tiempo de retraso aumenta según el número de secuencia de creación.
- scale time={0.3} start={0} stop={1}: La animación de zoom, desde no mostrada hasta mostrada por completo, tarda 0,3 segundos.

5.3 pajarito

Finalmente, bodycreamos el pájaro usando el componente y configuramos la forma de colisión, la apariencia y las etiquetas de puntuación:

<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}: Se utiliza para refcrear variables de referencia para facilitar la manipulación posterior del ave.
type={BodyMoveType.Dynamic}: Indica que se trata de un cuerpo rígido dinámico y se verá afectado por la simulación física.
onContactStart={(other) => {}}: La función de procesamiento de devolución de llamada se activa cuando el cuerpo físico del pájaro toca otros objetos.
disk-fixture: define la forma del pájaro como un disco.
draw-node: Se utiliza para dibujar la apariencia del pájaro.
label: Se utiliza para mostrar la puntuación acumulada del ave.
scale: Se utiliza para reproducir la animación de aparición del pájaro.

6. Completa la lógica del juego.

En este punto, hemos completado la lógica central del minijuego. Puedes mejorar aún más la lógica del juego y agregar funciones según tus propias ideas. El código de demostración completo se puede encontrar en este enlace: Dora-SSR/Assets/Script/Test/Birdy.tsx . A continuación se muestran algunas capturas de pantalla de los efectos en ejecución.

<p align=center>Arrastra la pantalla para iniciar "Angry Birds"</p>

<p align=center>Mis magníficas habilidades me permitieron sumar todos los puntos de un solo golpe</p>

4. Revele brevemente los secretos

1. Venado o caballo

De hecho, el código del juego que escribimos puede garantizar resultados de ejecución consistentes en Linux, Android, iOS, macOS y Windows con la potencia del motor Dora SSR. Pero para poder ejecutar este código, nuestro motor Dora SSR ni siquiera soporta el entorno de ejecución de JavaScript... (¿Qué dijiste?)

Sí, la implementación de la tecnología subyacente de Dora SSR en realidad se basa en la máquina virtual Lua y WASM como entorno de ejecución del lenguaje de secuencias de comandos. En realidad, la compatibilidad con TypeScript se proporciona integrando el compilador TypescriptToLua ( https://github.com/TypeScriptToLua/TypeScriptToLua ). TSTL reescribe el backend del compilador del lenguaje TypeScript para compilar los códigos TS y TSX en códigos Lua equivalentes en ejecución, de modo que el código TS pueda cargarse y ejecutarse en Dora. En el editor de código del IDE web de Dora, puede ayudarle a realizar la verificación y finalización del lenguaje TS, así como las indicaciones de la API de la biblioteca integrada de Dora. Para la experiencia del usuario final, no tiene que preocuparse por si al final es un ciervo o un caballo, siempre que el código pueda pasar la verificación de compilación de TS, se ejecutará de la misma manera cuando se extraiga.

2. ¿Está relacionado con React?

La respuesta a esta pregunta actualmente es: sí (no al momento de la publicación). La capacidad más importante de React es sincronizar el estado de los componentes de representación y los datos comerciales a través de Virtual DOM y el proceso de ejecución del procesamiento Tree Diff. Actualmente, este mecanismo no se ha implementado en Dora SSR, por lo que lo que actualmente ve escrito usando TSX es. similar a El código de construcción VDOM solo creará un objeto de representación del juego de una sola vez en tiempo de ejecución, y las funciones del motor implementadas en el C ++ subyacente serán responsables del procesamiento continuo. Quizás algún día proporcionemos al desarrollo de la interfaz de usuario del juego la capacidad de imitar React para la sincronización de estado ejecutando Tree Diff, o imitar SolidJS para implementar otros mecanismos de sincronización de estado de componentes de renderizado basados en TSX. Por lo tanto, invitamos sinceramente a amigos de desarrollo front-end a unirse a nosotros, jugar juntos el proyecto Dora SSR, estudiar cómo utilizar ideas de tecnología de desarrollo front-end e introducir ruedas más convenientes y fáciles de usar para el desarrollo de juegos.

Finalmente, nuestro grupo Q está aquí, bienvenidos a venir a jugar: 512620381