{"id":531,"date":"2014-11-03T13:15:40","date_gmt":"2014-11-03T13:15:40","guid":{"rendered":"http:\/\/astoryisnotatree.net\/?p=531"},"modified":"2020-05-06T20:13:21","modified_gmt":"2020-05-06T20:13:21","slug":"bw-exercise-2-a-monstrous-narrative","status":"publish","type":"post","link":"https:\/\/r6g.ad7.mwp.accessdomain.com\/?p=531","title":{"rendered":"Games from Nothing: Black &#038; White Exercise #2 \u2014 A Monstrous Narrative"},"content":{"rendered":"<p>When I first approached the prompt for this exercise, I was stumped as to how I could possibly represent all the different events of the narrative using only simple shapes and little color. After tinkering with the code for quite some time, I ended up with a simple game that relies\u00a0timer-driven animation to portray a narrative.<\/p>\n<p>I drew my ideal narration in my sketchbook:<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/IMG_0055.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-1646\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/IMG_0055-225x300.jpg\" alt=\"IMG_0055\" width=\"501\" height=\"668\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/IMG_0055-225x300.jpg 225w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/IMG_0055-768x1024.jpg 768w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/IMG_0055-624x832.jpg 624w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/IMG_0055.jpg 1536w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/IMG_0054-e1418286683342.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-1647\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/IMG_0054-e1418286683342-300x225.jpg\" alt=\"IMG_0054\" width=\"501\" height=\"376\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/IMG_0054-e1418286683342-300x225.jpg 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/IMG_0054-e1418286683342-1024x768.jpg 1024w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/IMG_0054-e1418286683342-624x468.jpg 624w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/IMG_0054-e1418286683342.jpg 2048w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/a><\/p>\n<p>And from there, I made this game:<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.38.53-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-532\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.38.53-AM-300x176.png\" alt=\"Screen Shot 2014-11-03 at 7.38.53 AM\" width=\"499\" height=\"293\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.38.53-AM-300x176.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.38.53-AM-1024x603.png 1024w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.38.53-AM-624x367.png 624w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.38.53-AM.png 1136w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/a><\/p>\n<p>State 1: Day Turns to Night<\/p>\n<p>The game actually begins with a totally white sky, rather than a light grey sky (as in the picture), but it&#8217;s been hard to screen shot the white &#8220;day&#8221; background before it begins to change color. Each second after the game starts, the sky darkens until, on the fourth second, the sky reaches its darkest grey.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.36.11-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-533\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.36.11-AM-300x173.png\" alt=\"Screen Shot 2014-11-03 at 7.36.11 AM\" width=\"501\" height=\"289\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.36.11-AM-300x173.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.36.11-AM-1024x592.png 1024w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.36.11-AM-624x360.png 624w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.36.11-AM.png 1250w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/a><\/p>\n<p>State 2: The Monster and the Moon Appear<\/p>\n<p>After the sky has stopped changing color &#8211; and also after the fourth second &#8211; the Monster appears from within the village, and the Moon descends from the sky. You can just see the Moon peaking out of the top of the screen in this picture, and the curve of the Monster traveling through the village.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.49.53-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-535\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.49.53-AM-300x175.png\" alt=\"Screen Shot 2014-11-03 at 7.49.53 AM\" width=\"499\" height=\"291\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.49.53-AM-300x175.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.49.53-AM-1024x598.png 1024w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.49.53-AM-624x364.png 624w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.49.53-AM.png 1271w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/a><\/p>\n<p>State 3: The Moon Becomes Moveable<\/p>\n<p>Once the Monster has reached a certain point on the screen (about two thirds of the way across), it stops. The Moon also stops after its vertical descent. Once both objects have stopped moving, the player can move the Moon by touching the screen. This change is a timed event that happens sixteen seconds after the game begins. I&#8217;ve debated how to make the player aware of the movability of the Moon, but right now I&#8217;m relying on the player to find out just by playing with the interface a bit.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.59.54-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-537\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.59.54-AM-300x176.png\" alt=\"Screen Shot 2014-11-03 at 7.59.54 AM\" width=\"505\" height=\"296\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.59.54-AM-300x176.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.59.54-AM-1024x601.png 1024w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.59.54-AM-624x366.png 624w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.59.54-AM.png 1132w\" sizes=\"auto, (max-width: 505px) 100vw, 505px\" \/><\/a><\/p>\n<p>State 4: The Monster Eats the Moon &amp; Breathes Fire<\/p>\n<p>If the player moves the Moon inside of the Monster, both the Monster and the Moon become red, and the Monster spits out a fireball, which moves towards the village.<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.59.38-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-538\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.59.38-AM-300x178.png\" alt=\"Screen Shot 2014-11-03 at 7.59.38 AM\" width=\"502\" height=\"298\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.59.38-AM-300x178.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.59.38-AM-1024x610.png 1024w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.59.38-AM-624x371.png 624w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-7.59.38-AM.png 1134w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/a><\/p>\n<p>State 5: The Monster Burns the Village<\/p>\n<p>Once the fireball reaches the village, the village buildings become red as the fireball passes through them&#8230;<\/p>\n<p><a href=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-8.03.45-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-539\" src=\"http:\/\/astoryisnotatree.net\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-8.03.45-AM-300x177.png\" alt=\"Screen Shot 2014-11-03 at 8.03.45 AM\" width=\"495\" height=\"292\" srcset=\"https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-8.03.45-AM-300x177.png 300w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-8.03.45-AM-1024x606.png 1024w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-8.03.45-AM-624x369.png 624w, https:\/\/r6g.ad7.mwp.accessdomain.com\/wp-content\/uploads\/2014\/11\/Screen-Shot-2014-11-03-at-8.03.45-AM.png 1127w\" sizes=\"auto, (max-width: 495px) 100vw, 495px\" \/><\/a><\/p>\n<p>&#8230;until all the village is on fire, and the game is over.<\/p>\n<p>Eventually, I&#8217;d like to add more fireballs that each burn a building in the village separately, and a better win state. This prompt really inspired me to create a story, and I think that ultimately drove\u00a0me to focus more on coding an\u00a0animation, rather than a true game.\u00a0I have four classes in the game: a Monster class, a Fireball class, a Moon class, and a Village class. I think that my next step will be to use the classes to create more objects and obstacles that make the goal of burning the village harder to accomplish.<\/p>\n<p>-Annie<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When I first approached the prompt for this exercise, I was stumped as to how I could possibly represent all the different events of the narrative using only simple shapes and little color. After tinkering with the code for quite&#8230;<\/p>\n","protected":false},"author":29,"featured_media":1646,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[16,105],"class_list":["post-531","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-games-from-nothing","tag-black-white-exercises","tag-monster-game","wpcat-5-id"],"_links":{"self":[{"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/posts\/531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=531"}],"version-history":[{"count":5,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/posts\/531\/revisions"}],"predecessor-version":[{"id":14005,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/posts\/531\/revisions\/14005"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=\/wp\/v2\/media\/1646"}],"wp:attachment":[{"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/r6g.ad7.mwp.accessdomain.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}