[{"data":1,"prerenderedAt":1567},["ShallowReactive",2],{"navigation":3,"\u002Fapi\u002Fobjects\u002Fanimated-sprite":498,"\u002Fapi\u002Fobjects\u002Fanimated-sprite-surround":1562},[4,26],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,10,14,18,22],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":15,"path":16,"stem":17},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage",{"title":19,"path":20,"stem":21},"Loading Models","\u002Fgetting-started\u002Floading-models","1.getting-started\u002F4.loading-models",{"title":23,"path":24,"stem":25},"Upgrade Guide","\u002Fgetting-started\u002Fupgrade-guide","1.getting-started\u002F5.upgrade-guide",{"title":27,"path":28,"stem":29,"children":30},"Api","\u002Fapi","2.api",[31,34,96,126,168,210,308,334,368,418,464],{"title":32,"path":28,"stem":33},"All","2.api\u002Findex",{"title":35,"path":36,"stem":37,"children":38},"Abstractions","\u002Fapi\u002Fabstractions","2.api\u002F1.abstractions\u002Findex",[39,40,44,48,52,56,60,64,68,72,76,80,84,88,92],{"title":35,"path":36,"stem":37},{"title":41,"path":42,"stem":43},"Align","\u002Fapi\u002Fabstractions\u002Falign","2.api\u002F1.abstractions\u002Falign",{"title":45,"path":46,"stem":47},"Billboard","\u002Fapi\u002Fabstractions\u002Fbillboard","2.api\u002F1.abstractions\u002Fbillboard",{"title":49,"path":50,"stem":51},"Camera Shake","\u002Fapi\u002Fabstractions\u002Fcamera-shake","2.api\u002F1.abstractions\u002Fcamera-shake",{"title":53,"path":54,"stem":55},"Decal","\u002Fapi\u002Fabstractions\u002Fdecal","2.api\u002F1.abstractions\u002Fdecal",{"title":57,"path":58,"stem":59},"Edges","\u002Fapi\u002Fabstractions\u002Fedges","2.api\u002F1.abstractions\u002Fedges",{"title":61,"path":62,"stem":63},"Fit","\u002Fapi\u002Fabstractions\u002Ffit","2.api\u002F1.abstractions\u002Ffit",{"title":65,"path":66,"stem":67},"Instances","\u002Fapi\u002Fabstractions\u002Finstances","2.api\u002F1.abstractions\u002Finstances",{"title":69,"path":70,"stem":71},"Levioso (Float)","\u002Fapi\u002Fabstractions\u002Flevioso","2.api\u002F1.abstractions\u002Flevioso",{"title":73,"path":74,"stem":75},"Mask","\u002Fapi\u002Fabstractions\u002Fmask","2.api\u002F1.abstractions\u002Fmask",{"title":77,"path":78,"stem":79},"Merged","\u002Fapi\u002Fabstractions\u002Fmerged","2.api\u002F1.abstractions\u002Fmerged",{"title":81,"path":82,"stem":83},"Outline","\u002Fapi\u002Fabstractions\u002Foutline","2.api\u002F1.abstractions\u002Foutline",{"title":85,"path":86,"stem":87},"Sampler","\u002Fapi\u002Fabstractions\u002Fsampler","2.api\u002F1.abstractions\u002Fsampler",{"title":89,"path":90,"stem":91},"ScreenSizer","\u002Fapi\u002Fabstractions\u002Fscreen-sizer","2.api\u002F1.abstractions\u002Fscreen-sizer",{"title":93,"path":94,"stem":95},"ScreenSpace","\u002Fapi\u002Fabstractions\u002Fscreen-space","2.api\u002F1.abstractions\u002Fscreen-space",{"title":97,"path":98,"stem":99,"children":100},"Controls","\u002Fapi\u002Fcontrols","2.api\u002F2.controls\u002Findex",[101,102,106,110,114,118,122],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105},"Camera Controls","\u002Fapi\u002Fcontrols\u002Fcamera-controls","2.api\u002F2.controls\u002Fcamera-controls",{"title":107,"path":108,"stem":109},"Keyboard Controls","\u002Fapi\u002Fcontrols\u002Fkeyboard-controls","2.api\u002F2.controls\u002Fkeyboard-controls",{"title":111,"path":112,"stem":113},"Map Controls","\u002Fapi\u002Fcontrols\u002Fmap-controls","2.api\u002F2.controls\u002Fmap-controls",{"title":115,"path":116,"stem":117},"Orbit Controls","\u002Fapi\u002Fcontrols\u002Forbit-controls","2.api\u002F2.controls\u002Forbit-controls",{"title":119,"path":120,"stem":121},"PointerLock Controls","\u002Fapi\u002Fcontrols\u002Fpointer-lock-controls","2.api\u002F2.controls\u002Fpointer-lock-controls",{"title":123,"path":124,"stem":125},"Transform Controls","\u002Fapi\u002Fcontrols\u002Ftransform-controls","2.api\u002F2.controls\u002Ftransform-controls",{"title":127,"path":128,"stem":129,"children":130},"Loaders","\u002Fapi\u002Floaders","2.api\u002F3.loaders\u002Findex",[131,132,136,140,144,148,152,156,160,164],{"title":127,"path":128,"stem":129},{"title":133,"path":134,"stem":135},"useGLTF","\u002Fapi\u002Floaders\u002Fuse-gltf","2.api\u002F3.loaders\u002F1.use-gltf",{"title":137,"path":138,"stem":139},"GLTFModel","\u002Fapi\u002Floaders\u002Fgltf-model","2.api\u002F3.loaders\u002F2.gltf-model",{"title":141,"path":142,"stem":143},"useFBX","\u002Fapi\u002Floaders\u002Fuse-fbx","2.api\u002F3.loaders\u002F3.use-fbx",{"title":145,"path":146,"stem":147},"FBXModel","\u002Fapi\u002Floaders\u002Ffbx-model","2.api\u002F3.loaders\u002F4.fbx-model",{"title":149,"path":150,"stem":151},"useTexture","\u002Fapi\u002Floaders\u002Fuse-texture","2.api\u002F3.loaders\u002F5.use-texture",{"title":153,"path":154,"stem":155},"useTextures","\u002Fapi\u002Floaders\u002Fuse-textures","2.api\u002F3.loaders\u002F6.use-textures",{"title":157,"path":158,"stem":159},"useSVG","\u002Fapi\u002Floaders\u002Fuse-svg","2.api\u002F3.loaders\u002F7.use-svg",{"title":161,"path":162,"stem":163},"useProgress","\u002Fapi\u002Floaders\u002Fuse-progress","2.api\u002F3.loaders\u002Fuse-progress",{"title":165,"path":166,"stem":167},"useVideoTexture","\u002Fapi\u002Floaders\u002Fuse-video-texture","2.api\u002F3.loaders\u002Fuse-video-texture",{"title":169,"path":170,"stem":171,"children":172},"Materials","\u002Fapi\u002Fmaterials","2.api\u002F4.materials\u002Findex",[173,174,178,182,186,190,194,198,202,206],{"title":169,"path":170,"stem":171},{"title":175,"path":176,"stem":177},"Custom Shader Material","\u002Fapi\u002Fmaterials\u002Fcustom-shader-material","2.api\u002F4.materials\u002Fcustom-shader-material",{"title":179,"path":180,"stem":181},"Mesh Glass Material","\u002Fapi\u002Fmaterials\u002Fglass-material","2.api\u002F4.materials\u002Fglass-material",{"title":183,"path":184,"stem":185},"Holographic Material","\u002Fapi\u002Fmaterials\u002Fholographic-material","2.api\u002F4.materials\u002Fholographic-material",{"title":187,"path":188,"stem":189},"Mesh Discard Material","\u002Fapi\u002Fmaterials\u002Fmesh-discard-material","2.api\u002F4.materials\u002Fmesh-discard-material",{"title":191,"path":192,"stem":193},"Mesh Portal Material","\u002Fapi\u002Fmaterials\u002Fmesh-portal-material","2.api\u002F4.materials\u002Fmesh-portal-material",{"title":195,"path":196,"stem":197},"Mesh Reflection Material","\u002Fapi\u002Fmaterials\u002Fmesh-reflection-material","2.api\u002F4.materials\u002Fmesh-reflection-material",{"title":199,"path":200,"stem":201},"Mesh Transmission Material","\u002Fapi\u002Fmaterials\u002Fmesh-transmission-material","2.api\u002F4.materials\u002Fmesh-transmission-material",{"title":203,"path":204,"stem":205},"Point Material","\u002Fapi\u002Fmaterials\u002Fpoint-material","2.api\u002F4.materials\u002Fpoint-material",{"title":207,"path":208,"stem":209},"Wobble Material","\u002Fapi\u002Fmaterials\u002Fwobble-material","2.api\u002F4.materials\u002Fwobble-material",{"title":211,"path":212,"stem":213,"children":214},"Shapes","\u002Fapi\u002Fshapes","2.api\u002F5.shapes\u002Findex",[215,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304],{"title":211,"path":212,"stem":213},{"title":217,"path":218,"stem":219},"Box","\u002Fapi\u002Fshapes\u002Fbox","2.api\u002F5.shapes\u002Fbox",{"title":221,"path":222,"stem":223},"CatmullRomCurve3","\u002Fapi\u002Fshapes\u002Fcatmullromcurve3","2.api\u002F5.shapes\u002Fcatmullromcurve3",{"title":225,"path":226,"stem":227},"Circle","\u002Fapi\u002Fshapes\u002Fcircle","2.api\u002F5.shapes\u002Fcircle",{"title":229,"path":230,"stem":231},"Cone","\u002Fapi\u002Fshapes\u002Fcone","2.api\u002F5.shapes\u002Fcone",{"title":233,"path":234,"stem":235},"Cubic Bezier Line","\u002Fapi\u002Fshapes\u002Fcubic-bezier-line","2.api\u002F5.shapes\u002Fcubic-bezier-line",{"title":237,"path":238,"stem":239},"Cylinder","\u002Fapi\u002Fshapes\u002Fcylinder","2.api\u002F5.shapes\u002Fcylinder",{"title":241,"path":242,"stem":243},"Dodecahedron","\u002Fapi\u002Fshapes\u002Fdodecahedron","2.api\u002F5.shapes\u002Fdodecahedron",{"title":245,"path":246,"stem":247},"Grid","\u002Fapi\u002Fshapes\u002Fgrid","2.api\u002F5.shapes\u002Fgrid",{"title":249,"path":250,"stem":251},"Icosahedron","\u002Fapi\u002Fshapes\u002Ficosahedron","2.api\u002F5.shapes\u002Ficosahedron",{"title":253,"path":254,"stem":255},"Line2","\u002Fapi\u002Fshapes\u002Fline2","2.api\u002F5.shapes\u002Fline2",{"title":257,"path":258,"stem":259},"Octahedron","\u002Fapi\u002Fshapes\u002Foctahedron","2.api\u002F5.shapes\u002Foctahedron",{"title":261,"path":262,"stem":263},"Plane","\u002Fapi\u002Fshapes\u002Fplane","2.api\u002F5.shapes\u002Fplane",{"title":265,"path":266,"stem":267},"Quadratic Bezier Line","\u002Fapi\u002Fshapes\u002Fquadratic-bezier-line","2.api\u002F5.shapes\u002Fquadratic-bezier-line",{"title":269,"path":270,"stem":271},"Ring","\u002Fapi\u002Fshapes\u002Fring","2.api\u002F5.shapes\u002Fring",{"title":273,"path":274,"stem":275},"Rounded Box","\u002Fapi\u002Fshapes\u002Frounded-box","2.api\u002F5.shapes\u002Frounded-box",{"title":277,"path":278,"stem":279},"Rounded Plane","\u002Fapi\u002Fshapes\u002Frounded-plane","2.api\u002F5.shapes\u002Frounded-plane",{"title":281,"path":282,"stem":283},"Screen Quad","\u002Fapi\u002Fshapes\u002Fscreen-quad","2.api\u002F5.shapes\u002Fscreen-quad",{"title":285,"path":286,"stem":287},"Sphere","\u002Fapi\u002Fshapes\u002Fsphere","2.api\u002F5.shapes\u002Fsphere",{"title":289,"path":290,"stem":291},"Superformula","\u002Fapi\u002Fshapes\u002Fsuperformula","2.api\u002F5.shapes\u002Fsuperformula",{"title":293,"path":294,"stem":295},"Tetrahedron","\u002Fapi\u002Fshapes\u002Ftetrahedron","2.api\u002F5.shapes\u002Ftetrahedron",{"title":297,"path":298,"stem":299},"Torus","\u002Fapi\u002Fshapes\u002Ftorus","2.api\u002F5.shapes\u002Ftorus",{"title":301,"path":302,"stem":303},"Torus Knot","\u002Fapi\u002Fshapes\u002Ftorus-knot","2.api\u002F5.shapes\u002Ftorus-knot",{"title":305,"path":306,"stem":307},"Tube","\u002Fapi\u002Fshapes\u002Ftube","2.api\u002F5.shapes\u002Ftube",{"title":309,"path":310,"stem":311,"children":312},"Debug\u002FPerformance","\u002Fapi\u002Fdebug-performance","2.api\u002F6.debug-performance\u002Findex",[313,314,318,322,326,330],{"title":309,"path":310,"stem":311},{"title":315,"path":316,"stem":317},"Helper","\u002Fapi\u002Fdebug-performance\u002Fhelper","2.api\u002F6.debug-performance\u002Fhelper",{"title":319,"path":320,"stem":321},"LOD","\u002Fapi\u002Fdebug-performance\u002Flod","2.api\u002F6.debug-performance\u002Flod",{"title":323,"path":324,"stem":325},"Stats","\u002Fapi\u002Fdebug-performance\u002Fstats","2.api\u002F6.debug-performance\u002Fstats",{"title":327,"path":328,"stem":329},"StatsGl","\u002Fapi\u002Fdebug-performance\u002Fstats-gl","2.api\u002F6.debug-performance\u002Fstats-gl",{"title":331,"path":332,"stem":333},"useBVH","\u002Fapi\u002Fdebug-performance\u002Fuse-bvh","2.api\u002F6.debug-performance\u002Fuse-bvh",{"title":335,"path":336,"stem":337,"children":338},"Light\u002FShadow","\u002Fapi\u002Flight-shadow","2.api\u002F7.light-shadow\u002Findex",[339,340,344,348,352,356,360,364],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Accumulative Shadows","\u002Fapi\u002Flight-shadow\u002Faccumulative-shadows","2.api\u002F7.light-shadow\u002Faccumulative-shadows",{"title":345,"path":346,"stem":347},"Bake Shadows","\u002Fapi\u002Flight-shadow\u002Fbake-shadows","2.api\u002F7.light-shadow\u002Fbake-shadows",{"title":349,"path":350,"stem":351},"Circle Shadow","\u002Fapi\u002Flight-shadow\u002Fcircle-shadow","2.api\u002F7.light-shadow\u002Fcircle-shadow",{"title":353,"path":354,"stem":355},"Contact Shadows","\u002Fapi\u002Flight-shadow\u002Fcontact-shadows","2.api\u002F7.light-shadow\u002Fcontact-shadows",{"title":357,"path":358,"stem":359},"Lensflare","\u002Fapi\u002Flight-shadow\u002Flensflare","2.api\u002F7.light-shadow\u002Flensflare",{"title":361,"path":362,"stem":363},"Randomized Lights","\u002Fapi\u002Flight-shadow\u002Frandomized-lights","2.api\u002F7.light-shadow\u002Frandomized-lights",{"title":365,"path":366,"stem":367},"Soft Shadows","\u002Fapi\u002Flight-shadow\u002Fsoft-shadows","2.api\u002F7.light-shadow\u002Fsoft-shadows",{"title":369,"path":370,"stem":371,"children":372},"Staging","\u002Fapi\u002Fstaging","2.api\u002F8.staging\u002Findex",[373,374,378,382,386,390,394,398,402,406,410,414],{"title":369,"path":370,"stem":371},{"title":375,"path":376,"stem":377},"Environment","\u002Fapi\u002Fstaging\u002Fenvironment","2.api\u002F8.staging\u002F1.environment",{"title":379,"path":380,"stem":381},"useEnvironment","\u002Fapi\u002Fstaging\u002Fuse-environment","2.api\u002F8.staging\u002F2.use-environment",{"title":383,"path":384,"stem":385},"Lightformer","\u002Fapi\u002Fstaging\u002Flightformer","2.api\u002F8.staging\u002F3.lightformer",{"title":387,"path":388,"stem":389},"Backdrop","\u002Fapi\u002Fstaging\u002Fbackdrop","2.api\u002F8.staging\u002Fbackdrop",{"title":391,"path":392,"stem":393},"Ocean","\u002Fapi\u002Fstaging\u002Focean","2.api\u002F8.staging\u002Focean",{"title":395,"path":396,"stem":397},"Precipitation","\u002Fapi\u002Fstaging\u002Fprecipitation","2.api\u002F8.staging\u002Fprecipitation",{"title":399,"path":400,"stem":401},"Sky","\u002Fapi\u002Fstaging\u002Fsky","2.api\u002F8.staging\u002Fsky",{"title":403,"path":404,"stem":405},"Smoke","\u002Fapi\u002Fstaging\u002Fsmoke","2.api\u002F8.staging\u002Fsmoke",{"title":407,"path":408,"stem":409},"Sparkles","\u002Fapi\u002Fstaging\u002Fsparkles","2.api\u002F8.staging\u002Fsparkles",{"title":411,"path":412,"stem":413},"Stage","\u002Fapi\u002Fstaging\u002Fstage","2.api\u002F8.staging\u002Fstage",{"title":415,"path":416,"stem":417},"Stars","\u002Fapi\u002Fstaging\u002Fstars","2.api\u002F8.staging\u002Fstars",{"title":419,"path":420,"stem":421,"children":422},"Objects","\u002Fapi\u002Fobjects","2.api\u002F9.objects\u002Findex",[423,424,428,432,436,440,444,448,452,456,460],{"title":419,"path":420,"stem":421},{"title":425,"path":426,"stem":427},"AnimatedSprite","\u002Fapi\u002Fobjects\u002Fanimated-sprite","2.api\u002F9.objects\u002Fanimated-sprite",{"title":429,"path":430,"stem":431},"CubeCamera","\u002Fapi\u002Fobjects\u002Fcube-camera","2.api\u002F9.objects\u002Fcube-camera",{"title":433,"path":434,"stem":435},"Fbo","\u002Fapi\u002Fobjects\u002Ffbo","2.api\u002F9.objects\u002Ffbo",{"title":437,"path":438,"stem":439},"GradientTexture","\u002Fapi\u002Fobjects\u002Fgradient-texture","2.api\u002F9.objects\u002Fgradient-texture",{"title":441,"path":442,"stem":443},"HTML","\u002Fapi\u002Fobjects\u002Fhtml","2.api\u002F9.objects\u002Fhtml",{"title":445,"path":446,"stem":447},"Image","\u002Fapi\u002Fobjects\u002Fimage","2.api\u002F9.objects\u002Fimage",{"title":449,"path":450,"stem":451},"MarchingCubes","\u002Fapi\u002Fobjects\u002Fmarching-cubes","2.api\u002F9.objects\u002Fmarching-cubes",{"title":453,"path":454,"stem":455},"Reflector","\u002Fapi\u002Fobjects\u002Freflector","2.api\u002F9.objects\u002Freflector",{"title":457,"path":458,"stem":459},"Refractor","\u002Fapi\u002Fobjects\u002Frefractor","2.api\u002F9.objects\u002Frefractor",{"title":461,"path":462,"stem":463},"Text3D","\u002Fapi\u002Fobjects\u002Ftext-3d","2.api\u002F9.objects\u002Ftext-3d",{"title":465,"path":466,"stem":467,"children":468},"Miscellaneous","\u002Fapi\u002Fmiscellaneous","2.api\u002Fmiscellaneous\u002Findex",[469,470,474,478,482,486,490,494],{"title":465,"path":466,"stem":467},{"title":471,"path":472,"stem":473},"Bounds","\u002Fapi\u002Fmiscellaneous\u002Fbounds","2.api\u002Fmiscellaneous\u002Fbounds",{"title":475,"path":476,"stem":477},"GlobalAudio","\u002Fapi\u002Fmiscellaneous\u002Fglobal-audio","2.api\u002Fmiscellaneous\u002Fglobal-audio",{"title":479,"path":480,"stem":481},"MouseParallax","\u002Fapi\u002Fmiscellaneous\u002Fmouse-parallax","2.api\u002Fmiscellaneous\u002Fmouse-parallax",{"title":483,"path":484,"stem":485},"PositionalAudio","\u002Fapi\u002Fmiscellaneous\u002Fpositional-audio","2.api\u002Fmiscellaneous\u002Fpositional-audio",{"title":487,"path":488,"stem":489},"useAnimations","\u002Fapi\u002Fmiscellaneous\u002Fuse-animations","2.api\u002Fmiscellaneous\u002Fuse-animations",{"title":491,"path":492,"stem":493},"useGLTFExporter","\u002Fapi\u002Fmiscellaneous\u002Fuse-gltf-exporter","2.api\u002Fmiscellaneous\u002Fuse-gltf-exporter",{"title":495,"path":496,"stem":497},"useIntersect","\u002Fapi\u002Fmiscellaneous\u002Fuse-intersect","2.api\u002Fmiscellaneous\u002Fuse-intersect",{"id":499,"title":425,"body":500,"description":1556,"extension":1557,"links":1558,"meta":1559,"navigation":628,"path":426,"seo":1560,"stem":427,"__hash__":1561},"docs\u002F2.api\u002F9.objects\u002Fanimated-sprite.md",{"type":501,"value":502,"toc":1538},"minimark",[503,509,528,538,542,799,811,815,821,835,844,848,855,875,879,887,892,919,923,1273,1277,1347,1350,1357,1361,1364,1369,1372,1384,1400,1404,1407,1444,1447,1459,1463,1472,1482,1490,1493,1524,1527,1534],[504,505,506],"scene-controls-wrapper",{},[507,508],"objects-animated-sprite",{},[510,511,512,516,517,524,525,527],"p",{},[513,514,515],"code",{},"\u003CAnimatedSprite \u002F>"," displays 2D animations defined in a ",[518,519,523],"a",{"href":520,"rel":521},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FTexture_atlas",[522],"nofollow","texture atlas",". A typical ",[513,526,515],{}," will use:",[529,530,531,535],"ul",{},[532,533,534],"li",{},"An image containing multiple sprites",[532,536,537],{},"A JSON atlas containing the individual sprite coordinates in the image",[539,540,15],"h2",{"id":541},"usage",[543,544,556],"pre",{"className":545,"code":546,"highlights":547,"language":554,"meta":555,"style":555},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { AnimatedSprite } from '@tresjs\u002Fcientos'\n\nconst currentAnimation = ref('cientosIdle')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CSuspense>\n      \u003CAnimatedSprite\n        image=\"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fanimated-sprite\u002FcientosTexture.png\"\n        atlas=\"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fanimated-sprite\u002FcientosAtlas.json\"\n        :animation=\"currentAnimation\"\n      \u002F>\n    \u003C\u002FSuspense>\n  \u003C\u002FTresCanvas>\n\u003C\u002Ftemplate>\n",[548,549,550,551,552,553],2,10,11,12,13,14,"vue","",[513,557,558,593,623,630,659,669,674,684,695,706,715,731,746,764,770,780,790],{"__ignoreMap":555},[559,560,563,567,571,575,578,581,584,588,590],"span",{"class":561,"line":562},"line",1,[559,564,566],{"class":565},"sMK4o","\u003C",[559,568,570],{"class":569},"swJcz","script",[559,572,574],{"class":573},"spNyl"," setup",[559,576,577],{"class":573}," lang",[559,579,580],{"class":565},"=",[559,582,583],{"class":565},"\"",[559,585,587],{"class":586},"sfazB","ts",[559,589,583],{"class":565},[559,591,592],{"class":565},">\n",[559,594,597,601,604,608,611,614,617,620],{"class":595,"line":548},[561,596],"highlight",[559,598,600],{"class":599},"s7zQu","import",[559,602,603],{"class":565}," {",[559,605,607],{"class":606},"sTEyZ"," AnimatedSprite",[559,609,610],{"class":565}," }",[559,612,613],{"class":599}," from",[559,615,616],{"class":565}," '",[559,618,619],{"class":586},"@tresjs\u002Fcientos",[559,621,622],{"class":565},"'\n",[559,624,626],{"class":561,"line":625},3,[559,627,629],{"emptyLinePlaceholder":628},true,"\n",[559,631,633,636,639,641,645,648,651,654,656],{"class":561,"line":632},4,[559,634,635],{"class":573},"const",[559,637,638],{"class":606}," currentAnimation ",[559,640,580],{"class":565},[559,642,644],{"class":643},"s2Zo4"," ref",[559,646,647],{"class":606},"(",[559,649,650],{"class":565},"'",[559,652,653],{"class":586},"cientosIdle",[559,655,650],{"class":565},[559,657,658],{"class":606},")\n",[559,660,662,665,667],{"class":561,"line":661},5,[559,663,664],{"class":565},"\u003C\u002F",[559,666,570],{"class":569},[559,668,592],{"class":565},[559,670,672],{"class":561,"line":671},6,[559,673,629],{"emptyLinePlaceholder":628},[559,675,677,679,682],{"class":561,"line":676},7,[559,678,566],{"class":565},[559,680,681],{"class":569},"template",[559,683,592],{"class":565},[559,685,687,690,693],{"class":561,"line":686},8,[559,688,689],{"class":565},"  \u003C",[559,691,692],{"class":569},"TresCanvas",[559,694,592],{"class":565},[559,696,698,701,704],{"class":561,"line":697},9,[559,699,700],{"class":565},"    \u003C",[559,702,703],{"class":569},"Suspense",[559,705,592],{"class":565},[559,707,709,712],{"class":708,"line":549},[561,596],[559,710,711],{"class":565},"      \u003C",[559,713,714],{"class":569},"AnimatedSprite\n",[559,716,718,721,723,725,728],{"class":717,"line":550},[561,596],[559,719,720],{"class":573},"        image",[559,722,580],{"class":565},[559,724,583],{"class":565},[559,726,727],{"class":586},"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fanimated-sprite\u002FcientosTexture.png",[559,729,730],{"class":565},"\"\n",[559,732,734,737,739,741,744],{"class":733,"line":551},[561,596],[559,735,736],{"class":573},"        atlas",[559,738,580],{"class":565},[559,740,583],{"class":565},[559,742,743],{"class":586},"https:\u002F\u002Fraw.githubusercontent.com\u002FTresjs\u002Fassets\u002Fmain\u002Ftextures\u002Fanimated-sprite\u002FcientosAtlas.json",[559,745,730],{"class":565},[559,747,749,752,755,757,759,762],{"class":748,"line":552},[561,596],[559,750,751],{"class":565},"        :",[559,753,754],{"class":573},"animation",[559,756,580],{"class":565},[559,758,583],{"class":565},[559,760,761],{"class":606},"currentAnimation",[559,763,730],{"class":565},[559,765,767],{"class":766,"line":553},[561,596],[559,768,769],{"class":565},"      \u002F>\n",[559,771,773,776,778],{"class":561,"line":772},15,[559,774,775],{"class":565},"    \u003C\u002F",[559,777,703],{"class":569},[559,779,592],{"class":565},[559,781,783,786,788],{"class":561,"line":782},16,[559,784,785],{"class":565},"  \u003C\u002F",[559,787,692],{"class":569},[559,789,592],{"class":565},[559,791,793,795,797],{"class":561,"line":792},17,[559,794,664],{"class":565},[559,796,681],{"class":569},[559,798,592],{"class":565},[800,801,802],"prose-warning",{},[510,803,804,806,807,810],{},[513,805,515],{}," loads resources asynchronously, so it must be wrapped in a ",[513,808,809],{},"\u003CSuspense \u002F>",".",[539,812,814],{"id":813},"compiling-an-atlas","Compiling an atlas",[510,816,817,818,820],{},"In typical usage, ",[513,819,515],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[529,822,823,829],{},[532,824,825],{},[518,826,828],{"href":727,"rel":827},[522],"example compiled texture",[532,830,831],{},[518,832,834],{"href":743,"rel":833},[522],"example JSON atlas",[510,836,837,838,843],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[518,839,842],{"href":840,"rel":841},"https:\u002F\u002Fwww.codeandweb.com\u002Ftexturepacker",[522],"TexturePacker"," useful.",[539,845,847],{"id":846},"without-an-atlas","Without an atlas",[510,849,850,851,854],{},"There may be cases where you don't want to supply an atlas to the ",[513,852,853],{},"atlas"," prop. To do so:",[529,856,857,860,863,866],{},[532,858,859],{},"Compile your source images into a single image texture.",[532,861,862],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[532,864,865],{},"Ensure no extra padding has been added to the compiled image texture.",[532,867,868,869,871,872,810],{},"Set the ",[513,870,853],{}," prop to number of columns, number of rows as ",[513,873,874],{},"[number, number]",[539,876,878],{"id":877},"spritesheets-in-the-wild","Spritesheets in the wild",[800,880,881],{},[510,882,883,884,886],{},"In the wild, spritesheets are often distributed without atlases and the images are often compiled by hand. It can be difficult or impossible to use these resources directly with ",[513,885,515],{},". In many cases, it's advisable to recompile the spritesheet.",[888,889,891],"h3",{"id":890},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[529,893,894,897,900,903,916],{},[532,895,896],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[532,898,899],{},"Align the layers for animation. Toggling layer visibility on\u002Foff will show you how the animation will display, frame to frame.",[532,901,902],{},"Export layers as individual images.",[532,904,905,906,909,912,913,915],{},"Name the individual images according to the following pattern: ",[907,908],"br",{},[513,910,911],{},"[animation name][frame number].[extension]"," ",[907,914],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[532,917,918],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[539,920,922],{"id":921},"props","Props",[924,925,926,943],"table",{},[927,928,929],"thead",{},[930,931,932,937,940],"tr",{},[933,934,936],"th",{"align":935},"left","Name",[933,938,939],{"align":935},"Description",[933,941,942],{"align":935},"Default",[944,945,946,960,1000,1060,1075,1091,1115,1130,1144,1158,1172,1191,1215,1235,1254],"tbody",{},[930,947,948,952,958],{},[949,950,951],"td",{"align":935},"image",[949,953,954,957],{"align":935},[513,955,956],{},"string"," – URL of the image texture or an image dataURL. This prop is not reactive.",[949,959],{"align":935},[930,961,962,964,998],{},[949,963,853],{"align":935},[949,965,966,969,970,995,997],{"align":935},[513,967,968],{},"string | Atlasish"," – ",[529,971,972,978,984,989],{},[532,973,974,975,977],{},"If ",[513,976,956],{},", the URL of the JSON atlas.",[532,979,974,980,983],{},[513,981,982],{},"number",", the number of columns in the texture.",[532,985,974,986,988],{},[513,987,874],{},", the number of columns\u002Frows in the texture.",[532,990,974,991,994],{},[513,992,993],{},"AtlasData",", the atlas as a JS object.",[907,996],{},"This prop is not reactive.",[949,999],{"align":935},[930,1001,1002,1005,1058],{},[949,1003,1004],{"align":935},"definitions",[949,1006,1007,1010,1011,1013,1014,1016,1018,1019,1021,1023,1024],{"align":935},[513,1008,1009],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[513,1012,1004],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[907,1015],{},[907,1017],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[907,1020],{},[907,1022],{},"Here is how various definition strings convert to arrays of frames for playback:",[529,1025,1026,1033,1040,1046,1052],{},[532,1027,1028,1029,1032],{},"\"0,2,1\" - ",[559,1030,1031],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[532,1034,1035,1036,1039],{},"\"2(10)\" - ",[559,1037,1038],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[532,1041,1042,1043],{},"\"1-4\" - ",[559,1044,1045],{},"1,2,3,4",[532,1047,1048,1049],{},"\"10-5(2)\" - ",[559,1050,1051],{},"10,10,9,9,8,8,7,7,6,6,5,5",[532,1053,1054,1055],{},"\"1-4(3),10(2)\" - ",[559,1056,1057],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[949,1059],{"align":935},[930,1061,1062,1065,1070],{},[949,1063,1064],{"align":935},"fps",[949,1066,1067,1069],{"align":935},[513,1068,982],{}," – Desired frames per second of the animation.",[949,1071,1072],{"align":935},[513,1073,1074],{},"30",[930,1076,1077,1080,1086],{},[949,1078,1079],{"align":935},"loop",[949,1081,1082,1085],{"align":935},[513,1083,1084],{},"boolean"," – Whether or not the animation should loop.",[949,1087,1088],{"align":935},[513,1089,1090],{},"true",[930,1092,1093,1095,1110],{},[949,1094,754],{"align":935},[949,1096,1097,1100,1101,1103,1104,1106,1107,1109],{"align":935},[513,1098,1099],{},"string | [number, number] | number"," – If ",[513,1102,956],{},", name of the animation to play. If ",[513,1105,874],{},", start and end frames of the animation. If ",[513,1108,982],{},", frame number to display.",[949,1111,1112],{"align":935},[513,1113,1114],{},"0",[930,1116,1117,1120,1125],{},[949,1118,1119],{"align":935},"paused",[949,1121,1122,1124],{"align":935},[513,1123,1084],{}," – Whether the animation is paused.",[949,1126,1127],{"align":935},[513,1128,1129],{},"false",[930,1131,1132,1135,1140],{},[949,1133,1134],{"align":935},"reversed",[949,1136,1137,1139],{"align":935},[513,1138,1084],{}," – Whether to play the animation in reverse.",[949,1141,1142],{"align":935},[513,1143,1129],{},[930,1145,1146,1149,1154],{},[949,1147,1148],{"align":935},"flipX",[949,1150,1151,1153],{"align":935},[513,1152,1084],{}," – Whether the sprite should be flipped, left to right.",[949,1155,1156],{"align":935},[513,1157,1129],{},[930,1159,1160,1163,1168],{},[949,1161,1162],{"align":935},"resetOnEnd",[949,1164,1165,1167],{"align":935},[513,1166,1084],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[949,1169,1170],{"align":935},[513,1171,1129],{},[930,1173,1174,1177,1187],{},[949,1175,1176],{"align":935},"asSprite",[949,1178,1179,1181,1182],{"align":935},[513,1180,1084],{}," – Whether to display the object as a THREE.Sprite. ",[518,1183,1186],{"href":1184,"rel":1185},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F?q=sprite#api\u002Fen\u002Fobjects\u002FSprite",[522],"See THREE.Sprite",[949,1188,1189],{"align":935},[513,1190,1090],{},[930,1192,1193,1196,1210],{},[949,1194,1195],{"align":935},"center",[949,1197,1198,1201,1202,1205,1206,1209],{"align":935},[513,1199,1200],{},"TresVector2"," – Anchor point of the object. A value of ",[559,1203,1204],{},"0.5, 0.5"," corresponds to the center. ",[559,1207,1208],{},"0, 0"," is left, bottom.",[949,1211,1212],{"align":935},[513,1213,1214],{},"[0.5, 0.5]",[930,1216,1217,1220,1230],{},[949,1218,1219],{"align":935},"alphaTest",[949,1221,1222,1224,1225],{"align":935},[513,1223,982],{}," – Alpha test value for the material. ",[518,1226,1229],{"href":1227,"rel":1228},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmaterials\u002FMaterial.alphaTest",[522],"See THREE.Material.alphaTest",[949,1231,1232],{"align":935},[513,1233,1234],{},"0.0",[930,1236,1237,1240,1250],{},[949,1238,1239],{"align":935},"depthTest",[949,1241,1242,1244,1245],{"align":935},[513,1243,1084],{}," – Depth test value for the material. ",[518,1246,1249],{"href":1247,"rel":1248},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmaterials\u002FMaterial.depthTest",[522],"See THREE.Material.depthTest",[949,1251,1252],{"align":935},[513,1253,1090],{},[930,1255,1256,1259,1269],{},[949,1257,1258],{"align":935},"depthWrite",[949,1260,1261,1263,1264],{"align":935},[513,1262,1084],{}," – Depth write value for the material. ",[518,1265,1268],{"href":1266,"rel":1267},"https:\u002F\u002Fthreejs.org\u002Fdocs\u002F#api\u002Fen\u002Fmaterials\u002FMaterial.depthWrite",[522],"See THREE.Material.depthWrite",[949,1270,1271],{"align":935},[513,1272,1090],{},[539,1274,1276],{"id":1275},"events","Events",[924,1278,1279,1291],{},[927,1280,1281],{},[930,1282,1283,1286,1288],{},[933,1284,1285],{},"Event",[933,1287,939],{},[933,1289,1290],{},"Argument",[944,1292,1293,1308,1329],{},[930,1294,1295,1300,1303],{},[949,1296,1297],{},[513,1298,1299],{},"frame",[949,1301,1302],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[949,1304,1305,1307],{},[513,1306,956],{}," – Name of the newly displayed frame",[930,1309,1310,1315,1324],{},[949,1311,1312],{},[513,1313,1314],{},"end",[949,1316,1317,1318,1321,1322],{},"Emitted when the animation ends – ",[513,1319,1320],{},"props.loop"," must be set to ",[513,1323,1129],{},[949,1325,1326,1328],{},[513,1327,956],{}," – Name of the ending frame",[930,1330,1331,1335,1342],{},[949,1332,1333],{},[513,1334,1079],{},[949,1336,1337,1338,1321,1340],{},"Emitted when the animation loops – ",[513,1339,1320],{},[513,1341,1090],{},[949,1343,1344,1346],{},[513,1345,956],{}," – Name of the frame at the end of the loop",[539,1348,1349],{"id":754},"Animation",[510,1351,1352,1353,1356],{},"The ",[513,1354,1355],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[888,1358,1360],{"id":1359},"using-named-animations-as-animation","Using named animations as animation",[510,1362,1363],{},"When individual files are converted to a spritesheet\u002Fatlas, typically the original images' filenames will be included in the atlas.",[510,1365,1366,1368],{},[513,1367,515],{}," uses those filenames to automatically group images into animations.",[510,1370,1371],{},"Use either of the following naming conventions for your source images ...",[529,1373,1374,1379],{},[532,1375,1376],{},[513,1377,1378],{},"[animation name][frame number].[file_extension]",[532,1380,1381],{},[513,1382,1383],{},"[animation name]_[frame number].[file_extension]",[510,1385,1386,1387,1389,1390,1393,1394,1396,1397,1399],{},"... then ",[513,1388,515],{}," will automatically make all ",[513,1391,1392],{},"[animation name]"," available for playback. Just pass ",[513,1395,1392],{}," to the component's ",[513,1398,1355],{}," prop.",[888,1401,1403],{"id":1402},"example","Example",[510,1405,1406],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[924,1408,1409,1419],{},[927,1410,1411],{},[930,1412,1413,1416],{},[933,1414,1415],{},"Filenames",[933,1417,1418],{},"Animation name",[944,1420,1421,1428,1436],{},[930,1422,1423,1426],{},[949,1424,1425],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[949,1427,653],{},[930,1429,1430,1433],{},[949,1431,1432],{},"cientosIdleToWalkTransition0000.png",[949,1434,1435],{},"cientosIdleToWalkTransition",[930,1437,1438,1441],{},[949,1439,1440],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[949,1442,1443],{},"cientosWalk",[539,1445,1446],{"id":1004},"Definitions",[510,1448,1449,1450,1453,1454,1458],{},"You can supply an object to the ",[513,1451,1452],{},":definitions"," prop. Any ",[518,1455,1457],{"href":1456},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[888,1460,1462],{"id":1461},"demo","Demo",[510,1464,1465,1466,1468,1469,810],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[513,1467,1355],{}," prop is ",[513,1470,1471],{},"'idle'",[510,1473,1474,1475,1477,1478,1481],{},"But below, we've added a ",[513,1476,1452],{}," prop with this value for the ",[513,1479,1480],{},"idle"," key:",[543,1483,1488],{"className":1484,"code":1486,"language":1487},[1485],"language-text","'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n","text",[513,1489,1486],{"__ignoreMap":555},[510,1491,1492],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[529,1494,1495,1504,1518],{},[532,1496,1497,1500,1501,1503],{},[513,1498,1499],{},"0-5"," – Play all six images (",[513,1502,1499],{},") of the animation normally.",[532,1505,1506,1509,1510,1513,1514,1517],{},[513,1507,1508],{},"0(10), 1-2, 3(20), 4-5"," – Play all six images again with a delay of ten frames at the bottom of the bounce (",[513,1511,1512],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[513,1515,1516],{},"3(20)",").",[532,1519,1520,1523],{},[513,1521,1522],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[539,1525,1526],{"id":1195},"Center",[510,1528,1529,1530,1533],{},"In addition to being the sprite's anchor point, the ",[513,1531,1532],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1535,1536,1537],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":555,"searchDepth":562,"depth":548,"links":1539},[1540,1541,1542,1543,1546,1547,1548,1552,1555],{"id":541,"depth":548,"text":15},{"id":813,"depth":548,"text":814},{"id":846,"depth":548,"text":847},{"id":877,"depth":548,"text":878,"children":1544},[1545],{"id":890,"depth":625,"text":891},{"id":921,"depth":548,"text":922},{"id":1275,"depth":548,"text":1276},{"id":754,"depth":548,"text":1349,"children":1549},[1550,1551],{"id":1359,"depth":625,"text":1360},{"id":1402,"depth":625,"text":1403},{"id":1004,"depth":548,"text":1446,"children":1553},[1554],{"id":1461,"depth":625,"text":1462},{"id":1195,"depth":548,"text":1526},"Display 2D animations defined in a texture atlas.","md",null,{},{"title":425,"description":1556},"TOx2TSEHnQeUR_DoVqP-W-cCHOVI1DisvWaE29LwWYA",[1563,1565],{"title":419,"path":420,"stem":421,"description":1564,"children":-1},"3D objects and texture components",{"title":429,"path":430,"stem":431,"description":1566,"children":-1},"Render environment maps for reflective objects.",1791549575751]