ウディタ実装解説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の画像を全て消しています。つまりチュートリアルウィンドウを閉じる処理をしています。