[{"data":1,"prerenderedAt":1539},["ShallowReactive",2],{"navigation":3,"/api/objects/animated-sprite":470,"/api/objects/animated-sprite-surround":1534},[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,80,114,156,190,284,310,344,394,436],{"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],{"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},"Edges","/api/abstractions/edges","2.api/1.abstractions/edges",{"title":53,"path":54,"stem":55},"Fit","/api/abstractions/fit","2.api/1.abstractions/fit",{"title":57,"path":58,"stem":59},"Levioso (Float)","/api/abstractions/levioso","2.api/1.abstractions/levioso",{"title":61,"path":62,"stem":63},"Mask","/api/abstractions/mask","2.api/1.abstractions/mask",{"title":65,"path":66,"stem":67},"Outline","/api/abstractions/outline","2.api/1.abstractions/outline",{"title":69,"path":70,"stem":71},"Sampler","/api/abstractions/sampler","2.api/1.abstractions/sampler",{"title":73,"path":74,"stem":75},"ScreenSizer","/api/abstractions/screen-sizer","2.api/1.abstractions/screen-sizer",{"title":77,"path":78,"stem":79},"ScreenSpace","/api/abstractions/screen-space","2.api/1.abstractions/screen-space",{"title":81,"path":82,"stem":83,"children":84},"Controls","/api/controls","2.api/2.controls/index",[85,86,90,94,98,102,106,110],{"title":81,"path":82,"stem":83},{"title":87,"path":88,"stem":89},"Camera Controls","/api/controls/camera-controls","2.api/2.controls/camera-controls",{"title":91,"path":92,"stem":93},"Drag Controls","/api/controls/drag-controls","2.api/2.controls/drag-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],{"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},"Text3D","/api/objects/text-3d","2.api/9.objects/text-3d",{"title":437,"path":438,"stem":439,"children":440},"Miscellaneous","/api/miscellaneous","2.api/miscellaneous/index",[441,442,446,450,454,458,462,466],{"title":437,"path":438,"stem":439},{"title":443,"path":444,"stem":445},"Bounds","/api/miscellaneous/bounds","2.api/miscellaneous/bounds",{"title":447,"path":448,"stem":449},"GlobalAudio","/api/miscellaneous/global-audio","2.api/miscellaneous/global-audio",{"title":451,"path":452,"stem":453},"MouseParallax","/api/miscellaneous/mouse-parallax","2.api/miscellaneous/mouse-parallax",{"title":455,"path":456,"stem":457},"PositionalAudio","/api/miscellaneous/positional-audio","2.api/miscellaneous/positional-audio",{"title":459,"path":460,"stem":461},"useAnimations","/api/miscellaneous/use-animations","2.api/miscellaneous/use-animations",{"title":463,"path":464,"stem":465},"useGLTFExporter","/api/miscellaneous/use-gltf-exporter","2.api/miscellaneous/use-gltf-exporter",{"title":467,"path":468,"stem":469},"useIntersect","/api/miscellaneous/use-intersect","2.api/miscellaneous/use-intersect",{"id":471,"title":401,"body":472,"description":1528,"extension":1529,"links":1530,"meta":1531,"navigation":600,"path":402,"seo":1532,"stem":403,"__hash__":1533},"docs/2.api/9.objects/animated-sprite.md",{"type":473,"value":474,"toc":1510},"minimark",[475,481,500,510,514,771,783,787,793,807,816,820,827,847,851,859,864,891,895,1245,1249,1319,1322,1329,1333,1336,1341,1344,1356,1372,1376,1379,1416,1419,1431,1435,1444,1454,1462,1465,1496,1499,1506],[476,477,478],"scene-controls-wrapper",{},[479,480],"objects-animated-sprite",{},[482,483,484,488,489,496,497,499],"p",{},[485,486,487],"code",{},"\u003CAnimatedSprite />"," displays 2D animations defined in a ",[490,491,495],"a",{"href":492,"rel":493},"https://en.wikipedia.org/wiki/Texture_atlas",[494],"nofollow","texture atlas",". A typical ",[485,498,487],{}," will use:",[501,502,503,507],"ul",{},[504,505,506],"li",{},"An image containing multiple sprites",[504,508,509],{},"A JSON atlas containing the individual sprite coordinates in the image",[511,512,15],"h2",{"id":513},"usage",[515,516,528],"pre",{"className":517,"code":518,"highlights":519,"language":526,"meta":527,"style":527},"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",[520,521,522,523,524,525],2,10,11,12,13,14,"vue","",[485,529,530,565,595,602,631,641,646,656,667,678,687,703,718,736,742,752,762],{"__ignoreMap":527},[531,532,535,539,543,547,550,553,556,560,562],"span",{"class":533,"line":534},"line",1,[531,536,538],{"class":537},"sMK4o","\u003C",[531,540,542],{"class":541},"swJcz","script",[531,544,546],{"class":545},"spNyl"," setup",[531,548,549],{"class":545}," lang",[531,551,552],{"class":537},"=",[531,554,555],{"class":537},"\"",[531,557,559],{"class":558},"sfazB","ts",[531,561,555],{"class":537},[531,563,564],{"class":537},">\n",[531,566,569,573,576,580,583,586,589,592],{"class":567,"line":520},[533,568],"highlight",[531,570,572],{"class":571},"s7zQu","import",[531,574,575],{"class":537}," {",[531,577,579],{"class":578},"sTEyZ"," AnimatedSprite",[531,581,582],{"class":537}," }",[531,584,585],{"class":571}," from",[531,587,588],{"class":537}," '",[531,590,591],{"class":558},"@tresjs/cientos",[531,593,594],{"class":537},"'\n",[531,596,598],{"class":533,"line":597},3,[531,599,601],{"emptyLinePlaceholder":600},true,"\n",[531,603,605,608,611,613,617,620,623,626,628],{"class":533,"line":604},4,[531,606,607],{"class":545},"const",[531,609,610],{"class":578}," currentAnimation ",[531,612,552],{"class":537},[531,614,616],{"class":615},"s2Zo4"," ref",[531,618,619],{"class":578},"(",[531,621,622],{"class":537},"'",[531,624,625],{"class":558},"cientosIdle",[531,627,622],{"class":537},[531,629,630],{"class":578},")\n",[531,632,634,637,639],{"class":533,"line":633},5,[531,635,636],{"class":537},"\u003C/",[531,638,542],{"class":541},[531,640,564],{"class":537},[531,642,644],{"class":533,"line":643},6,[531,645,601],{"emptyLinePlaceholder":600},[531,647,649,651,654],{"class":533,"line":648},7,[531,650,538],{"class":537},[531,652,653],{"class":541},"template",[531,655,564],{"class":537},[531,657,659,662,665],{"class":533,"line":658},8,[531,660,661],{"class":537},"  \u003C",[531,663,664],{"class":541},"TresCanvas",[531,666,564],{"class":537},[531,668,670,673,676],{"class":533,"line":669},9,[531,671,672],{"class":537},"    \u003C",[531,674,675],{"class":541},"Suspense",[531,677,564],{"class":537},[531,679,681,684],{"class":680,"line":521},[533,568],[531,682,683],{"class":537},"      \u003C",[531,685,686],{"class":541},"AnimatedSprite\n",[531,688,690,693,695,697,700],{"class":689,"line":522},[533,568],[531,691,692],{"class":545},"        image",[531,694,552],{"class":537},[531,696,555],{"class":537},[531,698,699],{"class":558},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png",[531,701,702],{"class":537},"\"\n",[531,704,706,709,711,713,716],{"class":705,"line":523},[533,568],[531,707,708],{"class":545},"        atlas",[531,710,552],{"class":537},[531,712,555],{"class":537},[531,714,715],{"class":558},"https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json",[531,717,702],{"class":537},[531,719,721,724,727,729,731,734],{"class":720,"line":524},[533,568],[531,722,723],{"class":537},"        :",[531,725,726],{"class":545},"animation",[531,728,552],{"class":537},[531,730,555],{"class":537},[531,732,733],{"class":578},"currentAnimation",[531,735,702],{"class":537},[531,737,739],{"class":738,"line":525},[533,568],[531,740,741],{"class":537},"      />\n",[531,743,745,748,750],{"class":533,"line":744},15,[531,746,747],{"class":537},"    \u003C/",[531,749,675],{"class":541},[531,751,564],{"class":537},[531,753,755,758,760],{"class":533,"line":754},16,[531,756,757],{"class":537},"  \u003C/",[531,759,664],{"class":541},[531,761,564],{"class":537},[531,763,765,767,769],{"class":533,"line":764},17,[531,766,636],{"class":537},[531,768,653],{"class":541},[531,770,564],{"class":537},[772,773,774],"prose-warning",{},[482,775,776,778,779,782],{},[485,777,487],{}," loads resources asynchronously, so it must be wrapped in a ",[485,780,781],{},"\u003CSuspense />",".",[511,784,786],{"id":785},"compiling-an-atlas","Compiling an atlas",[482,788,789,790,792],{},"In typical usage, ",[485,791,487],{}," requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.",[501,794,795,801],{},[504,796,797],{},[490,798,800],{"href":699,"rel":799},[494],"example compiled texture",[504,802,803],{},[490,804,806],{"href":715,"rel":805},[494],"example JSON atlas",[482,808,809,810,815],{},"Compiling source images into a texture atlas is usually handled by third-party software. You may find ",[490,811,814],{"href":812,"rel":813},"https://www.codeandweb.com/texturepacker",[494],"TexturePacker"," useful.",[511,817,819],{"id":818},"without-an-atlas","Without an atlas",[482,821,822,823,826],{},"There may be cases where you don't want to supply an atlas to the ",[485,824,825],{},"atlas"," prop. To do so:",[501,828,829,832,835,838],{},[504,830,831],{},"Compile your source images into a single image texture.",[504,833,834],{},"Space each sprite into equally sized columns and rows in the compiled image texture.",[504,836,837],{},"Ensure no extra padding has been added to the compiled image texture.",[504,839,840,841,843,844,782],{},"Set the ",[485,842,825],{}," prop to number of columns, number of rows as ",[485,845,846],{},"[number, number]",[511,848,850],{"id":849},"spritesheets-in-the-wild","Spritesheets in the wild",[772,852,853],{},[482,854,855,856,858],{},"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 ",[485,857,487],{},". In many cases, it's advisable to recompile the spritesheet.",[860,861,863],"h3",{"id":862},"how-to-recompile-an-existing-spritesheet-image","How to recompile an existing spritesheet image",[501,865,866,869,872,875,888],{},[504,867,868],{},"Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.",[504,870,871],{},"Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.",[504,873,874],{},"Export layers as individual images.",[504,876,877,878,881,884,885,887],{},"Name the individual images according to the following pattern: ",[879,880],"br",{},[485,882,883],{},"[animation name][frame number].[extension]"," ",[879,886],{},"E.g., walk000.png, walk001.png, idle000.png, idle001.png",[504,889,890],{},"Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.",[511,892,894],{"id":893},"props","Props",[896,897,898,915],"table",{},[899,900,901],"thead",{},[902,903,904,909,912],"tr",{},[905,906,908],"th",{"align":907},"left","Name",[905,910,911],{"align":907},"Description",[905,913,914],{"align":907},"Default",[916,917,918,932,972,1032,1047,1063,1087,1102,1116,1130,1144,1163,1187,1207,1226],"tbody",{},[902,919,920,924,930],{},[921,922,923],"td",{"align":907},"image",[921,925,926,929],{"align":907},[485,927,928],{},"string"," – URL of the image texture or an image dataURL. This prop is not reactive.",[921,931],{"align":907},[902,933,934,936,970],{},[921,935,825],{"align":907},[921,937,938,941,942,967,969],{"align":907},[485,939,940],{},"string | Atlasish"," – ",[501,943,944,950,956,961],{},[504,945,946,947,949],{},"If ",[485,948,928],{},", the URL of the JSON atlas.",[504,951,946,952,955],{},[485,953,954],{},"number",", the number of columns in the texture.",[504,957,946,958,960],{},[485,959,846],{},", the number of columns/rows in the texture.",[504,962,946,963,966],{},[485,964,965],{},"AtlasData",", the atlas as a JS object.",[879,968],{},"This prop is not reactive.",[921,971],{"align":907},[902,973,974,977,1030],{},[921,975,976],{"align":907},"definitions",[921,978,979,982,983,985,986,988,990,991,993,995,996],{"align":907},[485,980,981],{},"Record\u003Cstring, string>"," – Specify playback frame order and repeated frames (delays). ",[485,984,976],{}," is a record where keys are atlas animation names and values are strings containing an animation definition.",[879,987],{},[879,989],{},"A \"animation definition\" comma-separated string of frame numbers with optional parentheses-surrounded durations.",[879,992],{},[879,994],{},"Here is how various definition strings convert to arrays of frames for playback:",[501,997,998,1005,1012,1018,1024],{},[504,999,1000,1001,1004],{},"\"0,2,1\" - ",[531,1002,1003],{},"0,2,1",", i.e., play frame 0, 2, then 1.",[504,1006,1007,1008,1011],{},"\"2(10)\" - ",[531,1009,1010],{},"2,2,2,2,2,2,2,2,2,2",", i.e., play from 2 10 times.",[504,1013,1014,1015],{},"\"1-4\" - ",[531,1016,1017],{},"1,2,3,4",[504,1019,1020,1021],{},"\"10-5(2)\" - ",[531,1022,1023],{},"10,10,9,9,8,8,7,7,6,6,5,5",[504,1025,1026,1027],{},"\"1-4(3),10(2)\" - ",[531,1028,1029],{},"1,1,1,2,2,2,3,3,3,4,4,4,10,10",[921,1031],{"align":907},[902,1033,1034,1037,1042],{},[921,1035,1036],{"align":907},"fps",[921,1038,1039,1041],{"align":907},[485,1040,954],{}," – Desired frames per second of the animation.",[921,1043,1044],{"align":907},[485,1045,1046],{},"30",[902,1048,1049,1052,1058],{},[921,1050,1051],{"align":907},"loop",[921,1053,1054,1057],{"align":907},[485,1055,1056],{},"boolean"," – Whether or not the animation should loop.",[921,1059,1060],{"align":907},[485,1061,1062],{},"true",[902,1064,1065,1067,1082],{},[921,1066,726],{"align":907},[921,1068,1069,1072,1073,1075,1076,1078,1079,1081],{"align":907},[485,1070,1071],{},"string | [number, number] | number"," – If ",[485,1074,928],{},", name of the animation to play. If ",[485,1077,846],{},", start and end frames of the animation. If ",[485,1080,954],{},", frame number to display.",[921,1083,1084],{"align":907},[485,1085,1086],{},"0",[902,1088,1089,1092,1097],{},[921,1090,1091],{"align":907},"paused",[921,1093,1094,1096],{"align":907},[485,1095,1056],{}," – Whether the animation is paused.",[921,1098,1099],{"align":907},[485,1100,1101],{},"false",[902,1103,1104,1107,1112],{},[921,1105,1106],{"align":907},"reversed",[921,1108,1109,1111],{"align":907},[485,1110,1056],{}," – Whether to play the animation in reverse.",[921,1113,1114],{"align":907},[485,1115,1101],{},[902,1117,1118,1121,1126],{},[921,1119,1120],{"align":907},"flipX",[921,1122,1123,1125],{"align":907},[485,1124,1056],{}," – Whether the sprite should be flipped, left to right.",[921,1127,1128],{"align":907},[485,1129,1101],{},[902,1131,1132,1135,1140],{},[921,1133,1134],{"align":907},"resetOnEnd",[921,1136,1137,1139],{"align":907},[485,1138,1056],{}," – For a non-looping animation, when the animation ends, whether to display the zeroth frame.",[921,1141,1142],{"align":907},[485,1143,1101],{},[902,1145,1146,1149,1159],{},[921,1147,1148],{"align":907},"asSprite",[921,1150,1151,1153,1154],{"align":907},[485,1152,1056],{}," – Whether to display the object as a THREE.Sprite. ",[490,1155,1158],{"href":1156,"rel":1157},"https://threejs.org/docs/?q=sprite#api/en/objects/Sprite",[494],"See THREE.Sprite",[921,1160,1161],{"align":907},[485,1162,1062],{},[902,1164,1165,1168,1182],{},[921,1166,1167],{"align":907},"center",[921,1169,1170,1173,1174,1177,1178,1181],{"align":907},[485,1171,1172],{},"TresVector2"," – Anchor point of the object. A value of ",[531,1175,1176],{},"0.5, 0.5"," corresponds to the center. ",[531,1179,1180],{},"0, 0"," is left, bottom.",[921,1183,1184],{"align":907},[485,1185,1186],{},"[0.5, 0.5]",[902,1188,1189,1192,1202],{},[921,1190,1191],{"align":907},"alphaTest",[921,1193,1194,1196,1197],{"align":907},[485,1195,954],{}," – Alpha test value for the material. ",[490,1198,1201],{"href":1199,"rel":1200},"https://threejs.org/docs/#api/en/materials/Material.alphaTest",[494],"See THREE.Material.alphaTest",[921,1203,1204],{"align":907},[485,1205,1206],{},"0.0",[902,1208,1209,1212,1222],{},[921,1210,1211],{"align":907},"depthTest",[921,1213,1214,1216,1217],{"align":907},[485,1215,1056],{}," – Depth test value for the material. ",[490,1218,1221],{"href":1219,"rel":1220},"https://threejs.org/docs/#api/en/materials/Material.depthTest",[494],"See THREE.Material.depthTest",[921,1223,1224],{"align":907},[485,1225,1062],{},[902,1227,1228,1231,1241],{},[921,1229,1230],{"align":907},"depthWrite",[921,1232,1233,1235,1236],{"align":907},[485,1234,1056],{}," – Depth write value for the material. ",[490,1237,1240],{"href":1238,"rel":1239},"https://threejs.org/docs/#api/en/materials/Material.depthWrite",[494],"See THREE.Material.depthWrite",[921,1242,1243],{"align":907},[485,1244,1062],{},[511,1246,1248],{"id":1247},"events","Events",[896,1250,1251,1263],{},[899,1252,1253],{},[902,1254,1255,1258,1260],{},[905,1256,1257],{},"Event",[905,1259,911],{},[905,1261,1262],{},"Argument",[916,1264,1265,1280,1301],{},[902,1266,1267,1272,1275],{},[921,1268,1269],{},[485,1270,1271],{},"frame",[921,1273,1274],{},"Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped",[921,1276,1277,1279],{},[485,1278,928],{}," – Name of the newly displayed frame",[902,1281,1282,1287,1296],{},[921,1283,1284],{},[485,1285,1286],{},"end",[921,1288,1289,1290,1293,1294],{},"Emitted when the animation ends – ",[485,1291,1292],{},"props.loop"," must be set to ",[485,1295,1101],{},[921,1297,1298,1300],{},[485,1299,928],{}," – Name of the ending frame",[902,1302,1303,1307,1314],{},[921,1304,1305],{},[485,1306,1051],{},[921,1308,1309,1310,1293,1312],{},"Emitted when the animation loops – ",[485,1311,1292],{},[485,1313,1062],{},[921,1315,1316,1318],{},[485,1317,928],{}," – Name of the frame at the end of the loop",[511,1320,1321],{"id":726},"Animation",[482,1323,1324,1325,1328],{},"The ",[485,1326,1327],{},":animation"," prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.",[860,1330,1332],{"id":1331},"using-named-animations-as-animation","Using named animations as animation",[482,1334,1335],{},"When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.",[482,1337,1338,1340],{},[485,1339,487],{}," uses those filenames to automatically group images into animations.",[482,1342,1343],{},"Use either of the following naming conventions for your source images ...",[501,1345,1346,1351],{},[504,1347,1348],{},[485,1349,1350],{},"[animation name][frame number].[file_extension]",[504,1352,1353],{},[485,1354,1355],{},"[animation name]_[frame number].[file_extension]",[482,1357,1358,1359,1361,1362,1365,1366,1368,1369,1371],{},"... then ",[485,1360,487],{}," will automatically make all ",[485,1363,1364],{},"[animation name]"," available for playback. Just pass ",[485,1367,1364],{}," to the component's ",[485,1370,1327],{}," prop.",[860,1373,1375],{"id":1374},"example","Example",[482,1377,1378],{},"For our Cientos heart cartoon character animation, here's how the filenames map to animation names.",[896,1380,1381,1391],{},[899,1382,1383],{},[902,1384,1385,1388],{},[905,1386,1387],{},"Filenames",[905,1389,1390],{},"Animation name",[916,1392,1393,1400,1408],{},[902,1394,1395,1398],{},[921,1396,1397],{},"cientosIdle0000.png, cientosIdle0001.png, ...",[921,1399,625],{},[902,1401,1402,1405],{},[921,1403,1404],{},"cientosIdleToWalkTransition0000.png",[921,1406,1407],{},"cientosIdleToWalkTransition",[902,1409,1410,1413],{},[921,1411,1412],{},"cientosWalk0000.png, cientosWalk0001.png, ...",[921,1414,1415],{},"cientosWalk",[511,1417,1418],{"id":976},"Definitions",[482,1420,1421,1422,1425,1426,1430],{},"You can supply an object to the ",[485,1423,1424],{},":definitions"," prop. Any ",[490,1427,1429],{"href":1428},"#animation","named animation"," can be a key. The value is a string that specifies frame order and delays.",[860,1432,1434],{"id":1433},"demo","Demo",[482,1436,1437,1438,1440,1441,782],{},"In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the ",[485,1439,1327],{}," prop is ",[485,1442,1443],{},"'idle'",[482,1445,1446,1447,1449,1450,1453],{},"But below, we've added a ",[485,1448,1424],{}," prop with this value for the ",[485,1451,1452],{},"idle"," key:",[515,1455,1460],{"className":1456,"code":1458,"language":1459},[1457],"language-text","'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'\n","text",[485,1461,1458],{"__ignoreMap":527},[482,1463,1464],{},"So, instead of playing images 0-5 sequentially, this animation will play instead:",[501,1466,1467,1476,1490],{},[504,1468,1469,1472,1473,1475],{},[485,1470,1471],{},"0-5"," – Play all six images (",[485,1474,1471],{},") of the animation normally.",[504,1477,1478,1481,1482,1485,1486,1489],{},[485,1479,1480],{},"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 (",[485,1483,1484],{},"0(10)",") and a delay of twenty frames at the top of the bounce (",[485,1487,1488],{},"3(20)",").",[504,1491,1492,1495],{},[485,1493,1494],{},"0-5(3)"," – Finally, play all six images of the animation with a delay of three frames each.",[511,1497,1498],{"id":1167},"Center",[482,1500,1501,1502,1505],{},"In addition to being the sprite's anchor point, the ",[485,1503,1504],{},":center"," prop also controls how differently sized source images will \"grow\" and \"shrink\". Namely, they \"grow out from\" and \"shrink towards\" the center.",[1507,1508,1509],"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":527,"searchDepth":534,"depth":520,"links":1511},[1512,1513,1514,1515,1518,1519,1520,1524,1527],{"id":513,"depth":520,"text":15},{"id":785,"depth":520,"text":786},{"id":818,"depth":520,"text":819},{"id":849,"depth":520,"text":850,"children":1516},[1517],{"id":862,"depth":597,"text":863},{"id":893,"depth":520,"text":894},{"id":1247,"depth":520,"text":1248},{"id":726,"depth":520,"text":1321,"children":1521},[1522,1523],{"id":1331,"depth":597,"text":1332},{"id":1374,"depth":597,"text":1375},{"id":976,"depth":520,"text":1418,"children":1525},[1526],{"id":1433,"depth":597,"text":1434},{"id":1167,"depth":520,"text":1498},"Display 2D animations defined in a texture atlas.","md",null,{},{"title":401,"description":1528},"TOx2TSEHnQeUR_DoVqP-W-cCHOVI1DisvWaE29LwWYA",[1535,1537],{"title":395,"path":396,"stem":397,"description":1536,"children":-1},"3D objects and texture components",{"title":405,"path":406,"stem":407,"description":1538,"children":-1},"Render environment maps for reflective objects.",1776202094918]