Unityと黒猫

Unityの備忘録。一緒に勉強しましょう。

「Unityちゃんとクイズしようよ!」の作成備忘録3

 

yamasho69.hatenablog.com

今回からはそれぞれのシーンで備忘録として残しておきたい処理などを書いていきます。 

 

UnityScene

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

本作はユニティちゃんのキャラクターモデルを使用しますので、

ユニティちゃんライセンス条項を遵守し、

UCLロゴ、またはライセンスを表示する必要があります。

unity-chan.com

本作はTitleScene内にTextでライセンスを表示を行っていますが、

練習も兼ねて、起動時にUCLロゴを表示するUnitySceneを作成し、

フェードアウトして、TitleSceneに切り替わる処理をしています。

 

materializer.co

自分は上記の記事を参考にいたしましたが、今回の流れは次のとおりです。

    1. Unity-FadeManager をダウンロードします。
    2. ダウンロードしたパッケージをUnityプロジェクトにインポートします。
    3. Assets 内に、naichilab というフォルダができるので、その中にあるフォルダを FadeManager ⇒ Prefabs とたどっていき、FadeManager をヒエラルキーに配置します。
    4. MainCamera等のオブジェクトに以下のStartメソッドを打ち込んだAwakeUnityクラスをアタッチする。

     

void Start(){

       FadeManager.Instance.LoadScene("TitleScene", 0.5f);

すると、Scene開始後0.5秒でフェードアウトして、TitleSceneに遷移します。

なお、FadeManagerを使用する際はクラス先頭の

using UnityEngine.SceneManagement;

という通常のScene遷移時に必要な記述はいりません。

FadeManagerのインスペクター上でDebugModeにチェックが入っていると、

ゲーム中にデバッグ用の表示がされてしまいますので、不要ならばチェックは外しましょう。

 

TitleScene

f:id:yamasho69:20190502232729p:plain

ユニティちゃんがなぜか黒い!

Text、ボタン、背景画像はきちんと表示されるのに、

ユニティちゃんだけがなぜか真っ黒けのシルエットになる怪現象が発生し、

しばらく悩んでいましたが、ヒエラルキー上にライトがないだけでした…。

Unity3DではライトはSceneを作成すると自動的に配置されていますが、

2Dでは自動的に配置されていないので、

3Dのオブジェクトを使用する場合はライトを配置しないとシルエットしか表示されません。

 

背景をスクロールさせるには

TitleSceneではユニティちゃんに歩くアニメーションを設定し、それに合わせて背景が左から右にスクロールしています。

この処理を行うために、今回は以下のように同じ背景画像を2枚左右に並べました。

 

f:id:yamasho69:20190513193928p:plain

そして、2枚ともに以下のスクリプトをアタッチします。

 

public class BackGroundController : MonoBehaviour {

// スクロール速度
public float scrollSpeed = -0.03f;
// 背景終了位置
private float deadLine = -16;
// 背景開始位置
private float startLine = 12.0f;


void Update() {
// 背景を移動する
transform.Translate(this.scrollSpeed, 0, 0);

// 画面外に出たら、画面右端に移動する
if (transform.position.x < this.deadLine) {
transform.position = new Vector2(this.startLine, 0);}
}
}

 

 

 

タイトルを光らせるには

デフォルトのフォントだけだと見た目がしょぼいので、フォントの導入を行うことは以前に強く勧めましたが、ゲームタイトルはもう少し目立たせたいところです。

そこで、キラーンと光るようにしてみました。

https://i.gyazo.com/4b4a9f9743e2b2db9740dc1703519e8b.gif

導入方法は「ShinyEffectForUGUI.unitypackage」をインポートし、 UI オブジェクト(本作の場合はText)に
ShinyEffectForUGUI コンポーネントをアタッチすればOKです。

私はコガネブログさんの記事を参考にしました。

baba-s.hatenablog.com

 

さらにシーン開始から2秒おきに光らせるため以下のShineスクリプトもTextにアタッチしています。

public class Shine : MonoBehaviour {

public ShinyEffectForUGUI m_shiny;

private void Start() {
ShinePlay();
}
void ShinePlay() {
m_shiny.Play(1);
Invoke("ShinePlay", 2.0f);
}

 

ボタンを押してウィンドウを表示させるには

https://i.gyazo.com/50a35b7cd9dda00edc00b7dbf0a604cb.gif

画像のように、始めはシーン上に表示されていないメッセージウィンドウをボタンを押して表示させます。

1.メッセージウィンドウをPanelで作成する。

  Panelの子要素としてTextと×ボタン(画像)を入れる。

2.1で作成したオブジェクトを非アクティブにする(親要素のみ)。

3.CREDIT AND PRIVACY POLICYボタンとメッセージウィンドウ上の×ボタンに以下のスクリプトをアタッチする。

public class Message : MonoBehaviour {

public GameObject startbutton;
StartButton sb;

public GameObject exitbutton;
ExitButton eb;

public bool buttonEnabled = true;//ボタン押下有効

public GameObject MessageWindow;//メッセージウィンドウをゲームオブジェクト型で定義


public void OffWindow() {
MessageWindow.SetActive(false);//オブジェクトを非表示に
startbutton = GameObject.Find("MainCanvas/StartButton");
sb = startbutton.GetComponent <StartButton>();
sb.buttonEnabled = true;// スタートボタン有効
//exitbutton = GameObject.Find("MainCanvas/ExitButton");
eb = exitbutton.GetComponent<ExitButton>();
eb.buttonEnabled = true;// EXITボタン有効
}

 

public void OnWindow() {
if (buttonEnabled == true) {
MessageWindow.SetActive(true);//オブジェクトを表示する
startbutton = GameObject.Find("MainCanvas/StartButton");
sb = startbutton.GetComponent<StartButton>();
sb.buttonEnabled = false;// スタートボタン無効
//exitbutton = GameObject.Find("MainCanvas/ExitButton");
eb = exitbutton.GetComponent<ExitButton>();
eb.buttonEnabled = false;// EXITボタン無効
}
}
}

 4.CREDIT AND PRIVACY POLICYボタンをクリックしたときはOnWindowメソッドを、×ボタンをクリックしたときはOffWindowメソッドを呼び出すようにする。

×は元々ボタンではなく画像なので、ボタンコンポーネントを追加すること。

 

5.CREDIT AND PRIVACY POLICYボタンのインスペクター上の、Messageスクリプト部分に「Message Window」という欄ができるので、そこに1で作成したメッセージウィンドウをドラッグする(画像では他のボタンも設定していますが、必須ではないはず。)。

https://i.gyazo.com/eb49473fef5c012ca865bfff40b0c70e.png

 そのシーンでアクティブなオブジェクトはスクリプト上でFindし、操作することができますが、非アクティブなオブジェクトに関してはスクリプトではFindできないため、public GameObjectとして定義し、今回のようにインスペクター上で設定しなければならないようです。

 本処理については、以下の記事を参考にしました。

freesworder.net

  またbool変数Button EnabledをMessageスクリプトだけでなく、StartButtonスクリプト、ExitButtonスクリプトにも定義し、メッセージウィンドウを開くと、×ボタン以外のボタンが押せなくなるようにスクリプトを書いています。

 そして×ボタンを押して、メッセージウィンドウが消えると同時に、再度タイトル画面の3つボタンが押下できるようになります。

 

 

「Unityちゃんとクイズしようよ!」の作成備忘録2

 

yamasho69.hatenablog.com

 前回の続きです。

まず、集めた素材や作成するスクリプトはプロジェクトに溜まっていきますが、下の写真のように必ずフォルダ分けして整理しましょう。量が増えていくとカオスになります。

f:id:yamasho69:20190502222950p:plain

さて、今回はこのゲームの詳細な構成について書いていきます。

このゲームは4つのシーン、21のクラスから成り立っております。

構成は次の通りです。

 

 

UnityScene(シーン)

ユニティちゃんの利用規約として、表示することが求められているユニティちゃんマークをゲーム起動時に表示するシーンです。

f:id:yamasho69:20190502232037p:plain

メインカメラ(オブジェクト)

メインカメラは他のシーンにもオブジェクトとして存在します。

このシーンでは他にオブジェクトがないため、メインカメラにAwakeUnityクラスをアタッチしました(空のオブジェクトを作ってもよい)。

AwakeUnity(クラス)

フェードアウトして、TitleSceneへ遷移するクラス。

 

TitleScene(シーン)

タイトルを表示し、ゲームの開始やプライバシーポリシーの表示を行うことができるシーンです。今後、色々なモードを増やすことも考えているため、いきなりクイズにいくのではなく、タイトル画面をかませることにしました。

f:id:yamasho69:20190502232729p:plain

スタートボタン(オブジェクト)

StartButton(クラス)

「GAME START」をクリックすると、QuizSceneに遷移します。一度押すと他のボタンは押せません。 

クレジット&プライバシーポリシーボタン(オブジェクト)

×ボタン(オブジェクト)

Messege(クラス)

「CREDIT AND PRAVACYPOLICY」をクリックすると、クレジットとプライバシーポリシーが記載されているパネルを表示させます。パネル右上の×ボタンをクリックするとパネルは消えます。パネルが表示されている間は、他のボタンは押せないようにします。

f:id:yamasho69:20190502233443p:plain

EXITボタン(オブジェクト)

ExitButton(クラス)

クリックすると、ゲームを終了します。一度押すと他のボタンは押せません。

背景×2(オブジェクト)

BackGroundController(クラス)

背景をスクロールします。スタートボタンかExitボタンを押すとスクロールが停止します。

ユニティちゃん(オブジェクト)

UnityChanLocomotion(クラス)

ユニティちゃんを歩かせます。スタートボタンを押すと、飛び跳ねた後、ボイスを出します。Exitボタンを押すと、手を振って、ボイスを出します。

 

QuizScene(シーン)

問題を出題する、このゲームのメインとなるシーンです。

f:id:yamasho69:20190502234621p:plain

ユニティちゃん(オブジェクト)

UnityChanController(クラス)

回答や時間切れの度にリアクションを取り、ボイスを出します。

 

クイズマネージャー(オブジェクト)

QuizMgr(クラス)

クイズの出題を行い、制限時間、残り問題数等を管理します。

オブジェクトに実体はありません。

 

選択肢ボタン×4(オブジェクト)

Judge(クラス)

クリックした選択肢が正解か判断します。

回答したボタンは黄色に変わります。一度クリックすると次の問題開始まで押せないようにします。

 

一時停止ボタン(オブジェクト)

StopMgr(クラス)

タイマーを停止し、問題文と選択肢のボタンを非表示にします。

再開ボタン等を表示させます。

10問目終了後や問題と問題の合間には押すことはできません。

f:id:yamasho69:20190502234704p:plain

再開ボタン(オブジェクト)

ResumeButton(クラス)

タイマーを再開させ、問題文と選択肢ボタンを再表示させます。

再開ボタン等を非表示にします。一度押すと他のボタンは押せません。

リトライボタン(オブジェクト)

QuizToRetry(クラス)

クイズを1問目からやり直します。つまりQuizSceneに遷移します。一度押すと他のボタンは押せません。

タイトルに戻るボタン(オブジェクト)

GoToTitleButton(クラス)

TitleSceneに遷移します。一度押すと他のボタンは押せません。

Exitボタン(オブジェクト)

QuizToExit(クラス)

ゲームを終了します。一度押すと他のボタンは押せません。

タイマーゲージ(オブジェクト)

TimeScript(クラス)

タイマーゲージ(オレンジのゲージ)を20秒かけて減らしていきます。

 

ResultScene(シーン)

結果を表示するシーンです。リトライするか終了するかを選択することができます。

f:id:yamasho69:20190502235216p:plain

ユニティちゃん(オブジェクト)

ResultMgr(クラス)

QuizSceneから正解数を受け取り、それに応じた評価画像(大変よくできました等)を表示させます。またそれに対応したリアクションをユニティちゃんに取らせます。

 

リトライボタン(オブジェクト)

RetryButton(クラス)

QuizSceneに遷移します。一度押すと他のボタンは押せません。

タイトルへ戻るボタン(オブジェクト)

TitleButton(クラス)

TitleSceneに遷移します。一度押すと他のボタンは押せません。

Exitボタン(オブジェクト)

 ExitButton2(クラス)

ゲームを終了します。一度押すと他のボタンは押せません。

 

少し見づらいですが、構成はこのようになっています。

ここには出ていないオブジェクトも沢山ありますが、クラスをアタッチしているオブジェクトは上記で全てです。

次回以降は備忘録として残したいコードや処理について書いていこうと思います。

 

「Unityちゃんとクイズしようよ!」の作成備忘録1

unityroom.com

 

この度、「Unityちゃんとクイズしようよ!」をアップできたので、備忘録を数度に分けて投稿していきます。

まず本格的にUnityを触ったり、C#でプログラミングする前にやったことは以下の3つです。 

 

 

①どんなゲームを作りたいか考える

当然ですが、行き当たりばったりで何かを作ろうとしても何もできません。

自分の場合はクイズが大好きで、クイズマジックアカデミーをずっとやっていました。

なので自分も同じようなクイズゲームが作りたいなと思いました(あとマジアカアプリがイマイチだったので)

初心者の自分がイチから構築するのは無理があるので、参考になりそうなWebページがないかを探し、クイズゲームを作成する上でのUlの構築は主にランサーズさんを、問題管理については主にTERAKOYAさんを参考にしました。

engineer.blog.lancers.jp

terakoya.site

 

ただし、TERAKOYAさんはJavaでの記述なので、これをC#に書き直す必要がありました。

 

②簡単な設計図を作成する

今回クイズゲームを作成するにあたり、以下のような設計図を描きました。

 

タイトル画面

ゲームスタート、ゲーム終了、今後広告を入れる際に必要なプライバシーポリシーの表示ができるようにする。

 

クイズ出題画面

制限時間を設ける。4択クイズになので、選択肢ボタンが4つ必要。一時停止ボタンも必要。ユニティちゃんを表示させ、回答毎にリアクションをとらせる。

 

結果発表画面

クイズ出題画面から点数を受け取り、それに応じて評価を表示、およびユニティちゃんにリアクションをとらせる。リトライ、ゲーム終了が行えるようにする。

③素材を集める

フリー素材を集めます。フリー素材とはいえ、商用利用禁止だったり、報告が必要だったりする場合があるので、利用規約は必ずチェックすること。

本アプリに使用したのは以下のサイトです。

特にフォントは重要です。Unity標準フォントはArialという微妙なフォントしかないので、必ずインポートしてください。

フォント

よく飛ばない鳥さん

 

BGM

dova-s.jp

なぞなぞハイキングFunk Style

 

効果音、セリフ

soundeffect-lab.info

ユニティちゃんのキャラクターボイスは上記サイトの元気な女の子の声素材

音枝優日さん)を使用しています。

 

画像

街、建物系イラスト専門サイト「TOWN illust」 – 無料で使える街、建物のイラスト素材サイト

 

icooon-mono.com

 

超シンプル素材集

 

pipoya.net

 

ユニティちゃん

unity-chan.com

 

あとは作業時に足りないと思えば、逐次ダウンロード→UnityにインポートしていけばOKです。次回からはUnity上での作業に取り掛かります。

このブログと管理人について

はじめまして。このブログは管理人やましょうが、Unityでゲームを開発する際の備忘録として運用していきます。

Unity初心者の自分が開発する際には、多くのブログや記事を読むことが欠かせないので、自分の開発備忘録も他のUnityユーザーの役に立てばいいなと思っております。

ちなみに自分のUnity歴をざっと紹介致しますと、以下のとおりです。

 

2018年春・今の職場にこのままいることに危機感を覚え始める

2018年6月・一念発起し、TechAcademyにてUnityコースとAndroidアプリコースを受講開始

2018年8月・Unityコース受講終了、課題としてGooglePlay上で「とまらんにゃ」をリリース

play.google.com

2018年11月・Androidアプリコース受講終了・課題としてGooglePlay上で「QuizCollege」をリリース

play.google.com

2019年1月・独学開始

  1. Paizaラーニング・C#入門編
  2. Unityの教科書 Unity 2017完全対応版 2D&3Dスマートフォンゲーム入門講座  SBクリエイティブ出版 北村愛実・著 読了及び課題完了
  3. 確かな力が身につくC#「超」入門 SBクリエイティブ出版 北村愛実・著 読了及び課題完了
  4. コガネブログさんやおもちゃラボさんが載せてくれているゲームを作る

baba-s.hatenablog.com

nn-hokuson.hatenablog.com

 

2019年3月・Unityでのクイズゲームの製作開始

2019年5月・Unityroomに「Unityちゃんとクイズしようよ!」をアップ←いまここ

unityroom.com

 

まだ仕事はしていますが、絶賛転職活動中ですので、いい話があればお願いします。

プライバシーポリシー

広告について
本アプリでは、広告配信ツールとしてAdMob(Google Inc.)を使用しており、AdMobがご利用者の情報を自動取得する場合がございます。取得する情報、利用目的、第三者への提供等につきましては、以下の広告配信事業者のアプリケーション・プライバシーポリシーのリンクよりご確認ください。

Google 広告に関するポリシー
https://policies.google.com/technologies/ads?hl=ja

利用状況解析ついて
本アプリでは、今後の開発の参考とするため、アプリの利用状況データを収集するツールとしてFirebase(Google Inc.)を使用しており、Firebaseがご利用者の情報を自動取得する場合がございます。取得する情報、利用目的、第三者への提供等につきましては、以下のGoogleプライバシーポリシーのリンクよりご確認ください。

Google プライバシーポリシー
https://policies.google.com/privacy?hl=ja