![見出し画像](https://assets.st-note.com/production/uploads/images/92658689/rectangle_large_type_2_f1965ee9c116d78ab67f7af1305f99ec.png?width=1200)
Vue3 + Konva チュートリアル
今回作るもの
Vueを使って2Dゲームを作りたい!となったときに、ある程度経験があるフロントエンドエンジニアだと「HTML5が出てきたときに流行ったCanvas使うかぁ」となることでしょう。
ですが、素のCanvasを使うより、ラッパーライブラリを使った方が早く実装できるのは確か。
そこで、今回は2D Canvasに特化したKonvaを、Vue3と組み合わせて実装していきたいと思います。
![](https://assets.st-note.com/img/1670228171673-cy7ptLyh2d.png?width=1200)
ちなみに、Konvaでどんなものが作れるかは、公式ページのトップを見るとわかります。
前提
筆者は下記の環境で開発しています。Node.jsをインストールしてnpmコマンドが動く環境であれば、他の環境でも動くはずです。
Windows
WSL2 + Ubuntu
Node.js
インストール
Vue3
まずはVue3のインストールから。
npm init vue@latest
![](https://assets.st-note.com/img/1670220663971-Dsa84y6uEy.png?width=1200)
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>
ブラウザに赤丸が表示されるはずです。
![](https://assets.st-note.com/img/1670227669065-qsoz5SvjEa.png?width=1200)
以上です!お疲れ様でした!
なお、`configCircle`に`draggable: true`を足すだけで、この赤丸がドラッグアンドドロップできるようになります。Konva強力ですね!
他のサンプル
ここまで来れば、あとは公式ドキュメントの各ページにあるApp.vueをそのままコピペして上書き保存すれば、ほとんどそのまま動くはずです!
チュートリアルは完了です。
次回以降、ここまでのソースコードを前提に、何か作っていこうと考えています。