マニュアル キャンセル

仮想現実のオーサリングとパブリッシング

 

Animate では、このような魅力的なコンテンツを容易に作れるよう、VR 360 および VR パノラマドキュメントタイプが導入されました。また、新しい仮想現実ドキュメントタイプを使用して、3D モデル(.glb ファイル)を Animate プロジェクトに読み込み、3D コンテンツにアニメーションを作成することもできます。 

VR ドキュメントタイプで作成されたコンテンツをプレビューするには、新しく導入された VR 表示パネルを使用します。VR 表示パネルで、MovieClip インスタンスをクリックして移動できます。Animate では、オブジェクトをクリックして移動すると、オブジェクトが自動的に検出されます。VR ビューでは 3D 空間内にオブジェクトを配置できます。VR 表示のオブジェクト(ムービークリップ)の配置に対する変更は、自動的に第 2 ステージへ反映されます。タイムラインパネルでレイヤーをテクスチャレイヤーとしてマークして、これら 2 つのドキュメントタイプのそれぞれの場合に円柱または球体上にラップされるようにすることもできます。

また、Animate では、一連の豊富な API を利用して、実行時に仮想現実アニメーションを管理することもできます。例えば、ボタンをクリックして、仮想現実環境に複数のオブジェクトを追加できます。 

 Animate の VR 360 および VR パノラマは、2018 年 10 月リリースのベータ版です。

仮想現実のドキュメントタイプ

仮想現実(VR)には 2 つのドキュメントタイプがあります。

VR パノラマ

  • このドキュメントタイプを使用して、仮想現実アプリケーション用のパノラマコンテンツを作成します。 
  • このドキュメントタイプでは、テクスチャレイヤー上に直接描画されたコンテンツは円柱上にラップされます。
  • テクスチャレイヤー上にパノラマ画像を配置するか、背景を描画するかを選択できます。 
  • Animate では、作成した 2D アニメーションを、インタラクティブ機能を備えたパノラマコンテンツに変換できます。 

VR 360

  • このドキュメントタイプを使用して、仮想現実アプリケーション用の 360°コンテンツを作成します。  
  • このドキュメントタイプでは、テクスチャレイヤー上に直接描画されたコンテンツは球面上にラップされます。
  • 正距円筒画像を使用するか、コンテンツを描画することを選択できます。 
  • Animate では、作成した 2D アニメーションを、インタラクティブ機能を備えた 360°コンテンツに変換できます。
起動画面での VR 360 およびパノラマ
起動画面での VR 360 およびパノラマ

仮想現実コンテンツのオーサリングとパブリッシング

Animate で仮想現実コンテンツを作成するには、次の手順に従います。

  1. 背景用に、ステージで 360 またはパノラマ画像を読み込みます。

    画像サイズが大きい場合は、ステージビューのサイズを調整できます。

    • サイズを設定するには、変更/ドキュメントを選択します
    •  「コンテンツに合わせる」をクリックします

    ウィンドウの右上隅にある「ステージの中央を表示」アイコンをクリックして、画像を画面の中央に設定します。

  2. レイヤーをテクスチャレイヤーとして作成するには、以下のスクリーンショットのように、タイムラインパネルですべてのレイヤーのテクスチャラッピングを作成アイコンをクリックします。

    レイヤーのテクスチャラッパーの作成
    レイヤーのテクスチャラッパーの作成

    テクスチャレイヤーは、選択したドキュメントタイプに応じて、円柱または球体をラップします。

  3. ステージにオブジェクトを追加し、アセットに応じてクラシックトゥイーンまたはモーショントゥイーンをオブジェクトに追加し、アニメーションを作成します。 

    VR 360 ステージ
    VR 360 ステージ

    上記のスクリーンショットは、VR 360 ドキュメントタイプの正距円筒画像、ガイド付きモーションパスの付いた鳥、およびタイムラインでクラシックトゥイーンを表示した Animate のステージング表示を示しています。 

  4. ウィンドウ/VR 表示を使用してコンテンツをプレビューします。

    VR 表示を使用した VR コンテンツのプレビュー
    VR 表示を使用した VR コンテンツのプレビュー

    VR 表示ダイアログで「VR 表示の起動」ボタンをクリックします。

    VR 表示パネル
    VR 表示パネル

    VR 表示のプレビューモードでは、コンテンツを初期状態にリセットするには、「リセット」ボタンを使用します。オーサリングステージでの変更は VR 表示には自動的には反映されません。ステージング環境で、アセットに適用した変更を表示するには、「更新」をクリックします。

    VR 表示の「更新」オプションと「リセット」オプション
    VR 表示の「更新」オプションと「リセット」オプション

    プレビューモードで MovieClip インスタンスを移動させることができます。Animate では、マウスを重ねるとオブジェクトを自動的に検出します。以下のスクリーンショットで示すように、マウスをオブジェクトの上に移動すると、カーソルの形状がクロスバーアイコンに変わります。選択したドキュメントに応じて、円柱または球体に沿ってオブジェクトを移動できます。

    VR 表示ウィンドウをパンするには、プレビュー画面をクリックしてドラッグします。 

    オブジェクトを移動するためのクロスバーアイコン
    オブジェクトを移動するためのクロスバーアイコン

  5. ファイル/パブリッシュまたは Ctrl + Enter キーを使用して、コンテンツをパブリッシュします。パブリッシュすると、画像は Animate で円柱または球体メッシュ上にラップされます。これらのレイヤーにレイヤーやアニメーションコンテンツを追加できます。

    VR 360 のパブリッシュされた出力のサンプルが、以下のアニメーション GIF で示すように表示されます。 

    VR 360 出力サンプル
    VR 360 出力サンプル

    VR パノラマ出力サンプル
    VR パノラマ出力サンプル

    仮想現実コンテンツをパブリッシュする際、ホストされた JavaScript ライブラリをランタイムとして使用することを選択できます。デフォルトでは、Animate は、ホストされたライブラリから、パブリッシュされたコンテンツ用のランタイムを使用します。パブリッシュする出力と一緒にランタイムをパッケージ化する場合は、パブリッシュ設定のオプションをオフにすることができます。 

    パブリッシュ設定
    ライブラリのパブリッシュ設定

仮想現実によるアニメーションの最新化

仮想現実は、市場で優勢なトレンドです。コンテンツに仮想現実を導入するには、この例の最後にあるチュートリアルを参照して、次の手順に従ってください。

  1. ホーム」タブで、「詳細」をクリックします。

  2. VR パノラマ」を選択して、「作成」をクリックします。

Animate でのパノラマコンテンツの作成方法

パノラマ表示にさらにエフェクトを追加して仮想体験を向上させる方法を学習するには、このビデオをご覧ください。

WebGL- glTF (Standard および Extended) に関するビデオチュートリアル

WebGL-glTF Export(Standard および Extended)の使用方法を示すビデオ

3D コンテンツの使用

また、仮想現実ドキュメントタイプを使用して、3D モデル(.glb ファイル)を Animate プロジェクトに読み込み、3D コンテンツを作成できます。

  1. VR(360)プレビューまたは VR(パノラマ)ドキュメントタイプを作成します。

  2. ファイル/読み込みを選択し、.glb ファイルを参照してステージまたはライブラリに読み込みます。

    3D コンテンツのステージへの読み込み
    3D コンテンツをステージに読み込む

  3. ムービークリップオブジェクトと似たアニメーションやインタラクティブ機能を追加し、パブリッシュします。

    VR 表示で 3D モデルをプレビューすることもできます。

実行時の仮想現実の使用

また、Animate では、API を使用して、実行時に仮想現実アニメーションを管理することもできます。例えば、ユーザーがボタンをクリックしたときに、360 仮想現実環境にオブジェクトを追加できます。 

仮想現実ランタイム API のリストは次のとおりです。

パッケージ:anWebgl

properties

名前

タイプ/ ソースファイルで

アクセス

説明

ステージ

ステージ

RW

ステージプロパティの取得/設定

anWebgl.stage

virtualCamera

VirtualCamera

RW

デフォルトカメラにアクセスする

anWebgl.virtualCamera

Root

MovieClip

RO

一番上表示オブジェクト(現在のシーンタイムライン)。

anWebgl.root

方法

名前

プロトタイプ

説明

addGLBFile

addGLBFile(filePath: string, successCallback : function, errorCallback : function):void

指定した GLB ファイルから 3D モデルを読み込みます

anWebgl.addGLBFile("model.glb" , successCallbackFunction, errorCallbackFunction).

playAll

playAll() : void

ルートを含むすべてのムービークリップのアニメーションを再生します

anWebgl.playAll();

stopAll

stopAll() : void

ルートを含むすべてのムービークリップのアニメーションを停止します

anWebgl.stopAll();

クラス:MovieClip

継承:DisplayObjectContainer

properties

方法

名前

プロトタイプ

説明

再生

play(): void

ムービークリップのアニメーションを再生します。

anWebgl.root.getChildByName("名前").play();
(または)

this.play(); 

停止

stop(): void

ムービークリップのアニメーションを停止します。

anWebgl.root.getChildByName("name").stop();

 

playAll

playAll() : void

ルートを含むすべてのムービークリップのアニメーションを再生します。

anWebgl.root.getChildAt(0).playAll();

 

stopAll

stopAll():void

ルートを含むすべてのムービークリップのアニメーションを停止します。

anWebgl.root.getChildAt(0)).stopAll();

 

クラス:DisplayObject

継承:IEventDispatcher

名前

プロトタイプ

説明

hitTestPoint

hitTestPoint(x, y, Boolean).

ヒットしたオブジェクトのタイプに基づいて displayObject/displayObjectContainer/movieClip を返します。

x と y は画面上の点の座標です。

anWebgl.root.hitTestPoint(300, 200, true, false);

名前

タイプ/ ソースファイルで

アクセス

説明

X

Number

RW

X 軸上の平行移動

var name =anWebgl.root.getChildByName("name");
name.x+=10;

 

Y

Number

RW

Y 軸上の平行移動

var name = anWebgl.root.getChildByName("name");
name.y+=10;

 

Z

Number

RW

Z 軸上の平行移動

var name = anWebgl.root.getChildByName("name");
name.z+=10;

 

scaleX

Number

RW

X 軸に沿って拡大・縮小

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleX=2;

 

scaleY

Number

RW

Y 軸に沿って拡大・縮小

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleY=10;

 

scaleZ

Number

RW

Z 軸に沿って拡大・縮小

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleZ=10;

 

rotationX

Number

RW

X 軸に沿って回転

anWebgl.root.getChildByName("name").rotationX+=30;

(または)

anWebgl.root.movieClip_name.rotationX+=30;

rotationY

Number

RW

Y 軸に沿って回転

anWebgl.root.getChildByName("name").rotationY+=30;

 

rotationZ

Number

RW

Z 軸に沿って回転

anWebgl.root.getChildByName("name").rotationZ+=30;

 

Parent

DisplayObjectContainer

RO

親コンテナ

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.parent)

 

Visible

ブール値

RW

オブジェクトの表示

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.visible);

クラス:DisplayObjectContainer

Inherits: DisplayObject

名前

プロトタイプ

説明

numChildren

numChildren:num

オブジェクトの子の数を返します

anWebgl.root.movieClipInstanceName.numChildren;

removeChild

removeChild(obj:DisplayObject):void

引数オブジェクトを削除します(存在する場合)

anWebgl.root.movieClipInstanceName.removeChild(childObj);

Contains

contains(obj:DisplayObject):boolean

引数オブジェクトが子の場合は true、それ以外の場合は false を返します

anWebgl.root.movieClipInstanceName.contains(childObj);

getChildAt

getChildAt(index:Number): DisplayObject

引数インデックスで子を返します

anWebgl.root.movieClipInstanceName.getChildAt(2);

getChildByName

getChildByName(name:String):DisplayObject

引数名を持つ子を返します(存在する場合)

anWebgl.root.movieClipInstanceName.getChildByName(childName);

クラス:Stage

properties

名前

アクセス

説明

stageWidth

RO

ステージの幅

anWebgl.stage.stageWidth

stageHeight

RO

ステージの高さ

anWebgl.stage.stageHeight

Color

RW

ステージの背景の色

anWebgl.stage.color

クラス:VirtualCamera

方法

名前

プロトタイプ

説明

getCamera

getCamera()

カメラオブジェクトを取得します。実行時にカメラのプロパティを取得または設定するために使用します。

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("カメラの位置 x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

getPosition

getPosition()

カメラの現在位置を示す x、y、z のプロパティを持つオブジェクトを返します。

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("カメラの位置 x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

setPosition

setPosition()

入力パラメーターで指定された絶対位置にカメラを移動します。デフォルト値は 0 です。

let cameraPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setPosition(cameraPos);

 

moveBy

moveBy()

現在の位置を基準としてカメラを移動します。

let moveByPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().moveBy(moveByPos);

 

resetPosition

resetPosition()

カメラ位置を元の位置 (0,0,0) にリセットします。


anWebgl.virtualCamera.getCamera().resetPosition();

 

SetRotation

SetRotation()

入力パラメーターで指定された絶対角度でカメラを回転させます。

let __rotation__ = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setRotation(__rotation__);

 

resetRotation

resetRotation()

カメラの角度を 0 にリセットします。

anWebgl.virtualCamera.getCamera().resetRotation();

 

ヘルプをすばやく簡単に入手

新規ユーザーの場合