Uma introdução ao desenvolvimento de jogos multiplataforma para estudantes front-end

[Antevisão da transmissão ao vivo] Os modelos grandes substituirão os programadores? "

Olá a todos, sou um explorador de tecnologia de motores de jogos e um programador que fez muito trabalho de desenvolvimento front-end. Se você quer saber como passar da escrita de páginas web ao desenvolvimento de jogos, você veio ao lugar certo!

Hoje falamos sobre como usar o Dora SSR, um mecanismo de jogo que suporta TSX e roda nativamente em várias plataformas, para ajudá-lo a entrar facilmente no mundo do desenvolvimento de jogos. Não se preocupe, quando se trata de motores de jogos, eles não são tecnologias inatingíveis. Em vez disso, são surpreendentemente semelhantes às ferramentas de desenvolvimento front-end com as quais estamos familiarizados.

1. O desenvolvimento de clientes de jogos também pode ser uma espécie de desenvolvimento front-end

Primeiro, vamos explicar o que é um motor de jogo. Simplificando, um mecanismo de jogo é uma coleção de ferramentas e bibliotecas que ajudam os desenvolvedores a construir jogos e gerenciar gráficos, som, cálculos físicos ou detecção de colisão, etc. Para desenvolvedores front-end, você pode considerá-lo um navegador especial projetado para rodar jogos.

O gerenciamento de cena do jogo do Dora SSR utiliza uma estrutura em árvore semelhante ao HTML DOM, que nos é muito familiar. Imagine substituir os elementos div por vários objetos no jogo e substituir as animações CSS por animações do jogo. O conceito é quase o mesmo e a escrita do código pode ser semelhante.

2. Do TypeScript ao TSX: Aplicação de tecnologia front-end em jogos

Muitos desenvolvedores front-end estão familiarizados com a sintaxe JSX do TypeScript e React. No mecanismo de jogo de código aberto Dora SSR, fornecemos uma interface de desenvolvimento de jogos semelhante ao modelo de programação de desenvolvimento front-end, oferecendo suporte a TSX. Sim, você ouviu certo, aquele TSX.

Usar o TSX para desenvolver jogos significa que você pode aproveitar sua pilha de tecnologia front-end existente – componentes, módulos e outras tecnologias front-end modernas – e reutilizar esses conceitos diretamente no desenvolvimento de jogos. Além disso, a otimização de desempenho do Dora SSR garante um funcionamento suave mesmo em cenários de jogos complexos.

3. Desafie-se a escrever um jogo do tipo “Angry Birds” com 100 linhas de código.

Ok, chega de teoria, vamos entrar na parte prática. Vamos dar uma olhada em como escrever um pequeno jogo semelhante ao "Angry Birds" em Dora SSR com menos de 100 linhas de código TSX. Claro, você ainda precisa preparar um ambiente de desenvolvimento antes de começar. Fazer isso com Dora SSR é muito simples: eu tenho um pacote de instalação , tenho um navegador e o abro . Para instalação e inicialização, consulte: Dora Start!

Instalou-o acidentalmente como um pacote APK no seu telefone? Em seguida, acesse-o na mesma LAN e conduza o desenvolvimento e a depuração diretamente no seu celular. 不小心装成了APK包在手机上？那就在同局域网下访问，直接在手机上进行开发调试吧

1. Escreva o cenário de jogo mais simples

Antes de escrever o código real, podemos primeiro escrever um comentário com uma função especial, que pode dizer ao IDE da Web de Dora SSR para atualizar automaticamente o código em execução quando pressionamos Ctrl + S para salvar o arquivo, de modo a obter os resultados da execução do código Função de visualização em tempo real.

// @preview-file on

Em seguida, apresentamos as bibliotecas e componentes necessários. Claro, nosso editor de código também nos solicitará a introdução automática dos módulos necessários, que podem ser concluídos posteriormente no processo de codificação:

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

Exibir uma imagem no Dora SSR é muito simples, basta usar <sprite>um rótulo e, por fim, toNode()instanciar o rótulo em um objeto de jogo por meio de uma função.

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

Ok, agora que você basicamente dominou a maioria dos truques do desenvolvimento de jogos Dora SSR, vamos começar a fazer seu próprio jogo (sério).

2. Escreva os componentes da caixa do jogo

A seguir, as caixas com as quais colidiremos no jogo serão Boxdefinidas pelo componente, que aceita atributos como num, x, ye :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>
  );
};

Usamos a escrita de componentes de função do tipo React para completar a definição de nosso componente box, onde:

bodyPropriedade do componente tag: utilizada para armazenar a pontuação da caixa.
rect-fixture: Define a forma de colisão da caixa.
draw-node: Usado para desenhar a aparência da caixa.
label: Usado para exibir a pontuação da caixa.

3. Crie uma referência de objeto após a instanciação do TSX

Use useRef para criar duas variáveis de referência para backup, apontando para a página pequena e os rótulos de pontuação, respectivamente:

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

4. Crie linhas de emissão

A linha de emissão é criada a partir lineda variável e a manipulação de eventos para toque (também clique do mouse) é adicionada:

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

No onTapBegancaso, registre onde o toque começou e limpe a linha de emissão.
Nesse onTapMovedcaso, calcule a distância percorrida pelo toque e atualize a linha de emissão.
No onTapEndedcaso, defina a velocidade de lançamento do pássaro e limpe a linha de lançamento com base na distância percorrida pelo toque.

5. Crie outros elementos do jogo

A seguir, usamos <physics-world>a tag pai da cena do jogo e continuamos a criar vários elementos na cena do jogo abaixo dela:

5.1 Terreno

Primeiro, bodycriamos um terreno usando o componente e o definimos como um corpo 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 este é um corpo rígido estático e não será afetado pela simulação física.
rect-fixture: Defina a forma da colisão com o solo como um retângulo.
draw-node: Usado para desenhar a aparência do solo.
rect-shape:Desenhe um retângulo com a cor amarela.

5.2 Caixa

A seguir, usamos o componente que escrevemos antes Boxpara criar 5 caixas, definir diferentes posições iniciais e pontuações e reproduzir a animação de saída ao criar:

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

mapFunção: Usado para percorrer a matriz de pontuação de 10 a 50 e criar uma caixa para cada pontuação que requer um pássaro para ser atingido.
BoxComponente: usado para criar uma caixa e passar as seguintes propriedades:
- num={num}: A pontuação da caixa, correspondente ao número na matriz.
- x={200}: A posição inicial do eixo x da caixa, que é 200.
- y={-150 + i * 100}: A posição inicial do eixo y da caixa, incrementada de acordo com o número da sequência de criação.
sequenceComponente: usado para criar uma sequência de animação a ser reproduzida no nó pai, incluindo as seguintes animações:
- delay time={i * 0.2}: Atrasa a reprodução da animação e o tempo de atraso aumenta de acordo com o número da sequência de criação.
- scale time={0.3} start={0} stop={1}: a animação de zoom, de não exibida a totalmente exibida, leva 0,3 segundos.

5.3 Passarinho

Por fim, bodycriamos o pássaro usando o componente e definimos a forma da colisão, a aparência e os rótulos de pontuação:

<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}: Use para refcriar variáveis de referência para facilitar a manipulação subsequente do pássaro.
type={BodyMoveType.Dynamic}: Indica que este é um corpo rígido dinâmico e será afetado pela simulação física.
onContactStart={(other) => {}}: A função de processamento de retorno de chamada é acionada quando o corpo físico do pássaro toca outros objetos.
disk-fixture: Defina o formato do pássaro como um disco.
draw-node: Usado para desenhar a aparência do pássaro.
label: Usado para exibir a pontuação acumulada da ave.
scale: Usado para reproduzir a animação da aparência do pássaro.

6. Complete a lógica do jogo

Neste ponto, completamos a lógica central do minijogo. Você pode melhorar ainda mais a lógica do jogo e adicionar funções de acordo com suas próprias ideias. O código de demonstração completo pode ser encontrado neste link: Dora-SSR/Assets/Script/Test/Birdy.tsx . Abaixo estão algumas capturas de tela dos efeitos de execução.

<p align=center>Arraste a tela para iniciar o "Angry Birds"</p>

<p align=center>Minhas excelentes habilidades me permitiram marcar todos os pontos com um único golpe</p>

4. Revele brevemente os segredos

1. Veado ou cavalo

Na verdade, o código do jogo que escrevemos pode garantir resultados de execução consistentes em Linux, Android, iOS, macOS e Windows com o poder do mecanismo Dora SSR. Mas para executar este código, nosso mecanismo Dora SSR nem suporta ambiente de execução JavaScript... (O que você disse?)

Sim, a implementação da tecnologia subjacente do Dora SSR é, na verdade, baseada na máquina virtual Lua e WASM como ambiente de execução da linguagem de script. O suporte para TypeScript é, na verdade, fornecido pela integração do compilador TypescriptToLua ( https://github.com/TypeScriptToLua/TypeScriptToLua ). TSTL reescreve o backend do compilador da linguagem TypeScript para compilar os códigos TS e TSX em códigos Lua de execução equivalentes, para que o código TS possa ser carregado e executado no Dora. No editor de código do próprio IDE Web da Dora, ele pode ajudá-lo a fazer a verificação e conclusão da linguagem TS, bem como os prompts da API da biblioteca integrada da Dora. Para a experiência final do usuário, você não precisa se preocupar se no final é um cervo ou um cavalo. Contanto que o código passe na verificação de compilação do TS, ele será executado da mesma forma quando for retirado.

2. Está relacionado ao React?

A resposta a esta pergunta é atualmente: sim (portanto, não no momento da publicação). A capacidade mais importante do React é sincronizar o status de renderização de componentes e dados de negócios por meio do Virtual DOM e do processo de execução do processamento Tree Diff. Atualmente, esse mecanismo não foi implementado no Dora SSR, então o que você vê atualmente escrito usando TSX é. semelhante a O código de construção VDOM construirá apenas um objeto de renderização de jogo único em tempo de execução, e as funções do mecanismo implementadas no C++ subjacente serão responsáveis pelo processamento contínuo. Talvez um dia forneceremos ao desenvolvimento de UI de jogos a capacidade de imitar o React para sincronização de estado executando Tree Diff ou imitar SolidJS para implementar outros mecanismos de sincronização de estado de componente de renderização baseados em TSX. Portanto, convidamos sinceramente amigos de desenvolvimento front-end para se juntarem a nós, jogarem juntos o projeto Dora SSR, estudarem como usar ideias de tecnologia de desenvolvimento front-end e apresentarem rodas mais fáceis de usar e convenientes para o desenvolvimento de jogos.

Finalmente, nosso grupo Q está aqui, seja bem-vindo para brincar: 512620381