Pixi’VN에셋
Pixi’VN에서 에셋 유형 및 저장 옵션(로컬 또는 온라인) 개요와 사용 예시.
에셋은 프로젝트 내에 로컬로 저장하거나 온라인에 호스팅할 수 있습니다. 캐릭터 스프라이트, 배경 이미지, 배경 음악 등 자주 사용하는 에셋은 로컬에 보관하는 것이 가장 좋습니다. 한 번만 사용하는 에셋이나 크기가 큰 선택적 파일은 온라인으로 호스팅하는 편이 낫습니다. 각 방식에는 장단점이 있습니다:
로컬 에셋
에셋을 로컬에 저장하고 사용하려면 어떤 폴더든 사용할 수 있습니다 — 제한이 없습니다. 하지만 src/assets 폴더를 사용하는 것이 권장됩니다. 이 폴더 안에 하위 폴더를 만들어 에셋을 더 잘 정리할 수 있습니다.
PixiJS AssetPack은 Vite.js 통합을 통해 Pixi’VN 프로젝트 템플릿에 이미 사전 구성되어 있어 — 에셋 처리 및 최적화를 자동화함으로써 프로젝트 구축에 집중할 수 있습니다.
개발 중(vite dev)에는 src/assets 폴더의 변경 사항을 감시하고 즉시 처리합니다. 프로덕션 빌드(vite build) 중에는 번들링 전에 전체 최적화 과정을 실행합니다.
적용되는 최적화에는 다음이 포함됩니다:
- 압축 — 파일 크기를 줄여 더 빠른 로딩을 가능하게 합니다.
- 형식 변환 — 지원되는 경우 이미지를 최신 형식(예: WebP, AVIF)으로 변환합니다.
- 텍스처 아틀라스 — 여러 작은 이미지를 하나의 스프라이트 시트로 결합하여 드로우 콜을 줄입니다.
처리가 완료되면 public/assets에 최적화된 파일이 생성되고, 모든 에셋 번들과 그 경로 목록을 포함하는 src/assets/manifest.gen.json 파일이 생성됩니다. 이 출력물은 이후 PixiJS가 에셋을 효율적으로 불러오는 데 사용됩니다.
{
"bundles": [
{
"name": "audio",
"assets": [
{
"alias": "bgm_cheerful",
"src": "./assets/audio/bgm_cheerful.wav"
},
{
"alias": "sfx_whoosh",
"src": "./assets/audio/sfx_whoosh.wav"
}
]
},
{
"name": "mainmenu",
"assets": [
{
"alias": "background_main_menu",
"src": "./assets/mainmenu/background_main_menu.png"
}
]
},
{
"name": "start",
"assets": [
{
"alias": "bg01-hallway",
"src": "./assets/start/bg01-hallway.webp"
}
]
},
{
"name": "mc",
"assets": [
{
"alias": "mc-neutral",
"src": "./assets/mc/mc-neutral.png"
}
]
}
]
}에셋 호스팅
에셋을 온라인에 저장할 수 있습니다. 프로젝트의 공간을 절약하고 싶거나, 먼저 다운로드하지 않아도 온라인에서 플레이할 수 있는 게임을 만들고 싶다면 좋은 옵션입니다. 파일을 업로드하고 공개 URL을 생성할 수 있는 클라우드 서비스라면 무엇이든 사용할 수 있습니다(단, 사용하는 클라우드 서비스가 _CORS 요청_을 허용해야 합니다).
에셋을 온라인으로 호스팅하기 위한 인기 있는 옵션들은 다음과 같습니다:
에셋이 준비되면 게임이 사용할 수 있는 에셋과 번들로 그룹화되는 방식을 수동으로 정의해야 합니다.
로딩 시간을 최소화하고 게임을 불필요하게 차단하지 않으려면 에셋 로딩 모범 사례를 따르는 것을 강력히 권장합니다.
모든 Pixi’VN 템플릿에는 에셋을 등록하기 위해 편집할 수 있는 src/assets/index.ts 파일이 포함되어 있습니다:
import generatedManifestJson from "@/assets/manifest.gen.json";
import { AUDIO_BUNDLE_NAME } from "@/constants";
import { startLabel } from "@/content/labels/start.label";
import type { FileRouteTypes } from "@/routeTree.gen";
import type { AssetsManifest } from "@drincs/pixi-vn";
export const manifest: AssetsManifest = {
bundles: [
...generatedManifestJson.bundles,
{
name: AUDIO_BUNDLE_NAME,
assets: [
{
alias: "bgm_cheerful",
src: "https://raw.githubusercontent.com/user/project/refs/heads/main/audio/bgm_cheerful.wav",
},
{
alias: "sfx_whoosh",
src: "https://raw.githubusercontent.com/user/project/refs/heads/main/audio/sfx_whoosh.wav",
},
],
},
// screens
{
// main menu
name: "/" as FileRouteTypes["fullPaths"],
assets: [
{
alias: "background_main_menu",
src: "https://raw.githubusercontent.com/user/project/refs/heads/main/main-menu.png",
},
],
},
// labels
{
name: startLabel.id,
assets: [
{
alias: "bg01-hallway",
src: "https://raw.githubusercontent.com/user/project/refs/heads/main/breakdown/bg01-hallway.webp",
},
],
},
// characters
{
name: "mc",
assets: [
{
alias: "mc-neutral",
src: "https://raw.githubusercontent.com/user/project/refs/heads/main/characters/mc-neutral.png",
},
],
},
],
};