59 lines
No EOL
58 KiB
HTML
59 lines
No EOL
58 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US" dir="ltr">
|
||
<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="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_creating-features.md.a18865d1.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.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"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-1d30fa41 data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><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-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><!----><!--[--><!--[--><!----><!----><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 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.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"/></svg></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-1d30fa41 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-b2cf3e0b data-v-f5a2ca58><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f5a2ca58><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f5a2ca58><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-f5a2ca58>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-f5a2ca58 data-v-079b16a8><button data-v-079b16a8>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-b2cf3e0b data-v-139a1f1d><div class="curtain" data-v-139a1f1d></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-139a1f1d><span class="visually-hidden" id="sidebar-aria-label" data-v-139a1f1d> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-139a1f1d><section class="VPSidebarItem level-0 collapsible" data-v-139a1f1d data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>Getting Started</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Introduction</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/getting-started/setup" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Setting Up</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/getting-started/updating" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Updating Profectus</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/getting-started/examples" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Example Projects</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="https://github.com/profectus-engine/Profectus/blob/main/CHANGELOG.md" target="_blank" rel="noreferrer" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Profectus Changelog</p><!--]--><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><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-139a1f1d><section class="VPSidebarItem level-0 collapsible" data-v-139a1f1d data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>Creating Your Project</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/creating-your-project/project-info" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Project Info</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/creating-your-project/project-entry" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Project Entry</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/creating-your-project/changelog" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Changelog</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/creating-your-project/themes" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Themes</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/creating-your-project/utils" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Utilities</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-139a1f1d><section class="VPSidebarItem level-0 collapsible" data-v-139a1f1d data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>Important Concepts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/important-concepts/layers" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Layers</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/important-concepts/features" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Features</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/important-concepts/coercable" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Coercable Components</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/important-concepts/reactivity" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Reactivity</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/important-concepts/persistence" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Persistence</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/important-concepts/requirements" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Requirements</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/important-concepts/formulas" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Formulas</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-139a1f1d><section class="VPSidebarItem level-0 collapsible" data-v-139a1f1d data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>Recipes</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/recipes/save-progress" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Display Save Progress</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/recipes/particles" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Display Particle Effect</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-139a1f1d><section class="VPSidebarItem level-0 collapsible has-active" data-v-139a1f1d data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>Advanced Concepts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/advanced-concepts/creating-features" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Creating Features</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/advanced-concepts/dynamic-layers" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Dynamic Layers</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/advanced-concepts/nodes" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Nodes</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-b2cf3e0b data-v-a494bd1d><div class="VPDoc has-sidebar has-aside" data-v-a494bd1d data-v-c4b0d3cf><!--[--><!--]--><div class="container" data-v-c4b0d3cf><div class="aside" data-v-c4b0d3cf><div class="aside-curtain" data-v-c4b0d3cf></div><div class="aside-container" data-v-c4b0d3cf><div class="aside-content" data-v-c4b0d3cf><div class="VPDocAside" data-v-c4b0d3cf data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-8f12e865><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-c4b0d3cf><div class="content-container" data-v-c4b0d3cf><!--[--><!--]--><!----><main class="main" data-v-c4b0d3cf><div style="position:relative;" class="vp-doc _guide_advanced-concepts_creating-features" data-v-c4b0d3cf><div><h1 id="creating-features" tabindex="-1">Creating Features <a class="header-anchor" href="#creating-features" aria-label="Permalink to "Creating Features""></a></h1><p>Profectus is designed to encourage the developer to eventually start designing their own features for use in specific games. Features are designed to work where they require minimal (and typically zero) modifications around the code base - you simply write a single file for the feature, and any vue components it needs, and the act of importing that feature will set everything up. This also means you can share these features with others in entire collections, and any they don't use won't be present in the build output, won't be loaded, and won't affect the project in any way.</p><h2 id="creating-the-feature" tabindex="-1">Creating the Feature <a class="header-anchor" href="#creating-the-feature" aria-label="Permalink to "Creating the Feature""></a></h2><p>Every feature has a couple of types. They have the feature themselves, a generic version for convenience, and any constructor typically has an options type and a type that gets "added" to it to create the feature itself. These typically involve replacing some types to denote how various properties change from, for example, <code>Computable<X></code> to <code>ProcessedComputable<X></code>. You should be able to use any of the existing features as a reference for how these types look and work.</p><p>Most significantly, the base type should typically always have a <code>type</code> property pointing to a symbol unique to this feature, so they can be easily differentiated at runtime. If it's a feature that should be renderable, then it'll also need <code>[Component]</code> and <code>[GatherProps]</code> properties, which describe the vue component to use and how to get the props for it from this feature, as well as a unique ID for the feature's <a href="./nodes">node</a>. You cna use the <a href="/api/modules/features/feature#getuniqueid">getUniqueID</a> utility to help.</p><p>The constructor itself should do several things. They should take their options within a function, so that they're not resolved when the object is constructed. It should return a lazy proxy of the feature, which allows features to reference each other and only resolve themselves once every feature is defined. The constructor should create any persistent refs it may require outside of the lazy proxy - it won't have access to the options at this point, so it should make any it <em>potentially</em> may require. Any that turn out not being needed can be <a href="/api/modules/game/persistence#deletepersistent">deleted</a>. Inside the lazy proxy the constructor should create the options object, assign onto it every property from the base type, call <a href="/api/modules/util/computed#processcomputable">processComputable</a> on every computable type, and <a href="/api/modules/features/feature#setdefault">setDefault</a> on any property with a default value. Then you should be able to simply return the options object, likely with a type cast, and the constructor will be complete.</p><p>Because typescript does not emit JS, if a property is supposed to be a function it is impossible to differentiate between a function that is itself 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<Function></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#render-functions-jsx">JSX</a>, which uses a utility function to mark that a function should not be wrapped.</p><h2 id="vue-components" tabindex="-1">Vue Components <a class="header-anchor" href="#vue-components" aria-label="Permalink to "Vue Components""></a></h2><p>Any vue components you write need to do a couple things. Typically they'll need to type any props that come from computed properties appropriately, for which you can use the <a href="/api/modules/util/vue#processedproptype">processedPropType</a> utility - using it will look something like <code>style: processedPropType<StyleValue>(String, Object, Array)</code>. You'll also want to make sure to <code>unref</code> any of these props you use in the template. The template should make sure to include a <code>Node</code> component with the feature's ID. Also, if there are custom displays this feature may have, you'll want to convert the <code>CoercableComponent</code> into a Vue component inside the setup function, typically using the <a href="/api/modules/util/vue#computecomponent">computeComponent</a> or <a href="/api/modules/util/vue#computeoptionalcomponent">computeOptionalComponent</a> utilities.</p><h2 id="custom-settings" tabindex="-1">Custom Settings <a class="header-anchor" href="#custom-settings" aria-label="Permalink to "Custom Settings""></a></h2><p>To add a setting to the options menu specific to this feature, you'll need to do three things, all inside the feature's file. First, extend the settings type with the name of the new setting. For example, here's how the challenge feature adds a setting to hide completed challenges:</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">declare</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">module</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">game/settings</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">interface</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Settings</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> hideChallenges</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>Next you must set the default value of this setting when the settings is loaded, which happens during the <code>loadSettings</code> event emitted on the <a href="/api/modules/game/events#globalbus">global bus</a>. This is how that looks like for the same <code>hideChallenges</code> setting from above:</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">globalBus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">loadSettings</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">settings</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setDefault</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">settings</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">hideChallenges</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>Finally, you'll need to register a Vue component to the settings menu so the player can actually modify this setting. Here's the example for the <code>hideChallenges</code> setting:</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#82AAFF;">registerSettingField</span><span style="color:#A6ACCD;">(</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">jsx</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> (</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#A6ACCD;font-style:italic;">Toggle</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> title</span><span style="color:#89DDFF;">={</span><span style="color:#F07178;">jsx</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> (</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">span</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">option-title</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Hide</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">maxed</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">challenges</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">desc</span><span style="color:#89DDFF;">></span><span style="color:#FFCB6B;">Hide</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">challenges</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">that</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">have</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">been</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">fully</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">completed</span><span style="color:#89DDFF;">.<</span><span style="color:#A6ACCD;">/</span><span style="color:#FFCB6B;">desc</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#A6ACCD;">/</span><span style="color:#FFCB6B;">span</span><span style="color:#89DDFF;">></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:#A6ACCD;font-style:italic;">onUpdate</span><span style="color:#89DDFF;">:</span><span style="color:#FFCB6B;">modelValue</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;font-style:italic;">value</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> (settings</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hideChallenges </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> value)</span><span style="color:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> modelValue</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">settings.hideChallenges</span><span style="color:#89DDFF;">}</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>
|
||
<span class="line"><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="updating-features" tabindex="-1">Updating Features <a class="header-anchor" href="#updating-features" aria-label="Permalink to "Updating Features""></a></h2><p>If your custom feature requires running some sort of update method every tick, you'll want to search layers when they're added for any features of this type (using the <a href="/api/modules/features/feature#findfeatures">findFeatures</a> utility), add an event handler for every <code>update</code>/<code>postUpdate</code>/<code>preUpdate</code>, and clean it up when the layer is removed. Here's how this looks like for the <code>action</code> feature:</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight has-diff"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> listeners</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Record</span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Unsubscribe</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">undefined</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{};</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;">globalBus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">addLayer</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">layer</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">actions</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">GenericAction</span><span style="color:#F07178;">[] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">findFeatures</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">layer</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ActionType</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;font-style:italic;">as</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">GenericAction</span><span style="color:#F07178;">[]</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">listeners</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">layer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">layer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">postUpdate</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">diff</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">actions</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">action</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">action</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">update</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">diff</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</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 style="color:#A6ACCD;">globalBus</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">on</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">removeLayer</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">layer</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// unsubscribe from postUpdate</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">listeners</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">layer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">?.</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">listeners</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">layer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">id</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">undefined;</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div></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/creating-features.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-14T06:43:05.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/recipes/particles" data-v-face870a><span class="desc" data-v-face870a>Previous page</span><span class="title" data-v-face870a>Display Particle Effect</span></a></div><div class="has-prev pager" data-v-face870a><a class="pager-link next" href="/guide/advanced-concepts/dynamic-layers" data-v-face870a><span class="desc" data-v-face870a>Next page</span><span class="title" data-v-face870a>Dynamic Layers</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_important-concepts_coercable.md\":\"b1f1acdb\",\"guide_important-concepts_features.md\":\"ce662e79\",\"guide_important-concepts_formulas.md\":\"0ba3b4c0\",\"guide_important-concepts_layers.md\":\"40e3beef\",\"guide_important-concepts_persistence.md\":\"d4602def\",\"guide_important-concepts_reactivity.md\":\"6d7d263f\",\"guide_important-concepts_requirements.md\":\"315f99b3\",\"guide_index.md\":\"a6d0887c\",\"index.md\":\"884f44e0\",\"guide_recipes_save-progress.md\":\"090d590c\",\"guide_recipes_particles.md\":\"fc5fb015\",\"api_modules_lib_pixi.md\":\"2b426252\",\"api_components_contextcomponent.md\":\"088cd8fb\",\"api_modules_features_resource.md\":\"337b8880\",\"guide_creating-your-project_project-entry.md\":\"c30550eb\",\"guide_creating-your-project_project-info.md\":\"f06a6a5d\",\"guide_creating-your-project_themes.md\":\"2ceffe94\",\"api_components_fields_slidercomponent.md\":\"de4f5cd1\",\"api_components_fields_textcomponent.md\":\"039dbcea\",\"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_math_sqrtcomponent.md\":\"a610fb30\",\"api_modules_data_common.md\":\"cea7349b\",\"api_modules_data_projentry.md\":\"85e931a3\",\"api_modules_data_themes.md\":\"04121ce6\",\"api_modules_features_achievement.md\":\"41fd9d95\",\"api_modules_features_action.md\":\"accd9686\",\"api_modules_features_bar.md\":\"d549ae50\",\"api_modules_features_board.md\":\"83c56444\",\"api_modules_features_challenge.md\":\"b67ac4a6\",\"guide_getting-started_updating.md\":\"9e46942a\",\"api_modules_features_clickable.md\":\"81af6047\",\"api_modules_features_conversion.md\":\"e67c86a2\",\"api_modules_features_feature.md\":\"6c0b6f85\",\"api_modules_features_grid.md\":\"44a0d8eb\",\"api_modules_features_hotkey.md\":\"9bdca378\",\"api_modules_features_infobox.md\":\"8a44c689\",\"api_modules_features_links.md\":\"232f4909\",\"api_modules_features_particles.md\":\"acdac247\",\"api_modules_features_repeatable.md\":\"2078abb7\",\"api_modules_game_formulas_operations.md\":\"19c5dc95\",\"api_modules_features_reset.md\":\"295fd3d8\",\"api_modules_features_tabs_tabfamily.md\":\"1a69473b\",\"api_modules_features_tooltip.md\":\"4f1ae01d\",\"api_modules_features_tree.md\":\"ed4d7a45\",\"api_components_hotkeycomponent.md\":\"94af8a77\",\"api_modules_game_gameloop.md\":\"4e2abfc0\",\"api_modules_game_layers.md\":\"ba0180ea\",\"api_modules_game_modifiers.md\":\"e9a04d07\",\"api_modules_game_notifications.md\":\"4007ad77\",\"api_modules_game_persistence.md\":\"e61c1fc6\",\"api_modules_game_player.md\":\"f23bb598\",\"api_modules_game_requirements.md\":\"403fc39c\",\"api_modules_game_settings.md\":\"1958e7ca\",\"api_modules_game_state.md\":\"f32881b2\",\"api_modules_lib_break_eternity.md\":\"4905c813\",\"api_modules_lib_collapsetransition.md\":\"37a925e1\",\"api_modules_lib_lru-cache.md\":\"56fe8d58\",\"api_modules_lib_vue-panzoom.md\":\"bfc32ff5\",\"api_modules_lib_vue-textarea-autosize.md\":\"a92591ec\",\"api_modules_util_bignum.md\":\"03ad1117\",\"api_modules_util_break_eternity.md\":\"5233e941\",\"api_modules_util_computed.md\":\"f384f5a3\",\"api_modules_util_proxies.md\":\"272c9807\",\"api_modules_util_save.md\":\"6130f3f6\",\"api_modules_util_vue.md\":\"65db83c2\",\"api_overview.md\":\"88cceb38\",\"guide_advanced-concepts_creating-features.md\":\"a18865d1\",\"guide_advanced-concepts_dynamic-layers.md\":\"69b0375d\",\"guide_advanced-concepts_nodes.md\":\"74909dae\",\"guide_creating-your-project_changelog.md\":\"62153173\",\"guide_creating-your-project_utils.md\":\"0aa70f37\",\"guide_getting-started_examples.md\":\"8dc349eb\",\"guide_getting-started_setup.md\":\"283dd6fc\",\"api_modules_features_tabs_tab.md\":\"ac4b1c4b\",\"api_modules_game_events.md\":\"597f47e5\",\"api_modules_util_common.md\":\"fa59245c\",\"api_modules_lib_pwa-register.md\":\"8e6a42cb\",\"api_components_layercomponent.md\":\"fb5a91af\",\"api_modules_game_formulas_formulas.md\":\"dda227f0\",\"api_components_infocomponent.md\":\"5e7ed906\",\"api_components_modalcomponent.md\":\"40989410\",\"api_components_marknodecomponent.md\":\"95ce4d1c\",\"api_components_savecomponent.md\":\"bc14d931\",\"api_components_fields_dangerbuttoncomponent.md\":\"43aea00b\",\"api_components_fields_feedbackbuttoncomponent.md\":\"3022117b\",\"api_modules_features_upgrade.md\":\"1354b683\",\"api_components_nodecomponent.md\":\"6c607feb\",\"api_components_fields_selectcomponent.md\":\"ace2bb01\",\"api_modules_game_formulas_types.md\":\"bd193bf8\"}")
|
||
__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\":\"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\":\"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\"}]}],\"/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\":\" Spacer Component\",\"link\":\"/api/components/layout/SpacerComponent.html\"},{\"text\":\" Sticky Component\",\"link\":\"/api/components/layout/StickyComponent.html\"},{\"text\":\" Vertical Rule Component\",\"link\":\"/api/components/layout/VerticalRuleComponent.html\"}],\"collapsed\":true},{\"text\":\"Math\",\"items\":[{\"text\":\" Floor Component\",\"link\":\"/api/components/math/FloorComponent.html\"},{\"text\":\" Sqrt Component\",\"link\":\"/api/components/math/SqrtComponent.html\"}],\"collapsed\":true},{\"text\":\" Context Component\",\"link\":\"/api/components/ContextComponent.html\"},{\"text\":\" Hotkey Component\",\"link\":\"/api/components/HotkeyComponent.html\"},{\"text\":\" Info Component\",\"link\":\"/api/components/InfoComponent.html\"},{\"text\":\" Layer Component\",\"link\":\"/api/components/LayerComponent.html\"},{\"text\":\" Mark Node Component\",\"link\":\"/api/components/MarkNodeComponent.html\"},{\"text\":\" Modal Component\",\"link\":\"/api/components/ModalComponent.html\"},{\"text\":\" Node Component\",\"link\":\"/api/components/NodeComponent.html\"},{\"text\":\" Save Component\",\"link\":\"/api/components/SaveComponent.html\"}]},{\"text\":\"Data\",\"items\":[{\"text\":\"Common\",\"link\":\"/api/modules/data/common.html\"},{\"text\":\"Proj Entry\",\"link\":\"/api/modules/data/projEntry.html\"},{\"text\":\"Themes\",\"link\":\"/api/modules/data/themes.html\"}],\"collapsed\":false},{\"text\":\"Features\",\"items\":[{\"text\":\"Tabs\",\"items\":[{\"text\":\"Tab\",\"link\":\"/api/modules/features/tabs/tab.html\"},{\"text\":\"Tab Family\",\"link\":\"/api/modules/features/tabs/tabFamily.html\"}],\"collapsed\":true},{\"text\":\"Achievement\",\"link\":\"/api/modules/features/achievement.html\"},{\"text\":\"Action\",\"link\":\"/api/modules/features/action.html\"},{\"text\":\"Bar\",\"link\":\"/api/modules/features/bar.html\"},{\"text\":\"Board\",\"link\":\"/api/modules/features/board.html\"},{\"text\":\"Challenge\",\"link\":\"/api/modules/features/challenge.html\"},{\"text\":\"Clickable\",\"link\":\"/api/modules/features/clickable.html\"},{\"text\":\"Conversion\",\"link\":\"/api/modules/features/conversion.html\"},{\"text\":\"Feature\",\"link\":\"/api/modules/features/feature.html\"},{\"text\":\"Grid\",\"link\":\"/api/modules/features/grid.html\"},{\"text\":\"Hotkey\",\"link\":\"/api/modules/features/hotkey.html\"},{\"text\":\"Infobox\",\"link\":\"/api/modules/features/infobox.html\"},{\"text\":\"Links\",\"link\":\"/api/modules/features/links.html\"},{\"text\":\"Particles\",\"link\":\"/api/modules/features/particles.html\"},{\"text\":\"Repeatable\",\"link\":\"/api/modules/features/repeatable.html\"},{\"text\":\"Reset\",\"link\":\"/api/modules/features/reset.html\"},{\"text\":\"Resource\",\"link\":\"/api/modules/features/resource.html\"},{\"text\":\"Tooltip\",\"link\":\"/api/modules/features/tooltip.html\"},{\"text\":\"Tree\",\"link\":\"/api/modules/features/tree.html\"},{\"text\":\"Upgrade\",\"link\":\"/api/modules/features/upgrade.html\"}],\"collapsed\":false},{\"text\":\"Game\",\"items\":[{\"text\":\"Formulas\",\"items\":[{\"text\":\"Formulas\",\"link\":\"/api/modules/game/formulas/formulas.html\"},{\"text\":\"Operations\",\"link\":\"/api/modules/game/formulas/operations.html\"},{\"text\":\"Types\",\"link\":\"/api/modules/game/formulas/types.html\"}],\"collapsed\":true},{\"text\":\"Events\",\"link\":\"/api/modules/game/events.html\"},{\"text\":\"Game Loop\",\"link\":\"/api/modules/game/gameLoop.html\"},{\"text\":\"Layers\",\"link\":\"/api/modules/game/layers.html\"},{\"text\":\"Modifiers\",\"link\":\"/api/modules/game/modifiers.html\"},{\"text\":\"Notifications\",\"link\":\"/api/modules/game/notifications.html\"},{\"text\":\"Persistence\",\"link\":\"/api/modules/game/persistence.html\"},{\"text\":\"Player\",\"link\":\"/api/modules/game/player.html\"},{\"text\":\"Requirements\",\"link\":\"/api/modules/game/requirements.html\"},{\"text\":\"Settings\",\"link\":\"/api/modules/game/settings.html\"},{\"text\":\"State\",\"link\":\"/api/modules/game/state.html\"}],\"collapsed\":false},{\"text\":\"Lib\",\"items\":[{\"text\":\"Break Eternity\",\"link\":\"/api/modules/lib/break_eternity.html\"},{\"text\":\"Collapse Transition\",\"link\":\"/api/modules/lib/collapseTransition.html\"},{\"text\":\"Lru-cache\",\"link\":\"/api/modules/lib/lru-cache.html\"},{\"text\":\"Pixi\",\"link\":\"/api/modules/lib/pixi.html\"},{\"text\":\"Pwa-register\",\"link\":\"/api/modules/lib/pwa-register.html\"},{\"text\":\"Vue-panzoom\",\"link\":\"/api/modules/lib/vue-panzoom.html\"},{\"text\":\"Vue-textarea-autosize\",\"link\":\"/api/modules/lib/vue-textarea-autosize.html\"}],\"collapsed\":true},{\"text\":\"Util\",\"items\":[{\"text\":\"Bignum\",\"link\":\"/api/modules/util/bignum.html\"},{\"text\":\"Break Eternity\",\"link\":\"/api/modules/util/break_eternity.html\"},{\"text\":\"Common\",\"link\":\"/api/modules/util/common.html\"},{\"text\":\"Computed\",\"link\":\"/api/modules/util/computed.html\"},{\"text\":\"Proxies\",\"link\":\"/api/modules/util/proxies.html\"},{\"text\":\"Save\",\"link\":\"/api/modules/util/save.html\"},{\"text\":\"Vue\",\"link\":\"/api/modules/util/vue.html\"}],\"collapsed\":false}]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}")</script>
|
||
|
||
</body>
|
||
</html> |