{"id":460,"date":"2022-02-13T20:42:07","date_gmt":"2022-02-14T01:42:07","guid":{"rendered":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/?p=460"},"modified":"2022-02-13T20:42:07","modified_gmt":"2022-02-14T01:42:07","slug":"sprites-flappy-drev","status":"publish","type":"post","link":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/tedrevitch\/sprites-flappy-drev\/","title":{"rendered":"Sprites &#8211; Flappy Drev"},"content":{"rendered":"\n<p>To get started making sprites for my game, I went straight to Piksel.com and started making my tile sets for the background.  I made boards and then boards with a blue line and boards with a red line.  I made different sky tiles as well so it won&#8217;t be the same cloud formation over and over in the game.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.19.57-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"857\" height=\"571\" data-id=\"462\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.19.57-PM.png\" alt=\"\" class=\"wp-image-462\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.19.57-PM.png 857w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.19.57-PM-800x533.png 800w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.19.57-PM-768x512.png 768w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.19.57-PM-450x300.png 450w\" sizes=\"auto, (max-width: 857px) 100vw, 857px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.20.16-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"505\" data-id=\"461\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.20.16-PM.png\" alt=\"\" class=\"wp-image-461\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.20.16-PM.png 750w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.20.16-PM-446x300.png 446w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<p>Next, I was able to make my simple character (me).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.21.33-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"263\" height=\"254\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.21.33-PM.png\" alt=\"\" class=\"wp-image-463\" \/><\/a><figcaption>I was able to put the player and the tile map in Unity.  The tile map needed to be spliced up just right like how we had done it in class.  I was running into some issues and it wasn&#8217;t lining up perfectly and the player&#8217;s z-position wouldn&#8217;t change based on where it was in the hierarchy for some reason.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.22.50-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"327\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.22.50-PM-1024x327.png\" alt=\"\" class=\"wp-image-464\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.22.50-PM-1024x327.png 1024w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.22.50-PM-800x256.png 800w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.22.50-PM-768x245.png 768w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.22.50-PM-600x192.png 600w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-11-at-11.22.50-PM.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Next, I created sprites for the scoreboard and the &#8220;pipes&#8221; for the game which are designed to look like the goal posts of a net on the ice.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-7.26.38-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"645\" data-id=\"489\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-7.26.38-PM-1024x645.png\" alt=\"\" class=\"wp-image-489\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-7.26.38-PM-1024x645.png 1024w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-7.26.38-PM-800x504.png 800w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-7.26.38-PM-768x483.png 768w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-7.26.38-PM-477x300.png 477w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-7.26.38-PM.png 1360w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-8.05.49-PM.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" data-id=\"490\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-8.05.49-PM-1024x575.png\" alt=\"\" class=\"wp-image-490\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-8.05.49-PM-1024x575.png 1024w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-8.05.49-PM-800x449.png 800w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-8.05.49-PM-768x431.png 768w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-8.05.49-PM-535x300.png 535w, https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-8.05.49-PM.png 1486w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<p>The pipes will be at different heights like in Flappy Bird to make the game have difficulty and so it does not get too repetitive.  The scoreboard is empty now, but will be the score counter in the game.  It resembles a jumbotron from rinks.<\/p>\n\n\n\n<p>My plan is to incorporate other things in the game that make it differ from Flappy Bird even more, possibly some items to collect like pucks or sticks.  I plan on adding these in throughout this week if I feel the game needs them.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>To get started making sprites for my game, I went straight to Piksel.com and started making my tile sets for the background. I made boards and then boards with a blue line and boards with a red line. I made different sky tiles as well so it won&#8217;t be the same cloud formation over and&#8230; <\/p>\n<div class=\"link-more\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/tedrevitch\/sprites-flappy-drev\/\">Read More<\/a><\/div>\n","protected":false},"author":255,"featured_media":490,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":"","footnotes":""},"categories":[22],"tags":[31,30,32,29],"class_list":["post-460","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sprites","tag-2d","tag-flappy-drev","tag-game","tag-sprites"],"jetpack_featured_media_url":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/Screen-Shot-2022-02-13-at-8.05.49-PM.png","_links":{"self":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/users\/255"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/comments?post=460"}],"version-history":[{"count":2,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/460\/revisions"}],"predecessor-version":[{"id":491,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/460\/revisions\/491"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/media\/490"}],"wp:attachment":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/media?parent=460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/categories?post=460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/tags?post=460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}