Animate CCのレイヤー深度機能を使って奥行きのある水族館を作ってみた

2018.03.02

こんにちは、アカウントセールス部のフロントエンドエンジニア、土樋です。

ちょっと前になりますが、Adobe Animate CCの2017年10月リリース版にレイヤー深度機能が付きました。

レイヤー深度機能を使うとレイヤーに奥行きを設定することができるので、簡単に遠近感のあるアニメーションを作成することができます。

今回はこの機能を使ってゆるい水族館を作ってみたいと思います。

どうやってレイヤー深度を設定するの？

レイヤー深度の設定について、水族館を作りながら見ていきましょう。

（１）グラフィックを作成する

水族館のグラフィックを作ります。この時、お魚、人、背景等を別々のレイヤーに配置するようにします。

（２）高度なレイヤー機能を有効化

タイムラインのオン／オフボタンをクリックすると、高度なレイヤー機能が有効になります。

（３）レイヤー深度パネルを表示

オン／オフボタンの右に深度パネルボタンが表示されるのでクリックすると、レイヤー深度パネルが開きます。

レイヤー深度パネルでは、左にレイヤー、右に深度が視覚的に分かるようなグラフィックが表示されます。

（４）各レイヤーに深度を設定

初期状態ですと全てのレイヤーの深度が0に設定されているため、深度のラインが重なって表示されます。

数値を直接設定したり、ラインをドラッグして深度を設定します。
深度を設定するとステージ上のオブジェクトが奥に行ったり手前に来たりするので、大きさを調整しながら設定します。

（５）カメラを追加する

カメラを動かすため、ツールのカメラをクリックして追加してください。

以上でレイヤー深度の設定が完了しました。
グラフィックを別々のレイヤーに配置してから、レイヤー深度パネルで深度を設定するというわりとシンプルな作業になります。

カメラにトゥイーンを設定してみる

レイヤー深度の設定をしてしまえば、カメラにトゥイーンを設定するだけで奥行きのあるアニメーションを作ることができます。

以下サンプルでは、カメラのレイヤー深度にトゥイーンを設定しただけのものになります。
これだけでも1枚絵を拡大しただけとは違った演出ができていると思います。

カメラをスクリプトで制御してみる

カメラをスクリプトで制御することで、インタラクティブなコンテンツを作ることができます。

次のサンプルでは、画面の中央からマウスカーソルが移動した方向にカメラを移動するスクリプトを設定しています。
レイヤー深度を設定していると、カメラにトゥイーンを設定するだけで立体感を表現できることができます。

設定しているソースコード（JavaScript）は以下になりますのでご参考ください。

//カメラオブジェクト取得
var camera = AdobeAn.VirtualCamera.getCamera(exportRoot);
var centerPos = new createjs.Point(); //ステージの中心
var mousePos = new createjs.Point(); //カーソルの位置
var CAMERA_MOVE_SPEED = 1.5; //カメラの移動スピード
//カーソル位置を更新
stage.addEventListener('stagemousemove', function(e) {
mousePos.x = e.stageX;
mousePos.y = e.stageY;
});
//毎フレーム実行
createjs.Ticker.addEventListener('tick', function(e) {
//カメラ位置取得
var cameraPos = camera.getPosition();
//ステージの中心点を取得
centerPos.x = canvas.width / 2;
centerPos.y = canvas.height / 2;
//カーソルの位置によって移動する位置算出
var cameraPosX = cameraPos.x + Math.sign(centerPos.x - mousePos.x) * CAMERA_MOVE_SPEED;
var cameraPosY = cameraPos.y + Math.sign(centerPos.y - mousePos.y) * CAMERA_MOVE_SPEED;
//カメラの移動を制限
if (-90 < cameraPosX && cameraPosX < 90) {
cameraPos.x = cameraPosX;
}
if (-70 < cameraPosY && cameraPosY < 50) {
cameraPos.y = cameraPosY;
}
//カメラ位置を更新
camera.setPosition(cameraPos.x, cameraPos.y);
});

まとめ

レイヤー深度機能のように、バージョンアップによって面白い機能が追加されているAnimate CCですが、現時点で関連書籍がほとんど出版されていないことが残念です。
Flash（Animate CCの前身）の頃のように、次から次へと新しい書籍が出てきてワクワクしたいなぁと個人的に期待しております。
頑張れAnimate CC！