Getting Started

cd my-appnpx storybook@"~8.0.0" init -t html

npm remove @storybook/html @storybook/html-webpack5 --save-dev

npm install @pixi/storybook-renderer @pixi/storybook-webpack5 --save-dev

npm install @pixi/storybook-renderer @pixi/storybook-vite --save-dev

constconfig={// use glob matching, eg: ../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)stories:['RELATIVE_PATH_TO_STORIES'],staticDirs:['RELATIVE_PATH_TO_ASSETS'],logLevel:'debug',addons:['@storybook/addon-actions','@storybook/addon-backgrounds','@storybook/addon-controls','@storybook/addon-viewport','@storybook/addon-links','@storybook/addon-highlight',],core:{channelOptions:{allowFunction:false,maxDepth:10},disableTelemetry:true,},features:{buildStoriesJson:true,breakingChangesV7:true,},framework:'@pixi/storybook-webpack5',// or '@pixi/storybook-vite'};exportdefaultconfig;

constpreview={parameters:{layout:'fullscreen',pixi:{// these are passed as options to `PIXI.Application` when instantiated by the// rendererapplicationOptions:{backgroundColor:0x1099bb,resolution:1,},// optional, if you want to provide custom resize logic, pass a function here,// if nothing is provided, the default resize function is used, which looks like// this, where w and h will be the width and height of the storybook canvas.resizeFn:(w,h)=>{return{rendererWidth:w,rendererHeight:h,canvasWidth:w,canvasHeight:h,};},},},};exportdefaultpreview;

PixiJS Stories

typeStoryFnPixiReturnType={view:DisplayObject;// optionally respond to requestAnimationFrame tickupdate?:(delta:number)=>void;// optionally respond to application level resizingresize?:(rendererWidth:number,rendererHeight:number)=>void;// optionally clean up things when story is rerendered / removed - this happens a lot, so do it!destroy?:()=>void;}

Decorators

import{Container}from'pixi.js';constMARGIN=10;constDOUBLE_MARGIN=MARGIN*2;exportconstbackgroundDecorator=(story)=>{// The extra Container isn't really necessary just to add margin, but it shows how it's// possible to wrap with other PIXI objectsconstroot=newContainer();// storyResult is the value returned from your Story functionconststoryResult=story();root.addChild(storyResult.view);// Decorate the storyResult with other graphics / functionality:return{view:root,update:(delta)=>storyResult.update?.(delta),resize:(screenWidth,screenHeight)=>{root.x=MARGIN;root.y=MARGIN;storyResult.resize?.(screenWidth-DOUBLE_MARGIN,screenHeight-DOUBLE_MARGIN);},destroy:()=>storyResult.destroy?.(),};};

import{backgroundDecorator}from'decorators/backgroundDecorator';// ...exportconstdecorators=[backgroundDecorator];