<spanclass="line"><spanstyle="color:#89DDFF;">}</span><spanstyle="color:#A6ACCD;">)</span><spanstyle="color:#89DDFF;">;</span></span></code></pre></div><h2id="adding-a-resource"tabindex="-1">Adding a resource <aclass="header-anchor"href="#adding-a-resource"aria-label="Permalink to "Adding a resource""></a></h2><p>Game elements in Profectus are called "features". You'll create them inside the layer's constructor function and return them in the object at the end. Many features can also be rendered in the layer's display.</p><p>In the file tree, there's a folder called <code>src/features</code>, which contains all the different features that are included in Profectus (and any others you've created or downloaded from others!). You can browse the folder to see all the features and learn what each one does. Some features also have dedicated guide pages on how to use them.</p><p>Let's add one of these features to our layer: a Resource. As with most features, there's a <ahref="./../../api/modules/features/resource#createresource">createResource</a> constructor for creating this feature. These constructors typically take a function that returns an object with all the options for that feature. However, resources are simple features, so they just take the options as parameters. Creating a resource will look like this:</p><divclass="language-ts"><buttontitle="Copy Code"class="copy"></button><spanclass="lang">ts</span><preclass="shiki material-theme-palenight"><code><spanclass="line"><spanstyle="color:#C792EA;">const</span><spanstyle="color:#A6ACCD;"> points </span><spanstyle="color:#89DDFF;">=</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#82AAFF;">createResource</span><spanstyle="color:#89DDFF;"><</span><spanstyle="color:#FFCB6B;">DecimalSource</span><spanstyle="color:#89DDFF;">></span><spanstyle="color:#A6ACCD;">(</span><spanstyle="color:#F78C6C;">0</span><spanstyle="color:#89DDFF;">,</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#C3E88D;">prestige points</span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#A6ACCD;">)</span><spanstyle="color:#89DDFF;">;</span></span></code></pre></div><p>In your IDE you'll be able to see the documentation for each parameter - in this case, the first one is the default value for this resource, and the second is the display name for the resource. Now we can make sure to add the points to our layer's object and display it using the <ahref="./../../api/modules/features/resource#maindisplay-component">MainDisplay</a> Vue component. All in all, our layer should look like this now:</p><divclass="language-ts"><buttontitle="Copy Code"class="copy"></button><spanclass="lang">ts</span><preclass="shiki material-theme-palenight"><code><spanclass="line"><spanstyle="color:#C792EA;">const</span><spanstyle="color:#A6ACCD;"> id </span><spanstyle="color:#89DDFF;">=</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#C3E88D;">p</span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#89DDFF;">;</span></span>
<spanclass="line"><spanstyle="color:#89DDFF;">}</span><spanstyle="color:#A6ACCD;">)</span><spanstyle="color:#89DDFF;">;</span></span></code></pre></div><h2id="update-loop"tabindex="-1">Update loop <aclass="header-anchor"href="#update-loop"aria-label="Permalink to "Update loop""></a></h2><p>Some things happen every tick, such as passive resource generation. You can hook into the update loop using an event bus. There's a global one and one for each layer. For example, within the layer function, you can add this code to our example to increase our points at a rate of 1 per second:</p><divclass="language-ts"><buttontitle="Copy Code"class="copy"></button><spanclass="lang">ts</span><preclass="shiki material-theme-palenight has-diff"><code><spanclass="line"><spanstyle="color:#89DDFF;">this.</span><spanstyle="color:#82AAFF;">on</span><spanstyle="color:#A6ACCD;">(</span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#C3E88D;">update</span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#89DDFF;">,</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#A6ACCD;font-style:italic;">diff</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#C792EA;">=></span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#89DDFF;">{</span></span>
<spanclass="line"><spanstyle="color:#89DDFF;">}</span><spanstyle="color:#A6ACCD;">)</span><spanstyle="color:#89DDFF;">;</span></span></code></pre></div><p>Note that within the <code>createLayer</code>'s function, <code>this</code> refers to the layer you're actively creating, and the <code>diff</code> parameter represents the seconds that have passed since the last update - which will typically be around 0.05 unless throttling is disabled in the settings. If we wanted to generate an amount other than 1/s, we could multiply diff by the per-second rate.</p><h2id="adding-an-upgrade"tabindex="-1">Adding an upgrade <aclass="header-anchor"href="#adding-an-upgrade"aria-label="Permalink to "Adding an upgrade""></a></h2><p>Let's add a more complex feature to the layer now - an upgrade. Upgrades represent one-time purchases. This time the <ahref="./../../api/modules/features/upgrade#createupgrade">createUpgrade</a> function requires an options function. We can create a lambda that returns the options object. We'll need to give it a cost requirement and display. Afterwards, it should look like this:</p><divclass="language-ts"><buttontitle="Copy Code"class="copy"></button><spanclass="lang">ts</span><preclass="shiki material-theme-palenight"><code><spanclass="line"><spanstyle="color:#C792EA;">const</span><spanstyle="color:#A6ACCD;"> myUpgrade </span><spanstyle="color:#89DDFF;">=</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#82AAFF;">createUpgrade</span><spanstyle="color:#A6ACCD;">(</span><spanstyle="color:#89DDFF;">()</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#C792EA;">=></span><spanstyle="color:#A6ACCD;"> (</span><spanstyle="color:#89DDFF;">{</span></span>
<spanclass="line"><spanstyle="color:#89DDFF;">}</span><spanstyle="color:#A6ACCD;">))</span><spanstyle="color:#89DDFF;">;</span></span></code></pre></div><p>We'll add this upgrade to our returned object and our display. Upgrades are a renderable feature, which means we can use the <ahref="./../../api/modules/util/vue#render">render</a> function to display them. The returned layer object will now look like this:</p><divclass="language-ts"><buttontitle="Copy Code"class="copy"></button><spanclass="lang">ts</span><preclass="shiki material-theme-palenight"><code><spanclass="line"><spanstyle="color:#89DDFF;font-style:italic;">return</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#89DDFF;">{</span></span>
<spanclass="line"><spanstyle="color:#89DDFF;">}</span></span></code></pre></div><p>The last thing to do to implement our upgrade is to give it an effect! If <code>myUpgrade.bought.value</code> is true, then the points generation should double. We'll represent that by creating a points gain modifier, which will make it easy to handle many things affecting points gain. The modifier should look like this:</p><divclass="language-ts"><buttontitle="Copy Code"class="copy"></button><spanclass="lang">ts</span><preclass="shiki material-theme-palenight"><code><spanclass="line"><spanstyle="color:#C792EA;">const</span><spanstyle="color:#A6ACCD;"> myModifier </span><spanstyle="color:#89DDFF;">=</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#82AAFF;">createSequentialModifier</span><spanstyle="color:#A6ACCD;">(</span><spanstyle="color:#89DDFF;">()</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#C792EA;">=></span><spanstyle="color:#A6ACCD;"> [</span></span>
<spanclass="line"><spanstyle="color:#A6ACCD;">])</span><spanstyle="color:#89DDFF;">;</span></span></code></pre></div><p>Now to make the points gain use the modifier, we'll update the line that adds points to this:</p><divclass="language-ts"><buttontitle="Copy Code"class="copy"></button><spanclass="lang">ts</span><preclass="shiki material-theme-palenight has-diff"><code><spanclass="line"><spanstyle="color:#A6ACCD;">points</span><spanstyle="color:#89DDFF;">.</span><spanstyle="color:#A6ACCD;">value </span><spanstyle="color:#89DDFF;">=</span><spanstyle="color:#A6ACCD;"> Decimal</span><spanstyle="color:#89DDFF;">.</span><spanstyle="color:#82AAFF;">add</span><spanstyle="color:#A6ACCD;">(points</span><spanstyle="color:#89DDFF;">.</span><spanstyle="color:#A6ACCD;">value</span><spanstyle="color:#89DDFF;">,</span><spanstyle="color:#A6ACCD;"> Decimal</span><spanstyle="color:#89DDFF;">.</span><spanstyle="color:#82AAFF;">times</span><spanstyle="color:#A6ACCD;">(myModifier</span><spanstyle="color:#89DDFF;">.</span><spanstyle="color:#82AAFF;">apply</span><spanstyle="color:#A6ACCD;">(</span><spanstyle="color:#F78C6C;">1</span><spanstyle="color:#A6ACCD;">)</span><spanstyle="color:#89DDFF;">,</span><spanstyle="color:#A6ACCD;"> diff))</span><spanstyle="color:#89DDFF;">;</span></span></code></pre></div><p>You now have a functioning upgrade, and are prepared to create many more upgrades and other features!</p><h2id="next-steps"tabindex="-1">Next Steps <aclass="header-anchor"href="#next-steps"aria-label="Permalink to "Next Steps""></a></h2><p>Since Profectus is an engine, what to do with it is a fairly open-ended question. If you're not quite ready to go out on your own, there are more guides to help prepare you. A good next step would be the <ahref="./../recipes/prestige">Prestige Mechanic</a> recipe page.</p><p>The "Important Concepts" section of the guide goes further into various parts of the engine that are prudent to understand. If any of those look interesting or like something you need help with, they can be a great help.</p><p>Beyond that, the best way to learn is to just continue using the engine and exploring its various features. Have fun!</p></div></div></main><footerclass="VPDocFooter"data-v-c4b0d3cfdata-v-face870a><!--[--><!--]--><divclass="edit-info"data-v-face870a><divclass="edit-link"data-v-face870a><aclass="VPLink link edit-link-button"href="https://github.com/profectus-engine/profectus-docs/edit/main/docs/guide/getting-started/first-layer.md"target="_blank"rel="noreferrer"data-v-face870adata-v-8f4dc553><!--[--><svgxmlns="http://www.w3.org/2000/svg"viewbox="0 0 24 24"class="edit-link-icon"aria-label="edit icon"data-v-face870a><pathd="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><pathd="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><divclass="last-updated"data-v-face870a><pclass="VPLastUpdated"data-v-face870adata-v-7b3ebfe1>Last updated: <timedatetime="2023-05-18T00:22:54.000Z"data-v-7b3ebfe1></time></p></div></div><divclass="prev-next"data-v-face870a><divclass="pager"data-v-face870a><aclass="pager-link prev"href="/guide/getting-started/updating"data-v-face870a><spanclass="desc"data-v-face870a>Previous page</span><spanclass="title"data-v-face870a>Updating Profectus</span></a></div><divclass="has-prev pager"data-v-face870a><aclass="pager-link next"href="/guide/getting-started/examples"data-v-face870a><spanclass="desc"data-v-face870a>Next page</span><spanclass="title"data-v-face870a>Example Projects</span></a></div></div></footer><!--[--><!--]--></div></di
