18 lines
14 KiB
JavaScript
18 lines
14 KiB
JavaScript
import{_ as i,c as a,a0 as e,o as t}from"./chunks/framework.P9qPzDnn.js";const o=JSON.parse('{"title":"Prestige Mechanic","description":"","frontmatter":{},"headers":[],"relativePath":"guide/recipes/prestige.md","filePath":"guide/recipes/prestige.md","lastUpdated":1737056209000}'),n={name:"guide/recipes/prestige.md"};function h(l,s,p,k,r,F){return t(),a("div",null,s[0]||(s[0]=[e(`<h1 id="prestige-mechanic" tabindex="-1">Prestige Mechanic <a class="header-anchor" href="#prestige-mechanic" aria-label="Permalink to "Prestige Mechanic""></a></h1><p>Prestige mechanics are a common feature in incremental games. They involve resetting a portion of the game's progress in exchange for a new currency that persists between these resets. Many games even have multiple layers of reset mechanics, each resetting everything that came before them.</p><h2 id="create-a-conversion" tabindex="-1">Create a conversion <a class="header-anchor" href="#create-a-conversion" aria-label="Permalink to "Create a conversion""></a></h2><p>The first step is to create a conversion that will handle calculating the amount of prestige currency generated. In our example, let's assume there's a base layer called <code>main</code> and a prestige layer called <code>prestige</code>. This conversion will be based on the amount of <code>points</code> the player has, a resource within <code>main</code>. Here's an example conversion, using the formula from <a href="https://jacorb90.me/Prestige-Tree/" target="_blank" rel="noreferrer">The Prestige Tree</a>'s prestige layer:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes material-theme-palenight material-theme-palenight vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;">const</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> conversion </span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">=</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;"> createCumulativeConversion</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">()</span><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;"> =></span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> (</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> baseResource</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> main</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">points</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> gainResource</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;"> noPersist</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(points)</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;"> formula</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#BABED8;--shiki-light-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic;"> x</span><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;"> =></span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> x</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;">div</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(</span><span style="--shiki-light:#F78C6C;--shiki-dark:#F78C6C;">10</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">)</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;">sqrt</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">()</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">))</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span></code></pre></div><p>In this case, <code>points</code> refers to <code>prestige.points</code>, as it's within the <code>prestige</code> layer.</p><h2 id="create-a-reset-button" tabindex="-1">Create a reset button <a class="header-anchor" href="#create-a-reset-button" aria-label="Permalink to "Create a reset button""></a></h2><p>Next, create a button that will perform the reset and generate points. Create a clickable like this:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes material-theme-palenight material-theme-palenight vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;">const</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> convertButton </span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">=</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;"> createClickable</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">()</span><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;"> =></span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> (</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> requirements</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;"> createBooleanRequirement</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">()</span><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;"> =></span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> Decimal</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;">gt</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;">unref</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(conversion</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">actualGain)</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span><span style="--shiki-light:#F78C6C;--shiki-dark:#F78C6C;"> 0</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">))</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> display</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;"> description</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> ()</span><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;"> =></span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> \`</span><span style="--shiki-light:#C3E88D;--shiki-dark:#C3E88D;">Reset for </span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">\${</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;">formatWhole</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(conversion</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">currentGain)</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}</span><span style="--shiki-light:#C3E88D;--shiki-dark:#C3E88D;"> prestige points</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">\`</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> onClick</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">()</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> conversion</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;">convert</span><span style="--shiki-light:#F07178;--shiki-dark:#F07178;">()</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">))</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span></code></pre></div><p>This creates a simple clickable that can only be clicked when the player will gain some amount of the prestige currency, and it displays how much they'll get. This can be further improved by displaying how many points the player will need to generate one more prestige point.</p><h2 id="resetting-previous-content" tabindex="-1">Resetting previous content <a class="header-anchor" href="#resetting-previous-content" aria-label="Permalink to "Resetting previous content""></a></h2><p>Now, return to the <code>main</code> layer. Create a <code>reset</code> feature that receives a list of all the things it needs to reset - in this example, we'll just reset the entire layer:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes material-theme-palenight material-theme-palenight vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;">const</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> reset </span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">=</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;"> createReset</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">(</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">()</span><span style="--shiki-light:#C792EA;--shiki-dark:#C792EA;"> =></span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> (</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="--shiki-light:#F07178;--shiki-dark:#F07178;"> thingsToReset</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> [layer]</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">))</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span></code></pre></div><p>Then, modify the convert button to trigger the reset:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes material-theme-palenight material-theme-palenight vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;">onClick</span><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;">() </span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> conversion</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;">convert</span><span style="--shiki-light:#F07178;--shiki-dark:#F07178;">()</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#BABED8;--shiki-dark:#BABED8;"> reset</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#82AAFF;--shiki-dark:#82AAFF;">reset</span><span style="--shiki-light:#F07178;--shiki-dark:#F07178;">()</span><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#89DDFF;--shiki-dark:#89DDFF;">}</span></span></code></pre></div><p>If you have multiple tiers of resets, you may add an <code>onReset</code> function to each reset that triggers the next reset before it, causing the resets to cascade.</p><h2 id="branching-resets" tabindex="-1">Branching resets <a class="header-anchor" href="#branching-resets" aria-label="Permalink to "Branching resets""></a></h2><p>A common pattern for reset mechanics is to display these various layers in a tree and have the tree propagate the resets for you. There are a couple of utility functions to help you accomplish this: <a href="/api/data/common/functions/createResetButton">createResetButton</a> and <a href="/api/data/common/functions/createLayerTreeNode">createLayerTreeNode</a>. You'll typically place the tree itself in the <code>main</code> layer and create a tree node for each layer. Then you can call the tree's <code>reset</code> function with the layer that's resetting, and it will propagate the reset as appropriate.</p>`,18)]))}const d=i(n,[["render",h]]);export{o as __pageData,d as default};
|