profectus-docs/guide/important-concepts/features.html

37 lines
39 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Features | Profectus</title>
<meta name="description" content="A game engine that grows with you.">
<link rel="stylesheet" href="/assets/style.e3402314.css">
<link rel="modulepreload" href="/assets/app.ab34650d.js">
<link rel="modulepreload" href="/assets/guide_important-concepts_features.md.ea736f99.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-6b5fd0a9><!--[--><!--]--><!--[--><span tabindex="-1" data-v-45f6ae50></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-45f6ae50> Skip to content </a><!--]--><!----><header class="VPNav" data-v-6b5fd0a9 data-v-0e356168><div class="VPNavBar has-sidebar" data-v-0e356168 data-v-8856f192><div class="container" data-v-8856f192><div class="VPNavBarTitle has-sidebar" data-v-8856f192 data-v-6a6f7ff6><a class="title" href="/" data-v-6a6f7ff6><!--[--><img class="VPImage logo" src="/favicon.svg" data-v-73ae1788><!--]--><!--[-->Profectus<!--]--></a></div><div class="content" data-v-8856f192><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-8856f192 data-v-a30758ee><span id="main-nav-aria-label" class="visually-hidden" data-v-a30758ee>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/guide/" data-v-a30758ee data-v-8fba5fa8 data-v-5704c677><!--[-->Guide<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/api/overview.html" data-v-a30758ee data-v-8fba5fa8 data-v-5704c677><!--[-->API<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://forums.moddingtree.com" target="_blank" rel="noopener noreferrer" data-v-a30758ee data-v-8fba5fa8 data-v-5704c677><!--[-->Forums<!--]--><!----></a><!--]--><!--]--></nav><!----><!----><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-8856f192 data-v-0ae890f7 data-v-4dcbaf3a><!--[--><a class="VPSocialLink" href="https://discord.gg/F3xveHV" title="discord" target="_blank" rel="noopener noreferrer" data-v-4dcbaf3a data-v-48c45ef6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-48c45ef6><path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"></path></svg><span class="visually-hidden" data-v-48c45ef6>discord</span></a><a class="VPSocialLink" href="https://github.com/profectus-engine/Profectus" title="github" target="_blank" rel="noopener noreferrer" data-v-4dcbaf3a data-v-48c45ef6><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-48c45ef6><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.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden" data-v-48c45ef6>github</span></a><!--]--></div><div class="VPFlyout VPNavBarE
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Generator of Genericness</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">description</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Gain 1 point every second</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">cost</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">resource</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> points</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><p>The result will be a <a href="./layers.html#lazy-proxies">lazy proxy</a> of the feature being created. The feature can then be used throughout the rest of the layer. The main thing to keep in mind when creating features is that they should typically be included in the layer object that gets returned. If a feature has any <a href="./reactivity.html#persistent">persistent refs</a> they must be included or else they will not have their values saved and loaded correctly.</p><p>While the structure of layers is intentionally left up to the creator, it is recommended to avoid storing them in arrays. If you ever remove an upgrade from an array, or add an upgrade in between others, then it will interfere with the save data of existing users. You can manually fix these issues in <a href="./../creating-your-project/project-entry.html#fixoldsave">fixOldSave</a>, but it&#39;s recommended to avoid the error entirely.</p><p>Since usually you want to access a specific feature, storing them in an object is much more reliable and makes the code easier to read. For things like checking number of upgrades bought, for example, you can still use <code>Object.values</code> to get an array of the objects instead.</p><h4 id="example" tabindex="-1">Example <a class="header-anchor" href="#example" aria-hidden="true">#</a></h4><div class="language-ts"><span class="copy"></span><pre><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> upgrades </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> addGainUpgrade</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> gainMultUpgrade</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> upgMultUpgrade </span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> numUpgrades </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">computed</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Object</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">values</span><span style="color:#A6ACCD;">(upgrades)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><h2 id="tree-shaking" tabindex="-1">Tree Shaking <a class="header-anchor" href="#tree-shaking" aria-hidden="true">#</a></h2><p>Since Profectus takes advantage of <a href="https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking" target="_blank" rel="noopener noreferrer">tree shaking</a>, and type of feature that is not used will not be included in the output of the project. That means users have less code to download, a slight performance boost, and you don&#39;t need to worry about feature type-specific settings appearing (such as whether to show maxed challenges).</p><p>It should be noted that a couple features depend on each other, such as Buyables depending on Clickables. That means you may see features included in the output despite not directly using them. Some features, such as Links and Tooltips, are used by the engine itself and will always be included in the output.</p></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><div class="edit-link" data-v-04568844><a class="VPLink link edit-link-button" href="https://github.com/profectus-engine/profectus-docs/edit/main/docs/guide/important-concepts/features.md" target="_blank" rel="noopener noreferrer" data-v-04568844 data-v-5704c677><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" data-v-04568844><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-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2022-11-17T03:38:27.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/guide/important-concepts/layers.html" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Layers</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/guide/important-concepts/coercable.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Coercable Components</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"api_classes_lib_break_eternity.default.md\":\"5ebcc45e\",\"api_components_contextcomponent.md\":\"d8857c87\",\"api_components_infocomponent.md\":\"a3ada40e\",\"api_components_layercomponent.md\":\"719b2b23\",\"api_components_marknodecomponent.md\":\"9ff2021c\",\"api_components_modalcomponent.md\":\"c6af37d6\",\"api_components_nodecomponent.md\":\"e6b27589\",\"api_components_savecomponent.md\":\"377941ea\",\"api_components_fields_dangerbuttoncomponent.md\":\"9c7ae321\",\"api_components_fields_feedbackbuttoncomponent.md\":\"fd493d2b\",\"api_components_fields_selectcomponent.md\":\"b358625d\",\"api_components_fields_slidercomponent.md\":\"626bc315\",\"api_components_fields_textcomponent.md\":\"777ee56d\",\"api_components_fields_togglecomponent.md\":\"7f5f7bd8\",\"api_components_layout_collapsiblecomponent.md\":\"d360a794\",\"api_components_layout_columncomponent.md\":\"a60adb9c\",\"api_components_layout_rowcomponent.md\":\"3996636f\",\"api_components_layout_spacercomponent.md\":\"4b7102a5\",\"api_components_layout_stickycomponent.md\":\"7b034b7f\",\"api_components_layout_verticalrulecomponent.md\":\"a5a98edf\",\"api_components_math_floorcomponent.md\":\"b5ec3a74\",\"api_components_math_sqrtcomponent.md\":\"d1a98a8b\",\"api_enums_data_themes.themes.md\":\"30e96f33\",\"api_enums_features_boards_board.progressdisplay.md\":\"7071758b\",\"api_enums_features_boards_board.shape.md\":\"7be60b53\",\"api_enums_features_feature.visibility.md\":\"f0128c51\",\"api_enums_features_milestones_milestone.milestonedisplay.md\":\"b9e3524e\",\"api_enums_util_common.direction.md\":\"49cddf66\",\"api_interfaces_data_common.layertreenodeoptions.md\":\"6aafa3d4\",\"api_interfaces_data_common.resetbuttonoptions.md\":\"1a2816ef\",\"api_interfaces_data_common.section.md\":\"f83bbc68\",\"api_interfaces_data_themes.theme.md\":\"e2407f16\",\"api_interfaces_data_themes.themevars.md\":\"cf9368e6\",\"api_interfaces_features_achievements_achievement.achievementoptions.md\":\"bb0e26b4\",\"api_interfaces_features_achievements_achievement.baseachievement.md\":\"ea94d080\",\"api_interfaces_features_bars_bar.baroptions.md\":\"4e6b55d9\",\"api_interfaces_features_bars_bar.basebar.md\":\"ada5da43\",\"api_interfaces_features_boards_board.baseboard.md\":\"e43766bc\",\"api_interfaces_features_boards_board.baseboardnodeaction.md\":\"85d574f4\",\"api_interfaces_features_boards_board.basenodetype.md\":\"753d885e\",\"api_interfaces_features_boards_board.boardnode.md\":\"7d688868\",\"api_interfaces_features_boards_board.boardnodeactionoptions.md\":\"f1ddddd2\",\"api_interfaces_features_boards_board.boardnodelink.md\":\"b5a10e2e\",\"api_interfaces_features_boards_board.boardoptions.md\":\"a079b101\",\"api_interfaces_features_boards_board.nodelabel.md\":\"e307cfb6\",\"api_interfaces_features_boards_board.nodetypeoptions.md\":\"975ae5a8\",\"api_interfaces_features_buyable.basebuyable.md\":\"972a14a6\",\"api_interfaces_features_buyable.buyableoptions.md\":\"4e51d5e2\",\"api_interfaces_features_challenges_challenge.basechallenge.md\":\"822932f0\",\"api_interfaces_features_challenges_challenge.challengeoptions.md\":\"7e8c0e66\",\"api_interfaces_features_clickables_clickable.baseclickable.md\":\"6d4d5066\",\"api_interfaces_features_clickables_clickable.clickableoptions.md\":\"9f3b65ee\",\"api_interfaces_features_conversion.baseconversion.md\":\"894ce196\",\"api_interfaces_features_conversion.conversionoptions.md\":\"7afd17d0\",\"api_interfaces_features_conversion.scalingfunction.md\":\"904c4936\",\"api_interfaces_features_grids_grid.basegrid.md\":\"e67b2149\",\"api_interfaces_features_grids_grid.gridcell.md\":\"a17d2eb3\",\"api_interfaces_features_grids_grid.gridoptions.md\":\"fd15348c\",\"api_interfaces_features_hotkey.basehotkey.md\":\"2f7c6894\",\"api_interfaces_features_hotkey.hotkeyoptions.md\":\"f27b0c16\",\"api_interfaces_features_infoboxes_infobox.baseinfobox.md\":\"80ebaa6f\",\"api_interfaces_features_infoboxes_infobox.infoboxoptions.md\":\"baa34bb8\",\"api_interfaces_features_links_links.baselinks.md\":\"79c3b2a5\",\"api_int
<script type="module" async src="/assets/app.ab34650d.js"></script>
</body>
</html>