【ITニュース解説】Finding the Wizard's Pet — KendoReact Free Components Challenge

この記事は、KendoReactというUIコンポーネントライブラリを利用して開発された、ブラウザで直接遊べるファンタジーRPGミニゲーム「Wizard's Pet」について解説している。このゲームは、若い魔法使いの弟子が様々な場所を巡り、他のキャラクターと会話したり、制限時間内にモンスターを倒したりしながら物語を進めるという内容だ。開発者は、最新のReact技術を使いながら、見た目の一貫性を保ちつつ、物語主導のシンプルなゲームをブラウザで提供するという課題に取り組んだ。

このプロジェクトは、カジュアルなピクセルアートゲームやインタラクティブな物語が好きな人だけでなく、開発者にとってもKendoReactコンポーネントが、よくあるダッシュボードやフォーム作成以外にも、ゲームのような体験にどう応用できるかを示すことを目的としている。完成した試作版では、難易度の異なる複数のレベルが用意され、プレイヤーとNPCの会話が自然に流れるように作られている。会話が終わると戦闘が始まり、そこではタイマーやモンスターのHP（ヒットポイント）バーが表示される。また、カウントダウンタイマーが緊迫感を演出し、勝利の記録も後から確認できる仕組みだ。これらすべての要素は、KendoReactの無料コンポーネント10種類以上を使ってデザインされ、配置されている。

具体的に使用されたKendoReactの無料コンポーネントとその活用方法を見てみよう。「アニメーション」コンポーネントは、ダイアログ（会話画面）の切り替えを滑らかにするために使われ、次のダイアログをプッシュ遷移で表示することで自然な流れを生み出している。「共通ユーティリティ：タイポグラフィ」は、ゲーム内のすべてのテキストに適用され、UI（ユーザーインターフェース）に統一感と高い可読性をもたらしている。「ダイアログ：ウィンドウ」は、プレイヤーへの指示やゲームの状況を伝えるためのヒント表示に使われた。「ダイアログ：ダイアログ」は、プレイヤーが自分のキャラクター名をカスタマイズする場面や、時間切れによるゲームオーバーの通知に使われている。「プログレスバー」は、モンスターのHP全体を表示したり、プレイヤーが与えたダメージを表示したりするのに利用された。「入力」コンポーネントは、ゲーム開始時にプレイヤーが冒険用のニックネームを入力するために使われている。「ボタン：ボタン」は、物語を進めるためや、ヒントを表示するためなど、プレイヤーが様々な状況で行動を起こす場面で広く使用されている。「ボタン：グループボタン」は、プレイヤーがお気に入りのキャラクターを選択する際に利用されている。「レイアウト」コンポーネントは、すべての画面において、キャラクター、場所、モンスターなどの要素を適切に配置するために欠かせない役割を果たしている。「インジケーター：ローダー」は、ゲーム開始時にアプリケーションの読み込み中であることを示すために使われている。そして、「通知」コンポーネントは、クレジット画面で開発者に関する詳細情報や連絡先を示すために利用されている。

ゲームの裏側、つまりアーキテクチャ（設計）と仕組みについて見ていく。ゲームはいくつかの役割を持つモジュールに分かれている。「Clicker（クリッカー）」は、クリックすることでゲームを進める主要な仕組みを担当する。ユーザーがクリックすると、物語が進んだり、戦闘が始まったりする。オブジェクトやNPCとのインタラクションにも利用される。「Story（ストーリー）」は、物語の進行と会話の流れを管理する部分だ。どのNPCやキャラクターが話しているかを調整し、プレイヤーがいつ行動できるか、またいつ次のイベント（例えば戦闘）が始まるかを制御する。「Fight（ファイト）」は、プレイヤーとモンスター間のすべての戦闘ロジックを処理する。戦闘のタイマーを管理し、プレイヤーが時間内に行動しないとゲームオーバーを発生させる。モンスターの行動やプレイヤーの応答も処理し、戦闘の結果を記録する「logFight」という関数を呼び出す。「useDialog（ユースダイアログ）」は、ダイアログの状態と画面の切り替わりを管理するためのカスタムフックである。どのキャラクターやNPCが話しているかを判断し、会話のシーケンスがすべて完了するまで、次の進行（例えば戦闘の開始）を許可しない。「CharacterContext（キャラクターコンテキスト）」は、ReactのContext APIを使ったグローバルな状態管理を提供する。現在のキャラクター、レベル、ユーザー名、戦闘履歴などを保存し、アプリケーション内のどのコンポーネントからでもキャラクター関連のデータにアクセスしたり、更新したりできるようにする。「Background, Character, Monster（背景、キャラクター、モンスター）」は、純粋に画面表示を担当するコンポーネントで、KendoReactの助けを借りて、現在の背景、プレイヤーキャラクター、モンスターやNPCの画像、アニメーションを表示する。

ゲームの状態管理は、アプリケーション全体で共有される「グローバルな状態」と、特定の機能内で使われる「ローカルな状態」に分けられる。グローバルな状態は「CharacterContext」で管理されており、現在のキャラクターの選択情報、現在のレベル、ユーザー名、そして勝利や敗北、スコア、時間などの戦闘結果を記録した履歴の配列が保存される。この情報はアプリ全体で一貫した状態を保つために、どこからでもアクセス可能だ。ローカルな状態は主に「Fight」モジュールで管理され、戦闘が開始されたかどうか、プレイヤーの行動のためのカウントダウンタイマー、タイマー切れや敗北によるゲームオーバー状態、そしてプレイヤーが戦闘に負けた場合の敗北フラグなどを扱う。

ゲーム内のデータフローは、特定の順序で進行する。「ダイアログシーケンス」では、「useDialog」フックがメインキャラクターとNPC間の会話を管理し、両者の会話が順に表示される。プレイヤーは会話が完了するまで次の段階（例えば戦闘）に進むことはできない。会話が終了すると、「Clicker」または「Story」モジュールが「Fight」モジュールを起動し、「戦闘への進行」が始まる。このとき戦闘タイマーが開始され、プレイヤーは時間切れになる前に行動する必要がある。プレイヤーがモンスターを倒すと、「戦闘結果」として「logFight」が呼び出される。この戦闘結果（勝利/敗北、スコアなど）は、グローバルな「CharacterContext」内の戦闘履歴配列に保存される。もしタイマーが切れるか、プレイヤーが戦闘に負けた場合、「ゲームオーバー/リトライ」状態がトリガーされる。プレイヤーは戦闘をやり直すことができ、その際にはローカルな戦闘状態とタイマーがリセットされる。そして、ゲームや物語の終わりには、「CharacterContext」に保存された戦闘履歴配列が使われ、プレイヤーの成績のサマリーが表示されることで「ゲームの終了」となる。

このプロジェクトを自分のコンピューターで試すには、いくつかの簡単な手順でセットアップできる。まず、プロジェクトのソースコードをGitHubからダウンロードするために、「git clone git@github.com:violetadev/kendo.git」というコマンドを実行する。次に、ダウンロードしたプロジェクトのディレクトリに移動するために、「cd kendo」というコマンドを入力する。その後、プロジェクトが必要とするすべてのライブラリやツールをインストールするために、「npm install」を実行する。最後に、「npm start」と入力すれば、開発サーバーが起動し、自分のブラウザでゲームをプレイできるようになる。