はじめに

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をインストールします

Terminal

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

インストール先のディレクトリに移動して、インストールを行います

Terminal

cd vite_vue3_pixi
npm install

インストール後、package.jsonの"dev":electron-vite devの左側にある再生ボタンを押して、'dev'の実行を選択し、動作確認を行います

実行すると以下の画面が出ます

これで、Vite、Vue3、Electron、はインストールされました

3. PixiJSのインストール

次にPixiJSをインストールしていきます
ターミナルでPixiJSをインストールします

Terminal

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()）しているサンプルになります

components/PixiComponent.vue

<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を以下に変更します

src/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側のメニューとデベロッパーツールを表示するコードを追加します

src/main/index.ts

/*
　省略
*/
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'の実行を選択し、動作確認を行います

メニューとデベロッパーツールが表示され、エラーが表示されているのが確認できます
エラー内容は、

Console

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をインストールします

Terminal

npm install @pixi/unsafe-eval

さらに再度、'dev'の実行を選択し、動作確認を行います

無事、画像が回転しているコンテンツが実行されました

6. アプリケーションのビルド

コンテンツが表示されましたので、実際にアプリケーションをビルドしてみます
Electron の書き出し設定は、electron-builder.ymlファイルに記載されています
今回はこのままデフォルト設定でビルドしてみます
package.jsonファイルを開き、僕の環境はWindowsですので、build:win を実行します

ビルドが完了すると、distディレクトリにファイルが生成されます
dist/win-unpackedディレクトリをエクスプローラから開き、vite_vue3_pixi.exeを起動します

すると、画面が真っ暗で、画像が表示されません
ということで、デベロッパーツールを開いてエラーを確認します

Console

Failed to load resource: net::ERR_FILE_NOT_FOUND   icon.png:1

というエラーで、どうやら画像のパスが正しくないようです
ビルドした際、パスが変わってしまう事が原因のようなので、ビルドしても変換してくれるように、
PixiComponent.vueのコードを変更します

7. Static Pathを取得して、画像を表示する

import.meta.urlを使うと、画像の相対パスを、正しいパスに変換してくれますので、このモジュールを使い、パスの設定を行います

components/PixiComponent.vue

<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を実行してみると、問題なく表示することが出来ました

このモジュールを使うと、開発時でもパスを適宜正しいパスに変換してくれるので、関数を作っておくと良いかと思います

components/PixiComponent.vue

<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
}

8. 参考URL