メニューを閉じる

テクノデジタルグループ

メニューを開く

2014.11.28

プログラミング

NGUIあれこれ(Unity)

こんにちは、KTです。

前はUnity関連のメモと同じところに書いてたけど多くなりそうだったので分割しました。

NGUI(Next-Gen UI)の使い方なんかをまとめていきます(こっちも多くなりそうならさらに分割するかも)

 

1. 縦横スクロールビューの実現

縦方向スクロールビュー上に横方向のスクロールビューを配置して、iOSのメールアプリのような動作を実現する場合、NGUIのスクロールビューのみではスクロール方向によってスクロール対象を変更する方法が見当たらなかったので拡張してみました。

※ 以前載せていた方法だと、DrawCall数が多くなりすぎて動作が重くなっていたため、修正しました

以下の動作を実現します。

  • 縦方向スクロール→テーブル全体のスクロール
  • 横方向スクロール→セル毎のスクロール

まずは、以下のような構成でオブジェクトを配置します。

UIRoot(NGUI)
+- Camera
+- ScrollView
+- TableContents
+- CellContents

次に、NGUIのUIDragScrollViewを継承したスクリプトを作成し、以下のように実装します。

 

このスクリプトをCellContentsにアタッチして、スクロールビューをセットすればOKです。

ポイントはOnDragで渡されるdeltaの角度が横向きの場合は手動でセルを横スクロールし、角度が縦向きの場合のみUIScrollViewでスクロールしている点です。

 

2. UILabelの自動リンク

NGUIのUILabelには、リンク機能や文字装飾機能が備わっています。

  • リンク機能

UILabelのテキストの、処理を行いたい文字列を[url=(url)]文字列[/url]のように[url=〜]で囲うことで、その文字列がリンクとなります(NGUI上でクリックイベントが受け取れるようになる)

例えば、UILabelに以下のコンポーネントを付与した場合、Test >> click me << Testと表示され、click meの部分をクリックするとfugaとログ出力されます。

  • 文字装飾

上記の[url]タグ以外にも、[b]タグ(太文字)、[i]タグ(イタリック)、[u]タグ(アンダーライン)、[(16進6桁)]〜[-](文字色変更)などが用意されています。

 

3. ローカライズ(多言語化)

NGUIには、多言語化を簡単に実現出来るLocalizationという機能があります。

 

まずは、多言語化用のファイルを用意します。

Resourcesディレクトリ(無ければ作りましょう)の下に、Localization.csvファイルを作成しましょう。

一行目に、KEY,言語名1,言語名2,・・・のようにして、使用する言語を定義します。KEYという名前は変更出来ません。

二行目以降に、キー名,言語1のテキスト,言語2のテキスト,・・・のようにして各言語毎の文字列を定義していきます。

追加したら一度Unityを再起動しましょう。(重要)

Localization.csv 例

 

次に、多言語化対象のオブジェクトに、UILocalizeコンポーネントを追加します。

多言語化出来るのは、UILabelとUISpriteのみとなります。UILabelの場合はテキストに、UISpriteの場合はスプライト名に反映されます。

 

コンポーネントを追加したら、作成したcsvファイルの任意のキーをKeyにセットします。

そうすると、Previewが表示され、EnglishとJapaneseにそれぞれcsvファイルで設定したテキストが表示されているはずです。(もし表示されなければ、NGUIのサンプルのLocalizationファイルが残っていないか確認してください。何故かそちらが優先して読み込まれることがあるようです)

 

最後に、iOSやAndroid等で動かした時に、システムの言語設定を反映するようにしましょう。

以下のスクリプトを適当なオブジェクトに貼付けてください。

 

これで多言語化は完成です。

 

3.5. 動的にスプライトを切り替える場合の多言語化

動的にスプライトを切り替える場合の多言語化についても、基本的には同じやり方でOKです。

Localization.csvを作ってUILocalizeコンポーネントを対象のスプライトに追加しましょう。

 

あとはスプライトを切り替えている箇所でスプライトではなくUILocalizeのkeyを切り替えて反映するだけです。

 

Localization.csv

これでOKです。

 

 


【テクノモバイルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』
https://qangaroo.jp/

最近の記事

SNS共有