こんにちは！トイロジックでプログラマをしているOです。本記事では『Warlander』に実装したチュートリアルについて紹介したいと思います。
『Warlander』におけるチュートリアル
『Warlander』にはキャラクターカスタマイズに始まり、スキルなどのアクション、さらにヴァラーレベルの仕組みや建築など、様々な要素が存在しており、これらを説明も無しに理解することは難しいです。そこでチュートリアルが必要となってくるわけです。
『Warlander』のチュートリアルは、初めてこのゲームをプレイしたときに一度だけ体験します。まずチュートリアル専用のレベルに遷移して各種アクションの操作などを確認して、その後のメニューではカスタマイズなどを学びます。その際、特定箇所のボタンのみクリックできるような処理を入れて操作を誘導しています。実際の詳しい流れについては、是非ご自身でプレイをして確かめていただきたいですが、ここではそのチュートリアル内で使用している機能と実装についていくつか紹介していきます。
* 便宜上、以下プレイヤーキャラクターを操作できる画面をインゲーム、メニュー画面のことをアウトゲームと呼ぶこととします。
説明用ダイアログ
インゲーム・アウトゲームで共通して使用しているダイアログです。チュートリアルだけでなく様々な場所で使用されています。下記のような機能を備えており、それぞれ自由にパラメータを設定できます。
- テキスト、画像設定
- 表示、ボタン受付の遅延
- 表示位置変更
- サイズ変更
- リマインド（一定時間後の再度表示）
- ページネーション（ページ送り）
インゲーム
インゲームでは、チュートリアルの進行をコルーチンを用いて制御しています。各ステップにおいて一定の条件（タスク）をこなすと次のステップに進行します。全体を通して基本的には下記のようなループです。
- ダイアログ表示
- タスクの達成
- 進行度の更新
簡素ですがコードとしては以下のようなものになります。タスクの達成はコルーチンの内部で判定するか、あるいは該当箇所から通知してもらうなどして判定します。
// CORIUTINE_REENTER, CORIUTINE_YIELD はc++でコルーチン処理を行うための boost を参考にした独自マクロです
// 今回の内容とは話がそれるので詳しい内容は割愛しますが、興味のある方は boost コルーチンなどで検索してみてください。
CORIUTINE_REENTER(coroutine_)
{
// チュートリアル進行度に応じたダイアログ表示
ShowDialog(currentTutorialStep_);
CORIUTINE_YIELD return;
// タスク達成まで待つ
while (!IsCompletedTask(currentTutorialStep_))
CORIUTINE_YIELD return;
// マーカーを置いたり
// カメラを動かしたり
// botを生成したり
// 次の進行度へ
SetCurrentTutorialStep(currentTutorialStep_ + 1);
}
その他、動画にもいくつか確認できますが、インゲーム中の機能については下記のような機能があります。
- チュートリアル用HUD
- タスクの進捗を表示する
- カメラ移動
- 指定位置へカメラを補間移動する
- トリガー
- 指定位置へ移動を検知するなど
- マーカー
- 指定位置への注意を示すHUD
- bot制御
- 生成、削除など
アウトゲーム
アウトゲームでは主にボタンの強調表現と有効無効制御を行っています。画像中の矢印のようなものが強調表現で、これで操作を誘導します。チュートリアル中に触ってほしくない箇所についてはボタンを無効（半透明、かつ操作不可）にすることで制御しています。基本的には全て塞ぎますが、オプションなどは最初から触りたい人もいるかと思いますので塞いでいません。各画面に遷移するたびにチュートリアルのステップを更新して進んでいきます。
こちらはインゲームのように専用のレベルやマネージャーを作ることはなく、既存のメニューにチュートリアル用の処理を入れ込むことで実装しています。そのため、いくらかコードの保守性・可読性が犠牲になってしまうことがありました。ボタンの基底クラスなどで共通化できる箇所などは善処しましたが、それでも巻き取れない箇所がありました。このようなことが起こらないよう、メニューの設計段階からチュートリアルを意識する必要があるかもしれません。
最後に
ここまで『Warlander』のチュートリアルを紹介してきましたが、いかがでしたでしょうか。チュートリアルは往々にしてユーザーが一度しか触れないものですが、ゲームを開始して最初に触れる箇所でもあります。だからこそ丁寧に作る必要があります。プログラマ的には設計などにも気を付けて実装していきたいですね。