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