profectus-docs/guide/advanced-concepts/creating-features.html

27 lines
No EOL
33 KiB
HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Creating 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_advanced-concepts_creating-features.md.f70bc439.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 VPNavBarExtra extra" data-v-8856f192 data-v-0562f5c0 data-v-8dccea88><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8dccea88><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-8dccea88><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-8dccea88><div class="VPMenu" data-v-8dccea88 data-v-e73581a2><!----><!--[--><!--[--><!----><!----><div class="group" data-v-0562f5c0><div class="item social-links" data-v-0562f5c0><div class="VPSocialLinks social-links-list" data-v-0562f5c0 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></div><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-8856f192 data-v-6f008456><span class="container" data-v-6f008456><span class="top" data-v-6f008456></span><span class="middle" data-v-6f008456></span><span class="bottom" data-v-6f008456></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-6b5fd0a9 data-v-92b0f14a><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-92b0f14a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-92b0f14a><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-92b0f14a>Menu</span></button><a class="top-link" href="#" data-v-92b0f14a> Return to top </a></div><aside class="VPSidebar" data-v-6b5fd0a9 data-v-55e4c7db><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-55e4c7db><span class="visually-hidden" id="sidebar-aria-label" data-v-55e4c7db> Sidebar Navigation </span><!--[--><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Getting Started</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Introduction</span><!--]--><!----></a><a class="VPLink link" href="/guide/getting-started/setup.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Setting Up</span><!--]--><!----></a><a class="VPLink link" href="/guide/getting-started/updating.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Updating Profectus</span><!--]--><!----></a><a class="VPLink link" href="/guide/getting-started/examples.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Example Projects</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Creating Your Project</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/creating-your-project/project-info.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Project Info</span><!--]--><!----></a><a class="VPLink link" href="/guide/creating-your-project/project-entry.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Project Entry</span><!--]--><!----></a><a class="VPLink link" href="/guide/creating-your-project/changelog.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Changelog</span><!--]--><!----></a><a class="VPLink link" href="/guide/creating-your-project/themes.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Themes</span><!--]--><!----></a><a class="VPLink link" href="/guide/creating-your-project/utils.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Utilities</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Important Concepts</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/important-concepts/layers.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Layers</span><!--]--><!----></a><a class="VPLink link" href="/guide/important-concepts/features.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Features</span><!--]--><!----></a><a class="VPLink link" href="/guide/important-concepts/coercable.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Coercable Components</span><!--]--><!----></a><a class="VPLink link" href="/guide/important-concepts/reactivity.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Reactivity</span><!--]--><!----></a><a class="VPLink link" href="/guide/important-concepts/persistence.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Persistence</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Recipes</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link" href="/guide/recipes/save-progress.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Display Save Progress</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-55e4c7db><section class="VPSidebarGroup collapsible" data-v-55e4c7db data-v-1f69a7ed><div class="title" role="button" data-v-1f69a7ed><h2 class="title-text" data-v-1f69a7ed>Advanced Concepts</h2><div class="action" data-v-1f69a7ed><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-1f69a7ed><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-1f69a7ed><!--[--><a class="VPLink link active" href="/guide/advanced-concepts/creating-features.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Creating Features</span><!--]--><!----></a><a class="VPLink link" href="/guide/advanced-concepts/dynamic-layers.html" data-v-1f69a7ed data-v-f53f775e data-v-5704c677><!--[--><span class="link-text" data-v-f53f775e>Dynamic Layers</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-6b5fd0a9 data-v-a4c57a06><div class="VPDoc has-sidebar" data-v-a4c57a06 data-v-79ca2460><div class="container" data-v-79ca2460><div class="aside" data-v-79ca2460><div class="aside-curtain" data-v-79ca2460></div><div class="aside-container" data-v-79ca2460><div class="aside-content" data-v-79ca2460><div class="VPDocAside" data-v-79ca2460 data-v-779d834d><!--[--><!--]--><!--[--><!--]--><!----><!--[--><!--]--><div class="spacer" data-v-779d834d></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-79ca2460><div class="content-container" data-v-79ca2460><!--[--><!--]--><main class="main" data-v-79ca2460><div style="position:relative;" class="vp-doc _guide_advanced-concepts_creating-features" data-v-79ca2460><div><h1 id="creating-features" tabindex="-1">Creating Features <a class="header-anchor" href="#creating-features" aria-hidden="true">#</a></h1><p># TODO</p><p>Because typescript does not emit JS, if a value is supposed to be a function it is impossible to determine if a given function is the intended value or a function that returns the actual value. For this reason it is not recommended for any feature types to include properties that are <code>Computable&lt;Function&gt;</code>s, and all functions <em>will</em> be wrapped in <code>computed</code>. The notable exception to this is <a href="./../important-concepts/coercable.html#render-functions-jsx">JSX</a>, which uses a utility function to mark that a function should not be wrapped.</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/advanced-concepts/creating-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-07-17T22:25:15.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/recipes/save-progress.html" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Display Save Progress</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/guide/advanced-concepts/dynamic-layers.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Dynamic Layers</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\":\"1290440e\",\"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\":\"8e30567c\",\"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\":\"cb2c6c21\",\"api_enums_features_boards_board.progressdisplay.md\":\"4edec575\",\"api_enums_features_boards_board.shape.md\":\"d29ef164\",\"api_enums_features_feature.visibility.md\":\"f7ecb050\",\"api_enums_features_milestones_milestone.milestonedisplay.md\":\"39d1fa14\",\"api_enums_util_common.direction.md\":\"0e00c6d4\",\"api_interfaces_data_common.layertreenodeoptions.md\":\"d7ad7953\",\"api_interfaces_data_common.resetbuttonoptions.md\":\"85d2c912\",\"api_interfaces_data_themes.theme.md\":\"6e26bdae\",\"api_interfaces_data_themes.themevars.md\":\"7e47c03d\",\"api_interfaces_features_achievements_achievement.achievementoptions.md\":\"e3bb9e10\",\"api_interfaces_features_achievements_achievement.baseachievement.md\":\"2720dde1\",\"api_interfaces_features_bars_bar.baroptions.md\":\"88cdcf49\",\"api_interfaces_features_bars_bar.basebar.md\":\"db8e4ea8\",\"api_interfaces_features_boards_board.baseboard.md\":\"52e79f2d\",\"api_interfaces_features_boards_board.baseboardnodeaction.md\":\"c31a59bb\",\"api_interfaces_features_boards_board.basenodetype.md\":\"bd8dbc71\",\"api_interfaces_features_boards_board.boardnode.md\":\"0cc3dbfa\",\"api_interfaces_features_boards_board.boardnodeactionoptions.md\":\"2a5b2665\",\"api_interfaces_features_boards_board.boardnodelink.md\":\"e4c431f0\",\"api_interfaces_features_boards_board.boardoptions.md\":\"3cbda49d\",\"api_interfaces_features_boards_board.nodelabel.md\":\"fe7b2f21\",\"api_interfaces_features_boards_board.nodetypeoptions.md\":\"9cdab6c0\",\"api_interfaces_features_buyable.basebuyable.md\":\"5d8810f8\",\"api_interfaces_features_buyable.buyableoptions.md\":\"38091563\",\"api_interfaces_features_challenges_challenge.basechallenge.md\":\"1144d5c7\",\"api_interfaces_features_challenges_challenge.challengeoptions.md\":\"1ec2fcf6\",\"api_interfaces_features_clickables_clickable.baseclickable.md\":\"06109a64\",\"api_interfaces_features_clickables_clickable.clickableoptions.md\":\"f7a7ae11\",\"api_interfaces_features_conversion.baseconversion.md\":\"9cb19bfd\",\"api_interfaces_features_conversion.conversionoptions.md\":\"bc32d8b6\",\"api_interfaces_features_conversion.scalingfunction.md\":\"6a2a175d\",\"api_interfaces_features_grids_grid.basegrid.md\":\"da2c6613\",\"api_interfaces_features_grids_grid.gridcell.md\":\"f77bad6a\",\"api_interfaces_features_grids_grid.gridoptions.md\":\"f3f8a065\",\"api_interfaces_features_hotkey.basehotkey.md\":\"59749b52\",\"api_interfaces_features_hotkey.hotkeyoptions.md\":\"8d1c87ad\",\"api_interfaces_features_infoboxes_infobox.baseinfobox.md\":\"0b8fa392\",\"api_interfaces_features_infoboxes_infobox.infoboxoptions.md\":\"0432d40e\",\"api_interfaces_features_links_links.baselinks.md\":\"f22c773a\",\"api_interfaces_features_links_links.link.md\":\"884cae83\",\"api_interfaces_features_links_links.linksoptions.md\":\"b33725e9\",\"api_interfaces_features_milestones_milestone.basemilestone.md\":\"da47de03\",\"api_interfaces_features_milestones_milestone.milestoneoptions.md\":\"83349bd5\",\"api_interfaces_features_particles_particles.baseparticles.md\":\"6051b08b\",\"api_interfaces_features_particles_particles.particlesoptions.md\":\"cab52692\",\"api_interfaces_features_reset.basereset.md\":\"0aaee6a5\",\"api_interfaces_features_reset.resetoptions.md\":\"e4457e15\",\"api_interfaces_features_resources_resource.resource.md\":\"4642dd5e\",\"api_interfaces_features_tabs_tab.basetab.md\":\"5111ac2f\",\"api_interfaces_features_tabs_tab.taboptions.md\":\"76360ded\",\"api_interfaces_features_tabs_tabfamily.basetabbutton.md\":\"4d467baa\",\"api_interfaces_features_tabs_tabfamily.basetabfamily.md\":\"f94ee862\",\"api_interfaces_features_tabs_tabfamily.tabbuttonoptions.md\":\"6b9f68a4\",\"api_interfaces_features_tabs_tabfamily.tabfamilyoptions.md\":\"6d9a7c51\",\"api_interfaces_features_tooltips_tooltip.basetooltip.md\":\"1f53afea\",\"api_interfaces_features_tooltips_tooltip.tooltipoptions.md\":\"da07b29e\",\"api_interfaces_features_trees_tree.basetree.md\":\"4c9d354d\",\"api_interfaces_features_trees_tree.basetreenode.md\":\"9aa8988f\",\"api_interfaces_features_trees_tree.treebranch.md\":\"585c60bb\",\"api_interfaces_features_trees_tree.treenodeoptions.md\":\"b800da02\",\"api_interfaces_features_trees_tree.treeoptions.md\":\"696f3164\",\"api_interfaces_features_upgrades_upgrade.baseupgrade.md\":\"550f5465\",\"api_interfaces_features_upgrades_upgrade.upgradeoptions.md\":\"67bb67b8\",\"api_interfaces_game_events.globalevents.md\":\"56bdb71d\",\"api_interfaces_game_layers.baselayer.md\":\"96d8a56f\",\"api_interfaces_game_layers.featurenode.md\":\"efcfeb87\",\"api_interfaces_game_layers.layerevents.md\":\"1ad51117\",\"api_interfaces_game_layers.layeroptions.md\":\"2feb7841\",\"api_interfaces_game_layers.position.md\":\"bc975f0f\",\"api_interfaces_game_modifiers.modifier.md\":\"cd7aaea5\",\"api_interfaces_game_player.playerdata.md\":\"eb316c34\",\"api_interfaces_game_settings.settings.md\":\"53192dfb\",\"api_interfaces_game_state.transient.md\":\"a080a663\",\"api_interfaces_lib_pwa-register.registerswoptions.md\":\"67a3e37c\",\"api_modules_data_common.md\":\"fec69339\",\"api_modules_data_projentry.md\":\"798dd0d5\",\"api_modules_data_themes.md\":\"e773216a\",\"api_modules_features_achievements_achievementcomponent.md\":\"6d787eea\",\"api_modules_features_achievements_achievement.md\":\"0b28a02b\",\"api_modules_features_bars_barcomponent.md\":\"5e7717f8\",\"api_modules_features_bars_bar.md\":\"cabe3e15\",\"api_modules_features_boards_boardcomponent.md\":\"7da59571\",\"api_modules_features_boards_boardlinkcomponent.md\":\"9e5467a6\",\"api_modules_features_boards_boardnodecomponent.md\":\"a7b1dd7e\",\"api_modules_features_boards_board.md\":\"7a6b7e01\",\"api_modules_features_buyable.md\":\"97c22bc3\",\"api_modules_features_challenges_challengecomponent.md\":\"846d8b8e\",\"api_modules_features_challenges_challenge.md\":\"4ae2f8a0\",\"api_modules_features_clickables_clickablecomponent.md\":\"8a74f64d\",\"api_modules_features_clickables_clickable.md\":\"b817aee2\",\"api_modules_features_conversion.md\":\"d9c2ff26\",\"api_modules_features_feature.md\":\"156dc078\",\"api_modules_features_grids_gridcellcomponent.md\":\"9b34a274\",\"api_modules_features_grids_gridcomponent.md\":\"ce17cbe7\",\"api_modules_features_grids_grid.md\":\"88110bd8\",\"api_modules_features_hotkey.md\":\"f1686e13\",\"api_modules_features_infoboxes_infoboxcomponent.md\":\"63ba9291\",\"api_modules_features_infoboxes_infobox.md\":\"c2cbbaa2\",\"api_modules_features_links_linkcomponent.md\":\"11b0d97e\",\"api_modules_features_links_linkscomponent.md\":\"2c32c4b5\",\"api_modules_features_links_links.md\":\"81ed5d06\",\"api_modules_features_milestones_milestonecomponent.md\":\"a452ab04\",\"api_modules_features_milestones_milestone.md\":\"f62388b4\",\"api_modules_features_particles_particlescomponent.md\":\"94c44f12\",\"api_modules_features_particles_particles.md\":\"7cb0364a\",\"api_modules_features_reset.md\":\"33547e6c\",\"api_modules_features_resources_maindisplaycomponent.md\":\"2ee12087\",\"api_modules_features_resources_resourcecomponent.md\":\"e37af5e2\",\"api_modules_features_resources_resource.md\":\"a1e39127\",\"api_modules_features_tabs_tabbuttoncomponent.md\":\"244fc06e\",\"api_modules_features_tabs_tabcomponent.md\":\"923254b8\",\"api_modules_features_tabs_tabfamilycomponent.md\":\"424df151\",\"api_modules_features_tabs_tab.md\":\"b4228ba6\",\"api_modules_features_tabs_tabfamily.md\":\"a02f2d4c\",\"api_modules_features_tooltips_tooltipcomponent.md\":\"09a578eb\",\"api_modules_features_tooltips_tooltip.md\":\"ba34412c\",\"api_modules_features_trees_treecomponent.md\":\"55dce179\",\"api_modules_features_trees_treenodecomponent.md\":\"1158642d\",\"api_modules_features_trees_tree.md\":\"46681117\",\"api_modules_features_upgrades_upgradecomponent.md\":\"c26dec10\",\"api_modules_features_upgrades_upgrade.md\":\"cdf58471\",\"api_modules_game_events.md\":\"2f34b3ad\",\"api_modules_game_layers.md\":\"21cf1996\",\"api_modules_game_modifiers.md\":\"b2863ef2\",\"api_modules_game_notifications.md\":\"2cf2d6a5\",\"api_modules_game_persistence.md\":\"503a8c0f\",\"api_modules_game_player.md\":\"70a229bb\",\"api_modules_game_settings.md\":\"648a4653\",\"api_modules_game_state.md\":\"f2335fa2\",\"api_modules_lib_break_eternity.md\":\"aa7a31a7\",\"api_modules_lib_pwa-register.md\":\"93dfaf81\",\"api_modules_util_bignum.md\":\"a72d9d17\",\"api_modules_util_break_eternity.md\":\"f46b0d30\",\"api_modules_util_common.md\":\"c060302e\",\"api_modules_util_computed.md\":\"0d2e1e2e\",\"api_modules_util_proxies.md\":\"04d3dbd2\",\"api_modules_util_save.md\":\"1d2634b2\",\"api_modules_util_vue.md\":\"820c6c41\",\"api_overview.md\":\"24570ec0\",\"guide_advanced-concepts_creating-features.md\":\"f70bc439\",\"guide_advanced-concepts_dynamic-layers.md\":\"1e7ed780\",\"guide_creating-your-project_changelog.md\":\"571a4d47\",\"guide_creating-your-project_project-entry.md\":\"da9e6683\",\"guide_creating-your-project_project-info.md\":\"2d219d7f\",\"guide_creating-your-project_themes.md\":\"7d4fac6e\",\"guide_creating-your-project_utils.md\":\"f1171f2e\",\"guide_getting-started_examples.md\":\"0c043ece\",\"guide_getting-started_setup.md\":\"7cd5bd40\",\"guide_getting-started_updating.md\":\"6500cf04\",\"guide_important-concepts_coercable.md\":\"d283d763\",\"guide_important-concepts_features.md\":\"d9cd2b78\",\"guide_important-concepts_layers.md\":\"deb2a72c\",\"guide_important-concepts_persistence.md\":\"4f3c6d66\",\"guide_important-concepts_reactivity.md\":\"412135dc\",\"guide_index.md\":\"a29a0eb3\",\"guide_recipes_save-progress.md\":\"b8ff9e6a\",\"index.md\":\"7de140c3\"}")</script>
<script type="module" async src="/assets/app.ab34650d.js"></script>
</body>
</html>