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