{"id":151,"date":"2013-11-14T06:04:02","date_gmt":"2013-11-14T06:04:02","guid":{"rendered":"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/?p=151"},"modified":"2013-11-14T06:04:02","modified_gmt":"2013-11-14T06:04:02","slug":"interactive-drawing-that-game-that-everyone-knows","status":"publish","type":"post","link":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/interactive-drawing-that-game-that-everyone-knows\/","title":{"rendered":"Interactive Drawing &#8211; That Game that Everyone Knows"},"content":{"rendered":"<p>Hello again. So I just finished my first Project right now, had a lot of difficulty on some parts but I think I managed to get it working.<\/p>\n<p>First, as I am not particularly an artist, I decided to get some assets and edit them in photoshop for this project. I got the character assets from this site:<\/p>\n<p>http:\/\/www.spriters-resource.com\/snes\/supermariobros3\/sheet\/4296\/<\/p>\n<p>this person made a sheet for Mario animation.<\/p>\n<p><a href=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/mariosprites.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-152\" alt=\"mariosprites\" src=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/mariosprites-300x197.png\" width=\"300\" height=\"197\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/mariosprites-300x197.png 300w, https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/mariosprites.png 944w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Yes, I am trying to make Mario. This will be fun&#8230;<\/p>\n<p>Next I got the sound files from youtube:<\/p>\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=uwrtCbIJV_0\">Classic VGM 100: Super Mario Bros. &#8211; Overworld (Main Theme)<\/a><\/p>\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=kOXheWLWvyU\">Super Mario Bros. 3 Sound Effects<\/a><\/p>\n<p>and used Audacity to extract the parts I actually needed.<\/p>\n<p><a href=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/audacity.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-153\" alt=\"audacity\" src=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/audacity-300x165.png\" width=\"300\" height=\"165\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/audacity-300x165.png 300w, https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/audacity.png 948w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>After all the Photoshop-ing I am ready to work on the actual coding.<\/p>\n<p><a href=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/sprites.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-154\" alt=\"sprites\" src=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/sprites-300x101.png\" width=\"300\" height=\"101\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/sprites-300x101.png 300w, https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/sprites-1024x346.png 1024w, https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/sprites.png 1059w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>On load of the patch, I have a loadbang that creates the window, preload\/downloads the images, and loads the sounds. Here is what the loadbang for sound looks like:<\/p>\n<p><a href=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/loadsound.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-158\" alt=\"loadsound\" src=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/loadsound-300x179.png\" width=\"300\" height=\"179\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/loadsound-300x179.png 300w, https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/loadsound.png 779w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>You can see that I used relative paths for both of them. This is to make sure the files could be loaded even when the folder is copied to a different computer. Also, loadbang automatically starts and loops the ambient loop, but does not start the jump sound because the jump sound should only play once when the player presses the jump button.<\/p>\n<p>Now, let us look at the jump portion of my code:<\/p>\n<p><a href=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/jump.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-160\" alt=\"jump\" src=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/jump-296x300.png\" width=\"296\" height=\"300\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/jump-296x300.png 296w, https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/jump.png 453w\" sizes=\"(max-width: 296px) 100vw, 296px\" \/><\/a><\/p>\n<p>At the top, I have a sel object. When the player presses the jump button, a toggle will turn 1. So using the sel object, I can bang only when the player presses the button. Since I only want the jump sound play once for every jump, I have a oneshot object to ensure it only plays once. The counter at the middle starts from 0 goes up to 30 and down back to 0. This value is used to change the y position of the character up and down, as if it were jumping. Once the value goes back down to zero, I send a bang to the clear object at the top which resets the oneshot object so that it could play the jump sound once again.<\/p>\n<p>I wanted the character to have its moving animation whenever the player holds down left or right. This was one of the parts that was slightly challenging because for our previous assignment we only learned how to do oneshot animations and looping animations, not animations that move on keydown and stop on keyup. Here is a small portion of my code:<\/p>\n<p><a href=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/toggle.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-162\" alt=\"toggle\" src=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/toggle.png\" width=\"194\" height=\"183\" \/><\/a><\/p>\n<p>This code is where I am getting toggles from keypresses of the left and right arrow keys. Whenever they get a 1, they start the metro which is used for starting the animation and for moving the character position either left or right. From some google-ing I figured that I could just stop the metro at any point using the stop object, so whenever the sel is equal to 0 I decided I would send a stop to the metro. This worked fine.<\/p>\n<p>At this point I only had 1 background with the character moving back and forth through the screen. This was fine, but I wanted the background to change once in a while. Here is how I did it:<\/p>\n<p><a href=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/backswitch.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-164\" alt=\"backswitch\" src=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/backswitch-300x163.png\" width=\"300\" height=\"163\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/backswitch-300x163.png 300w, https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/backswitch.png 703w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>When going off screen either left or right, I kept track of the number of times the player did that. From that value, I used the mod object so that a number between 0 and 2 gets output. Finally, I used a sel object to hide\/unhide the corresponding background image (here I have 3, hence I used mod 3). Going right I basically kept adding to the sum, and going left I subtracted from the sum value.<\/p>\n<p>Once all of this is done, making the controller is quite easy. Four buttons and an &#8220;Earth&#8221; and done!<\/p>\n<p><a href=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/IMG_0615.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-165\" alt=\"IMG_0615\" src=\"http:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/IMG_0615-300x224.jpg\" width=\"300\" height=\"224\" srcset=\"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/IMG_0615-300x224.jpg 300w, https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-content\/uploads\/2013\/11\/IMG_0615.jpg 914w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>And here is the demo video of the actual thing:<\/p>\n<p><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"627\" height=\"353\" src=\"https:\/\/www.youtube.com\/embed\/yz4jpgN2urY?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation\"><\/iframe><\/span><\/p>\n<p>Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello again. So I just finished my first Project right now, had a lot of difficulty on some parts but I think I managed to get it working. First, as I am not particularly an artist, I decided to get some assets and edit them in photoshop for this project. I got the character assets [&hellip;]<\/p>\n","protected":false},"author":23,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[1],"tags":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p42QdX-2r","_links":{"self":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-json\/wp\/v2\/posts\/151"}],"collection":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-json\/wp\/v2\/comments?post=151"}],"version-history":[{"count":9,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-json\/wp\/v2\/posts\/151\/revisions"}],"predecessor-version":[{"id":168,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-json\/wp\/v2\/posts\/151\/revisions\/168"}],"wp:attachment":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-json\/wp\/v2\/media?parent=151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-json\/wp\/v2\/categories?post=151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/IMGD3200_B13\/wp-json\/wp\/v2\/tags?post=151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}