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