ゲーム風ポートフォリオ:画面遷移方法変える【178日目】(2019/01/19)
https://gyazo.com/71035dc55a235993c9082d3f944983ae
Porin.icon今日はカラメルカラムの業務の作業記録だよん!
◆作業記録の目次
1. ゲーム風ポートフォリオ:画面遷移方法変える
◆作業時間のタイムトラッキング結果
https://gyazo.com/927d56dcee5bbb7e10f510391a113b96
https://gyazo.com/76234747bba41ef3499cef7dad7b145c
https://gyazo.com/ea38e8d40023a4d62a667463b859b1d4
1. ゲーム風ポートフォリオ:画面遷移方法変える
◆ 画面遷移方法を変える
▼ 背景
以前はスライドするようににしてたけど、ちょっと内容的にあんまり合わない感じがした
探索画面ではプレイヤーが部屋を探し回っているイメージ
なので、出口を用意して、そこにプレイヤーがたどり着いたら部屋移動みたいな感じで画面遷移したいなと
そのとき、プレイヤーにフォーカス→視野が狭まるとかの動きだと楽しそう
▼ ドアを配置
今まで用意してた画面遷移用のボタンは一旦非アクティブに
https://gyazo.com/c4db2e5796637ba10ecbba809ef56853
▼ ドアにプレイヤーが触れると画面遷移ボタンを出現
コライダをアタッチして判定する
離れると非表示にする
code:DoorControlles.cs
using UnityEngine;
public class DoorController : MonoBehaviour {
public GameObject charactorScreenButton;
private void OnCollisionEnter2D(Collision2D collision)
{
charactorScreenButton.SetActive(collision.gameObject.CompareTag("Player"));
}
private void OnCollisionExit2D(Collision2D collision)
{
charactorScreenButton.SetActive(!collision.gameObject.CompareTag("Player"));
}
}
https://gyazo.com/5995b5cc6044da48f16148e7f9aa1d8a
▼ 画面遷移ボタンを押すとカメラがズームするように
カメラの位置をドアの位置へ移動&カメラのサイズを調整しズーム
コルーチンをシーン切り替え
code:ScreenManager.cs
public void ZoomIn()
{
// カメラをドアの位置に移動
float targetPosx = door.transform.position;
float targetPosy = transform.position;
transform.position = new Vector3(targetPosx, targetPosy, -10f);
// カメラをズームイン
Camera.main.orthographicSize = Mathf.SmoothStep(Camera.main.orthographicSize, zoomSize, zoomSpeed);
}
}
次に、もっと滑らかな動きになるように調整
プロトだしそんなにこだわらなくていいやと思い、自分で関数は作らずにMathf.SmoothStepをコルーチンで繰り返し呼び出すことで再現
画面切り替わっるタイミングでコルーチンは停止させる予定
コルーチンは画面遷移用のメソッド内で呼び出す
code:ScreenManager.cs
public void SwitchCharactor()
{
// 探索画面かつ画面遷移していないときのみ遷移できる
if(IsExplore())
{
ScreenState = SCREEN.CHARACTOR;
// 画面遷移前の動き
StartCoroutine(ExecuteEffectesBeforeCharacterScreenTransition());
}
else
{
Debug.Log("Same Scene");
}
}
private IEnumerator ExecuteEffectesBeforeCharacterScreenTransition()
{
while (Camera.main.orthographicSize > zoomSize + 0.01f)
{
// カメラをドアの位置に移動
float targetPosx = Mathf.SmoothStep(Camera.main.transform.position.x, door.transform.position.x, zoomSpeed);
float targetPosy = Mathf.SmoothStep(Camera.main.transform.position.y, door.transform.position.y, zoomSpeed);
Camera.main.transform.position = new Vector3(targetPosx, targetPosy, -10f);
// カメラをズームイン
Camera.main.orthographicSize = Mathf.SmoothStep(Camera.main.orthographicSize, zoomSize, zoomSpeed);
yield return new WaitForSeconds(zoomInterval);
}
}
このメソッドをuGUIボタンのOn Click()イベントの際に呼び出す
On Click()では画面遷移ボタンを非アクティブ化する動きも登録しておく
https://gyazo.com/86cbf8a97f046f4fc5e8d85023fd2151
https://gyazo.com/7200a63887aa2852578aef1cccc6c1aa
▼ カメラズームイン後、ドアに入るっぽい動きを入れる
ドアオープンののアニメーションををトリガーで再生
プレイヤーを一歩動かす
このとき、ドアにコライダがあるのでRigidbodyのメソッドは使わず、transform.positionで移動させる
このときだけコライダをオフにするとかも考えたけど、画面遷移したらリセットするだろうからこういう荒っぽいやり方でもいいやと思い
code:CameraController.cs
private IEnumerator ExecuteEffectesBeforeCharacterScreenTransition()
{
while (Camera.main.orthographicSize > zoomSize + 0.01f)
{
// カメラをドアの位置に移動
float targetPosx = Mathf.SmoothStep(Camera.main.transform.position.x, door.transform.position.x, zoomSpeed);
float targetPosy = Mathf.SmoothStep(Camera.main.transform.position.y, door.transform.position.y, zoomSpeed);
Camera.main.transform.position = new Vector3(targetPosx, targetPosy, -10f);
// カメラをズームイン
Camera.main.orthographicSize = Mathf.SmoothStep(Camera.main.orthographicSize, zoomSize, zoomSpeed);
yield return new WaitForSeconds(zoomInterval);
}
// ドアを開く動き
door.GetComponent<Animator>().SetTrigger("Open");
player.GetComponent<Rigidbody2D>().isKinematic = true;
player.transform.Translate(1.5f, 0, 0);
}
https://gyazo.com/9c69c7ced59c3d7bcb3e4b4f393dc28e
▼ 画面を切り替え
code:ScreenController.cs
// 画面切り替え用のオーバーレイを出現
yield return new WaitForSeconds(0.5f);
overlay.SetActive(true);
// カメラを元に戻す
Camera.main.transform.position = cameraOriginPos;
Camera.main.orthographicSize = cameraOriginSize;
// 画面を切り替え
exploreScreen.SetActive(false);
charactorScreen.SetActive(true);
// オーバレイを消す
yield return new WaitForSeconds(1.5f);
while(overlay.transform.localScale.y > 0f)
{
float targetScaleY = Mathf.SmoothStep(overlay.transform.localScale.y, 0f, scaleSpeed);
overlay.transform.localScale = new Vector3(overlay.transform.localScale.x, targetScaleY, overlay.transform.localScale.z);
yield return new WaitForSeconds(scaleInterval);
}
yield break;
https://gyazo.com/b46a3451c0f87b8c5f7c975fde09f707
◆ 画面遷移のコルーチン内をリファクタ
動作ごとにメソッド化する
サブコルーチンの終了はこれで検知
code:ScreenController.cs
private IEnumerator ExecuteEffectesForTransitionToCharactor()
{
// カメラをズームイン
StartCoroutine(ZoomIn());
yield return new WaitWhile(() => Camera.main.orthographicSize > zoomSize + 0.01f);
// ドアを開く動き
OpenDoor();
yield return new WaitForSeconds(0.5f);
// 画面切り替え用のオーバーレイを出現
overlay.SetActive(true);
// カメラを元に戻す
InitCamera();
// 画面を切り替え
SwitchActiveScreen();
yield return new WaitForSeconds(1.5f);
// オーバレイを消す
StartCoroutine(ShrinkOverlay());
yield break;
}
◆ わんこをジャンプ
code:WaitingDogController.cs
public IEnumerator Jump()
{
float height = 0f;
Vector3 originPos = transform.position;
// 上がる
while(transform.position.y < originPos.y + jumpHeight)
{
height = Mathf.SmoothStep(0f, jumpHeight, jumpSpeed);
transform.Translate(0, height, 0);
yield return new WaitForSeconds(jumpInterval);
}
yield return new WaitForSeconds(0.05f);
// 下がる
while(transform.position.y > originPos.y)
{
height = Mathf.SmoothStep(0f, jumpHeight, jumpSpeed);
transform.Translate(0, -height, 0);
yield return new WaitForSeconds(jumpInterval);
}
}
https://gyazo.com/886204f4bbc8e8569eade6cb5d591fb9
https://gyazo.com/fca8e1450620ce1340c33febb6613b76