PNG,GIF)を活用したVR/ARシーンの制作Tipsをご紹介します。Studioにログインします。Temaplateをコピーしてください。STYLYにログインした状態で以下URLをクリックすると、VR用グラフィックのテンプレートシーンがコピーされます。https://gallery.styly.cc/scene_copy?s=70cdae0b-e3b8-48f7-b99d-c4b24b60535テンプレートシーンを活用しながら、TipsやArrangeIdeaを学習してください。Templateをコピーしてください。STYLYにログインした状態で以下URLをクリックすると、AR用テンプレートシーンがコピーされます。https://gallery.styly.cc/scene_copy?s=5c87f60b-3ed2-402c-9ca4-4bb0bfb1e51dテンプレートシーンを使用しながら、TipsやArrangeIdeaを学習してください。Studioでシーン編集ボタンをクリックします。学習した上で進んでください。最後に、これ以降のセクション名の前についている【VR/AR】のタグについて説明いたします。【VR】・・・主にVR作品作りで活かせる内容を学習できる【VR/AR】・・・VR/AR両方の作品作りで活かせる内容を学習できるこちらのタグを参考に自分が身につけたいスキルを学習していきましょう。準備は以上になります。以下は、ARシーンを作る人のみお進みください。VRシーンを作る方はこちらは飛ばしていただいて構いません。Templateの中心は原点と呼ばれます。STYLYでは原点を軸にARコンテンツが表示されます。マークが表示される位置です。Templateの中心が、スマートフォン版STYLYでARシーンを起動した際に表示される原点マークの位置と同じであることを覚えておきましょう。Positionは使用しません(機能しません)。ARシーンを作る際は、原点に合わせてアセットを配置することを理解しておきましょう。Templateには、現実世界と位置を合わせるために役に立つアイテムがあります。1つ目は、コンテンツゾーンレイアウト(ヒエラルキーメニューにはAR_tempalteの名前になっています)です。幅と高さが測れるようになっています。2つ目は、プレビュー画面です。手前にスマートフォンを持った手とシーンを反映した画面を確認することができます。プレビュー画面を見ながら、現実世界でどうARシーンが見られるのか、イメージと合っているか、といった内容を確認しながら作品を作っていきましょう。コンテンツゾーンレイアウトを拡大縮小することによって、図れる幅と高さの範囲を広げられます。コンテンツゾーンレイアウトの拡大縮小に連動して、プレビュー画面も遠くの距離に移動します。規模の大きいコンテンツを作る際に利用してください。使い方は、ヒエラルキーメニューからAR_Templateを選択した状態で、[R]キーを押して、ギズモの中心を左クリックで選択して、拡大縮小ができます。Gridを削除しないでください。[z]キー(一つ前に戻る操作)を押して、もとに戻してください。Skybox(天球)とGround(地面)はARシーンでは使用しないため、使わないでください。画像をアップロードして配置する実際にシーン上に画像データをアップロードして作品を配置してみましょう。GIFに対応しています。容量が大きすぎるとシーン自体が大きくなってしまうため注意してください。今回はサンプルとして、ライセンスフリー・出展表示が必要ない画像・動画のフリーサイト「Pexels」のデータを使用します。https://www.pexels.com/ja-jp/ライセンスに関しては以下に記載されています。https://www.pexels.com/ja-jp/license/実際にSTYLYに画像データをアップロードしましょう。メニューのアセットアイコンを選択します。アセット一覧が表示されます。画像データをアップロードします。SELECTを選択してください。フォルダダイアログが表示されるので、アップロードしたいデータを選択しましょう。選択完了したら、Uploadボタンを押してください。Uploadボタンを選択すると、Uploadの進捗を表示する青いバーが表示されます。選択後の画面にて、画像のスクリーンを選びます。Screenにしました。Studio上に像データが表示されますこれで画像データをアップロードできましたので、テンプレートシーン内の好きな場所に配置してみましょう。ボックスや画像を並べて、展示空間を作るシーン上に既に配置されてある白いボックスに沿って、先ほどアップロードした画像オブジェクトを配置しましょう。Studio上のアセットを自由に移動させたり、回転させたり、大きさを変える方法を説明します。先ほどアップロードした画像オブジェクトを選択します。(選択されたアセットは灰色になります。)アセットの選択方法はヒエラルキーメニューにあるアセットをクリックするか、Scene上のアセットをクリックします。アセットを選択すると、アセットにマニピュレータが表示されます。マニピュレーターとは、赤・緑・青の3方向の矢印のことです。下記ショートカットキーを使用して切り替えることもできます。モードに切り替えて、マニピュレーターをドラッグすれば、アセットを移動できます。Zキー)でアセットをひとつ前の状態に戻すことができます。モードに切り替えて、マニピュレーターをドラッグすれば拡大縮小できます。数値入力して操作する方法マニピュレーターの数値部分をクリックすると、直接数値を編集できるようになります。モードすべてに対応)。操作を戻したい場合は、[Ctrl]キー+[Z]キーをクリックすると操作を戻せます。この操作方法で先ほどアップロードした画像データを上記で説明した方法で以下のようにホワイトキューブの前に配置してみましょう。3つ画像をアップロードし、等間隔に配置するとギャラリーのようになります。先ほどのアセットの変形方法を使用して、ホワイトキューブを複製し、展示の壁を増設しましょう。WhiteBOXアセットを選択します。歯車マークをクリックし、「Duplicate」をクリックします。「Duplicate」は、アセットを複製をするアイコンです。複製が完了すると、最下層に追加されます。WhiteBOXをX軸にずらし、並列させましょう。画像一つが掲示できる大きさに変化させます。最後に回転させましょう。Zの値を0にして、先ほどのWhiteBOXに対して垂直方向に配置しました。これで展示場所を追加することができました。画像オブジェクトを追加し、展示しましょう。RotatingObjectを使って、動きのあるシーンを作る画像オブジェクトのアップロードの際に、回転するスクリーンを選択すると画像データを回転させることができます。回転するスクリーンはスクリーンメニューの一番下に表示されます。クリックし、アップロードされた画像を選択することで表示されます。Sphereを選択します。Studioに表示されます。3DCGソフトを使えない人でもアニメーションのついた3DCGを空間に配置することができます。自分の制作した素材などを有効活用し、3DCGで空間を演出しましょう。Imageのカスタムアセットには、画像オブジェクトを回転させることができるアセットがあります。Imageが回転する画像のアセットになります。SELECTでアップロードしたい画像を選びます。Angleの数値が回転の速度となります。SCENEでシーンに配置します。平面の素材を立体的に見せる画像を使用したテクニックとして、平面画像を2枚重ねて立体的にみせる手法を紹介します。木や植物などはより立体的に見えやすいです。背景が透過されている木の画像(PNG画像)をアップロードしましょう。Duplicateで複製します。立体的に見えるように配置できました。Screenで配置し、地面のように配置することで、よりリアルに表現することができます。GIFを使って動きのあるオブジェクトを配置するSTYLYの画像アセットはGIFにも対応しています。GIFの画像アセットを使用すると、空間に動きのあるグラフィックを配置することができます。アニメーションを空間上で表現できるため、配置の仕方や3DCGと組み合わせると効果的に表現することができます。Screen以外をお使いください。画像を地面に貼り付けるアレンジテクニックの一つとして、画像アセットを床にすることができます。Screen」を選びましょう。以下のように表示されます。現状だと、元のPlaneオブジェクトが重なってしまっています。Screenを大きくしましょう。これで床オブジェクトを配置できました。画像をSkyboxに貼り付ける画像データをSkyboxとして、全天球状に表示させることができます。Screenを選びましょう。Skyboxがアップロードした画像になりました。Spheretを空間で包み込むと、動く背景を作ることができます。PNGのように背景が透過されている画像を使うと、レイヤーのように奥行きを背景に表現できます。Sphereを選択する。最初は小さく表示されてしまいます。Scaleを大きくし、空間を包むようにしましょう。背景を上手に表現し、空間を演出しましょう。Venue」プロジェクトでんぱ組.incとXRクリエイターが協力し、渋谷スクランブル交差点で新しい音楽体験を創り出そう。総額300万円の還元金、制作アセットの提供、審査にはでんぱ組.incも参加!あなたのアイデアで都市をステージに変えましょう。スマホがなくなる日』(幻冬舎)10年後のテクノロジーを誰が想像できるだろうか──。2024年、ついに「空間を身にまとう時代」の実現を加速するデバイスが登場!人類はスマホの小さな画面から解放され、空間という無限のキャンバスを手に入れる。スマホがなくなる日、次世代デバイスでどんなミライをつくれるのか。スマホがなくなる日──。この先に続くミライは、本書を読んで創造してみてください。