Vue3 + Konva チュートリアル

今回作るもの

Vueを使って2Dゲームを作りたい！となったときに、ある程度経験があるフロントエンドエンジニアだと「HTML5が出てきたときに流行ったCanvas使うかぁ」となることでしょう。
ですが、素のCanvasを使うより、ラッパーライブラリを使った方が早く実装できるのは確か。
そこで、今回は2D Canvasに特化したKonvaを、Vue3と組み合わせて実装していきたいと思います。

今回はチュートリアルなので赤丸だけです。国旗みたいですね。

ちなみに、Konvaでどんなものが作れるかは、公式ページのトップを見るとわかります。

前提

筆者は下記の環境で開発しています。Node.jsをインストールしてnpmコマンドが動く環境であれば、他の環境でも動くはずです。

• Windows

• WSL2 + Ubuntu

• Node.js

インストール

Vue3

まずはVue3のインストールから。

npm init vue@latest

プロジェクト名以外は全てデフォルトです。

cd tutorial-konva-vue
npm install
npm run dev

表示されたURLを開いて、ブラウザに"You did it!"と表示されれば成功です。確認したら、ターミナルに戻ってCtrl+CでVITEを終了させてしまいましょう。

Konva

次にKonvaをインストールします。さらに、vue-konvaという、KonvaをVueコンポーネントとして使えるようにするライブラリも、一緒にインストールしましょう。

npm install vue-konva konva --save

（オプション）やらなくても良いですがちょっと気になるので、使わないファイルを削除してしまいます。

rm -r public/favicon.ico src/assets/* src/components/*

main.jsを以下のように書き換えて、vue-konvaを使えるようにします。

import { createApp } from 'vue'
import App from './App.vue'
import VueKonva from 'vue-konva'

const app = createApp(App)
app.use(VueKonva)
app.mount('#app')

App.vueを以下のように書き換えてください。出典はGetting started with vue and canvas via Konvaです。

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  data() {
    return {
      configKonva: {
        width: 200,
        height: 200
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
      }
    };
  }
};

</script>

ブラウザに赤丸が表示されるはずです。

以上です！お疲れ様でした！
なお、`configCircle`に`draggable: true`を足すだけで、この赤丸がドラッグアンドドロップできるようになります。Konva強力ですね！

他のサンプル

ここまで来れば、あとは公式ドキュメントの各ページにあるApp.vueをそのままコピペして上書き保存すれば、ほとんどそのまま動くはずです！

チュートリアルは完了です。
次回以降、ここまでのソースコードを前提に、何か作っていこうと考えています。

参考

• Quick Start | Vue.js

• Getting started with vue and canvas via Konva | Konva - JavaScript 2d canvas library