profectus-docs/guide/advanced-concepts/dynamic-layers.html

33 lines
45 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dynamic Layers | Profectus</title>
<meta name="description" content="A game engine that grows with you.">
<link rel="preload stylesheet" href="/assets/style.49aa32a7.css" as="style">
<script type="module" src="/assets/app.68642a14.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/framework.0799945b.js">
<link rel="modulepreload" href="/assets/chunks/theme.52324978.js">
<link rel="modulepreload" href="/assets/guide_advanced-concepts_dynamic-layers.md.42dd7b45.lean.js">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,600;1,400">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<script defer="true" data-domain="moddingtree.com" src="https://plausible.io/js/plausible.js"></script>
<meta name="og:description" content="A game engine that grows with you">
<meta name="og:image" content="/Logo.png">
</head>
<body>
<div id="app"><div class="Layout" data-v-b2cf3e0b><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c8616af1></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c8616af1> Skip to content </a><!--]--><!----><header class="VPNav" data-v-b2cf3e0b data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-1d30fa41><div class="container" data-v-1d30fa41><div class="title" data-v-1d30fa41><div class="VPNavBarTitle has-sidebar" data-v-1d30fa41 data-v-f4ef19a3><a class="title" href="/" data-v-f4ef19a3><!--[--><!--]--><!--[--><img class="VPImage logo" src="/favicon.svg" alt data-v-6db2186b><!--]--><!--[-->Profectus<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-1d30fa41><div class="curtain" data-v-1d30fa41></div><div class="content-body" data-v-1d30fa41><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-1d30fa41 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/guide/" tabindex="0" data-v-7f418b0f data-v-37adc828 data-v-8f4dc553><!--[-->Guide<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/api/overview" tabindex="0" data-v-7f418b0f data-v-37adc828 data-v-8f4dc553><!--[-->API<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://forums.moddingtree.com" target="_blank" rel="noreferrer" tabindex="0" data-v-7f418b0f data-v-37adc828 data-v-8f4dc553><!--[-->Forums<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-8f4dc553><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--]--></nav><!----><!----><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-1d30fa41 data-v-0394ad82 data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://discord.gg/F3xveHV" aria-label="discord" target="_blank" rel="noopener" data-v-f6988cfb data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg></a><a class="VPSocialLink" href="https://github.com/profectus-engine/Profectus" aria-label="github" target="_blank" rel="noopener" data-v-f6988cfb data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">layer</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">layers</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">layer</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;font-style:italic;">throw</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Layer does not exist</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">layer</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">DynamicLayer</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// you might need an &quot;as unknown&quot; after layer</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>This utility function can streamline your code when dealing with multiple dynamic layers and ensure that you&#39;re working with the correct layer type.</p><p>When working with dynamic layers you&#39;ll need to ensure you can determine what layers should exist when loading a save file, by returning an accurate list from your project&#39;s <a href="/api/modules/data/projEntry#getinitiallayers">getInitialLayers</a> function.</p></div></div></main><footer class="VPDocFooter" data-v-c4b0d3cf data-v-face870a><!--[--><!--]--><div class="edit-info" data-v-face870a><div class="edit-link" data-v-face870a><a class="VPLink link edit-link-button" href="https://github.com/profectus-engine/profectus-docs/edit/main/docs/guide/advanced-concepts/dynamic-layers.md" target="_blank" rel="noreferrer" data-v-face870a data-v-8f4dc553><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-face870a><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--><!----></a></div><div class="last-updated" data-v-face870a><p class="VPLastUpdated" data-v-face870a data-v-7b3ebfe1>Last updated: <time datetime="2023-04-19T04:20:45.000Z" data-v-7b3ebfe1></time></p></div></div><div class="prev-next" data-v-face870a><div class="pager" data-v-face870a><a class="pager-link prev" href="/guide/advanced-concepts/creating-features" data-v-face870a><span class="desc" data-v-face870a>Previous page</span><span class="title" data-v-face870a>Creating Features</span></a></div><div class="has-prev pager" data-v-face870a><a class="pager-link next" href="/guide/advanced-concepts/nodes" data-v-face870a><span class="desc" data-v-face870a>Next page</span><span class="title" data-v-face870a>Nodes</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"api_components_math_sqrtcomponent.md\":\"a610fb30\",\"api_components_fields_feedbackbuttoncomponent.md\":\"3022117b\",\"api_components_fields_slidercomponent.md\":\"de4f5cd1\",\"api_components_fields_togglecomponent.md\":\"0126692d\",\"api_components_layout_collapsiblecomponent.md\":\"b792d45f\",\"api_components_layout_columncomponent.md\":\"0a31ce33\",\"api_components_layout_rowcomponent.md\":\"2f1b6079\",\"api_components_layout_spacercomponent.md\":\"8e0b53af\",\"api_components_layout_stickycomponent.md\":\"3605e970\",\"api_components_layout_verticalrulecomponent.md\":\"87270803\",\"api_components_math_floorcomponent.md\":\"765da36c\",\"api_components_fields_selectcomponent.md\":\"ace2bb01\",\"api_components_marknodecomponent.md\":\"95ce4d1c\",\"api_components_layercomponent.md\":\"fb5a91af\",\"api_components_fields_dangerbuttoncomponent.md\":\"43aea00b\",\"api_components_savecomponent.md\":\"bc14d931\",\"api_components_fields_textcomponent.md\":\"039dbcea\",\"api_components_hotkeycomponent.md\":\"94af8a77\",\"api_components_contextcomponent.md\":\"088cd8fb\",\"api_components_nodecomponent.md\":\"6c607feb\",\"api_components_modalcomponent.md\":\"40989410\",\"api_modules_data_themes.md\":\"f07be1bf\",\"api_modules_features_bar.md\":\"6715e91d\",\"api_components_infocomponent.md\":\"5e7ed906\",\"api_modules_features_action.md\":\"57ac6d70\",\"api_modules_data_common.md\":\"1d58f522\",\"api_modules_features_achievement.md\":\"e19ffa90\",\"api_modules_data_projentry.md\":\"65f0a74c\",\"api_modules_features_infobox.md\":\"99885ce3\",\"api_modules_features_feature.md\":\"cea7f1eb\",\"api_modules_features_grid.md\":\"268e4fcb\",\"api_modules_features_conversion.md\":\"3fe5ca87\",\"api_modules_features_challenge.md\":\"61992126\",\"api_modules_features_repeatable.md\":\"9088973d\",\"api_modules_features_hotkey.md\":\"331f5b10\",\"api_modules_features_reset.md\":\"d42e8c0d\",\"api_modules_features_upgrade.md\":\"dcbc95f6\",\"api_modules_features_tabs_tab.md\":\"8c9c4f59\",\"api_modules_features_tooltip.md\":\"3545844d\",\"api_modules_game_events.md\":\"abe1fe7b\",\"api_modules_features_links.md\":\"c8fd9429\",\"api_modules_features_resource.md\":\"21d7a628\",\"api_modules_features_tabs_tabfamily.md\":\"a39b0255\",\"api_modules_features_board.md\":\"daf85c69\",\"api_modules_features_clickable.md\":\"6631e1cc\",\"api_modules_features_particles.md\":\"763b2b91\",\"api_modules_features_tree.md\":\"ea396790\",\"api_modules_game_formulas_formulas.md\":\"b0d33fb7\",\"api_modules_game_formulas_types.md\":\"1363e68e\",\"api_modules_game_notifications.md\":\"97454fd7\",\"api_modules_game_persistence.md\":\"b8b93105\",\"api_modules_game_player.md\":\"ca5c5962\",\"api_modules_game_requirements.md\":\"c3fc6a41\",\"api_modules_game_settings.md\":\"76c1a71b\",\"api_modules_game_state.md\":\"f2996de8\",\"api_modules_lib_break_eternity.md\":\"10391c7b\",\"api_modules_lib_collapsetransition.md\":\"37a925e1\",\"api_modules_lib_lru-cache.md\":\"e899c8cb\",\"api_modules_lib_pixi.md\":\"2b426252\",\"api_modules_lib_pwa-register.md\":\"dcf3fc0d\",\"api_modules_lib_vue-panzoom.md\":\"bfc32ff5\",\"api_modules_lib_vue-textarea-autosize.md\":\"a92591ec\",\"api_modules_util_bignum.md\":\"b875362c\",\"api_modules_util_break_eternity.md\":\"ce26b3f3\",\"api_modules_util_common.md\":\"19b562fd\",\"api_modules_util_computed.md\":\"88db1dec\",\"api_modules_util_proxies.md\":\"4a793e44\",\"api_modules_util_save.md\":\"3fb3841f\",\"guide_getting-started_first-layer.md\":\"59823253\",\"api_modules_game_gameloop.md\":\"22660d28\",\"guide_creating-your-project_project-entry.md\":\"f0a6c223\",\"guide_important-concepts_reactivity.md\":\"f7d1641f\",\"api_modules_util_vue.md\":\"284b139c\",\"api_overview.md\":\"88cceb38\",\"guide_advanced-concepts_creating-features.md\":\"4c4ef16d\",\"guide_advanced-concepts_dynamic-layers.md\":\"42dd7b45\",\"guide_advanced-concepts_nodes.md\":\"2dc4bc54\",\"guide_getting-started_setup.md\":\"43cc29ed\",\"guide_creating-your-project_changelog.md\":\"8ee4e9ee\",\"guide_creating-your-project
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Profectus\",\"description\":\"A game engine that grows with you.\",\"base\":\"/\",\"head\":[],\"appearance\":false,\"themeConfig\":{\"logo\":\"/favicon.svg\",\"editLink\":{\"pattern\":\"https://github.com/profectus-engine/profectus-docs/edit/main/docs/:path\",\"editLinkText\":\"Edit this page on GitHub\"},\"nav\":[{\"text\":\"Guide\",\"link\":\"/guide/\",\"activeMatch\":\"^/guide/\"},{\"text\":\"API\",\"link\":\"/api/overview\",\"activeMatch\":\"^/api/\"},{\"text\":\"Forums\",\"link\":\"https://forums.moddingtree.com\"}],\"socialLinks\":[{\"icon\":\"discord\",\"link\":\"https://discord.gg/F3xveHV\"},{\"icon\":\"github\",\"link\":\"https://github.com/profectus-engine/Profectus\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"Getting Started\",\"collapsed\":false,\"items\":[{\"text\":\"Introduction\",\"link\":\"/guide/\"},{\"text\":\"Setting Up\",\"link\":\"/guide/getting-started/setup\"},{\"text\":\"Updating Profectus\",\"link\":\"/guide/getting-started/updating\"},{\"text\":\"Your First Layer\",\"link\":\"/guide/getting-started/first-layer\"},{\"text\":\"Example Projects\",\"link\":\"/guide/getting-started/examples\"},{\"text\":\"Profectus Changelog\",\"link\":\"https://github.com/profectus-engine/Profectus/blob/main/CHANGELOG.md\"}]},{\"text\":\"Creating Your Project\",\"collapsed\":false,\"items\":[{\"text\":\"Project Info\",\"link\":\"/guide/creating-your-project/project-info\"},{\"text\":\"Project Entry\",\"link\":\"/guide/creating-your-project/project-entry\"},{\"text\":\"Changelog\",\"link\":\"/guide/creating-your-project/changelog\"},{\"text\":\"Themes\",\"link\":\"/guide/creating-your-project/themes\"},{\"text\":\"Utilities\",\"link\":\"/guide/creating-your-project/utils\"}]},{\"text\":\"Important Concepts\",\"collapsed\":false,\"items\":[{\"text\":\"Layers\",\"link\":\"/guide/important-concepts/layers\"},{\"text\":\"Features\",\"link\":\"/guide/important-concepts/features\"},{\"text\":\"Coercable Components\",\"link\":\"/guide/important-concepts/coercable\"},{\"text\":\"Reactivity\",\"link\":\"/guide/important-concepts/reactivity\"},{\"text\":\"Persistence\",\"link\":\"/guide/important-concepts/persistence\"},{\"text\":\"Requirements\",\"link\":\"/guide/important-concepts/requirements\"},{\"text\":\"Formulas\",\"link\":\"/guide/important-concepts/formulas\"}]},{\"text\":\"Recipes\",\"collapsed\":false,\"items\":[{\"text\":\"Prestige Mechanic\",\"link\":\"/guide/recipes/prestige\"},{\"text\":\"Display Save Progress\",\"link\":\"/guide/recipes/save-progress\"},{\"text\":\"Display Particle Effect\",\"link\":\"/guide/recipes/particles\"}]},{\"text\":\"Advanced Concepts\",\"collapsed\":false,\"items\":[{\"text\":\"Creating Features\",\"link\":\"/guide/advanced-concepts/creating-features\"},{\"text\":\"Dynamic Layers\",\"link\":\"/guide/advanced-concepts/dynamic-layers\"},{\"text\":\"Nodes\",\"link\":\"/guide/advanced-concepts/nodes\"}]},{\"text\":\"Migrations\",\"collapsed\":true,\"items\":[{\"text\":\"0.5.X to 0.6.0\",\"link\":\"/guide/migrations/0-6\"}]}],\"/api/\":[{\"text\":\"Components\",\"collapsed\":true,\"items\":[{\"text\":\"Fields\",\"items\":[{\"text\":\" Danger Button Component\",\"link\":\"/api/components/fields/DangerButtonComponent.html\"},{\"text\":\" Feedback Button Component\",\"link\":\"/api/components/fields/FeedbackButtonComponent.html\"},{\"text\":\" Select Component\",\"link\":\"/api/components/fields/SelectComponent.html\"},{\"text\":\" Slider Component\",\"link\":\"/api/components/fields/SliderComponent.html\"},{\"text\":\" Text Component\",\"link\":\"/api/components/fields/TextComponent.html\"},{\"text\":\" Toggle Component\",\"link\":\"/api/components/fields/ToggleComponent.html\"}],\"collapsed\":true},{\"text\":\"Layout\",\"items\":[{\"text\":\" Collapsible Component\",\"link\":\"/api/components/layout/CollapsibleComponent.html\"},{\"text\":\" Column Component\",\"link\":\"/api/components/layout/ColumnComponent.html\"},{\"text\":\" Row Component\",\"link\":\"/api/components/layout/RowComponent.html\"},{\"text\":\" Spa
</body>
</html>