読者です 読者をやめる 読者になる 読者になる

Unityで時間制御ができるアセット「Chronos - Time Control」を試してみました

Unity UnityAssets

スローモーションの表現を付けてみたくて探していたところ、時間制御ができるアセット「Chronos - Time Control」を見つけることができました。

(8/28日現在、ちょうどマッドネスセールの対象になっていますね)


ざっと動きを調べたのですが、いくつか分かりづらい箇所があったので、まずは基本的な確認までを備忘録として残しておきたいと思います。


まず、どんなことができるかは、You Tubeで公開されているプロモーションムービーを見るのが早いと思います。とてもかっこいいです。


(「Chronos - Time Control」は長いので、以後このアセットのことを「Chronos」と呼びます)



=====================

目次

1. Chronosとは?

2. 準備

3. Chronosの構成

4. 動作確認

5. Tips


=====================

1. Chronosとは?

時間制御ができるアセットです。オブジェクトの移動速度を速い/遅い、停止、巻き戻しのように変更できます。

自分で指定した条件のときに変更、ということができるので、冒頭のプロモーションムービーのように、特定オブジェクトだけ、任意のエリアに入ったオブジェクトだけ、のような制御ができます。

ちなみに、エリアに入った、とはこのような状態です。

f:id:Takyu:20160828053901j:plain

この場合、青い円に入っている車だけが、他のオブジェクトとは異なる時間感覚になります。

2. 準備

まずはアセットを購入し、インポートします。アセットストアの紹介ページによると、容量は3.8MBととても軽いです。

インポートすると、Assets/Chronosフォルダに、Readmeがあります。ここにチュートリアルのURLが記載されていますが、アセットストアの紹介ページからも行けますので、リンクを貼っておきます。

Tutorial | Chronos | Ludiq


3. Chronosの構成

大きく分けて6つのコンポーネントがあります。説明は私の解釈です。

f:id:Takyu:20160828055011j:plain

名称 役割
TimeKeeper すべての時間制御の元となるコンポーネント。Chronosによる時間制御を行うには、TimeKeeperコンポーネントを付けたオブジェクトが、一つのシーンに一つだけ存在している必要がある
Clock 時間制御のための基本クラス。Abstractとあり、実際にオブジェクトにアタッチすることはなさそう
Global Clock オブジェクト(複数)のグループを指定するコンポーネント。Unityのtagに類似。TimeKeeperオブジェクトにアタッチする必要がある。他のGlobal ClockをParentとして指定できる
Local Clock 一つのオブジェクトを時間制御できるようになるコンポーネント
Area Clock Colliderの範囲内にあるオブジェクト(複数込み)を時間制御できるようになるコンポーネント
Timeline Chronosアセットで時間制御させたいオブジェクトに必ずつけるコンポーネント


Clock以外の5つの関係を示した例がこちらです。なんとなく各コンポーネントの関係性が見えると思います。

f:id:Takyu:20160828060306j:plain


4. 動作確認

Chronosアセットにはサンプルシーンがあります。

下記はサンプルシーンのスクリーンショットですが、いろいろなオブジェクトが色々な動きをしており、どうすればどう動くのか、がわかりづらい印象を持ちました。

f:id:Takyu:20160828061122j:plain

そこで、サンプルシーンについては、ある程度このアセットの構造を理解してから使うことにして、まずは最も簡単な時間制御を試しました。

試した結果がこちらです。

f:id:Takyu:20160828061240g:plain

このように、一つのgame objectの移動速度を制御できます。以下、このサンプルを作るための手順を解説します。

4-1. Timekeeper オブジェクトを設置する

Unityの"GameObject"から生成できるオブジェクトに、 Timekeeperというオブジェクトが追加されているので、これを選択します。

f:id:Takyu:20160828063619j:plain

4-2. 適当なgame objectを設置する

たとえば、今回の場合Cubeを設置しました。

4-3. game objectにTimelineコンポーネントを追加する

時間制御したいgame objectを選択した状態で、Component/Timelineを選択します。

f:id:Takyu:20160828063932j:plain

選択したTimelineコンポーネントについて、ModeとGlobal Clockを下記のように指定します。

f:id:Takyu:20160828064112p:plain

4-4. 基底クラスのスクリプトを作る

まず、スクリプトの記述を簡略化するため、以下のようなコードを準備します。


giste7150b2307d1f83dec14b5f45225d532

以後、Chronosによる時間制御をしたいときは、BaseBehaviourクラスを継承します。

例えば、ChronosにはTimelineというコンポーネントがありますが、

GetComponent<Timeline>.deltaTime

を、

time.deltaTime

として簡略記述できるようになります。

なお、BaseBehaviour.csは作成して Project Viewにあるだけでよいです。Hierarchy Viewの何かのオブジェクトに追加する必要はありません。

4-5. 時間制御のスクリプトを作る

以下のようなスクリプトを書きます。


gist6277067bce1576bad34f589f063959cf

4-6. 適当なGame objectに、TimeControlTest.csを追加する

たとえば、今回は制御対象のCubeに追加してみました。

これでシーン実行すると、キーボードの1〜5のキーに応じてそれぞれ時間制御をかけることができます。

5. Tips

5-1. サンプルシーンに関する解説はない

チュートリアルページは、Unityの2D Platformer(下記)というサンプルプロジェクトを元にした解説であり、なぜかChronosアセット付属のサンプルシーンに関する解説は見つけることができませんでした。


まだチュートリアルページを全部読めていないので、一通り読めば、サンプルシーンの中身も理解出来る気がしています。

続きを確認できたら、またブログを更新したいと思います。

Unity Asset Review - Cinema Director -

Unity UnityAssets

It is English version of a following article in Japanese.

magicbullet.hatenablog.jp


On Unity Asset Store, there are several video editing assets.

But I could not understand "What is it mean that video editing on Unity?", because I think Unity is a game development tool.

That's why I bought an asset "Cinema Director" and tried it.

In this blog, I'll introduce about "Cinema Director" and how to use it.


Cinema Director

[Contents]

0. What is relationship between Cinema Suite and Cinema Director?
1. Overview of Cinema Director
2. Basic Operation
3. Main functions
4. How do I make movie?
5. Tips
6. Impressions


0. What is relationship between Cinema Suite and Cinema Director?

When you search for "Cinema Director", you can also find "Cinema Suite".

"Cinema Suite" is a package asset. It includes four asset related with cinema.

Detail is here.

Cinema Suite ($129)
- Cinema Director ($60)
- Cinema Pro Cam ($50)
- Cinema Mocap ($70)
- Cinema Themes (Free)

Price is as of 28th March, 2016.

Cinema Suite is now $65 because of summer sale (as of 19th August, 2016)


In this blog, main target is "Cinema Director".

1. Overview of Cinema Director

Cinema Director is an asset which controls unity objects on timeline like the following capture.

f:id:Takyu:20160328073749p:plain

Horizontal axis is time. Each horizontal items are game objects. You can call components of each game objects on timeline.

You can arrange each game objects, execute scene, then each game objects move according to the arrangement.

Basically, it takes a lot of time to control timing by only script. The timeline control function is so convenient.

2. Basic Operation

At first, you need to buy the asset from Unity Asset Store. After importing the asset to your Unity project, you can use function of "Cinema Director" from Window menu.

f:id:Takyu:20160327130158p:plain

(The capture shows other Cinema Suite family because I tried on Cinema Suite. )

2-1. Making CutScene

In Cinema Director, timeline editor is called as "Cut Scene".

At first, you need to create "Cut Scene". You choose "Create CutScene" as reference to the following capture.

Then, you can see editor like following capture.

f:id:Takyu:20160327130522p:plain


Name :

It is the name of "CutScene" object. It is showed on Hierarchy View. Any name is OK.

If you don't change the name, a GameObject named as "CutScene" is displayed on Hierarchy View.


Duration:

It is setting time for movie. If you set it as 60 seconds, you can make 60 seconds movie.

Default settings is 30 seconds.


Looping:

It is loop setting option. If you set it as active, cut scene is looping.

Skippable:

If you would like your cutscene to end on either a gamepad movement or by a keyboard command, select the this option as well.


Start Method:

In this option, There are three options: "On Start", "On Trigger", and "None".

If you select "On Start" option, timeline control by "Cinema Director" begins when Unity scene starts.

If you have no special reasons, "On Start" options is recommended.


Track Groups:

You don't have to set anything in this sections. You can set it later.

It is explained in Section 2-2.


If you click "I'm Feeling Lucky", "Cinema Director" set game objects in Hierarchy View on timeline editor.

2-2. Set game object on Timeline

When you open time line editor, click "Create", then you can see menu like this.

It includes four options :
- Actor Track Group
- Character Track Group
- Director Group
- Multi Actor Track Group


f:id:Takyu:20160327133244p:plain

Actor Track Group:

It is a group for a game object. You can also select light and uGUI game objects.

You can make game objects visible or invisible at any timing.

You can also set "SendMessage" function at any timing.

Character Track Group:

It is a group for 3D model controlled by Mecanim.

Director Group:

It is a group for functions which affect on Unity scene.

Example:

  • Playback or stop BGM
  • Change Camera angle
  • Change Unity Scene
Multi Actor Track Group:

It is a group for game objects. It looks like the same as "Actor Track Group", but the group can control multi game objects.

On sample scene, the group was used for blinking robot eyes.

See section 3-2. There is a short animation movie.


Let me explain each options.

* Case 1 : Actor Track Group, Multi Actor Track Group

When you click "+" button on timeline, menu is displayed.

It includes two options :
- Add Actor Track
- Add Curve Track

f:id:Takyu:20160327134923p:plain

Add Actor Track:

You can control a game object. An example is following.

f:id:Takyu:20160327135238p:plain

You can imagine how functions do by function name.

For example, "Enable" and "Disable" functions are that make a game object visible or invisible.

f:id:Takyu:20160327135649p:plain
Enable

f:id:Takyu:20160327135707p:plain
Disable

Add Curve Track:

It can attach xyz direction moving to a selected a game object. It is similar to Unity animation.

On the example, the track is adapted for a camera.

f:id:Takyu:20160327140101p:plain

* Case 2: Director Group

When you click "+" button on timeline, menu is displayed.

It includes three options :
- Add Audio Track
- Add Global Track
- Add Shot Track


f:id:Takyu:20160327141600p:plain

Add Audio Track:

You can control scene audio.
When you use the function, a new game object is generated with Audio Source component and Audio Clip in Hierarchy View.

Add Global Track:

You can control functions which affects whole scene. Followings are example.

f:id:Takyu:20160327142105p:plain

For example, "Set Time Scale" of the list can change processing speed on scene.


Add Shot Track:

You can set camera objects.

For example, sample scene "Director Basics.unity" sets several camera objects.

f:id:Takyu:20160327142415p:plain

[Caution]
All camera objects in the scene don't have any functions. Each names derive from each positions.
(Each specific names made me misunderstood...)


3. Main functions

I have made a movie by Cinema Director. But I couldn't publish it with several reasons.

Therefore, I'll introduce main functions with the sample scene of the asset and my instant examples.

3-1. Change camera work

For example, you can use expression like this if camera object is controlled in timeline.


f:id:Takyu:20160327150401g:plain


I developed the scene by timeline editor like this.

f:id:Takyu:20160327151121p:plain


The scene has two camera objects. "Camera02" object is invisible. ("Disable" setting)


f:id:Takyu:20160327153001j:plain


"Camera01" object displays the scene from 0 to 5 sec. "Camera02" object does from 5 to 10 sec.


See "Curve Clip" in the screen capture.

"Curve Clip" can change "Transform Position" as time passes.

Then, you can control zoom in/out in Unity.


3-2. Animation

For example, you can develop such a scene if you also use "Animator Controller".


f:id:Takyu:20160327153540g:plain

A robot blinks at odd intervals.

Let's see timeline editor.

f:id:Takyu:20160327153745p:plain

Triangle figures mean timing when blink motion of robot executes.

(Screen capture of the timeline is part of the movie)

In Cinema Director, you can edit inspector view of Unity when you click the triangle figure at any times.(Not only animation, but also every functions)


f:id:Takyu:20160327154059p:plain

In this case, I edited "Blink" of the "Name".

Where is "Blink"? It is a transition condition of blink animation controller.

f:id:Takyu:20160328094812p:plain


3-3. Transition

When you click "Director Group / Add Global Track " and select each items, you can find "Transition".

f:id:Takyu:20160327155218p:plain

In this menu, you find several feature like "Fade from Black", "Fade to White".

You can add transition effect if you select the feature.

In my environment, however, every features seem to not be seamless.

Therefore, I adjusted color transition setting and realized seamless transition.

Following is my setting example.

f:id:Takyu:20160327160604g:plain


I edited timeline editor like this.

f:id:Takyu:20160327160936p:plain

In this example, I modified the timeline of 3-1 section, expanded active time of "Camera01" and "Camera02", and added "Transition" at start/end point.

You can set the setting very easily because you only have to modify alpha of "Color Transition".

At first, you left-clicked "Color Transition" on timeline editor. Then you can modify setting in inspector view.


f:id:Takyu:20160327162948p:plain

When you click "from" and "to" like the screen capture, color panel setting opens.

Now, you set alpha number.


[fade in]

from : alpha = 255
to : alpha = 0


[fade out]

from : alpha =0
to : alpha =255

4. How do I make movie?

As I said at introduction section of this blog, Cinema Director can control game objects on timeline editor.

You have to know that Cinema Director could not convert scene into movie format such as mp4.

Therefore, you need to use several tools other than Cinema Director.

Here is my tips.

(1) Screen capture tool

In my case, I captured my unity scene by Quick Time Player (free version is OK).

If you use Quick Time Player, mouse cursor is visible during recording.

I recommend the following tool. It can just erase mouse cursor.

www.macupdate.com



(2) video editing tool

I recommend the following tool because it is easy to use.

Filmora Video Editor - 動画編集

Filmora Video Editor - 動画編集

  • Wondershare Software Co., Ltd
  • ビデオ
  • ¥6,000




5. Tips

I listed up several tips based on my experience. Hope they are useful for you!

5-1. Only enabled(active) camera objects can be controlled by Shot Track /Set Camera option


f:id:Takyu:20160328064255p:plain

In my experience, after I added various angle camera objects, I disabled most of camera object because I would like to simplify game view.

Then I could not set each disabled camera objects on Shot Track of timeline editor.

You should make a camera object you want to control active.

5-2. Cinema Director does not support image component of uGUI.

It is a tips as of 28th Mar, 2016. Image component may be supported on future update.

f:id:Takyu:20160328065638p:plain

Basically, you can control text based component.

5-3. Storyboard function is screen capture

When you select Storyboard option of Global Track and put triangle figures on any position of timeline editor, you can save screen capture at the moment.

f:id:Takyu:20160328073749p:plain

For example, I put a triangle figure at the position of red square.


f:id:Takyu:20160328073810p:plain

Then such a picture is saved in Assets top folder. It takes seconds to generate a picture file.

5-4. You can change track name on timeline editor

On this capture, I changed names of red squares.


f:id:Takyu:20160328074259p:plain

6. Impressions

I think Cinema Director is a wonderful asset because we could easily control game object on timeline editor. It is easy to make movie scene on Unity.

Cinema Director has various functions which are not introduced by my this blog.
For example, if you use SendMessage option, you could control any your function on time line editor.

On the other hands, some functions such as transition feature (See section 3-3) are difficult to use.

When I made a movie, I edited most of animation in Cinema Director. But I edited character's voice, BGM, and added subtitle in Filmora.

Some functions are suitable for Cinema Director, other functions are suitable for video editing tool.

Depending on situation, we should choice best method. Then we could save development time and wonderful works.

Enjoy!

Unity公式アセット「Speech-to-Text」の概要と基本的な使い方をまとめました

Unity UnityAssets

=====================================
2016/8/28 追記

Asset Storeを見ると、私が書いたときよりバージョンが上がっており、Readmeに以下が追加されていました。


Google non-streaming and Wit.ai non-streaming speech-to-text both rely on UniWeb, which must be manually added to the project

理由不明ですが、UniWebがないと動かないように変わったようです。

ちなみに、UniWebとは、こちらにあるアセットで、Web関係の処理を便利にするものです。$25です。

これまでは、Watson SDKを入れればインポート後のエラーは回避できたのですが、今後は、Watson SDKに加えてUniWebも必要になりました。

Asset Storeのコメントを見ると、Slaghtonという方が、Watson SDKとUniWebをインポートすることで、エラーが消えたと報告されています。


***Update*** installed UniWeb and got the asset working. Keep up the good work!
p.s. for anyone new you need both UniWeb and the Watson SDK for this to work. I think you need windows 8.1+ to.


ということで、今後このアセットを試される場合、UniWebを購入するか、Google Non StreamingやWit.aiを使わず、エラー箇所を自力でコメントアウトすることが必要になります。


バージョン1は、私がブログに残したスクショから2016/8/12と判明しました。バージョン2は2016/8/16ですので、わずか4日で変更されたことになります。

何かライセンスなどで問題があったのかもしれません。

以降は、当時書いた内容と同一です。試せてませんが、UniWebをインポートすれば後はバージョン1と同じ手順で動作確認が可能と思います。

=====================================


先日、Unity Technologiesより、新しいアセット「Speech To Text」が発表されました。

f:id:Takyu:20160815085521j:plain


最近、UWPやHoloLens関連でCortanaを調べていたり、

magicbullet.hatenablog.jp

magicbullet.hatenablog.jp

Androidなど他OSでの音声認識エンジンをUnityで使う方法を調べていたので、せっかくなのでSpeech To Textについても調べてみました。


=================================

目次

1. Speech-to-Textとは?

2. 準備

2-1. アセットインポート

2-2. サービス登録

3. サンプルの動作確認

4. ソースコードの構成

5. その他Tips

6. 終わりに

=================================

1. Speech-to-Textとは?

Unity Technologies社が2016/8/12(現地時間)に公開したアセットです。価格は無料です。

何ができるの?

「SpeechをTextに」という言葉通り、喋った音声をテキストにすることができます。

Provides a wrapper for several speech-to-text solutions and a sample scene that compares text transcriptions from each API.

とあるように、既存の音声認識エンジンをUnityで使えるようにしたアセットです。

サンプルシーンでは、4種類の音声認識エンジンを使って、同時に認識結果を表示できます。

「既存の音声認識エンジン」はどんなもの?

以下の4種類です。

(1) UnityEngine.Windows.Speech

Unity5.4から標準搭載されたエンジンです。

f:id:Takyu:20160815095736j:plain

情報がないのでCortanaとの違いがわかりませんが、WindowsOS用の認識エンジンと思われます。

ネットワークの接続を切ると、下記のようなエラーが出て実行できないため、ネットワーク接続は必須です。

f:id:Takyu:20160815095757p:plain

他エンジンと異なり、唯一API Keyなどの指定が不要です。

ただし、感覚的には認識精度はあまり高くないと感じました。



(2) Google Cloud Speech API


Googleが提供する様々なサービスの総称「Google Cloud Platform(GCP)」の一つです。

マイクから取得した音声を音声データに変換し、それをPOSTすることで、認識結果の文字列をjson形式で受け取ります。

POST用の音声データ変換には、SoX(Sound eXchange)というOSSを使います。

色々見ていると、Pythonでの使い方紹介が多い印象です。

なお、Google Cloud Speech APIは60日までは無償利用可、以後は利用体系に応じて料金がかかります。



(3) IBM Watson Speech to Text

IBMが提供する様々なサービスの総称「Bluemix」の一つです。


[補足]
BluemixとWatsonの関係について明確に書いてある記述がありませんでした。
しかし、IBMのBluemixのサービス一覧紹介サイトに「Watson AlchemyAPI」があり、

アプリ内で自然言語処理とコンピューター・ビジョンを利用して、世界の会話、文書、写真を深く理解できるようにします。

とあるので、Bluemixの一部と解釈しました。


実際、Watson Speech to Textの使用にはBluemixアカウントが必要なので、解釈はそんなにずれてないと思いますが、違っていたらご指摘いただけると助かります。



(4) Wit.ai

botとの会話ができるサービスです。


Wit.aiについては、下記がわかりやすかったです。

bita.jp

上記を参考に解説すると、Wit.aiは、自分で定義した会話文に基づいてシナリオを進行できるサービスです。

なので、記事の中にもある通り、最初に自分でシナリオを定義していく必要があります。


【上記ブログより引用したシナリオの例】

1.「天気教えて?」→bot「オーケーオーケーどこの天気だい?」
2.「ロンドン」(地域はどこでも可)→bot「そこは晴れてるよ」


Wit.aiのHPおよび使い方の解説記事を見ていくと、botとの会話はテキストベースであり、ユーザ側の会話のきっかけにはテキスト入力or音声が選べます。
(今回のUnityアセットは、ここの音声入力のみを使っています)


ところで、蛇足ですが、Wit.aiとあるので、AI(Artificial Intelligence)的な要素はどこだろうと疑問に思ったのですが、上記ブログの最後で定義した言葉と多少ずれても会話ができる、という記載がありました。

また、下記のブログによると、シナリオ作成時に、会話に使えそうな候補を次々出してくれるそうです。


qiita.com

ということで、私はこの辺りがAIと解釈しました。

2. 準備

2-1. アセットインポート

(注) Unityのバージョンが5.4以上である必要があります。

2-1-1. Watson SDK

まずはUnityでプロジェクトを作り、アセットストアからSpeech-to-Textを入手してインポートします。

インポートすると、いきなり多数のエラーが出ます。

f:id:Takyu:20160815095906p:plain


これはWatson Developer Cloud Unity SDKが入っていないためで、ReadmeにもWatsonサイトから入手してください、という記載があります。

SDKはここから入手できます。

github.com

2016/8/15時点では、unity-sdk-0.3.0.zipが最新版でした。

これを解凍するとunity-sdkというフォルダが生成されるので、Watsonというフォルダ名に変更します。

中身はこのようになっています。

f:id:Takyu:20160815100633p:plain

このWatsonフォルダをAssets直下にコピーします。ここまで進めると、Unityプロジェクトのフォルダ構成はこのようになり、先ほどのエラーが消えます。

f:id:Takyu:20160815101126j:plain

なお、Watson SDKをインポートすると、さらに新しいエラーがでます。

f:id:Takyu:20160815101617p:plain

これは、TouchScriptというアセットがないので削除します、というエラーです。

TouchScriptがなくてもシーン実行ができるし、TouchScriptは今回のアセットの機能とは関係ないため、このまま続けて大丈夫です。


ちなみに、WatsonSDKは、Speech-to-Textアセットのスクリプトの中で呼ばれています。

そのため、もしWatsonを使わない場合であっても、

・とりあえずSDKをインポートする

・関連部分を全部コメントアウトする

のどちらかが必要です。

2-1-2. SoX

SoXとは、Sound eXchangeという音声ファイル変換ツール(コマンド)です。

元々Linux系の中で有名なコマンドですが、Windows系でも使えるようになっています。

今回はここから14.4.2を入手しました。

sourceforge.net

入手したsox-14.4.2-win32.zipを解凍し、Assets/StreamingAssetsフォルダの中に、新しくThirdParty/SoX/Windowsというフォルダを作ります。

ここにsox-14.4.2-win32フォルダの中身をそのまま入れます。

f:id:Takyu:20160815103031p:plain


これで、インポート作業は完了です。


2-2. サービス登録

使いたいサービスに登録します。ここは先ほどのインポート時とは異なり、使わないサービスは登録しなくても大丈夫です。

なお、今回の検証では、このアセットが音声からテキスト変換する既存サービスのWrapperということがわかったので、IBM Watsonの検証は実施しませんでした。

そのため、Watsonのサービス登録や動作確認はできていませんが、本ブログの2-1の作業が終わっていれば、Google Speech APIと同様の手順により、APIusername/passwordを取得すれば動作すると思います。


2-2-1. Google Cloud Speech API (Non Streamingの場合)

(1) まずはサイトにアクセスし、「コンソールへ移動」をクリックします。

cloud.google.com


f:id:Takyu:20160815104040j:plain

(2) Googleアカウントでログインすると、ポータル画面が表示されます。ここで、API Managerを選択します。

f:id:Takyu:20160815104309p:plain


(3) 検索フォームで「Speech」と入力します。Google Cloud Speech APIが検索候補に出てくるので選択します。

f:id:Takyu:20160815104429p:plain

(4) 画面中心の上付近で「有効にする」を選択します。
(下記の画像は「有効にする」を選択後なので「無効にする」と表示されていますが)

f:id:Takyu:20160815104547p:plain


(5) 続けて、認証情報の登録を行います。下記の画面から「認証情報に進む」を選択します。

f:id:Takyu:20160815104946p:plain

指示に従って登録していきます。

APIを呼び出す場所、については、色々な種類がありましたが、今回は「その他のUI」を選択しました。


f:id:Takyu:20160815105214p:plain

次は APIキーを生成します。今回は名称をTestとしました。

リクエストを受けるサーバ IPアドレスについては、とりあえず空欄でも大丈夫です。


APIキーが生成されたら、Unityに戻ります。Hierarchy Viewの

Canvas/ SpeechToTextServiceWidgets/ GoogleNonStreamingSpeechToText にあるコンポーネントAPI Keyをコピペします。

f:id:Takyu:20160815105411p:plain

これで、Google Speech APIをNonStreamingで使用する準備が完了です。

2-2-2. Google Cloud Speech API (Streamingの場合)


Google Cloud Speech APIAPI Keyを登録すると、ポータル画面に「認証情報」という項目が追加されます。

これをクリックすると、このように認証情報を作成する画面が出てくるので、「サービスアカウントキー」を選択します。

f:id:Takyu:20160815110111p:plain

すると、

・ App Engine default service account
・ Compute Engine default service account

という二種類の形式を選択する画面になります。それぞれの違いは調べられていませんが、今回のサンプル検証ではApp Engineを選択して動作しました。

キーファイルはjsonとP12と二種類の形式が選択できますが、今回はJSON形式を選択します。

処理を進めていくと、json形式の証明書ファイルを入手できます。
(ブラウザ設定を変えていなければ、Downloadフォルダに生成されます)

このファイルの名称をcredentials.jsonと変更し、Unity側の

Assets/StreamingAssets/GoogleStreamingSpeechToTextProgram

のフォルダにインポートします。

f:id:Takyu:20160815110755p:plain


これで、Google Speech APIをStreamingで使用する準備が完了です。

2-2-3. Wit.ai

Wit.aiのサイトにアクセスします。

f:id:Takyu:20160815111228j:plain

githubFacebookでログインし、表示されたポータル画面の右上にある"+"マークを選択して、New Appを選択します。

f:id:Takyu:20160815111439p:plain

App作成画面になるので、名称、公開範囲を設定して + Create Appします。

f:id:Takyu:20160815111612j:plain


続けて、作成したApp画面の右上付近にあるSettingsを選択します。

f:id:Takyu:20160815111754p:plain

表示されたページの真ん中付近にある、API DetailsにServer Access Tokenという項目があります。

ここで表示されている文字列をコピーします。

f:id:Takyu:20160815112148p:plain

あとは、Unity側で、

f:id:Takyu:20160815112401p:plain

Canvas/ SpeechToTextServiceWidgets/ WitAiNonStreamingSpeechToTextのコンポーネントAccess Tokenを指定すれば完了です。

3. サンプルの動作確認

[前提]

・インターネットに接続されている

・マイクが接続されている

なお、動作確認は、

Windows 10 Pro
・Unity 5.4.0f3 Personal

で実施しました。


speechToTextComparison.unityを開き、シーン実行して、「Start Recording」というボタンを押してから好きな言葉をしゃべってみると、このように、複数のエンジンを同時に使って結果を比較できます。


現時点だと、Google Speech APIが日本語対応できてないのと、Watsonの検証をしていないですが、Wit.aiの精度が一番高いように見えます。

4. ソースコードの構成

サンプルシーンを使って、簡単ですが動きを見てみます。

f:id:Takyu:20160815114329p:plain

まず、画面構成についてです。

サンプルシーンはこのように左上の"Start Recording"というボタン、左側のテキスト、右側の6つのScroll Viewから構成されています。

左側のテキストは認識精度を高めるためのオプションのようですが、日本語では意味がなさそうなので今回は使っていません。


では動きを説明します。

Start Recordingボタンを押すと、音声取得状態になります。

このとき、SpeechToTextCpomparisonWidgetクラスでは

OnRecordButtonClicked()
→StartRecording()

のように呼ばれます。

StartRecording()はこのような処理が実行されています。

f:id:Takyu:20160815114737p:plain

foreachの中にある、m_SpeechToTextServiceWidgetsという変数は、それぞれのサービスオブジェクトであり、

serviceWidget.StartRecording();

によって、各サービスで音声認識処理を開始しています。

各サービスは、いずれもSpeechToTextServiceクラスを継承しており、StreamingかNonStreamingかでさらに継承の対象が異なります。

クラス間の関係図をまとめるとこうなります。

f:id:Takyu:20160815122456p:plain


また、きれいに描けてないですが、メソッドの呼び出しはこのような関係図になります。

f:id:Takyu:20160815122504p:plain


5. その他Tips

5-1. 対応OSは?

Readmeには、Windows OS環境で動く、と書かれています。

Webサービスなので、本来他のOSで動かないということはないですが、たとえば今回のGoogle Speech APIを使用するために、それぞれ認識対象の音声ファイルをSoXで作成しています。

これはOS依存なので、このままではiOSAndroidでは動かず、基本的にWindows限定と考えるのがよさそうです。
(SoXMac版の提供もあるので、Macでも動くかもしれません)

Watsonはわかりませんが、Wit.aiについても、Google Speech APIの処理と同じ処理で音声ファイルを取得しているので、SoX依存の可能性があります。


そのため、基本的にはWindows(Mac)用と考えたほうがよさそうです。


5-2. Streaming と Non Streamingの違いは?

一般的かはわかりませんが、ここでは下記の意味で使われていました。

Streaming :
Start Recordingボタンを押してから指定時間(default:15sec)の間に認識した言葉を、逐次テキストで表示する

Non Streaming :
Recordingボタンを押してから指定時間経過後かStop Recordingボタンを押すまで音声を録音し、録音終了後にサービスに問い合わせして、認識結果をテキストで表示する


そのため、Non Streamingを使うと、Recordingが終わるまでは画面が変化せず、終了後数秒経ってから初めて画面に認識結果が表示されます。


5-3. 使わないサービスを無効化する方法は?

使用しないサービスは、Canvas/SpeechToTextComparisonWidget オブジェクトのコンポーネントから調整できます。

たとえば、今回私はWatsonは使わなかったので、下記のようにSpeech To Text Service Widgetの配列Sizeを6から4に変更し、Watsonオブジェクトを外しました。

f:id:Takyu:20160815103536p:plain

シーン上では6つのScroll Viewが出たままになりますが、Watsonのサービスを使わなくてもエラーなく実行可能です。

5-4. Google Speech APIを日本語化する方法は?

現時点で不明です。Unity側のソースコードではロケール指定がなさそうでした。
一方、Google Speech APIのポータルでも、言語設定に関する設定項目を見つけることができませんでした。

ただ、Pythonベースで試された方は、日本語のテキストを表示できていたので、本来は日本語対応していると思われます。

私もまだコードや設定項目を詳しく見たわけではないので、見つけられたらここに追記したいと思います。


6. 終わりに

このアセットは、あくまで音声をテキストに変える、という機能をUnityで使うためのWrapperです。

各サービスはそれ以外の機能もたくさんありますが、このアセットの目的と異なるので、当然それらをUnityで使うことはできません。

個人的には、音声認識のためだけに各サービスを新規契約するのは、オーバースペックな印象を持ちました。


今回のアセットを調べた動機の一つに、別途Android向け音声認識をUnityで使う方法を調べていたというのがあります。

今回のアセット「Speech-to-Text」は、モバイル用途ではなさそうなので、自分が調べていた方法は引き続き活用できそうです。

Android系の音声認識をUnityで使う方法については、まとめたら別途ブログにしたいと思います。

Unityモデルの見た目を調整する方法をまとめました

Unity UnityAssets PhotoShop

3Dモデルのアセットを使うとき、見た目をもう少し整えたいなと思うことがあります。

「Unity きれいな表現」、「Unity 見た目」などで調べると色々と情報が出てくるのですが、自分の持っているモデルに直接適用できるかがよくわかりませんでした。

そこで、Shader周りの実践も兼ねて検討したことをまとめてみました。

「Asset Storeで買ったモデルの見た目を変える」が今回の目的なので、Asset Storeでモデルを買いました。

使ったモデルは、Urban City Sceneというアセットです。

タイトル通り、都会の街のようなシーンが得られます。

f:id:Takyu:20160807161525j:plain


このアセットの中にあるコンビニ?のようなモデルを使って見た目を変えてみました。

================================
以後、今回使ったモデルを「コンビニ」と呼びます。
================================


まず、Slow_Mart_Area_WHOLEというコンビニモデルだけを表示させます。

f:id:Takyu:20160807162445j:plain


色々と調整して、最終的にこうしました。

f:id:Takyu:20160807162645p:plain


(見た目の表現については好みもあるので、最初の方がよいということもあると思います)


以下、段階的に紹介します。

1. ShaderをStandardに変更

このアセットはUnity5以前に公開されており、Unity5で開くと、ShaderがLegacyに分類されています。

まず、ShaderをStandardにします。

ShaderのAlbedoの横にある色を適当に変更し、さらにその下のEmissionの色を指定すると、このように見た目を多少変更できます。

f:id:Takyu:20160807201746j:plain

2. 駐車用ポールを金属に変更

Unity5のStandard Shaderを使って、見た目を金属にします。

Unity社から、色々な見た目にするためのMaterialがセットになったサンプルアセット「Shader Calibration Scene」が出ているので、これを使います。


このアセットには、Shaderを使った表現に関するサンプルが多数入っています。
今回は、インポートするとAssets/PBSMetallic/Material の中にある、金属マテリアルのCopper(銅)を使いました。


このマテリアルをGround_Post51〜62のオブジェクトに適用するとこうなります。

f:id:Takyu:20160807202714j:plain


ちなみに、CopperのマテリアルはShader Calibration Scene がなければ使えないということはなく、Standard Shaderの調整でも同じものが作れます。

同じものを作る場合、下記のようにマテリアルを設定してください。


f:id:Takyu:20160807202913j:plain

3, 店舗外観にNormal Mapを割り当て

Normal Mapとは、Unity公式ページによると、モデル表面に凹凸、傷などを表現できる特殊なテクスチャです。

docs.unity3d.com


もう少しわかりやすく説明すると、テクスチャの面に対して垂直な(法線)ベクトルの情報であり、ポリゴンの頂点数を増やすことなく、テクスチャにより細かい表現力を与えることができます。


ここに、よりわかりやすい解説がありましたのでご参照ください。


Normal Mapは通常のテクスチャから作成可能です。作成方法は2種類あります。

(1) Photoshop で作成

(2) Webサービスを使う


(1)の場合は、下記に簡潔に書かれていましたのでご参照ください。

cubelic3.jp


(2)の場合、例えば以下を使うことでNormal Mapを取得できます。

cpetry.github.io

使い方はシンプルで、①の場所に画像(jpg,png,tiffなど)をドロップし、②のDownloadをクリックするだけです。

f:id:Takyu:20160807204953j:plain

作成したNormalmapについて、私の場合はpng形式で保存しました。(他の形式でよいかは未確認です)

次に、Normal mapを該当するShaderのオプションで指定します。

f:id:Takyu:20160807205220j:plain

すると、このような警告が出るので、Fix Nowをクリックします。

f:id:Takyu:20160807205353p:plain


そうすると、NormalmapがShaderに反映され、このようになります。


f:id:Takyu:20160807205523j:plain


冒頭で紹介した初期状態の画像と比較すると、壁や窓の部分の精細さが増しているのが判別できます。


4. 地面にNormal Mapを割り当て

コンビニの構成オブジェクトにあるCar_Parkというオブジェクトを選択します。

これについているテクスチャ"Car_Park_COL"を使って、同じように法線マップを作成し、設定します。


ここまで実行すると、このようになります。

f:id:Takyu:20160807205942j:plain


地面に凹凸がついたことで、地面とお店部分に遠近感を感じられるようになりました。

5. 屋根部分にテクスチャを割り当て

4までで終わってもよかったのですが、この状態だと「Slow Mart」と書かれた屋根部分だけがのっぺりした印象だったので、ここも少し変えてみることにしました。


まず、前提としてこのアセットはほぼ全てのテクスチャがpsd形式のため、PhotoShopがあると色々編集しやすくなります。

屋根部分のテクスチャもpsd形式のファイルであり、PhotoShopで開くとこのように見えます。

f:id:Takyu:20160807210521j:plain


今回は、このpsdファイルを使って、一番左の赤とその隣の青の見た目を変えました。

まず、①選択ツールを選んでから、赤い部分をマウスで選択します。

選択した箇所で右クリックし、②「選択範囲をコピーしたレイヤー」を選択します。


f:id:Takyu:20160807211146p:plain


すると、右下の「レイヤー」というタブに新しくレイヤーが追加されます。

同様に赤の右隣の青でも同じ処理を実行して青の部分だけ別レイヤーにします。

すると、このように元のレイヤーに対して2つのレイヤーが追加されます。


f:id:Takyu:20160807211605p:plain

ここで、上記画像の「レイヤー2」、「レイヤー3」のそれぞれで右端をダブルクリックすると、このようなメニューが出てきます。

f:id:Takyu:20160807211937j:plain

順番の通り、①テクスチャオプションにチェックを入れ、②任意のテクスチャを選び、③OKをクリック、と進めると、レイヤー全体に選択したテクスチャの模様がつきます。

これを赤と青のレイヤーの両方で実施すると、このようになります。

f:id:Takyu:20160807212159j:plain

このテクスチャを屋根部分のオブジェクト"Mart_TOP"に割り当てると、このようになります。

f:id:Takyu:20160807212329j:plain


これは、冒頭紹介した画像と同一です。


なお、先ほどPhotoShopで加工したテクスチャからNormalMapを作成し、"Mart_TOP"に割り当てると、このようになります。

f:id:Takyu:20160807212457j:plain

屋根部分の色調整が間に合ってないので元の赤っぽい色から変わってしまっていますが、どちらがよいか、は好みになりそうです。

補足

モデル単体を変える以外にも、Skyboxで全体を変える方法もあります。

今回初めて知ったのですが、Materialを作って、SkyBox/ProceduralというShaderを指定すると、このMaterialをSkyboxに割り当てることができます。

たとえば、このような見た目を簡単に作ることができます。


f:id:Takyu:20160807215718j:plain

設定画面は下記の通りです。

f:id:Takyu:20160807215909p:plain

SkyTintとGroundの色を調整することで、見た目をかなり変化させることができます。

終わりに


見た目の調整は、PC・スマホ向けゲームやVR向けコンテンツの開発時に必要となります。

見た目の調整方法を紹介する記事はなかなか見つからず、あってもCubeやSphereベースの解説だったので、実際に試してみました。

色々試した結果、金属マテリアルとNormal Mapの調整が最も影響があることがわかりましたが、模様の少ないテクスチャにはNormal Mapは効きづらいはずなので、その場合にどうするか、なども考える必要があると思いました。

他にどんな方法があるか、についても体型的に整理してみようと思います。

また、金属マテリアルはモバイルで使うとどれくらいの負荷なのかは気になります。

その辺りは別の機会で検討してみたいと思います。

UnityのuGUI部品をカスタマイズできるアセット「GameStrapUI」について調べてみました

UnityAssets Unity

最近HoloLens系やUWPの開発が多かったですが、別途試していたアセット調査についても目処がついたのでまとめてみました。

今回は、UGUIの画面部品をデザインできるUI - Gamestrapです。

f:id:Takyu:20160729071114j:plain


このアセットについては、買う前と買ったあとで少し勘違いがありました。


[買う前にできると思っていたこと]
・uGUI用部品を任意の形にデザインできる

[実際にできること]
・uGUI用部品をカスタマイズできる。

(You Tubeに紹介ビデオがあります。このブログ執筆時に改めて見てみると、uGUI部品のカスタマイズについて紹介しているので、純粋に私の勘違いですね。。)


「カスタマイズ」の範囲はわりと幅広いです。

グラデーションをつける、shadowをつける、準備されたアイコンに差し替える、などです。

また、当初勘違いしてた任意の形のアイコンについては、psdファイル(Photoshop形式)で数十種類準備されており、これをuGUIのImageコンポーネントに割り当てれば変更可能です。


では使い方を解説します。


===========================

目次

1. アセットの入手

2. アセットのフォルダ構成

2-1. Examples

2-2. Showcase

3. uGUI部品をカスタマイズする

3-0. 前提

3-1. Button

3-2. Slider

3-3. Input Field

3-4. Scroll List

4. 終わりに

===========================

1. アセットの入手

ここから入手します。$20です。

まずはUnityプロジェクトを作ります。Assetを読み込むとAssetsフォルダ以下に、GameStrapUIというフォルダが追加されます。

2. アセットのフォルダ構成

f:id:Takyu:20160729093806p:plain

代表的なものだけ解説します。

2-1. Examplesフォルダ

スタートメニュー画面の例が多数収録されています。

これらはGameStrapUIによるアイコンカスタマイズと、元々入っているpsdファイルのアイコンを組み合わせて作られています。

Examples/Complete Projects/Screensの中にある、

GamePlay、Levels、Main Menu は全て簡単な画面遷移が入っています。

たとえば、Main Menuというシーンを実行して、Aboutというボタンをクリックすると、製作者のSNS情報が載っている小さいウインドウが表示されます。

◼︎Aboutボタンクリック前

f:id:Takyu:20160729093859p:plain

◼︎Aboutボタンクリック後

f:id:Takyu:20160729093932p:plain


また、Examples/Screen Examplesの中には、様々なアイコンの配置例が格納されています。

たとえば、Example 10はWindows8.1のような配置です。

f:id:Takyu:20160729094037p:plain

Example/Tag Exampleフォルダにもシーンがありますが、これは実行しても変化しなかったのでよくわかりませんでした。


このようにExampleフォルダは、自分で何かのメニュー画面を作りたいときの参考になると思います。

2-2. Showcase

4つのシーンがあり、フォントの種類、アイコンの種類、カラーパレットの色セット、ボタンの枠の種類を見ることができます。

Colors and Effect

f:id:Takyu:20160729094113p:plain

Fonts

f:id:Takyu:20160729094134p:plain

Icons

f:id:Takyu:20160729094145p:plain

Shape

f:id:Takyu:20160729094205p:plain


これらの基本部品を使ってuGUI部品をカスタマイズすることになります。

それ以外のフォルダについてはGameStrapUIを動作させるためのスクリプトなどですので、確認は不要です。

3. uGUI部品をカスタマイズする

3-0. 前提

まず、GameStrapUIで作る画面部品はuGUIの部品なので、Canvasオブジェクトの子になってないとGame ViewやScene Viewに表示されません。

そこで、まずGameObject/UI/Canvasを選択してCanvasを生成します。

次に、Canvasを選択した状態で、GameObject/GameStrap UI/を選びます。

f:id:Takyu:20160729220110j:plain


GameStrapUIの画面部品には、Button,Slider,Scroll,InputFieldなどがあります。

3-1. Button

3-0の手順でButtonを選ぶと、このようなButtonが生成されます。

f:id:Takyu:20160729220154j:plain


ちなみに、uGUIの通常のボタンを表示させるとこうなります。

f:id:Takyu:20160729220223j:plain

この時点では、単に背景のImageが異なるだけですが、GameStrapUIにはImageとFontを変更するために、
GameStrap UI Kitというツールが入っています。

GameStrap UI Kitは、Hierarchy Viewでカスタマイズしたい画面部品を選択してから、

Window / GameStrap UI Kitを選択すると開けます。


GameStrap UI Kitは、Palette、Effects、Fontの3つに分かれています。
それぞれ、一つずつ選択することで、uGUIの部品をカスタマイズすることができます。

3-1-1. Palette

ボタンの色を変更します。Normal(通常時)、Hilighted(マウスが当たったとき)、Pressed(クリックされた時)、Disabled(離れたとき)
のように、それぞれの状態で色を指定することができます。

ためしに変更してみます。

f:id:Takyu:20160729220514p:plain
通常状態です。Normalに対応しています。


f:id:Takyu:20160729220543j:plain
マウスカーソルを置いた状態です。Hilightedに対応しています。



f:id:Takyu:20160729220612j:plain
ボタンをクリックした状態です。Pressedに対応しています。

Disabledというオプションもありますが、これはつかってない箇所の色、という意味です。3-3のScroll Listの解説を参照ください。


3-1-2. Effects
Gradiation

ボタン全体にかけることができます。



このように、Effectsの設定メニューでGradiationにチェックを入れると、色の選択メニューが出てきます。
f:id:Takyu:20160729220909j:plain

(わかりやすくするため、Paletteの色は白に戻しています)


ここで好きな色を指定してから、Apply Effect to Selectin をクリックすると、Gradiationがかかります。

f:id:Takyu:20160729220939j:plain


ちなみに、Nameという箇所には自分で好きな名前をつけることができますが、ここの名前はEffectの内容に影響しません。

たとえば、NameをShadowとして、Gradationの設定だけしても問題ありません。

Shadow

文字と図形全体に対して影をつけることができます。

f:id:Takyu:20160729221008j:plain


先ほどのGradiationとセットで使うことも可能です。

f:id:Takyu:20160729221031j:plain

Mirror

鏡で投影したような表現ができます。

f:id:Takyu:20160729221118j:plain

投影する側のGradiationも別途設定できます。ここでは、ピンク色に近い色を足してみました。

また、ここでSkewというオプションをつけると、文字および図形全体を少し斜めにできます。
Skewの値を調整することで斜め度合いを変更できます。

3-1-3. Font

これは解説不要と思います。指定したフォントに変更できます。


3-4. Slider

基本的にはButtonの場合と同様です。

f:id:Takyu:20160729221150p:plain


ちょっと変ですが、先ほどのようにGradientやMirrorも設定できます。

f:id:Takyu:20160729221209p:plain

3-3. Scroll List

こちらはPaletteのメニューがScroll専用になっています。

f:id:Takyu:20160729221240j:plain

ここまできてDisalbedオプションの意味がわかりました。
画面部品で表示の余っている箇所を描画する色のことですね。

3-4. InputField

InputFieldの場合も、Paletteの色を変更するとButtonのときと基本的に同じ挙動を示します。

項目 場所
Normal InputFieldの枠
Pressed InputFieldの中で左クリック
Hilighted InputFieldのテキスト"Enter Text.."

f:id:Takyu:20160729221431j:plain

Effectsについては、ShadowとMirrorは効きましたが、Gradientは効きませんでした。



ちなみに、GameStrap UI Kitは、通常のuGUIのButtonにも効きました。

f:id:Takyu:20160729220745j:plain

ここをみると、Unity Editor拡張の機能を使って、選択したuGUI部品に対してコンポーネントを追加しているようですね。





4.終わりに

他にも画面部品がありますが、今回紹介したものと使い方の原理は同じなので省略しました。

ボタンの微妙な色合いや見た目の変化、というのはuGUIの通常機能では変更できないので、uGUI部品をいい感じの色合いに調整したい時、とても便利なアセットだと思います。

UNIBOOKのLT大会でHoloLensについて登壇しました

Unity UWP HoloLens

先日、下記の勉強会で登壇させていただきました。

peatix.com


今回は、UNIBOOKの概要、勉強会の内容、今回の発表内容について書いてみました。


前提:UNIBOOK

UNIBOOKとは、Unityに関する技術Tipsを集めた本です。2014年の8月にコミケC86で初めて出版されて以来、夏コミ、冬コミで一つずつバージョンを上げて出版されてきました。

最新版はUNIBOOK5で、これはコミケではなく、技術書典という2016年6月に秋葉原で開催された技術書イベントで出展されました。

それぞれ、下記から購入可能ですので、ご興味ある方はご覧ください。

tatsu-zine.com

tatsu-zine.com

tatsu-zine.com

tatsu-zine.com

tatsu-zine.com

それぞれ数百ページあり、一般の書籍では得られないTipsが詰まっているのでオススメです。

勉強会の内容

今回の勉強会は、UNIBOOKの執筆経験者が登壇し、以前書いた内容のアップデートについて話をするパートと、LT大会の2部構成になっていました。

参加者は4,50名ほどでした。

残念ながら急遽用事ができてしまい、前半のほとんどが参加できなかかったのですが、講演概要を見ると、色んな分野で深いお話をされてたようです(聞きたかった、、)。

後半のLT大会では、

Sublime Text、Atomのようなエディタの話から、C#の最新動向などの技術的なお話

・プロジェクト開発を炎上させない方法や、フリーランスとして顧客先とお付き合いするときのRedmineの活用方法

など、内容が様々で面白かったです。

また、Unity Technologies Japanの安藤さんからは、Unityの技術情報を一覧化したキュレーションサイト「Unityまとめ」が紹介されました。

unity-matome.com

これは安藤さんが、Unityに関する記事を書いているブログをRSSで集め、Unityの記事と判断されたブログを紹介しているものです。

Unityに関するブログはたくさんあるのにどうやって判別しているのかというと、、


なんと、各記事がUnityに関するものかどうかは安藤さんご自身の判断ということでした。

(たしかに私もUnity以外のことを書くときもありますし、必要ですね)

ちなみに、私のブログも紹介いただいておりました。ありがとうございます。




LT大会前にはピザをいただきました。
(LT大会というとピザが多いイメージですよね)


今回の発表内容

Peatix にはこんな紹介文を出させていただきました。

『HoloLensエミュレータでのアプリ開発方法』 @WheetTweet
2016年3月以降、Microsoftが販売を開始したHoloLens(Developer Edition)が話題になっています。
HoloLensを使うと、実際の風景を見ながらCGを重ね合わせて見る「Mixed Reality」を体験できます。
今回の講演では、UNIBOOK5でご紹介した、HoloLensのアプリをUnityで開発するための方法を紹介します。 また、UNIBOOK5からのアップデートとして、HoloLens向けに作ったMR体験の例を紹介します。


お話させていただいた内容はタイトルの通りです。
元々UNIBOOK5に、HoloLensアプリ開発用のエミュレータ環境構築方法を執筆しており、前半は執筆内容のダイジェストを発表しました。

後半は、更新としてCortanaとUnityを連携させる方法と活用例を紹介しました。

これは下記のブログで解説した内容のまとめです。

magicbullet.hatenablog.jp

magicbullet.hatenablog.jp



登壇資料はSlideShareにて公開しています。よろしければご参照ください。

www.slideshare.net


また、勉強会の発表中にお見せした動画はYou Tubeに挙げました。


スライドにも入れましたが、今回のCortanaとUnityの連携方法は、こんな風にHoloLens以外にも使えると考えています。

f:id:Takyu:20160725224937j:plain


ブログには、引き続き色々な内容を書く予定ですが、そろそろDigital Contents Expoに備えてコンテンツの内容も決めていきたいと思っています。

MacのVisual Studio CodeとUnityを連携させる方法(2)

Unity Mac Visual Studio

以前、Visual Studio CodeをUnity用のテキストエディタとする方法を紹介しました。

magicbullet.hatenablog.jp


しかし、本日このような記事を見つけました。

qiita.com

(ブログ執筆者の@SilverTats様、ありがとうございます)


自分の環境で試したら、たしかにインテリセンスが効かなくなっていました。

f:id:Takyu:20160723230555p:plain

(Unityの"Input"が候補に出て来ない)

アップデートの通知が来た時にVisual Studio Codeのバージョンを上げてた気がするので、それが影響したのかもしれません。

最近開発時はWindows10ばかりだったので気づくのが遅れました。。


最終的に動くようにできましたが、以前紹介した方法と変わっていたので、改めて方法を紹介します。

環境

Mac OSX 10.11.5
Unity 5.3.5f1
Visual Studio Code v1.3.1


1. Unity側で、Visual Studio Codeを使うように設定を変更する

これは以前と同じです。まず、Unity -> Preference を開きます。

f:id:Takyu:20160416114222p:plain

External Script Editor でBrowseを選択し、Macのアプリケーションフォルダから、Visual Studio Code.appを選択します。

一度選択すると、上記画像のように、Codeという項目が追加されチェックが付きます。

2. Visual Studio CodeのExtensionを変更する

上記ブログに記載の通り、Visual Studio Code and Unity のHPを開くと、

f:id:Takyu:20160723230312j:plain

というメッセージが追加されています。

この記載によると、バージョンが新しいVisual Studio Codeは、C#認識用のプラグイン(Extensionsと呼ばれてます)も新しくなっており、これがUnityのC#に対応していない、ということのようです。

そこで、手動でExtensionsを変更します。

2-1. C# Extensionsをアンインストール

Visual Studio Codeを開き、cmd + p を同時に押します。

f:id:Takyu:20160723230840p:plain

すると、赤枠のように、小さいコマンドプロンプトが出ます。

ここで、

ext install csharp

と入力してEnterキーを押します。

f:id:Takyu:20160723231023p:plain


すると、このようにC#関連のExtensionsが表示されます。

f:id:Takyu:20160723231512j:plain

"C#"の箇所にある「拡張機能のアンインストール」を選択すると、新しいプラグイン"C# Extensions"がアンインストールされます。

2-2. Legacy C# Support をインストール

Legacy C# Supportは、omnisharp という名前のExtensionsです。先ほどと同じように、

ext install omnisharp

を入力してから、出てきたメニューで「インストール」を選びます。私の環境では検討中に一回入れてたので、いったん「拡張機能のアンインストール」を選択してから再度インストールしました。

f:id:Takyu:20160723233803p:plain



以上、1と2が、最初のみ設定する作業です。


3. VSCode.csを入手し、プロジェクトに追加する。

これはエディタ拡張用のスクリプトで、Visual Studio Codeとの連携にはこれが必須になりました。

Unityでプロジェクトを作るたびに追加する必要があるので、これが一番大きな変更です。



以下のPlugins/EditorというフォルダからVSCode.csを取得します。

github.com

このファイルを、自分が使っているUnityプロジェクトに追加します。

Plugins/Editorフォルダを作り、この中に入れればOKです。


これで準備完了です。


あとは、Unityを起動してプロジェクトを作り、任意のスクリプトを作った状態で、UnityのメニューからVisual Studio Codeを開きます。

f:id:Takyu:20160724000227p:plain

具体的には、Assets -> Open C# Project In Code を選択します。


以前紹介したときは、Visual Studio Codeを開き、「フォルダを開く」からUnityのプロジェクトのトップディクレトリを指定していたので、ここも以前と変わっています。


これでC#のファイルを開くと、インテリセンスが効くようになりました。

f:id:Takyu:20160724000432p:plain

補足

補足1

C# Extensionsをアンインストールすると、このようなメッセージが表示されます。

f:id:Takyu:20160724000653p:plain

今のところ、Unity用のエディタとして使う分には、ここで指定されている「ms-vscode.csharp」のインストールは不要です。

補足2

VSCode.csを追加したことで、Unity PreferencesにVSCodeというメニューが追加されています。

f:id:Takyu:20160724000857p:plain


ここで最初に設定されている内容を変更しなくても使用できたので、今のところはここはそのままでよさそうです。

終わりに

Visual Studio Codeは進化が早いようですね。
以前よりひと手間増えてしまいましたが、個人的にはやはりMono DevelopよりVisual Studio Codeの方が軽くて使いやすいので、引き続きMacで開発する時はCodeを使おうと思っています。