profectus-docs/guide/recipes/particles.html

77 lines
No EOL
65 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Particles | Profectus</title>
<meta name="description" content="A game engine that grows with you.">
<link rel="preload stylesheet" href="/assets/style.a5a34484.css" as="style">
<script type="module" src="/assets/app.68642a14.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/framework.0799945b.js">
<link rel="modulepreload" href="/assets/chunks/theme.52324978.js">
<link rel="modulepreload" href="/assets/guide_recipes_particles.md.30664cc1.lean.js">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,600;1,400">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<script defer="true" data-domain="moddingtree.com" src="https://plausible.io/js/plausible.js"></script>
<meta name="og:description" content="A game engine that grows with you">
<meta name="og:image" content="/Logo.png">
</head>
<body>
<div id="app"><div class="Layout" data-v-b2cf3e0b><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c8616af1></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c8616af1> Skip to content </a><!--]--><!----><header class="VPNav" data-v-b2cf3e0b data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-1d30fa41><div class="container" data-v-1d30fa41><div class="title" data-v-1d30fa41><div class="VPNavBarTitle has-sidebar" data-v-1d30fa41 data-v-f4ef19a3><a class="title" href="/" data-v-f4ef19a3><!--[--><!--]--><!--[--><img class="VPImage logo" src="/favicon.svg" alt data-v-6db2186b><!--]--><!--[-->Profectus<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-1d30fa41><div class="curtain" data-v-1d30fa41></div><div class="content-body" data-v-1d30fa41><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-1d30fa41 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/guide/" tabindex="0" data-v-7f418b0f data-v-37adc828 data-v-8f4dc553><!--[-->Guide<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/api/overview" tabindex="0" data-v-7f418b0f data-v-37adc828 data-v-8f4dc553><!--[-->API<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://forums.moddingtree.com" target="_blank" rel="noreferrer" tabindex="0" data-v-7f418b0f data-v-37adc828 data-v-8f4dc553><!--[-->Forums<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-8f4dc553><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--]--></nav><!----><!----><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-1d30fa41 data-v-0394ad82 data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://discord.gg/F3xveHV" aria-label="discord" target="_blank" rel="noopener" data-v-f6988cfb data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg></a><a class="VPSocialLink" href="https://github.com/profectus-engine/Profectus" aria-label="github" target="_blank" rel="noopener" data-v-f6988cfb data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-1d30fa41 data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><!----><!--[--><!--[--><!----><!----><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://discord.gg/F3xveHV" aria-label="discord" target="_blank" rel="noopener" data-v-f6988cfb data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg></a><a class="VPSocialLink" href="https://github.com/profectus-engine/Profectus" aria-label="github" target="_blank" rel="noopener" data-v-f6988cfb data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-1d30fa41 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-b2cf3e0b data-v-f5a2ca58><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f5a2ca58><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f5a2ca58><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f5a2ca58>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-f5a2ca58 data-v-079b16a8><button data-v-079b16a8>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-b2cf3e0b data-v-139a1f1d><div class="curtain" data-v-139a1f1d></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-139a1f1d><span class="visually-hidden" id="sidebar-aria-label" data-v-139a1f1d> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-139a1f1d><section class="VPSidebarItem level-0 collapsible" data-v-139a1f1d data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>Getting Started</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Introduction</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/getting-started/setup" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Setting Up</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/getting-started/updating" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Updating Profectus</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/getting-started/examples" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Example Projects</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="https://github.com/profectus-engine/Profectus/blob/main/CHANGELOG.md" target="_blank" rel="noreferrer" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Profectus Changelog</p><!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-8f4dc553><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-139a1f1d><section class="VPSidebarItem level-0 collapsible" data-v-139a1f1d data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>Creating Your Project</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/creating-your-project/project-info" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Project Info</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/creating-your-project/project-entry" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Project Entry</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/creating-your-project/changelog" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Changelog</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/creating-your-project/themes" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Themes</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/creating-your-project/utils" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Utilities</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-139a1f1d><section class="VPSidebarItem level-0 collapsible" data-v-139a1f1d data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>Important Concepts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/important-concepts/layers" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Layers</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/important-concepts/features" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Features</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/important-concepts/coercable" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Coercable Components</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/important-concepts/reactivity" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Reactivity</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/important-concepts/persistence" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Persistence</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/important-concepts/requirements" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Requirements</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/important-concepts/formulas" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Formulas</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-139a1f1d><section class="VPSidebarItem level-0 collapsible has-active" data-v-139a1f1d data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>Recipes</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/recipes/save-progress" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Display Save Progress</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/recipes/particles" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Display Particle Effect</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-139a1f1d><section class="VPSidebarItem level-0 collapsible" data-v-139a1f1d data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>Advanced Concepts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/advanced-concepts/creating-features" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Creating Features</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/advanced-concepts/dynamic-layers" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Dynamic Layers</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/guide/advanced-concepts/nodes" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Nodes</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-b2cf3e0b data-v-a494bd1d><div class="VPDoc has-sidebar has-aside" data-v-a494bd1d data-v-c4b0d3cf><!--[--><!--]--><div class="container" data-v-c4b0d3cf><div class="aside" data-v-c4b0d3cf><div class="aside-curtain" data-v-c4b0d3cf></div><div class="aside-container" data-v-c4b0d3cf><div class="aside-content" data-v-c4b0d3cf><div class="VPDocAside" data-v-c4b0d3cf data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-8f12e865><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-c4b0d3cf><div class="content-container" data-v-c4b0d3cf><!--[--><!--]--><!----><main class="main" data-v-c4b0d3cf><div style="position:relative;" class="vp-doc _guide_recipes_particles" data-v-c4b0d3cf><div><h1 id="particles" tabindex="-1">Particles <a class="header-anchor" href="#particles" aria-label="Permalink to &quot;Particles&quot;"></a></h1><p>This is a more complete example from the Kronos example used in the <a href="./../advanced-concepts/nodes">nodes</a> docs. You will design a particle effect, make it appear on another feature, and make it adapt to the game state.</p><p>Let&#39;s start with designing the particle effect. Profectus uses pixi-particles, and there&#39;s an online particle effect editor for it <a href="https://pixijs.io/pixi-particles-editor/" target="_blank" rel="noreferrer">here</a>. However, it will return an older format of the particle effect emitter options, so you&#39;ll need to convert it like so:</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:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> myParticleEffect </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">myParticleEffect.json</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">upgradeConfig</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@pixi/particle-emitter</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> particleEffect </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">upgradeConfig</span><span style="color:#A6ACCD;">(myParticleEffect)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>Next we need to create the particles feature and render it. We&#39;ll also want to track the bounding rect of the particle effects. We&#39;ll consider the next step:</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> particles </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createParticles</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> (</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fullscreen</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">zIndex</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">boundingRect</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">null</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">DOMRect</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">onContainerResized</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">boundingRect</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">boundingRect</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boundingRect</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 style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>You&#39;ll note this adds a bounding rect and updates it&#39;s based on the boundingRect set to non-null. The next step will be creating the emitter. Now we can pull in the Kronos example, which make a particle effect that appears when actualGain &gt; 0.</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> particlesEmitter </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(particles</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEmitter</span><span style="color:#A6ACCD;">(element</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">particlesConfig))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> updateParticleEffect </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">async</span><span style="color:#A6ACCD;"> ([shouldEmit</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> rect</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> boundingRect]</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">DOMRect</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>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">DOMRect</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">undefined</span></span>
<span class="line"><span style="color:#A6ACCD;">]) </span><span style="color:#C792EA;">=&gt;</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;">emitter</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">particlesEmitter</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">emitter</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">emit</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">isGaining</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">rect</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">undefined</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boundingRect</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:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">emitter</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">emit</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">emitter</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">destroyed</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">emitter</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">cleanup</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">emitter</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">updateOwnerPos</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">rect</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">x</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">rect</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">width</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">/</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boundingRect</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">rect</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">y</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">rect</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">height</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">/</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boundingRect</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">y</span></span>
<span class="line"><span style="color:#F07178;"> )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">emitter</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resetPositionTracking</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>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#82AAFF;">watch</span><span style="color:#A6ACCD;">(</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 style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> Decimal</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">gt</span><span style="color:#A6ACCD;">(actualGain</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)</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:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> layer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">nodes</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value[name]</span><span style="color:#89DDFF;">?.</span><span style="color:#A6ACCD;">rect</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> particles</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">boundingRect</span></span>
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> updateParticleEffect</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre></div><p>You&#39;ll note this checks regularly whether the boundingRect exists. If you ensure all the references to things are being watched, youy can make complex situations for various emitters.</p><p>If you&#39;re hot reloading, it may be required to re-load the particle effect. Here&#39;s example code from Kronos.</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> refreshParticleEffect </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;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">particlesEmitter</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">destroy</span><span style="color:#F07178;">())</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span></span>
<span class="line"><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">particlesEmitter</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">particles</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEmitter</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">element</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">particlesConfig</span><span style="color:#F07178;">))</span></span>
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">updateParticleEffect</span><span style="color:#F07178;">([</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Decimal</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">gt</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">actualGain</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">layer</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">nodes</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">?.</span><span style="color:#A6ACCD;">rect</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">particles</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">boundingRect</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span></span>
<span class="line"><span style="color:#F07178;"> ])</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></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/recipes/particles.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/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/creating-features" data-v-face870a><span class="desc" data-v-face870a>Next page</span><span class="title" data-v-face870a>Creating Features</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"api_interfaces_game_state.transient.md\":\"9b93a3b5\",\"api_interfaces_lib_pwa-register.registerswoptions.md\":\"410bf7a2\",\"api_interfaces_util_vue.vuefeature.md\":\"01f2f21d\",\"api_modules_data_common.md\":\"435662f2\",\"api_modules_data_projentry.md\":\"c2e156b9\",\"api_modules_data_themes.md\":\"77305c31\",\"api_modules_features_achievements_achievementcomponent.md\":\"3d6fef57\",\"api_modules_features_achievements_achievement.md\":\"a4408771\",\"api_modules_features_action.md\":\"19d911c9\",\"api_modules_features_bars_barcomponent.md\":\"85289c7c\",\"api_modules_features_bars_bar.md\":\"e2e7802d\",\"api_modules_features_boards_boardcomponent.md\":\"db30658c\",\"api_modules_features_boards_boardlinkcomponent.md\":\"1046a1ee\",\"api_modules_features_boards_boardnodecomponent.md\":\"5be89453\",\"api_modules_features_boards_board.md\":\"db81d579\",\"api_modules_features_challenges_challengecomponent.md\":\"e985608b\",\"api_modules_features_challenges_challenge.md\":\"81a3e7d9\",\"api_modules_features_clickables_clickablecomponent.md\":\"24e79a57\",\"api_modules_features_clickables_clickable.md\":\"8f7ae4f9\",\"api_modules_features_conversion.md\":\"251b951d\",\"api_modules_features_grids_gridcellcomponent.md\":\"33efdb77\",\"api_modules_features_grids_gridcomponent.md\":\"25740736\",\"api_modules_features_grids_grid.md\":\"b68bc9a5\",\"api_modules_features_hotkey.md\":\"bc733c26\",\"api_modules_features_infoboxes_infoboxcomponent.md\":\"26a714ec\",\"api_modules_features_infoboxes_infobox.md\":\"97ac6a69\",\"api_modules_features_links_linkcomponent.md\":\"a7c0edf5\",\"api_modules_features_links_linkscomponent.md\":\"e1028014\",\"api_modules_features_resources_maindisplaycomponent.md\":\"209485b1\",\"api_modules_features_resources_resourcecomponent.md\":\"c71dabc6\",\"api_modules_features_resources_resource.md\":\"a7441b9e\",\"api_modules_features_tabs_tabbuttoncomponent.md\":\"32f94f12\",\"api_modules_features_tabs_tabcomponent.md\":\"db3fa930\",\"api_modules_features_tabs_tabfamilycomponent.md\":\"8a06e9bf\",\"api_modules_features_tabs_tab.md\":\"cbe8f60f\",\"api_modules_features_tabs_tabfamily.md\":\"2ef6fdcb\",\"api_modules_features_tooltips_tooltipcomponent.md\":\"22317b04\",\"api_modules_features_tooltips_tooltip.md\":\"25104fdf\",\"api_modules_features_trees_treecomponent.md\":\"77f79c83\",\"api_modules_features_trees_treenodecomponent.md\":\"fed46f18\",\"api_modules_features_trees_tree.md\":\"889d9cb9\",\"api_modules_features_upgrades_upgradecomponent.md\":\"de8dd7d5\",\"api_modules_game_events.md\":\"7be85787\",\"api_modules_game_formulas_formulas.md\":\"cab0b567\",\"api_modules_game_formulas_operations.md\":\"a5ad1c2f\",\"api_modules_game_formulas_types.md\":\"99d5daf7\",\"api_modules_game_gameloop.md\":\"a14a1b92\",\"api_modules_game_layers.md\":\"7ee3d623\",\"api_modules_game_modifiers.md\":\"123fe4fc\",\"api_modules_game_notifications.md\":\"6faa4429\",\"api_modules_game_persistence.md\":\"8cf5b173\",\"api_modules_game_player.md\":\"d1bb543f\",\"api_modules_game_requirements.md\":\"ecc7f3df\",\"api_modules_game_settings.md\":\"6d845b69\",\"api_modules_game_state.md\":\"c86e668c\",\"api_modules_lib_break_eternity.md\":\"7a10eaa6\",\"api_modules_lib_collapsetransition.md\":\"37a925e1\",\"api_modules_lib_lru-cache.md\":\"ee23af86\",\"api_modules_lib_pixi.md\":\"2b426252\",\"api_modules_features_feature.md\":\"7a5eca69\",\"api_modules_features_links_links.md\":\"5de1a01a\",\"api_modules_features_upgrades_upgrade.md\":\"98e1167c\",\"api_interfaces_features_boards_board.boardoptions.md\":\"027a5aef\",\"api_interfaces_features_boards_board.nodelabel.md\":\"ca410803\",\"api_interfaces_features_boards_board.nodetypeoptions.md\":\"633b58d0\",\"api_interfaces_features_challenges_challenge.basechallenge.md\":\"cab2baa7\",\"api_interfaces_features_challenges_challenge.challengeoptions.md\":\"3697b2d0\",\"api_interfaces_features_clickables_clickable.baseclickable.md\":\"4194be50\",\"api_interfaces_features_clickables_clickable.clickableoptions.md\":\"38b89983\",\"api_interfaces_features_conversion.baseconversion.md\":\"5cd99eb1\",\"api_interfaces_features_trees_tree.basetreenode.md\":\"6ff93233\",\"api_interfaces_features_trees_tree.basetree.md\":\"071e07c3\",\"api_modules_util_computed.md\":\"8c79a770\",\"api_interfaces_features_boards_board.boardnodelink.md\":\"f51011a6\",\"api_modules_util_vue.md\":\"5c3f1323\",\"api_modules_util_proxies.md\":\"40d2071a\",\"api_overview.md\":\"88cceb38\",\"api_interfaces_features_boards_board.basenodetype.md\":\"f9aeae3e\",\"api_interfaces_features_boards_board.boardnodeactionoptions.md\":\"339fab10\",\"api_interfaces_features_grids_grid.gridoptions.md\":\"5d8ff64b\",\"api_interfaces_features_hotkey.basehotkey.md\":\"d612cfce\",\"api_interfaces_features_hotkey.hotkeyoptions.md\":\"c5110072\",\"api_interfaces_features_infoboxes_infobox.baseinfobox.md\":\"e89fa27e\",\"api_interfaces_features_infoboxes_infobox.infoboxoptions.md\":\"ad5967ef\",\"api_interfaces_features_links_links.baselinks.md\":\"eebfe209\",\"api_interfaces_features_tabs_tab.taboptions.md\":\"1a02d440\",\"api_interfaces_features_links_links.linksoptions.md\":\"0e711c3a\",\"api_interfaces_features_particles_particles.baseparticles.md\":\"cf816fdd\",\"api_interfaces_features_particles_particles.particlesoptions.md\":\"67d30c88\",\"api_interfaces_features_repeatable.baserepeatable.md\":\"f4db0ecd\",\"api_interfaces_features_repeatable.repeatableoptions.md\":\"21bb1111\",\"api_interfaces_features_reset.basereset.md\":\"2e8556d0\",\"api_interfaces_features_reset.resetoptions.md\":\"2f5fd25e\",\"api_interfaces_features_resources_resource.resource.md\":\"4bdd62cb\",\"api_interfaces_features_tabs_tab.basetab.md\":\"1f7fdf1b\",\"guide_advanced-concepts_dynamic-layers.md\":\"a5b2ad1d\",\"guide_advanced-concepts_nodes.md\":\"f29b361a\",\"guide_creating-your-project_changelog.md\":\"2ba9cb27\",\"guide_creating-your-project_project-entry.md\":\"56be55a7\",\"guide_creating-your-project_project-info.md\":\"9bccc4b8\",\"guide_creating-your-project_themes.md\":\"5c750649\",\"guide_creating-your-project_utils.md\":\"264c40cd\",\"guide_getting-started_examples.md\":\"305530d8\",\"guide_getting-started_setup.md\":\"036f5e9e\",\"guide_getting-started_updating.md\":\"6193ab7a\",\"guide_important-concepts_coercable.md\":\"025d8a15\",\"guide_important-concepts_features.md\":\"1957772b\",\"guide_important-concepts_formulas.md\":\"592f0311\",\"guide_important-concepts_layers.md\":\"12789b41\",\"guide_important-concepts_persistence.md\":\"e64f98b0\",\"guide_important-concepts_reactivity.md\":\"bcec6c75\",\"guide_important-concepts_requirements.md\":\"856b4ffd\",\"guide_index.md\":\"02afca62\",\"guide_recipes_particles.md\":\"30664cc1\",\"guide_recipes_save-progress.md\":\"300c07f4\",\"index.md\":\"6970eb14\",\"api_interfaces_features_boards_board.boardnode.md\":\"cf6a9f07\",\"api_interfaces_features_tabs_tabfamily.basetabbutton.md\":\"e63a6b14\",\"api_interfaces_features_tabs_tabfamily.basetabfamily.md\":\"c0e867d5\",\"api_interfaces_features_tabs_tabfamily.tabbuttonoptions.md\":\"c9f7090d\",\"api_interfaces_features_tabs_tabfamily.tabfamilyoptions.md\":\"dcd840b4\",\"api_interfaces_features_tooltips_tooltip.basetooltip.md\":\"ac0c5fd4\",\"api_interfaces_features_tooltips_tooltip.tooltipoptions.md\":\"c02c958f\",\"api_interfaces_features_trees_tree.treenodeoptions.md\":\"0208cb7e\",\"api_interfaces_features_trees_tree.treeoptions.md\":\"662ae100\",\"api_interfaces_features_upgrades_upgrade.baseupgrade.md\":\"259ee5ba\",\"api_interfaces_features_upgrades_upgrade.upgradeoptions.md\":\"f7ddaed4\",\"api_interfaces_game_events.globalevents.md\":\"4fb77cf2\",\"api_interfaces_game_layers.baselayer.md\":\"5fd574f6\",\"api_interfaces_game_layers.featurenode.md\":\"63d560af\",\"api_interfaces_game_layers.layerevents.md\":\"eb3ef8a4\",\"api_interfaces_game_layers.layeroptions.md\":\"f7c3a7ed\",\"api_interfaces_game_layers.position.md\":\"92625afa\",\"api_modules_util_save.md\":\"1b1d74da\",\"api_interfaces_game_modifiers.exponentialmodifieroptions.md\":\"666c27c3\",\"api_interfaces_game_settings.settings.md\":\"e1d4cf0c\",\"api_interfaces_game_modifiers.modifier.md\":\"4a04a055\",\"api_interfaces_game_modifiers.modifiersectionoptions.md\":\"55a2f406\",\"api_interfaces_game_modifiers.multiplicativemodifieroptions.md\":\"8c9bc868\",\"api_interfaces_game_player.player.md\":\"f547d1a8\",\"api_interfaces_game_requirements.costrequirementoptions.md\":\"8768ed25\",\"api_interfaces_game_requirements.requirement.md\":\"03ac28e6\",\"api_modules_lib_pwa-register.md\":\"0067fcd5\",\"api_interfaces_features_grids_grid.gridcell.md\":\"62ff3806\",\"api_interfaces_features_grids_grid.basegrid.md\":\"19f9584b\",\"guide_advanced-concepts_creating-features.md\":\"426efab2\",\"api_components_hotkeycomponent.md\":\"dceff3ac\",\"api_components_layercomponent.md\":\"1a86cca3\",\"api_components_marknodecomponent.md\":\"23d08031\",\"api_components_modalcomponent.md\":\"130cab7d\",\"api_components_nodecomponent.md\":\"8a8fc540\",\"api_components_savecomponent.md\":\"2ac07017\",\"api_components_fields_dangerbuttoncomponent.md\":\"3259e0ab\",\"api_components_fields_feedbackbuttoncomponent.md\":\"dd6b4910\",\"api_components_fields_selectcomponent.md\":\"35cf9cc0\",\"api_components_fields_slidercomponent.md\":\"ab61fc57\",\"api_components_fields_togglecomponent.md\":\"f519e499\",\"api_components_layout_collapsiblecomponent.md\":\"1fdca5de\",\"api_components_layout_columncomponent.md\":\"c83cd2c5\",\"api_components_layout_rowcomponent.md\":\"cb2610d0\",\"api_components_layout_spacercomponent.md\":\"c5b42be9\",\"api_components_layout_stickycomponent.md\":\"53bef21b\",\"api_components_layout_verticalrulecomponent.md\":\"d9351eaa\",\"api_components_math_floorcomponent.md\":\"da05e8cb\",\"api_components_math_sqrtcomponent.md\":\"87bc6d21\",\"api_enums_data_themes.themes.md\":\"b5796547\",\"api_enums_features_achievements_achievement.achievementdisplay.md\":\"1982f962\",\"api_enums_features_boards_board.progressdisplay.md\":\"d35ea581\",\"api_enums_features_boards_board.shape.md\":\"990fd458\",\"api_enums_util_common.direction.md\":\"0bdeb204\",\"api_interfaces_game_modifiers.additivemodifieroptions.md\":\"6e335429\",\"api_interfaces_data_common.layertreenodeoptions.md\":\"06b54ae6\",\"api_interfaces_data_common.resetbuttonoptions.md\":\"7fcf71d7\",\"api_classes_game_formulas_formulas.default.md\":\"7bbe151c\",\"api_components_fields_textcomponent.md\":\"8fc37f4c\",\"api_enums_features_feature.visibility.md\":\"e3f8ad05\",\"api_classes_lib_break_eternity.default.md\":\"5982f2fb\",\"api_classes_lib_lru-cache.lrucache.md\":\"4a3c08f5\",\"api_components_contextcomponent.md\":\"d2aded5d\",\"api_interfaces_data_common.section.md\":\"8ef32035\",\"api_interfaces_data_themes.theme.md\":\"d66845d0\",\"api_interfaces_data_themes.themevars.md\":\"79418824\",\"api_interfaces_features_achievements_achievement.achievementoptions.md\":\"123460e9\",\"api_interfaces_features_achievements_achievement.baseachievement.md\":\"a4c3dfaa\",\"api_interfaces_features_action.actionoptions.md\":\"39efb739\",\"api_interfaces_features_action.baseaction.md\":\"aa7fb5d4\",\"api_interfaces_features_bars_bar.baroptions.md\":\"9f1017b9\",\"api_interfaces_features_bars_bar.basebar.md\":\"5c701760\",\"api_interfaces_features_boards_board.baseboard.md\":\"70c8ee23\",\"api_interfaces_features_boards_board.baseboardnodeaction.md\":\"cc734bae\",\"api_modules_lib_vue-panzoom.md\":\"bfc32ff5\",\"api_interfaces_features_links_links.link.md\":\"4d6fe5f8\",\"api_components_infocomponent.md\":\"29393227\",\"api_modules_features_particles_particlescomponent.md\":\"e9b00afe\",\"api_interfaces_features_conversion.conversionoptions.md\":\"221449e6\",\"api_modules_lib_vue-textarea-autosize.md\":\"a92591ec\",\"api_modules_util_bignum.md\":\"190d4017\",\"api_modules_util_break_eternity.md\":\"7940bd72\",\"api_modules_util_common.md\":\"71a18d40\",\"api_interfaces_features_trees_tree.treebranch.md\":\"d8df8c3d\",\"api_modules_features_particles_particles.md\":\"c84a0b31\",\"api_modules_features_repeatable.md\":\"3d374383\",\"api_modules_features_reset.md\":\"9695d33e\"}")
__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/SaveComponent.html\"},{\"text\":\" Select Component\",\"link\":\"/api/components/fields/SelectComponent.html\"},{\"text\":\" Slider Component\",\"link\":\"/api/components/fields/SliderComponent.html\"},{\"text\":\" Spacer Component\",\"link\":\"/api/components/layout/SpacerComponent.html\"},{\"text\":\" Sqrt Component\",\"link\":\"/api/components/math/SqrtComponent.html\"},{\"text\":\" Sticky Component\",\"link\":\"/api/components/layout/StickyComponent.html\"},{\"text\":\" Text Component\",\"link\":\"/api/components/fields/TextComponent.html\"},{\"text\":\" Toggle Component\",\"link\":\"/api/components/fields/ToggleComponent.html\"},{\"text\":\" Vertical Rule Component\",\"link\":\"/api/components/layout/VerticalRuleComponent.html\"}]},{\"text\":\"Data\",\"items\":[{\"text\":\"Common\",\"link\":\"/api/modules/data/common.html\"},{\"text\":\"Proj Entry\",\"link\":\"/api/modules/data/projEntry.html\"},{\"text\":\"Themes\",\"link\":\"/api/modules/data/themes.html\"}],\"collapsed\":false},{\"text\":\"Features\",\"items\":[{\"text\":\"Achievement\",\"link\":\"/api/modules/features/achievements/achievement.html\"},{\"text\":\"Action\",\"link\":\"/api/modules/features/action.html\"},{\"text\":\"Bar\",\"link\":\"/api/modules/features/bars/bar.html\"},{\"text\":\"Board\",\"link\":\"/api/modules/features/boards/board.html\"},{\"text\":\"Challenge\",\"link\":\"/api/modules/features/challenges/challenge.html\"},{\"text\":\"Clickable\",\"link\":\"/api/modules/features/clickables/clickable.html\"},{\"text\":\"Conversion\",\"link\":\"/api/modules/features/conversion.html\"},{\"text\":\"Feature\",\"link\":\"/api/modules/features/feature.html\"},{\"text\":\"Grid\",\"link\":\"/api/modules/features/grids/grid.html\"},{\"text\":\"Hotkey\",\"link\":\"/api/modules/features/hotkey.html\"},{\"text\":\"Infobox\",\"link\":\"/api/modules/features/infoboxes/infobox.html\"},{\"text\":\"Links\",\"link\":\"/api/modules/features/links/links.html\"},{\"text\":\"Particles\",\"link\":\"/api/modules/features/particles/particles.html\"},{\"text\":\"Repeatable\",\"link\":\"/api/modules/features/repeatable.html\"},{\"text\":\"Reset\",\"link\":\"/api/modules/features/reset.html\"},{\"text\":\"Resource\",\"link\":\"/api/modules/features/resources/resource.html\"},{\"text\":\"Tab\",\"link\":\"/api/modules/features/tabs/tab.html\"},{\"text\":\"Tab Family\",\"link\":\"/api/modules/features/tabs/tabFamily.html\"},{\"text\":\"Tooltip\",\"link\":\"/api/modules/features/tooltips/tooltip.html\"},{\"text\":\"Tree\",\"link\":\"/api/modules/features/trees/tree.html\"},{\"text\":\"Upgrade\",\"link\":\"/api/modules/features/upgrades/upgrade.html\"}],\"collapsed\":false},{\"text\":\"Game\",\"items\":[{\"text\":\"Events\",\"link\":\"/api/modules/game/events.html\"},{\"text\":\"Formulas\",\"link\":\"/api/modules/game/formulas/formulas.html\"},{\"text\":\"Game Loop\",\"link\":\"/api/modules/game/gameLoop.html\"},{\"text\":\"Layers\",\"link\":\"/api/modules/game/layers.html\"},{\"text\":\"Modifiers\",\"link\":\"/api/modules/game/modifiers.html\"},{\"text\":\"Notifications\",\"link\":\"/api/modules/game/notifications.html\"},{\"text\":\"Operations\",\"link\":\"/api/modules/game/formulas/operations.html\"},{\"text\":\"Persistence\",\"link\":\"/api/modules/game/persistence.html\"},{\"text\":\"Player\",\"link\":\"/api/modules/game/player.html\"},{\"text\":\"Requirements\",\"link\":\"/api/modules/game/requirements.html\"},{\"text\":\"Settings\",\"link\":\"/api/modules/game/settings.html\"},{\"text\":\"State\",\"link\":\"/api/modules/game/state.html\"},{\"text\":\"Types\",\"link\":\"/api/modules/game/formulas/types.html\"}],\"collapsed\":false},{\"text\":\"Lib\",\"items\":[{\"text\":\"Break Eternity\",\"link\":\"/api/modules/lib/break_eternity.html\"},{\"text\":\"Collapse Transition\",\"link\":\"/api/modules/lib/collapseTransition.html\"},{\"text\":\"Lru-cache\",\"link\":\"/api/modules/lib/lru-cache.html\"},{\"text\":\"Pixi\",\"link\":\"/api/modules/lib/pixi.html\"},{\"text\":\"Pwa-register\",\"link\":\"/api/modules/lib/pwa-register.html\"},{\"text\":\"Vue-panzoom\",\"link\":\"/api/modules/lib/vue-panzoom.html\"},{\"text\":\"Vue-textarea-autosize\",\"link\":\"/api/modules/lib/vue-textarea-autosize.html\"}],\"collapsed\":true},{\"text\":\"Util\",\"items\":[{\"text\":\"Bignum\",\"link\":\"/api/modules/util/bignum.html\"},{\"text\":\"Break Eternity\",\"link\":\"/api/modules/util/break_eternity.html\"},{\"text\":\"Common\",\"link\":\"/api/modules/util/common.html\"},{\"text\":\"Computed\",\"link\":\"/api/modules/util/computed.html\"},{\"text\":\"Proxies\",\"link\":\"/api/modules/util/proxies.html\"},{\"text\":\"Save\",\"link\":\"/api/modules/util/save.html\"},{\"text\":\"Vue\",\"link\":\"/api/modules/util/vue.html\"}],\"collapsed\":false}]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}")</script>
</body>
</html>