【Unity】NGUI3.0を使ってスクロールビューを作ってみよう

こんにちは、開発の半沢 匠です。

今回はUnityでUIを作るとしたら今や欠かせないアセットNGUIについてお話させていただきます。
つい先日NGUIが3.0にメジャーバージョンアップしました。作者さんいつもありがとうございますｍｍ

そこで今回はこちらを用いてスクロールビューの作成方法を図入りで説明します。
っとは言うものの実は作者さんが既にわかりやすい動画をYoutubeにアップしてらっしゃるので
詳細はそちらを見ていただくのが良いかと思います。

動画はこちら https://www.youtube.com/watch?feature=player_embedded&v=OiA4o8KqBFI

こちらは簡単に日本語でまとめたメモとしてご活用いただければと思います。

======

①ベース作成

・メニュのNGUI→Open→UI Wizardを選択
・CameraがSimple 2Dになっていることを確認しCreate Your UI ボタンを押下


②ScrollView作成

















































・Anchorの子オブジェクトとして空のオブジェクトScrollViewを作成
・Add Componentボタンを押下しPanelを選択しUIPanelスクリプトをアタッチする
・UIPanelのClippingをAlphaClipにする
※もしくはSoftClip。こちらの場合は両端のぼやける範囲をSoftnessの値で指定可能
・表示したい場所/領域にCenter/Sizeの値を変更（Scene内の色枠を参考に）
・Add Componentボタンを押下しDraggable Panelを選択しUIDraggable Panelスクリプトをアタッチする
・Scaleの値を移動させたい方向のみに１を入力
※縦スクロール：X0、Y1、Z0
　 横スクロール：X1、Y0、Z0


③Grid作成

・ScrollViewの子オブジェクトとして空のオブジェクトGridを作成
・Add Componentボタンを押下しGridを選択しUIGridスクリプトをアタッチする
・UIGridのArrangementを移動させたい方向に選択
※縦スクロール：Vertical
　 横スクロール：Horizontal
・アイテム（④で作成するオブジェクト）の１つの大きさをCellWidthとCellHeightで指定
・Gridを移動し②で作成したPaneｌ内の表示させたい場所に移動させる


④アイテム作成

・ScrollViewの子オブジェクトとして空のオブジェクトItemを作成
・こちらのオブジェクトがスクロールさせるアイテム（画像等）になります
・表示させたいものを子オブジェクトとして追加する（複数可。画像やラベル等）
・Add Componentボタンを押下しDrag Panel Contentsを選択しUIDrag Panel Contentsスクリプトをアタッチする
・メニューのNGUI→Attach→ColliderでBox Colliderをアタッチする
・必要に応じてItemオブジェクトを複数作成する


⑤Outline作成

・Anchorの子オブジェクトとして空のオブジェクトOutlineを作成
・メニューのNGUI→Attach→ColliderでBox Colliderをアタッチする
・CenterとSizeを②で作成したScrollViewのUIPanelのCenter/Sizeの値にする
・Add Componentボタンを押下しDrag Panel Contentsを選択しUIDrag Panel Contentsスクリプトをアタッチする
・Draggable PanelにScrollViewをドラッグ&ドロップする
======

以上でスクロールビューの完成です！
説明すると少し長く思えますが、実際に作ると直ぐにできますので、
是非作ってみてください。

---

山と開発 ~Mountain climbing and Development~

こんにちは、開発の松本英高です。
仕事ではゲームやスマホアプリ開発をしています。

ずいぶん昔にチーム内勉強会で発表した資料を整理しました。
登山とソフトウェア開発の意外（？）な類似点を、話してみたいと思います。

実装者の方から、マネージャークラスの方まで、幅広くご参考になれば幸いです。
10数枚の気楽なスライドです、コーヒーでも飲みながら見てください。


おまけ
どうでもいいのですが、登山用語を、ソフトウェア開発用語化してみました。

• 道迷い
• 何の処理を書いてるのだかわからなくなること。
• そのまま進むと、スパゲティコードが出来上がる。
• 8合目
• 頂上まであと少しの状態。
• PGが「8合目ですね」と言っても、実際まだ5合目にも達していないことも多々ある。
• プログラマーズ・ハイ
• プログラミング中、気持ち良くなってくること。
• 出来上がったコードは、大概微妙。
• ビバーク（緊急野営）
• トラブル発生で会社に泊まること。

---

Unityでの音(サウンド)管理（SoundManager Ver.β)

こんにちは、開発の半沢 匠です。
今回もUnity(http://unity3d.com/)に関しての記事を書きたいと思います。

■音管理

ゲーム開発及び、アプリ開発において
音再生は欠かせないもの。

BGMやSEを導入するだけで、ぐっと雰囲気が出てきます。
今回はこれをなるべく簡単に管理できるような仕組みを紹介したいと思います。


■スクリプト
SoundManager.csという下記のスクリプト作成いたしましたので、
こちらを紹介させていただきます。

using UnityEngine;
using System;
using System.Collections;


// 音管理クラス
public class SoundManager : MonoBehaviour {
 
 protected static SoundManager instance;

 public static SoundManager Instance
 {
    get
    {
       if(instance == null)
       {
          instance = (SoundManager) FindObjectOfType(typeof(SoundManager));

          if (instance == null)
          {
             Debug.LogError("SoundManager Instance Error");
          }
       }

       return instance;
    }
 }
 
 // 音量
 public SoundVolume volume = new SoundVolume();
 
 // === AudioSource ===
 // BGM
 private AudioSource BGMsource;
 // SE
 private AudioSource[] SEsources = new AudioSource[16];
 // 音声
 private AudioSource[] VoiceSources = new AudioSource[16];
 
 // === AudioClip ===
 // BGM
 public AudioClip[] BGM;
 // SE
 public AudioClip[] SE;
 // 音声
 public AudioClip[] Voice;

 void Awake (){
  GameObject[] obj = GameObject.FindGameObjectsWithTag("SoundManager");
  if( obj.Length > 1 ){
   // 既に存在しているなら削除
   Destroy(gameObject);
  }else{
   // 音管理はシーン遷移では破棄させない
   DontDestroyOnLoad(gameObject);
  }
  
  // 全てのAudioSourceコンポーネントを追加する

  // BGM AudioSource
  BGMsource = gameObject.AddComponent<AudioSource>();
  // BGMはループを有効にする
  BGMsource.loop = true;
  
  // SE AudioSource
  for(int i = 0 ; i < SEsources.Length ; i++ ){
   SEsources[i] = gameObject.AddComponent<AudioSource>();
  }
  
  // 音声 AudioSource
  for(int i = 0 ; i < VoiceSources.Length ; i++ ){
   VoiceSources[i] = gameObject.AddComponent<AudioSource>();
  }
 }
 
 void Update () {
  // ミュート設定
  BGMsource.mute = volume.Mute;
  foreach(AudioSource source in SEsources ){
   source.mute = volume.Mute;
  }
  foreach(AudioSource source in VoiceSources ){
   source.mute = volume.Mute;
  }
  
  // ボリューム設定
  BGMsource.volume = volume.BGM;
  foreach(AudioSource source in SEsources ){
   source.volume = volume.SE;
  }
  foreach(AudioSource source in VoiceSources ){
   source.volume = volume.Voice;
  }
 }
 

 
 // ***** BGM再生 *****
 // BGM再生
 public void PlayBGM(int index){
  if( 0 > index || BGM.Length <= index ){
   return;
  }
  // 同じBGMの場合は何もしない
  if( BGMsource.clip == BGM[index] ){
   return;
  }
  BGMsource.Stop();
  BGMsource.clip = BGM[index];
  BGMsource.Play();
 }
 
 // BGM停止
 public void StopBGM(){
  BGMsource.Stop();
  BGMsource.clip = null;
 }

 
 // ***** SE再生 *****
 // SE再生
 public void PlaySE(int index){
  if( 0 > index || SE.Length <= index ){
   return;
  }
   
  // 再生中で無いAudioSouceで鳴らす
  foreach(AudioSource source in SEsources){
   if( false == source.isPlaying ){
    source.clip = SE[index];
    source.Play();
    return;
   }
  }  
 }
 
 // SE停止
 public void StopSE(){
  // 全てのSE用のAudioSouceを停止する
  foreach(AudioSource source in SEsources){
   source.Stop();
   source.clip = null;
  }  
 }
 
 
 // ***** 音声再生 *****
 // 音声再生
 public void PlayVoice(int index){
  if( 0 > index || Voice.Length <= index ){
   return;
  }
  // 再生中で無いAudioSouceで鳴らす
  foreach(AudioSource source in VoiceSources){
   if( false == source.isPlaying ){
    source.clip = Voice[index];
    source.Play();
    return;
   }
  } 
 }
 
 // 音声停止
 public void StopVoice(){
  // 全ての音声用のAudioSouceを停止する
  foreach(AudioSource source in VoiceSources){
   source.Stop();
   source.clip = null;
  }  
 }
}

更に音量クラスも作成する。

// 音量クラス
[Serializable]
public class SoundVolume{
 public float BGM = 1.0f;
 public float Voice = 1.0f;
 public float SE = 1.0f;
 public bool Mute = false;
 
 public void Init(){
  BGM = 1.0f;
  Voice = 1.0f;
  SE = 1.0f;
  Mute = false;
 }
}

■使用手順
１．上記のSoundManager.csを空のオブジェクトに張り付ける。
２．オブジェクトのタグ名を”SoundManager”とする。
３．追加したい音ファイルをGUI操作で追加する（下図参照）

４．音を再生したい箇所に下記ソースを、それぞれ追加する。

SoundManager.Instance.PlayBGM(0);
SoundManager.Instance.PlaySE(2);
SoundManager.Instance.PlayVoice(3);

以上で音を再生できるようになったかと思います。



■解説
・SoundManagerは、1シーンに1つのみ生成されるようになっており、
シーン遷移時でも破棄されないように設定されており、
シングルトン化してある為、どのソースからもアクセス可能になっております。
・エディタ上でドラッグ&ドロップだけで音ファイルを簡単に追加／削除できるため、
プログラマー以外の人でも簡単に使えるように想定（別途エクセル等でインデックス管理はした方が良い）
また、鳴らす際も1行のソースを追加するだけの簡単仕様にしました。
・new AudioSource[16];は16個まで同時再生可能という設定になっております。
こちらは状況に応じて色々と変更されると良いかもしれません。
・SoundVolumeに[Serializable]を追加することで、エディタ上に音量やミュート状態を表示するようにし、デバッグ時に使用できるように致しました。


■最後に
よくある手法ではございますが、こんな感じに私は使用しておりますという事でご紹介させていただきました。
結構便利な機能だと思いますので、是非ご活用頂ければと思います。
Ver.βということで今後も随時使いやすい形に改良していきたいと思います。

---