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-10 02:41:29 +00:00
< link rel = "preload stylesheet" href = "/assets/style.a5a34484.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-10 02:41:29 +00:00
< link rel = "modulepreload" href = "/assets/guide_advanced-concepts_creating-features.md.426efab2.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-10 02:41:29 +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-10 02:41:29 +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-10T02:40:12.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 _ i n t e r f a c e s _ g a m e _ s t a t e . t r a n s i e n t . m d \ " : \ " 9 b 9 3 a 3 b 5 \ " , \ " 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 _ u t i l _ v u e . v u e f e a t u r e . m d \ " : \ " 0 1 f 2 f 2 1 d \ " , \ " a p i _ m o d u l e s _ d a t a _ c o m m o n . m d \ " : \ " 4 3 5 6 6 2 f 2 \ " , \ " 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 \ " : \ " c 2 e 1 5 6 b 9 \ " , \ " a p i _ m o d u l e s _ d a t a _ t h e m e s . m d \ " : \ " 7 7 3 0 5 c 3 1 \ " , \ " 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 s _ a c h i e v e m e n t c o m p o n e n t . m d \ " : \ " 3 d 6 f e f 5 7 \ " , \ " 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 s _ a c h i e v e m e n t . m d \ " : \ " a 4 4 0 8 7 7 1 \ " , \ " 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 \ " : \ " 1 9 d 9 1 1 c 9 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ b a r s _ b a r c o m p o n e n t . m d \ " : \ " 8 5 2 8 9 c 7 c \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ b a r s _ b a r . m d \ " : \ " e 2 e 7 8 0 2 d \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ b o a r d s _ b o a r d c o m p o n e n t . m d \ " : \ " d b 3 0 6 5 8 c \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ b o a r d s _ b o a r d l i n k c o m p o n e n t . m d \ " : \ " 1 0 4 6 a 1 e e \ " , \ " a p i _ m o d u l 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 c o m p o n e n t . m d \ " : \ " 5 b e 8 9 4 5 3 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ b o a r d s _ b o a r d . m d \ " : \ " d b 8 1 d 5 7 9 \ " , \ " 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 s _ c h a l l e n g e c o m p o n e n t . m d \ " : \ " e 9 8 5 6 0 8 b \ " , \ " 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 s _ c h a l l e n g e . m d \ " : \ " 8 1 a 3 e 7 d 9 \ " , \ " 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 s _ c l i c k a b l e c o m p o n e n t . m d \ " : \ " 2 4 e 7 9 a 5 7 \ " , \ " 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 s _ c l i c k a b l e . m d \ " : \ " 8 f 7 a e 4 f 9 \ " , \ " 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 \ " : \ " 2 5 1 b 9 5 1 d \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ g r i d s _ g r i d c e l l c o m p o n e n t . m d \ " : \ " 3 3 e f d b 7 7 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ g r i d s _ g r i d c o m p o n e n t . m d \ " : \ " 2 5 7 4 0 7 3 6 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ g r i d s _ g r i d . m d \ " : \ " b 6 8 b c 9 a 5 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ h o t k e y . m d \ " : \ " b c 7 3 3 c 2 6 \ " , \ " a p i _ m o d u l 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 c o m p o n e n t . m d \ " : \ " 2 6 a 7 1 4 e c \ " , \ " a p i _ m o d u l 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 . m d \ " : \ " 9 7 a c 6 a 6 9 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ l i n k s _ l i n k c o m p o n e n t . m d \ " : \ " a 7 c 0 e d f 5 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ l i n k s _ l i n k s c o m p o n e n t . m d \ " : \ " e 1 0 2 8 0 1 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 s _ m a i n d i s p l a y c o m p o n e n t . m d \ " : \ " 2 0 9 4 8 5 b 1 \ " , \ " 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 s _ r e s o u r c e c o m p o n e n t . m d \ " : \ " c 7 1 d a b c 6 \ " , \ " 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 s _ r e s o u r c e . m d \ " : \ " a 7 4 4 1 b 9 e \ " , \ " 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 b u t t o n c o m p o n e n t . m d \ " : \ " 3 2 f 9 4 f 1 2 \ " , \ " 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 c o m p o n e n t . m d \ " : \ " d b 3 f a 9 3 0 \ " , \ " 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 f a m i l y c o m p o n e n t . m d \ " : \ " 8 a 0 6 e 9 b f \ " , \ " 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 \ " : \ " c b e 8 f 6 0 f \ " , \ " 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 f a m i l y . m d \ " : \ " 2 e f 6 f d c b \ " , \ " 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 s _ t o o l t i p c o m p o n e n t . m d \ " : \ " 2 2 3 1 7 b 0 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 s _ t o o l t i p . m d \ " : \ " 2 5 1 0 4 f d f \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ t r e e s _ t r e e c o m p o n e n t . m d \ " : \ " 7 7 f 7 9 c 8 3 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ t r e e s _ t r e e n o d e c o m p o n e n t . m d \ " : \ " f e d 4 6 f 1 8 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ t r e e s _ t r e e . m d \ " : \ " 8 8 9 d 9 c b 9 \ " , \ " 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 s _ u p g r a d e c o m p o n e n t . m d \ " : \ " d e 8 d d 7 d 5 \ " , \ " a p i _ m o d u l e s _ g a m e _ e v e n t s . m d \ " : \ " 7 b e 8 5 7 8 7 \ " , \ " a p i _ m o d u l e s _ g a m e _ f o r m u l a s _ f o r m u l a s . m d \ " : \ " c a b 0 b 5 6 7 \ " , \ " a p i _ m o d u l e s _ g a m e _ f o r m u l a s _ o p e r a t i o n s . m d \ " : \ " a 5 a d 1 c 2 f \ " , \ " a p i _ m o d u l e s _ g a m e _ f o r m u l a s _ t y p e s . m d \ " : \ " 9 9 d 5 d a f 7 \ " , \ " a p i _ m o d u l e s _ g a m e _ g a m e l o o p . m d \ " : \ " a 1 4 a 1 b 9 2 \ " , \ " a p i _ m o d u l e s _ g a m e _ l a y e r s . m d \ " : \ " 7 e e 3 d 6 2 3 \ " , \ " a p i _ m o d u l e s _ g a m e _ m o d i f i e r s . m d \ " : \ " 1 2 3 f e 4 f c \ " , \ " a p i _ m o d u l e s _ g a m e _ n o t i f i c a t i o n s . m d \ " : \ " 6 f a a 4 4 2 9 \ " , \ " 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 \ " : \ " 8 c f 5 b 1 7 3 \ " , \ " a p i _ m o d u l e s _ g a m e _ p l a y e r . m d \ " : \ " d 1 b b 5 4 3 f \ " , \ " a p i _ m o d u l e s _ g a m e _ r e q u i r e m e n t s . m d \ " : \ " e c c 7 f 3 d f \ " , \ " a p i _ m o d u l e s _ g a m e _ s e t t i n g s . m d \ " : \ " 6 d 8 4 5 b 6 9 \ " , \ " a p i _ m o d u l e s _ g a m e _ s t a t e . m d \ " : \ " c 8 6 e 6 6 8 c \ " , \ " a p i _ m o d u l e s _ l i b _ b r e a k _ e t e r n i t y . m d \ " : \ " 7 a 1 0 e a a 6 \ " , \ " a p i _ m o d u l e s _ l i b _ c o l l a p s e t r a n s i t i o n . m d \ " : \ " 3 7 a 9 2 5 e 1 \ " , \ " a p i _ m o d u l e s _ l i b _ l r u - c a c h e . m d \ " : \ " e e 2 3 a f 8 6 \ " , \ " 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 _ f e a t u r e s _ f e a t u r e . m d \ " : \ " 7 a 5 e c a 6 9 \ " , \ " a p i _ m o d u l e s _ f e a t u r e s _ l i n k s _ l i n k s . m d \ " : \ " 5 d e 1 a 0 1 a \ " , \ " 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 s _ u p g r a d e . m d \ " : \ " 9 8 e 1 1 6 7 c \ " , \ " 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 h a l l e n g e s _ c h a l l e n g e . b a s e c h a l l e n g e . m d \ " : \ " c a b 2 b a a 7 \ " , \ " a p i _ i n t e r f a c e s _ f e a t u r e s _ c h a l l e n g e s _ c h a l l e n g e . c h a l l e n g e o p t i o n s . m d \ " : \ " 3 6 9 7 b 2 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 . b a s e c l i c k a b l e . m d \ " : \ " 4 1 9 4 b e 5 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
__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\":\" 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/SaveCompon
2022-07-17 22:26:32 +00:00
< / body >
< / html >
