Chapter21 女神を降臨させるプログラム

今回もゲームエンジン『Unity』を使った『新婚三択ADVゲーム』制作の続きをやっていこう。

↓↓↓最初から見たいという方はこちらからどうぞ。↓↓↓

さて今回だが、タイトルにもあるように女神を降臨させてみようと思う。

用意するのは、『女神』と『女神が降臨するに相応しい背景』

昨日作った『女神』、『風呂の背景』、『風呂の背景(浴槽から下のみ)』があるので今回はこれらを使っていく。

それでは例のごとく『Unity』を立ち上げよう。

前回までは主に玄関のシーンを編集してきたが、今回は三択の一つ『お風呂』のシーンを編集していく。

以前、Sceneフォルダーの中に『お風呂』を選んだ場合に表示される『SecondScene』というSceneを作成して、『「お風呂」ボタン』と『SecondScene』をリンク付けるというところまではやっている。

ちなみにその時の記事がこちら↓↓↓

『SecondScene』をダブルクリックすると、このようにお風呂シーンの編集画面に切り替わる。

まずは例のごとく『Assetsフォルダー』内に絵素材を追加し、適当なサイズで画面上に『女神』を置いてみる。

『OrderInLayer』の数字を背景画像より高く設定すれば、『女神』が『風呂の背景』より手前に表示される。

次が少しシビアな作業になるが、『風呂の背景(浴槽から下のみ)』を追加して、『OrderInLayer』を『女神』より高い設定にして手前に配置。もともとの背景との境がばれないように微調整をする。

これで、とりあえず最初の画面設定は完了だ。

それではスクリプトを作っていこう。

スクリプトの名前は勝手に『Advent』と名付けた。

今回のイメージとしては、

・スタートして直ぐに『女神』のY座標を浴槽より低くし、透明度をマックスまで上げる。

・画面がタップされたら、Y座標徐々に高くして、それに合わせて透明度も下げていく。

といった感じだ。

スクリプトを開いたら、最初に必要なフィールドをいくつか宣言していく。

まずは『SerializeFielde』を頭に付けて『float型(少数の値を格納できる)』の変数『speed』を用意する。

『SerializeFielde』を頭に付けた変数は、このように『Inspector』の項目から値の変更が可能になる。

このフィールドの用途は、ざっくり言うと『女神』のフェードインにかかる時間の設定である。

続いて宣言しているこの3行だが、『x==女神のx座標』、『y==女神のy座標』、『a==女神の不透明度』を格納するために用意した。

次に宣言しているのは『SpriteRenderer型』のフィールドで『Visualization』と名付けている。

ちなみに『SpriteRenderer型』というのはこちらの『Unity』で用意されている『Sprite Renderer』という項目の情報を格納することが出来る型である。

最後に宣言しているのは『int(整数)型』の『tap』というフィールドで、初期値は『0』にしてある。

このフィールドは画面がタップされたかどうかの判定用に用意した。

フィールドの宣言が完了したので、次はプログラムが開始された後の処理を書いていこう。

まず、プログラムが開始されたタイミングで一回だけ読まれる『Start関数』の中にはオブジェクトの初期情報について書いていく。

『this.gameObject.transform.position= new Vector2( x, y )』では何をやっているかというと、

『このスクリプトが付与されている.ゲームオブジェクトの.[Transform]項目にある.[position]フィールドを=新しく作った[Vector2型]のフィールド(x座標,y座標)で上書きする』ということをやっている。

要するにここの『x座標』、『y座標』に、最初に宣言した『x==女神のx座標』と『y==女神のy座標』を代入しているということになる。

次にこの部分では、先ほど『SpriteRenderer型』で宣言した『Visualization』フィールドと、ゲームオブジェクトが元から持っている『SpriteRenderer』フィールドとをリンクさせて、『Visualization』フィールドからオブジェクトの表示設定を変えられるようにしている。

例えばこの部分では<SpriteRenderer>の情報と紐づいている『Visualization』フィールドの『color』設定に、『Color型』のフィールド(255,255,255,a)を新しく作って代入するということをやっている。

(255,255,255,a)とはこの色の設定のことで、左から順に『red』、『green』、『blue』、『alpha(不透明度)』の値を設定している。

ちなみに今回、『alpha』に代入した『a』というのは、冒頭に宣言した『float a=0f』のことで、初期値は『0』、つまり完全に透明な状態を差す。　

以上が女神の初期設定であり、この状態でプログラムを実行すると・・・

このように、女神は浴槽の下へ移動し、完全に透明な状態になるため、全くどこにいるかが分からないようになる。

あとはスマホの画面がタッチされた場合に、徐々に『y座標』が増え、徐々に不透明になっていくというプログラムを一秒間に約60回更新される『Update関数』内に書いていけばいい。

『もしも画面がタップされたら、初期値[0]だった[tap]フィールドに[1]を代入し』

『もしも[tap]フィールドの値が[0]より大きければ、オブジェクトの[y座標]と[不透明度]をそれぞれの[if条件が満たされなくなるまで]少しずつ繰り返し増やす』

こうすることによって『浴槽の中からじんわりと女神が降臨する』というようなアニメーションを作り出すことが出来る。

こちらテスト動画でございます。

ご閲覧ありがとうございました。