キーボード・ゲームパッドだけじゃない!Adobe XDとデバイスを連携させてハードウェアをプロトタピングしよう! #AdobeXD #AdobeIO

Adobe I/O Creative Cloud UI/UX & Web

こんにちは研究開発本部の竹岡です。
5月にアップデートされたAdobe XDで、キーボードやゲームパッドのボタンでプロトタイプを操作できる機能「キーボード、ゲームパッドのトリガー」が新たにサポートされました。
この機能によって、様々なデバイスとAdobe XDを連携させることが可能になり、ハードウェア製品やIoTデバイスのプロトタイピングにAdobe XDを活用できるようになりました。
本記事ではSONY MESHとAdobe XDを連携させる方法を紹介しますが、同様の方法で様々なデバイスと簡単に連携させることが可能です。
今回は「SONY MESHとAdobe XDを連携させる方法」に合わせて「機能が開発されるまでの裏話」も紹介します。

様々なデバイスで Adobe XDを操作しよう!

それでは早速、SONY MESHとAdobe XDを連携させる方法を紹介します。
先日、micro:bit で Adobe XD を操作する方法を紹介していただきました!
(デバイス連携の可能性についてコメントもいただき、嬉しいです。感激です。)
koyokoさんありがとうございます!!

SONY MESHでAdobe XDを操作しよう!

そして、自分(竹岡)もSONY MESH https://meshprj.com/ とRobotJS https://robotjs.io/ を組み合わせて動かしてみました。

やり方は koyokoさんの例と同じく、Adobe XDでキーボードのトリガーを設定し、 MESHのカスタムブロックを介したキーボードイベントを設定するだけです。
今回はmicro:bit の代わりにMESH、Seri2Keyの代わりに Node.jsと RobotJS というnode packageを利用します。

全体の構成はこのようになっています。図の右から順にXD、Node.js、MESHをそれぞれ設定していきましょう。

MESHとAdobe XDの接続

Adobe XDのファイルを作成し、キーボードのトリガーを割り当てる

それぞれのアートボードへ遷移するように、キーボードのトリガーを割り当てましょう。
(アートボードの数だけ設定するので、少し大変です)

  • FRONT: U
  • BACK: D
  • LEFT: L
  • RIGHT: R
  • TOP: E

素材はこちらのAdobe Stockのイラストを利用しました

Adobe XDのキーボードトリガーの設定
Adobe XDのキーボードトリガーの設定

Node.jsとRobotJSをセットアップする

Node.jsとRobotJSのインストールについてはNode.js公式サイト https://nodejs.org 、RobotJS公式サイト https://robotjs.io/ などをご覧ください
PC側でMESHのリクエストを受け取るためにhttpを利用し、RobotJSの keytap でキーボードのイベントを発生させています。
たとえば http://127.0.0.1/f にアクセスされたときに キーボードの “f” を押下するイベントが発生します。

const http = require('http');
const robot = require("robotjs");
http.createServer(function (req, res) {
// remove first '/'
const char_input = req.url.substring(1,2);
console.log(char_input);
if(char_input != ""){
robot.keyTap(char_input);
}
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end(char_input);
}).listen(8888, '0.0.0.0');

MESH SDKでMESHのカスタムブロックを作成する

MESHの動作に合わせて、httpリクエストを送信するカスタムブロックを作成します。
(詳細は MESH SDKの公式サイト https://meshprj.com/sdk/ をご確認ください。)
本例ではMESH SDKのリファレンスマニュアルの「天気予報タグ」のサンプルを参考に作成しました。
作成したMESH Blockのダウンロード
サンプルコードで指定されているカスタムブロックのIPアドレスには、Adobe XDが動作するPCのIPアドレス(172.20.10.10の箇所)やポート番号(8888の箇所)など、使用するPCのネットワーク設定や上記のNode.jsのソースコードを確認して適宜変更してください。

MESH SDKでカスタムブロックを作成する
MESH SDKでカスタムブロックを作成する

上記の様なブロックをAdobe XDのキーボードイベントと同じ数だけつくります。
(自宅でも動かしてみたかったので、IPアドレスだけを変更し、アイコンの色を変えて、社内用・自宅用のブロックを作成しました)

MESH SDK で作成したカスタムブロック
MESH SDK で作成したカスタムブロック

MESHアプリでカスタムブロックを用いたレシピを作成する

先ほど作成したカスタムブロックとMESHのブロックとつなげていきます。
(本例では「動きタグ」の向きと連動するようにしたいので、「動きタグ」の「向きが変わったら」の設定を利用しています。

iPhone の Mesh アプリで動きタグとカスタムブロックのレシピを作成

SONY MESHでAdobe XDを動かしてみる

いよいよ動かします!
Node.js (RobotJS) を動かして、Adobe XDのプレビューを立ち上げ、iPhoneのMESHアプリを立ち上げてMESHを手に持って動かすと、こんな感じでAdobe XDの画面が変化します。
お疲れ様でした!

「ゲームパッド」ですが、ゲーム以外のプロトタイピングでもAdobe XDを活用してほしい!

Adobe XDのキーボード・ゲームパッドトリガーのサポートの検討が始まったのは昨年の4月頃です。
当初はコンソールゲーム(家庭用据え置き型のゲーム)の開発現場での利用を前提に、ゲームパッドのトリガーをXDに追加するかどうかを検討していました。
ところが、プロトタイピングの事例を徹底的に調べてみると、ゲームパッドやキーボードのトリガーはコンソールゲームのデザインだけでなく、様々な場面のプロトタイピングに応用できることが分かりました。それは「ボタンを持つ機器」、いわゆる「ハードウェア」の画面のプロトタイピングです。「ボタン」と「画面」の両方を持つハードウェアはコンソールゲームの他にも、テレビ、オーディオ、カーナビゲーション機器、カメラ、医療用機器など様々なものがあります。

これらのハードウェアの開発においては(リモコンなどの)ボタン操作と画面デザインを連動させることが重要になりますが、試作や開発の段階ではハードウェアが手元にない状態で、デザインの作業をしなければならない場面も少なくありません。調査を進めていく中で、そのような状況ではボタンの代わりに、キーボードやゲームパッドのイベントを代用しプロトタイピングを行いながら画面をデザインし、ハードウェアがデザイナーの手元にそろった段階で、最終的に製品と統合していくという流れがあることがわかってきました。

当初はゲームの開発に焦点を当てて検討を始められたゲームパッド・キーボードのサポートですが、最終的には「プロトタイプをAdobe XDの外から制御可能にすることで、活用の場面が増える」という調査結果をふまえて開発が始められました。

そんなわけで昨年の春に準備した企画書です。
あれから1年、リリースすることができました!

2018年4月ごろに準備した企画書

(おまけ)Adobe XDでゲームのキャラクターを動かそう!

Adobe XDで遊んだついでに、CC道場 #259 XD News スペシャル:2019年上半期最大のアップデート、Adobe XD 19の新機能を解説!(39:52ごろ)や Howard Pinsky: “Working with key/gamepad triggers in Adobe XD”(16:23ごろ・英語)にて好評だった、Adobe XDでゲームキャラクターを操作するデモファイルについて解説します。
※自分はアニメーションやモーションデザインのプロではないので、あくまで参考程度にお願いします。

今回利用したAdobe Stockの素材は下記の通りです。

アートボードの構成

全体としてはこんな感じです。スプライトアニメーションをAdobe XDで作成した様な感じですね。
それぞれの行が1つのボタンアクションに対応したアニメーションになっています。

各ボタンアクションに対応したアニメーションを設定
各ボタンアクションに対応したアニメーションを設定

ボタンの操作に対応するアニメーション

各アクションのアートボードは「時間トリガー」が設定されたアニメーションです。
時間トリガーの値は0.03-0.05secぐらいが良いと思います。(絵にもよると思いますが、0.07sec程度では「もっさり」した感じになると思います。)
例えば□(四角)ボタンを押下したときのアニメーションを見てみましょう。

ボタンが押下された時のアニメーションを「時間トリガー」で設定
ボタンが押下された時のアニメーションを「時間トリガー」で設定

キャラクターの配置

アートボードにキャラクターを配置するときは「足」や重心などあまり動かない箇所を基準に配置すると良いです。
(本例では「かかと」が動かないように配置しました。)

キャラクターの位置合わせ
キャラクターの位置合わせ

コントローラーのトリガーの設定

アイドル状態(待機状態、ボタンを押していない状態)のアートボードに表示されたコントローラーに、それぞれのボタンのインタラクションが設定されています。
(コントローラーの絵があると、設定が楽です。)

ゲームパッドトリガーを設定する
ゲームパッドトリガーを設定する

アイドル時(待機状態)のアニメーション

アイドル時(待機状態)のアニメーションを設定すると、よりゲームらしくなります。
下の動画はキャプチャした際にうまくいかず、微妙にタイミングがずれてしまいました。

左:アイドル時のアニメーション無し、右:有り

アイドル時のアニメーションの有無の違い
アイドル時のアニメーションの有無の違い

作ってみよう!

オリジナルキャラクターも、上記の手順を使えばコントローラーで動かすことができます。
絵を書くのが苦手な方はAdobe Stock で game character と検索すると、ゲームキャラクターのスプライト画像がでてくるので、お好きな画像を選んでオリジナルの作品をつくってみてください。

Adobe XDの作品や利用例を教えてください!

本記事ではデバイスと組み合わせたり、キャラクターを動かしたりする例を紹介しましたが、みなさまの作品・利用例を #AdobeXD をつけてつぶやいていただけると嬉しいです!

お待ちしています! 

POSTED ON 2019.06.17