PlayCanvasで2Dの画像イメージを扱う際のTIPSを紹介します。
ここでは
- 透過情報を持った2DデータをSCENE内に配置する方法
- 透過情報を持った2DデータをUIとしてディスプレイ座標上に配置する方法
- 連続した2DデータをアニメーションさせSCENE内に配置する方法
を簡単なサンプルとともに紹介します。
全画面表示はこちら
1. 透過情報を持った2DデータをSCENE内に配置する方法
Planeオブジェクトに透過されたテクスチャをもつマテリアルを適用して実現します。
透過情報を持つ画像データを用意し、PlayCanvasにインポートします。マテリアルを作成し、以下のように設定します。
作成したマテリアルをPlaneモデルに適用することで実現できます。
2.透過情報を持った2DデータをUIとしてディスプレイ座標上に配置する方法
PlayCanvas公式Githubで配布している"sprite.js"を利用します。
まず、PlayCanvasで"sprite.js"という名前のスクリプトを新規作成します。次に、こちらにアクセスしてコード全文をコピーし、書き換えます。
PlayCanvas EditorからEntityを新規作成し、sprite.jsをアタッチします。
sprite.jsのパラメータから各種設定を制御可能です。
UIとしてインタラクションを追加する場合は、こちらに使い方が記載してあります。
3. 連続した2DデータをアニメーションさせSCENE内に配置する方法
PlayCanvasでは連番画像からスプライトアニメーションを簡単に再生させるスクリプトを提供しています。
まず、アニメーション用の連番画像を用意します。
連番画像は同解像度のものを上記のように配置し、ひとつの画像データにしてPlayCanvasにインポートします。
次に、1.と同様に透過マテリアルを作成します。
OFFSET & TILINGを開き、Tilingを編集します。1コマ分だけのサイズになればよいので、
- Tiling.x = 1 / 画像の横方向の枚数
- Tiling.y = 1 / 画像の縦方向の枚数
の式から算出することができます。これでマテリアルの作成は終了です。
アニメーションの再生にはスクリプトを利用します。
Planeモデルのentityを新規作成し、先ほど作成したマテリアルをアタッチします。次にPlayCanvas Editorから"animated-texture.js"を新規作成します。こちらにアクセスし、スクリプトをすべてコピーして、自身のプロジェクトに適用します。
PlayCanvasが用意しているanimated-textureのサンプルプロジェクトはこちらです。
Entityを新規作成し、animated-texture.jsをアタッチします。
animated-textureのパラメータに先ほど作ったマテリアルを適用します。全体のフレーム数、最初のフレーム等の情報を入力します。
実行するとアニメーションが再生されます。
コメント
0件のコメント
サインインしてコメントを残してください。