ステージデザイナー・ヘルプファイル - チュートリアル

 タイトルをつくる
たいていのゲームでは、最初にタイトル画面が表示されますよね。ステージデザイナーでは
マップをつかってタイトルシーンを簡単につくることができます。

★このチュートリアルにそって作成したゲームのサンプルプロジェクトを、以下のリンクからダウンロードできます。
Floppy.ico(1406 byte)プロジェクトファイル:ダウンロード


 タイトル用マップをつくる
まずは、タイトルとして使用するマップをつくりましょう。
マップの新規作成ボタンを押し、表示されるダイアログに沿って設定していきます。
今回解説の都合上、マップ名を「タイトル」とし、編集単位は16,16とし、下記の画面で「画面サイズと同じ大きさに設定」ボタンを
押してください。
(このようにすることで、画面サイズと同じ大きさのマップを作成することができます。)


bar.png(864 byte)

maketitlemap.png(44142 byte)
これで、タイトルとして表示するマップを作成しました。
つづいて、ゲーム開始時にこのマップを読み込む設定を行いましょう。


bar.png(864 byte)



まず、画面上部のメニューバーから「ゲーム設定」→「ゲーム動作設定」を選択し、表示されたダイアログボックスの
「構成管理」タブを選択した後、実行開始マップをさきほど作成した「タイトル」に設定します。
このようにすることで、「タイトル」マップからゲームを始めることができます。

実行すると、真っ黒な画面が表示されている様子が確認できます。この「タイトル」マップに、これからタイトル部分として
必要な機能を実装していきます。
まずは、真っ黒な画面ではさみしいので、適当にマップチップを
貼りつけたりオブジェクトを配置したりして、タイトル画面を
作ってみましょう。

ちなみに私は、右図のようなタイトル画面をつくってみました。
(タイトル画面といってもただの「マップ」ですから、今まで通り
オブジェクトを配置したりマップチップを配置したりと、好きなことが
できます。)

右図の吹き出し部分は、オブジェクトを作成して吹き出しアニメーションを
適用させたものです。アニメーションはこのように静止画を表示するのにも
つかいます。
(くわしくは、サンプルプロジェクトをダウンロードして
確認してみてくださいね)
titleview.png(24249 byte)

これで少しはタイトルらしくなったかな?という感じですね?


 タイトル用メニューをつくる
次はメニューを作ってみましょう。
メニューは「はじめから」と「つづきから」の2項目を選択できるようなものをつくります。
チュートリアル9で用いた選択肢オブジェクトを用いると簡単にメニューを作れますが、
今回はメニューオブジェクトを作ってみましょう。

以下の画像をダウンロードしてご使用ください。
(ブラウザによって操作は異なりますが、画像上で右クリックして「ファイルに保存」に相当する項目を押して保存します。)
ふきだし.png(1678 byte)


この画像をプロジェクトに登録したあとに、以下の記事を読んでください。

まずは、メニューオブジェクトを作成しましょう。「タイトルメニュー」という名称でオブジェクトを作成し、
大きさを縦:112、横:64として設定した後、アニメーションを設定します。
addanim_menu.png(51240 byte)
まずは先ほど追加した「ふきだし.png」を選択した後、オフセットの項(上記A部分)の横部分を32と設定します。
こうすることで、画像選択部のマス目が移動します。最後に上図B部分をアニメーションに追加し、適当に名前を付けた後
OKボタンを押します。

bar.png(864 byte)

つぎに、「タイトルメニュー選択部」という名称でオブジェクトを作成し、大きさを縦:16、横:80としてください。
このあと、以下の画像を参考にアニメーションを設定してください。
addanim_bar.png(37348 byte)


bar.png(864 byte)

先ほど作成した「タイトルメニュー選択部」は、メニューとして使用する
「タイトルオブジェクト」で選択された項目を表現するのに使用します。
選択状態の項目に「タイトルメニュー選択部」オブジェクトを重ねることで、
その項目が選択されていることを表現します。

このオブジェクトを重ねる位置は、右図の赤線で示した通りで、そのときの
オブジェクト位置は右図赤番号のようになります。
この値は、イベント作成のときに使用します。


bar.png(864 byte)

それでは、まずは「タイトルメニュー選択部」のイベントを作成しましょう。
オブジェクト「タイトルメニュー選択部」のイベント開始条件「配置オブジェクト発生時」を以下のように編集してください。



「タイトルメニュー」の選択されている項目の上に「タイトルメニュー選択部」を表示させるため、オブジェクトを透明にします。
こうすることで、選択されている項目の文字が見えるようになりますね。
「タイトルメニュー選択部」のイベント編集はこれで終わりです。


bar.png(864 byte)
つぎに、「タイトルメニュー」オブジェクトのイベントを編集していきます。


「タイトルメニュ」オブジェクトには、上記のような機能をもたせます。
ここで、タイトルメニューによって発生させた「タイトルメニュー選択部」をイベントでコントロールするために、
タイトルメニュー選択部を格納するための配置オブジェクトデータアイテムが必要になります。
また、どの項目を選択されているのかを格納するためのデータアイテムも必要になります。

まずは、作成する「タイトルメニュー選択部」を格納する配置オブジェクトデータベースを作成しましょう。

まず、@部分に図のように名称を入力します。
つづいて、A部分で「配置オブジェクト」を選択します。このようにすることで、配置オブジェクトデータアイテムを作成できます。
B部分を押して、C部分にデータアイテムが作成されていることを確認してください。
なお、いまはこのデータアイテムに配置オブジェクトを登録しません。このあと説明する、イベントでの配置オブジェクト作成&配置で
このデータアイテムを使用します。

つぎに、どの項目が選択されているかを格納するデータアイテムを作成します。同様に、オブジェクトデータベース内に、
整数値データアイテムを作成し、名称を「選択項目」としてください。
(整数値データアイテムを作成するには、A部分で「整数値」を選択します。)

ここまでできたら、イベントを作成していきます。

まずは、イベント開始条件「配置オブジェクト発生時」にイベントを組んでいきましょう。

ここで、上図赤線部の「オブジェクトを発生させる」イベントコマンドでは、「タイトルメニュー選択部」を発生させています。
つぎのようにパラメータを設定します。

@、A部分に、発生位置の座標を入力します。
右図で設定されている位置は、「はじめから」の
項目の位置に発生させるオブジェクトが
かさなるようにしています。

B部分に発生させるオブジェクト(タイトルメニュー選択部)
を設定します。

C部分を「はい」に設定し、D部分に作成した
「タイトルメニュー選択部オブジェクト」データアイテムを
設定しましょう。

このように設定することで、指定の位置に配置オブジェクトを発生させ、その配置オブジェクトをデータアイテムに登録することが
できます。
(作成した配置オブジェクトをデータアイテムに登録しないと、作成した配置オブジェクトの操作を、ほかの配置オブジェクトから実行
できなくなってしまうので、このように作成した配置オブジェクトをデータアイテムに登録する手法が用いられます。)


この状態で、「タイトルメニュー」オブジェクトのみを
タイトルマップに配置し、実行してみましょう。

右図のように、「タイトルメニュー選択部」オブジェクトが指定の
位置に正しく作成されていることが確認できます。

つぎは、イベント開始条件「いずれかのキーが押下されたとき」にイベントを組んでいきます。

ちょっと長いですね…。でも、そんなに難しいことはしていません。行番号0から順番に見ていきましょう。

tut10_f1.png(12361 byte)

行番号 内容
0 押されたキーが「うえ」であれば、次の処理を実行します。(上のイベント、行番号1〜4までの間の処理を実行)
【フロー制御→条件分岐セット→条件分岐】
条件分岐パラメータを次のように設定しましょう。画像1
1 データアイテム「選択項目」が1であれば次の処理を実行します。(上のイベント、行番号2〜3までの間の処理を実行)
【フロー制御→条件分岐セット→条件分岐】
条件分岐パラメータを次のように設定しましょう。画像2
2 「選択項目」データアイテムの値を0に設定します。
【データベース操作→データアイテムの値を変更する】
パラメータを次のように設定しましょう。画像3
3 配置オブジェクト「タイトルメニュー選択部」を移動させます。
【オブジェクト→位置指定→配置オブジェクトを指定移動量だけ移動する】
パラメータを次のように設定しましょう。画像4
4 条件分岐の終了地点
【フロー制御→条件分岐セット→条件分岐終了点】
5 そのほかに、もし押されたキーが「した」であれば、次の処理を実行します。(上のイベント、行番号6〜9までの間の処理を実行)
【フロー制御→条件分岐セット→条件分岐(そのほかに)】
6〜9 上図のイベントを参照して、設定してみてください。内容は行番号1〜4とほぼ同じです。
10 そのほかに、もし押されたキーが「決定」であれば、次の処理を実行します。(上のイベント、行番号11〜13までの間の処理を実行)
【フロー制御→条件分岐セット→条件分岐(そのほかに)】
11 もし「選択項目」データアイテムが0(つまり1番目:「はじめから」が選択された状態)であるなら、以下の処理を実行
【フロー制御→条件分岐セット→条件分岐】
12 マップを読み込む(読み込ませたいマップを設定してください。)
【ゲーム進行→マップを読み込む】
パラメータを次のように設定しましょう。画像5

これは、どのキーが押されたのかを随時確認し、それに応じて配置オブジェクト「タイトルメニュー選択部」を移動させたり、
選択されている項目に応じてマップを読み込むイベントです。
tut10_flow.png(17784 byte)

それでは実行してみましょう。キー操作によって「タイトルメニュー選択部」の位置を移動させたり、選択された項目によっては
マップが移動する様子が確認できます。

せっかく「つづきから」項目も用意したのに、使わないの?と思われた方も多いと思いますが、この機能の実装は
つぎのチュートリアル(執筆中)に回します。


bar.png(864 byte)

←チュートリアル10へ戻る  
←チュートリアルもくじへ戻る
←トップページへ戻る