Lottie - (LottieFiles)を利用して動的なロード画面をPlayCanvasで作成する方法となります。
実行URL: https://playcanv.as/b/c9f69d9d
1. External Scriptからスクリプトを読み込む
CDNからスクリプトファイルを読み込みます。
最新のバージョンはこちらからご確認ください。
https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js
2. 「SETTINGS」 → 「EXTERNAL SCRIPT」にスクリプトのURLを設定
3. 「SETTINGS」 →「LOADING SCREEN」からローディングスクリーンを作成
「CREATE LOADING SCREEN」から新規にロード画面を作成します。
ファイル名はcustom-loading.jsなどとして置きます。
4. ローディングスクリーンを書き換え
ロード画面のテンプレートが作成されておりますが、そちらの中身を下記のスクリプトに書き換えます。
// custom-loading.js
pc.script.createLoadingScreen((app) => {
// アニメーション用の要素を作成
const wrapper = document.createElement('div');
wrapper.style.position = "absolute";
wrapper.style.background = "#fff";
wrapper.style.width = "100vw";
wrapper.style.height = "100vh";
wrapper.id = 'application-splash-wrapper';
document.body.appendChild(wrapper);
const lottieAnimation = lottie.loadAnimation({
container: wrapper,
name: "loading",
loop: false, // ループしない
autoplay: false, // 自動再生をしない
path: "https://assets7.lottiefiles.com/packages/lf20_gapacy3r.json", // アニメーションデータのURL
});
// progress - 0.0 - 1.0の値
app.on('preload:progress', (progress) => {
lottieAnimation.goToAndStop(progress * lottieAnimation.timeCompleted, true);
});
app.once('preload:end', () => {
app.off('preload:progress');
});
// アプリケーションのフレームが始まった場合にローディング画面を削除
app.once('start', () => {
const splash = document.getElementById('application-splash-wrapper');
splash.parentElement.removeChild(splash);
});
});
これでロード画面にLottieを利用する事ができます。
自分で作ったアニメーション / 公開されているアニメーションを変更する
Lottieで作成したアニメーションをコピーし.json形式のアニメーションファイルのURLをコピーします。
次にロード画面のスクリプト(custom-loading.js)を書きえます。
const lottieAnimation = lottie.loadAnimation({
container: wrapper,
name: "loading",
loop: false, // ループしない
autoplay: false, // 自動再生をしない
path: "コピーしたURL"
});
これで任意のアニメーションを利用することができます。
今回は、自動再生をせずに、ロードの状況に合わせてプログレスバーを進めています。
ループするアニメーションなどの場合は、loadAnimationのloop,autoplayをtrueにすることでループしたアニメーションを再生できます。