{"id":506,"date":"2022-03-25T03:29:00","date_gmt":"2022-03-25T03:29:00","guid":{"rendered":"https:\/\/projects.etc.cmu.edu\/susdev\/?p=506"},"modified":"2022-03-28T04:59:48","modified_gmt":"2022-03-28T04:59:48","slug":"week-9-improvement","status":"publish","type":"post","link":"https:\/\/projects.etc.cmu.edu\/susdev\/week-9-improvement\/","title":{"rendered":"Week 9 Improvement"},"content":{"rendered":"\n<p>For this week, which is our critical moment of both finalizing our gameplay as well as the playtesting, we are utilizing our game visual effect and the remaining bugs. We also finish the final environment design for the game play, which will be like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"869\" height=\"563\" src=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/City.png\" alt=\"\" class=\"wp-image-509\" srcset=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/City.png 869w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/City-300x194.png 300w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/City-768x498.png 768w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/City-500x324.png 500w\" sizes=\"(max-width: 869px) 100vw, 869px\" \/><\/figure>\n\n\n\n<p>Our programmers and designers finished writing the tutorial round for the game so that our guests can have a better understanding of the gameplay during our playtest.<\/p>\n\n\n\n<h2 class=\"has-vivid-cyan-blue-color has-text-color has-extra-large-font-size\">UI and Game design<\/h2>\n\n\n\n<p>During the tutorial and the gameplay, programmers re-coded the function of hovering cards for visual purposes. When the player is looking for card\u2019s information, the cards will scale up and show their description. In addition, when the player places the mouse on the card, the SDGs on the top will be lit, which indicates that the cards will relate to them.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"580\" src=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.02-PM-1024x580.png\" alt=\"\" class=\"wp-image-521\" srcset=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.02-PM-1024x580.png 1024w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.02-PM-300x170.png 300w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.02-PM-768x435.png 768w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.02-PM-1536x869.png 1536w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.02-PM-900x509.png 900w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.02-PM-500x283.png 500w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.02-PM.png 1590w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Qiujie_W9.mp4\"><\/video><\/figure>\n\n\n\n<p>For the designing process, we adjust minor issues of the cards\u2019 costing and effect in the game. We also finished designing the start menu and the end menu of the game, which like the picture showed:<\/p>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"579\" src=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-60-1024x579.png\" alt=\"\" class=\"wp-image-507\" srcset=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-60-1024x579.png 1024w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-60-300x170.png 300w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-60-768x434.png 768w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-60-1536x868.png 1536w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-60-2048x1158.png 2048w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-60-900x509.png 900w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-60-500x283.png 500w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>The start menu include the &#8220;start button&#8221; and &#8220;about&#8221; button. We want to briefly introduce the SDGS  and our team in the about page.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"577\" src=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-62-1024x577.png\" alt=\"\" class=\"wp-image-508\" srcset=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-62-1024x577.png 1024w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-62-300x169.png 300w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-62-768x433.png 768w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-62-1536x866.png 1536w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-62-2048x1154.png 2048w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-62-900x507.png 900w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/sus_ui-62-500x282.png 500w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>The end page shows the effort that the users did <br>during the game<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"319\" src=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.07-PM-1024x319.png\" alt=\"\" class=\"wp-image-522\" srcset=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.07-PM-1024x319.png 1024w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.07-PM-300x93.png 300w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.07-PM-768x239.png 768w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.07-PM-1536x478.png 1536w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.07-PM-2048x638.png 2048w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.07-PM-900x280.png 900w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/Screen-Shot-2022-03-27-at-8.47.07-PM-500x156.png 500w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"has-vivid-cyan-blue-color has-text-color has-extra-large-font-size\">UX update<\/h2>\n\n\n\n<p>We also update the wireframe based on the improvement that we did in last two weeks to let UI designer and programmers better understand the game flow.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"15962\" height=\"10546\" src=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/wireframe.jpg\" alt=\"\" class=\"wp-image-524\"\/><\/figure>\n\n\n\n<h2 class=\"has-vivid-cyan-blue-color has-text-color has-extra-large-font-size\"><strong>Programmer<\/strong><\/h2>\n\n\n\n<p>For our visual effect during the gameplay, our programmers write several functions to indicate the status of the indexes to show how players are affecting the city.&nbsp;<\/p>\n\n\n\n<ol><li>Random Building Generator: it will randomly generate different citizens buildings, including unique facilities like government, hospitals, police stations, power plants, waste disposal plants and so on.\u00a0<\/li><li>Auto-walking Generator: Our citizen characters will be automatically generated with different animation to show the status of life expectancy and social stabilities.<\/li><li>Card Hierarchy<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/3.27gtr.mp4\"><\/video><\/figure>\n\n\n\n<p>Last but not least, our programmers also finalized the collection system in the game, which will show every policy card that players had played. It will include &#8211; the description of the policy cards, the SDGs related to each card, and the effect of each policy card.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img src=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/collection2-601x1024.png\" alt=\"\" class=\"wp-image-518\" width=\"423\" height=\"721\" srcset=\"https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/collection2-601x1024.png 601w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/collection2-176x300.png 176w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/collection2-768x1308.png 768w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/collection2-902x1536.png 902w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/collection2-900x1533.png 900w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/collection2-500x852.png 500w, https:\/\/projects.etc.cmu.edu\/susdev\/wp-content\/uploads\/2022\/03\/collection2.png 1126w\" sizes=\"(max-width: 423px) 100vw, 423px\" \/><\/figure><\/div>\n\n\n\n<p><a href=\"https:\/\/drive.google.com\/file\/d\/1UXjdcsBlJIksnmjIHvIl06_qIuHWZQqM\/view?usp=sharing\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>For this week, which is our critical moment of both finalizing our gameplay as well as the playtesting, we are utilizing our [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":515,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/projects.etc.cmu.edu\/susdev\/wp-json\/wp\/v2\/posts\/506"}],"collection":[{"href":"https:\/\/projects.etc.cmu.edu\/susdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projects.etc.cmu.edu\/susdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/susdev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/susdev\/wp-json\/wp\/v2\/comments?post=506"}],"version-history":[{"count":6,"href":"https:\/\/projects.etc.cmu.edu\/susdev\/wp-json\/wp\/v2\/posts\/506\/revisions"}],"predecessor-version":[{"id":528,"href":"https:\/\/projects.etc.cmu.edu\/susdev\/wp-json\/wp\/v2\/posts\/506\/revisions\/528"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/susdev\/wp-json\/wp\/v2\/media\/515"}],"wp:attachment":[{"href":"https:\/\/projects.etc.cmu.edu\/susdev\/wp-json\/wp\/v2\/media?parent=506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/susdev\/wp-json\/wp\/v2\/categories?post=506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projects.etc.cmu.edu\/susdev\/wp-json\/wp\/v2\/tags?post=506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}