[Pixi.js] Vue3를 곁들인 PixiJS설치법

npm install pixi.js

CDN 설치는 내가 별로 안좋아하니까 npm으로 설치함

import * as PIXI from 'pixi.js';

사용할 파일에 import해서 쓰면 됨

 

예를 들어서

<script setup>
import * as PIXI from 'pixi.js';

import { onMounted, ref } from 'vue';

const pixiContainer = ref(null);

onMounted(() => {
  const app = new PIXI.Application({ width: 640, height: 480, backgroundColor: 0x1099bb });
  pixiContainer.value.appendChild(app.view);
});
</script>

<template>
  <div ref="pixiContainer"></div>
</template>

<style scoped></style>

코드를 이렇게 짜면

 

이런식으로 화면이 나오게 된다.

 

오늘은 여기까지.