強火で進め

このブログではプログラム関連の記事を中心に書いてます。

Google Maps API がゲームで活用可能に。 Unity にも対応


昨夜、 Google Maps APITwitter アカウントから以下の様なツイートが行われました。

Google Maps API を使って現実世界をゲーム内に構築できる、しかも Unity にも対応との事です。

Google Maps APIs  |  Google Developers
https://developers.google.com/maps/gaming/


作成事例

紹介ページには作成事例の動画も上がっていました。


まだ「セールスにご連絡下さい」な状態になっていますがページの最後にこの様な記述も有るので恐らく GDC でもう少し詳細が公開されるのでは無いでしょうか?

関連情報

Google Map APIとUnityで“リアルワールドゲーム”開発が容易に - ITmedia NEWS
http://www.itmedia.co.jp/news/articles/1803/15/news061.html

GitHub で自分のリポジトリを Fork (フォーク)する方法

※実際には Fork は出来ませんでしたがほぼ Fork と同様な処理は可能でした。

GitHub で自分の Repository を Import しようと、該当リポジトリの Fork ボタンを押してみました。

しかし、このボタンでは別の Organization (別に所属している組織のリポジトリへインポート)へは可能みたいですがデフォルトのリポジトリと同じ所にはこのボタンから Fork 出来ないみたいです。

次に試したのこちらの「Import repository」。

こちらはインポート処理の途中でパスワード入力が促されたので入力しましたが以下の様に表示されエラー。

Your old project requires credential for read-only access
We will only temporarily store them for importing.

何度かログインを試した後に「もしかして、二要素認証(Two Factor Authentication / 2FA)を使っているのが問題かな?」と気が付き、 Personal access tokens のページでトークンを作成し、パスワード欄に入力すると無事インポート出来ました。

IBM Watson の Visual Recognition を Unity から使う方法

Visual Recognition は画像を解析し、どのようなものなのかをテキストで返すサービスです。

[サービス情報]

Visual Recognition - IBM Cloud
https://console.bluemix.net/catalog/services/visual-recognition

[公式のチュートリアル]

概説チュートリアル
https://console.bluemix.net/docs/services/visual-recognition/index.html#-


[公式のドキュメント]

unity-sdk/Scripts/Services/VisualRecognition/v3 at develop · watson-developer-cloud/unity-sdk
https://github.com/watson-developer-cloud/unity-sdk/tree/develop/Scripts/Services/VisualRecognition/v3

アプリの作成手順

Visual Recognition を使った Unity アプリの作成手順を解説します。

基本的な共通で必要な作業はこちらの記事で解説しています。
こちらが未読の場合には先にそちらを確認し、 IBM Cloud アカウントの作成や IBM Watson Unity SDK のインストール作業などを済ましておいて下さい。

サーバ側の作業

まずはサーバ側の設定作業を行います。

こちらのページ経由でサーバにプロジェクトを作成します。
ページの右下に有る「作成」のボタンを押して、プロジェクトを作成して下さい。

新規資格情報を作成します。

デフォルトの状態のままで「追加」ボタンをクリック。

「資格情報の表示」をクリックして、展開。


後で使うのでここの情報をメモっておきます。
note の部分にはユーザへのメッセージが入る様です。「5分後に有効になります」などのメッセージが入っていたりしてました。
※キャプチャ画像の note は一度削除してから作り直したので異なるメッセージに成っています。

左側のタブから「管理」に切り替え、ツールを起動します。

ツールの初回起動時には API Key の入力が求められるので先程メモした中に有る api_key の値を入力します。


するとこの様な画面に切り替わります。ここでは画像解析の学習を行わせた分類器(Classifier)を作成します。新規に作成する為に「Create classifier」ボタンをクリックします。

学習用のデータを以下の様に設定します。画像データは IBM Watson Unity SDK をインストール済みの Unity のプロジェクトの場合、 Assets/Watson/Examples/ServiceExamples/TestData/visual-recognition-classifiers に有ります。
ここでは giraffe_positive_examples.zip と negative_examples.zip を使って設定する事にします。

※学習データの zip ファイルは最低「正しいもの」2つ、もしくは「正しいもの」1つ、「間違っているもの」1つ準備する必要が有ります。

作成が完了するとこの様な表示に成ります。

赤枠の部分で画像ファイルを選択するとテストできます。分析したい画像を選択し、テストをしてみましょう。

ここでは Assets/Watson/Examples/ServiceExamples/TestData/visual-recognition-classifiers フォルダに有る giraffe_to_classify.jpg と turtle_to_classify.jpg を使ってみます。


ちゃんと判定出来ている事が確認できます。

Unity での作業

サーバ側の作業が終わったので次に Unity 側の作業を行います。
Unity のプロジェクトを新規作成し、 IBM Watson Unity SDK を Import 。
Assets/Watson/Examples/ServiceExamples/Scripts/ExampleVisualRecognition.cs を開き、以下の部分を見つけます。

ここに先程メモした url と api_key の値を記述します。

public class ExampleVisualRecognition : MonoBehaviour
{
    private string _apikey = null;
    private string _url = null;

Scene に新規に GameObject を作成し、このファイルをアタッチし、実行して下さい。

すると 〜Attempting to get all classifiers というメッセージの後に以下の様なメッセージが表示されます。

{"classifiers":[{"classifier_id":"\u52d5\u7269_693641681","name":"\u52d5\u7269","status":"ready"}]}

ここで表示されているものは自作した分類器(Classifier)を全て取得する API のレスポンスです。
「classifier_id」が「\u52d5\u7269_693641681(動物_693641681)」、「name」が「\u52d5\u7269(動物)」で有る事が確認できます。

classifier_id は他の API で使用するのでここの値で有る事を覚えておいて下さい。

関連情報

[Watson] Visual Recognition Tool を利用して画像解析を試す - Qiita
https://qiita.com/y-some/items/6addf597a81a48f04d59

エディタ拡張でちゃんと Retina 対応する方法

こちらのプルリクによると EditorGUIUtility.pixelsPerPoint を使うのが良いみたいです。

Unity-Technologies / cinematic-image-effects / Pull request #17: [tcg] Retina support for Unity 5.4+ (color wheels). — Bitbucket
https://bitbucket.org/Unity-Technologies/cinematic-image-effects/pull-requests/17/tcg-retina-support-for-unity-54-color/diff

返す値が 2 なら Retina

Unity - Scripting API: EditorGUIUtility.pixelsPerPoint
https://docs.unity3d.com/ScriptReference/EditorGUIUtility-pixelsPerPoint.html

マウスの情報についてはこちら。

Unity - Scripting API: HandleUtility.WorldToGUIPoint
https://docs.unity3d.com/ScriptReference/HandleUtility.WorldToGUIPoint.html

Unity - Scripting API: HandleUtility.GUIPointToWorldRay
https://docs.unity3d.com/ScriptReference/HandleUtility.GUIPointToWorldRay.html

使用例1 - CustomEditor の OnSceneGUI()

CustomEditor の OnSceneGUI() で EditorGUIUtility.pixelsPerPoint を考慮しないで描画処理を記述すると Retina 対応のディスプレイではこの様な描画結果になります。

Scene View のサイズが 800x500 の時に 400x100 のボタンを描画したにも関わらず、横幅一杯のサイズのボタンが描画されています。

ちゃんと EditorGUIUtility.pixelsPerPoint を考慮したプログラムは以下の様になります。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;

[CustomEditor(typeof(OnSceneGUISample))]
public class OnSceneGUISampleEditor : Editor {
    Rect ScaledRect(Rect rect)
    {
        var s = EditorGUIUtility.pixelsPerPoint;
        rect.x /= s;
        rect.y /= s;
        rect.width /= s;
        rect.height /= s;
        return rect;
    }

    void OnSceneGUI()
    {
        var sceneCamera = SceneView.currentDrawingSceneView.camera;
        var cameraRect = sceneCamera.pixelRect;

        Handles.BeginGUI();
        Rect labelRect = ScaledRect(new Rect(5, 5, cameraRect.width-10, 40));
        GUI.Label(labelRect, string.Format("size:{0}x{1}", cameraRect.width, cameraRect.height));
        var buttonRect = ScaledRect(new Rect(0, 100, 400, 100));
        if (GUI.Button(buttonRect, "Test"))
        {
            Debug.Log("Push!");
        }
        Handles.EndGUI();
    }
}

この場合には正しく、画面の半分のサイズで描画されている事が確認できます。

使用例2 - クリックした位置に赤い SphereGizmo を表示

using UnityEngine;
#if UNITY_EDITOR
using UnityEditor;
#endif

public class Test : MonoBehaviour {
#if UNITY_EDITOR
    bool debugClick = false;
    Vector2 debugClickPos;
#endif
    void Start()
    {
        // ここでは正しい値を返さない
        // Debug.Log(EditorGUIUtility.pixelsPerPoint);
    }
    void Update()
    {
        // ここでは正しい値を返さない
        // Debug.Log(EditorGUIUtility.pixelsPerPoint);
    }
#if UNITY_EDITOR
    void OnDrawGizmos()
    {
        // ここでは正しい値を返す
        // Debug.Log(EditorGUIUtility.pixelsPerPoint);

        if (Event.current.type == EventType.MouseUp)
        {
            var mousePosition = Event.current.mousePosition;
            var ray = HandleUtility.GUIPointToWorldRay(mousePosition);
            debugClickPos = ray.origin;
            debugClick = true;
        }

        if (debugClick) {
            Gizmos.color = Color.red;
            Gizmos.DrawWireSphere(debugClickPos, 0.5f);
        }
    }
#endif
}

関連情報

Scene ビューで Gizmo を使う - 強火で進め
http://d.hatena.ne.jp/nakamura001/20120929/1348925143

IBM Watson の Conversation を Unity から使う方法

Conversation は自然言語による会話を行う機能を提供するサービスです。

[サービス情報]

Conversation - IBM Cloud
https://console.bluemix.net/catalog/services/conversation

[公式のチュートリアル]

概説チュートリアル
https://console.bluemix.net/docs/services/conversation/getting-started.html#gettingstarted

[公式のドキュメント]

unity-sdk/Scripts/Services/Conversation/v1 at develop · watson-developer-cloud/unity-sdk
https://github.com/watson-developer-cloud/unity-sdk/tree/develop/Scripts/Services/Conversation/v1

Watson Conversation Service詳細資料
https://www-01.ibm.com/marketing/iwm/dre/signup?source=mrs-form-9715&S_PKG=ov54914

アプリの作成手順

Conversation を使った Unity アプリの作成手順を解説します。

基本的な共通で必要な作業はこちらの記事で解説しています。
こちらが未読の場合には先にそちらを確認し、 IBM Cloud アカウントの作成や IBM Watson Unity SDK のインストール作業などを済ましておいて下さい。

サーバ側の作業

まずはサーバ側の設定作業を行います。

こちらのページ経由でサーバにプロジェクトを作成します。
ページの右下に有る「作成」のボタンを押して、プロジェクトを作成して下さい。


次に「Launch tool」ボタンを押してツールを起動します。


「Create」ボタンをクリック。


「Title」と「Description」に適当なテキストを入力し、「Create」ボタンをクリック。

すると、この様な画面に切り替わります。ここで「Add Intent」をクリック。

Intent(Intents) にはユーザが行いたい行動を記述します。

以下の状態に成る様にテキストを追加後、「←」をクリックして戻ります。

次に Dialog を作成します。 Dialog タブをクリックした後に「Create」をクリック。

初期状態ではこの様に成っており、この2つの Node の間にノード(処理)を追加して行きます。

「ようこそ」の Node の「︙」をクリックした後に「Add node blow」をクリック。


If bot recognizes: にはこの Node がどの様な条件の時に処理が行われるかを記述します(要するにif文の条件の記述に当たります)。
今回は先程定義した「おみくじ」の Intent を使います。 # を入力すると Intent の一覧(まだ1つしか定義してないので1つしか出ないですが)が表示されるのでそこから「おみくじ」を選択。これで「おみくじ」が入力された時にこの Node の処理が実行されます。

次に条件が当てはまった時のレスポンス(返信)のメッセージを Then respond with: に記述します。
以下の状態に成る様にテキストを追加後、「✕」をクリックして閉じます。

ここで動作テストをします。右上の吹き出しアイコンをクリック。

「Enter something to test your bot」の部分に「おみくじ」と3回入力してみて下さい。
すると「大吉」「中吉」「吉」という順番でレスポンスが返ってきます。

上部の「Clear」ボタンを押すともう一度、最初から試せます。もう一度やっても「大吉」「中吉」「吉」の順番で表示される事が確認できます。

これではおみくじの面白さが無いのでランダムになる様に変更します。
「おみくじ」の Node をクリックして開き、「Set to Random」のリンクをクリック後、もう一度「おみくじ」と入力してみて下さい。すると今度は完全にランダムな結果が返ってきます。

「ようこそ」と「その他」の Node の記述についてもここで解説しておきます。
もし、途中で間違ってこれらの Node を削除しても、同様の記述をすれば復元出来ます。

「その他」の Node の処理がここで出てきてなかったので確認する事にします。
「Try it Out」のウィンドウを開いて「abc」と3回入力して下さい。

「abc」は「おみくじ」の条件に当てはらないので「その他」の Node の処理が実行されます。この Node ではレスポンスのテキストが2つ定義されているのでそのテキストが順番に表示されます。

次に Entity を作成します。「Entities」タブに切り替えて、「Add entity」をクリック。

以下の状態に成る様にテキストを追加後、「←」をクリックして閉じます。

「おみくじ」の下に Node を追加。

以下の状態に成る様にテキストを追加後、「✕」をクリックして閉じます。

「食事」まで確定した時にその先の流れを記述する為に、「食事」の 子 Node を作成。

食事 Node のレスポンス、「何が食べたいですか?」の返信が「カレー」だった時の処理を記述。 Entity は @ を記述すると一覧表示されます。 @ を入力後、「食べ物」を選択して下さい。

カレー Node と同じ階層に Node を追加し、カレー以外が入力された時の処理を記述。

@(食べ物) という記述で食べ物の Entity でマッチした食べ物が差し込まれます。ちなみに「@食べ物 美味しよね。」と Entity 名の後に空白を入れる場合には () は省略できます。

動作確認。

別のパターンでの動作確認。

牛めし」と入力したにも関わらず、「牛丼」として処理が行われている事が確認できます。
自然な会話になる様に「牛めし」と返す様に修正します。
この様な記述でユーザが入力した内容をそのまま返信のテキストに差し込めます。

修正されているか確認。

Intent と Entity の違い

ここで Intent と Entity の違いを解説しておきます。
ざっくり言うと Intent は設定したものから多少ずれている入力でも Watson 良い感じに判定して意味を理解してくれます。
Entity は厳密にマッチしていないとダメです。

例えば「食事」の Intent はこの様に設定されているにも関わらず、「めし食べたい」と入力しても同じニュアンスだと判断してくれます。

「食べ物」の Entity には「カレー」が含まれていますがひらがなで「かれー」と入力した時には「カレー」だと判断してくれません。

※ここで「おみくじ」はこんな記述だけで良かった事に気が付く(^_^;)

これで会話(bot)の作成は完成です。

諸々の情報を確認

後で Unity 側で使用する諸々の情報を確認しておきます。

こちらのいずれかをクリックして Workspace 一覧に戻ります。

「View Details」をクリックし、 Workspace ID をメモしておきます。

ダッシュボードのページに戻り、今回作成した Conversation をクリック。
※デフォルトの名前から変更していなければ「Conversation-」で始まるプロジェクト名のものです。

「サービス資格情報」のタブに切り替え、「資格情報の表示」をクリック。

Unity での作業

サーバ側の作業が終わったので次に Unity 側の作業を行います。
Unity のプロジェクトを新規作成し、 IBM Watson Unity SDK を Import 。

Assets/Watson/Examples/ServiceExamples/Scripts/ExampleConversation.cs を開き、以下の部分を見つけます。

ここに先程メモしたものを記述します。

public class ExampleConversation : MonoBehaviour
{
    private string _username = null;
    private string _password = null;
    private string _url = null;
    private string _workspaceId = null;

_questionArray の内容を今回想定しているものに変更。

    private string[] _questionArray = { "食事", "カレー" };

_conversation.Message() に指定してある最初に送信するメッセージを「おみくじ」に変更し、
AskQuestion() の数を今回のものに合うよに減らします。

Examples() を以下の様に変更して下さい。

    private IEnumerator Examples()
    {
        if (!_conversation.Message(OnMessage, OnFail, _workspaceId, "おみくじ"))
            Log.Debug("ExampleConversation.Message()", "Failed to message!");

        while (_waitingForResponse)
            yield return null;

        _waitingForResponse = true;
        _questionCount++;

        AskQuestion();
        while (_waitingForResponse)
            yield return null;

        _questionCount++;

        _waitingForResponse = true;

        AskQuestion();
        while (_waitingForResponse)
            yield return null;

        Log.Debug("ExampleConversation.Examples()", "Conversation examples complete.");
    }

Scene に新規に GameObject を作成し、このファイルをアタッチし、実行して下さい。
すると Console に会話のやり取りが表示されている事が確認できます。

今回は基本的な使い方しか解説していませんが Conversation もっともっと色々な機能が有ります。
全て解説していると膨大な量になるのでここでは解説しませんが他の機能についてもドキュメントを参考に使ってみて下さい。

関連情報

各種参考情報のリンク集
https://console.bluemix.net/docs/services/conversation/resources.html#-

Watson Conversation Service でチャットボットを開発-デモンストレーション

Watson Conversation の使い方を学ぶ
http://www.ibm.com/developerworks/jp/cognitive/library/cc-watson-chatbot-conversation/index.html

Conversation Car Dashboard デモの日本語版
https://github.com/makaishi2/car-dashboard-jp/blob/master/README.md

IBM Watson でコーディングのできないド素人がチャットボットを作ってみた - IBM THINK Watson - Japan
https://www.ibm.com/think/jp-ja/watson/chatbot-conversation-1/

Watson ConversationのTutorialを日本語でやってみた (前編) - Qiita
https://qiita.com/sukusuku_watson_editorial_room/items/2ab2b4738e31b276b91e

Watson ConversationのTutorialを日本語でやってみた (後編) - Qiita
https://qiita.com/sukusuku_watson_editorial_room/items/e3111d2ccce996db7feb#_reference-3c2d36bef8ac05a322c4

「平成29年度メディア芸術クリエイター育成支援事業 成果プレゼンテーション」に行ってきました

平成29年度メディア芸術クリエイター育成支援事業 成果プレゼンテーション | Peatix
https://20180223creator.peatix.com/

会場は LODGE というオシャレなコワーキングスペースの一部を貸し切った会場で開催されました。

LODGE -Yahoo! JAPANのオフィス内に誕生した日本最大級のコワーキングスペース-
https://lodge.yahoo.co.jp/

ビルの前にはオシャレなオブジェも有りました。

和田 淳 『いきものさん』

「いきものさん」は沢山のいきものが出てくるアニメとゲームの作品の様です。

こちらで Unity が使われてるという情報を見かけたのでこのイベントに来ました。

初回面談レポート:和田淳 | メディア芸術クリエイター育成事業
http://creatorikusei.jp/?p=4265

まずはアニメ。こんな感じです。





男の子がいきもの達と一緒にダイエットを頑張る動画の様です。

ゲームの方はスペースキーを押すと男の子が腹筋をするというゲームでした。
押す長さやタイミングなどでいろいろと隠し要素が発動していました。
将来的にはスマホでのリリースを予定しているそうです。








有る隠し要素で男の子が溶けたりもします。

是非、子供に遊んで貰いたい様なゲームでした。

澤村 ちひろ 『短編CGアニメーション「空のゆめ」』

柔らかなタッチのアニメですが主人公3DCGだそうです。

PVも公開されています。
https://www.youtube.com/watch?v=1jl_kogD-2s:video:w500



花売り?のおじさんが良い感じ。




制作に使用した道具。


ノガミ カツキ+渡井 大己 『Rekion Home Voice』

講演前の作品展示を見ただけの時には「ん?これ最近、 YouTube で見かけるスマートスピーカー同士で会話させてみたってネタ?」という感想でしたが講演を聴くととても面白い作品だ!!と感想がガラリと変わりました。

スマートスピーカー同士で会話させるというネタでは有るのですがそれを考えさせられる場所で使って鑑賞者にうったえる内容となっていました。

植物を飾るかの様にレイアウトされたスマートスピーカー

ベンチで井戸端会議をするスマートスピーカー


人間が留守な間のペットとスマートスピーカーの関わり。
写真撮れてないないですがスピーカーから音が出てても気にせずうろちょろしてるネコが登場する場面やスピーカーが作動させたロボット掃除機に驚いた猫が逃げていくシーンなども有りました。

ロボットと会話するスマートスピーカー



後藤 映則 『Rediscovery of anima』

さまざまな手法でのアニメーション。
展示物を見ただけではまったく「???」な作品でしたが講演を聴くとその視点の面白さや斬新さに驚かされました。

「toki-」
人間の歩行と言った連続動作を2次元的に輪郭化し、3次元に展開。CGでドーナツ状に繋ぎ、3Dプリントすることで時間を形骸化する作品。目に見えない時間を実体化することで働きとの関係を鮮明にし、時間の性質や美しさを捉えようとしている。

人が歩くアニメーションをモーフィングで作成し、3Dプリンタでドーナツ状に出力。

スリットから照射した様な縦に細長い光を当てると当たった部分にアニメーションが発生。


ダンス。複数の光を当てると複数のアニメーションが登場。

(YouTube を検索してみたら動画が有りました)

歩く。

ダンス。

アニメーションが大きく発展したのは19世紀。

その19世紀で使えた道具だけを使って、もしかしたらその時代に存在した可能性があるアニメーションの手法を新たに作る。

自宅で太陽光を当てて試してみた所。

洞窟壁画。順番に表示するとアニメーションするパターンが記述されている壁画が存在している。
この時代にもアニメーションが有ったのでは?

同じくこの時代に有ったものだけでアニメーション装置を作成。素材は軽石と麻紐。
2パターンのモーフィングを2つの石の間に張った麻紐で作成。「羽ばたく鳥」「両手を上げる人」「子供から大人になる」というアニメーションパターンを作成。

会場での実演。




こちらの作品、講演後のアドバイザーからの作品評価のコメントにもハッとさせられました。その言葉はこちら

「太陽光を使った場合、もしかしてこれ(麻紐を使ったアニメーション装置)は世界初の完全にシームレスなアニメーションなのでは」

現在のアニメーションは複数枚の絵を連続再生する事をでアニメーションしている様に見せていますが、確かにその組み合わせでは完全に連続したシームレスなアニメーションを実現しています。

イベント終了後

来た時には気が付かなった像をパチリ。

ビル前のオブジェ、夜に観るとまた違った印象でした。

Oculus アプリで Unity の物理処理をネットワーク越しに同期を取る方法

Networked Physics in Virtual Reality: Networking a stack of cubes with Unity and PhysX | Oculus
https://developer.oculus.com/blog/networked-physics-in-virtual-reality-networking-a-stack-of-cubes-with-unity-and-physx/