日本都市（東京・大阪・名古屋・札幌・福岡・京都・新潟・金沢・広島）向けARシーンの制作から配信、体験方法をご紹介します。

日本都市向けARシーンを制作する方法

都市テンプレートを選択する

STYLY Studio にアクセスしてください。
STYLY Studioをご利用になるときは、アカウント登録をしてください。

「シーンを作成」ボタンをクリックします。
テンプレート一覧が表示されます。

「新規シーン」ボタンをクリック

都市テンプレートを選択してください。
シーンのタイトルを入力して、「作成」ボタンをクリックしてください。

都市テンプレート一覧

• 札幌大通り公園テンプレート（北海道）
• 東京新宿西口テンプレート（東京都）
• 東京渋谷駅テンプレート（東京都）
• 新潟古町テンプレート（新潟県）
• 新潟万代島テンプレート（新潟県）
• 金沢駅テンプレート（石川県）
• 名古屋駅テンプレート（愛知県）
• 京都駅テンプレート（京都府）
• 大阪芝田町テンプレート（大阪府）
• 大阪道頓堀テンプレート（大阪府）
• 大阪城テンプレート（大阪府）
• 広島駅テンプレート（広島県）
• 福岡天神駅テンプレート（福岡県）

都市テンプレートを選択する

都市テンプレートを使って、都市空間に紐づけられたARシーンを作る

STYLYではデフォルトで用意されているアセット（3Dモデル、エフェクトなど）を使ってARシーンを制作できます。
自分で作成した3Dモデルや画像/動画を使うと、よりオリジナリティのあるシーンを作ることができます。

STYLY Studioで用意されているアセットの使い方や、自分で作成した素材をSTYLY Studioで使う方法は、以下の記事をご参照ください。

取り込めるアセットを理解しよう

Unityで作ったシーン、プレハブも使えます

UnityからSTYLYにプレハブとシーンをアップロードする方法

アセットに動きをつける方法はこちら

STYLY Modifier（モディファイア）マニュアル

アセットをStudioに配置していきます。
配置場所に困ったら、建物の屋上や壁面にアセットを配置してみましょう。

配置方法に困ったら、建物の屋上や壁面にアセットを配置してみる

3D都市モデルはリアルスケール

3D都市モデルと現実世界の建物群との大きさは同じです。
STYLY Studioで配置した位置の通りに現実世界の同じ場所にアセットが配置されます

3D都市モデルと実際の建物と大きさは一緒

3D都市モデルはAR体験時に表示されない

3D都市モデルはAR体験時には表示されません。
3D都市モデルは現実世界での建物の当てとして使用します。

STYLY Studioの3D都市モデルは、AR体験時には見えない

体験時の見え方はYour Positionで確認する

Your Positionは人の目線でシーン内を見れます。
Studio画面右側の「reset position」クリックすると、Your Positionからの目線でARシーンを確認できます。

様々な角度や高さからシーンを制作すると体験するときの目線ではなくなっているため、ARシーン体験時に「イメージしてたのと違う」とならないようにしましょう。

Your Positionの目線から見たシーン

3D都市モデルがある場所であれば、どこからでもAR体験可能

都市テンプレートを使ったARシーンを体験するときは、3D都市モデルがある場所に行く必要があります。
各都市毎の体験範囲については、「都市テンプレートと同じ場所に移動してから体験する」をご覧ください。

Unityで制作したシーン・プレハブも使用可能

Unityで制作したシーン・プレハブをSTYLY Studioにアップロードする方法は、以下の記事をご覧ください。

UnityからSTYLYにプレハブとシーンをアップロードする方法

日本都市向けARシーン制作時の注意点

都市用アセットは削除しない

都市テンプレートを使ってシーンを作成すると、AR on Cityアセット・3D都市モデル・3D都市アンカーの3アセットがシーンに配置されます。
この3つのアセットは削除しないでください。削除すると、都市での体験ができなくなります。

削除禁止のアセット
・AR on City
・3D都市モデル
・3D都市アンカー

AR on City、Tokyo Shibuya Station、Tokyo Shibuya Station Anchorは削除しない

間違って削除した都市用アセットを戻す（復活）方法

削除した場合は、アセットセレクター画面を開いてFunctionからアセットを配置してください。
FunctionからAR on City・3D都市モデル・3D都市アンカーアセットを再配置できます。

AR on Cityを削除してしまった場合は、AR on Cityをクリックしてシーンに配置してください。
3D都市モデルを削除してしまった場合は、3D都市モデルから削除してしまった3D都市モデルをクリックしてシーンに配置してください。
3D都市アンカーを削除してしまった場合は、3D都市アンカーをクリックしてシーンに配置してください。

3D都市モデルと3D都市アンカーは、必ず同じ都市名のものをセットで使ってください。
Tokyo Shibya Stationの3D都市モデルを使う場合は、Tokyo Shibya Station Anchorを使用してしてください。

Skyboxをシーンに配置しない

都市テンプレートには、Skyboxを配置しないでください。
Environment配下にあるSkyboxはすべて使用しないでください。
Skyboxをシーンに配置すると、体験時にVRモードになってしまい、都市での体験ができません。

都市テンプレートを使う場合、Skyboxは使わない

AR on Skyと一緒に使用できない

都市テンプレートと「AR on Sky」アセットは一緒に使えない。
AR on Skyの使い方は、以下の記事をご覧ください

Skyセグメンテーション ARシーン 制作マニュアル

日本都市向け ARシーンを体験する方法

STYLYモバイルアプリをダウンロード、インストールする

iOS版STYLYアプリ ダウンロード先
https://apps.apple.com/jp/app/id1477168256

Android版STYLYアプリ ダウンロード先
https://play.google.com/store/apps/details?id=com.psychicvrlab.stylymr

日本都市向け ARシーン対応端末
https://developers.google.com/ar/devices
Depth APIサポート と記載されている端末のみ体験可能です

1.STYLYモバイルアプリを起動したら、マイページをクリックします。
2.ログインボタンをクリックして、ログインします。
3.制作中のシーン一覧が表示されますので、ARシーンをタップします。
4.ダウンロードボタンをクリックして、シーンを事前にダウンロードしておきます。

マイページ > ログイン > 都市空間ARシーンをタップ > ダウンロード（アップロード）しておく

都市テンプレートと同じ場所に移動してから体験する

制作に使用した都市テンプレートと同じ場所に移動してください。
東京渋谷駅テンプレートを使ったARシーンを体験する場合は、東京都渋谷駅前に移動してください。

都市の体験可能範囲は以下からご確認ください。

都市 体験場所一覧
札幌大通公園テンプレート体験範囲

東京渋谷駅テンプレート体験範囲

名古屋駅テンプレート体験範囲

京都駅テンプレート体験範囲

大阪道頓堀テンプレート体験範囲

天神駅テンプレート体験範囲

新潟古町テンプレート体験範囲

現地に到着したらSTYLYモバイルアプリを起動して、ARシーンの見るボタンをクリックします。

現地についたら、「見る」ボタンをクリックしてください。

周囲の建物にカメラを動かして、現在の位置を確認できると都市空間ARシーンが体験できます。

周囲の建物の上部にカメラを向けると、ARシーンが体験できます

AR体験場所は地上（地面の上）で実施すること

必ず地上でARシーンを起動してください。
建物の2階以上、橋の上でARシーンを起動すると、位置がズレます。

STYLYに関する質問、バグ報告、改善してほしい要望はSTYLY FORUMまで
https://jp.forum.styly.cc/support/discussions

ビジネス利用を希望のお客様は下記よりお問い合わせください。
https://styly.cc/contact

注意事項

以下のような状況では正常に動作しません

• 屋根のある場所
  • 室内・アーケード商店街・地下など
• 暗い場所
  • 夜かつ屋外照明の少ない場所（渋谷スクランブル交差点は夜でも非常に明るいため例外的に体験可能となっています）
• 水辺の近く
  • 川・池・湖・海などの水面反射があるところ

The post 日本都市向け ARシーン制作 マニュアル first appeared on STYLY.

STYLYリリースノート：STYLY-VR v2.9.2 (2021/12/21)

アップデートに合わせて「Light Probe」の機能がすでに実装されているテンプレートシーン、アセットをStudioで使えるようになりました。
テンプレートシーンには、Light Probeの機能に加えて、Reflection ProbeとLightMapも含まれていますので、ライティングが整ったシーンが作れるセットになっています。

さっそくSTYLY STUDIOでのテンプレートシーンの使い方を説明しながら、Light Probeの機能や、そのほかライティングの設定について説明していきます

テンプレートシーン一覧

Dim Museum

大理石を基調としたセットで、オブジェを自然なライティングで展示できるテンプレートです。後方にはキャプションを設置するスペースもあり、作品を集中して観覧してもらった後で展示の世界観を伝えることもできます。

テンプレートシーン「Dim Museum」

Crypt Light

壁面にカスタムアセットからご自身の画像を選択して展示できるテンプレートです。ヨーロッパ風の柱や天井のライトや影の質感が滑らかで、作品に集中して観覧してもらえるシーンになっています。

テンプレートシーン「Crypt Light」

Crypt Dark

Crypt Lightのテンプレートのダークバージョンです。作品の雰囲気に合わせてLightとDarkの2シーンを選択できるようになっています。ナレーションやBGMによって没入感を高める演出ができます。

テンプレートシーン「Crypt Dark」

今回のアップデートで使用可能になった「Light Probe」とは

「Probe」は英語で「調査」を意味します。Light Probeとは、シーンの空間内のライティングを区間ごとに事前にシミュレーションしておく設定で、シーンのライティングの情報を調査し格納しておく機能のことです。本来UnityやSTYLYはリアルタイムでライトのシミュレーションする設定になっていますが、負荷の兼ね合いで限定されたシミュレーションをしています。そのライトの情報を事前に空間に配置してしまうことでシミュレーションを軽くし、よりリアルなライトの設定をできる機能になります。

事前にライティングの情報をシーンの区間ごとに格納している

画像でLight Probeを設定していないシーンと設定したシーンの比較をしてみます。
Light Probeを設定することで、Point Lightなどシミュレーションに負荷のかかるライトを配置しなくても、その空間のライティングの情報を格納した設定をすることができます。

Light Probeなしのシーン。ディレクショナルライトの光が直接当たらない場所ではオブジェクトが背景とうまくなじまない。

Light Probeなしのシーン

Light Probeを設定したシーン。陰になった場所でもオブジェクトと背景のライティングがそれぞれ自然にマッチする。

Light Probeありのシーン

具体的には以下のような特徴が反映されています。

• 間接光などライティングの精度が上がり自然な見た目になっている。
• 事前にライトのシミュレーションがされておりシーンが軽くなっている。
• Unityを用いた場合、影の詳細度やレンダリング範囲を調整できる。

そのほかにもテンプレートシーンで設定されているライティング機能

LightMap

テンプレートシーンには「LightMap」も設定されています。
LightMapは、オブジェクトに当たっている光を事前にオブジェクトのテクスチャ上にマッピングし格納する機能です。特に壁や天井といった背景に適用できます。こちらもオブジェクトに当たっている光を事前にシミュレーションするためシーンが軽くなり、オブジェクトの見た目も自然になります。

以下はLightMapを設定していないシーンです。陰になっている部分にポイントライトなどを置かないと、暗い場所が出てきてしまいます。しかし、全体を自然に照らしながらシーンが重くならないポイントライトの設定は難しいです。

LightMapなしのシーン

以下はLightMapを設定したシーンです。部屋内のテクスチャが照らされている設定を、テクスチャ自体に保存しているので、軽量かつ自然な明るさにレンダリングされます。

LightMapありのシーン

Reflection Probe

さらに「Reflection Probe」という機能もテンプレートシーンに事前に設定されています。こちらは名前の通り、反射光のシミュレーションを取得しておける機能です。金属や大理石などの鏡面反射を綺麗に見せることができます。

以下はReflection Probeを設定していないシーンです。マテリアルやシェーダーを設定しないと、反射が不自然になってしまいます。

Reflection Probeなしのシーン

以下はReflection Probeを設定したシーンです。中央の鏡面のオブジェクトに周囲の物体が自然に映り込んでいます。またシェーダーの種類にもよりますが、シェーダーで随時シミュレーションするよりもシーンが軽くなりやすいため、複数配置する場合などでは軽量化が見込めます。

Reflection Probeありのシーン

テンプレートシーン・アセットの使い方

さっそく、実際に上記の機能がすでに実装されているテンプレートシーンを使ってみましょう。
今回はテンプレートシーンにすでにオブジェクトの配置されている「サンプルシーン」も準備されていて、そちらから使うこともできます。

テンプレートシーンの使い方

テンプレートシーンは、STYLY Studioから使用することができます。
STYLY Studioのご使用が初めてという方は、こちらのSTYLYスタートガイドをご覧ください。

テンプレートシーンを使うには、STYLY Studioでシーンを作成し、左上の赤枠で示した「Assets」を開きます。

STYLY Studioで「Assets」を選択

Assetの欄から「3D object」をクリックし、続けて「Featured」選択します。

3D object

Featured

Featuredを開くと、今回のテンプレートシーンが追加されています。
まずはDimMuseum Setの使い方を説明します。「DimMuseum Set」を選択します。

DimMuseum Set

DimMuseum Setを開くと以下のテンプレートがあります。「DimMuseum_room_sclupter」を選択します。

DimMuseum_room_sclupter

開くと以下のような見た目で表示されます。
今回はライティングの設定ができているシーンなので「Directional Light」のライトのアイコンを選択しオフにします。
これでテンプレートが開けます。

「Directional Light」をOffにする

続いて、実際にオブジェクトをテンプレートシーンに配置します。
今回はSTYLY Studioのカスタムアセットを配置してみます。
先程のように「3D object」をクリックし、続けて「Primitive」を選択します。

3D object

Primitive

「Change Texture Sphere」を選択し配置してみます。
今回は「Please upload an Image File」の欄にSTYLYのロゴを入れてみました。
鏡面反射の具合も見てみるために「Metalic」と「Smoothness」の値を1にしてみます。
設定ができたら、青い「ADD TO SCENE」を選択し、台座の上においてみてください。

Change Texture Sphere

今回は上記の赤枠のように設定してみます

また、オブジェクトの下に、「3D object > Featured > DimMuseum Set > Dim Museum Shadw Circular」と選んでいき、以下の画像の丸い影も台座の上に配置します。

「Dim Museum shadow circular」を選択し影を配置する

以下のように、鏡面のシミュレーションも反映されたオブジェクトをテンプレートの台座の上に配置できました。
※今回のテンプレートシーンではシーンに設置したオブジェクトに反射する物体の像は、仮想の物体の像になります。

ライティングや鏡面反射がシミュレーションされたオブジェクトを配置できた。

またキャプションとなるテキストを配置することもできます。
「3D object > Featured > DimMuseum Set」を選択すると、以下の「Dim Museum Screen Text」を選択できます。

「DimMuseum_ScreenText」を選択する

こちらの「Title text」と「main text」を入力し(英語のみ)「ADD TO SCENE」を選択すると、テキストのオブジェクトを作ることができます。

「Title text」と「main text」にテキストを挿入し「ADD TO SCENE」を選択する

このようにオブジェクトを作成・配置していくと、以下の画像のようにさまざまなタイプのオブジェクトにも、それぞれ自然なライティングを反映させられます。モデリングやフォトグラメトリをされる方はぜひご自身のモデルを配置してみてください。

色々なオブジェクトを配置して展示できる

DimMuseumと同様の手順で「3D object > Featured > Crypt Set」と選択すると、CryptLightとCryptDarkのテンプレートも使用できます。

こちらでは、Custom Assetから「Crypt_photoframe_wood」を選択すると、このテンプレートにあった額縁をつけた画像を展示することができます。

「Crypt_photoframe_wood」から額縁付きの画像を設置できる

以下の画像の手の部分の写真の箇所をご自身の好きな絵画や画像にして綺麗に配置することができます。

オリジナルの画像を設定したテンプレートシーンのイメージ

サンプルシーンの使い方

また、すでにサンプルのオブジェクトが配置ずみのサンプルシーンをご自身のアカウントにコピーすることもできます。
STYLY Studioにログインした上で以下URLをクリックすると、STUDIOの画面のシーン一覧に、サンプルシーンが追加されます。
先に配置イメージを確認したい場合や、影などの設定をそのまま使いたい場合はこちらを開いていただくと便利です

︎ DimMuseum_Sample URL

︎ Crypt_Light_Sample URL

︎ Crypt_Dark_Sample URL

ぜひSTYLY Studioで作ったシーンを公開してみてください。

今回はSTYLYに追加された新機能のLight Probeの説明と、それを利用したテンプレートシーン・アセットをご紹介しました。
ぜひご自身の3DCGや画像を展示して、ライティングの質感を試してみてください。
また、今後STYLY MAGAZINEではLight ProbeやLightMapをUnityで設定する方法も紹介していくので、ぜひそちらの記事もチェックしてください。

The post Light Probeを活用したテンプレートシーン/アセット マニュアル first appeared on STYLY.

*ここで扱うARヒューマンテンプレートとは、顔や足など特定の身体部位のみを拡張するARではなく、人間（被写体）を中心とした空間を拡張するようなARを指します。つまり体験を拡張する対象は、人間を中心に数メートルの範囲を想定しています。

身にまとうARヒューマンテンプレート使用時の様子

本記事では、2種類の制作パターンについて説明します。

あらかじめSTYLYで用意された「テンプレートを中心に制作する場合」と、「あなたのアセットを中心に制作する」場合の2種類です。

最後まで読み進めることで、ARヒューマンテンプレートを制作し、実際にInstagramで試してみるところまでを目指します。

ModifierでARヒューマンテンプレートを作ってみる

ARヒューマンテンプレートの制作は、Modifier（モディファイア）というSTYLY Studioの機能を用いて制作します。
モディファイアは、STYLY Studio上でアセットに「アニメーション」や「インタラクション」のような効果を付加できる機能のことです。

また、その効果自体のことを「Modifier（モディファイア）」と呼びます。
今までのSTYLYではUnityやPlayMakerを使用しないと機能を付加できませんでしたが、ブラウザ上で誰でも簡単に動きやアニメーションをオブジェクトに付加できるようになりました。

Modifierの全体概要や具体的な機能については、過去記事をご覧ください。

STYLY Modifier（モディファイア） スターターガイド

テンプレートを中心に制作する場合

STYLY Studio上に、すでに制作済みの複数のARヒューマンテンプレートを用意しています。

テンプレートを構成する既存のアセットを置き換えることができます。
ある程度参考にしながら、自分なりの表現を作っていくといいでしょう。

例えば、テンプレートで表示される構図はそのままに、アセットだけを置き換えたり、アセットはそのままにして構図を変えてみたりするなど、制作の着想源になったり、制作過程のショートカットに繋がります。

また、スマートフォンをかざして体験するようなARコンテンツであるため、はじめての方は画面の向こう側（実際の空間）にSTYLY Studio上で配置したアセットがどのように出現するのか、またどういった演出を施せば見応えのあるおもしろい表現ができるのかといったところがわかりにくいかもしれません。
その際にも、テンプレートの演出は参考になるでしょう。

STYLY Studioにシーンをコピーする

1. はじめに、STYLY Gallery上でログイン状態にしてください。
   
   

   STYLY Gallery上でログイン状態

   1. STYLY Gallery画面右上が「非ログイン状態」の場合、ログインを選択
      
      

      ログインを選択

      メールアドレスとパスワードを入力しログインを選択
      

      

      ログイン状態の場合自分のアイコンが表示されます

   2. STYLY Gallery画面右上が「ログイン状態」の場合（ご自身のアイコンが表示されます）

1.  
2. 以下のコピーボタンをクリックしてください。※ログインしていないとご自身のアカウントにコピーされません
3. STYLY Studio上のシーン一覧にシーンが追加されたら完了です。
    
   

   シーン一覧にシーンが追加される

さっそくシーンを開いてみましょう。
これ以降では開いたシーンを元にして解説を行っていきます。

テンプレートの構成と使い方のポイント

まずは、全体観を掴めむためにテンプレートの構成やポイントについて説明します。

テンプレートの構成

テンプレートは大きく分けて2種類の要素で構成されています。

ベースとなる操作不可能なアセットと、操作可能なアセットの2種類です。

操作可能なオブジェクト

目玉マークが無いアセットは、どのARヒューマンテンプレートを使う時でも必要なパーツであり操作できません。

操作可能なアセットは、モディファイアマークをクリックしてモディファイアを追加して動きをつけられます。

テンプレートには、すでにこの2種類のアセットが配置されています。

[モディファイアマーク]で、アセットの操作項目の選択ができるようになります

検索ボックス上でアセットを選択

操作項目に応じたパラメーターが表示されます

テンプレートの使い方のポイント

テンプレートには1m / 0.65m / 0.2mの表記があるサークルが用意されています。

このサークルはアセットを配置していく際に、被写体とその周囲の空間の関係のバランスを取るために設置されています。

テンプレートに配置されているサークル

0.65m表記（1.3m）内はパーソナルスペースです。
人を中心にしたアセットを配置するのに適した範囲になります。

Personal Space

1m表記（2ｍ）内外はソーシャルスペースです。
環境的なアセット配置に適した範囲になります。
サークルを目印にして制作していきましょう。

Social Space

また、一番中心にある0.2m表記（0.4m）内の円はIntimate（親密な）スペースです。
ここはアセットが人に重なってしまうのでアセットを配置するのにあまり適していません。

Intimate Space

今回使用するテンプレートでは、すでにサークルを意識した配置が行われているものを使用しています。
今までの事項を踏まえた上で、テンプレートを使う際のポイントは大まかに以下の2つです。

1. アセットの配置をどのように行うか
2. それらの動き方をどのようにするか

この2つの観点を意識していきましょう。
これから実際にテンプレートを用いてARヒューマンテンプレートを作ってみたいと思います。

実際にテンプレートを使って制作してみる

テンプレートを開くと、アセットがいくつか配置されています。
ここにモディファイアを使ってアニメーションをつけていきましょう。

今回は既に付与されているアニメーションのパラメーターを変化させてみたいと思います。
一連の操作を確認していただくことで、テンプレートを中心にしながらも独自の表現を模索していくイメージを掴んでもらいたいです。

1. 先ほどコピーしたシーンを開いた時の画面
    
   

   コピーしたシーンを開いた時の画面

2. “Ring”を選択しモディファイアマークをクリックしてアセットの操作項目の選択
    
   

   モディファイアマークをクリックしてモディファイアを追

    
3. 検索ボックスにて[Animation] Heartbeatを選択
    
   

   [Animation] Heartbeatを選択

4. モディファイアが追加されていることを確認し、現在のパラメーターの値を確認する。
    
   

   現在のパラメーターの値

5. パラメーターを変化させ、適応させる
   ここでは、Beat durationを2、Hold durationを1、Amplitudeを0.1に設定し、applyを選択
    
   

   Beat durationを2、Hold durationを1、Amplitudeを0.1に設定し、applyを選択

6. “Ring”を選択しモディファイアマークをクリックして[Style change] wood maple flatを追加
    
   

   モディファイアマークをクリックして[Style change] wood maple flatを追加

   

今までの操作の結果、見栄えや背景にあるリングの縮尺を変えられました。

既存のテンプレートよりポップな演出になったと言えるかもしれません。

このようにして、既存のテンプレートを活かすなり参考にするなりして、独自の表現を作っていきましょう。

STYLY Mobileで体験する

画面左上にある地球マークのアイコンを選択して、公開しましょう（パブリックかプライベートを選択できます）。

ublishをクリックしてして、公開

公開に成功したシーンは各媒体で体験することができます。デスクトップ上ではSTYLY Galleryから、スマートフォン上では専用のSTYLYモバイルアプリにて体験可能です。

デスクトップ上から体験する場合

デスクトップ上では、画面に表示されたQRコードをスマートフォンで読み込むことで、STYLYモバイルアプリが起動しますが、STYLYモバイルアプリをインストールしていない方はインストールが必要なのでご注意ください（このQRコードは、STYLY Galleryからいつでも体験することができます）。

デスクトップ上でSTLY Gallery起動後、QRを読み取ることで体験可能

スマートフォンから体験する場合

1. STYLY Mobileを起動後、My Pageからシーンを選択します。
2. 「ダウンロード」という表記のボタンを選択します。
   
   

   「ダウンロード」を選択

3. 「見る」という表記のボタンを選択します。

「見る」を選択

「平らな面に向けてスマートフォンをゆっくり動かします」の指示に従って、被写体および周囲の空間に向けてスマートフォンを動かします。

しばらくすると「画面をタップしてスタート」が表示され、体験可能になります。

ARヒューマンテンプレートの演出にフィットする被写体の格好やポージング、背景となる周囲の環境なども、アレンジすることで、魅力的なコンテンツを作ることが可能になります。

Instagramにアップロードする

「見る」を選択した後のSTYLY モバイルアプリの体験画面の右下に設定ボタンがあります。
そこから画面を撮影モードにすることができます。

ビデオファイルとして撮影することで、カメラロールに保存されるので、Instagramにアップロード可能になります。

 

 

 

 

 

この投稿をInstagramで見る

 

 

 

 

 

 

 

 

 

 

 

Lakeia (@keiabeia___)がシェアした投稿

自分のアセットを中心に制作する場合

ARヒューマンテンプレートでは、テンプレート上に配置されてある既存のアセットの他に、モデリングソフト等で作成した自作の3Dモデルや、Webサイト上で購入したアセットを使用することもできます。

ここでは、保有しているアセットをアップロードする方法について説明します。

1. 画面左上のアップロードするためのアイコンを選択します
   
   

   画面左上にあるアイコン

2. My uploadsという表示箇所を選択します
   
   

   My uploadsを選択

3. 3D modelという表示箇所を選択します
   
   

   3D modelを選択します

4. Selectからローカルに保存されているアセットのファイルを選択します。
   
   

   Selectを選択

    

   

   ローカルに保存されているアセットのファイルを選択

5. アセットが選択されていることを確認し、Uploadを選択します

   

   アセットが選択されていることを確認し、Uploadを選択

   
   
   

   アップロード中の画面

   
   
   

   アップロード完了の画面

今回は、ローカルファイルに保存されているアセットをアップロードしましたが、Unityで制作したものをアップロードすることができます。
以下の記事を参考にしてみてください。

UnityからSTYLYにアップロードする方法

UnityからSTYLYにプレハブとシーンをアップロードする方法

また、より魅力的で快適な体験を届けるための指針については以下の記事をご参照ください。

STYLY Studio 身にまとう「ARヒューマンテンプレート」制作ガイドライン編

STYLYに関する質問、バグ報告、改善してほしい要望はSTYLY FORUMまで
https://jp.forum.styly.cc/support/discussions

Edited by SASAnishiki

The post STYLY Studio 身にまとう「ARヒューマンテンプレート」制作マニュアル編 first appeared on STYLY.

シーンの鑑賞ポイントから、どのようにしてモディファイアを使っているか、そしてアレンジの方法などを紹介します。

Luna Woelleについて

Luna Woelle

スロベニア出身、2000年生まれ。デジタルアーティスト、グラフィックデザイナー、DJ。
エクスペリメンタルレーベル「Mizuha 罔象」のデザイナーとビジュアルキュレーター。

（NEWVIEW 公式ホームページより引用 https://newview.design/cypher )

Instagram: https://www.instagram.com/wo11.e　

SoundCloud: https://soundcloud.com/luna-woelle

Bandcamp: https://mizuhamizuha.bandcamp.com/album/biosphere

「Imaginary Robotics AR 」について

この作品はAR作品となっています。

また広い場所での体験を推奨しています。

作品を立ち上げると、回転するロボットのオブジェクトが出現します。

ARで鑑賞する

白色のオブジェクトを中心に構築されたロボットは、機械的な動きをしながらも、彫刻のような美しさを兼ね備えています。

精密な作り

細かい部品も緻密に作られています。

ミクロでも楽しめる

オブジェクトとModifierを組み合わせることによって、彫刻に命を与え、存在感を表現しています。

強い存在感

モディファイアの活用ポイント

実際にご自身のSTYLY Studio上にシーンをコピーし、解説と照らし合わせてご確認いただけます。

STYLY Studioにシーンをコピーする方法

1. はじめに、STYLY Gallery上でログイン状態にしてください。
   
   

   STYLY Gallery画面右上「非ログイン状態」の場合ログインを選択

   
   
   

   メールアドレスとパスワードを入力しログインを選択

   
   
   

   STYLY Gallery画面右上「ログイン状態」の場合（ご自身のアイコンが表示されます）

    

2. 以下のコピーボタンをクリックしてください。※ログインしていないとご自身のアカウントにコピーされません

   

    

3. STYLY Studio上のシーン一覧にシーンが追加されたら完了です。
    
   

   コピーされたシーンが追加される

   解説

STYLY Studio 上でどのようなモディファイアを使っているか解説します。

複合的

147_stylymodifier_center02は、ロボットの中央にあるオブジェクトです。
AnimationのRotateのModifierが使われています。

Rotateが使われている

同じように147_stylymodifier_head03/_new01にもRotationが使われています（初期状態では147_stylymodifier_head03は非表示になっています。目のマークをクリックすると表示されます）。

回転するロボットの外殻を形成しています。

外殻

一つ一つのPrefabのパーツの完成度が高いため、シンプルなModifierだけでも、かっこよく作り上げることができます。

Prefabの構造や、Animationの組み合わせを変えることによって、自分だけのImaginary Roboticsを作り上げることができます。

オリジナルのロボット

VRシーン体験方法

スマートフォンからアクセスしてる方は、そのまま「シーンを体験する」ボタンをクリックしてください（※初めての方は以下の説明もご参照ください）。

クリック後、以下の画面が表示されます。
スマートフォン版STYLYをすでにダウンロードしている場合「Continue on Browser」を選択してください。

そして「Play on Mobile App」を選択するとシーンを体験できます。

HMDデバイスをお持ちの方は、PC（Webブラウザ）から「シーンを体験する」ボタンをクリック後、シーンページのVRアイコンをクリックしてください。

スマートフォン版STYLYをダウンロードする

Steam版STYLYをダウンロードする
https://store.steampowered.com/app/693990/STYLYVR_PLATFORM_FOR_ULTRA_EXPERIENCE/

Oculus Quest版STYLYをダウンロードする
https://www.oculus.com/experiences/quest/3982198145147898/

シーン体験方法の詳細を知りたい方
VRシーン体験方法については、以下の記事をご参照ください。

【まとめ】STYLYのシーンを体験する方法 VR・AR(Mobile) / Webブラウザ 手順別紹介

The post Luna Woelle Modifier（モディファイア）シーン 解説 first appeared on STYLY.

*ここで扱うARヒューマンテンプレートとは、顔や足など特定の身体部位のみを拡張するARではなく、人間（被写体）を中心とした空間を拡張するようなARを指します。つまり体験を拡張する対象は、人間を中心に数メートルの範囲を想定しています。

身にまとうARヒューマンテンプレート使用時の様子

ARヒューマンテンプレートの作品例を知る

はじめに、ARヒューマンテンプレートを実際に使用しているシチュエーションを紹介します。

以下の共通点は後述するARヒューマンテンプレート制作時の原則（考慮すべき構成要素）に沿って作られた作品例です。

①STAR LIGHT

 

 

 

 

 

この投稿をInstagramで見る

 

 

 

 

 

 

 

 

 

 

 

Lakeia (@keiabeia___)がシェアした投稿

②FLOATING EMOJI AROUND

 

 

 

 

 

この投稿をInstagramで見る

 

 

 

 

 

 

 

 

 

 

 

MIXAR Powered by STYLY(@mixar.gallery)がシェアした投稿

③WABI

 

 

 

 

 

この投稿をInstagramで見る

 

 

 

 

 

 

 

 

 

 

 

MIXAR Powered by STYLY(@mixar.gallery)がシェアした投稿

次に、以下のARヒューマンテンプレートをご自身のスマートフォンで実際に体験してみましょう。
被写体となる人がいると体験時の見え方がよりわかりやすいです。

STYLYモバイルアプリでQRコードスキャンしてシーンを起動してください。
平らな地面に向けてスマートフォンの画面をタップする際、できるだけ開けたスペースで2メートルほど先に原点マークを表示させてタップすると、見えやすくなります（原点マークの位置がARの出現位置となります）。

WABI

ARヒューマンテンプレートの構成要素を理解する

STYLY StudioでARヒューマンテンプレートを制作する際、以下の構成要素を把握して基準やパターンを考慮することをおすすめします。

体験者への配慮をふまえ考慮すべき重要な構成要素は、被写体（人型3Dモデル）/ アセット（3Dモデルや画像等の2D素材）/ 配置（被写体やアセットの距離感と関係性）の3つです。

被写体（人型3Dモデル）

実際にARヒューマンテンプレートを利用する具体的なシチュエーションを想定して、人型3Dモデルを起点にどの程度の範囲で体験をしてもらうか設計しましょう。

STYLY Studio上の原点（0,0,0）である円の中心に人型3Dモデルを配置して、被写体となる人間がいることを配慮します。

被写体を起点に設計

前項で体験いただいたように、STYLYモバイルアプリのARヒューマンテンプレート（ARシーン）起動時に表示された原点マークを起点にARが出現します。

制作段階で原点マーク＝被写体の位置、となることを想定しておくことが大切です。

ARシーン起動時（平面検知）

アセット（3Dモデルや画像等の2D素材）

どのようなアセットを使用するかは、ARヒューマンテンプレートのビジュアルや見た人々の感情の変化に寄与します。

どんな体験を作るか？ をゴールにした場合、そこから逆算された作品のテーマやコンセプトに沿うアセットのトーン＆マナーを表現することは、体験者の入口の明確化にもつながります。

アセット組み合わせ例

また、使用するアセットの留意点は以下の3つです。

1. 「Human AR Template XX」を活用する
   Human AR Template XXは身にまとうARヒューマンテンプレート（ARシーン）をSTYLY Studio上で作りやすくするためのガイドです。STYLYモバイルアプリでARシーン起動時には自動で非表示になります。
   
   

   Human AR Template XX

    

2. 「AR Template Grid」を削除しない
   AR Template GridはARシーンを作りやすくするためのグリッドです。原点（0,0,0）を起点にアセットの配置で距離を測る目安にしてください。STYLYモバイルアプリでARシーン起動時には自動で非表示になります。
   
   

   AR Template Grid

    

3. 「Enable AR Occulusion」及びARオクルージョン機能を活用する
   Enable AR OcculusionはARシーンを新規作成するとデフォルトで設定されています。
   
   

   Enable AR Occulusion

   
   より具体的な説明は次項、配置（被写体とアセットの距離感および関係性）で行います。
   ARオクルージョン機能をより詳しく知りたい方は以下の記事も合わせてご参照ください。
   現実とバーチャルを交差させる新機能「ARオクルージョン」実装

4. 「Skybox」を使用しない
   Skyboxを使用すると現実の風景が見えなくなります。
   
   

   Skybox

配置（被写体とアセットの距離感および関係性）

対人コミュニケーションには状況に応じた最適な距離があるように、ARヒューマンテンプレートにおいても被写体とアセット間には適した距離関係があります。

以下のスペースによる特性を把握したうえで、被写体とアセットを適切な位置に配置しましょう。

これらの配置の結果が、ARヒューマンテンプレート（ARシーン）体験時に現実世界でどのように見えるか、イメージとは合っているのかといったことをプレビューチェックしながら制作することが重要です。

Distance Guide

考慮すべき主な基準は以下の3つです。

• 1m表記（2ｍ）内外のソーシャルスペース
  • 環境的なアセット配置に適した範囲

Social Space

• 0.65m表記（1.3m）内はパーソナルスペース
  • 人を中心にしたアセット配置に適した範囲

Personal Space

• 0.2m表記（0.4m）内はIntimate（親密な）スペース
  • アセットが人に重なりやすいためアセット配置にあまり適さない範囲

Intimate Space

被写体に対してアセットを適切な位置に配置している様子です。

被写体とアセットの前後距離関係も配慮しています。

配置例

また、ARオクルージョン機能の有無は以下のような見え方、体験の違いを生みます。

ARオクルージョンあり / ARオクルージョンなしの同じARシーンを、赤いコーン背面側の同じ位置で起動します。

赤いコーン背面側でスタート

左のARオクルージョン機能がある場合、現実空間での位置関係が反映されているため被写体（人型3Dモデル）は赤いコーンの背面側に表示されます。

一方、右のARオクルージョン機能がない場合、被写体（人型3Dモデル）は赤いコーン手前と被ってしまって表示されています。

左：ARオクルージョンあり / 右：ARオクルージョンなし

リアルな現実空間に3DCGをより自然に溶け込ますためにも、ARオクルージョン機能は重要です。

STYLY Studioで実際に作ってみる

これまでの作品例や構成要素を指針に、人間を中心とした身にまとうARヒューマンテンプレートを作ってみましょう。

STYLY Studio 身にまとう「ARヒューマンテンプレート」制作マニュアル編

また、STYLYモバイルアプリについて知りたい、という方は以下の記事をご参照ください。

【STYLY Mobileアプリ】 AR制作方法マニュアル

STYLYに関する質問、バグ報告、改善してほしい要望はSTYLY FORUMまで
https://jp.forum.styly.cc/support/discussions

Edited by SASAnishiki

The post STYLY Studio 身にまとう「ARヒューマンテンプレート」制作ガイドライン編 first appeared on STYLY.

シーンの鑑賞ポイントから、どのようにしてモディファイアを使っているか、そしてアレンジの方法などを紹介します。

cpnnnについて

cpnnn

3Dアーティスト・デザイナー。
国内外のアーティストへの作品提供やコラボワークを発表し、場所・言葉・次元を超えて活動中。

（NEWVIEW 公式ホームページより引用 https://newview.design/works/paradise-type-ice/ )

Twitter : https://twitter.com/cpnnn
Instagram : https://www.instagram.com/cpnnn_

「egg」について

この作品に関して、作者は以下のように解説しています。

水族館でサメの卵を初めてみたときから、その美しく有機的な造形と大変脆弱な仕組みに魅了されました。サメにはさまざまな繁殖方法があり、ナヌカザメやトラザメは岩や海藻に巻きつけて産卵し、その卵は数ヶ月～一年以上かけてゆっくりと育っていく。サメの赤ちゃんを守るのは外側の半透明な巾着（別名「人魚の財布」）のみで、生存率はとても低いらしい。

卵はこの世にもう「生まれて」いるのに、その中の生き物はまだ「産まれて」いない。
「egg」はまだ産まれていないものの記憶です。

このシーンは、STYLYのモディファイア機能を使って様々なオブジェクトに動きをつけています。
記憶の海を、ぜひVRで体験してみてください。

推薦環境：VR（ソファやベッドなどの柔らかい場所での体験がおすすめです）

音楽：a rap of ice – 10,10,10

cpnnnさんのインスタグラムより引用 ( https://www.instagram.com/p/Ca9hqWmLo1E/ )

egg

サメの卵をモチーフに、記憶を体験する空間作品となっています。

特徴的なのは独特な色使いです。

美しい色合い

原色的な青ではなく、空や海といった自然物の反射によって表現されるグラデーションの青の色をオブジェクトや空間に反映させて、独特な色合いが表現されています。

花のオブジェクトは鏡面反射がほどこされており、自転することで常に色を変化させています。

鏡面反射

そしてゲートのようなオブジェクトには石のテクスチャが貼り付けられています。

ゲート

彫刻的なイメージをまとうことによって、この作品の象徴物として空間を構築しています。

シーンの一番奥には、サメの卵のオブジェクトがあります。

サメ

卵は時々動きだし、今にも孵化しそうな感触を感じます。

モディファイアの活用ポイント

STYLY Studioにシーンをコピーする方法

1. はじめに、STYLY Gallery上でログイン状態にしてください。
   
   

   STYLY Gallery画面右上「非ログイン状態」の場合ログインを選択

   
   
   

   メールアドレスとパスワードを入力しログインを選択

   
   
   

   STYLY Gallery画面右上「ログイン状態」の場合（ご自身のアイコンが表示されます）

    

2. 以下のコピーボタンをクリックしてください。※ログインしていないとご自身のアカウントにコピーされません

   

    

3. STYLY Studio上のシーン一覧にシーンが追加されたら完了です。
    
   

   コピーされたシーンが追加される

   解説

STYLY Studio 上でどのようなモディファイアを使っているか解説します。

single_rubberduckというアヒルのオブジェクトには[Animation] Go and back like spiralと[Animation] Rotationが使われています。

[Animation]が使われている

同じようにlight-Lも[Animation] Go and back like wavesを使って波に揺られるオブジェクトの動きをしています。
また、[Style change]Rim Lightによってカラーも変更しています。

[Animation]と[Style change]が使われている

cushionのオブジェクトにも[Animation] Go and back like wavesが使われ、波に揺られているような動きをModifierで生み出しています。

[Animation] Go and back like wavesが使われている

Modifierを使うことによって、本当に波に動かされているような動きを効果的に演出しています。

shark-egg-innerオブジェクトには[Style change]Rim Lightでカラーを変更し、[Animation] Heartbeatを使っています。

[Animation] と[Style change]が使われている

Heartbeatのアニメーションによって、卵がときどき動き出します。
それは、まるでいまにも孵化しそうな演出を効果的に生み出しています。

とても効果的にModifierを使うことによって、物理的な動きを生み出しています。
物理的な動きを生み出すことによって、本当に存在しているかのような見え方をさせます。
Modifierを使って、効果的な動きを作ってみましょう！

VRシーン体験方法

スマートフォンからアクセスしてる方は、そのまま「シーンを体験する」ボタンをクリックしてください（※初めての方は以下の説明もご参照ください）。

クリック後、以下の画面が表示されます。
スマートフォン版STYLYをすでにダウンロードしている場合「Continue on Browser」を選択してください。

そして「Play on Mobile App」を選択するとシーンを体験できます。

HMDデバイスをお持ちの方は、PC（Webブラウザ）から「シーンを体験する」ボタンをクリック後、シーンページのVRアイコンをクリックしてください。

スマートフォン版STYLYをダウンロードする

Steam版STYLYをダウンロードする
https://store.steampowered.com/app/693990/STYLYVR_PLATFORM_FOR_ULTRA_EXPERIENCE/

Oculus Quest版STYLYをダウンロードする
https://www.oculus.com/experiences/quest/3982198145147898/

シーン体験方法の詳細を知りたい方
VRシーン体験方法については、以下の記事をご参照ください。

【まとめ】STYLYのシーンを体験する方法 VR・AR(Mobile) / Webブラウザ 手順別紹介

The post cpnnn Modifier（モディファイア）シーン 解説 first appeared on STYLY.

シーンの鑑賞ポイントから、どのようにしてモディファイアを使っているか、そしてアレンジの方法などを紹介します。

nyuについて

nyu

2000年生まれ。

Instagram: https://www.instagram.com/nyu_uyn_nyu/

「Biotope」について

作品を立ち上げると、抽象的な模様のトンネルが目の前に広がります。

トンネル

トンネルを抜けると、異質なオブジェクトによって構成された空間が広がります。

オブジェクトによって構築された異質な空間

海藻にも見えるような植物が生えてたりします。

海の中？

中央には複雑に入り組んだアブストラクトなオブジェクトが鎮座しています。

オブジェクト

オブジェクトが回転などの動きによって、その存在感を強く示しています。

金属のようにも、内臓のようにも見えるカラーリングが特徴的で、禍々しさを感じます。

存在感

タイトルとなっている「Biotope」は「生物環境」という意味です。

粘液のように張り巡らされたオブジェクトや、複雑に入り組んだ幾何学模様のオブジェクトは仮想上の生物環境を表現していると感じます。

そこに生物はいなくとも、生物がいた痕跡をモチーフとして、空間作品を作り上げています。

モディファイアの活用ポイント

実際にご自身のSTYLY Studio上にシーンをコピーし、解説と照らし合わせてご確認いただけます。

STYLY Studioにシーンをコピーする方法

1. はじめに、STYLY Gallery上でログイン状態にしてください。
   
   

   STYLY Gallery画面右上「非ログイン状態」の場合ログインを選択

   
   
   

   メールアドレスとパスワードを入力しログインを選択

   
   
   

   STYLY Gallery画面右上「ログイン状態」の場合（ご自身のアイコンが表示されます

   
   

    

2. 以下のコピーボタンをクリックしてください。※ログインしていないとご自身のアカウントにコピーされません

   

    

3. STYLY Studio上のシーン一覧にシーンが追加されたら完了です。
    
   

   コピーされたシーンが追加される

   解説

STYLY Studio 上でどのようなモディファイアを使っているか解説します。

center objは、中央のステージに配置されているオブジェクトです。

モディファイアはAnimationのRotateを使っています。アブストラクトな状態をさまざまな角度から鑑賞できるようになっています。

center obj

sowrd cicleにも、同じようにAnimationのRotateが使われています。
このsowrd circleはプレハブ化するときに、複数のオブジェクトが円形に組まれています。軸が中心に設定されているため、綺麗に回転するようにな
っています。
円状に複数のオブジェクトを配置する際は、軸の位置に注意しましょう。

sowrd circle

drillのオブジェクトにもAnimationのRotateが使われています。
シンプルな使い方ではありますが、Rotateはとても汎用性があります。位置を変更せず、オブジェクトに情報を与えたい時は使ってみましょう。

drill

longのオブジェクトにもAnimationのRotateが使われています。これは縦に配置された四角のオブジェクトが、それぞれがバラバラの角度で配置されているため、Rotateをつかうことによって、光のグラデーションのような表現を生み出しています。

long

cable circleオブジェクトにはAnimationのHeartbeatが使われています。大きさが変化するアニメーションによって、あたかも生きているかのような見せ方をすることができます。

cable circle

全体が入り組んだ構造の作品のため、大きな動きをさせるのではなく、位置はかわらず、大きさが変化したり、回転するアニメーションを使うことによって、全体の構造に影響を与えず、情報量の多いシーンを作っています。

Modifierを無暗に使うのではなく、有効的に活用し、シーンをリッチにしましょう。

VRシーン体験方法

スマートフォンからアクセスしてる方は、そのまま「シーンを体験する」ボタンをクリックしてください（※初めての方は以下の説明もご参照ください）。

クリック後、以下の画面が表示されます。
スマートフォン版STYLYをすでにダウンロードしている場合「Continue on Browser」を選択してください。

そして「Play on Mobile App」を選択するとシーンを体験できます。

HMDデバイスをお持ちの方は、PC（Webブラウザ）から「シーンを体験する」ボタンをクリック後、シーンページのVRアイコンをクリックしてください。

スマートフォン版STYLYをダウンロードする

Steam版STYLYをダウンロードする
https://store.steampowered.com/app/693990/STYLYVR_PLATFORM_FOR_ULTRA_EXPERIENCE/

Oculus Quest版STYLYをダウンロードする
https://www.oculus.com/experiences/quest/3982198145147898/

シーン体験方法の詳細を知りたい方
VRシーン体験方法については、以下の記事をご参照ください。

【まとめ】STYLYのシーンを体験する方法 VR・AR(Mobile) / Webブラウザ 手順別紹介

The post nyu Modifier（モディファイア）シーン 解説 first appeared on STYLY.

スナップとは決められた範囲に入ると自動的に位置や回転が固定されることです。

配置するためのボードの設定

 PlaneとCubeを生成します。Planeの名前を「BasePanel」「Cube」の名前をBasePointとします。

 Planeは見た目の台座の役目があり、Cubeは実際にオブジェクトをはめるための判定と位置の設定の役割があります。

以下のように BasePanel と BasePoint のTransformを以下のように設定します。

BasePoint にAdd Componentから「XR Socket Interactor」を追加します。

BasePoint の「XR Socket Interactor」のHover Socket Snappingにチェックを入れます。これによってオブジェクトを持っているときにスナップ位置に入った時に自動的にスナップすることができます。

BasePoint のColliderの Is Trigger にチェックを入れます。

Mesh Renderer のチェックを外します。

配置するオブジェクトの設定

Cubeを生成します。名前を「SnapBlock」にします。Transformを以下のように設定します。

Add Componentから「XR Grab Interactable」を追加します。

今回は宙に浮かせて回転させないようにするために SnapBlock の「RigidBody」を Use Gravity のチェックを外し、 Is Kinematic にチェックを入れます。

実行

今回はオブジェクトのスナップの仕方について紹介しました。

The post STYLY for Vision Pro：オブジェクトをスナップして移動する方法 first appeared on STYLY.

ハンドジェスチャーの実装方法

今回はハンドジェスチャーをするとCubeの色が変わる方法を実装していきます。

HierachyにCreate Emptyで空のオブジェクトを生成します。Add Componentから

「XR Hand Tracking Events」をアタッチします。

HierachyにCubeを追加します。Add Componentから「Gesture Hand」を追加します。

「Gesture Hand」のHand Tracking Eventに「XR Hand Tracking Events」がアタッチされたオブジェクトをアタッチします。

Samples-STYLY→Reusable Assets→Hand Gestures→Hand Posesの中にある手の形を選びます。

今回はグッドポーズをした時に色を変えたいので、「ThumbsUp」を Hand Shape Or Pose にアタッチします。

CubeにScriptMachineを追加し、Graphを新規作成します。以下のようにノードを接続します。

Gesture Trackerを以下のように設定します。

実行します。

上記は、wikiに記載の動画です。

今回はハンドジェスチャーの実装方法について紹介しました。

The post STYLY for Vision Pro :ハンドジェスチャーの実装方法 first appeared on STYLY.

トラッキングの実装方法

Scene内にSamples-STYLY→Head and Hand tracker→Head and Hand tracker をシーン内に追加します。

今回は手にCubeを追従させます。

Cubeを作成し、Scaleを（0.1，0.1，0.1）にします。

Cubeを Head and Hand tracker の子オブジェクトの子オブジェクトにします。

今回は右手をトラッキングします。

CubeのPositionを(0,0,0)に設定します。

ここでのPositionは右手からの相対的な座標なので、少し調整すれば手から離れた場所でトラッキングすることもできます。

実行します。

今回はトラッキングの実装方法について紹介しました。

The post STYLY for Vision Pro:ハンドトラッキングの実装方法 first appeared on STYLY.

本記事ではVisual ScriptingとSTYLY For Vision Proの連携方法を解説します。

STYLY for Vision Proで使える機能がまとめられたサンプルシーンがあるのでダウンロードしてください。

Unityのバージョンは2022.3.27fです。

今回はオブジェクトをつかみ、そのオブジェクトに何か作用させる方法を紹介します。

Visual Scriptingで物をつかむ

ダウンロードしたProjectをUnity Hubで開きます。

Addボタンをおします。

ダウンロードしたProjectをUnity Hubで開く

ダウンロードしたフォルダを選択してOpenを押して、プロジェクトを開きます。

プロジェクトを開く

Projectの下の＋ボタンを押してSceneボタンを押し、新しいシーンを作ります。

新しいシーンを作る

今回は[GrabScene]という名前でシーンを作成します。

GrabScene

つかむオブジェクトを作ります。Hierarchyの＋ボタンを押し、3DObject→Cubeを選択し生成します。

3DObject→Cubeを選択し生成

名前を[GrabCube]とし、XR Grab Interactable を追加します。

XR Grab Interactable を追加

XR Grab InteractableとはXR空間内でつかむことを可能にするコンポーネントです。

このC#のコードはSTYLY For Vision Proに組みこまれているため使うことができます。

Visual Scriptingで掴んだ物の色を変える

XR Grab Interactableには様々な機能があります。

詳しい機能を知りたい場合はUnityのマニュアルをご覧ください。

XR Grab InteractableのInteracrable Eventを開きます。

XR Grab Interactableのくnteracrable Eventを開く

SelectとSelect Exitedの＋ボタンを押し、以下のようにドラッグ＆ドロップで追加します。

ドラッグ＆ドロップで追加

No Functionを押して、Script Machine→TriggerUnityEventを押します。

Script Machine→TriggerUnityEvent

以下のようにSelectには[StartGrab]と入力します。

StartGrab

SelectExitにはExitGrabを入力します。

Selectはつかんだ時に処理をします。

Select Exitedは放した時に処理をします。

[GrabCube]にScript Machineをアタッチします。

SourceをEmbedに変更します。

SourceをEmbedに変更

Edit Graphを押して、Script Graphを表示します。

以下のノードをGraph Editorに追加します。

• UnityEvent
• Renderer Get Material
• Color Literal
• Set Color

※ノードの画像はわかりにくいもののみ載せています。

Renderer Get Material

Set Color

以下のようにノードを接続します。

UnityEventにはXR Grab InteractableのSelectで設定した

[StartGrab]を入力します。Colorにはつかんだ時の色を設定します。今回は赤色にしました。

StartGrab

接続したノードをすべて選択し、Ctrl＋D(cmd＋D)で複製します。

同様にUnityEventに[ExitGrab]を入力し、Colorには放したときの色を設定します。

今回は白色にしました。

ExitGrab

STYLY For Vision Proにアップロードする

UnityでのTransformの単位はメートルなので、現在のままだと[GrabCube]は少し大きすぎるので一辺30センチのCubeにします。

一辺30センチのCubeにする

[GrabCube]にはRigidBodyがアタッチされているので重力が働き、そのままだと下に落下していきます。落

下しないよう、置く台座を配置します。

Cubeをシーン上に生成し、[GrabCube]の下になるように移動させます。大きさは変更しません。

台座を配置

複数のオブジェクトをアップロードする時は一つにまとめPrefab化します。

Create Emptyで空のGameObjectを作成し、[GrabPrefab]に名前を変更します。

その配下に[GrabCube]と台座を移動させます。

Prefab

[GrabPrefab]をProject内にドラッグ＆ドロップすると、アイコンが青くなり、Prefab化します。

GrabPrefabをProject内にドラッグ＆ドロップ

Prefab化した[GrabPrefab]の上で右クリックをしてSTYLY→Build prefabを押します。

STYLY→Build prefab

自動的にブラウザが開きます。

アカウントを作りログインすると以下のような画面が開くので、[＋New content]を押します。

＋New content

タイトルを決めます。今回は[GrabColor]としました。

次にプロジェクトフォルダの中にある[_Output]フォルダの中にある生成したフォルダをドラッグ＆ドロップでSelect fileに追加し、Uploadを押せば完了です。

ほかの項目はデフォルトのままです。

Upload

今回はSTYLY For Vision Proとの連携について紹介しました。

The post Unity Visual Scripting 入門第10回：STYLY For Vision Proとの連携 first appeared on STYLY.

本記事ではVisual Scriptingでアニメーションを作成、再生する方法、音源を再生する方法を解説します。

Unityでアニメーションを作る

AnimationとはUnityに搭載されている機能の一つで、キーフレームを打つことでアニメーションを作ることができる機能です。

作成したAnimationをVisual Scriptingを用いて再生するために、まずは、動かすためのオブジェクトを作りましょう。

Hierarchyの＋ボタンをクリックし、3DObject→CubeをクリックしてCubeを作ります。

3DObject→Cube

名前を[AnimationCube]とします。

AnimationCube

画面上部のメニューバーから、Window→Animation→Animationを選択し、Animationウィンドウを作ります。

Animationウィンドウ

[AnimationCube]を選択した状態で、AnimationウィンドウのCreateを押します。

AnimationウィンドウのCreate

AnimationCubeのPositionを(10, 0, 0)にします。

(10, 0, 0)

Add Propertyを押し、Transform→Positionの＋を押します。

Transform→Position

今回は反復運動をさせます。

0：30に線を合わせます。Position.xに-10と入力します。

Position.x=-10

Animationウィンドウ内の再生ボタンを押して、アニメーションを再生します。

再生ボタン

アニメーションが再生されました。

アニメーションを再生

Visual Scriptingでアニメーションを再生する

Hierarchyの＋ボタンをクリックし、Create EmptyをクリックしてGameObjectを作ります。

名前を[UXManager]とします。

UXManager

[UXManager]にScript Machineをアタッチします。

Macrosというフォルダを作り、その中に[UXController]というGraphを作ります。

UXController

Animations内のAnimationCubeをダブルクリックし、Animatorウィンドウを開きます。

Animatorウィンドウ

CubeAnimationの上で右クリックをして、Deleteを押します。

Delete

Animatorウィンドウの空いているスペースで、右クリックをしてCreate State→Emptyを押します。

Create State→Empty

Animations→CubeAnimationをAnimatorウィンドウ内にドラッグ＆ドロップをします。

Animations→CubeAnimationをAnimatorウィンドウ内にドラッグ＆ドロップ

New Stateの上で右クリックをしてMake Trasitionを押し、CubeAnimationに矢印をつなげます。

CubeAnimationに矢印をつなげる

AnimatorウィンドウのParametersの＋ボタンを押し、Boolを選択します。名前を[Play]とします。

Play

Animatorウィンドウ内のNew StateとCubeAnimationをつないでいる矢印を選択し、InspectorのConditionsの＋ボタンを押します。

以下のようにすることで[Play]がTrueになったときに次のアニメーションが再生されるように出来ました。

InspectorのConditionsの＋ボタンを押す

スペースキーが押されたときにアニメーションを再生するようにします。

VariablesにGameObject型の変数、[Cube]を作成し、Valueに[AnimationCube]を追加します。

Graph Editorに[Cube]を追加します。

Graph Editorに[Cube]を追加

以下のノードをGraph Editorに追加します。

※ノードの画像はわかりにくいもののみ載せています。

• Get Key Down （Key）
• If
• SetBool（Name、Value）

SetBool（Name、Value）

以下のようにノードを接続します。

Set BoolのNameにはAnimatorで設定したBoolの名前[Play]を設定します。

[Play]がTrueの時にアニメーションが再生されるように設定したので、Valueにチェックを入れます。

ノードを接続

再生します。Spaceキーを押すとアニメーションが再生されます。

アニメーションを再生

Visual Scriptingで音を再生する

今回はフリー音源を使用します。

このダウンロードページで音源をダウンロードしてください。

すきな音源をもちいてもかまいません。

ダウンロードした音源をAssets直下にドラッグ＆ドロップで追加します。

ウンロードした音源をAssets直下にドラッグ＆ドロップで追加

Hierarchyの＋ボタンをクリックし、3DObject→CubeをクリックしてCubeを作ります。

Cubeの名前は[SpeakerCube]とします。

SpeakerCube

SpeakerCubeのAddComponentを押し、[Audio Source]のコンポーネントを追加します。

Audio Source

UXManagerのVariableにGameObject型の変数[Speaker]を追加します。

Valueに[SpeakerCube]を追加します。Graph Editorに[Speaker]追加します。

GameObject型の変数[Speaker]を追加

Graph Ediroeに以下のノードを追加します。

※ノードの画像はわかりにくいもののみ載せています。

• On Update
• Get Key Down （Key）
• If
• Set Clip
• Play

Set Clip

Play

ダウンロードした音源をGraph Editorにドラッグ＆ドロップで追加します。

以下のようなウィンドウが出現しますが、一番上のものを選択します。

ダウンロードした音源をGraph Editorにドラッグ＆ドロップ

以下のようにノードを接続します。

Get Key Down にはSpaceキーを設定します。

Set Clipノード：Audio SourceのAudio Clipに音源を設定できます。

左の真ん中のポートにAudio Sourceがアタッチされているオブジェクトを接続します。

左の一番下のポートにAudio SourceのAudio Clipに設定する音源を接続します。

Playノード：AudioのAudio Clipに設定してある音源をながすノードです。

左の下のポートにAudio Sourceがアタッチされているオブジェクトを接続します。

ノードを接続

再生ボタンを押してシーンを再生します。音楽とともにAnimationCubeが動き始めました。

シーンを再生

今回はアニメーションの動かし方と音源の鳴らし方について紹介しました。

次回はSTYLY for VisionProとの連携を紹介します。

Unity Visual Scripting 入門第10回：STYLY For Vision Proとの連携

The post Unity Visual Scripting 入門第9回：AnimationとAudio first appeared on STYLY.

Unity Visual Scripting 入門第7回：RaycastとListを使って的あてゲームを作る(前編)

本記事は前後編でRaycastとListを使って的あてゲームを作る方法を解説します。

今回（後編）の記事で学べる事

• Raycast
• Destroy
• Listの要素の削除
• Tagの使い方

Raycastを使ってオブジェクトの情報を取得する

Rayとは設定した方向に向けて放つ光線のことで、その光線にあたったオブジェクトの情報を得ることができます。

Variableに、GameObject型の変数[Camera]を追加します

ValueにシーンにあるMainCameraを代入します。

[Camera]をGraph Editorに追加します。

[Camera]をGraph Editorに追加

Graph Editorに以下を追加します。

• On Update　
• Get Key Down　
• If　
• Get Mouse Position　
• Screen Point To Ray　
• RayCast　

※ノードの画像はわかりにくいもののみ載せています。

Screen Point To Ray

RayCast

Get Key Down のKeyにMouse 0（左クリック）を入力します。

スクロールしないと表示されないのでGIFをご覧ください。

Get Key Down のKeyにMouse 0を入力

以下のようにノードを接続します。

Screen Point To Rayはカメラのコンポーネントとマウスの位置を左のポートに接続するとカメラからRayの情報を作成し、Rayの情報をRaycast

接続することでRayを飛ばすことができます。

ノードを接続

実際にRayが飛ばせているのか確認します。

Graph Editorに以下のノードを追加します。

• Debug Log(Message)
• Get Collider
• Get Game Object

Get Collider

Get Game Object

以下のようにノードを接続します。

Rayに当たったオブジェクトのColliderを取得し、そこからオブジェクトの情報を取得して、的の名前をConsoleに表示します。

ノードを接続

シーンを実行します。クリックした的の名前を表示させることができました。

シーンを実行

取得したオブジェクトを削除する

ゲームの要素として、まず床を作ります。

Hierarchyの＋ボタンをクリックし、3DObject→PlaneをクリックしてPlaneを作ります。

PlaneのTransformを以下のように設定します。

PlaneのTransformを設定

床か的かを判定するために新しいTagを登録します。

Tagとはオブジェクトに種類を付けられる機能で、オブジェクトのTagを判別して処理を変えることができます。

Projectの[Target]プレハブのTagをクリックしAdd Tagをクリックします。

Add Tagをクリック

＋ボタンをクリックしNew Tag Nameに[Target]と入力して、Saveをクリックします。

これで、新しいTagを登録することができました。

これでプレハブ[Target]は、[Target]というTagが付与されたので、Tagに対して処理できるようになります。

新しいTagを登録

Graph Editorに以下のノードを追加します。

• If×2
• String Literal
• Get Tag
• Equal
• Destroy
• Aot List Remove

※ノードの画像はわかりにくいもののみ載せています。

Variableから[TargetList]を追加します。

Get Tag

Destroy

Aot List Remove

以下のようにノードを接続します。Stringには「Target」を入力します。

ノードの説明をします。

1. Raycastの右の真ん中のポートはRayがオブジェクトに当たっているか判定するものです。当たっていればTrue、当たっていなければFalseとなります。今回の場合Rayが当たった場合次の処理に進みます。
2. GameObjectのTagを取得し、それが[Target]であった場合にTrueになり、次の処理に進みます。
3. Removeの左の真ん中のポートに消すオブジェクトが含まれているリストを接続します。

一番下のポートにはリストから消すオブジェクトを接続します。

リストから削除しないとエラーがでてしまうのでオブジェクトを削除する前にリストから削除します。

そして、最後にDestroyの左の下のポートに消すオブジェクトを接続し、削除します。

ノードを接続

実行します。

シーンを実行

これで完成です。Unity Visual Scripting 入門第3回と第4回をみてスコア機能を付けて見たものが以下になります。

余裕があればぜひ作ってみてください。

スコア機能あり

Unity Visual Scripting 入門第3回：時間とスコア計算をする方法 [連打ゲーム前編]

Unity Visual Scripting 入門第4回：画面切り替えとスコア表示 [連打ゲーム後編]

完成サンプルは以下にあるのでわからなくなってしまったら確認してください。

https://github.com/Manufuki/HitTargetSample.git

次回の第9回ではVisual Scriptingで音源とアニメーションの再生について紹介します。

Unity Visual Scripting 入門第8回：RaycastとListを使って的あてゲームを作る(後編)

The post Unity Visual Scripting 入門第8回：RaycastとListを使って的あてゲームを作る(後編) first appeared on STYLY.

Unity Visual Scripting 入門第6回：Collisionで当たり判定を付与する方法

本記事は前後編でRaycastとListを使って的あてゲームを作る方法を解説します。

今回（前編）の記事で学べる事

• Listへの要素の追加
• Random
• For文
• Instantiate

完成イメージ

完成イメージ

Random関数でランダムな座標を作成する

Random関数とは指定した数の範囲内でランダムに数を出力してくれるものです。

Hierarchyの＋ボタンをクリックし、空のGameObjectを作ります。

GameObjectを作成

名前を[AimLabManager]とします。

[AimLabManager]

[AimLabManager]にScriptMachineをアタッチし、新しいグラフをMacrosというフォルダに作成し、そこに保存します。

グラフの名前は[AimLabGraph]とします。

[AimLabGraph]

数秒ごとに的を生成したいので、タイマーを設定します。

時間を計測する変数を追加します。[AimLabManager]のVariableにFloat型の変数[Time]を追加し、Graph Editorに[Time]を追加します。

[AimLabManager]にFloat型の変数[Time]を追加

Graph Editorに以下のノードを追加してください。

• Get Delta Time　
• Add　
• If　
• Greater　
• Set Object Variable　×2
• Float Literal

※ノードの画像はわかりにくいもののみ載せています。

Get Delta Time

Add

ノードを以下のように接続します。

今回は0.5秒ごとに的を生成するので、Greaterに0.5を入力します。

0.5秒を超えたら[Time]を０に戻します。そのためSet Object Variableを2つ用意します。

Set Object Variableを2つ用意

次にランダムな座標を作ります。Graph EditorにRandom Range, Vector3 Create(X,Y,Z)を追加します。

Random RangeはResult(Float Output)のものを選んでください。

Int型のものを選ぶと整数でランダムな数が選択されてしまいます。

今回はランダム性に幅をつけたいのでFloat型の変数を選びます。

また、今回はＸ軸とＹ軸にランダム性を持たせるのでRandom Rangeを2つ作ります。

Random Range

Vector3 Create(X,Y,Z)

ノードを以下のように接続します。

Random Rangeは上の変数が最小値、下の変数が最大値としてその間でランダムに数を出力します。　

今回はX軸は-4〜4、Y軸は0〜3にします。

ノードを接続

Instantiateでオブジェクトをで成してListに追加する

Instantiateを使ってオブジェクトを生成することができるので、これを使って的を作ります。

まず、的のPrefabを作ります。Hierarchyの＋ボタンをクリックし、３DObject→SphereをクリックしてSphereを作ります。

名前[Target]とします。

Sphereを作成

TargetをProject内のAssetフォルダにドラッグ＆ドロップしてPrefab化します。

ドラッグ＆ドロップしてPrefab化

Prefab化したらHierarchyのTargetを削除します。

Prefab化したTargetをGraph Editorにドラッグ＆ドロップすると以下のようなウィンドウがでるのでエンターを押して追加します。　

Prefab化したTargetをGraph Editorにドラッグ＆ドロップ

Graph EditorにInstantiate、Get Identityを追加します。

Instantiate、Get Identity

Instantiate、Get Identity

ノードを以下のように接続します。Instantiate　のそれぞれのポートについて説明します。

Get IdentityにはQuaternion型の(0,0,0,1)の値が入っています。

ノードを接続

実行します。ランダムな座標に[Target]を生成することができました。

ランダムな座標に[Target]を生成

For文を使ってListのオブジェクトに番号をつける

VariableにAot List型のListを追加します。名前は[TargetList]とし、Graph Editorに追加します。

Aot List型のListを追加

Graph Editorに以下のノードを追加してください。

• Add Item
• Count Item
• For Loop
• Get List Item
• Integer To String
• Set Name

※ノードの画像はわかりにくいもののみ載せています。

Integer To String

Get List Item

Set Name

以下のようにノードを接続します。

Instantiateの右の下のポートから生成したオブジェクトが出力されているので、それをAdd Itemを使ってリストに追加します。

Add Itemは左の真ん中のポートが追加先のリストを接続し、下のポートにはリストに追加するオブジェクトを接続します。

その後、リストに入っているTargetに名前を付けなおします。

For Loopとはある数を入力してその回数分Bodyに接続されている処理を繰り返すというものです。

Firstのポートには初期値が入力されています。

Stepの数が毎処理ごとにFirstの数に足されていき、Lastの値と同じになった時にFor Loopの処理を終え、Exitから処理が出ます。

Body後の処理を説明します。

Indexは今何回目のループかをInt型で出力しています。

To String　を使ってIndexをString型に変換しています。

リストの番号は格納された順番で0から番号が振られます。

Get ItemはIndexに接続された番号のリストに格納されている情報を得ることができます。

最後にSet Nameを使い名前を付けなおします。

上から2番目のポートには名前を帰るオブジェクトを接続し、その下のポートには変更する名前を接続します。

ノードを接続

実行します。生成したオブジェクトに0から順に番号を入れることができます。

オブジェクトに0から順に番号が入っている

的が生成される数を制限する

Variableの[Target List]をGraph Editorに追加します。

Graph Editorに以下のノードを追加してください。

• Count Items　
• Greater　
• If

※ノードの画像はわかりにくいもののみ載せています。

If

On Updateの後に以下のノードを付け足します。

今回は4つまで生成ます。

Greaterの変数に3を入力します（カウントは0から始まるので、0から3で4つという数え方です）。

[Target List]の要素が４を超えたら　Greater　がTrueになるので、Ifの後の処理が動かなくなります。

ノードを接続

シーンを実行します。的を生成する数を4つまで制限することができました。

生成する数を4つまで制限

今回のVisual Scripting のノードの全体図です。

ノードの全体図

後編の記事では的をクリックすると消える仕組みを紹介します。

Unity Visual Scripting 入門第8回：RaycastとListを使って的あてゲームを作る(後編)

The post Unity Visual Scripting 入門第7回：RaycastとListを使って的あてゲームを作る(前編) first appeared on STYLY.

Unity Visual Scripting 入門第5回：AddForceとTransFormを駆使したオブジェクトの基本操作

今回はCollisionを使用して当たり判定を付与する方法を解説します。

Collisionを利用した当たり判定

Hierarchyに空のGameObjectを追加し、[HitManager]という名前にします。

[HitManager]

[HitManager]にScriptMachineをアタッチし、新しいグラフをMacrosというフォルダに作成し、そこに保存します。

グラフの名前は[HitGraph]とします。

[HitManager]にScriptMachineをアタッチ。Macrosフォルダに保存。 グラフの名前を[HitGraph]に変更。

Hierarchyの＋ボタンをクリックし、3DObjectからCubeを作成します。名前を[TopObj]にします。

[TopObj]

[TopObj]のPositionは(0, 5, 0)に設定し、AddComponentからRigidBodyをアタッチします。

Box ColliderのIs Triggerのチェックを外しておきます。

RigidBodyをアタッチ。 Box ColliderのIs Triggerのチェックを外す。

再度、HierarchyにCubeを追加し、名前を[UnderObj]にします。

[UnderObj]のPositionは(0, 0, 0)と設定します。

[UnderObj], (0, 0, 0)

準備は完了です。

[HitManager]のHitGraphのVariableにGameObject型の変数[HitObj]を追加し、ValueにTopObjを代入します。

ValueにTopObjを代入

Graph EditorにOn Collision Enter, Debug.Log, String Literalを追加し、Variableから[HitObj]を追加します。

On Collision Enter, Debug.Log, String Literalを追加

On Collision Enter, Debug.Log, String Literalを追加

On Collision Enter, Debug.Log, String Literalを追加

このColliderが当たり判定といわれるものになります。

Collider

左のポートは接触するオブジェクトを接続します。

右のポートはColliderにはあたったオブジェクトの情報が格納されています。

Contactsには衝突したときの衝突地点と法線、衝突した二つのコライダーが格納されています。

Impulseには衝突したときの衝撃が格納されています。

Relative Velocityには衝突したときの相手の相対速度が入っています。

Dateには相手の情報が格納されています。

以下のようにノードを接続します。今回はHitObjに何かぶつかったときにOn Collision Enterの処理をさせます。

ノードを接続

実行します。

接触したオブジェクトの情報[UnderObj]をConsoleに表示

オブジェクト同士が接触したときに接触したオブジェクトの情報[UnderObj]をConsoleに表示できます。

Triggerを利用した当たり判定

[TopObj]のBox ColliderのIs Triggerのチェックをいれます。

Is Triggerにチェック

Is Triggerにチェックを入れることによって、オブジェクト同士がぶつからなくなり貫通します。

Graph EditorにOn Trigger Enterを追加します。

On Trigger Enterを追加

On Collision Enterの接続を切断し、以下のようにノードを接続します。

ノードを接続

Triggerは接触しないので衝突時の地点や衝撃などの情報はありません。

実行します。

接触したオブジェクトの情報「UnderObj」をConsoleに表示

オブジェクト同士が接触したときに接触したオブジェクトの情報「UnderObj」をConsoleに表示できます。

今回は当たり判定の作り方について紹介しました。

第6回はRaycastとListについて紹介します。

次回の記事は下記のリンクから確認できます。

Unity Visual Scripting 入門第7回：RaycastとListを使って的あてゲームを作る(前編)

The post Unity Visual Scripting 入門第6回：Collisionで当たり判定を付与する方法 first appeared on STYLY.

Unity Visual Scripting 入門第4回：画面切り替えとスコア表示 [連打ゲーム後編]

今回はAddForceとTransFormを駆使したオブジェクトの基本操作の方法を解説します。

AddForceを使用して移動する

Hierarchyに空のGameObjectを追加し、[ObjectController]という名前にします。

GameObjectを[ObjectController]という名前に変更

[ObjectController]にScript Machineをアタッチします。

Newをクリックしグラフを作成します。

[ObjectController]にScript Machineをアタッチ

Sciprt MachineのNewを押してグラフを作ります。

Macrosというフォルダを作り、その中に[ObjectManager]という名前で保存します。

フォルダを作り、[ObjectManager]という名前で保存

HierarchyにCubeを追加し、Positionを(0,0.5,0)に設定し、AddComponentから[Rigidbody]を追加します。

今回はこのオブジェクトを動かします。

CubeのPositionを(0,0.5,0)に設定。AddComponentから[Rigidbody]を追加

RigidbodyとはUnityにおいて物理演算をしてくれる機能です。

オブジェクトに重力をつけたり、力を与えたりできます。

Rigidbody

次にこのオブジェクトを置くためにHierarchyにPlaneを追加します。

Planeを追加

座標を(0,0,0)に設定します。

ObjectControllerのVariableにGameObject型の変数を追加し、名前を[Cube]とし、ValueにCubeを入れます。

ObjectControllerのVariableにGameObject型の変数を追加。

スペースキーを押したときに反応するようにノードを追加し、以下のように接続します。

ノードを接続

Graph EditorにAdd Forceを追加します。

Forceの値に力を加えたい方向に入力します。

Add Forceを追加

AddForceはオブジェクトに力を加えるノードです。

今回は上に飛ばすので(0,300,0)と入力しました。好きな数を入れてみましょう。

AddForceの上から2番目のノードは動かすオブジェクトを接続します。

Variableから[Cube]をGraph Editorに追加し、以下のようにノードを接続します。

ノードを接続

実行します。

Spaceキーでジャンプ

Spaceキーを押すとジャンプします。

TransFormを使ってオブジェクトを動かす

移動

Graph EditorにGet Position, Set Position, Vector3Literal, Addを追加します。

Get Position, Set Position, Vector3Literal, Addを追加

Vector3Literalを追加

AddForceの接続を切断し、CubeからRigidbodyを削除します。

一度追加したCompornentを削除するには、右の3つ並んでいる点を押してRemove Componentを押します。

AddForceを切断し、Rigidbodyを削除

Variableからもう1つCubeをGraph Editorに追加します。Vector3Literal　にはSpaceキーを押したときに移動する距離を入力します。

今回は(0,1,0)と入力します。

Get Positionはノードが接続されているオブジェクトの座標を取得することができます。

Set Positionは真ん中のポートに接続されているノードの座標に、一番下のポートに接続されている座標を代入することができます。

下のようにつなぎなおします。

ノードを接続

実行してみましょう。

上に移動した

拡大・縮小

Graph EditorにGet Local Scale,  Set Local Scaleを追加します。

Get Local Scale,  Set Local Scaleを追加

Get PositionとSet Positionの接続を切断します。

Vector3Literalの値を(1,1,1)に変更します。

Get Local Scaleはノードが接続されているオブジェクトのスケールを取得することができます。

Set Lacal Scaleは真ん中のポートに接続されているノードのスケールに、一番下のポートに接続されているスケールを代入することができます。

以下のように接続します。

ノードを接続

実行します。スペースキーを押すたびに1メートルずつ大きくなっていきます。

スペースキーを押すたびに大きくなる

回転

RotateをGraph Editorに追加します。

RotateをGraph Editorに追加

回転は計算方法がPositionやScaleとは異なるので、Rotateという別の関数が用意されています。

拡大・縮小に使ったノードを切断し、以下のように接続します。

今回は30度ずつ回転するので、Vector3の値は(30,0,0)と入力します。

Rotateは上から2番目のポートには今の角度、上から3番目のポートにはどれくらい回転するかを接続します。

ノードを接続

実行します。スペースキーを押すたびに30度ずつ回転させることができました。

スペースキーを押すたびに30度ずつ回転する

特定の角度に回転させる

Graph EditorにEuler(Euler), Set Rotationを追加します。

Euler(Euler), Set Rotationを追加

Set Rotationを追加

回転に使ったノードを切断し、以下のようにノードを接続します。Eulerの値は(0,30,0)に設定します。

Set Rotationは真ん中のポートに変更するオブジェクトを接続し、一番下にQuaternion型の変数を接続します。

ノードを接続

実行します。スペースキーを押すとCubeがY軸に対して30度だけ回転しました。

ペースキーを押すとY軸に対して30度だけ回転する

今回はオブジェクトの動かし方について学びました。

第6回は当たり判定について紹介します。

次回の記事は下記のリンクから確認できます。

Unity Visual Scripting 入門第6回：Collisionで当たり判定を付与する方法

The post Unity Visual Scripting 入門第5回：AddForceとTransFormを駆使したオブジェクトの基本操作 first appeared on STYLY.

Unity Visual Scripting 入門第3回：時間とスコア計算をする方法 [連打ゲーム前編]

今回は前回の連打ゲーム作成の後編です。

画面切り替えとスコア表示する機能を追加していきます。

SetTextを使ってテキストを表示する

GameControllerのVariablesに[ScoreText]と[TimeText]という変数を追加しましょう。

TypeをTMPro→Text Mesh Pro UGUIを選択します。

ScoreTextにはHierarchyの中のCanvasに入っているScoreをValueにドラッグ＆ドロップで設定します。

TimeTextにはCanvasの中のTimeをValueに同様にして設定します。

[ScoreText]&[TimeText]

EditorGraphにToStingを追加します。

このノードはInt型やFloat型をString型（文字列型）に変更することができます。

なので基本的に数字をTextに表示するときはこのノードを通します。

ToSting

数字の前に文字を入力したいのでGraphEditorにConcat(Arg0、Arg1)とString Literalを追加します。

Argの数が多ければ多いほど多くの文章を連結することができます。

Concat(Arg0、Arg1)

String Literal

StringLiteralには[Score:]という文を入力してください。

Concatは異なる2つの文字列を一つの文字列にするものです。上には、前に来る文字、下には後に来る文字が入ります。

GraphEditorにTextMeshPro UGUI:SetTextを追加します。

TextMeshPro UGUI:SetText

スコア計算

スコア計算の機能から作っていきます。

前回のスコア計算の続きから以下のように接続します。

Graph Editorに[ScoreText]をVariableから追加し、SetTextの真ん中のポートには変更するTextMeshPro UGUIのUIを接続し、一番下のポートには表示する文章を接続します。

Connect nodes

スコア計算の部分はこれで完成です。

時間計算

次に時間計算の機能を完成させます。スコア計算で使用した以下のノードをCtrl（Macの場合Cmd）＋Dを押して複製します。

複製したものを前回の時間計算のノードに接続していきます。

Graph EditorにVariableからTimeTextを追加します。

SetTextの真ん中のポートをTimeTextと接続し、To Srtingに前回の時間計算ノードを接続します。

Stringの中身を[Time:]にします。

Connect nodes

これで時間計算の機能は完成です。

SetActiveを使ってタイムアップ画面を表示する

連打ゲームの制限時間は10秒間なのでそれを超えたらタイムアップ画面を表示させましょう。

VariableにBool型の変数[Stop]を追加し、ValueはFalse（チェックボックスがオフの状態）とします。

TextMeshPro UGUI型の変数[ResultText]　ValueはCanvas→TimeUp→ResultScore

GameObject型の[ResultUI],[RestartButton]

[ResultUI]のValueはCanvas→TimeUp

[RestartButton]のValueはCanvas→TimeUp→RestartButton

をGraphEditorに追加します。

Add variables

GraphEditorに先ほど作成した変数と[Time]を追加します。

GraphEditorにIf、Less、On Update、SetVariableノードを追加します。

If、Less、On Update、SetVariable

以下のようにノードを接続します。Lessを使うことによって数の比較をすることができます。

今回は残り時間が０より低くなるとLessの条件とオブジェクト[Time]の状態が一致しIfのTrueから処理が走り、Bool型の変数[Stop]がTrueになります。

Connect nodes

次にタイムアップアップ画面をSetActiveを使用し表示させます。

SetActiveとはオブジェクトをアクティブ/非アクティブを設定するノードです。

アクティブ/非アクティブとはオブジェクトの機能をすべて停止させるかどうかです。

非アクティブにすると画面に表示するための機能も停止するので見えなくなります。

EditorGraphにSetActiveを追加します。

SetActive

続きからノードを接続していきます。以下のようにノードを接続します。

SetActiveの真ん中のノードにアクティブを設定するオブジェクトを接続します。

一番下のBool値はオブジェクトのアクティブ/非アクティブを選択できます。

チェックが付いている場合はアクティブ。ついていない場合は非アクティブです。

Connect nodes

今回はResultUIをアクティブ化したいのでチェックを入れます。

次にスコアの結果を表示させましょう。

スコアのテキスト表示をするノードをCtrl（Mac：Cmd）＋Dで複製します。

Ctrl（Mac：Cmd）＋D

VariableからScoreを追加します。

続きから、以下のようにノードを接続します。

今回は[ResultText]に表示させたいのでSetTextに[ResultText]を接続します。

SetText→[ResultText]

これでタイムアップ画面の表示機能は完成です。

LoadSceneをつかってシーン遷移をする

RestartButtonが押された時にシーンをもう一度読み込むことで、やりなおしができるようにします。

スコア用のボタンと同様にOn Pointer Clickを追加します。

GraphEditorにLoadScene（Scene Name）を追加します。

LoadScene（Scene Name）

Load Scene　はSceneNameに遷移するSceneの名前を入力することによって遷移することができます。

今回はLoad SceneのSceneNameに[ClickGameSample]と入力します。

以下のようにノードを接続します。

Connect nodes

実行してみましょう。

Time&Score

これで連打ゲームは完成です。

The post Unity Visual Scripting 入門第4回：画面切り替えとスコア表示 [連打ゲーム後編] first appeared on STYLY.

今回は第1,2回で勉強した内容を活用して、連打ゲームをつくります。

連打ゲームの記事は前後編になっており、この記事は前編です。

これまでの記事は下記のリンクから確認できます。

Unity Visual Scripting 入門：ノード接続の基礎を学ぶ

Unity Visual Scripting 入門第2回：If文、キー入力、コルーチンで「Hello World」を表示する方法

連打ゲームの概要

10秒以内に何回ボタンをクリックすることができるか競うゲームです。

FIN

Unityにパッケージをインストール

UI配置のみ行ったサンプルをダウンロードしてください。

https://github.com/Manufuki/ClickGameUISample.git

緑色の「Code」を押しDownload ZIPを選択。ダウンロードしたZIPファイルを解凍してください。

わからなくなってしまったら

筆者が作成した見本をダウンロードしてください。

https://github.com/Manufuki/ClickGame.git

Github

Asset→Import Package→Custom Packageを押します。

Asset→Import Package→Custom Package

ClickGameUpdateを選択し「開く」を押します。

ClickGameUpdate→Open

Importを押します。

Import

Import TMP Essentialsを押します。

Import TMP Essentials

環境によって表示されないことがありますが問題はありません

Visual Scriptingでボタン入力

インポートしたパッケージのシーン「ClickGameSample」を開きます。　

HierarchyにCreateEmptyでGameObjectを追加し、名前を[GameController]に変更します。

AddComponentから[GameController]にScript Machineをアタッチします。

GameController→Script Machine

Sciprt MachineのNewを押してグラフを作ります。

Macrosというフォルダを作り、その中に[GameManager]という名前で保存します。

Macros→GameManager

GraphEditorにOn Pointer Clickを追加します。

On Pointer Click

VariablesにGameObject型の変数を追加します。

変数名は[Button]、ValueにはCanvasの中のButtonを入れます。

Add GameObject Variables

ButtonをGraphEditorに入れ、そして以下のようにつなげます。これでボタンの機能は完成です。

On Pointer Clickは左のポートにボタンの役割となるオブジェクトを接続することにより、そのオブジェクトをクリックしたときに実行するようにできます。

Connect nodes

Visual Scriptingで計算

連打ゲームのスコア計算と時間計算をしていきます。

基本的な計算ノードは以下です。

Main nodes

今回はAddを使用します。Addにも種類があり、かっこの中は使う変数になっています。

Genericはすべての変数に対応しているので基本的にはGenericと書いてあるAddを選びましょう。

ほかの計算ノードも同様です。

Generic

VariablesにInt型とFloat型の変数を追加します。

Int型の変数の変数名[Score]、Valueは0に設定。

Float型の変数の変数名[Time]、Valueは10に設定します。