<?xml version="1.0" encoding="UTF-8" standalone="yes"?><oembed><version><![CDATA[1.0]]></version><provider_name><![CDATA[Hanami Devlog]]></provider_name><provider_url><![CDATA[https://electromagneticproject.wordpress.com]]></provider_url><author_name><![CDATA[push start to begin]]></author_name><author_url><![CDATA[https://electromagneticproject.wordpress.com/author/pushstarttobegin/]]></author_url><title><![CDATA[Rough Inventory Menu&nbsp;Design]]></title><type><![CDATA[link]]></type><html><![CDATA[<p>Based on the designs I&#8217;ve been looking at from previous games, here&#8217;s my template design for the Hanami Inventory menu:</p>
<p><a href="https://electromagneticproject.files.wordpress.com/2012/03/hanami-inventory.jpg"><img loading="lazy" data-attachment-id="1071" data-permalink="https://electromagneticproject.wordpress.com/2012/03/11/rough-inventory-menu-design/hanami-inventory/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/03/hanami-inventory.jpg" data-orig-size="1781,806" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="Hanami Inventory" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/03/hanami-inventory.jpg?w=300" data-large-file="https://electromagneticproject.files.wordpress.com/2012/03/hanami-inventory.jpg?w=1024" src="https://electromagneticproject.files.wordpress.com/2012/03/hanami-inventory.jpg?w=640&#038;h=289" alt="" title="Hanami Inventory" width="640" height="289" class="aligncenter size-full wp-image-1071" srcset="https://electromagneticproject.files.wordpress.com/2012/03/hanami-inventory.jpg?w=640&amp;h=289 640w, https://electromagneticproject.files.wordpress.com/2012/03/hanami-inventory.jpg?w=1277&amp;h=578 1277w, https://electromagneticproject.files.wordpress.com/2012/03/hanami-inventory.jpg?w=150&amp;h=68 150w, https://electromagneticproject.files.wordpress.com/2012/03/hanami-inventory.jpg?w=300&amp;h=136 300w, https://electromagneticproject.files.wordpress.com/2012/03/hanami-inventory.jpg?w=768&amp;h=348 768w, https://electromagneticproject.files.wordpress.com/2012/03/hanami-inventory.jpg?w=1024&amp;h=463 1024w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>The window design has been greatly inspired by the simple blue menu windows in <a href="http://en.wikipedia.org/wiki/Final_Fantasy_Tactics_Advance" target="_blank">Final Fantasy Tactics Advance</a>. I&#8217;ve emphasised titles by giving them a strong background rather than using bold text. At the moment, the type face is an image which I have drawn. I&#8217;m currently using <a href="http://dejavu-fonts.org/wiki/Main_Page" target="_blank">DejaVu Sans</a> in all my development work and for the text in my HUD, but I might change this later. The typography here has been custom made to fit best into the space, so I feel that it&#8217;s the best option.</p>
<p>The <em>Petal progress</em> diagram is very rough and unfinished. This is for a feature that I haven&#8217;t implemented yet, where collecting five petals in each level will result in the collection of one full flower. This information is displayed entirely visually, like the Triforce diagram in <a>The Legend of Zelda</a> or the Orb collection diagram in <a href="http://en.wikipedia.org/wiki/Final_Fantasy_(video_game)" target="_blank">Final Fantasy</a>. I&#8217;ve taken a lot of layout ideas from the original Final Fantasy menu system. The only interactive parts of the menu are on the left hand side, while the right hand side contains information about items and the character. However, instead of linking to pages of lists of items, I&#8217;ve used a more visual approach similar to the one used in <a href="http://en.wikipedia.org/wiki/Harvest_Moon:_More_Friends_of_Mineral_Town#Harvest_Moon:_More_Friends_of_Mineral_Town" target="_blank">Harvest Moon More Friends of Mineral Town</a>. The player can scroll through each collected item in the three available slots and see information about each on the right hand side, where there is a designated blank space for written information.</p>
<p>The health diagram in the right-hand column is similar to the health bar in the HUD, so that player can see which stats it correlates to. This is currently fully interactive, so when the player eats a sushi item one coin is restored to its slot.</p>
<p>In Game Maker, information on each item in the inventory is stored in a <a href="http://en.wikipedia.org/wiki/Array_data_structure#Two-dimensional_arrays" target="_blank">2D array</a>. This stores information about the name, description and start amount of each item (in that order!)</p>
<p><a href="https://electromagneticproject.files.wordpress.com/2012/03/array.jpg"><img loading="lazy" data-attachment-id="1075" data-permalink="https://electromagneticproject.wordpress.com/2012/03/11/rough-inventory-menu-design/array/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/03/array.jpg" data-orig-size="782,296" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="Array" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/03/array.jpg?w=300" data-large-file="https://electromagneticproject.files.wordpress.com/2012/03/array.jpg?w=782" src="https://electromagneticproject.files.wordpress.com/2012/03/array.jpg?w=640&#038;h=242" alt="" title="Array" width="640" height="242" class="aligncenter size-full wp-image-1075" srcset="https://electromagneticproject.files.wordpress.com/2012/03/array.jpg?w=640&amp;h=242 640w, https://electromagneticproject.files.wordpress.com/2012/03/array.jpg?w=150&amp;h=57 150w, https://electromagneticproject.files.wordpress.com/2012/03/array.jpg?w=300&amp;h=114 300w, https://electromagneticproject.files.wordpress.com/2012/03/array.jpg?w=768&amp;h=291 768w, https://electromagneticproject.files.wordpress.com/2012/03/array.jpg 782w" sizes="(max-width: 640px) 100vw, 640px" /></a><br />
I have a script called <em>itemAdd</em> which is called every time a piece of sushi is acquired. This tells the engine to draw the correct sprite into the menu when the &#8220;S&#8221; key is pressed on the menu, ie </p>
<p><em>if global.inventory[0,2] &gt; 0<br />
//here, [0,2] refers to that specific information in the array</em></p>
<p><a href="https://electromagneticproject.files.wordpress.com/2012/03/array-2.jpg"><img loading="lazy" data-attachment-id="1078" data-permalink="https://electromagneticproject.wordpress.com/2012/03/11/rough-inventory-menu-design/array-2/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/03/array-2.jpg" data-orig-size="782,296" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="Array 2" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/03/array-2.jpg?w=300" data-large-file="https://electromagneticproject.files.wordpress.com/2012/03/array-2.jpg?w=782" src="https://electromagneticproject.files.wordpress.com/2012/03/array-2.jpg?w=640&#038;h=242" alt="" title="Array 2" width="640" height="242" class="aligncenter size-full wp-image-1078" srcset="https://electromagneticproject.files.wordpress.com/2012/03/array-2.jpg?w=640&amp;h=242 640w, https://electromagneticproject.files.wordpress.com/2012/03/array-2.jpg?w=150&amp;h=57 150w, https://electromagneticproject.files.wordpress.com/2012/03/array-2.jpg?w=300&amp;h=114 300w, https://electromagneticproject.files.wordpress.com/2012/03/array-2.jpg?w=768&amp;h=291 768w, https://electromagneticproject.files.wordpress.com/2012/03/array-2.jpg 782w" sizes="(max-width: 640px) 100vw, 640px" /></a><br />
Another draw code tells the engine to draw the strings of text for <em>name</em> and <em>description</em> in its designated place on the screen. This is a general code where the figure indexing each individual item is replaced by &#8220;s&#8221;, meaning this one code will cover all instances where &#8220;s&#8221; is a figure.</p>
<p><a href="https://electromagneticproject.files.wordpress.com/2012/03/array-3.jpg"><img loading="lazy" data-attachment-id="1079" data-permalink="https://electromagneticproject.wordpress.com/2012/03/11/rough-inventory-menu-design/array-3/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/03/array-3.jpg" data-orig-size="782,296" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="Array 3" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/03/array-3.jpg?w=300" data-large-file="https://electromagneticproject.files.wordpress.com/2012/03/array-3.jpg?w=782" src="https://electromagneticproject.files.wordpress.com/2012/03/array-3.jpg?w=640&#038;h=242" alt="" title="Array 3" width="640" height="242" class="aligncenter size-full wp-image-1079" srcset="https://electromagneticproject.files.wordpress.com/2012/03/array-3.jpg?w=640&amp;h=242 640w, https://electromagneticproject.files.wordpress.com/2012/03/array-3.jpg?w=150&amp;h=57 150w, https://electromagneticproject.files.wordpress.com/2012/03/array-3.jpg?w=300&amp;h=114 300w, https://electromagneticproject.files.wordpress.com/2012/03/array-3.jpg?w=768&amp;h=291 768w, https://electromagneticproject.files.wordpress.com/2012/03/array-3.jpg 782w" sizes="(max-width: 640px) 100vw, 640px" /></a><br />
The left and right keys are programmed to direct a &#8220;highlight&#8221; sprite above each slot in the inventory in order to select an item. This is simply achieved by programming an X and Y coordinate for each time the button is pressed. When an item is selected using the &#8220;X&#8221; button, this code controls the processes of restoring 1 point of health and removing the item from the menu.</p>
<p><a href="https://electromagneticproject.files.wordpress.com/2012/03/array-4.jpg"><img loading="lazy" data-attachment-id="1081" data-permalink="https://electromagneticproject.wordpress.com/2012/03/11/rough-inventory-menu-design/array-4/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/03/array-4.jpg" data-orig-size="782,296" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="Array 4" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/03/array-4.jpg?w=300" data-large-file="https://electromagneticproject.files.wordpress.com/2012/03/array-4.jpg?w=782" src="https://electromagneticproject.files.wordpress.com/2012/03/array-4.jpg?w=640&#038;h=242" alt="" title="Array 4" width="640" height="242" class="aligncenter size-full wp-image-1081" srcset="https://electromagneticproject.files.wordpress.com/2012/03/array-4.jpg?w=640&amp;h=242 640w, https://electromagneticproject.files.wordpress.com/2012/03/array-4.jpg?w=150&amp;h=57 150w, https://electromagneticproject.files.wordpress.com/2012/03/array-4.jpg?w=300&amp;h=114 300w, https://electromagneticproject.files.wordpress.com/2012/03/array-4.jpg?w=768&amp;h=291 768w, https://electromagneticproject.files.wordpress.com/2012/03/array-4.jpg 782w" sizes="(max-width: 640px) 100vw, 640px" /></a><br />
To make sure the player cannot restore more than 5 points of health, I&#8217;ve programmed all figures above 5 to equal 5.</p>
<p>Lastly, I have a code which pauses the game by disabling all other objects and drawing a static background based on the objects on screen when the inventory was opened. This is based on a process I used for a pause menu in my last project, where I create a state called <em>pauseon</em> which is true when the menu is open and false when the menu is closed and the game is running.</p>
<p><a href="https://electromagneticproject.files.wordpress.com/2012/03/array-5.jpg"><img loading="lazy" data-attachment-id="1085" data-permalink="https://electromagneticproject.wordpress.com/2012/03/11/rough-inventory-menu-design/array-5/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/03/array-5.jpg" data-orig-size="782,296" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="Array 5" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/03/array-5.jpg?w=300" data-large-file="https://electromagneticproject.files.wordpress.com/2012/03/array-5.jpg?w=782" src="https://electromagneticproject.files.wordpress.com/2012/03/array-5.jpg?w=640&#038;h=242" alt="" title="Array 5" width="640" height="242" class="aligncenter size-full wp-image-1085" srcset="https://electromagneticproject.files.wordpress.com/2012/03/array-5.jpg?w=640&amp;h=242 640w, https://electromagneticproject.files.wordpress.com/2012/03/array-5.jpg?w=150&amp;h=57 150w, https://electromagneticproject.files.wordpress.com/2012/03/array-5.jpg?w=300&amp;h=114 300w, https://electromagneticproject.files.wordpress.com/2012/03/array-5.jpg?w=768&amp;h=291 768w, https://electromagneticproject.files.wordpress.com/2012/03/array-5.jpg 782w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>Screenshots:<br />
<a href="https://electromagneticproject.files.wordpress.com/2012/03/scr1.jpg"><img loading="lazy" data-attachment-id="1087" data-permalink="https://electromagneticproject.wordpress.com/2012/03/11/rough-inventory-menu-design/scr1/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/03/scr1.jpg" data-orig-size="1366,768" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="scr1" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/03/scr1.jpg?w=300" data-large-file="https://electromagneticproject.files.wordpress.com/2012/03/scr1.jpg?w=1024" src="https://electromagneticproject.files.wordpress.com/2012/03/scr1.jpg?w=640&#038;h=359" alt="" title="scr1" width="640" height="359" class="aligncenter size-full wp-image-1087" srcset="https://electromagneticproject.files.wordpress.com/2012/03/scr1.jpg?w=640&amp;h=359 640w, https://electromagneticproject.files.wordpress.com/2012/03/scr1.jpg?w=1277&amp;h=718 1277w, https://electromagneticproject.files.wordpress.com/2012/03/scr1.jpg?w=150&amp;h=84 150w, https://electromagneticproject.files.wordpress.com/2012/03/scr1.jpg?w=300&amp;h=169 300w, https://electromagneticproject.files.wordpress.com/2012/03/scr1.jpg?w=768&amp;h=432 768w, https://electromagneticproject.files.wordpress.com/2012/03/scr1.jpg?w=1024&amp;h=576 1024w" sizes="(max-width: 640px) 100vw, 640px" /></a><br />
<a href="https://electromagneticproject.files.wordpress.com/2012/03/scr2.jpg"><img loading="lazy" data-attachment-id="1088" data-permalink="https://electromagneticproject.wordpress.com/2012/03/11/rough-inventory-menu-design/scr2/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/03/scr2.jpg" data-orig-size="1366,768" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="scr2" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/03/scr2.jpg?w=300" data-large-file="https://electromagneticproject.files.wordpress.com/2012/03/scr2.jpg?w=1024" src="https://electromagneticproject.files.wordpress.com/2012/03/scr2.jpg?w=640&#038;h=359" alt="" title="scr2" width="640" height="359" class="aligncenter size-full wp-image-1088" srcset="https://electromagneticproject.files.wordpress.com/2012/03/scr2.jpg?w=640&amp;h=359 640w, https://electromagneticproject.files.wordpress.com/2012/03/scr2.jpg?w=1277&amp;h=718 1277w, https://electromagneticproject.files.wordpress.com/2012/03/scr2.jpg?w=150&amp;h=84 150w, https://electromagneticproject.files.wordpress.com/2012/03/scr2.jpg?w=300&amp;h=169 300w, https://electromagneticproject.files.wordpress.com/2012/03/scr2.jpg?w=768&amp;h=432 768w, https://electromagneticproject.files.wordpress.com/2012/03/scr2.jpg?w=1024&amp;h=576 1024w" sizes="(max-width: 640px) 100vw, 640px" /></a><br />
<a href="https://electromagneticproject.files.wordpress.com/2012/03/scr3.jpg"><img loading="lazy" data-attachment-id="1086" data-permalink="https://electromagneticproject.wordpress.com/2012/03/11/rough-inventory-menu-design/scr3/" data-orig-file="https://electromagneticproject.files.wordpress.com/2012/03/scr3.jpg" data-orig-size="1366,768" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="scr3" data-image-description="" data-medium-file="https://electromagneticproject.files.wordpress.com/2012/03/scr3.jpg?w=300" data-large-file="https://electromagneticproject.files.wordpress.com/2012/03/scr3.jpg?w=1024" src="https://electromagneticproject.files.wordpress.com/2012/03/scr3.jpg?w=640&#038;h=359" alt="" title="scr3" width="640" height="359" class="aligncenter size-full wp-image-1086" srcset="https://electromagneticproject.files.wordpress.com/2012/03/scr3.jpg?w=640&amp;h=359 640w, https://electromagneticproject.files.wordpress.com/2012/03/scr3.jpg?w=1277&amp;h=718 1277w, https://electromagneticproject.files.wordpress.com/2012/03/scr3.jpg?w=150&amp;h=84 150w, https://electromagneticproject.files.wordpress.com/2012/03/scr3.jpg?w=300&amp;h=169 300w, https://electromagneticproject.files.wordpress.com/2012/03/scr3.jpg?w=768&amp;h=432 768w, https://electromagneticproject.files.wordpress.com/2012/03/scr3.jpg?w=1024&amp;h=576 1024w" sizes="(max-width: 640px) 100vw, 640px" /></a><br />
You can see the new system work in my latest Devlog Video here!</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe class='youtube-player' width='640' height='360' src='https://www.youtube.com/embed/PEmk6e3apW8?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en&#038;autohide=2&#038;wmode=transparent' allowfullscreen='true' style='border:0;' sandbox='allow-scripts allow-same-origin allow-popups allow-presentation'></iframe></span>
]]></html><thumbnail_url><![CDATA[https://electromagneticproject.files.wordpress.com/2012/03/hanami-inventory.jpg?fit=440%2C330]]></thumbnail_url><thumbnail_width><![CDATA[]]></thumbnail_width><thumbnail_height><![CDATA[]]></thumbnail_height></oembed>