프론트엔드 학생들을 위한 크로스 플랫폼 게임 개발 소개

안녕하세요 여러분, 저는 게임 엔진 기술 탐구자이자 많은 프론트엔드 개발 작업을 해본 프로그래머입니다. 웹 페이지 작성부터 게임 개발까지 어떻게 진행하는지 알고 싶다면 제대로 찾아오셨습니다!

오늘 우리는 TSX를 지원하고 기본적으로 크로스 플랫폼을 실행하는 게임 엔진인 Dora SSR을 사용하여 게임 개발의 세계에 쉽게 들어갈 수 있는 방법에 대해 이야기합니다. 걱정하지 마십시오. 게임 엔진은 달성할 수 없는 기술이 아니라 우리에게 익숙한 프런트엔드 개발 도구와 놀라울 정도로 유사합니다.

1. 게임 클라이언트 개발은 일종의 프론트엔드 개발일 수도 있습니다.

먼저 게임 엔진이 무엇인지 설명해보자. 간단히 말해서, 게임 엔진은 개발자가 게임을 구축하고 그래픽, 사운드, 물리 계산 또는 충돌 감지 등을 관리하는 데 도움이 되는 도구 및 라이브러리 모음입니다. 프런트엔드 개발자의 경우 게임을 실행하기 위해 설계된 특별한 브라우저라고 생각하면 됩니다.

Dora SSR의 게임 장면 관리는 우리에게 매우 친숙한 HTML DOM과 유사한 트리 구조를 사용합니다. div 요소를 게임의 다양한 객체로 대체하고, CSS 애니메이션을 게임 애니메이션으로 대체한다고 상상해 보세요. 개념도 거의 같고, 코드 작성도 비슷할 것 같은데요.

2. TypeScript에서 TSX까지: 프론트엔드 기술을 게임에 적용

많은 프런트엔드 개발자는 TypeScript 및 React의 JSX 구문에 익숙합니다. Dora SSR 오픈 소스 게임 엔진에서는 TSX를 지원하여 프런트 엔드 개발 프로그래밍 모델과 유사한 게임 개발 인터페이스를 제공합니다. 네, 바로 TSX라고 들었습니다.

TSX를 사용하여 게임을 개발한다는 것은 기존 프런트엔드 기술 스택(구성 요소, 모듈 및 기타 최신 프런트엔드 기술)을 활용하고 이러한 개념을 게임 개발에 직접 재사용할 수 있음을 의미합니다. 또한 Dora SSR의 성능 최적화는 복잡한 게임 시나리오에서도 원활한 작동을 보장합니다.

3. 100줄의 코드 내에서 "Angry Birds"와 같은 게임을 작성하는 데 도전해 보세요.

좋아요, 이론은 충분하고 실제적인 내용으로 들어가겠습니다. 100줄 미만의 TSX 코드로 Dora SSR에서 "Angry Birds"와 유사한 작은 게임을 작성하는 방법을 살펴보겠습니다. 물론 시작하기 전에 개발 환경을 준비해야 합니다. Dora SSR을 사용하는 것은 매우 간단합니다. 설치 패키지가 있고 , 브라우저가 있고 , 코드를 작성 하고 실행해 보겠습니다 . 설치 및 시작에 대해서는 다음을 참조하세요: Dora Start!

실수로 휴대폰에 APK 패키지로 설치하셨나요? 그런 다음 동일한 LAN에서 액세스하여 휴대폰에서 직접 개발 및 디버깅을 수행합니다. 不小心装成了APK包在手机上？那就在同局域网下访问，直接在手机上进行开发调试吧

1. 가장 간단한 게임 시나리오 작성

실제 코드를 작성하기 전에 먼저 Ctrl + S를 눌러 파일을 저장할 때 Dora SSR의 Web IDE가 실행 중인 코드를 자동으로 핫 업데이트하도록 지시할 수 있는 특수 함수를 사용하여 주석을 작성하여 코드 실행 결과를 실현할 수 있습니다. . 실시간 미리보기 기능.

// @preview-file on

그런 다음 필요한 라이브러리와 구성 요소를 소개합니다. 물론 코드 편집기는 나중에 코딩 프로세스에서 완료할 수 있는 필수 모듈을 자동으로 소개하라는 메시지를 표시합니다.

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

Dora SSR에서 이미지를 표시하는 것은 매우 간단합니다. <sprite>레이블을 사용하고 마지막으로 toNode()함수를 통해 레이블을 게임 개체로 인스턴스화하기만 하면 됩니다.

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

좋아요, 이제 Dora SSR 게임 개발의 대부분의 요령을 기본적으로 마스터했습니다. 이제 자신만의 게임을 만들기 시작하겠습니다(진지하게).

2. 게임박스 컴포넌트 작성

다음으로, 게임에서 우리가 충돌하는 상자는 , 및 와 같은 속성을 Box허용하는 구성 요소에 의해 정의됩니다 .numxychildren

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

우리는 박스 컴포넌트의 정의를 완성하기 위해 React와 같은 함수 컴포넌트 작성을 사용합니다.

body구성 요소의 속성 tag: 상자의 점수를 저장하는 데 사용됩니다.
rect-fixture: 상자의 충돌 모양을 정의합니다.
draw-node: 상자의 모습을 그릴 때 사용됩니다.
label: 상자의 점수를 표시하는데 사용됩니다.

3. TSX 인스턴스화 후 객체 참조 생성

useRef를 사용하여 각각 작은 페이지 및 점수 레이블을 가리키는 백업용 참조 변수 2개를 생성합니다.

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

4. 방출선 생성

line변수 에서 방사선이 생성되고 터치(마우스 클릭도 가능)에 대한 이벤트 처리가 추가됩니다.

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

onTapBegan이벤트 발생시 터치가 시작된 위치를 기록하고 방출선을 지워주세요.
이 onTapMoved경우 터치가 이동한 거리를 계산하고 방출선을 업데이트합니다.
이벤트 에서는 onTapEnded새의 발사 속도를 설정하고 터치로 이동한 거리에 따라 발사선을 클리어합니다.

5. 다른 게임 요소 만들기

<physics-world>다음으로 게임 장면의 상위 태그를 사용 하고 그 아래 게임 장면에 다양한 요소를 계속해서 만듭니다.

5.1 접지

먼저 body구성 요소를 사용하여 지면을 만들고 이를 정적 강체로 설정합니다.

<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}: 정적 강체이며 물리적 시뮬레이션의 영향을 받지 않음을 나타냅니다.
rect-fixture: 지면 충돌 형상을 직사각형으로 정의합니다.
draw-node: 땅의 모습을 그릴 때 사용됩니다.
rect-shape: 노란색으로 직사각형을 그립니다.

5.2 상자

다음으로 이전에 작성한 구성 요소를 사용하여 Box5개의 상자를 만들고, 다양한 초기 위치와 점수를 설정하고, 생성 시 종료 애니메이션을 재생합니다.

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

map기능: 10에서 50까지 점수 배열을 반복하고 새가 맞아야 하는 각 점수에 대한 상자를 만드는 데 사용됩니다.
Box구성 요소: 상자를 만들고 다음 속성을 전달하는 데 사용됩니다.
- num={num}: 배열의 숫자에 해당하는 상자의 점수입니다.
- x={200}: 상자의 초기 x축 위치, 200입니다.
- y={-150 + i * 100}: 생성 시퀀스 번호에 따라 증가된 상자의 초기 y축 위치입니다.
sequence구성 요소: 다음 애니메이션을 포함하여 상위 노드에서 재생할 애니메이션 시퀀스를 만드는 데 사용됩니다.
- delay time={i * 0.2}: 애니메이션 재생을 지연시키며, 생성 시퀀스 번호에 따라 지연 시간이 늘어납니다.
- scale time={0.3} start={0} stop={1}: 확대/축소 애니메이션이 표시되지 않음에서 완전히 표시될 때까지 0.3초가 소요됩니다.

5.3 버디

마지막으로 body구성 요소를 사용하여 새를 만들고 충돌 모양, 모양 및 점수 레이블을 설정합니다.

<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}: ref새의 후속 조작을 용이하게 하기 위해 참조 변수를 생성하는 데 사용됩니다.
type={BodyMoveType.Dynamic}: 동적 강체이며 물리적 시뮬레이션의 영향을 받음을 나타냅니다.
onContactStart={(other) => {}}: 새의 신체가 다른 물체에 닿았을 때 실행되는 콜백 처리 함수입니다.
disk-fixture: 새의 모양을 디스크로 정의합니다.
draw-node: 새의 모습을 그릴 때 사용됩니다.
label: 새의 누적점수를 표시하는데 사용됩니다.
scale: 새의 출현 애니메이션을 재생하는데 사용됩니다.

6. 게임 로직 완성

이로써 미니게임의 핵심 로직이 완성되었습니다. 자신의 아이디어에 따라 게임 로직을 더욱 개선하고 기능을 추가할 수 있습니다. 전체 데모 코드는 Dora-SSR/Assets/Script/Test/Birdy.tsx 링크에서 찾을 수 있습니다 . 아래는 실행 중인 효과의 일부 스크린샷입니다.

<p align=center>화면을 드래그하여 'Angry Birds'를 실행하세요</p>

<p align=center>뛰어난 실력으로 한 번의 스트라이크에 모든 득점을 올릴 수 있었습니다</p>

4. 비밀을 간략하게 밝혀라

1. 사슴이나 말

실제로 우리가 작성한 게임 코드는 Dora SSR 엔진의 힘으로 Linux, Android, iOS, macOS 및 Windows 전반에서 일관된 실행 결과를 보장할 수 있습니다. 그런데 이 코드를 실행하기 위해 우리 Dora SSR 엔진은 JavaScript 런타임 환경도 지원하지 않습니다... (뭐라고요?)

예, Dora SSR의 기본 기술 구현은 실제로 Lua 및 WASM 가상 머신을 스크립트 언어 실행 환경으로 기반으로 합니다. TypeScript에 대한 지원은 실제로 TypescriptToLua( https://github.com/TypeScriptToLua/TypeScriptToLua ) 컴파일러를 통합하여 제공됩니다. TSTL은 TypeScript 언어 컴파일러의 백엔드를 다시 작성하여 TS 및 TSX 코드를 동등한 실행 Lua 코드로 컴파일하므로 TS 코드가 Dora에서 로드되고 실행될 수 있습니다. Dora 자체 Web IDE의 코드 편집기에서는 Dora 내장 라이브러리 API 프롬프트뿐만 아니라 TS 언어 확인 및 완성을 수행하는 데 도움이 될 수 있습니다. 최종 사용자 경험을 위해서는 결국 그것이 사슴인지 말인지 걱정할 필요가 없습니다. 코드가 TS 컴파일 검사를 통과할 수 있는 한 코드를 뽑아도 동일하게 실행됩니다.

2. React와 관련이 있나요?

이 질문에 대한 대답은 현재: 그렇습니다(출판 시점에는 그렇지 않습니다). React의 가장 중요한 기능은 Virtual DOM을 통해 렌더링 구성 요소 및 비즈니스 데이터의 상태와 Tree Diff 처리를 실행하는 프로세스를 동기화하는 것입니다. 현재 Dora SSR에서는 이 메커니즘이 구현되지 않았으므로 현재 TSX를 사용하여 작성된 내용은 다음과 같습니다. VDOM 구성 코드와 유사하게 런타임 시 일회성 게임 렌더링 개체만 빌드하며 기본 C++에 구현된 엔진 기능은 지속적인 처리를 담당합니다. 아마도 언젠가는 Tree Diff를 실행하여 상태 동기화를 위해 React를 모방하거나 TSX를 기반으로 하는 다른 렌더링 구성 요소 상태 동기화 메커니즘을 구현하기 위해 SolidJS를 모방하는 기능을 게임 UI 개발에 제공할 것입니다. 따라서 우리는 프론트엔드 개발 친구들을 진심으로 초대하여 Dora SSR 프로젝트를 함께 플레이하고 프론트엔드 개발 기술 아이디어를 활용하는 방법을 연구하며 게임 개발을 위해 더욱 사용하기 쉽고 편리한 휠을 소개합니다.

드디어 우리 Q 그룹이 왔습니다. 오셔서 플레이해 보세요: 512620381