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