ヽ|∵|ゝ(Fantom) の 開発blog? ホーム »サンプル
このページの記事一覧

【Unity】【C#】uGUI ドロップダウンの要素をコードで設定と取得、外観のカスタマイズなど  


 どちらかというと備忘録。調べているとき色々な方法があったので、少しまとめておいた感じ。どのやり方でも違いはないので、用途によって使いやすい方を選べば良いと思う。

※ Unity 5.5.0f3 / Windows10(x64) で確認




■ドロップダウンの要素をコードで設定する

 まずはドロップダウンを画面に置いてしまおう。「GameObject」メニューから「UI>Dropdown」で「Canvas」以下に生成される。インスペクタで下の方へスクロールして見てみると、予め3つの要素が設定されている。これをコードで変更することになる。なお、GUI 関連をシーンビューで見るときは、「2D」のボタンをオンした方が見やすいかも知れない。







 要素を設定するコードは以下のようになる。インスペクタで操作するドロップダウンオブジェクトを設定して、スクリプトで変更する感じだ。「using UnityEngine.UI」を入れて置いた方が簡潔だろう。なお、クラス名は任意で良い。

●要素を文字列のリストで設定する
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class DropdownTest : MonoBehaviour {

public Dropdown dropdown; //操作するオブジェクトを設定する

// Use this for initialization
void Start () {
if (dropdown) {
dropdown.ClearOptions(); //現在の要素をクリアする
List<string> list = new List<string>();
list.Add("1");
list.Add("2");
list.Add("5");
dropdown.AddOptions(list); //新しく要素のリストを設定する
dropdown.value = 1; //デフォルトを設定(0~n-1)
}
}
}

 このスクリプトを適当なオブジェクトにアタッチして、操作するオブジェクトをドラッグ&ドロップで設定しておく。今回は「Canvas」にアタッチしてあるが、どこでも良い。プレイして「Dropdown」をインスペクタで見てみると要素が変わっていることがわかる。なお、デフォルトの値(value)は要素の先頭を0とした連番となっている。ここでは2番目([1])の要素を設定している。



●プレイ中




 もう1つ、直接プロパティに設定する方法もある。内容的には上記の例と同じものだが、追加するリストには「Dropdown.OptionData」クラスの要素を使う。リストの内容はこの形式で保持されていると考えれば良いだろう。

●要素を「Dropdown.OptionData」のリストに直接設定する
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class DropdownTest : MonoBehaviour {

public Dropdown dropdown; //操作するオブジェクトを設定する

// Use this for initialization
void Start () {
if (dropdown) {
dropdown.options.Clear(); //現在の要素をクリアする
dropdown.options.Add(new Dropdown.OptionData("1"));//新しく要素を追加する
dropdown.options.Add(new Dropdown.OptionData("2"));
dropdown.options.Add(new Dropdown.OptionData("5"));
dropdown.value = 1; //デフォルトを設定(0~n-1)
//dropdown.RefreshShownValue();//更新を確認(画像を設定したとき)
}
}
}

 こちらを使った場合はアイコン画像(Sprite)なども一緒に設定できる。以下に資料を載せておくので必要があれば参照して欲しい。「Dropdown.RefreshShownValue()」は画像も更新したときは必要になるようだ。文字列だけなら無くても構わない。

(参考)
Unity5のドロップダウンのオプション値をスクリプトで設定する




■ドロップダウンの要素を取得する

 次に設定した要素を取得してみよう。今回は値(value)とテキストを取得することにする。ちなみに値の方は先頭からの連番(0~n-1)になる。

 この場合はコールバックイベントの「Dropdown.onValueChanged(int)」が使える。まずはスクリプトを用意して、「+」ボタンを押してインスペクタに設定しよう。なおここでは「DropdownTest」スクリプトは「Canvas」オブジェクトにアタッチしてあるものとする。

●「OnValueChanged(int)」コールバックを使って要素を取得する
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class DropdownTest : MonoBehaviour {

public Dropdown dropdown; //操作するオブジェクトを設定する

// Use this for initialization
void Start () {
if (dropdown) {
dropdown.ClearOptions(); //現在の要素をクリアする
List<string> list = new List<string>();
list.Add("1");
list.Add("2");
list.Add("5");
dropdown.AddOptions(list); //新しく要素のリストを設定する
dropdown.value = 1; //デフォルトを設定(0~n-1)
}
}

public void OnValueChanged(int value) {
Debug.Log("value = " + value); //値を取得(先頭から連番(0~n-1))
Debug.Log("text(options) = " + dropdown.options[value].text); //リストからテキストを取得
Debug.Log("text(captionText) = " + dropdown.captionText.text); //Labelからテキストを取得
}
}


 プレイしてドロップダウンを変更してみると値がコンソールにデバッグ表示される(はじめの1回はデフォルト設定の変更のため。0からならデフォルト設定は必要ない)。


 値(連番)ではなくて、直接選択されたテキストを使いたいときもあるだろう。この場合は大まかに2つの方法がある。1つは上記のドロップダウンに設定したリストを取得する方法と、選択したときに表示されるラベルを取得する方法だ。


 内容的にはリストの方は設定した値を取得しているだけなので説明はいらないと思うが、「Label」からというのはヒエラルキーで「Dropdown>Label」と開くと、このオブジェクトに選択したテキストが設定されているのがわかるからだ。「Dropdown.captionText」はそのテキストを保持しているオブジェクトと考えれば良いだろう。




■ボタンを押したとき、ドロップダウンの要素を取得する

 まずはドロップダウンがある状態から、「GameObject」メニューの「UI>Button」でボタンを追加しよう。このボタンを押したとき、選択されているドロップダウンの要素を取得するようにする。基本的には今までの方法と変わらない。取得タイミングをボタン押下にしただけだ。

 ボタンには「Button.onClick()」というコールバックが標準で備わっている。ドロップダウンのときと同じようにスクリプトを用意して、「+」ボタンを押してインスペクタで設定しよう。先のドロップダウンの例をそのまま使うなら、以下のようになる。


●「OnClick()」コールバックを使って要素を取得する
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class DropdownTest : MonoBehaviour {

public Dropdown dropdown; //操作するオブジェクトを設定する

// Use this for initialization
void Start () {
if (dropdown) {
dropdown.ClearOptions(); //現在の要素をクリアする
List<string> list = new List<string>();
list.Add("1");
list.Add("2");
list.Add("5");
dropdown.AddOptions(list); //新しく要素のリストを設定する
dropdown.value = 1; //デフォルトを設定(0~n-1)
}
}

public void OnClick() {
Debug.Log("dropdown.value = " + dropdown.value); //値を取得(先頭から連番(0~n-1))
Debug.Log("text(options) = " + dropdown.options[dropdown.value].text); //リストからテキストを取得
Debug.Log("text(captionText) = " + dropdown.captionText.text); //Labelからテキストを取得
}
}

 この例のようにドロップダウンの初期化とボタンの操作を1つのクラスで管理する場合は上記のやり方で十分だが、別々のクラスで管理したいときはどうすれば良いのだろうか。もちろん同じように操作するオブジェクトを設定させても良いが、コールバックのオーバーロードをすればもう少し簡潔に書くこともできる。

●コールバックのオーバーロードを使って要素を取得する
(初期化のみのクラス「DropdownTest」)
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class DropdownTest : MonoBehaviour {

public Dropdown dropdown; //操作するオブジェクトを設定する

// Use this for initialization
void Start () {
if (dropdown) {
dropdown.ClearOptions(); //現在の要素をクリアする
List<string> list = new List<string>();
list.Add("1");
list.Add("2");
list.Add("5");
dropdown.AddOptions(list); //新しく要素のリストを設定する
dropdown.value = 1; //デフォルトを設定(0~n-1)
}
}
}

(要素の取得のみのクラス「ButtonTest」)
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ButtonTest : MonoBehaviour {
//OnClick のオーバーロード
public void OnClick(Dropdown dropdown) {
Debug.Log("dropdown.value = " + dropdown.value); //値を取得(先頭から連番(0~n-1))
Debug.Log("text(options) = " + dropdown.options[dropdown.value].text); //リストからテキストを取得
Debug.Log("text(captionText) = " + dropdown.captionText.text); //Labelからテキストを取得
}
}

 この「ButtonTest」を例えばボタンにアタッチし、要素を取得するドロップダウンをインスペクタで設定すれば、スクリプトはかなり簡潔になる。ドロップダウンの状態は「Dropdown」オブジェクトが保持しているわけだから、これを引数にして直接渡してしまえば良いわけだ。もちろん「Label」オブジェクトを引数にするのもアリだろう。





●プレイ中にボタンを押すと…




■uGUI の見た目を変更する(簡易的な外観のカスタマイズ)

 一番簡単な方法として、各オブジェクトの「Image>Source Image」を入れ替えれば良い。試しに Asset Store (Ctrl-9) から「Cartoon UI Pack」をインポートして使ってみよう。キーワードに「Cartoon UI」を入れて「無料のみ」のボタンを押せば簡単に見つかる。


 インポートし終わったら、あとは適当なものを選ぶだけだ。好きなものを設定してみよう。見た目が変わったハズだ。




 また、ボタンをハイライトしたときの色などの設定は「Highlighted Color(ハイライト)」「Pressed Color(押したとき)」「Disabled Color(無効化のとき)」を変更すれば良い。好きな色を設定してみよう。



 他にも細かい設定ができるようなので参考URLを載せておこう。色々試してみると良いだろう。

(参考)
【Unity】uGUIドロップダウンメニュー(コンボボックス)の使い方
【Unity開発】uGUIのDropDownの使い方【ひよこエッセンス】


■uGUI 関連参考書籍






(関連記事)
【Unity】【C#】【JavaScript】4.6.x の Canvas~UI Text のテキストをコードで変更する
【Unity】【C#】【JavaScript】GUIText をコードで生成する


スポンサーサイト

category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: C#  サンプル  Unityリファレンス 
tb: 0   cm: --

【Unity】SDプロ生ちゃんを動かす!  


 以前、標準サイズのプロ生ちゃんを動かす方法を書いてみたのだが、その後、Unity エディタやモデルのバージョンアップに伴い、記事の内容がかなり古くなってしまったので、改めて記事を書き直してみることにした。

 せっかくなので当時のモデルには入ってなかった「SDサイズ」を動かしてみようと思う。内容的には標準サイズのプロ生ちゃんを動かす方法と変わらないので、SDプロ生ちゃんを動かした後、標準サイズのモデルに入れ替える方法も兼ねてやってみよう。最新版(掲載時点:Ver.3・2016/11/06)には Tシャツ姿なども入っているので、試しに動かしてみる。基本的には簡略のため、ほとんどがデフォルト状態のままいくので、微調整は各自で適当にやって欲しい。

※ Unity 5.5.0f3 / Windows10(x64) で確認






■インポート等前準備

1.はじめに「暮井 慧(プロ生ちゃん) MMD/Unity/FBX 公式データ」をダウンロードしよう。ニコニコのアカウントが必要なので、無ければ適当にアカウントを作れば良い。右側にある「ダウンロード」ボタンを押せば、zip がダウンロードできる。ダウンロードが完了したら解凍して、「Pronama-chan_Ver3>Unity(Ver.3)」フォルダにある「PronamaChan_Ver3.unitypackage」を新しいプロジェクトにでもインポートしよう(SDだけなら「PronamaChanSD_Ver3.unitypackage」でも良い)。またエディタがUnity5.5以降なら「PronamaChanShaderForUnity5.5.unitypackage」(5.5用シェーダ)もインポートしても良いかも知れない。





2.次にモデルを動かすために、ユニティちゃんのオフィシャルサイトからユニティちゃんモデルのパッケージをダウンロードしよう。右上の「DATA DOWNLOAD」を押して、キャラクター利用のガイドラインの一番下まで行き、「ユニティちゃんライセンス」に同意すればダウンロードページへ行ける。ここから「ユニティちゃん 3Dモデルデータ」(掲載時点 Version 1.2 [UnityChan_1_2.unitypackage])をダウンロードする。これも同じようにプロジェクトへインポートしよう。







3.準備ができたら、とりあえず動き回れる床を作りたいので、「GameObject>3D Object」メニューから「Cube」などで床を作ろう。「Transform」で Y 軸とスケールだけ調整しよう。大きさなどは任意で良い。





4.次にプロ生ちゃんのモデルを配置しよう。プロジェクトエクスプローラで「PronamaChan>Prefab>SD>Unlit」を開き、「PronamaChan_SD_dynamic_xxx.prefab」(xxx はスパッツなどのバリエーション)をヒエラルキーにドラッグ&ドロップする。ちなみに「~_dynamic」は「揺れ物(髪やスカートなどの揺れ)」がセットアップされているプレファブだ。自力でセットアップするのは非常に大変なので、製作者様には本当に感謝としか言いようがない(笑)。位置だけは (0, 0, 0) にしておこう。ずれてしまった場合は Transform の Position で修正できる。






5.モデルを配置したら、「GameObject」メニューから「Create Empty」で空オブジェクトを作り、適当に名前を付け、Position を原点(0, 0, 0) に合わせよう。そしたらこの中に、先ほど配置したモデル「PronamaChan_SD_dynamic_xxx」(xxx はスパッツなどのバリエーション)をヒエラルキーでドラッグ&ドロップして子要素にする。これは後でモデルだけ簡単に入れ替えるため措置だ。空オブジェクト(親)の名前は「PronamaChanSD_Locomotion」にしておいた。





6.また、カメラが少し遠いので、位置も調整しておこう。ここでは正面からにしておいた。シーンは適当な名前で保存しておく。








■動かすためのセットアップ

 前準備ができたら、ユニティちゃんパッケージには移動用アニメーターとスクリプトが付いているので、これを改造したものを使ってプロ生ちゃんを動かしてみよう。


1.まずはアニメーターから設定する。プロジェクトエクスプローラで「UnityChan>Animatiors」フォルダを開き、「UnityChanLocomotions」を探そう。次に、ヒエラルキーから配置したモデル「PronamaChanSD_Locomotion」の子要素「PronamaChan_SD_dynamic_xxx」(xxx はスパッツなどのバリエーション)をクリックし、インスペクターの「Animator>Controller」に見つけた「UnityChanLocomotions」(移動用アニメーター)を設定しよう。これはユニティちゃん用だが、表情レイヤー以外ならそのまま使える(今回は表情は固定のまま)。また「Apply Root Motion」のチェックは外しておく。








2.次に移動用スクリプトを設定しよう。ダウンロードしたサンプルの中に「UnityChanControlScriptWithRgidBodyForAny.cs」というファイルがある。これをインポートして、ヒエラルキーのモデルの親要素「PronamaChanSD_Locomotion」をクリックし、インスペクターにドラッグ&ドロップしよう。これはユニティちゃん用のスクリプトを少しばかり改造したものだ。内容的にはアニメーターの取得を子要素まで拡げたり、衝突判定を無視するレイヤーの設定、ジャンプカメラの無効化くらいで、基本はほとんど変わってない。
※ Unity5 用のユニティちゃんスクリプトの修正パッチ「UnityChanScript_ver1.2.1_Unity5only.unitypackage」にも合わせてある。内容的には AnimatorStateInfo のプロパティ: nameHash (Unity4) → fullPathHash (Unity5) に変更されただけ。





3.スクリプトを追加したら、「Capsule Collider」も自動的に追加されたと思うが、インスペクターで「Center>Y」と「Radius」あたりを調整しておこう。値は好きにして構わない。なお、サイズを調整するとき等はシーンギズモの真ん中の■を押して「平行投影モード」にした方がわかりやすい。もう一度押すと元に戻る。




平行投影モード


4.次にインスペクターで「Rigidbody」の「Constraints」の▼を開き、「Freeze Rotation」を全てチェックを入れておこう。これを入れておかないと、移動したとき、コケる(笑)。



5.最後に、カメラは固定で移動するとプロ生ちゃんが見えなくなってしまうので、カメラをキャラに追従させよう。一番簡単な方法は「Main Camera」を「PronamaChanSD_Locomotion」の子要素にしてしまう方法だ。ヒエラルキーで「Main Camera」を「PronamaChanSD_Locomotion」にドラッグ&ドロップして、カメラの位置を調整するだけで良い。こうするとプロ生ちゃんと一緒にカメラも動く。これでとりあえずは目的達成だ。




走り出すプロ生ちゃん

 プレイボタンを押して動作を確認してみよう。上手くできていれば、カーソルキー上下で前進・後退、カーソルキー左右で旋回、移動中にスペースキーでジャンプ、停止中にスペースキーで伸びポーズをするハズだ(床が光っていてわかりずらいかも知れないが)。



■標準サイズ(Tシャツ)のプロ生ちゃんに変更してみる

 ここからはオマケになるが、せっかく色々なモデル(衣装)が入っているので、上記の完成した SDプロ生ちゃんを使って標準サイズのプロ生ちゃんも動かしてみよう。実際にはプロ生ちゃんではなくても、「ニコニ立体ちゃん」や「東北ずん子」などメカニムを使用しているモデルなら同じ方法で動かせる。

1.ヒエラルキーで先ほど作った「PronamaChanSD_Locomotion」を選択し、Ctrl - D で複製しよう。複製したらわかりやすいように名前を変更し、複製元のオブジェクトはインスペクタの一番上のチェックを外して非表示にしよう。






2.複製した方の子要素「PronamaChan_SD_dynamic_xxx」(xxx はスパッツなどのバリエーション)は削除し、プロジェクトエクスプローラで「PronamaChan>Prefabs」以下から好きなモデルを選んで、先ほどの複製(ここでは「PronamaChanT_Locomotion」とする)にドラッグ&ドロップして子要素にしよう。モデルによっては「Equipments Changer」(衣装変更)と「Blend Shape Value Changer」(表情変更)が付いているかもしれない。その場合はチェックを外しておこう。




アタッチされていたらチェックを外す


3.あとはSDプロ生ちゃんのときのセットアップと同じだ。追加したモデルに「UnityChan>Animators」内のアニメーター「UnityChanLocomotions」を設定し、親オブジェクトの「Capsule Collider」を調整しよう。以下は設定例だが任意で良い。








4.最後にカメラがSDサイズのときの高さになっているので、Y軸だけ調整しよう。値は任意で良い。セットアップし終わったら、プレイして動くことを確認してみよう。他のモデルもこの方法で簡単に入れ替えられる。





■ドラッグでアングルを変えられるカメラをセットアップする

 上記のセットアップではカメラは移動ブジェクトの子要素になっていたため、アングルが固定されたままだった。せっかなので、以前「SmoothFollow に回転アングルと高さと距離の遠近機能を付けてみる」で作ったスクリプトをカメラに追加して、キャラの回りをドラッグでぐるりと眺めてみよう。

※ここからは元のSDサイズでやるので、「PronamaChanSD_Locomotion」をインスペクタで表示に、「PronamaChanT_Locomotion」を非表示にして下さい。

1.ヒエラルキーで先ほど作った「PronamaChanSD_Locomotion」をクリックし展開しよう。先ほどのままの場合、「Main Camera」が子オブジェクトになっていると思うが、これをドラッグして外に出してしまおう。



2.カメラをオブジェクトの外に出したら、ヒエラルキーで再び「PronamaChanSD_Locomotion」を選択し、右クリックから「Create Empty」で空の GameObject を追加しよう(子要素にする)。これをカメラの視点とするので、Y軸だけ調整し、名前を「TargetPos」とでも付けておこう(名前は任意)。






3.次に、ダウンロードしたアーカイブに「SmoothFollow2.cs」が入っているのでインポートして、カメラに追加しよう。追加したら先ほど作った視点用の空オブジェクト「TargetPos」を「Target」にドラッグ&ドロップして設定しよう。その他のパラメタはデフォルトのままで良いが、ここではプロ生ちゃんを正面から見たいので「Pre Angle」(開始時のアングル)だけを 180度にしておく。後ろからにしたい場合は 0 のままで良い。



 これだけでとりあえずセットアップは完了だ。プレイして確認してみよう。ドラッグやホイールでアングルや距離が変えられるハズだ。またデフォルトでは[Z][X][C][V][B][N]キーでも操作できるようにしてある。設定パラメタの詳細・図解などは「SmoothFollow に回転アングルと高さと距離の遠近機能を付けてみる」を見て欲しい。






■簡単なステージを作ってみる

 Unity Technology が提供している Sample Assets には便利なカメラスクリプトやマルチプラットフォームUI、パーティクルやエフェクト、車や飛行機などのモデル等も入っている。このアセット内にモックアップパーツのようなものも入っているので、プラットフォームゲームの仮置きにも良いかも知れない。
(※) 入っている素材は例とは少し異なるが、メニューから「Assets>Import Package>Prototyping」をインポートして使っても良い。

1.Ctrl - 9 で Asset Store を開き、検索ボックスに「Sample Assets」を入れて検索してみよう。「無料のみ」のボタンを押すと絞り込みやすい。リストが出たら「Sample Assets (beta) for Unity 4.6」を探して「ダウンロード」しよう。既に落としてあるなら「インポート」するだけで良い。
(※) Unity5.5 にアップグレードしたばかりのときは Asset Store にログインできない(エラーが出る)かも知れない。その場合は Unity エディタを再起動するとログインできるようになる。





2.インポートダイアログが出たら一旦ダイアログ下にある「None」ボタンを押して全てのチェックを外そう。全部入れても良いが、かなりの量があるので、今回はステージに使うパーツだけにする。スクロールバーで 2/3 過ぎたあたりに来たら、「Prototyping」というフォルダがあるので、そこにチェックを入れる。以下の階層のアセットは自動でチェックが入るので、あとはダイアログ下の「Import」ボタンを押して、エディタにインポートしよう。



3.インポートが終わったら、とりあえず床にテクスチャ(マテリアル)を貼ってみよう。プロジェクトエクスプローラで「Standard Assets>Prototyping>Materals」フォルダを開いて、「PrototypeGhecker」を Ctrl - D で複製しよう。複製したら「PrototypeGhecker 1」等の名前になっていると思うので、それをシーンビューの床(Cube)にドラッグ&ドロップしよう。あとはインスペクタでタイリングのサイズなどを調整すれば良い(任意で良い)。
(※) プロ生ちゃんの壁紙などでも可。








4.あとはプロジェクトエクスプローラで「Standard Assets>Prototyping>Prefabs」フォルダ以下にあるオブジェクト(プレファブ)を適当に置くだけだ。配置するときはシーンギズモで平行投影モードにするか、レイアウトを 4分割(メニューから「Window>Layouts>4 Split」)にするのも良いかも知れない。また、Ctrl を押しながらオブジェクトを移動すれば、一定間隔でスナップしながら配置できる(スナップ量はメニューから「Edit>Snap Settings...」で設定できる)。自由にステージを作ってみよう。






■スカイボックスを設定する

 最後にスカイボックスを設定してみよう。上記の「Sample Assets (beta) for Unity 4.6」にも Unity4 時代の Skybox が入っているが、せっかくなので別のスカイボックスを使ってみよう。

1.再び Ctrl - 9 で Asset Store を開き、検索ボックスに「Fantasy Skybox」を入れて検索し、「無料のみ」のボタンを押してみよう。リストが出たら「Fantasy Skybox FREE」を探して「ダウンロード」し、続けて「インポート」しよう。
(※) Unity5.5 にアップグレードしたばかりのときは Asset Store にログインできない(エラーが出る)かも知れない。その場合は Unity エディタを再起動するとログインできるようになる。





2.ダイアログが出たら「Import」ボタンでインポートしよう。インポートが終わったら、プロジェクトエクスプローラで「Fantasy Skybox FREE>Materials」フォルダにある「Sunny 01A」を探そう。






3.見つけたらメニューから「Window>Lighting」を開き、一番上にある「Enviroment Lighting」の「Skybox」に「Sunny 01A」を設定する。これでとりあえずは完成だ。







 ほとんどの設定がデフォルトのままなので、色々変更・調整してみると良いだろう。特に Unity5 になってからはライティングやシェーダーの仕様が大幅に変更されたようで、そういう意味では今回はかなりいい加減だ、その辺はきちんと調べた方が良いかも知れない。とりあえず動かせれば良い人向けということで(笑)。




(関連記事)
【Unity】プロ生ちゃんを動かす!(Unity4)
【Unity】【C#】ユニティちゃんをサクっと簡単に動かす!(Unity4)
【Unity】【C#】SmoothFollow に回転アングルと距離の遠近機能を付けてみる
【Unity】【C#】FPS(フレームレート)をリアルタイムに測定して表示するv2(4隅選択可能で、画面サイズの変更にも対応版)






このコンテンツの一部には『ユニティちゃんライセンス』で許諾されたアセットが使用されています。
Portions of this work are licensed under Unity-Chan License




category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: プロ生ちゃん  サンプル 
tb: 0   cm: --

【Unity】【C#】FPS(フレームレート)をリアルタイムに測定して表示するv2(4隅選択可能で、画面サイズの変更にも対応版)  



 約1年と少し前(当時:Unity 5.1.2f1)、UnityPlayer が旧プラグインとされ、サポートが終了となり、WebGL に移行しようと試してみたが、まだ HTML5(WebGL)出力はβ版だった事もあり、動作は非常に重くファイルサイズも巨大となり、とても実用的とは言えなかった。

 しかし最近(掲載時点:Unity 5.4.3f1)ではパフォーマンスも改善され、ファイルサイズも随分と小さくなり、十分に使えるレベルになったので、色々試してみようと Unity4 時代に作ったサンプルなどを Unity5 に読み込んで試してみている。

 ただ、残念ながら100%互換とは行かないみたいだね。見た目は多少目をつぶるが、動きはある程度の速度が出ないと操作性や快適さに関わるので、実験するにあたって、以前に作った「簡易FPSモニタ」は欠かせないアイテムとなった。以前のバージョンは一定位置固定で、自分なりに定数を書き換える仕様になっていたが、実は簡単に4隅を選択して配置できるバージョンも作ってある。手軽に使えるアイテムとして載せておこう。

●リアルタイムにFPSを測定して表示するv2(4隅選択可能で、画面サイズの変更にも対応版)
using UnityEngine;
using System.Collections;
using System.Collections.Generic;

/**
* フレームレート測定モニタv2
*/
public class FpsMonitor : MonoBehaviour {

//測定用
int tick = 0;
float elapsed = 0;
float fps = 0;

//表示基準位置用
public enum Alignment
{
LeftTop, //画面左上
RightTop, //画面右上
LeftBottom, //画面左下
RightBottom, //画面右下
}

public Alignment alignment = Alignment.LeftTop;

//外観設定(デフォルト値)
const float GUI_WIDTH = 75f; //GUI矩形幅
const float GUI_HEIGHT = 30f; //GUI矩形高さ
const float MARGIN_X = 10f; //画面からの横マージン
const float MARGIN_Y = 10f; //画面からの縦マージン
const float INNER_X = 8f; //文字のGUI外枠からの横マージン
const float INNER_Y = 5f; //文字のGUI外枠からの縦マージン

//オフセット位置(MARGIN_X, MARGIN_Y)ユーザー設定用
public Vector2 offset = new Vector2(MARGIN_X, MARGIN_Y);
public bool boxVisible = true; //囲みボックスの可視フラグ
public float boxWidth = GUI_WIDTH; //囲みボックスの幅
public float boxHeight = GUI_HEIGHT; //囲みボックスの高さ
public Vector2 padding = new Vector2(INNER_X, INNER_Y);

float x, y; //表示位置
Rect outer; //外枠(GUI矩形領域)
Rect inner; //内枠(文字領域)

//画面サイズ変更チェック用
int oldScrWidth;
int oldScrHeight;


// Use this for initialization
void Start () {
oldScrWidth = Screen.width;
oldScrHeight = Screen.height;
LocateGUI();
}

// Update is called once per frame
void Update () {
tick++;
elapsed += Time.deltaTime;
if (elapsed >= 1f) {
fps = tick / elapsed;
tick = 0;
elapsed = 0;
}
}

void OnGUI () {
//画面サイズ変更チェック
if (oldScrWidth != Screen.width || oldScrHeight != Screen.height) {
LocateGUI();
}
oldScrWidth = Screen.width;
oldScrHeight = Screen.height;

//fps表示
if (boxVisible) {
GUI.Box(outer, "");
}

GUILayout.BeginArea(inner);
{
GUILayout.BeginVertical();
GUILayout.Label("fps : " + fps.ToString("F1"));
//↓たまに極端に大きな値が出るので使い勝手が悪い
//GUILayout.Label("fps : " + (1f / Time.deltaTime).ToString("F1"));
GUILayout.EndVertical();
}
GUILayout.EndArea ();
}

//表示位置を計算する
void LocateGUI() {
x = GetAlignedX(alignment, boxWidth);
y = GetAlignedY(alignment, boxHeight);
outer = new Rect(x, y, boxWidth, boxHeight);
inner = new Rect(x + padding.x, y + padding.y, boxWidth, boxHeight);
}

//横位置の計算
float GetAlignedX(Alignment anchor, float w) {
switch (anchor) {
default:
case Alignment.LeftTop:
case Alignment.LeftBottom:
return offset.x;

case Alignment.RightTop:
case Alignment.RightBottom:
return Screen.width - w - offset.x;
}
}

//縦位置の計算
float GetAlignedY(Alignment anchor, float h) {
switch (anchor) {
default:
case Alignment.LeftTop:
case Alignment.RightTop:
return offset.y;

case Alignment.LeftBottom:
case Alignment.RightBottom:
return Screen.height - h - offset.y;
}
}
}

 使い方は Main Camera や Directional Light 等、ずっと使われているものにスクリプトを追加しても構わないし、空の GameObject を配置しておいて、それに追加しておくのも良いだろう。GUI を使っているので、どこかに GUI Layer が追加されている必要がある(大抵は Main Camera にはじめから組み込まれている)。

 また、測定方法は更新されたフレーム数を1秒以上経過したとき、その経過時間で割る方式にしているが、以下のように、1秒を毎デルタタイムで割る方法もある。

GUILayout.Label("fps : " + (1f / Time.deltaTime).ToString("F1"));

 しかしやってみると、表示が速すぎて見づらいのと、たまに極端に大きい値(350fpsとか)が出るようなのでやめた。超詳細なフレームレートを測定したいのなら、検討するのも良いだろう。

 内容的には以前と同じで、指定した4隅の位置や画面サイズの可変に対して、描画位置を再計算するだけのものなので、難しくはないだろう。あくまで手軽に表示位置変更できるようにしただけのバージョンである。


(関連記事)
【Unity】【C#】FPS(フレームレート)をリアルタイムに測定して表示する
【Unity】【C#】独自のギズモ(Gizmo)を表示する
【Unity】【C#】インスペクタの表示項目を動的に変更する


category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: Unityライブラリ  C#  サンプル 
tb: 0   cm: --

Unityチュートリアルの2Dシューティングにレーザーやらミサイルやらボス戦やらを付け加えてゲームとして楽しめるように超改造してみた  




 先日、久しぶりに「プロ生ちゃんライブ」を WebGL(HTML5) 出力してみたら意外とパフォーマンスが良かったので、試しにゲームも出力してみたくなった。ちなみに1年くらい前:Unity 5.1 のときには(当時は HTML5 Previewとなっていた)ウィンドウ表示でも 25fps くらい、ファイルサイズは 238MB ととても実用的とは言えなかった(現在:Unity 5.4 では 60fps、46MB になっている)。

 とは言え、イチからゲームの仕様を含めて考えるのは大変なので、公式チュートリアルの2Dシューティングに手を加えて、WebGL のパフォーマンスを見てみようと考えた(FAQを見てみると「チュートリアルやサンプルプロジェクトに使っているアセットは一般的に知られているもの(フリー素材)であり、学習目的、非商用利用なら問題ない」とある。ただし各素材の著作権は著作者に帰属)。

 そしてどうせならゲームとして楽しめるくらいにしようと思ったので(チュートリアルは仕組みだけなので)、敵の動きや攻撃方法、ボス戦などを加えてみた。また「Wave型シューティング」と書いてあったので、「各 Wave を攻略する」みたいな方式にしてみようと考えた。なので、普通のシューティングのように次々と進んでいくわけではなく、「クリアできたら進む」という感じで、逆に「やられた場合は同じステージをループする」ようになっている。また、残機という概念もなく無限にコンティニューでき、更にいつでもどの Wave(このゲームではステージと同義)でも移動できるようにしてみた。ある種パズルゲームのように自分の攻略しやすいステージからクリアしていく進め方も良いだろう。クリアした Wave(ステージ)は選択画面で色が付くので、どのステージをクリアできたかもひと目で分かるようにしてある。

 WebGL のパフォーマンスの結果としてはパーティクル(煙)を使っているステージでは 40fps まで落ちることもあるが、通常の弾幕攻撃などでは問題なく 60fps 出ている(多いときは200~300個の弾が出ているがわりとイケる)。フルスクリーンにすると少し重くはなるが、ボス戦を含め、ほとんどのステージで問題なくゲームできるので、WebGL コンパイルも十分実用レベルまで性能が上がったと言ってもいいだろう。現在 Google Chrome では 旧UnityWebPlayer はおろか、Flash や Applet などのプラグインも使えなくなってしまったので、WebGL が気軽に使えるレベルになってきたことは非常に嬉しい。まぁ、2Dゲームなら「enchant.js」などでも良いと思うけどね。Unity の WebGL 出力はとても簡単なのでオススメだ。

 ゲームの操作方法は移動のみで弾はフルオート、ステージ選択などの付加機能も実はジョイスティックにも対応させてある。詳しくはサンプルページに書いておいた。せっかくなので、いくつか付け加えたボス戦のキャプチャなどを載せておこう。ちなみにボス戦は 5, 10, 15, 20, … のように 5ステージごとに配置してある。ステージ選択(Wave Select)でボス戦だけを楽しんでも良いだろう。なるべく個性的な攻撃になるように作ってある。ここでも「攻略」的な方法でプレイしてみると良いだろう。

Wave 20 : レーザー攻撃


Wave 35 : ホーミングミサイル


Wave 50 : 火炎ギロチン


Wave 55 : 反射レーザー


>>動作サンプル(別ウィンドウ)


 また、おおまかには Wave30 まで(半分)は小型ザコしか出てこないので、初見でクリアできるステージも多いと思うが、Wave31 以降は中型ザコやギミック的な複合攻撃になるので、初見ではキツイかもしれない。各ステージを攻略していく形になるだろう。難しそうなステージでも 100 回以上のテストプレイをして調整したので、攻略は必ずできるようにしてある。コツとしては敵の出現位置や攻撃タイミングなどは毎回同じなので、倒す順番や優先度などを決めて色々なパターンを試してみるのが得策だろう。どちらかというと追い詰められてやられることが多いと思うので、敵は1体でも多く倒して前へ出た方が有利かもしれない。ひたすら逃げ回るのも一つの手だ(そういうステージもある)。

 自分でも作ってみたい場合は、オリジナルのコードはチュートリアルに載っているので覗いてみるのも良いだろう。ただ実際の所、私のコードは改造しすぎてもはや原型とは違ってしまっている。コードを掲載しても良いが、膨大になってしまったので、需要があるなら「ホーミングミサイルの作り方」とか「反射レーザーの作り方」など一部テーマごとに書いても良いかもしれない。そのまま使っているのは背景のスクロールくらいか。背景も余力があったら作っても良いんだけどね(マップチップもあるにはあるが、地形を構築するのは大変だよね…)。正直、敵のグラフィックを大量に加工した所で力尽きてしまった(笑)。音楽も実は半分自作(ボス曲とタイトル、選択画面など)。と言っても以前ニコゲーで公開していたループ音楽をそのまま使っただけどね(既にサービス終了)。しかし WebGL 出力ではフォーマットは AAC になるらしく、綺麗にループしないのが難点(Ogg Vorbis なら綺麗にループできる)。実は全24曲も使ってるんだよね。なので音楽鑑賞モード(Music Mode)も付けてみた。難易度高いゲームなので1曲通して聴けることはあまりないしね。効果音もゲームに合うように編集した。素材提供してくれている方々には本当に感謝してます。


<素材提供>
[グラフィック]
ハムコロ様 / ゲーム開発日記 DVDM様 / Merry Party様 / ぴぽや様
[BGM]
MusicMaterial様
[SE]
小森平「効果音で遊ぼう!」様 / ザ・マッチメイカァズ様 /
[Original Program]
Unity チュートリアル 2Dシューティングゲーム (サンプルについて)
[壁紙]
Christopher.Michel様 (Creative Commons)

※著作権は各著作者に帰属します。


■シューティング参考書籍


category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: サンプル 
tb: 0   cm: --

【UnrealEngine】HTML5 (WebGL) ビルドする (UE4.8.3/Windows10)  


 UnrealEngine も無料化され、WebGL も一般的になってきたので、さっそく試してみることにした。


 ただ、WebGL 自体がまだ発展途中であり、バージョンアップごとにやり方が変わっているらしいので、あくまでも私がやった方法として記録しておく。バージョンが違う場合は役に立たないかもしれないが、なるべく詳細に書いておくので、つまずいた時の参考にでもして貰えると嬉しい。

※UE4.9 以降は「Emscripten」などサードパーティツールは必要なくなりました。以下のブログなどを参考にすると良いです。
(参考)UE4 4.9から変更になったHTML5ビルドの実行方法


 とりえあず Windows でやるには、いくつか必要なものがあるようだ(UE4.8)。Windows を再起動する必要があるので、先に全てインストールしてしまおう。また既にインストールしてある場合も、Emscripten や Python はバージョンによっては上手い行かないようなので、確認だけはしておいた方が良いかもしれない。また、Xampp は直接 Webサーバにアップロードする場合は必要ない。


■今回使用したもの
Emscripten 1.27.0(C/C++ などを JavaScript に変換するコンパイラ)
Python 2.7.10(プログラミング言語:HTML5ビルドに必要)
Xampp(Webサーバ:ローカルPCで確認するには必要)

※UnrealEngine4.8.3/Windows10 で確認


■Emscripten をインストールする

 Emscripten は 以下のURLから SDK をダウンロードすることになるが、少々問題があった。
http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html

 というのは、掲載時点の最新版 1.34.1 では上手く行かないようだ。ビルド自体は成功するのだが、ブラウザでアプリ起動時に「Uncaught TypeError: Module.getMemory is not a function」といったエラーが出て止まってしまう。

 なので、とりあえず過去バージョンを試してみた。画面をスクロールして下の方にある「Archived releases」の中から「emsdk-1.27.0-full-64bit.exe」をダウンロードしよう。その上位バージョンは Windows の場合は NSIS Installer を使えば良いとあるが、面倒臭そうなのでやめた(笑)。できる人はやってみても良いかも知れない。


 ダウンロードしたら、あとはウィザードに従って適当にインストールするだけだ。以前のバージョンでは GitHub から UE のソースコードもダウンロードして、コンパイルしていたそうだが(?)、現バージョンではその必要はない。


■Python をインストールする

 Python は以下のURLからダウンロードすることになるが、こちらもバージョンには気をつけよう。
https://www.python.org/downloads/


 バージョンは 2.x (掲載時点:2.7.10)をダウンロードして欲しい。私のPCには昔インストした 2.7.8 があったのだが、そちらでも行けた。ついでにバージョン 3.x(掲載時点:3.4.3)も試したが、ビルドに失敗するようだ。

 ダウンロードしたら、あとはウィザードに従って適当にインストールするだけだ。マイナーバージョンはともかく、メジャーバージョン違いは上書きしないで、フォルダを分けてインストールしておいた方が安全だろう。


■UnrealEngine で HTML5(WebGL) ビルドする

 Windows を再起動したら、いよいよ UnrealEngine で HTML5 出力してみよう。インストールさえ成功していれば、あとは簡単にできると思う。

1.新規プロジェクトで適当にテンプレートでも選ぼう。試しに全てのデフォルトテンプレートでやってみたが、どれでも問題なく HTML5 ビルドできた。プロジェクトのターゲット設定は「モバイル/タブレット」「スケーラブルな2D/3D」にしておく。クオリティも十分と感じた。「デスクトップ/コンソール」「ハイエンド」でも構わないが、少し重くなる気がする。



2.プロジェクトが開いたら、「ファイル」メニューから「プロジェクトをパッケージ化>パッケージング設定...」を開く。



3.「プロジェクト - パッケージ化」では「Build Configuration」を「Shipping」(出荷用)に設定する。「Development」のままだとファイルが巨大になってしまう。この設定はプロジェクトごとのようなので、新規で作る場合は毎回設定する必要がある(メニューの「ファイル>プロジェクトをパッケージ化>ビルドコンフィギュレーション」でも変更できる)。



4.次に左側のメニューを少し下までスクロールして、「プラットフォーム - HTML5 SDK」をクリックする。ここの「HTML5 SDK Paths」の「Location of Python.exe」に先にインストールした python.exe のパスを、同じように「Location of Emscripten SDK」にインストールした Emscripten のフォルダパスを設定する。この設定は1度やれば他のプロジェクトでも共通のようだ。



5.設定し終わったら、「ファイル」メニューから「プロジェクトをパッケージ化>HTML5」でビルドしよう。出力するフォルダを指定したら、「HTML5」というフォルダが作成される。その中の「(プロジェクト名)-HTML5-Shipping.html」がアプリを起動するファイルだ。「index.html」にリネームしておけば使いやすいだろう。



 もし、「ファイル>プロジェクトをパッケージ化>HTML5」をしたとき、HTML5 ビルドの説明ページに飛ばされるなら、Emscripten のインストールに失敗している可能性がある。再度インストして Windows を再起動してみよう。ビルドに失敗するなら、Python のバージョンやパスなどを確認すると良い。



(参考)
Unreal Engine 4.7 PreviewでHTML 5ビルドをしてみる


 ローカルPCで確認するには「Xampp」などをインストールすると良いだろう。インストールや使い方などは他のHPなどに譲ろう。ただ単純に表示するだけならば、あまりバージョンには依存しないだろう。起動も Apache だけで構わない。Web サーバにアップロードするなら、フォルダごとアップすればOKだ。起動ファイルを「index.html」にリネームしておいたなら、フォルダのURLで起動できる。ブラウザは ChromeFirefox なら WebGL に対応している。また、WebGL は起動に多少時間かかるので、気長に待とう。


(参考)
今さら聞けない!XAMPPをインストールする方法【超初心者向け】


 こういったサードパーティとの連携で実現するものは、各々のバージョンによって上手く行かない場合も多いので、なるべく古いバージョンもフォルダ分けなどして保管しておいた方が良いかもね。ただ、マイナーバージョンの場合、増えすぎて困るなら安定版(Stable/Recommended等)などを中心に残しておくと上手く行くことが多い。All In One パッケージのようなものがあったら、それが一番なんだけどね。


category: UnrealEngine

thread: ゲーム開発

janre: コンピュータ

tag: UnrealEngine  WebGL  サンプル 
tb: 0   cm: --
IS<インフィニット・ストラトス> アーキタイプ・ブレイカー
キルドヤ


プロフィール

Twitter

検索フォーム

全記事一覧

カテゴリ

ユーザータグ

最新記事

リンク

PR

▲ Pagetop