フロントエンドの学生のためのクロスプラットフォームゲーム開発の入門

皆さんこんにちは。私はゲームエンジンテクノロジーの探求者であり、フロントエンドの開発作業を数多く行ってきたプログラマーです。 Web ページの作成からゲームの開発までを行う方法を知りたい場合は、ここが最適な場所です。

今日は、TSX をサポートし、クロスプラットフォームでネイティブに実行されるゲームエンジンである Dora SSR を使用して、ゲーム開発の世界に簡単に参入できるようにする方法について説明します。ゲームエンジンに関しては、達成できないテクノロジではなく、私たちがよく知っているフロントエンド開発ツールと驚くほど似ています。

1. ゲームクライアント開発も一種のフロントエンド開発になる

まず、ゲームエンジンとは何かについて説明します。簡単に言えば、ゲームエンジンは、開発者がゲームを構築し、グラフィックス、サウンド、物理計算、衝突検出などを管理するのに役立つツールとライブラリのコレクションです。フロントエンド開発者にとっては、ゲームを実行するために設計された特別なブラウザと考えることができます。

ドラ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 でこれを行うのは非常に簡単です。インストールパッケージがあり、ブラウザがあればそれを開きます。それでは、コードを作成して実行してみましょう。インストールと起動については、「ドラスタート！」を参照してください。

誤って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 のコードエディターでは、TS 言語のチェックと補完、および Dora の組み込みライブラリ API プロンプトを実行するのに役立ちます。最終的なユーザーエクスペリエンスについては、コードが TS コンパイルチェックに合格する限り、最終的には鹿であるか馬であるかを心配する必要はありません。コードは取り出されたときに同じように実行されます。

2. React に関連していますか?

この質問に対する現時点での答えは「はい」です (つまり、公開時点ではそうではありません)。 React の最も重要な機能は、Virtual DOM を介してコンポーネントとビジネスデータのレンダリングのステータスと Tree Diff 処理を実行するプロセスを同期することです。現在、このメカニズムは Dora SSR に実装されていないため、現在 TSX を使用して記述されているのは次のとおりです。 VDOM 構築コードは実行時に 1 回限りのゲームレンダリングオブジェクトのみを構築し、基礎となる C++ に実装されたエンジン関数が継続的な処理を担当します。おそらくいつの日か、Tree Diff を実行することで React を模倣して状態同期を行う機能や、SolidJS を模倣して TSX に基づく他のレンダリングコンポーネントの状態同期メカニズムを実装する機能をゲーム UI 開発に提供するようになるでしょう。したがって、私たちはフロントエンド開発の友人を心から招待し、一緒にDora SSRプロジェクトをプレイし、フロントエンド開発技術のアイデアの使用方法を勉強し、ゲーム開発のためのより使いやすく便利なホイールを導入します。

ついに私たちの Q グループが登場しました。遊びに来てください: 512620381