📑
PlayCanvasエディター上からシンプルなアニメーションを作成できるmotion-playcanvasを使ってみました。
この記事について
PlayCanvasエディターで利用できるアニメーションを作成するためのプラグインmotion-playcanvasについて紹介します。
cemさんの作成しているPlayCanvasでアニメーションを作成するためのプラグインです。
コードは、GitHubのリポジトリで公開されています。
PlayCanvas Motion (Motion.js)は、PlayCanvasの軽量プラグインで、タイムライン機能を備えたシンプルなアニメーションを作成できます。Motion.jsを使用すると、シーン内のボックスやオブジェクトを簡単に動かしたり、きれいにループさせたり、再生速度と方向を制御することができます。
実際にプラグインを利用して作成したプロジェクトはこちらです。
プロジェクト: https://playcanv.as/b/314bc4f2
作者(Cem)さんの紹介ツイート
PlayCanvasにインポート
1. GitHubのリポジトリからダウンロード
Motion.jsをダウンロードします。
2. PlayCanvasのプロジェクトにインポート
Motion.jsをPlayCanvasプロジェクトで使用するには、motion.jsファイルをプロジェクトに追加し、スクリプトに含めるだけです。
3. エンティティにスクリプトを追加
アニメーションを付けてみる
設定できる項目は、name, position, rotation, scale, speed, autoplay, loopの項目が設定できます。
位置、回転、スケールの調整について
位置や回転、スケールについては、PlayCanvasのエディター上で時間に応じた変化の値を設定することができます。
実行結果
PlayCanvasのエディターから実行すると、設定した形でアニメーションが再生されます。
作者のCemさんによる使い方についてはこちらに動画も公開されています。
PlayCanvasエディター単体でスクリプトを記述しないで、手軽にエンティティのアニメーションを作成できる便利なプラグインとなっています。
Discussion