Pixi’VN에셋 로딩
별칭, 번들, 다양한 로딩 전략을 사용하여 Pixi’VN에서 에셋을 로드하고 관리하는 방법을 알아보세요.
특히 온라인 에셋이 포함된 게임에서는 올바른 로딩 방법을 따르는 것이 필수적입니다. 이를 통해 긴 대기 시간을 방지하고 플레이어의 경험을 원활하게 유지할 수 있습니다.
에셋(이미지, gif, 동영상 등) 을 로드하고 조작하려면 Assets를 사용해야 합니다. Assets는 PixiJS 라이브러리에서 제공하는 다양한 기능을 갖춘 클래스입니다. 자세한 내용은 여기를 참조하세요.
별칭을 사용하여 에셋 로드
에셋을 로드할 때는 항상 **별칭(alias)**을 사용하세요. 별칭은 매니페스트에서 정의하거나 에셋을 등록할 때 지정하는 고유 식별자입니다. src 경로를 직접 사용하는 것은 강력히 권장하지 않습니다. 파일 위치에 코드가 종속되어 경로나 호스팅이 변경될 때 취약해집니다.
import { Assets } from "@drincs/pixi-vn";
const texture = await Assets.load("eggHead");{
"bundles": [
{
"name": "default",
"assets": [
{
"alias": "eggHead",
"src": "./assets/eggHead.png"
}
]
}
]
}에셋을 번들로 구성
에셋을 개별적으로 등록하는 것보다 번들로 묶는 것이 모범 사례입니다. 번들을 사용하면 단일 호출로 에셋 전체 세트를 로드하고, 실제로 필요한 시점까지 로딩을 지연할 수 있습니다.
로컬 에셋의 경우, 번들 이름을 사용 위치 기반으로 짓는 것은 크게 중요하지 않습니다. 로컬 파일은 즉시 로드되므로 화면이나 내러티브 노드 (label)별로 분리하는 실질적인 이점이 없습니다. 이 방식은 타겟 로딩이 대기 시간을 직접적으로 줄이는 온라인 에셋에서 가장 유용합니다.
각 번들의 이름은 사용될 위치를 기반으로 짓는 것이 권장됩니다. 예를 들어:
- 특정 내러티브 노드 (
label)에서 사용되는 에셋의 번들 이름으로는 해당 내러티브 노드 (label)의 id(예:startLabel.id)를 사용하세요. - 메인 메뉴와 같이 해당 화면에서 사용되는 에셋의 번들 이름으로는 라우트 경로(예:
"/")를 사용하세요.
이렇게 하면 필요한 순간에 정확히 필요한 에셋만 로드하여 불필요한 로딩을 줄일 수 있습니다.
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: [
// 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",
},
],
},
],
};에셋을 로드하는 시점
기본적으로 에셋은 실제로 필요할 때만 온디맨드 방식으로 로드됩니다. 그러나 마지막 순간에 로드하면 게임 플레이 중 눈에 띄는 중단이 발생할 수 있습니다.
다음은 에셋을 미리 로드하는 가장 일반적이고 권장되는 시점입니다: