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-18 04:35:28 +00:00
< link rel = "preload stylesheet" href = "/assets/style.49aa32a7.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-20 03:20:38 +00:00
< link rel = "modulepreload" href = "/assets/guide_advanced-concepts_creating-features.md.c23acf83.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-20 01:29:32 +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 .
2023-04-08 15:14:26 +00:00
< 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 >
2023-04-20 03:20:38 +00:00
< 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-20T03:19:45.000Z" data-v-7b3ebfe1 > < / time > < / p > < / div > < / div > < div class = "prev-next" data-v-face870a > < div class = "pager" data-v-face870a > < a class = "pager-link prev" href = "/guide/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 > _ _ V P _ H A S H _ M A P _ _ = J S O N . p a r s e ( " { \ " a p i _ m o d u l e s _ f e a t u r e s _ c o n v e r s i o n . m d \ " : \ " 1 9 1 0 6 2 3 1 \ " , \ " a p i _ c o m p o n e n t s _ l a y o u t _ c o l l a p s i b l e c o m p o n e n t . m d \ " : \ " b 7 9 2 d 4 5 f \ " , \ " 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 \ " : \ " 9 4 a f 8 a 7 7 \ " , \ " 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 \ " : \ " 5 e 7 e d 9 0 6 \ " , \ " 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 \ " : \ " f b 5 a 9 1 a f \ " , \ " 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 \ " : \ " 9 5 c e 4 d 1 c \ " , \ " a p i _ c o m p o n e n t s _ m o d a l c o m p o n e n t . m d \ " : \ " 4 0 9 8 9 4 1 0 \ " , \ " a p i _ c o m p o n e n t s _ n o d e c o m p o n e n t . m d \ " : \ " 6 c 6 0 7 f e b \ " , \ " a p i _ c o m p o n e n t s _ s a v e c o m p o n e n t . m d \ " : \ " b c 1 4 d 9 3 1 \ " , \ " a p i _ c o m p o n e n t s _ f i e l d s _ d a n g e r b u t t o n c o m p o n e n t . m d \ " : \ " 4 3 a e a 0 0 b \ " , \ " a p i _ c o m p o n e n t s _ f i e l d s _ f e e d b a c k b u t t o n c o m p o n e n t . m d \ " : \ " 3 0 2 2 1 1 7 b \ " , \ " a p i _ c o m p o n e n t s _ l a y o u t _ c o l u m n c o m p o n e n t . m d \ " : \ " 0 a 3 1 c e 3 3 \ " , \ " a p i _ c o m p o n e n t s _ l a y o u t _ r o w c o m p o n e n t . m d \ " : \ " 2 f 1 b 6 0 7 9 \ " , \ " a p i _ c o m p o n e n t s _ l a y o u t _ s p a c e r c o m p o n e n t . m d \ " : \ " 8 e 0 b 5 3 a f \ " , \ " a p i _ c o m p o n e n t s _ l a y o u t _ v e r t i c a l r u l e c o m p o n e n t . m d \ " : \ " 8 7 2 7 0 8 0 3 \ " , \ " 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 \ " : \ " 7 6 5 d a 3 6 c \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ a c h i e v e m e n t . m d \ " : \ " 7 3 8 6 6 9 4 8 \ " , \ " a p i _ m o d u l e s _ d a t a _ c o m m o n . m d \ " : \ " 4 b 1 a 5 6 1 5 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ c l i c k a b l e . m d \ " : \ " 1 1 c 8 2 f 4 c \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ b o a r d . m d \ " : \ " a 8 b 3 d c 8 8 \ " , \ " a p i _ c o m p o n e n t s _ l a y o u t _ s t i c k y c o m p o n e n t . m d \ " : \ " 3 6 0 5 e 9 7 0 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ a c t i o n . m d \ " : \ " e b 9 7 8 e 6 f \ " , \ " a p i _ c o m p o n e n t s _ f i e l d s _ s l i d e r c o m p o n e n t . m d \ " : \ " d e 4 f 5 c d 1 \ " , \ " 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 \ " : \ " a c e 2 b b 0 1 \ " , \ " a p i _ c o m p o n e n t s _ f i e l d s _ t e x t c o m p o n e n t . m d \ " : \ " 0 3 9 d b c e a \ " , \ " a p i _ c o m p o n e n t s _ f i e l d s _ t o g g l e c o m p o n e n t . m d \ " : \ " 0 1 2 6 6 9 2 d \ " , \ " 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 \ " : \ " a 6 1 0 f b 3 0 \ " , \ " 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 \ " : \ " 0 8 8 c d 8 f b \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ b a r . m d \ " : \ " d d b 7 8 9 c 5 \ " , \ " a p i _ m o d u l e s _ d a t a _ p r o j e n t r y . m d \ " : \ " 3 a 4 f 0 9 1 3 \ " , \ " a p i _ m o d u l e s _ d a t a _ t h e m e s . m d \ " : \ " 5 1 3 d e 2 7 5 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ c h a l l e n g e . m d \ " : \ " 8 e 2 8 d 7 6 a \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ d e c o r a t o r s _ b o n u s d e c o r a t o r . m d \ " : \ " a 2 d b e e 5 e \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ f e a t u r e . m d \ " : \ " 4 9 b 4 e 1 7 7 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ d e c o r a t o r s _ c o m m o n . m d \ " : \ " d 0 3 6 4 d c e \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ l i n k s . m d \ " : \ " 4 1 c 9 a c c 6 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ p a r t i c l e s . m d \ " : \ " 7 4 c c 1 8 0 b \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ r e p e a t a b l e . m d \ " : \ " 0 2 7 8 f 3 b 6 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ r e s e t . m d \ " : \ " d e f a e f 0 4 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ r e s o u r c e . m d \ " : \ " 2 4 f f 2 d e 5 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ t a b s _ t a b . m d \ " : \ " 2 2 3 d 4 4 f 5 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ t r e e . m d \ " : \ " 9 7 d f b b 9 1 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ u p g r a d e . m d \ " : \ " 2 9 e 4 a 5 3 2 \ " , \ " a p i _ m o d u l e s _ l i b _ p i x i . m d \ " : \ " 2 b 4 2 6 2 5 2 \ " , \ " a p i _ m o d u l e s _ l i b _ v u e - p a n z o o m . m d \ " : \ " b f c 3 2 f f 5 \ " , \ " a p i _ m o d u l e s _ l i b _ v u e - t e x t a r e a - a u t o s i z e . m d \ " : \ " a 9 2 5 9 1 e c \ " , \ " a p i _ m o d u l e s _ u t i l _ b i g n u m . m d \ " : \ " c e 6 f a b 5 9 \ " , \ " a p i _ m o d u l e s _ u t i l _ b r e a k _ e t e r n i t y . m d \ " : \ " a d 7 0 9 f e c \ " , \ " a p i _ m o d u l e s _ u t i l _ c o m m o n . m d \ " : \ " c b 5 6 0 f 6 6 \ " , \ " a p i _ m o d u l e s _ u t i l _ c o m p u t e d . m d \ " : \ " 1 9 9 1 b 1 a c \ " , \ " a p i _ m o d u l e s _ u t i l _ p r o x i e s . m d \ " : \ " b 5 3 a e 3 6 5 \ " , \ " a p i _ m o d u l e s _ u t i l _ s a v e . m d \ " : \ " 5 c 9 9 b f b d \ " , \ " g u i d e _ a d v a n c e d - c o n c e p t s _ n o d e s . m d \ " : \ " d 5 e 8 6 5 c 5 \ " , \ " g u i d e _ c r e a t i n g - y o u r - p r o j e c t _ c h a n g e l o g . m d \ " : \ " a 6 5 a 8 6 a 1 \ " , \ " g u i d e _ c r e a t i n g - y o u r - p r o j e c t _ p r o j e c t - e n t r y . m d \ " : \ " 1 a 1 6 d c d 3 \ " , \ " g u i d e _ c r e a t i n g - y o u r - p r o j e c t _ p r o j e c t - i n f o . m d \ " : \ " a 4 1 5 b c 7 3 \ " , \ " g u i d e _ c r e a t i n g - y o u r - p r o j e c t _ t h e m e s . m d \ " : \ " 2 1 c b 8 b 6 d \ " , \ " g u i d e _ c r e a t i n g - y o u r - p r o j e c t _ u t i l s . m d \ " : \ " a 2 4 5 3 d b 8 \ " , \ " g u i d e _ g e t t i n g - s t a r t e d _ e x a m p l e s . m d \ " : \ " d 6 a e 0 f 5 b \ " , \ " g u i d e _ g e t t i n g - s t a r t e d _ f i r s t - l a y e r . m d \ " : \ " 0 5 1 d d f b 8 \ " , \ " g u i d e _ g e t t i n g - s t a r t e d _ s e t u p . m d \ " : \ " f 0 9 6 c 6 8 0 \ " , \ " g u i d e _ g e t t i n g - s t a r t e d _ u p d a t i n g . m d \ " : \ " c 1 8 c 9 d 4 3 \ " , \ " g u i d e _ i m p o r t a n t - c o n c e p t s _ c o e r c a b l e . m d \ " : \ " 0 e a a a 0 a 1 \ " , \ " g u i d e _ i m p o r t a n t - c o n c e p t s _ f e a t u r e s . m d \ " : \ " 5 a 4 f d 3 f d \ " , \ " g u i d e _ i m p o r t a n t - c o n c e p t s _ f o r m u l a s . m d \ " : \ " 8 8 1 b 3 6 d 7 \ " , \ " g u i d e _ i m p o r t a n t - c o n c e p t s _ l a y e r s . m d \ " : \ " e 9 e d a a 9 b \ " , \ " g u i d e _ i m p o r t a n t - c o n c e p t s _ p e r s i s t e n c e . m d \ " : \ " 2 2 b 6 7 1 d 8 \ " , \ " g u i d e _ i m p o r t a n t - c o n c e p t s _ r e q u i r e m e n t s . m d \ " : \ " d 6 e 4 b e b a \ " , \ " g u i d e _ i n d e x . m d \ " : \ " f b 9 5 9 0 2 0 \ " , \ " g u i d e _ m i g r a t i o n s _ 0 - 6 . m d \ " : \ " 1 e 4 8 4 5 e 4 \ " , \ " g u i d e _ r e c i p e s _ p a r t i c l e s . m d \ " : \ " 0 4 6 f 3 4 7 c \ " , \ " g u i d e _ r e c i p e s _ p r e s t i g e . m d \ " : \ " d 9 d 3 a c 2 e \ " , \ " g u i d e _ r e c i p e s _ s a v e - p r o g r e s s . m d \ " : \ " 3 e e 5 b 0 6 a \ " , \ " i n d e x . m d \ " : \ " f f 9 b f 2 3 4 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ t o o l t i p . m d \ " : \ " 4 c b 5 5 8 a b \ " , \ " a p i _ m o d u l e s _ g a m e _ p e r s i s t e n c e . m d \ " : \ " 2 a 8 3 3 a 9 d \ " , \ " g u i d e _ i m p o r t a n t - c o n c e p t s _ r e a c t i v i t y . m d \ " : \ " d b 6 d 3 5 f c \ " , \ " a p i _ m o d u l e s _ g a m e _ s t a t e . m d \ " : \ " 1 2 1 9 a a 2 8 \ " , \ " a p i _ m o d u l e s _ g a m e _ e v e n t s . m d \ " : \ " 2 d 4 9 b d 0 1 \ " , \ " a p i _
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Profectus\",\"description\":\"A game engine that grows with you.\",\"base\":\"/\",\"head\":[],\"appearance\":false,\"themeConfig\":{\"logo\":\"/favicon.svg\",\"editLink\":{\"pattern\":\"https://github.com/profectus-engine/profectus-docs/edit/main/docs/:path\",\"editLinkText\":\"Edit this page on GitHub\"},\"nav\":[{\"text\":\"Guide\",\"link\":\"/guide/\",\"activeMatch\":\"^/guide/\"},{\"text\":\"API\",\"link\":\"/api/overview\",\"activeMatch\":\"^/api/\"},{\"text\":\"Forums\",\"link\":\"https://forums.moddingtree.com\"}],\"socialLinks\":[{\"icon\":\"discord\",\"link\":\"https://discord.gg/F3xveHV\"},{\"icon\":\"github\",\"link\":\"https://github.com/profectus-engine/Profectus\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"Getting Started\",\"collapsed\":false,\"items\":[{\"text\":\"Introduction\",\"link\":\"/guide/\"},{\"text\":\"Setting Up\",\"link\":\"/guide/getting-started/setup\"},{\"text\":\"Updating Profectus\",\"link\":\"/guide/getting-started/updating\"},{\"text\":\"Your First Layer\",\"link\":\"/guide/getting-started/first-layer\"},{\"text\":\"Example Projects\",\"link\":\"/guide/getting-started/examples\"},{\"text\":\"Profectus Changelog\",\"link\":\"https://github.com/profectus-engine/Profectus/blob/main/CHANGELOG.md\"}]},{\"text\":\"Creating Your Project\",\"collapsed\":false,\"items\":[{\"text\":\"Project Info\",\"link\":\"/guide/creating-your-project/project-info\"},{\"text\":\"Project Entry\",\"link\":\"/guide/creating-your-project/project-entry\"},{\"text\":\"Changelog\",\"link\":\"/guide/creating-your-project/changelog\"},{\"text\":\"Themes\",\"link\":\"/guide/creating-your-project/themes\"},{\"text\":\"Utilities\",\"link\":\"/guide/creating-your-project/utils\"}]},{\"text\":\"Important Concepts\",\"collapsed\":false,\"items\":[{\"text\":\"Layers\",\"link\":\"/guide/important-concepts/layers\"},{\"text\":\"Features\",\"link\":\"/guide/important-concepts/features\"},{\"text\":\"Coercable Components\",\"link\":\"/guide/important-concepts/coercable\"},{\"text\":\"Reactivity\",\"link\":\"/guide/important-concepts/reactivity\"},{\"text\":\"Persistence\",\"link\":\"/guide/important-concepts/persistence\"},{\"text\":\"Requirements\",\"link\":\"/guide/important-concepts/requirements\"},{\"text\":\"Formulas\",\"link\":\"/guide/important-concepts/formulas\"}]},{\"text\":\"Recipes\",\"collapsed\":false,\"items\":[{\"text\":\"Prestige Mechanic\",\"link\":\"/guide/recipes/prestige\"},{\"text\":\"Display Save Progress\",\"link\":\"/guide/recipes/save-progress\"},{\"text\":\"Display Particle Effect\",\"link\":\"/guide/recipes/particles\"}]},{\"text\":\"Advanced Concepts\",\"collapsed\":false,\"items\":[{\"text\":\"Creating Features\",\"link\":\"/guide/advanced-concepts/creating-features\"},{\"text\":\"Dynamic Layers\",\"link\":\"/guide/advanced-concepts/dynamic-layers\"},{\"text\":\"Nodes\",\"link\":\"/guide/advanced-concepts/nodes\"}]},{\"text\":\"Migrations\",\"collapsed\":true,\"items\":[{\"text\":\"0.5.X to 0.6.0\",\"link\":\"/guide/migrations/0-6\"}]}],\"/api/\":[{\"text\":\"Components\",\"collapsed\":true,\"items\":[{\"text\":\"Fields\",\"items\":[{\"text\":\" Danger Button Component\",\"link\":\"/api/components/fields/DangerButtonComponent.html\"},{\"text\":\" Feedback Button Component\",\"link\":\"/api/components/fields/FeedbackButtonComponent.html\"},{\"text\":\" Select Component\",\"link\":\"/api/components/fields/SelectComponent.html\"},{\"text\":\" Slider Component\",\"link\":\"/api/components/fields/SliderComponent.html\"},{\"text\":\" Text Component\",\"link\":\"/api/components/fields/TextComponent.html\"},{\"text\":\" Toggle Component\",\"link\":\"/api/components/fields/ToggleComponent.html\"}],\"collapsed\":true},{\"text\":\"Layout\",\"items\":[{\"text\":\" Collapsible Component\",\"link\":\"/api/components/layout/CollapsibleComponent.html\"},{\"text\":\" Column Component\",\"link\":\"/api/components/layout/ColumnComponent.html\"},{\"text\":\" Row Component\",\"link\":\"/api/components/layout/RowComponent.html\"},{\"text\":\" Spa
2022-07-17 22:26:32 +00:00
< / body >
< / html >
