{"id":558,"date":"2022-02-25T20:28:03","date_gmt":"2022-02-26T01:28:03","guid":{"rendered":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/?p=558"},"modified":"2025-09-21T22:02:29","modified_gmt":"2025-09-22T02:02:29","slug":"dont-crash-2d-animation-interactivity-qianlin-duanmu","status":"publish","type":"post","link":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/qduanmu\/dont-crash-2d-animation-interactivity-qianlin-duanmu\/","title":{"rendered":"Don\u2019t Crash 2D Animation &amp; \u00a0Interactivity \u2013 Qianlin Duanmu"},"content":{"rendered":"\r\n<p>In my original plan, I wanted to press the button to interact with the item. But now I decided to change it to interact with the item when the character is near the item.<\/p>\r\n\r\n\r\n\r\n<p>I have two electronic devices in my scene, a computer and a tablet.<\/p>\r\n\r\n\r\n\r\n<p>I made the on and off mode of them respectively.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full is-resized is-style-default\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/item-2.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-562 alignleft\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/item-2.gif\" alt=\"\" width=\"200\" height=\"400\" \/><\/a><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-566 alignnone\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/tablet.png\" alt=\"\" width=\"185\" height=\"185\" \/><\/figure>\r\n<p><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/computer.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-565 alignnone\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/computer.png\" alt=\"\" width=\"96\" height=\"192\" \/><\/a><\/p>\r\n<p>I also created two sets of animations for my characters, one walking away from the camera and one walking facing the camera.<\/p>\r\n<p><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/characterWD.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-568 aligncenter\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/characterWD.png\" alt=\"\" width=\"450\" height=\"225\" \/><\/a><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/characterWU.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-567 aligncenter\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/characterWU.png\" alt=\"\" width=\"440\" height=\"220\" \/><\/a><\/p>\r\n<p>&nbsp;<\/p>\r\n<p>This is a video of the gameplay. You can see that the screen lights up when the character walks over to those devices and turns off when the character leaves.<\/p>\r\n<p>At the bottom is the update of the SAN and POWER. Which are two important values in my game.<\/p>\r\n<div style=\"width: 1000px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-558-1\" width=\"1000\" height=\"757\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/video.mp4?_=1\" \/><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/video.mp4\">https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/video.mp4<\/a><\/video><\/div>\r\n<p>&nbsp;<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>In my original plan, I wanted to press the button to interact with the item. But now I decided to change it to interact with the item when the character is near the item. I have two electronic devices in my scene, a computer and a tablet. I made the on and off mode of&#8230; <\/p>\n<div class=\"link-more\"><a href=\"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/qduanmu\/dont-crash-2d-animation-interactivity-qianlin-duanmu\/\">Read More<\/a><\/div>\n","protected":false},"author":256,"featured_media":559,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":"","footnotes":""},"categories":[23],"tags":[8],"class_list":["post-558","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-2d-animation-interactivity","tag-qianlin-duanmu"],"jetpack_featured_media_url":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-content\/uploads\/sites\/22\/2022\/02\/item.gif","_links":{"self":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/558","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\/256"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/comments?post=558"}],"version-history":[{"count":7,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/558\/revisions"}],"predecessor-version":[{"id":1432,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/posts\/558\/revisions\/1432"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/media\/559"}],"wp:attachment":[{"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/media?parent=558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/categories?post=558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.joshuarosenstock.com\/teaching\/imgd-fundamentals-22\/wp-json\/wp\/v2\/tags?post=558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}