はじめに
Vite + Vue3 + Electron や、Electron + Vue3 + PixiJS、といった組み合わせのサンプルはあったのですが、Vite + Vue3 + Electron + PixiJS の組み合わせのサンプルが見つからなかったので、設定の備忘録用です
なお、IDEはJetBrains社の、WebStormを使っています
目次
- 環境
- electron-viteのインストール
- PixiJSのインストール
- PixiJSの動作確認
- @pixi/unsafe-evalのインストール
- アプリケーションのビルド
- StaticPathを取得して、画像を表示する
- 参考URL
1. 環境
- WebStorm 2023.3.2
- Node 18.18.2
- Vue 3.4.5
- Vite 5.0.11
- PixiJS 7.3.3
- Windows 11 Home
2. electron-viteのインストール
まずは、PixiJS以外を使えるようにします
WebStorm で空のプロジェクトを作ります
プロジェクト名は「vite_vue3_pixi」としています
ターミナルから、ディレクトリを移動して、electron-viteをインストールします
cd ../
npm create @quick-start/electron
electron-vite のメッセージに従い、インストールを進めます
| メッセージ | 説明 | 値 |
|---|---|---|
| Project name | インストール先のディレクトリ | vite_vue3_pixi |
| Target directory "vite_vue3_pixi" is not empty. Remove existing files and continue ? | インストール先が空じゃないけど、既に入ってるファイルは消す？ | yes |
| Select a framework | vanilla vue react svelte solid |
vue |
| Add TypeScript | TypeScriptを追加しますか？ | yes |
| Add Electron updater plugin ? | Electron アップデータプラグインを追加しますか？ | yes |
| Enable Electron download mirror proxy ? | ミラーサイトからElectronをダウンロードしますか？ | yes |
インストール先のディレクトリに移動して、インストールを行います
cd vite_vue3_pixi
npm install
インストール後、package.jsonの"dev":electron-vite devの左側にある再生ボタンを押して、'dev'の実行を選択し、動作確認を行います
実行すると以下の画面が出ます
これで、Vite、Vue3、Electron、はインストールされました
3. PixiJSのインストール
次にPixiJSをインストールしていきます
ターミナルでPixiJSをインストールします
npm install pixi.js
4. PixiJSの動作確認
4-1. サンプルファイルの作成
Pixiのテスト用にcomponentsディレクトリにPixiComponent.vueという名前でVueファイルを作成します
作成したファイルに、PixiJSを表示するコードを記述します
このコードは、PixiJSアプリを作成（CreatePixiApp()）して、画像をスプライトに読み込んで（PIXI.Sprite.from）、ステージに配置（pixiApp.stage.addChild()）して、回転（pixiApp.ticker.add()）しているサンプルになります
<script setup lang="ts">
import * as PIXI from 'pixi.js'
import { onMounted, ref } from 'vue'
const cv = ref()
const createPixiApp = (_canvas: HTMLCanvasElement) => {
const canvas = _canvas
canvas.getContext('webgl', {
preserveDrawingBuffer: true,
stencil: true
})
return new PIXI.Application({
antialias: true,
autoDensity: true,
resizeTo: window,
view: canvas,
backgroundColor: 0x000000
})
}
onMounted(() => {
const pixiApp = createPixiApp(cv.value)
const sprite = PIXI.Sprite.from('./src/assets/icon.png')
sprite.anchor.set(0.5)
pixiApp.stage.addChild(sprite)
pixiApp.ticker.add((delta: number) => {
sprite.rotation += delta * 0.01
sprite.x = pixiApp.screen.width / 2
sprite.y = pixiApp.screen.height / 2
})
})
</script>
<template>
<div id="pixi-wrapper">
<canvas id="pixi-container" ref="cv"></canvas>
</div>
</template>
<style scoped lang="less">
#pixi-wrapper,
#pixi-container {
width: 100%;
height: 100%;
}
</style>
./src/assets/icon.pngという画像を読み込んでいる箇所がありますが、
resourcesディレクトリ内に同名の画像ファイルがありますので、今回はこのファイルをコピーして使っています
4-2. PixiComponent.vueの読み込み
先ほど作ったPixiComponent.vueを読み込んで表示したいと思います
App.vueを以下に変更します
<script setup lang="ts">
import PixiComponent from './components/PixiComponent.vue'
</script>
<template>
<pixi-component></pixi-component>
</template>
<style lang="less">
</style>
4-3. 実行・デバッグ
'dev'の実行を選択し、動作確認を行います
PIXI.Applicationの背景色（backgraoundColor）を黒（0x000000）にしているので、黒い画面に画像が表示される想定ですが、画面が真っ白です
4-4. メニューとデベロッパーツールの表示
画面が真っ白な原因を確かめるために、src/main/index.tsファイルを開き、Electron側のメニューとデベロッパーツールを表示するコードを追加します
/*
省略
*/
function createWindow(): void {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 900,
height: 670,
show: false,
autoHideMenuBar: false, /* true -> false に変更 */
...(process.platform === 'linux' ? { icon } : {}),
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
sandbox: false
}
})
/*
省略
*/
if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
mainWindow.webContents.openDevTools() /* <----- この行を追加 */
} else {
mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
}
}
/*
省略
*/
再度、'dev'の実行を選択し、動作確認を行います
メニューとデベロッパーツールが表示され、エラーが表示されているのが確認できます
エラー内容は、
Error : Current enviroment does not allow unsafe-eval, please use @pixi/unsafe-eval module to enable support.
というもので、「unsafe-evalが使えないから、モジュールを入れてね」みたいなエラーのようなので、このモジュールを追加します
※ただ、unsafe-evalはセキュリティ的に無効になっているものを有効？にして使うようなので、自己責任で設定してください
5. @pixi/unsafe-eval のインストール
ターミナルから@pixi/unsafe-evalをインストールします
npm install @pixi/unsafe-eval
さらに再度、'dev'の実行を選択し、動作確認を行います
無事、画像が回転しているコンテンツが実行されました
6. アプリケーションのビルド
コンテンツが表示されましたので、実際にアプリケーションをビルドしてみます
Electron の書き出し設定は、electron-builder.ymlファイルに記載されています
今回はこのままデフォルト設定でビルドしてみます
package.jsonファイルを開き、僕の環境はWindowsですので、build:win を実行します
ビルドが完了すると、distディレクトリにファイルが生成されます
dist/win-unpackedディレクトリをエクスプローラから開き、vite_vue3_pixi.exeを起動します
すると、画面が真っ暗で、画像が表示されません
ということで、デベロッパーツールを開いてエラーを確認します
Failed to load resource: net::ERR_FILE_NOT_FOUND icon.png:1
というエラーで、どうやら画像のパスが正しくないようです
ビルドした際、パスが変わってしまう事が原因のようなので、ビルドしても変換してくれるように、
PixiComponent.vueのコードを変更します
7. Static Pathを取得して、画像を表示する
import.meta.urlを使うと、画像の相対パスを、正しいパスに変換してくれますので、このモジュールを使い、パスの設定を行います
<script setup lang="ts">
/*
省略
*/
const cv = ref()
const imgUrl = new URL('../assets/icon.png', import.meta.url).href //<--- 追加
const createPixiApp = (_canvas: HTMLCanvasElement) => {
/*
省略
*/
}
onMounted(() => {
const pixiApp = createPixiApp(cv.value)
const sprite = PIXI.Sprite.from(imgUrl) //<---変更
/*
省略
*/
}
</script>
<template>
<div id="pixi-wrapper">
<canvas id="pixi-container" ref="cv"></canvas>
</div>
</template>
<style scoped lang="less">
#pixi-wrapper,
#pixi-container {
width: 100%;
height: 100%;
}
</style>
再度ビルドし直して、vite_vue3_pixi.exeを実行してみると、問題なく表示することが出来ました
このモジュールを使うと、開発時でもパスを適宜正しいパスに変換してくれるので、関数を作っておくと良いかと思います
<script setup lang="ts">
/*
省略
*/
//const imgUrl = new URL('../assets/icon.png', import.meta.url).href
const imgUrl = (_filename: string): string => {
return new URL(`../assets/${_filename}`, import.meta.url).href
}
/*
省略
*/
//const sprite = PIXI.Sprite.from(imgUrl)
const sprite = PIXI.Sprite.from(imgUrl('icon.png'))
</script>
ただし、画像が入っているディレクトリは静的に記述しないと、正しく変換されないようですので注意が必要です
//これは変換されない
const imgUrl = (_filename: string): string => {
return new URL(_filename, import.meta.url).href
}