ウディタ実装解説3 チュートリアルウィンドウ

チュートリアルウィンドウ

　今回はゲームではよくある、中央にでてくる説明画面の実装を解説します。
具体的にはこんな感じのもの。

全体的な実装

　実装するのはコモンイベント1つです。
使用するときもコモンイベントを呼び出すだけになっています。簡単ですね。

コモンイベントを呼ぶときはこんな感じ、画像ファイルと文章を指定して呼び出します。

今回は簡単な実装なので一つ一つを詳しめに解説します。

素材の用意

　このコモンを作るには背景のウィンドウと、メッセージウィンドウ、そしてチュートリアルで表示する画像を用意しないといけません。
　チュートリアル用画像はゲームのスクリーンショットを使用しました。背景ウィンドウとメッセージウィンドウはUI素材を購入してサイズを調整しています。この手の素材がない場合はウディタのウィンドウベースを使ってもよいです。

コモンイベント

UI作成用基本セット

　このチュートリアルウィンドウに限らず、ＵＩを実装するときには必ずこの４行を使ってます。
　基本ピクチャＩＤは被らなさそうなＩＤを適当に設定しています。
　座標倍率は画面サイズを横の場合は32、縦の場合は24で割った値です。画面サイズによらず、画面を32×24分割してUI配置をするための仕組みで、これを使うと後々に画面サイズを

一時座標に中央座標をセット

　座標倍率（横）の値を16倍にし、座標倍率（縦）の値を12倍にすると画面中央の座標になります。

中心にピクチャ配置+アニメーション

　背景となるウィンドウのピクチャを表示します。ピクチャIDは一時ピクチャIDを指定、座標は先ほどセットした中央座標を設定し、位置を「中心」に設定しています。そして表示では「拡大率」を1%にしています。

　その後、ピクチャ移動で「拡大率」を100%、「処理時間」を10Fに設定しています。これで10Fかけてウィンドウが拡大率1%から100%へ拡大していくアニメになります。その後。拡大しきるまでウェイトをかけています。

　ウディタのウィンドウベースを使用する場合、お手軽ウィンドウを使うので少し処理が変わります。

文章表示

　ここではメッセージウィンドウと文章を表示しています。先ほどのようなアニメ―ションはさせていません。

　文章はX座標は中心座標、Y座標は少し下にずらしています。
一時ピクチャIDはピクチャを表示するたびに+1させています。

画像表示の処理

　今度はX座標中心、Y座標は中心より上にずれた位置にチュートリアル用表示画像を表示しています。表示画像後ろのうっすら白くなってる部分は隠し機能の<SQUARE>を使用し（白い四角の画像が表示できる機能です）、透明度を40に設定する事で実現しています。

入力待ち

　キー入力で「入力待ち」にチェックを入れる事で、キーが入力するまで待つ事ができます。この実装では決定キーかキャンセルキーが押されるまで待っています。
これらのキーが押された場合、ピクチャ消去に処理が進みます。ピクチャ消去では基本ピクシャから一時ピクチャまでのピクチャIDの画像を全て消しています。つまりチュートリアルウィンドウを閉じる処理をしています。