2022-07-17 22:26:32 +00:00
<!DOCTYPE html>
2023-04-06 05:16:50 +00:00
< html lang = "en-US" dir = "ltr" >
2022-07-17 22:26:32 +00:00
< 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." >
2023-04-08 01:50:59 +00:00
< link rel = "preload stylesheet" href = "/assets/style.7520181f.css" as = "style" >
2023-04-06 05:16:50 +00:00
< 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" >
2023-04-08 15:14:26 +00:00
< link rel = "modulepreload" href = "/assets/guide_advanced-concepts_creating-features.md.a6c2faf2.lean.js" >
2023-04-06 05:16:50 +00:00
< link rel = "stylesheet" href = "https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,600;1,400" >
2022-07-17 22:26:32 +00:00
< 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 >
2023-04-08 15:14:26 +00:00
< div id = "app" > < div class = "Layout" data-v-b2cf3e0b > <!-- [ --> <!-- ] --> <!-- [ --> < span tabindex = "-1" data-v-c8616af1 > < / span > < a href = "#VPContent" class = "VPSkipLink visually-hidden" data-v-c8616af1 > Skip to content < / a > <!-- ] --> <!-- --> < header class = "VPNav" data-v-b2cf3e0b data-v-7e5bc4a5 > < div class = "VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-1d30fa41 > < div class = "container" data-v-1d30fa41 > < div class = "title" data-v-1d30fa41 > < div class = "VPNavBarTitle has-sidebar" data-v-1d30fa41 data-v-f4ef19a3 > < a class = "title" href = "/" data-v-f4ef19a3 > <!-- [ --> <!-- ] --> <!-- [ --> < img class = "VPImage logo" src = "/favicon.svg" alt data-v-6db2186b > <!-- ] --> <!-- [ --> Profectus<!-- ] --> <!-- [ --> <!-- ] --> < / a > < / div > < / div > < div class = "content" data-v-1d30fa41 > < div class = "curtain" data-v-1d30fa41 > < / div > < div class = "content-body" data-v-1d30fa41 > <!-- [ --> <!-- ] --> <!-- --> < nav aria-labelledby = "main-nav-aria-label" class = "VPNavBarMenu menu" data-v-1d30fa41 data-v-7f418b0f > < span id = "main-nav-aria-label" class = "visually-hidden" data-v-7f418b0f > Main Navigation< / span > <!-- [ --> <!-- [ --> < a class = "VPLink link VPNavBarMenuLink active" href = "/guide/" tabindex = "0" data-v-7f418b0f data-v-37adc828 data-v-8f4dc553 > <!-- [ --> Guide<!-- ] --> <!-- --> < / a > <!-- ] --> <!-- [ --> < a class = "VPLink link VPNavBarMenuLink" href = "/api/overview" tabindex = "0" data-v-7f418b0f data-v-37adc828 data-v-8f4dc553 > <!-- [ --> API<!-- ] --> <!-- --> < / a > <!-- ] --> <!-- [ --> < a class = "VPLink link VPNavBarMenuLink" href = "https://forums.moddingtree.com" target = "_blank" rel = "noreferrer" tabindex = "0" data-v-7f418b0f data-v-37adc828 data-v-8f4dc553 > <!-- [ --> Forums<!-- ] --> < svg xmlns = "http://www.w3.org/2000/svg" aria-hidden = "true" focusable = "false" height = "24px" viewbox = "0 0 24 24" width = "24px" class = "icon" data-v-8f4dc553 > < path d = "M0 0h24v24H0V0z" fill = "none" > < / path > < path d = "M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z" > < / path > < / svg > < / a > <!-- ] --> <!-- ] --> < / nav > <!-- --> <!-- --> < div class = "VPSocialLinks VPNavBarSocialLinks social-links" data-v-1d30fa41 data-v-0394ad82 data-v-f6988cfb > <!-- [ --> < a class = "VPSocialLink" href = "https://discord.gg/F3xveHV" aria-label = "discord" target = "_blank" rel = "noopener" data-v-f6988cfb data-v-c530cc0a > < svg role = "img" viewBox = "0 0 24 24" xmlns = "http://www.w3.org/2000/svg" > < title > Discord< / title > < path d = "M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" / > < / svg > < / a > < a class = "VPSocialLink" href = "https://github.com/profectus-engine/Profectus" aria-label = "github" target = "_blank" rel = "noopener" data-v-f6988cfb data-v-c530cc0a > < svg role = "img" viewBox = "0 0 24 24" xmlns = "http://www.w3.org/2000/svg" > < title > GitHub< / title > < path d = "M12 . 297c-6 . 63 0-12 5 . 373-12 12 0 5 . 303 3 . 438 9 . 8 8 . 205 11 . 385 . 6 . 113 . 82- . 258 . 82- . 577 0- . 285- . 01-1 . 04- . 015-2 . 04-3 . 338 . 724-4 . 042-1 . 61-4 . 042-1 . 61C4 . 422 18 . 07 3 . 633 17 . 7 3 . 633 17 . 7c-1 . 087- . 744 . 084- . 729 . 084- . 729 1 . 205 . 084 1 . 838 1 . 236 1 . 838 1 . 236 1 . 07 1 . 835 2 . 809 1 . 305 3 . 495 . 998 . 108- . 776 . 417-1 . 305 . 76-1 . 605-2 . 665- . 3-5 .
< span class = "line" > < span style = "color:#F07178;" > < / span > < span style = "color:#C792EA;" > 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-08T15:13:21.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/save-progress" data-v-face870a > < span class = "desc" data-v-face870a > Previous page< / span > < span class = "title" data-v-face870a > Display Save Progress< / 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 > _ _ V P _ H A S H _ M A P _ _ = J S O N . p a r s e ( " { \ " a p i _ c o m p o n e n t s _ m a t h _ f l o o r c o m p o n e n t . m d \ " : \ " d a 0 5 e 8 c b \ " , \ " a p i _ c o m p o n e n t s _ m a t h _ s q r t c o m p o n e n t . m d \ " : \ " 8 7 b c 6 d 2 1 \ " , \ " a p i _ e n u m s _ d a t a _ t h e m e s . t h e m e s . m d \ " : \ " b 5 7 9 6 5 4 7 \ " , \ " a p i _ e n u m s _ f e a t u r e s _ a c h i e v e m e n t s _ a c h i e v e m e n t . a c h i e v e m e n t d i s p l a y . m d \ " : \ " 1 9 8 2 f 9 6 2 \ " , \ " a p i _ e n u m s _ f e a t u r e s _ b o a r d s _ b o a r d . p r o g r e s s d i s p l a y . m d \ " : \ " d 3 5 e a 5 8 1 \ " , \ " a p i _ e n u m s _ f e a t u r e s _ b o a r d s _ b o a r d . s h a p e . m d \ " : \ " 9 9 0 f d 4 5 8 \ " , \ " a p i _ e n u m s _ f e a t u r e s _ f e a t u r e . v i s i b i l i t y . m d \ " : \ " e 3 f 8 a d 0 5 \ " , \ " a p i _ e n u m s _ u t i l _ c o m m o n . d i r e c t i o n . m d \ " : \ " 0 b d e b 2 0 4 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ b a r s _ b a r . b a s e b a r . m d \ " : \ " 5 c 7 0 1 7 6 0 \ " , \ " a p i _ c l a s s e s _ l i b _ b r e a k _ e t e r n i t y . d e f a u l t . m d \ " : \ " 5 9 8 2 f 2 f b \ " , \ " a p i _ c l a s s e s _ l i b _ l r u - c a c h e . l r u c a c h e . m d \ " : \ " 4 a 3 c 0 8 f 5 \ " , \ " a p i _ c o m p o n e n t s _ c o n t e x t c o m p o n e n t . m d \ " : \ " d 2 a d e d 5 d \ " , \ " a p i _ c o m p o n e n t s _ h o t k e y c o m p o n e n t . m d \ " : \ " d c e f f 3 a c \ " , \ " a p i _ c o m p o n e n t s _ i n f o c o m p o n e n t . m d \ " : \ " 2 9 3 9 3 2 2 7 \ " , \ " a p i _ c o m p o n e n t s _ l a y e r c o m p o n e n t . m d \ " : \ " 1 a 8 6 c c a 3 \ " , \ " a p i _ c o m p o n e n t s _ m a r k n o d e c o m p o n e n t . m d \ " : \ " 2 3 d 0 8 0 3 1 \ " , \ " a p i _ i n t e r f a c e s _ d a t a _ c o m m o n . r e s e t b u t t o n o p t i o n s . m d \ " : \ " 7 f c f 7 1 d 7 \ " , \ " a p i _ i n t e r f a c e s _ d a t a _ c o m m o n . s e c t i o n . m d \ " : \ " 8 e f 3 2 0 3 5 \ " , \ " a p i _ i n t e r f a c e s _ d a t a _ t h e m e s . t h e m e . m d \ " : \ " d 6 6 8 4 5 d 0 \ " , \ " a p i _ i n t e r f a c e s _ d a t a _ t h e m e s . t h e m e v a r s . m d \ " : \ " 7 9 4 1 8 8 2 4 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ a c h i e v e m e n t s _ a c h i e v e m e n t . a c h i e v e m e n t o p t i o n s . m d \ " : \ " 1 2 3 4 6 0 e 9 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ a c h i e v e m e n t s _ a c h i e v e m e n t . b a s e a c h i e v e m e n t . m d \ " : \ " a 4 c 3 d f a a \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ a c t i o n . a c t i o n o p t i o n s . m d \ " : \ " 3 9 e f b 7 3 9 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ a c t i o n . b a s e a c t i o n . m d \ " : \ " a a 7 f b 5 d 4 \ " , \ " a p i _ i n t e r f a c e s _ l i b _ p w a - r e g i s t e r . r e g i s t e r s w o p t i o n s . m d \ " : \ " 4 1 0 b f 7 a 2 \ " , \ " a p i _ i n t e r f a c e s _ d a t a _ c o m m o n . l a y e r t r e e n o d e o p t i o n s . m d \ " : \ " 0 6 b 5 4 a e 6 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ b a r s _ b a r . b a r o p t i o n s . m d \ " : \ " 9 f 1 0 1 7 b 9 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ b o a r d s _ b o a r d . b a s e b o a r d . m d \ " : \ " 7 0 c 8 e e 2 3 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ b o a r d s _ b o a r d . b a s e b o a r d n o d e a c t i o n . m d \ " : \ " c c 7 3 4 b a e \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ b o a r d s _ b o a r d . b a s e n o d e t y p e . m d \ " : \ " f 9 a e a e 3 e \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ b o a r d s _ b o a r d . b o a r d n o d e . m d \ " : \ " c f 6 a 9 f 0 7 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ b o a r d s _ b o a r d . b o a r d n o d e a c t i o n o p t i o n s . m d \ " : \ " 3 3 9 f a b 1 0 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ b o a r d s _ b o a r d . b o a r d n o d e l i n k . m d \ " : \ " f 5 1 0 1 1 a 6 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ b o a r d s _ b o a r d . b o a r d o p t i o n s . m d \ " : \ " 0 2 7 a 5 a e f \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ b o a r d s _ b o a r d . n o d e l a b e l . m d \ " : \ " c a 4 1 0 8 0 3 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ b o a r d s _ b o a r d . n o d e t y p e o p t i o n s . m d \ " : \ " 6 3 3 b 5 8 d 0 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ c l i c k a b l e s _ c l i c k a b l e . c l i c k a b l e o p t i o n s . m d \ " : \ " 3 8 b 8 9 9 8 3 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ c o n v e r s i o n . b a s e c o n v e r s i o n . m d \ " : \ " 5 c d 9 9 e b 1 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ c o n v e r s i o n . c o n v e r s i o n o p t i o n s . m d \ " : \ " 2 2 1 4 4 9 e 6 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ g r i d s _ g r i d . b a s e g r i d . m d \ " : \ " 1 9 f 9 5 8 4 b \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ h o t k e y . h o t k e y o p t i o n s . m d \ " : \ " c 5 1 1 0 0 7 2 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ i n f o b o x e s _ i n f o b o x . b a s e i n f o b o x . m d \ " : \ " e 8 9 f a 2 7 e \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ i n f o b o x e s _ i n f o b o x . i n f o b o x o p t i o n s . m d \ " : \ " a d 5 9 6 7 e f \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ l i n k s _ l i n k s . b a s e l i n k s . m d \ " : \ " e e b f e 2 0 9 \ " , \ " a p i _ c o m p o n e n t s _ f i e l d s _ s e l e c t c o m p o n e n t . m d \ " : \ " 3 5 c f 9 c c 0 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ l i n k s _ l i n k s . l i n k s o p t i o n s . m d \ " : \ " 0 e 7 1 1 c 3 a \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ p a r t i c l e s _ p a r t i c l e s . b a s e p a r t i c l e s . m d \ " : \ " c f 8 1 6 f d d \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ p a r t i c l e s _ p a r t i c l e s . p a r t i c l e s o p t i o n s . m d \ " : \ " 6 7 d 3 0 c 8 8 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ r e p e a t a b l e . b a s e r e p e a t a b l e . m d \ " : \ " f 4 d b 0 e c d \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ r e p e a t a b l e . r e p e a t a b l e o p t i o n s . m d \ " : \ " 2 1 b b 1 1 1 1 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ r e s e t . b a s e r e s e t . m d \ " : \ " 2 e 8 5 5 6 d 0 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ r e s e t . r e s e t o p t i o n s . m d \ " : \ " 2 f 5 f d 2 5 e \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ r e s o u r c e s _ r e s o u r c e . r e s o u r c e . m d \ " : \ " 4 b d d 6 2 c b \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ t a b s _ t a b . t a b o p t i o n s . m d \ " : \ " 1 a 0 2 d 4 4 0 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ t a b s _ t a b f a m i l y . b a s e t a b b u t t o n . m d \ " : \ " e 6 3 a 6 b 1 4 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ t a b s _ t a b f a m i l y . b a s e t a b f a m i l y . m d \ " : \ " c 0 e 8 6 7 d 5 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ t a b s _ t a b f a m i l y . t a b b u t t o n o p t i o n s . m d \ " : \ " c 9 f 7 0 9 0 d \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ t a b s _ t a b f a m i l y . t a b f a m i l y o p t i o n s . m d \ " : \ " d c d 8 4 0 b 4 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ t o o l t i p s _ t o o l t i p . b a s e t o o l t i p . m d \ " : \ " a c 0 c 5 f d 4 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ t o o l t i p s _ t o o l t i p . t o o l t i p o p t i o n s . m d \ " : \ " c 0 2 c 9 5 8 f \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ t r e e s _ t r e e . b a s e t r e e . m d \ " : \ " 0 7 1 e 0 7 c 3 \ " ,
__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\":\"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\":\" Collapsible Component\",\"link\":\"/api/components/layout/CollapsibleComponent.html\"},{\"text\":\" Column Component\",\"link\":\"/api/components/layout/ColumnComponent.html\"},{\"text\":\" Context Component\",\"link\":\"/api/components/ContextComponent.html\"},{\"text\":\" Danger Button Component\",\"link\":\"/api/components/fields/DangerButtonComponent.html\"},{\"text\":\" Feedback Button Component\",\"link\":\"/api/components/fields/FeedbackButtonComponent.html\"},{\"text\":\" Floor Component\",\"link\":\"/api/components/math/FloorComponent.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\":\" Row Component\",\"link\":\"/api/components/layout/RowComponent.html\"},{\"text\":\" Save Component\",\"link\":\"/api/components/SaveComponent.html\"},{\"text\":\" Select Component\",\"link\":\"/api/components/fields
2022-07-17 22:26:32 +00:00
< / body >
< / html >
