Top > STEP17 タイトル画面の作成
HTML convert time to 0.013 sec.


STEP17 タイトル画面の作成

Last-modified: 2013-04-20 (土) 17:11:27

一番最初に表示される「タイトル画面」の作成が大分最後の方になってしまいましたが、この「タイトル画面」を作ると、一通りの今回のゲームの流れは完成となります。
あとは細かい部分の追加や修正、戦闘バランスの調整などの作業です。

 

まずは「タイトル画面」の要素を考えていきます。
「ゲームのタイトル名」、「ゲームのスタートメニュー」、「背景画像」といったところでしょうか。
「BGM」はいつものようにマップの設定で済ませます。

  • 「ゲームのタイトル名」は安直ですが、「娘の小冒険」として、「ピクチャ」で表示させます。
  • 「ゲームのスタートメニュー」「選択肢」を使って、以下の3つにします。
    • 「はじめ」 ゲームをはじめからスタートします。
    • 「つづき」 ゲームをセーブデータを読み込んで、続きからスタートします。
    • 「おわり」 ゲームプログラムを終了します。
  • 「背景画像」はゲーム画面のスクリーンショットを撮って、それを「ピクチャ」で表示させてみましょう。
 

【INDEX】


 

「背景画像」の作成

「背景画像」から準備していきましょう。
ゲームを起動して、どこか調度良いマップ表示で「PrintScreen」キーを押します。
「PrintScreen」キーは、ノートパソコンなどのキーボードの場合は「Fn」キーを押しながらでないと機能しない場合があります。また、OSがWindows7の場合はウディタで「PrintScreen」キーが使えない場合があり、「ScrollLock」キー「Pause」キーが替りに機能します。
下図のような画面になります。
安易にフィールドマップでちょっと勿体無い気もしますが。
step17-001.jpg

 

上のような画面表示が確認できたら、制作中のゲームのデータが格納されているフォルダを確認してみます。
今撮影したスクリーンショットの画像が保存されています。
step17-002.jpg

 

この画像を「Data」フォルダの中にある「Picture」フォルダの中に移動します。
これで、「背景画像」の準備は完了です。
step17-003.jpg

「パーティーメンバー」の設定変更

「タイトル画面」の演出上の都合で、パーティーメンバーを空にしておきます。
パーティーメンバーの歩行グラフィックを見えないようにしておきたいだけですので、STEP16の最後に設定した「キャラ画像」コマンドで画像を削除してもいいのですが、ここでは違うやり方をしてみます。
「可変データベース」を開いて、「3:パーティー情報」でメンバーを空にします。
step17-004.jpg

「タイトル画面」用マップの作成

「タイトル画面」を展開するマップを準備していきます。
step17-005.jpg

「ゲームの開始位置」を設定

「タイトル画面」のマップを作成したら、この「タイトル画面」をゲームを起動して最初に表示される画面に設定するため、マップ上の適当な位置で右クリックし、「ゲーム開始位置に設定」を選択します。
step17-013.jpg

「タイトル画面」制御イベントの設置

「タイトル画面」を制御するイベントを適当な位置に配置して、イベントの初期設定をしていきます。
起動条件を「自動実行」にします。
step17-006.jpg

「タイトル画面」の全処理

先に「タイトル画面」の全イベント処理の流れを見ていきます。
「背景画像」と「ゲームのタイトル名」を表示してから、「ゲームのスタートメニュー」を表示します。
「ゲームのスタートメニュー」の各選択で処理が分岐していきます。

  • 「はじめ」を選んだら、画面を暗くして、「背景画像」と「ゲームのタイトル名」を消去、BGMもフェードアウトさせて、STEP15で作成した「シーン1」のはじめに移行し、「セルフ変数0」を「1」にします。
  • 「つづき」を選んだら、「ロード画面」を表示します。「ロード画面」の選択時にキャンセルされる場合があるので、「ラベル」というのを使用して、再び「ゲームのスタートメニュー」が表示されるようにしています。
  • 「おわり」を選んだら、画面を暗くして、「背景画像」と「ゲームのタイトル名」を消去、BGMもフェードアウトさせて、「ゲームプログラムを終了」させます。

step17-007.jpg

 

それでは、細かく説明していきます。

「背景画像」の表示

「背景画像」の表示は「ピクチャ」コマンドを使って、ピクチャ番号を「1」に、表示タイプを「ファイル読み込み」にファイルで「背景画像」のファイルを指定します。位置は「左上」、処理時間は「100フレーム」。
ウディタのスクリーンショット画像は「640×480」のサイズで保存されてしまうため、「背景画像」の画像サイズは「640×480」です。今回のゲームの画面サイズは「320×240」なので、このまま画像を表示してしまうと、「背景画像」の一部だけが表示されてしまうので、拡大率を「50%」にして表示することによって、「640×480」の50%で「320×240」の画像サイズになり、今回のゲーム画面にピッタリ表示されます。
ちなみに「ゲームのタイトル名」はピクチャ番号を「2」で、表示タイプを「文字列をピクチャとして描画」にて表示します。
step17-008.jpg

「選択肢ウィンドウ」の表示設定

続いて、「ゲームのスタートメニュー」を表示する処理になります。
まずは「選択肢ウィンドウ」の表示位置を調整します。デフォルトだと画面の真ん中ぐらいになるので、もう少し下に表示させることにします。
「選択肢ウィンドウ」の表示位置を変更するには、「システム変数」を操作します。
「変数操作」タブを選択して、「Sys(システム変数)」ボタンを押して、「Sys4:選択肢ウィンドウY座標」を選択し、値を設定します。
Y座標のみの変更したかったので、こちらの設定だけで完了です。もちろんX座標も同じように変更できます。
step17-009.jpg

 

「選択肢ウィンドウ」の内容設定と表示のコマンドを入力していきます。
「選択肢」タブを選択して、選択肢の入力欄に上から「はじめ」「つづき」「おわり」と記入していきます。
左下の「キャンセル不能」ボタンを押します。これを押すことによって、「キャンセルボタン」を押しても「選択肢ウィンドウ」が閉じられること無く、どれかが選択されるまで「選択肢ウィンドウ」が表示されています。
step17-010.jpg

複数の「ピクチャ」を同時に操作する

ここからは「ゲームのスタートメニュー」で各「選択肢」が選択された時の処理になります。

 

「はじめ」「おわり」を選択した際に「背景画像」と「ゲームのタイトル名」の「ピクチャ」を消去するのですが、1つのコマンドで複数の「ピクチャ」を消去していきます。
「選択肢」タブを選択して、「ピクチャ番号」で右のボックスにチェックを入れ「1~2」としていきます。これで、「ピクチャ番号1~2」の2枚の「ピクチャ」を同時に消去することが出来ます。
step17-011.jpg

パーティーメンバーの追加

「はじめ」を選択した際には最初にパーティーメンバーを空にしたので、STEP15で作成した「シーン1」に接続するためにパーティーメンバーに「娘」を加えておく必要があります。
「その他2」タブを選択して、「コモンイベント5:メンバーの増減」で「娘」を追加しましょう。

[tip]ウディタ2では?
 イベントコマンド「コモンイベント」

step17-012.jpg

 

「ロード画面」の呼び出し

「つづき」を選択した場合はゲーム中でセーブしたデータを「ロード画面」から呼び出して、ゲームを続きからスタートすることができるようにします。
「ロード画面」を呼び出すには「その他2」タブを選択して、「コモンイベント15:各種メニュー呼び出し」を使い、呼び出すメニュー「ロード画面」と設定します。

[tip]ウディタ2では?
 イベントコマンド「コモンイベント」の「コモンイベント14:各種メニュー呼出」

step17-014.jpg

「ラベル」の設置とジャンプ

「つづき」を選択して「ロード画面」を表示した際に「ロード画面」上でキャンセルボタンが押されると、「タイトル画面」の処理に戻ってきますので、再度「ゲームのスタートメニュー」が表示されるようにしなければなりません。
今回は「ラベル」機能を使ってみます。
「ラベル」とは「イベントコマンド入力エリア」任意の行に名前を付けて設置することにより、その設置した位置に自由に移動することができる機能です。「ラベルの設置」「ラベルに飛ぶ」という2つの機能を持っています。

 

「ゲームのスタートメニュー」「選択肢ウィンドウ」を表示する直前に「ラベルを設置」し、「ロード画面」を呼び出した直後に「ラベルに飛ぶ」処理を追加します。

[tip]ウディタ2では?
 イベントコマンド「イベント制御」

step17-015.jpg

 

ちなみに「ロード画面」でセーブしたゲームデータを呼び出した場合は、この「タイトル画面」制御イベントは中断されます。

「ゲームプログラム終了」処理

「おわり」を選択した場合はゲームプログラムを終了させます。
「その他1」タブを選択し、左側の「ゲーム終了」ボタンを押します。

[tip]ウディタ2では?
 イベントコマンド「イベント制御」

step17-016.jpg

 

これで「タイトル画面」の処理は完成です。

「タイトル画面」と「シーン1」の接続処理

「タイトル画面」が出来ましたので、今度はSTEP15で作成した「シーン1」との接続処理をしていきます。
「タイトル画面」側では「シーン1」の舞台となる村マップに移動する処理が加えてあり、接続処理は出来ていますので、「シーン1」側を調整していきます。
村マップに切り替えて、「シーン1制御」イベントを編集します。
実際調整するのは1箇所だけで、「タイトル画面」の終わりで画面を真っ暗にして「シーン1」に移動しており、「シーン1」のはじめは薄暗くしているので、真っ暗から薄暗くに徐々に変わるようにしていきます。
step17-017.jpg

 

「画面処理」イベントを修正して、処理時間を少し長めのフレーム数にします。
step17-018.jpg

 

 
 

以上で「タイトル画面」の作成は完了です。

 

icon01.gif 続いて、「STEP18 コモンイベントの作成」に進みましょう。



※TOPページでの説明どおり、コメント受付を停止させていただきました。


  • スクリーンショットキーってどのようなものでしょうか;一応それらしいものを押してみたんですけどなにも反応がなくて... -- りか? 2010-11-25 (木) 07:15:42
  • 「PrintScreen」「PrtSc」などと書かれたキーになります。ノートパソコンの場合は「Fn」もしくは「Func」というキーを押しながらでないと機能しない場合があります。また、OSがWindows7の場合はウディタで「PrintScreen」が使えないようで、「ScrollLock」「Pause」が替りに機能します。 -- 管理人 2010-11-25 (木) 07:56:24
  • ↑の記述 記事の本文に追加しておきます。 -- 管理人 2010-11-25 (木) 07:57:08
  • 私のパソコン、ノートパソコンだったもので;Fnキーを一緒に押したらできました!管理人さん、こんなくだらない質問に答 えてくれてありがとうございました [star] -- りか? 2010-11-27 (土) 15:56:22
  • りかさん 無事に解決できてよかった♪ -- 管理人 2010-11-28 (日) 15:25:43
  • パーティーメンバーの追加はその他1ではなくその他2のような気がします。細かいですが。 -- 2010-12-13 (月) 18:38:35
  • ↑ご指摘ありがとうございます。パーティーメンバーの追加・「ロード画面」の呼び出しにて修正させていただきました。 -- 管理人 2010-12-13 (月) 19:17:19
  • 「「システムデータベース」を開いて、「3:パーティー情報」でメンバーを空にします。」は可変データベースの間違いですよね。 -- faketurn? 2010-12-18 (土) 12:08:49
  • faketurnさん ご指摘ありがとうございます。修正させていただきました。 -- 管理人 2010-12-18 (土) 13:01:44
  • 場所移動で「移動先を見ながら指定」をやると、「マップファイルを読み込めません。システムDB側のファイル名が間違ってないかご確認下さい」と出るんですが・・・ -- 夢見るジエン? 2011-04-17 (日) 22:26:21
  • 夢見るジエンさん エラーメッセージのとおり、「システムデータベース 0:マップ設定」にて該当のマップのファイル名に問題ないか確認されましたでしょうか?
    そこを確認されて問題なかったかどうか明記されていませんので、設定上のミスなのかウディタ側のバグなのか、なんとも判断しにくいところです。また、コメントをしていただいたこのページで場所移動を説明した箇所がありませんので、このページの何を見て、そういう処理をされたのかもわからないところがありますので、関連性の高いページにてコメントをしていただくようお願いします。
    まずは、システムデータベースのマップ設定で該当マップのファイル名とファイルが存在しているかどうか(マップファイル名の項目にある「File」ボタンを押せば確認できます)の確認してください。あとは他のマップを指定した場合に問題がでないかも確認してください。 -- 管理人 2011-04-18 (月) 04:12:14
  • タイトル画面で、タイトルを表示したとき、大きさが小さすぎるので、大きくしようと思って拡大率を上げたら文字がガタガタになりました。どのようにすればアンチエイリアシングがかかったまま大きくなるのでしょうか -- ひかり? 2011-05-02 (月) 00:15:57
  • すいません。自己解決しました。 -- ひかり? 2011-05-02 (月) 00:27:24
  • 私の場合、OSがWindows7です。キーボード上に「PrintScreen」も「ScrollLock」も「Pause」もありませんでした。 -- よっちゃん? 2011-05-16 (月) 09:14:08
  • それで、「アクセサリイ」の中の「Snipping Tool」(C:\Windows\System32\SnippingTool.exe)を使用しようと思ってますが、如何でしょうか。 -- よっちゃん? 2011-05-16 (月) 09:15:06
  • よっちゃんさん Snipping Toolなど他の画面キャプチャソフトを使われてももちろん構いません。
    キーボードのPrintScreenなどの表記の仕方は色々(省略形PrtSc、アイコンなども?)あるみたいですから、ノートPCのようなキーボードの場合は、少し目立たない場所(キーの側面など)や色などで書かれているかもしれません。 -- 管理人 2011-05-16 (月) 10:13:51
  • ありがとう、ございます。SnippingToolを使ってやってみます。 -- よっちゃん? 2011-05-16 (月) 10:53:43