ステージ間の移動とフェードの実装方法

今回は場面、ステージ間の移動について説明をしていきます。

細かい説明は省いています。Construct 3 自体がまったくのはじめて、という人は以下の記事を順にやって慣れていってください。

メンタルハックWEB
Construct 3 の基本操作を学ぶ(1)~画面の見方と背景の設置 | メンタルハックWEB この記事では、Construct 3 のビギナーズガイドを参照しながら、ゴーストシューターという簡単なゲームを一緒に作っていきます。 https://www.construct.net/en/tutorials/...

ベースとなるゴーストシューター完全版は以下です。

あわせて読みたい
Construct 3 r368.2 ★★★★★ Launch Construct 3 r368.2. Make games with the world's easiest browser-based game creator. Try for free now and begin your game development journey.
Menu

ステージ移動に必要なものを配置する

まずは移動先となる新しいレイアウトを作ってください。そして新しいイベントシートも作っておきましょう。それぞれ game2 と game2 Event という名前にしました。

新しいレイアウトとイベントの作り方はこちらの記事に詳しく書いてあるので、参照してください。

メンタルハックWEB
ファミコン風レトロなタイトル画面を作ってみる | メンタルハックWEB 今回は Construct 3 でファミコン、アーケード風のオープニング画面を作ってみましょう。 下の画面内でクリックをするとゲームが有効になります。スペースキーでゲームスタ...

トリガーとなるオブジェクトをそれぞれの layout に配置してください。本当は階段とかドアがいいのでしょうが、適当なものがなかったのでここではただの塗りつぶしです。名前を Hole とでもしておきましょう。

現状だとプレイヤーが Hole と接触したときにプレイヤーが下に潜り込んでしまうと思います。これは直しておきましょう。

オブジェクト同士の Z 軸の調整(どちらが潜り込むか、上に乗るか)はイベントで行うことができます。以下のアクションを System Every tick に追記してください。

アクション:Hole → Move to object → behindPlayer

behindin front を切り替えることでオブジェクト間の Z 軸を調整できるので適宜行うようにしましょう。

レイアウトを切り替えるイベント

プレイヤーが Hole に乗っかったときに次のレイアウトに遷移するイベントを作ります。その前に移動先のレイアウトに適当に背景をつけておいてください。そのほうがわかりやすいので。

以下のようなイベントを作ります。

条件 : Player → is overlapping another object → Hole

アクション:System → go to layout → game2 (移動先のレイアウト名)

これで画面が切り替わりましたね。切り替わった先には当然プレイヤーは居ないので、スポーンさせるかあらかじめスプライトで配置(コピペでOK)しておく必要があります。

同じオブジェクトを移動先にも作ってそこからスポーンさせると、ドラクエの階段のような仕様になるというわけです。

さて、申し訳ありませんがこのイベントは無効にしておきましょう。フェードを実装させたいので。イベントを無効にするには対象のイベントの上で右クリック → toggle → Toggle disabled を選択します。すると線が引かれて無効化します。

フェードアウト・インさせる

フェードアウト・インの実装は以下の流れで行います。

  • フェード用黒幕の設置
  • Tween ビヘイビアを付加
  • 透明度をイベントで調整

まずは Sprite で黒の塗りつぶしで作って、レイアウト全体を覆うように配置し、左のウインドウ内の Opacity の値を 0 にしておきます。ついでに操作が面倒になるので Lock もしておきましょう。

その黒幕(ここではFadeBlack)に Tween ビヘイビアを付加しておきましょう。

次に以下のようなイベントを作ります。

条件1:Player → is overlapping another object → Hole

条件2:System  trigger once while true  

アクション1:FadeBlack → Tween(one property) → “FadeOut”Opacity100

trigger once while true なんですが、これは「何度も起こることは一回だけカウントします」という条件です。この条件を付けていないとうまく作動しません。試してみてください。

Tween について。これはオブジェクトの各値を、時間を設定して変化させることができるビヘイビアで、基本的にイベントで有効化させます。 

プレイヤーの操作を無効にするアクションも追加しておきましょう。これをしておかないと、オブジェクトに乗った後も動けてしまいます。以下です。

アクション2:Player → Set ignoring input ( 8 direction ) → Start ignoring

ここで一度プレビューをしてみてください。プレイヤーがオブジェクトに乗ったときに、フェードアウトが始まりプレイヤーの操作が無効になったはずです。次に、フェード終了後に場面を移行させるイベントを作ります。

Tween 終了後に場面を移動させる

次に、このフェードの処理が終わった後に場面を移動させます。アクションは先ほどのものをそのまま使えますが、条件は以下のようにしましょう。

条件:FadeBlack → On finished → “FadeOut”

“FadeOut” は先ほどの Tween の設定の時に付けた tag の名前です。それが終わったときに、という条件です。ここに以下のアクションをつけます。

アクション1:System → go to layout → game2 (移動先のレイアウト名)

アクション2:Player → Set ignoring input ( 8 direction ) → Stop ignoring

アクション1は先ほど無効にしたレイアウトの移動のアクションです。

アクション2は方向キーの入力を再び有効にするものです。

プレビューで確認してみましょう。フェードアウトが終了したあとで画面が切り替わり、遷移した画面で移動が可能になっていれば成功です。

今回は、フェードアウト・インを伴った場面の遷移について、簡単に解説をさせていただきました。おかしなところがあればコメントをいただけると幸いです。

Menu