[{"data":1,"prerenderedAt":955},["ShallowReactive",2],{"doc-global_essentials\u002Fresources\u002Fassets":3},{"id":4,"title":5,"body":6,"description":16,"extension":947,"meta":948,"navigation":693,"path":951,"seo":952,"stem":953,"__hash__":954},"docs\u002Fdocs\u002Fglobal_essentials\u002Fresources\u002Fassets.md","Assets",{"type":7,"value":8,"toc":933},"minimark",[9,13,17,20,25,76,78,82,85,169,171,175,180,243,248,280,285,303,307,314,316,320,371,373,377,409,415,420,559,561,565,572,615,617,621,628,633,806,820,822,826,911,913,917,929],[10,11,5],"h1",{"id":12},"assets",[14,15,16],"p",{},"Assets are visual elements displayed in scenes: images, videos, or Spine animations. They support positioning, transformations, and animated transitions. Assets can also be used as backgrounds for Skill Trees.",[18,19],"hr",{},[21,22,24],"h2",{"id":23},"asset-types","Asset Types",[26,27,28,41],"table",{},[29,30,31],"thead",{},[32,33,34,38],"tr",{},[35,36,37],"th",{},"Type",[35,39,40],{},"Description",[42,43,44,56,66],"tbody",{},[32,45,46,53],{},[47,48,49],"td",{},[50,51,52],"code",{},"image",[47,54,55],{},"Static image (PNG, JPG, etc.)",[32,57,58,63],{},[47,59,60],{},[50,61,62],{},"video",[47,64,65],{},"Video file (autoplay, loops)",[32,67,68,73],{},[47,69,70],{},[50,71,72],{},"spine",[47,74,75],{},"Spine skeletal animation",[18,77],{},[21,79,81],{"id":80},"features","Features",[14,83,84],{},"Assets support:",[26,86,87,96],{},[29,88,89],{},[32,90,91,94],{},[35,92,93],{},"Feature",[35,95,40],{},[42,97,98,109,119,129,139,149,159],{},[32,99,100,106],{},[47,101,102],{},[103,104,105],"strong",{},"Positioning",[47,107,108],{},"Place anywhere using x\u002Fy percentages, layer with z-index",[32,110,111,116],{},[47,112,113],{},[103,114,115],{},"Transforms",[47,117,118],{},"Scale, rotate, flip, adjust opacity and blur",[32,120,121,126],{},[47,122,123],{},[103,124,125],{},"Fit modes",[47,127,128],{},"Control how assets fill their container (cover, contain, fill, etc.)",[32,130,131,136],{},[47,132,133],{},[103,134,135],{},"Enter transitions",[47,137,138],{},"Animated appearance (fade, slide, zoom, bounce, special effects)",[32,140,141,146],{},[47,142,143],{},[103,144,145],{},"Exit transitions",[47,147,148],{},"Animated removal with same transition options",[32,150,151,156],{},[47,152,153],{},[103,154,155],{},"Idle animations",[47,157,158],{},"Looping animations while displayed (float, pulse, sway, etc.)",[32,160,161,166],{},[47,162,163],{},[103,164,165],{},"Spine support",[47,167,168],{},"Play animations, combine skins, control playback speed",[18,170],{},[21,172,174],{"id":173},"addingremoving-assets","Adding\u002FRemoving Assets",[176,177,179],"h3",{"id":178},"using-actions","Using Actions",[26,181,182,191],{},[29,183,184],{},[32,185,186,189],{},[35,187,188],{},"Action",[35,190,40],{},[42,192,193,203,213,223,233],{},[32,194,195,200],{},[47,196,197],{},[50,198,199],{},"{asset: \"asset_id\"}",[47,201,202],{},"Add asset from template",[32,204,205,210],{},[47,206,207],{},[50,208,209],{},"{asset: \"asset1, asset2\"}",[47,211,212],{},"Add multiple assets",[32,214,215,220],{},[47,216,217],{},[50,218,219],{},"{asset: \"!asset_id\"}",[47,221,222],{},"Remove asset (with exit animation)",[32,224,225,230],{},[47,226,227],{},[50,228,229],{},"{asset: \"asset_id(x=50, scale=2)\"}",[47,231,232],{},"Add with property overrides",[32,234,235,240],{},[47,236,237],{},[50,238,239],{},"{asset: false}",[47,241,242],{},"Clear all assets",[14,244,245],{},[103,246,247],{},"Example - Scene with background with custom enter:",[249,250,255],"pre",{"className":251,"code":252,"language":253,"meta":254,"style":254},"language-javascript shiki shiki-themes github-light github-dark","{asset: \"forest_bg(enter=fadeSlideLeft)\"}\n","javascript","",[50,256,257],{"__ignoreMap":254},[258,259,262,266,270,273,277],"span",{"class":260,"line":261},"line",1,[258,263,265],{"class":264},"sVt8B","{",[258,267,269],{"class":268},"sScJk","asset",[258,271,272],{"class":264},": ",[258,274,276],{"class":275},"sZZnC","\"forest_bg(enter=fadeSlideLeft)\"",[258,278,279],{"class":264},"}\n",[14,281,282],{},[103,283,284],{},"Example - Remove the asset:",[249,286,288],{"className":251,"code":287,"language":253,"meta":254,"style":254},"{asset: \"!character_portrait\"}\n",[50,289,290],{"__ignoreMap":254},[258,291,292,294,296,298,301],{"class":260,"line":261},[258,293,265],{"class":264},[258,295,269],{"class":268},[258,297,272],{"class":264},[258,299,300],{"class":275},"\"!character_portrait\"",[258,302,279],{"class":264},[176,304,306],{"id":305},"default-room-assets","Default Room Assets",[14,308,309,310,313],{},"Set ",[50,311,312],{},"default_assets"," on room templates to automatically load assets when entering a room.",[18,315],{},[21,317,319],{"id":318},"methods","Methods",[26,321,322,331],{},[29,323,324],{},[32,325,326,329],{},[35,327,328],{},"Method",[35,330,40],{},[42,332,333,343,352,361],{},[32,334,335,340],{},[47,336,337],{},[50,338,339],{},"game.addAssets(id)",[47,341,342],{},"Add asset by ID",[32,344,345,350],{},[47,346,347],{},[50,348,349],{},"game.addAssets([id1, id2])",[47,351,212],{},[32,353,354,359],{},[47,355,356],{},[50,357,358],{},"game.addAssets({id, x, y, ...})",[47,360,232],{},[32,362,363,368],{},[47,364,365],{},[50,366,367],{},"game.removeAssets(id)",[47,369,370],{},"Remove asset (triggers exit animation)",[18,372],{},[21,374,376],{"id":375},"events","Events",[26,378,379,392],{},[29,380,381],{},[32,382,383,386,389],{},[35,384,385],{},"Event",[35,387,388],{},"When it fires",[35,390,391],{},"Parameters",[42,393,394],{},[32,395,396,401,404],{},[47,397,398],{},[50,399,400],{},"asset_render",[47,402,403],{},"Before asset is rendered",[47,405,406],{},[50,407,408],{},"(asset)",[14,410,411,412,414],{},"Use ",[50,413,400],{}," to modify asset properties dynamically before display.",[14,416,417],{},[103,418,419],{},"Example - Darken background at night:",[249,421,423],{"className":251,"code":422,"language":253,"meta":254,"style":254},"game.on(\"asset_render\", (asset) => {\n  if (asset.tags.includes(\"background\")) {\n    const isNight = game.getStore(\"world\").get(\"time_of_day\") === \"night\";\n    asset.alpha = isNight ? 0.6 : 1;\n  }\n});\n",[50,424,425,455,475,521,547,553],{"__ignoreMap":254},[258,426,427,430,433,436,439,442,445,448,452],{"class":260,"line":261},[258,428,429],{"class":264},"game.",[258,431,432],{"class":268},"on",[258,434,435],{"class":264},"(",[258,437,438],{"class":275},"\"asset_render\"",[258,440,441],{"class":264},", (",[258,443,269],{"class":444},"s4XuR",[258,446,447],{"class":264},") ",[258,449,451],{"class":450},"szBVR","=>",[258,453,454],{"class":264}," {\n",[258,456,458,461,464,467,469,472],{"class":260,"line":457},2,[258,459,460],{"class":450},"  if",[258,462,463],{"class":264}," (asset.tags.",[258,465,466],{"class":268},"includes",[258,468,435],{"class":264},[258,470,471],{"class":275},"\"background\"",[258,473,474],{"class":264},")) {\n",[258,476,478,481,485,488,491,494,496,499,502,505,507,510,512,515,518],{"class":260,"line":477},3,[258,479,480],{"class":450},"    const",[258,482,484],{"class":483},"sj4cs"," isNight",[258,486,487],{"class":450}," =",[258,489,490],{"class":264}," game.",[258,492,493],{"class":268},"getStore",[258,495,435],{"class":264},[258,497,498],{"class":275},"\"world\"",[258,500,501],{"class":264},").",[258,503,504],{"class":268},"get",[258,506,435],{"class":264},[258,508,509],{"class":275},"\"time_of_day\"",[258,511,447],{"class":264},[258,513,514],{"class":450},"===",[258,516,517],{"class":275}," \"night\"",[258,519,520],{"class":264},";\n",[258,522,524,527,530,533,536,539,542,545],{"class":260,"line":523},4,[258,525,526],{"class":264},"    asset.alpha ",[258,528,529],{"class":450},"=",[258,531,532],{"class":264}," isNight ",[258,534,535],{"class":450},"?",[258,537,538],{"class":483}," 0.6",[258,540,541],{"class":450}," :",[258,543,544],{"class":483}," 1",[258,546,520],{"class":264},[258,548,550],{"class":260,"line":549},5,[258,551,552],{"class":264},"  }\n",[258,554,556],{"class":260,"line":555},6,[258,557,558],{"class":264},"});\n",[18,560],{},[21,562,564],{"id":563},"gallery-integration","Gallery Integration",[14,566,567,568,571],{},"Assets with ",[50,569,570],{},"gallery"," field configured are added to the gallery when displayed:",[26,573,574,583],{},[29,575,576],{},[32,577,578,581],{},[35,579,580],{},"Field",[35,582,40],{},[42,584,585,595,605],{},[32,586,587,592],{},[47,588,589],{},[50,590,591],{},"gallery.gallery_id",[47,593,594],{},"Gallery to add to",[32,596,597,602],{},[47,598,599],{},[50,600,601],{},"gallery.entity_name",[47,603,604],{},"Display name",[32,606,607,612],{},[47,608,609],{},[50,610,611],{},"gallery.entity_description",[47,613,614],{},"Description text",[18,616],{},[21,618,620],{"id":619},"using-backgroundasset-component","Using BackgroundAsset Component",[14,622,623,624,627],{},"The ",[50,625,626],{},"BackgroundAsset"," component is available for use in custom Vue components. It renders an asset with full support for transitions, idle animations, and all asset features.",[14,629,630],{},[103,631,632],{},"Example - Custom component with background:",[249,634,636],{"className":251,"code":635,"language":253,"meta":254,"style":254},"\u002F\u002F Access engine exports\nconst { vue, components, game } = window.engine;\nconst { BackgroundAsset } = components;\n\nconst MyComponent = vue.defineComponent({\n  \u002F\u002F Register the component\n  components: { BackgroundAsset },\n  setup() {\n    \u002F\u002F getData() returns its own copy of the asset; pass it straight through\n    const asset = game.getData(\"assets\").get(\"my_background\");\n    return { asset };\n  },\n  \u002F\u002F Pass asset as prop\n  template: `\u003CBackgroundAsset :asset=\"asset\" \u002F>\u003Cdiv>some other content\u003C\u002Fdiv>`\n});\n",[50,637,638,644,674,689,695,713,718,724,733,739,771,780,786,792,801],{"__ignoreMap":254},[258,639,640],{"class":260,"line":261},[258,641,643],{"class":642},"sJ8bj","\u002F\u002F Access engine exports\n",[258,645,646,649,652,655,658,661,663,666,669,671],{"class":260,"line":457},[258,647,648],{"class":450},"const",[258,650,651],{"class":264}," { ",[258,653,654],{"class":483},"vue",[258,656,657],{"class":264},", ",[258,659,660],{"class":483},"components",[258,662,657],{"class":264},[258,664,665],{"class":483},"game",[258,667,668],{"class":264}," } ",[258,670,529],{"class":450},[258,672,673],{"class":264}," window.engine;\n",[258,675,676,678,680,682,684,686],{"class":260,"line":477},[258,677,648],{"class":450},[258,679,651],{"class":264},[258,681,626],{"class":483},[258,683,668],{"class":264},[258,685,529],{"class":450},[258,687,688],{"class":264}," components;\n",[258,690,691],{"class":260,"line":523},[258,692,694],{"emptyLinePlaceholder":693},true,"\n",[258,696,697,699,702,704,707,710],{"class":260,"line":549},[258,698,648],{"class":450},[258,700,701],{"class":483}," MyComponent",[258,703,487],{"class":450},[258,705,706],{"class":264}," vue.",[258,708,709],{"class":268},"defineComponent",[258,711,712],{"class":264},"({\n",[258,714,715],{"class":260,"line":555},[258,716,717],{"class":642},"  \u002F\u002F Register the component\n",[258,719,721],{"class":260,"line":720},7,[258,722,723],{"class":264},"  components: { BackgroundAsset },\n",[258,725,727,730],{"class":260,"line":726},8,[258,728,729],{"class":268},"  setup",[258,731,732],{"class":264},"() {\n",[258,734,736],{"class":260,"line":735},9,[258,737,738],{"class":642},"    \u002F\u002F getData() returns its own copy of the asset; pass it straight through\n",[258,740,742,744,747,749,751,754,756,759,761,763,765,768],{"class":260,"line":741},10,[258,743,480],{"class":450},[258,745,746],{"class":483}," asset",[258,748,487],{"class":450},[258,750,490],{"class":264},[258,752,753],{"class":268},"getData",[258,755,435],{"class":264},[258,757,758],{"class":275},"\"assets\"",[258,760,501],{"class":264},[258,762,504],{"class":268},[258,764,435],{"class":264},[258,766,767],{"class":275},"\"my_background\"",[258,769,770],{"class":264},");\n",[258,772,774,777],{"class":260,"line":773},11,[258,775,776],{"class":450},"    return",[258,778,779],{"class":264}," { asset };\n",[258,781,783],{"class":260,"line":782},12,[258,784,785],{"class":264},"  },\n",[258,787,789],{"class":260,"line":788},13,[258,790,791],{"class":642},"  \u002F\u002F Pass asset as prop\n",[258,793,795,798],{"class":260,"line":794},14,[258,796,797],{"class":264},"  template: ",[258,799,800],{"class":275},"`\u003CBackgroundAsset :asset=\"asset\" \u002F>\u003Cdiv>some other content\u003C\u002Fdiv>`\n",[258,802,804],{"class":260,"line":803},15,[258,805,558],{"class":264},[14,807,808,811,812,815,816,819],{},[50,809,810],{},"getData()"," returns a static (non-reactive) copy of the editor's source data, so the asset never changes on its own — pass it straight to the prop for a one-time render. Wrap it in ",[50,813,814],{},"vue.ref(...)"," only if you intend to swap it at runtime (e.g. ",[50,817,818],{},"asset.value = ...",") so the component re-renders.",[18,821],{},[21,823,825],{"id":824},"quick-reference","Quick Reference",[26,827,828,838],{},[29,829,830],{},[32,831,832,835],{},[35,833,834],{},"I want to...",[35,836,837],{},"Do this",[42,839,840,850,860,870,880,891,901],{},[32,841,842,845],{},[47,843,844],{},"Add background image",[47,846,847],{},[50,848,849],{},"{asset: \"bg_forest\"}",[32,851,852,855],{},[47,853,854],{},"Add with animation",[47,856,857],{},[50,858,859],{},"{asset: \"bg_forest(enter=fade)\"}",[32,861,862,865],{},[47,863,864],{},"Remove asset",[47,866,867],{},[50,868,869],{},"{asset: \"!bg_forest\"}",[32,871,872,875],{},[47,873,874],{},"Position asset",[47,876,877],{},[50,878,879],{},"{asset: \"bg_forest(x=80, y=20)\"}",[32,881,882,885],{},[47,883,884],{},"Layer assets",[47,886,309,887,890],{},[50,888,889],{},"z"," field (higher = on top)",[32,892,893,896],{},[47,894,895],{},"Flip horizontally",[47,897,309,898],{},[50,899,900],{},"xscale: -1",[32,902,903,906],{},[47,904,905],{},"Add looping animation",[47,907,309,908],{},[50,909,910],{},"idle: \"float\"",[18,912],{},[21,914,916],{"id":915},"next-steps","Next Steps",[918,919,920],"ul",{},[921,922,923,928],"li",{},[924,925,927],"a",{"href":926},"\u002Fdocs\u002Fglobal_essentials\u002Fresources\u002Faudio","Audio"," - Music and sound effects",[930,931,932],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":254,"searchDepth":457,"depth":457,"links":934},[935,936,937,941,942,943,944,945,946],{"id":23,"depth":457,"text":24},{"id":80,"depth":457,"text":81},{"id":173,"depth":457,"text":174,"children":938},[939,940],{"id":178,"depth":477,"text":179},{"id":305,"depth":477,"text":306},{"id":318,"depth":457,"text":319},{"id":375,"depth":457,"text":376},{"id":563,"depth":457,"text":564},{"id":619,"depth":457,"text":620},{"id":824,"depth":457,"text":825},{"id":915,"depth":457,"text":916},"md",{"plugin":949,"category":950,"page":12},"global_essentials","resources","\u002Fdocs\u002Fglobal_essentials\u002Fresources\u002Fassets",{"title":5,"description":16},"docs\u002Fglobal_essentials\u002Fresources\u002Fassets","mPBUla-qqNN9r8CxcGxtGZ6KMjSoDgcuDNsXOQ-Ci9U",1779582261425]