【Unity】とっても簡単に扱えるBGM再生クラスを作ってみた。フェードイン、フェードアウト対応版

こちらの記事（【Unity】AudioManagerクラスを作ろう）の改良版です。

上記記事ではBGMの再生はできましたが、BGM切り替えがスムーズではありませんでした。また、オーディオファイルをインスペクタ上から一つ一つセットしなければいけないなど、いろいろと不満が残っていました。

それらを解消すべく作り直してみたので紹介します。

ダウンロード

UnityPackage

手っ取り早く使いたい方はこちら。

https://github.com/naichilab/Unity-BgmManager/archive/master.zip

ソースコード

GitHubで公開してます
https://github.com/naichilab/Unity-BgmManager

これ以降は使い方の説明とかです。

やりたいこと

• BGMを再生できること。
• とにかく簡単に扱えること。
• BGMのフェードイン、フェードアウトに対応すること。
• フェードインとは：音量０からゆっくり大きくなっていくこと
• フェードアウトとは：音量がゆっくり小さくなっていくこと
• BGMのクロスフェードに対応すること。
• クロスフェードとは：フェードアウトとフェードインを組み合わせてBGM切り替えを行うこと
• フェード時間とかを調整できること。

意識したのはこれくらい。
とりあえずBGMだけです。
SEについてもそのうち作ろう。

サンプル

Hosted by UnityRoom.com

PlayボタンでBGM再生開始。
他のBGMへ切り替える際、少し重なって聞こえると思います。これがクロスフェード。
(Playを押してから音が出るまでにちょっと時間があるので分かりづらいかな？)

使い方

Unityプロジェクトを開く

新規Projectでも既存のProjectでもなんでもOK

BgmManagerのダウンロード

https://github.com/naichilab/Unity-BgmManager
こちらのURLにある”Download ZIP”ボタンからダウンロード

BgmManagerのインポート

ZIPファイルを解凍して出てくる
BgmManager.unitypackageをダブルクリックしてUnityに取り込む

サンプル不要ならチェックを外してください。
※サンプルに同梱したmp3ファイルはSHW様(http://shw.in/)提供のものです。

サンプルの実行

SampleフォルダにあるSampleシーンを開きます。
HierarchyビューにBgmManagerが配置されていれば準備完了です。

実行してBGMを再生できる事を確認してください。

サンプルを実行するだけならこれで終わり。これ以降は各自用意されたBGMファイルを再生する方法と、スクリプトからの呼び出し方法の解説です。

BGMファイルの追加

BGMファイルは下記フォルダに存在するものが自動的に読み込まれます。
・Resources
　┗Audio
　　┗BGM
(Resourcesフォルダはどの階層にあっても大丈夫です。)

フェードパラメータの調整

BgmManagerにはいくつかのパラメータがあります。

• Debug Mode
• ONにするとサンプル実行と同じように簡易ウィンドウが表示されます。
• Target Volume
• フェードイン完了時の音量です。
• Time to Fade
• フェードイン(アウト)の開始〜完了までの時間です。
• Crossfade Ratio
• クロスフェードの重なり率を指定します。
• 0を指定した場合、フェードアウト完了を待ち、フェードインが開始されます。
• 1を指定した場合、フェードアウトとフェードインが同時に開始されます。

スクリプトからの再生・停止

すきなスクリプトから下記１行でBGMを再生できます。

BgmManager.Instance.Play ("BGMファイル名");

すでに別の曲が再生中の場合は、勝手にクロスフェード再生します。

停止する場合は下記いずれかを呼び出します。

//フェードアウト後、停止います。
BgmManager.Instance.Stop ();
//ただちに再生を停止します。
BgmManager.Instance.StopImmediately ();

スクリプトからパラメータの変更

こんな感じ。

BgmManager.Instance.DebugMode = false;
BgmManager.Instance.TargetVolume = 0.8f;
BgmManager.Instance.TimeToFade = 3.0f;
BgmManager.Instance.CrossFadeRatio = 0.5f;

再生・停止と一緒ですね。

参考サイト

• ぼくがかんがえたさいきょうのAudioManager【Unity】| (:3[kanのメモ帳]
• フォルダに置いたファイルを読み込むところはまんまパクり参考にさせていただきました。

サンプルファイル提供

• SHW無料音楽素材
• 再配布も自由とのことで使用させていただきました。

その他

フェードイン(アウト)は直線的な補間しかしてないですし、インアウトをそれぞれ別の長さにすることもできないです。
まぁとにかく簡単に使える物を目指したので今後も実装する事は無いかな…

是非使ってみてください〜。



→Unity系記事まとめ

【Unity、uGUI】チュートリアル見ながら触ってみる。01.Canvas

ついにUnity4.6のベータ版が来ましたね。

Unity 4.6オープンβスタート。新GUI「uGUI」の試用が可能に | テラシュールブログ

待ちに待ったuGUIがやっと使えます。

ここにチュートリアルがあるようなのでのんびり見てみようと思います。
UI チュートリアル | Unity 公式

01. UI CANVAS

動画はここ 01. UI CANVAS
実際に動画見ながら試してたらむっちゃ時間かかった

Canvas

キャンバスはUI要素を表示するための重要なコンポーネント
Hierarchy->Create->UI->Canvasで作成可能。
すべてのUI要素はキャンバスの子供にする必要がある

キャンバスは２つ以上配置することもできる

新規UI要素を配置する際、シーンに一つもキャンバスが存在しない場合は自動的に作られる。

こんな感じでいきなりボタンなどを配置するとキャンバスも作られる

RenderMode

Canvasごとに異なるRenderModeを設定できる

Screen Space Overlay : RenderMode

もっとも基本的なRenderModeであり、規定値。
これを選択するとUIはシーン上にオーバーレイ表示され、最前面に描画される。
カメラなしでも表示できる。
このモードの場合、Canvasのサイズは自動的にスクリーンサイズに合うように変更される。
また、スクリーンサイズが変更になる場合も自動的に追従する。
よくあるGUI（操作ボタンとか）はこれで問題なさそうね。

Rect Transform

Canvasを含むすべてのUI要素はこのコンポーネント(RectTransformComponent)を持ってる。
UI要素はこのコンポーネントに基づいて動作する。（らしい、よく理解できんかった）

RenderModeにScreen Space Overlayを選んでいる場合、Canvasのこのコンポーネントの値はすべて自動的に入力される。（画面サイズとかに基づいて）
Rect Transformの詳細についてはこちら

CanvasのRectTransformを変更する必要があるのは後述するWorldSpaceに置いたときだけかな？
Buttonなどの子要素を移動する場合はこのコンポーネントを操作すればいいみたい。

PixelPerfectオプションがある。選択するとUI要素は描画時に一番近いPixelに合うように調整される。より鮮明にUI要素を描画したいときに選択するといい。
NGUIにもPixelPerfectってあったけど正直いつ使うのかわからない。

Screen Space Camera : RenderMode

ScreenSpaceOverlayによく似たRenderMode。
特定のカメラに連動して動作する。
だけどカメラなしでも表示できるっぽい。
（Render Cameraをセットしない場合Overlayと同じ動作なのかな？)

こんな感じでRenderCameraにカメラをセットして使う

Perspectiveカメラとの連動が分かりやすい。
ボタンのRectTransformComponentのRotationYを30度傾けてみた。

ScreenSpaceOverlay(上)とScreenSpaceCamera(下)を並べて
同じように30度傾けてみた。違いがわかりやすい。

もちろん連動したカメラのViewPort設定などが反映される。

カメラとの距離はPlaneDistanceで設定可能
カメラごとのClearFlagsやCallingMask、カメラ深度なども適用される。
カメラについての詳細はこちら

World Space : RenderMode

これを選択するとUI要素はシーン内に他のオブジェクト同様に配置される

これはカメラ必須。
このモードのときはRectTransformを自由に書き換えることができ、Scene内の好きな場所に配置できる

イベントカメラはどのカメラがイベントを受け取るかの設定に必要。
主にクリックイベントの取得とか。

※Receives Events って項目ないな。

キャラクター上にHPバーを表示したりとか、そういうときに使うのかな。

Sorting Layer

よくわからんかった。
描画順を制御できるらしい。
詳細はこちら

描画順

キャンバス内での描画順は上から。

これは直感的でいいね



今日はここまで～。

→Unity系記事まとめ

【Unity】UnityRoom専用のTweetクラスを作りました。

この記事は古いです。

あたらしい情報はこちら。

---

UnityRoomというUnityWebPlayer向けのゲームを公開できるサイトを運用しています。
→UnityRoom (http://unityroom.com/)

上記サイトでの利用を前提としたTwitter利用クラスを作りましたので
ゲームからスコアをつぶやかせるときなどにご利用ください。

注意

・UnityWebPlayer専用です。
・UnityRoomでの利用を前提とした作りです。

サンプル

「うに部屋Tweetサンプル」http://unityroom.com/game/000036

このようなことが簡単にできます。

ソースコード

・新規C#スクリプトを追加
　　名前は"UnityRoomTweet"としてください。

・このスクリプトの内容を以下の通りにしてください。

using UnityEngine;

public static class UnityRoomTweet
{  
  const string SHAREURL = "http://twitter.com/share?";
 
 
  /// <summary>
  ///  ツイートします。
  /// </summary>
  /// <param name="text">本文</param>
  public static void Tweet (string text)
  {
    Tweet (text, -1);
  }
  /// <summary>
  /// ツイートします。
  /// </summary>
  /// <param name="text">本文</param>
  /// <param name="gameId">UnityRoomゲームID</param>
  public static void Tweet (string text, int gameId)
  {
    Tweet (text, gameId, null, null);
  }
 
  /// <summary>
  /// ツイートします。
  /// </summary>
  /// <param name="text">本文</param>
  /// <param name="gameId">UnityRoomゲームID</param>
  /// <param name="via">発言者(＠を除いたTwitterIDを指定)</param>
  /// <param name="hashtag">ハッシュタグ(#は不要)</param>
  public static void Tweet (string text, int gameId, string via, string hashtag)
  {
    if (Application.platform == RuntimePlatform.WindowsWebPlayer 
      || Application.platform == RuntimePlatform.OSXWebPlayer) {
   
      string url = gameId != -1 ? string.Format ("http://unityroom.com/game/{0:000000}", gameId) : "";
   
      var sb = new System.Text.StringBuilder ();
      sb.Append (SHAREURL);
      sb.Append ("original_referer=");
      sb.Append ("&text=" + WWW.EscapeURL (text));
      if (!string.IsNullOrEmpty (url)) 
        sb.Append ("&url=" + WWW.EscapeURL (url));
      if (!string.IsNullOrEmpty (hashtag))
        sb.Append ("&hashtags=" + WWW.EscapeURL (hashtag));
      if (!string.IsNullOrEmpty (via))
        sb.Append ("&via=" + WWW.EscapeURL (via));
   
      Application.ExternalEval ("var F = 0;if (screen.height > 500) {F = Math.round((screen.height / 2) - (250));}window.open('" + sb.ToString () + "','intent','left='+Math.round((screen.width/2)-(250))+',top='+F+',width=500,height=260,personalbar=no,toolbar=no,resizable=no,scrollbars=yes');");
    } else {
      Debug.Log ("WebPlayer以外では実行できません。");
    }
  }
}

使い方の概要

Tweet関数には３つのオーバーロードがあります。

Tweet(string text)

本文のみのツイートを行います。

Tweet(string text, int gameId)

本文とともにゲームのURLをツイートします。
gameIdはUnityRoomゲーム画面のURL末尾にある数字です。

※2014/06/02 すみませんが現時点では一度公開いただかないと確認できません。

Tweet(string text, int gameId, string via, string hashtag )

本文、URL、投稿者、ハッシュタグを記載したTweetをします。
投稿者(via)
　@naichilabさんより といった部分です。
　@を除いたTwitterIDを指定してください。
ハッシュタグ(hashtag)
　#Unity1Week といった部分です。
　#を除いた文字列を指定してください。
　カンマ( , )で区切る事で複数のハッシュタグを指定できます。

viaとhashtagはnullもしくは空文字("")を指定すると付与されません。

呼び出しサンプル

ここではサンプルとしてOnGUIのButtonが押されたときにTweetするようにしてみます。

・新規C#スクリプトを追加
　名前は"CallTweet"とします。
・CallTweetスクリプトの内容を以下の様に記述します。

using UnityEngine;

public class CallTweet : MonoBehaviour
{
 
  void OnGUI ()
  {
    if (GUI.Button (new Rect (10, 20, 400, 90), "Tweet1(本文のみ)")) {
      UnityRoomTweet.Tweet ("本文のみのテストツイートです");
    }
    if (GUI.Button (new Rect (10, 120, 400, 90), "Tweet2(本文＋URL)")) {
      UnityRoomTweet.Tweet ("本本文とURLのテストツイートです。", 36);
    }
    if (GUI.Button (new Rect (10, 220, 400, 90), "Tweet3(本文＋URL+ハッシュタグ)")) {
      UnityRoomTweet.Tweet ("ハッシュタグ付きのツイートです。", 36, null, "Unity1Week");
    }
    if (GUI.Button (new Rect (10, 320, 400, 90), "Tweet4(本文＋URL+ユーザー)")) {
      UnityRoomTweet.Tweet ("投稿者ID付きのTweetです。", 36, "naichilab", null);
    }
    if (GUI.Button (new Rect (10, 420, 400, 90), "Tweet5(本文＋URL+ハッシュタグ+ユーザー)")) {
      UnityRoomTweet.Tweet ("全部入りツイートです。", 36, "naichilab", "Unity1Week");
    }
  }
}

・CallTweetスクリプトをMainCamera(なんでもいいです)にドラッグ＆ドロップ

ここまででツイート関連の準備は完了です。

・UnityのメニューからFile->Build Settings

・WebPlayerを選択し、Switch Platformを押す。
　WebPlayerの横にUnityアイコンが出ればOK

・そのまま Build And Run
・保存フォルダを聞かれるので適当に付けます。
　自分は"WebPlayerRelease"としてます。

・保存すると自動的にWebブラウザが立ち上がり、UnityWebPlayerが実行されます。

以上です。

ぜひご利用ください。


UnityWebPlayerの公開サイト
→UnityRoom http://unityroom.com/

他の記事もどうぞ
→Unity系記事まとめ

【Mac、Android】MacのAndroidエミュレータを３倍速くする方法

MacでAndroidアプリを作ろうとしてるんだけど
エミュレータが遅くてイライラ。

色々調べて動作を速くできたのでメモ。

環境

• 【Mac, Android】MacBookAir Mid 2013にAndroidアプリ開発環境を構築する

このときのまま。

• Mac Book Air 2013 Mid 13inch
• Mac OS X 10.8.5

必要なファイルのダウンロード

Android SDK Managerで下記をダウンロード

Extras->Intel x86 Emulator Accelerator (HAXM installer)

好きなAndroidバージョンのIntel x86 Atom System Image

Emulator Acceleratorのインストール

ダウンロードしたIntelHAXM_x.x.x.dmgを実行

mpkgファイルが出てくるのでそれも実行

インストーラが起動するのでそのままインストール

AVDの作成に入る前に念のためADT(Eclipse)再起動

トラブル発生

Eclipseを再起動したらAndroid Developer Toolkitが古いって怒られた。

しかもこのまま”Check for Updates"やっても"No updates were found."って言われる…

さらにこの状態だとAndroidSDKManager開こうとしてもエラーしちゃう。
"Location of the Android SDK has not been setup in the prefarences"

言われた通りPrefarences開いても起動時に表示されたエラーが出てるだけだし。
”This Android SDK requires Android Developer Toolkit version 22.6.2 or above.  Current version is 22.0.5.v201307292155--757759.  Please update ADT to the latest version.”

マジ困る。
アップデートが効かないので手動で最新版を取得する事にする。

ここから最新ADTをダウンロード
http://developer.android.com/sdk/index.html

たしかに日付は更新されてるっぽい。

解凍すると"adt-bundle-mac-x86_64-20140321"ってフォルダが現れた。
今使ってるフォルダは"adt-bundle-mac-x86_64-20130729"だったから確かに日付は変わってるっぽい。でも中身は何が変わってるか分からない。困った。
Macだとフォルダ上書きすると中身一度消えちゃうし…。
ちょっと面倒だけど両方残すことにした。
フォルダごとアプリケーションフォルダに移動。

新しい方のADTにはSDKを入れ直しになるだろうけど仕方ない。
うまく動いたら古い方消そう。

Eclipse起動！はい、エラー。
どーなってんの。
"The JVM shared library "/Library/Java/javaVirtualMachines/jdk1.7.0_25.jdk/Contents/Home/bin/../jre/lib/server/libjvm.dylib" does not contain the JNI_CreateJavaVM symbol."

http://burrsutter.blogspot.jp/2013/12/eclipse-does-not-contain.html
調べてみると結構困ってる人多いみたい。

最新のJavaを入れ直してみる。
このページから
http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

ライセンス同意してダウンロード

インストーラに従ってインストール完了。

ターミナルで"java -version"と打つとこんな感じ。
(インストール前の確認するの忘れた。)

これでやっとADT起動した。

再度Android SDK Manager開いたらパスが以前のままだったので各SDKの再インストールは必要なかった。ラッキー。

AVD(Android Virtual Device)の作成

AVDManagerを開く。
比較用に２つ作ってみた。

Nexus5_ARM(普通のエミュレータ)

CPU : ARM
Use Host GPU

Nexus5_Intel(速いエミュレータ)

CPU : Intel Atom (x86)
Use Host GPU

こっちは最初にダウンロードしたAcceleratorとSystem Imageがないと作れないはず。

起動時間比較

AVDManager上でStartを押してからエミュレータのロック解除画面が出るまでの時間を計ってみた。

Nexus5_ARM　１回目：183sec　２回目：99sec
Nexus5_Intel　１回目：42sec　２回目：29sec
めんどいから３回以上やってないけど起動は３〜４倍速くなってるかな？
いい感じ。スクロールや画面遷移もサクサク。

動画撮ろうと思ったけど録画するとカクカクしちゃった。残念。
ただ使う分には問題なさそうなのでしばらく使ってみる。

Android記事まとめ

Android系記事へのリンクです。

何番煎じか分かりませんけどAndroid関係の小ネタを自分のためにまとめていきます。(習得するためのアウトプット)
もうAndroid2.xで作るつもりはないので4.x(ICS以降)のみで動作検証していきます。

開発環境

• 【Mac, Android】MacBookAir Mid 2013にAndroidアプリ開発環境を構築する。
• 【Mac、Android】MacのAndroidエミュレータを３倍速くする方法

レイアウトの基本

• 【Android、4.x】dipとdpの違い
• 【Android、4.x】layout用XMLファイルでの@+の意味
• 【Android、4.x】アイコンあれこれ

ステータスバー関係

• 【Android、4.x】ステータスバー表示／非表示切替

ナビゲーションバー

• 【Android、4.x】ナビゲーションバーを控えめにする
• 【Android、4.x】ナビゲーションバーを隠す

View

• 【Android、4.x】最上位のViewを取得する

Button

• 【Android、4.x】ボタンがクリックされたときに○○する

Theme

• 【Android、4.x】テーマの切り替え

Google Maps

• Google Maps Android API v2 で現在地をマップ中心に表示し続ける
• Google Maps Android API v2 をActionBarのタブに表示する
• Google Maps Android API v2 のマップ上にTextViewでテキストを表示する

SQLite

• PCで作ったSQLiteのDBファイルをAndroidで使う

Android Studio

• Android Studioって何？
• Windows7 64bitにAndroid Studio入れてみた。
• Android Studioを日本語化した
• Android StudioのプロジェクトをVirtualBoxでデバッグする

【Unity,NGUI3.x】新しくなったNGUIでボタンを作成する

NGUIバージョンアップが激しすぎて久々に触ったらボタンすら作れなかった。
(たぶん昨年末のv3.0ぐらいでがらっと変わったはず)
悔しいのでちょっと調べました。
そしたら何コレちょー便利！

バージョン

NGUI v3.5.3
Unity 4.3.4f1

参考サイト

http://www.tasharen.com/forum/index.php?PHPSESSID=df10d9532aaf908e31c9b403acdff090&topic=6708

UIButtonについて

※以下適当に翻訳。
Buttonはマウスホバーやクリックイベントを取得し、対象のSpriteの色を変更するために設計されたシンプルなコンポーネントです。
どんなものでもボタンにできます。それはNGUIのwidgetである必要はありません。
Colliderを持つものであれば何にでもButtonコンポーネントを付けることができます。しかしながら一般的にはNGUIのUI階層にあるUISpriteやゲームオブジェクトに付けることが多いでしょう。

ボタンとして動作させるためには、必ずNGUIのUICameraに映す必要があります。また、Physics設定の"Raycast Hit Triggers"がオンになっている必要があります。

ボタンはマウスオーバー・押下・またクリックイベントを受け取り、Targetフィールドに設定したObjectに対して色の変化を提供します。これらは一般的にwidget(Sprite,Label,またはTexture)を対象としますが、ライトやレンダラを持つその他のObjectにも適用できます。

もしクリックにより別のオブジェクトの関数を呼び出したい場合は”Notify”フィールドに対象となるGameObjectをドラッグ＆ドロップします。するとドロップダウンリストに
呼び出し可能な関数が表示されるのでそれを選択します。ここに表示される関数はPublicかつ戻り値がvoidの物だけです。

例）

public void MyClickFunction()
{
    Debug.Log("I was clicked!");
}

Tip1(よくわからん)

It's generally a good idea to put the Button component on the same game object as the button's background sprite. Hit ALT+SHIFT+C to quickly create a collider, and check the "Box Collider" option on the sprite so that the box collider auto-updates as you resize the sprite.

Tip2

UIButtonはOnClick通知だけを提供します。もしOnPress, OnHover, OnSelect, OnDoubleClick など、より高度な通知を行いたければUIEventTriggerコンポーネントを使用してください。

実際にやってみた

・NGUIのアセットをImport
・適当なScene作成
・MainCamera削除
・NGUI->Create->Sprite

・適当に入ってるAtlasとSpriteを選択。
　ここではサンプルのFantasyAtlasとBrightスプライトを選択。
　会わせてSlicedSpriteに設定。

・HierarchyウィンドウでSpriteを選択したまま、NGUI->Attach->Collider
・HierarchyウィンドウでSpriteを選択したまま、NGUI->Attach->Button Script

これだけでボタンになった。

あとはイベントの捕捉。
・下記みたいな適当なスクリプト作成(なんでもいい)

using UnityEngine;

public class TestScript : MonoBehaviour
{
  public void Test_OnHoverOver () { Debug.Log ("Test_OnHoverOver"); }
  public void Test_OnHoverOut () { Debug.Log ("Test_OnHoverOut"); }
  public void Test_OnPress () { Debug.Log ("Test_OnPress"); }
  public void Test_OnRelease () { Debug.Log ("Test_OnRelease"); }
  public void Test_OnSelect () { Debug.Log ("Test_OnSelect"); }
  public void Test_OnDeselect () { Debug.Log ("Test_OnDeselect"); }
  public void Test_OnClickOrTap () { Debug.Log ("Test_OnClickOrTap"); }
  public void Test_OnDoubleClickOrTap () { Debug.Log ("Test_OnDoubleClickOrTap"); }
}

・適当なGameObjectを作って上記スクリプトを追加
・ボタンとなったSpriteのUIButton->Notifyに上記GameObjectをドラッグ
・ドロップダウンにメソッド一覧が現われるので好きなの選択

これだけでイベント拾えるようになりました。

クリック以外を拾いたい場合は
・UIButtonを付けたGameObjectに
　AddComponent->Event Trigger
あとは同じ。

これは使いやすいわ…

→Unity系記事まとめ