当サイトの説明

ネットで出来る事アレコレ
■ネット初心者の方に役立つこと、こんなことがあるよ等を解説。
無料で出来るネットゲーム
■ネットには無料で出来るゲームが沢山ありますよ、それを紹介してます!!
脱出ゲームの作り方-Parafla
■自分で脱出ゲームを作成したい人(超初心者向け)のための解説です。
オススメ脱出ゲーム
■実際にプレイしてみてオススメな脱出ゲームを紹介してます!!

当サイトの全メニューは右の方にあります!!

2009年04月03日

画面の分割について

部屋の移動方法】へ戻る

■脱出ゲームで一番の基本となるだろう、部屋の移動の方法を前の項でやりました。
今回は画面の分割について説明してきますね。

■脱出ゲームでは、メインとなる部屋の画面と、取得したアイテムなどを表示したり、メッセージを表示する画面に分割してあるゲームがほとんどです。

■ここで、まず最初に覚える言葉は「スプライト」という言葉です。
これがいったい何であるかを説明するのは、ちょっと難しいので、画面分割の方法を解説する中で覚えてください。
とり合えずはスプライトと言う言葉があると覚えてくださいね

■それでは、前のところで作った部屋移動の画面の下にアイテムなどを表示していく画面を作っていきましょう。


paraflaを起動して、前に作った部屋移動のプロジェクトを開きます。

そして上の一番左にあるファイル→プロジェクトのプロパティを開きます。
parafla17.png
■上のような画面が出てきます。そこで、大きさの指定を変更します。
赤〇の付いている部分が、変更箇所になります。

■何故変更するかというと、前に作った部屋の画面の大きさは、幅250高さ210の画面サイズです。
上の図を見てもらうと同じサイズになってますね。
その部屋の画面にさらにアイテム等を表示する画面を付け加えるのですから、ゲームとしての画面サイズも当然その分大きくなるわけです。

■今回は下にアイテムの表示場所を作ってみたいと思いますので、サイズは幅250高さ80くらいにしておきますね。
ということで、全体のサイズは、前の部屋の画像の分も入れると。
幅250高さ290という画面のサイズになります。

■では設定を変更してみてください。


■ゲーム画面のサイズを決めたので。
それに合うようにアイテム欄の画像を用意することになりますね。
■サイズは250×80です。
parafla18.png
■上を見てください。
ファイルリストにitem_ranというファイルを追加しました。
この画像ファイルを使ってアイテムの表示欄を作っていきます。

■画像自体は、ただ250×80の真っ黒な長方形です。

■ここで最初に出てきたスプライトという言葉を使います。

■スプライトととは、複数のフラッシュを同じ画面内に同時に処理していくのに使います。

■メインとなる部屋の画面を一つのスプライトにまとめます。
アイテムの表示画面も一つのスプライトにまとめます。
なので、2個のスプライトを必要としますね。

■同じ画面内に2個のフラッシュを表示するわけです。
メインになる、部屋の画面(フラッシュ01)アイテムを表示する画面(フラッシュ02)
ということです。

では実際にスプライトというものを作ってみましょう。
parafla19.png

■ファイルリストで右クリックしてあとは上のように、アイテムを追加→スプライトを選びます。

parafla20.png

■次に上の画面が出来ます。

赤〇のところのスプライト名に自分の分かりやすい名前を付けておきましょう。
ここでは部屋の画像をmainという名前にしておきます。

■その下の赤〇のところにサイズというのがあります。

ここは全体の画面のサイズに合わせて250×290になおしてください

あとはOKをおしてください。

■これで、スプライトの入れものが出来ました。
この中に部屋の移動で使っているイベントをそっくりそのままドラック&ドロップします。
parafla21.png

■上のように全てを範囲指定して右クリックしてコピーします。

parafla22.png

■コピーしたら@の先ほど作ったスプライトの所を左クリックします。
するとAのところにスプライトを編集とでるので左クリックです。
イベントリストのところが、空になった状態になるので、B貼り付けをしてください。
部屋の移動で作ったイベントがそのままそっくり、スプライトの中にコピーされます。

■これはparaflaの中にスプライトを置くことで、もう一つparaflaが入っているような状態です。
2個スプライトを用意すると、2つのparaflaがあるという感じですね。

その2個のparaflaを使って、独立したものを一つの画面内に同時に表示させるわけです。

■完了したら下の図の赤〇の部分をWクリックしてください。
イベントリストの上の部分の薄いピンク色のところです。
parafla23.png

■するとコピー元の部屋のイベントリストに戻るので、全て削除しましょう。

parafla24.png

■上のようにファイルリストには、スプライト[main]・前回に使った、部屋の移動用の画像・今回追加したアイテム欄の背景画像が、ファイルリストにありますね。
上と同じになっていたらOKです。

■赤〇で囲んでいる部分がスプライトの中身を見てるときは薄いピンクで、paraflaのイベントとしてみてる画面の時は灰色になってるのがわかります。

■そして、先ほど前回のイベントは削除したので、今はイベントは何もない状態になってます。


■それでは、今回は画面を二つにするということなので。
もう一つの画面のアイテム欄のスプライトを作ります。
名前は(item_ran)というスプライトにしますね。

■部屋のスプライトと同じで、ファイルリストに新しくスプライトと作ります。
そしてのスプライトの中にアイテム欄に使用する画像のファイルを入れます。
あとは、ファイルのサイズ、画像の表示位置を決めます。
ファイルのサイズは、もちろん全体サイズなので250×290ですね。
parafla25.png

■スプライトの編集で、スプライト内に画像を追加したら、画像のプロパティを開いてください。
上のような画面が出ます。

■@のとこの数字を決めると、画像の位置が決まります。
Bのように、部屋の画面の下に表示されるように配置しましょう。
今回はY(高さ)だけずらすのでYのところを210に設定します。(部屋の画面の高さ分下げるということですね。

■そして、Aの固定画面に設定しておいてください。

parafla26.png

■イベントリストのところには上のようにします。
画像(item_ran)を入れます、その下にアクション停止です。

■これで、スプライトが2つ用意できました。

スプライトの編集を終えて、画面を戻してください。

■今まで作った2つのスプライト(部屋の移動のmain)(アイテムの表示欄のitem_ran)を使って。
一つの画面にまとめたいと思います。

■それぞれのスプライトをイベントリストに追加してください。

■そして、それぞれのプロパティを開きます。

parafla27.png

■イベント欄は上のようになっているはずです。
しかしこれでは、どっちがどっちのスプライトなのかわかりませんね。

■なので、追加したときに名前をつけないと後で困ります。

■今回は、上が(ID0007)なのでitem_ran下が(ID0006)なのでmainとなります。

■ではスプライトのプロパティを開いて名前を付けてみましょう。

parafla28.png

■プロパティを開くと上の画面が出てきます。
2つのプロパティがあるので、@で深度を変えましょう。
ここでは、item_ranを深度1mainを深度0にしておきます。

■Aのところで固定画面に設定します。

■Bのところにインスタンス名というのがありますね。
これが名前になります。
ここに、それぞれ名前をつけましょう。
アイテムの表示画面にはitem_ran
部屋の移動画面にはmain
とそれぞれ、つけました。


■それぞれのプロパティを設定して画面を一番初めに戻します。

parafla29.png

■まだ上のようにアクション停止は入ってないと思うので、追加してください。

ここまで出来たら、完成です。




■ここまでで、アイテムの表示画面と部屋の移動の画面の2つを分割表示できました。
実際にアイテムを表示するのは、まだ後の方で説明していきますね。

2009年03月31日

部屋の移動方法

ゲームで使う絵を用意する】へ戻る

■まずparaflaを起動させてください。
下の様な画面が現れます。

parafla解説01.png
■赤い四角で囲んだ部分の左(ファイルリスト)が画像や音楽などのゲームで使用するファイルを入れる場所になります。
■右の部分(イベントリスト)ではファイルリストの中の画像などをどのように動かすとか、いつ画面に現れるとかを決めていく所です。


■上の図ではすでにファイルリストに部屋の壁2面と左右の矢印の画像を入れてあります。
入れ方は、前もって作っておいた画像のファイルファイルリストのところにドラック&ドロップするだけです。

room_1.png room_1.pdr room_2.png room_2.pdr
hidari.png hidari.pdr migi.png migi.pdr

■前の項でも説明してますが、使用する画像は上の4枚です。
paradrawで作成してるのでファイル名は上記の通りになります。

fail_list01.png
■ファイルリストのところは上図のようになります。

補足)ファイルリストのところにID・種別・ファイル名とありますが。
○IDはファイルにそれぞれ振り分けられた番号のことです。
○種別は画像や音楽などの種類を現します。
○ファイル名は、画像などに自分でつけた名前が表示されますので、ファイルを作る際に自分で分かりやすいように書いておくとよいです。そのときに半角の英数で書いてください。
ローマ字で読めるように書くと後でわかりやすいですよ。

■画像をファイルリストへ入れ終わったら準備完了です。
次はイベントリストの方をいよいよ説明していきます。
parafla01.png
■ファイルをイベントリストに追加するには
@追加したいファイルを右クリックして(今回はroom_1のファイルを追加します)
Aイベントの追加を選び左クリックします。
Bすると上図のようにイベントリストに追加されます。

■このようにして追加していきます。
ここで、新しい言葉を覚えてください。
ラベルという言葉です
今後paraflaを使用する中で使う言葉になります。

■ラベルとは箱みたいなものと思ってください。
その中に使用したいファイルを入れていきます(イベントの追加ということです)
どの箱(ラベル)を選択するかでflashの画面で表示されるものが変わってきます。

今はなんとなく、ラベルという入れ物があるくらいに理解してください

■そこで今から作るゲームはroom_1とroom_2を行ったり来たり出来るというものです。
(部屋の移動)ということなります。
なので、二つの箱(ラベル)を用意することになります。
そのラベルのどちらを表示するかによって画面に出てくる部屋の画像を決めていきます。

ラベルの作り方は次の図をみてください。
parafla02.png
■上の図で示した@のラベルを作りたいと思う場所で右クリックです。
次にAアクションの挿入を選んで左クリックします。

■すると下の様な画面が出てきます。
parafla03.png
■そこで@を押してラベルの設定を選びます。
次にA適用を押して決定します。

■するとイベントリストにラベルが追加されてるはずです。
下の図のようになります
parafla04.png
■しかしこの状態だとラベルの名前が新しいラベルになっていますね。
本来はラベルの設定をするときに、名前をつける所があるのでその時に付けてください。
今回は後から変える方法を載せます。
Bのプロパティを左クリックしてください。

■下のイベントのプロパティの画面が開きます。
parafla05.png
■そこで@に自分の分かりやすい名前を付けてください(ただし半角英数です
今回はroom_1とつけました。
次にA適用を押して決定します。

parafla06.png
■上の赤〇の部分のようになっていたらOKです。
これでラベルを作ることが出来ました。
この要領でもう一つの部屋のラベルも作ります(room_2のラベルです)

■ここまでで、ラベルとファイルをイベントリストに追加する方法を説明してきました。

それでは、実際にラベルを2つ作ってみましょう。
parafla07.png

■上のように二つ作ります。

■次に各ラベルにファイルを入れていきます。
部屋に必要なファイルは、背景の画像と移動するときに左右に移動するためのボタンが必要になりますので、それを各部屋に割り振ります。
parafla08.png

■room_1には部屋1の画像と左右の矢印
■room_2には部屋2の画像と左右の矢印
各ラベルに3枚の画像を追加しました。

どれがどの画像なのか一見分かりにくいのですが、
画像と書いた部分の右横に4桁の数字がありますね。
それがID番号になります。
下の図を見てください。
parafla09.png

■ファイルリストの画像です。
IDのところに4桁の番号がありますね。
画像ごとに違います。
これで各画像が必要な分追加されているか確認できます。

-flash-の表示設定
■ここで、一つやっておかないとならないことがあります。
flashを再生したときの画面の表示サイズを決定していませんでしたのでここで
やっておきましょう。

方法は、@paraflaの画面からファイルを左クリック、出てきたメニューのプロジェクトのプロパティを選択します。

Aすると基本設定、幅、高さという項目あるので、そこで設定します。
今回は部屋の画像のサイズに合わせて設定します。
幅250 高さ210 と設定しました。

■ちょっと脱線しましたが、ラベルを2つ作り、必要な画像を各3枚追加したところまで行きましたね。

この状態でflashを再生させると、イベントリストに追加してある画像が順番に表示されることになります。
room_1.png  migi.png hidari.png room_2.png migi.png hidari.png
の順番に繰り返し永遠に表示されます。
これではゲームとしてはとても成り立ちません。

■ではどうすれば良いのか。

各画像のプロパティを開き設定してきます。

■まず、イベントリストにあるroom_1の画像のところで右クリックです
そしてプロパティを開きます。
parafla10.png

深度について
上のような画面が開きます。
@のところに深度というものがありますね。今後重要になってくるので説明します。
このラベル内には画像が3枚追加されていますね。
それは、各画像は透明なフイルムに描かれていると想像してください。
それを重ね合わせると当然上にある画像の部分が重なって下にある画像は隠れて見えなくなりますね。
なので、表示したいゲーム画面の状態に合わせて順番を決める必要があります。
ここでは、矢印のどちらかが、一番上一番下に背景となる部屋の画像を置くことになります。
逆に部屋を一番上に持ってくると、矢印が隠れて見えなくなります。

■深度は-255〜255まで500の数字で設定可能です。
-255が一番したにきて、255が一番上に表示されることになります。

■背景の画像は基準となる画像なので、このまま深度0としておきます。
実際にparaflaを操作しているうちに自分のやりやすいものを見つけてください。
それまでは、ここと同じ方法をとるようにしましょう。

■次にAの固定画面/通常画面の切り替えについてですが、固定画面とはその名の通り固定された状態を示します。
paraflaでは設定によって、絵を横へ移動させるアニメーションなどが簡単に作れます。
しかし背景はここでは全く移動させたりしませんし、逆にされても困りますね。
固定画面に設定しておきましょう。

■通常画面にすることで、アニメーションなどの設定が可能になりますが。
ここではまだ触れません。
通常画面にすると、画像が動くアニメーションなどの設定が出来るのだということくらいをなんとなく
覚えておいたらそれでいいと思います。

ここでは、背景の部屋の画像(room_1)は固定画面にするという設定のみ行います

■ここで、また少しやっておくことがあります。
先ほど、今のままでは用意した画像が順番に永遠切り替わるだけだと書いておきましたが。
その状態をとめておきます。

■どうしてそういう状態になるかと言うと、単純に止まりなさいという命令をしていないからです。
ではどうしたら止まりなさいという命令が出来るのかというと。
アクションの挿入でアクションの停止をしてあげる必要があります。

■実際にどうやるかというと。
停止させたいところで、右クリックしてメニューを出します。
そこでアクションの挿入という項目があるので選びます。
すると、下のようにイベントのプロパティというのが開きます。
parafla11.png

■前のところでラベルを追加したときと同じ画面です。
ここでラベルの時は、ラベルの設定を選びましたが今回は停止を選びます。
これでアクションの停止が出来ます。

■アクションの停止をしたいところでと、書きましたが、実際どこで停止させるのか分からないだろう思うので、書いておきます。
parafla12.png

■上の@停止の挿入場所のところに停止を入れます。
各ラベルにそれぞれ停止を入れます。
脱出ゲームをつくる上で、この停止は基本的に各ラベルに入れておきます。
覚えておきましょう。


■アクションの停止の前に、room_1の画像のイベントの設定をしていましたね。
そのとき、固定画面にするという説明をしました。
上の図を見てください、赤い四角で囲んだものがroom_1の画像になります。
その一番右のところに(固定)となってますよね。
他の画像のところはまだ設定していないので、何もついていません。
(固定)と表示されているところは固定画面になっていて、表示されていないところは通常画面になっていいるということです。

■これで永遠に画像が繰り返されると言うことが無くなりました。
次へ進みますね。

■次は矢印の画像の設定に移ります。
parafla13.png

■矢印の画像のイベントのところで右クリックしてプロパティを押すと、上の設定画面が出てきます。
room_1のときのものと同じですね。
今回は、色々設定していきます。

■まず矢印では何をするのかということですが。
一般的に脱出ゲームで部屋を回転するように左右に移動する際、矢印のボタンをおして画面が切り替わりますね。
そのときのボタンを作るわけです。

■room_1のときと同じようにまず固定画面にします。次に深度の説明をしていましたね。
矢印が背景の部屋の画像の下に隠れてはどこにあるのかわからないので。
room_1の画像より上に出します。
ということはroom_1は深度「0」に設定してあるのでそれより大きい数字ということになりますね。
今回は右の矢印「migi」は深度1とし左の矢印「hidari」は深度2とします。
右と左の画像の深度が逆になっても問題はありません。

■ここまでで、矢印の画像が部屋の画像の上に表示されるようになっているはずです。

■では、次にボタンとして機能させてみましょう。
この場合は上の図のボタンにするの四角を押してください。
すると下のようになります
parafla14.png

■赤い〇で囲んだ部分を書いてあるの同じに設定します。
アクションのところはラベルへジャンプ。ラベル名のところはroom_1の矢印を設定しているので移動先となるroom_2にします。

■これで画面上に表示された矢印を押すとroom_2の画面に切り替わるということになります。

■矢印は一つの部屋に左右2つあるので、両方とも設定していきます。
本来なら、四角い部屋だと4面の壁を移動するので、左矢印と右矢印で移動するラベルは違ってきますが今回は2つを行き来するだけなので同じ設定にします。

■矢印の設定の最後は、矢印を画面のどこの場所に出すか設定します。
今の状態だと下のように見えてしまいます。
parafla15.png

■矢印が左上に重なって表示されていますね。

■これでは、どうしようもないので、適正な位置に配置してあげしょう。

parafla16.png

■矢印の画像のイベントのプロパティの画面で@のボタンを押すと画像が表示されます。
その画面で矢印をドラックして移動することが可能になりますので、適切だと思う位置へ移動してみてください。
右の矢印は右端の中央、左は左端の中央に置いてみますね。
完了したら適用をおしてください。

■以上の要領で、room_2の方も設定していきます。
全てに設定が完了したら出来上がりとなります。


■出来上がったflashがこれになまります。

部屋の壁を四面にすると四角い部屋を順番に移動できるものになるでしょう。
何も物のない壁だけだと、移動してる感覚も分かりにくいのですが。
今回の部屋移動については以上で終わりです。

■この部屋移動について書いてある部分を読んで実際に作ってもらえれば、paraflaについて少しわかってくると思います。

この部屋移動の方法がparaflaでゲームを作る上での一番の基本を覚えやすいと思うのでかなり丁寧に書いたつもりです。
実際に慣れてしまうと、このんなに長い解説の必要なものではないのですが。
はじめて、paraflaで作業する人向けに書いてあります。

是非頑張って作ってみてください!!

画面の分割表示】へ進む

ゲームで使う絵を用意する

製作開始の前に】へ戻る

■それでは、脱出ゲームをつくる上で一番はじめに用意しないとならないのが、ゲームの舞台となる画像です。
部屋の背景の画像ということになりますね。

■ここでは、作り方を出来るだけわかりやすく説明するために。
(通常だと四角い部屋は壁が4面あるので、その4面を各自移動できるようにするのですが。)
2面に省いて説明していきます。
4面に増やすのは、2面で作れたら同じ処理を4面に増やすだけなので簡単です。
ということで、必要になる画像は、背景の画像が2枚左右の矢印ということになりますね。
下の様な画像になります

room_1
room_1.png

room_2
room_2.png

hidari.png hidari migi.png migi

の4枚の画像を用意してください。

用意が出来たら、いよいよparaflaを使って動かしていきます。

部屋の移動方法】へ進む
     サイトが繋がる勝手に宣伝@roots
    ホームページやブログを無料勝手宣伝してくれるツールです!!
    サイト内にツールを貼るだけ 【詳しくはココをクリック

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。