Vue.js + Cubism SDK For Web でブラウザ上で動くノベルゲーム風のデモ

<template>
  <slot v-if="initialized"></slot>
</template>

<script setup lang="ts">
import { logger } from '@/logger';
import { CubismFramework } from '@framework/live2dcubismframework';
import { onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue';

const initialized = ref(false);

onMounted(() => {
  // Live2Dの初期化処理
  CubismFramework.startUp()
  CubismFramework.initialize()
  logger.debug('CubismFramework has been initialized')

  initialized.value = true;
});

onBeforeUnmount(() => {
  initialized.value = false;
});

onUnmounted(() => {
  // Live2Dの終了処理
  CubismFramework.dispose()
  CubismFramework.cleanUp()
  logger.debug('CubismFramework has been disposed')
});
</script>

<template>
    <slot v-if="initialized" />
</template>

<script setup lang="ts">
/**
  * モデルアセットを提供するコンポーネント
  */
import { provide } from 'vue'

const props = defineProps<{
  modelHomeDir: string;
  modelFileName: string;
}>()

const initialized = ref(false)

// モデルアセット
const modelAssets = computed<CubismModelAssets>(() => { ... })

// 子コンポーネントで利用するためにモデルアセットを提供
export type ProvidedCubismModelAssets = Ref<CubismModelAssets>;
provide<ProvidedCubismModelAssets>('CubismModelAssets', modelAssets);

// モデルアセットのロード処理
async function loadAssets(modelHomeDir: string, modelFileName: string) {
  // ...
}

// マウント時にモデルアセットをロード
onMounted(async () => {
  await loadAssets(props.modelHomeDir, props.modelFileName)
  initialized.value = true
})
</script>

<script setup lang="ts">
/**
  * モデルアセットの状態を更新するコンポーネント
  */
import { inject } from 'vue'

// モデルアセットを親コンポーネントから注入
const modelAssets = inject<ProvidedCubismModelAssets>('CubismModelAssets');

// モデルアセットの状態を更新する処理
function update(deltaTime: number) {
  const { model } = modelAssets.value;
  // ...
  model.update();
}

<script setup lang="ts">
/**
  * モデルアセットの描画処理を行うコンポーネント
  */
import { inject } from 'vue'

// モデルアセットを親コンポーネントから注入
const modelAssets = inject<ProvidedCubismModelAssets>('CubismModelAssets');

// モデルの描画処理
function render() {
  const { model, renderer } = modelAssets.value;
  // ...
  renderer.drawModel();
}

<script setup lang="ts">
import { watch } from 'vue'

const props = defineProps<{
  index: number; // 表情インデックス
}>()

function startExpression(index: number) {
  // ... 表情の切り替え処理
}

watch(() => props.index, (index) => {
  startExpression(index)
}))
</script>

<!-- GallaryView.vue の一部 -->
<template>
<VCubismFramework>
  <!-- WebGL描画用のCanvasをマウントし、WebGLコンテキストを提供 -->
  <VCubismCanvasWebGLProvider class="w-full" style="aspect-ratio: 9/16;" width="720" height="1280">
    <!-- プロジェクション行列を提供 -->
    <VCubismProjectionMatrixProvider>
      <!-- View行列を提供 -->
      <VCubismViewMatrixProvider>
        <!-- 描画ループを提供 -->
        <VCubismRenderLoopProvider :fps="30">
          <!-- モデルアセットを読み込み提供 -->
          <VCubismModelAssetsProvider @loaded="assetsLoaded" :model-home-dir="modelHomeDir"
            :model-file-name="modelFileName">
            <!-- モデルの更新処理 -->
            <VCubismUpdateModel>
              <!-- モーションの更新処理 -->
              <VCubismUpdateModelMotion>
                <!-- まばたきの更新処理 -->
                <VCubismUpdateModelEyeBlink />
              </VCubismUpdateModelMotion>
              <!-- 呼吸の更新処理 -->
              <VCubismUpdateModelBreath />
              <!-- 物理演算の更新処理 -->
              <VCubismUpdateModelPhysics />
              <!-- 表情の更新処理 -->
              <VCubismUpdateModelExpression />
            </VCubismUpdateModel>
            <!-- モデル座標設定用の行列を提供 -->
            <VCubismModelMatrixProvider :scale-x="Number(scale)" :scale-y="Number(scale)"
              :translate-x="Number(translateX)" :translate-y="Number(translateY)">
              <!-- モデルのレンダー処理 -->
              <VCubismModelAssetsRenderer />
              <!-- ヒットエリアのレンダー処理 -->
              <VCubismHitAreaRenderer v-if="showHitBox" />
              <!-- ヒットエリアの管理 -->
              <VCubismHitManager @hit="onHit" />
            </VCubismModelMatrixProvider>
            <!-- モーションを管理するコンポーネント -->
            <VCubismMotionManager :group="motionGroupName" :index="motionIndex" :loop="true" />
            <!-- 表情を管理するコンポーネント -->
            <VCubismExpressionManager :index="expressionIndex" />
          </VCubismModelAssetsProvider>
        </VCubismRenderLoopProvider>
      </VCubismViewMatrixProvider>
    </VCubismProjectionMatrixProvider>
  </VCubismCanvasWebGLProvider>
</VCubismFramework>
</template>