<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Pokémon on sunbro.dev</title><link>https://sunbro.dev/tags/pok%C3%A9mon/</link><description>Recent content in Pokémon on sunbro.dev</description><generator>Hugo -- 0.131.0</generator><language>en</language><lastBuildDate>Thu, 09 Mar 2023 22:24:07 +0000</lastBuildDate><atom:link href="https://sunbro.dev/tags/pok%C3%A9mon/index.xml" rel="self" type="application/rss+xml"/><item><title>Making a simple Pokémon romhack - Editing a map</title><link>https://sunbro.dev/posts/2020-05-15-romhack-map-editing/</link><pubDate>Fri, 15 May 2020 12:54:00 +0100</pubDate><guid>https://sunbro.dev/posts/2020-05-15-romhack-map-editing/</guid><description>Editing the Littleroot Town map</description><content:encoded><![CDATA[<h2 id="current-state-of-affairs">Current state of affairs</h2>
<p>Here is where our romhack currently stands:</p>
<ol>
<li><input checked="" disabled="" type="checkbox"> Changing <strong>Professor Birch&rsquo;s speech</strong></li>
<li><input disabled="" type="checkbox"> Changing the <strong>Littleroot Town map</strong></li>
<li><input disabled="" type="checkbox"> Adding an <strong>interaction event in Littleroot Town</strong></li>
<li><input disabled="" type="checkbox"> Changing the <strong>starter Pokémons</strong></li>
<li><input disabled="" type="checkbox"> Changing the <strong>first trainer&rsquo;s team</strong></li>
<li><input disabled="" type="checkbox"> Modifying the <strong>first wild Pokémons</strong></li>
</ol>
<h2 id="goal">Goal</h2>
<p>The goal for this step is to modify the starting town&rsquo;s map, and add an object
we will later be able to interact with. This object will most likely be a
signpost, or npc, or one of both.</p>
<p>To make these changes, we are going to use <strong>Porymap</strong>, available 
<a href="https://github.com/huderlem/porymap" target="_blank" ><strong>here</strong></a>.</p>
<h2 id="using-porymap">Using Porymap</h2>
<p>Once you&rsquo;ve compiled and executed the <strong>Porymap</strong> binary and opened the relevant
project, our romhack in this case, you should an interface that is reminiscent
of the typical RPG Maker interface.</p>
<p>The leftmost panel should be a list of folders named <code>gMapGroup0</code> through <code>gMapGroup33</code> at
the time of writing. Here is what each map group contains:</p>
<ul>
<li><strong>gMapGroup0</strong>: all of the &ldquo;<em>outside</em>&rdquo; maps - town layouts and routes</li>
<li><strong>gMapGroup1</strong> to <strong>gMapGroup16</strong>: all of the &ldquo;<em>indoor</em>&rdquo; maps for the
towns, with some exceptions like the inside of the moving truck found
during the introduction in Littleroot Town</li>
<li><strong>gMapGroup17</strong>  to <strong>gMapGroup23</strong> and <strong>gMapGroup27</strong> to <strong>gMapGroup33</strong>: all of the
&ldquo;<em>indoor</em>&rdquo; maps for all of the routes</li>
<li><strong>gMapGroup24</strong> to <strong>gMapGroup26</strong>: all of the remaining &ldquo;<em>indoor</em>&rdquo; maps - Battle
Frontier, caves, the inside of the moving truck, ships, etc&hellip;</li>
</ul>
<p>Take a moment to unroll of the folders and take a look at all of the different maps
you can edit. Once you&rsquo;re done, open <code>gMapGroup0</code> and select <code>[0.09] LittlerootTown</code>.</p>
<p>You should now see the town map in the center of your screen, and the map&rsquo;s tiles
on the right. The rest of the interface is intuitive enough and I will let you
refer to the official 
<a href="https://huderlem.github.io/porymap/" target="_blank" ><strong>documentation</strong></a> to see exactly what
everything does.</p>
<h2 id="making-our-first-map-change">Making our first map change</h2>
<p>Littleroot Town currently looks like this:</p>
<p>


<img src="/images/pokeemerald/littleroot_town_original.png" alt="Littleroot Town&amp;rsquo;s original map" loading="lazy" width="641"
    height="643" style="max-width: 100%; height: auto;" /></p>
<p>Let&rsquo;s add a puddle, and a signpost in the center and save our changes:</p>
<p>


<img src="/images/pokeemerald/littleroot_town_puddle.png" alt="Littleroot Town with a puddle" loading="lazy" width="639"
    height="642" style="max-width: 100%; height: auto;" /></p>
<p>Congratulations, you&rsquo;ve just edited your first map! However, as you might realise,
if you compile the rom and play it, the player goes right through the signpost.</p>
<video autoplay loop muted playsinline aria-label='The player does not collide with the signpost' style="width: 100%; height: auto;">
    <source src="/captures/littleroot_puddle_no_collision.mp4" type="video/mp4">
    
    <p> Your browser does not support video. </p>
</video>
<p>We now have to add collisions. To do so, select the <code>Collision</code> tab on the right, and
make it so the player cannot walk through the signpost. The map&rsquo;s collision look like
this:</p>
<p>


<img src="/images/pokeemerald/littleroot_town_update_collisions.png" alt="Littleroot Town&amp;rsquo;s updated collisions" loading="lazy" width="640"
    height="641" style="max-width: 100%; height: auto;" /></p>
<p>Save the map, compile the game, and you will see that the player cannot walk
through the signpost anymore:</p>
<video autoplay loop muted playsinline aria-label='The player collides with the sign' style="width: 100%; height: auto;">
    <source src="/captures/littleroot_puddle_collision.mp4" type="video/mp4">
    
    <p> Your browser does not support video. </p>
</video>
<p>Congratulations once again, you&rsquo;ve successfully edited a map and adjusted the collisions!</p>
<h2 id="interacting-with-the-signpost">Interacting with the signpost</h2>
<p>Switch to the events tab in the central panel, select the dropdown menu on the
right, next to <code>New Object</code> and choose <code>New Sign</code>. A new sign event should appear
in the top left corner (0,0) of the map. Select the pointer and move the event to
the signpost in the middle of the puddle.</p>
<p>


<img src="/images/pokeemerald/littleroot_events.png" alt="Littleroot Town events" loading="lazy" width="638"
    height="640" style="max-width: 100%; height: auto;" /></p>
<p>Name the script <code>LittlerootTown_EventScript_PuddleSign</code> and click the <code>Open Map Scripts</code>
button. If nothing happens, open the <code>data/maps/LittlerootTown/scripts.inc</code> file with the
text editor of your choice.</p>
<p>Add this code at the end of the file:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-S" data-lang="S"><span class="line"><span class="cl"><span class="n">LittlerootTown_EventScript_PuddleSign</span><span class="o">::</span>
</span></span><span class="line"><span class="cl">	<span class="n">msgbox</span> <span class="n">LittlerootTown_Text_PuddleSign</span><span class="p">,</span> <span class="n">MSGBOX_SIGN</span>
</span></span><span class="line"><span class="cl">	<span class="n">end</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">LittlerootTown_Text_PuddleSign</span><span class="o">:</span>
</span></span><span class="line"><span class="cl">	<span class="n">.string</span> <span class="s">&#34;Welcome to the world famous Littleroot\n&#34;</span>
</span></span><span class="line"><span class="cl">	<span class="n">.string</span> <span class="s">&#34;Town puddle$&#34;</span>
</span></span></code></pre></div><p>As you can imagine, this code creates a procedure called <code>LittlerootTown_EventScript_PuddleSign</code>
which creates a message box containing the text after the <code>LittlerootTown_Text_PuddleSign</code> label.
Save the file, recompile the game, and you should now be able to interact with the signpost:</p>
<video autoplay loop muted playsinline aria-label='Interacting with the puddle signpost' style="width: 100%; height: auto;">
    <source src="/captures/littleroot_puddle_interaction.mp4" type="video/mp4">
    
    <p> Your browser does not support video. </p>
</video>
<p>Good job, you&rsquo;ve now added your first interactive event to game and made a more
complete romhack!</p>
<p>That&rsquo;s it for now, next time we will edit the game&rsquo;s starter pokémons.</p>
]]></content:encoded></item><item><title>Making a simple Pokémon romhack - Getting started</title><link>https://sunbro.dev/posts/2020-05-08-making-a-simple-romhack/</link><pubDate>Thu, 07 May 2020 00:25:00 +0100</pubDate><guid>https://sunbro.dev/posts/2020-05-08-making-a-simple-romhack/</guid><description>Starting out with Pokémon Emerald</description><content:encoded><![CDATA[<h2 id="goals">Goals</h2>
<p>The goal of this project is to create a Pokémon Emerald romhack. To do so,
we are going to use a dissassembled version of the rom as a starting point. Using
different tools, we are going to modify the parts we want to change. The changes
we are going to make are the following:</p>
<ol>
<li>Changing <strong>Professor Birch&rsquo;s speech</strong></li>
<li>Changing the <strong>Littleroot Town map</strong></li>
<li>Adding an <strong>interaction event in Littleroot Town</strong></li>
<li>Changing the <strong>starter Pokémons</strong></li>
<li>Changing the <strong>first trainer&rsquo;s team</strong></li>
<li>Modifying the <strong>first wild Pokémons</strong></li>
</ol>
<h2 id="tools">Tools</h2>
<p>Here is a list of the tools we are going to use:</p>
<p><strong>A Pokémon Emerald disassembly</strong></p>
<ul>
<li><em>pokeemerald</em> - 
<a href="https://github.com/pret/pokeemerald" target="_blank" ><strong>Github</strong></a></li>
</ul>
<p><strong>A map editor</strong></p>
<ul>
<li><em>Porymap</em> - 
<a href="https://github.com/huderlem/porymap" target="_blank" ><strong>GitHub</strong></a></li>
</ul>
<p><strong>A Gameboy Advance emulator</strong> <em>(any will do)</em></p>
<ul>
<li><em>Visual Boy Advance M</em> - 
<a href="https://github.com/visualboyadvance-m/visualboyadvance-m" target="_blank" ><strong>GitHub</strong></a></li>
</ul>
<p><strong>A text editor</strong> <em>(any will do)</em></p>
<ul>
<li><em>Visual Studio Code</em> - 
<a href="https://github.com/microsoft/vscode" target="_blank" ><strong>GitHub</strong></a></li>
</ul>
<p>Setting up each of these tools is well documented and can be done without too
much of a hassle. Personally, I am working on a 2019 Dell XPS 13 running Arch
Linux, and all of these tools are usable without issues.</p>
<h2 id="making-our-first-change">Making our first change</h2>
<p>Right now, when we start the game we get the usual speech from Prof. Birch:</p>
<video autoplay loop muted playsinline aria-label='Prof. Birch&#39;s regular speech' style="width: 100%; height: auto;">
    <source src="/captures/birch_speech_original.mp4" type="video/mp4">
    
    <p> Your browser does not support video. </p>
</video>
<p>Let&rsquo;s change his opening line</p>
<blockquote>
<p>Hi! Sorry to keep you waiting!</p>
</blockquote>
<p>to</p>
<blockquote>
<p>Hey all you cool cats and kittens!</p>
</blockquote>
<p>To do so, start up your text editor and open the <code>data/text/birch_speech.inc</code>
file in the <em>pokeemerald</em> repository. You should see this as the first 7 lines
of the file:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-S" data-lang="S"><span class="line"><span class="cl"><span class="n">gText_Birch_Welcome</span><span class="o">::</span> <span class="o">@</span> <span class="m">82</span><span class="n">C897B</span>
</span></span><span class="line"><span class="cl"> 	<span class="n">.string</span> <span class="s">&#34;Hi! Sorry to keep you waiting!\p&#34;</span>
</span></span><span class="line"><span class="cl">	<span class="n">.string</span> <span class="s">&#34;Welcome to the world of POKéMON!\p&#34;</span>
</span></span><span class="line"><span class="cl">	<span class="n">.string</span> <span class="s">&#34;My name is BIRCH.\p&#34;</span>
</span></span><span class="line"><span class="cl">	<span class="n">.string</span> <span class="s">&#34;But everyone calls me the POKéMON\n&#34;</span>
</span></span><span class="line"><span class="cl">	<span class="n">.string</span> <span class="s">&#34;PROFESSOR.\p&#34;</span>
</span></span><span class="line"><span class="cl">	<span class="n">.string</span> <span class="s">&#34;$&#34;</span>
</span></span></code></pre></div><p>From this sample, we can determine that the <code>\p</code> character indicates
when user input, typically the A button, is needed to go to the next
line of dialogue, and that the <code>\n</code> simply indicates a line break in
the dialogue.</p>
<p>In our case all we have to do here is to change the second line to</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-S" data-lang="S"><span class="line"><span class="cl">    <span class="n">.string</span> <span class="s">&#34;Hey all you cool cats and kittens!\p&#34;</span>
</span></span></code></pre></div><p>Now save the file, compile the rom, start a new game in your emulator
and you should see:</p>
<video autoplay loop muted playsinline aria-label='Prof. Birch&#39;s modified speech' style="width: 100%; height: auto;">
    <source src="/captures/birch_speech_remix.mp4" type="video/mp4">
    
    <p> Your browser does not support video. </p>
</video>
<p>Congratulations, you&rsquo;ve just made your first romhack ! Take a look at the
other lines of dialogue in the file, try to find other files that contain
NPC dialogue, modify them and see what happens.</p>
<p>Next time, we will explore how to customize the Littleroot Town map !</p>
]]></content:encoded></item></channel></rss>