{"id":710,"date":"2022-02-02T10:00:00","date_gmt":"2022-02-02T16:00:00","guid":{"rendered":"https:\/\/genxtralife.com\/heropath\/?p=710"},"modified":"2025-09-12T23:36:29","modified_gmt":"2025-09-13T04:36:29","slug":"first-sights-first-steps","status":"publish","type":"post","link":"https:\/\/heropath.com\/blog\/first-sights-first-steps\/","title":{"rendered":"Heropath Dev Log #1 &#8211; First Sights, First Steps"},"content":{"rendered":"\n<p>I&#8217;m excited to share my first development diary entry for Heropath. Thanks to Chris DeLeon&#8217;s course <a href=\"https:\/\/codeyourfirstgame.com\/\">&#8216;Code Your First Game&#8217;<\/a> I&#8217;ve gotten an introduction to game coding. His course starts off with pong, then breakout, followed by a car racer, and then ends with a graphic adventure game. The graphic adventure game would provide the launching point to create the style of game that I intend for Heropath to be, a top-down strategy-adventure.<\/p>\n\n\n\n<p>DeLeon&#8217;s code would provide four critical mechanics: 1) Draws a grid map with different objects on it, 2) Move the player&#8217;s character around, 3) The character can pick-up items located on the map, 4) Use those items to pass obstacles on the map. Below you can see a screen shot of DeLeon&#8217;s adventure game.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/genxtralife.com\/heropath\/wp-content\/uploads\/2022\/01\/deleon-warrior-adventure-0.9.png\"><img loading=\"lazy\" decoding=\"async\" width=\"801\" height=\"600\" src=\"https:\/\/genxtralife.com\/heropath\/wp-content\/uploads\/2022\/01\/deleon-warrior-adventure-0.9.png\" alt=\"\" class=\"wp-image-729\" srcset=\"https:\/\/heropath.com\/blog\/wp-content\/uploads\/2022\/01\/deleon-warrior-adventure-0.9.png 801w, https:\/\/heropath.com\/blog\/wp-content\/uploads\/2022\/01\/deleon-warrior-adventure-0.9-300x225.png 300w, https:\/\/heropath.com\/blog\/wp-content\/uploads\/2022\/01\/deleon-warrior-adventure-0.9-768x575.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/a><figcaption class=\"wp-element-caption\">DeLeon&#8217;s adventure game<\/figcaption><\/figure>\n\n\n\n<p>One of the first things I did to make DeLeon&#8217;s game my own was update the graphics. I did this for three reasons:  1) It was super easy to do, 2) Gave me a sense of momentum, 3) Gave me enthusiasm seeing aesthetics that resonates with me. <\/p>\n\n\n\n<p>The graphics come from an outstanding <a href=\"https:\/\/www.deviantart.com\/splendidland\/art\/Atari-Adventure-Redux-303752811\">homage\/update to Atari 2600 Adventure<\/a> and are an inspiration for Heropath.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/genxtralife.com\/heropath\/wp-content\/uploads\/2022\/01\/billows-heropath-0.0.0.1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/genxtralife.com\/heropath\/wp-content\/uploads\/2022\/01\/billows-heropath-0.0.0.1.png\" alt=\"\" class=\"wp-image-730\" srcset=\"https:\/\/heropath.com\/blog\/wp-content\/uploads\/2022\/01\/billows-heropath-0.0.0.1.png 800w, https:\/\/heropath.com\/blog\/wp-content\/uploads\/2022\/01\/billows-heropath-0.0.0.1-300x225.png 300w, https:\/\/heropath.com\/blog\/wp-content\/uploads\/2022\/01\/billows-heropath-0.0.0.1-768x576.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/a><figcaption class=\"wp-element-caption\">Heropath First Sights Screenshot<\/figcaption><\/figure>\n\n\n\n<p>The above screenshot is the modest first sights and first steps of Heropath. This alpha demo is an exceedingly simple puzzle game with a fantasy theme.  You can play Heropath version 0.0.0.2 with a web browser and keyboard here:<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/heropath.com\/demo\/alpha-v0.0.0.2\/heropath.htm\" target=\"_blank\">https:\/\/heropath.com\/demo\/alpha-v0.0.0.2\/heropath.htm<\/a>.<\/p>\n\n\n\n<p>Instructions: You control Sir Bloc with the keyboard arrow keys. You need to collect the keys to unlock the doors to get the chalice.<\/p>\n\n\n\n<p>Version 0.0.0.2 currently has the following features:<\/p>\n\n\n\n<p>&#8211; Load grid map<br>&#8211; Load character<br>&#8211; Load objects (keys, doors, chalice)<br>&#8211; Logic for character movement<br>&#8211; Logic for key pickup and door unlock<br>&#8211; Logic for capturing chalice resets map<br>&#8211; Updated graphics<br>&#8211; Updated demonstration map<br>&#8211; Updated on-screen instructions<\/p>\n\n\n\n<p>Updates for Heropath can be found at the&nbsp;<a href=\"https:\/\/genxtralife.com\/heropath\/about\/versions-history\/\" data-type=\"page\" data-id=\"1521\">version history<\/a> and will include improvements and new features such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fix collision detection as the walls and doors feel squishy which contradicts their appearance.<\/li>\n\n\n\n<li>Add a nice UI with a character traits panel.<\/li>\n\n\n\n<li>Have characters carry the key graphically.<\/li>\n\n\n\n<li>Have the doors be replaced by an open door graphic instead of vanishing.<\/li>\n\n\n\n<li>Add a monster that chases the character.<\/li>\n\n\n\n<li>Add a weapon to defeat the monster.<\/li>\n\n\n\n<li>Add encumbrance so when the character picks up an item the character&#8217;s movement slows down.<\/li>\n\n\n\n<li>Have characters be able to drop the carried key and the object remains on the screen. This changes the item from a grid item that vanishes to an object that has some persistence and is interacted with.<\/li>\n\n\n\n<li>Expand the setting with new maps.<\/li>\n\n\n\n<li>Add win and end screens.<\/li>\n\n\n\n<li>Add a &#8216;possession&#8217; mechanic that will centre the plot and story.<\/li>\n\n\n\n<li>Explore variations of game development fundamentals like camera-usage and time (real-time vs turn-based).<\/li>\n<\/ul>\n\n\n\n<p>As I think about these improvements, I am considering adopting a <a href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_game_engines\">game development engine<\/a> like Godot or Unity to implement these things. While I can learn how to do this in JavaScript it will take a longer time, time that could be better spent developing skills with one of those engines.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m excited to share my first development diary entry for Heropath. Thanks to Chris DeLeon&#8217;s course &#8216;Code Your First Game&#8217; I&#8217;ve gotten an introduction to game coding. His course starts off with pong, then breakout, followed by a car racer, and then ends with a graphic adventure game. The graphic adventure game would provide the &hellip; <a href=\"https:\/\/heropath.com\/blog\/first-sights-first-steps\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Heropath Dev Log #1 &#8211; First Sights, First Steps&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":730,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1],"tags":[18,40,26,25],"class_list":["post-710","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev-diary","category-news","tag-game-development","tag-heropath-dev-log","tag-heropath-open-alpha-demo","tag-javascript"],"_links":{"self":[{"href":"https:\/\/heropath.com\/blog\/wp-json\/wp\/v2\/posts\/710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/heropath.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/heropath.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/heropath.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/heropath.com\/blog\/wp-json\/wp\/v2\/comments?post=710"}],"version-history":[{"count":0,"href":"https:\/\/heropath.com\/blog\/wp-json\/wp\/v2\/posts\/710\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/heropath.com\/blog\/wp-json\/wp\/v2\/media\/730"}],"wp:attachment":[{"href":"https:\/\/heropath.com\/blog\/wp-json\/wp\/v2\/media?parent=710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/heropath.com\/blog\/wp-json\/wp\/v2\/categories?post=710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/heropath.com\/blog\/wp-json\/wp\/v2\/tags?post=710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}