{"id":1021,"date":"2014-12-01T07:33:09","date_gmt":"2014-12-01T07:33:09","guid":{"rendered":"http:\/\/astoryisnotatree.net\/?p=1021"},"modified":"2020-05-06T20:01:54","modified_gmt":"2020-05-06T20:01:54","slug":"exercise-4-fire-box","status":"publish","type":"post","link":"https:\/\/astoryisnotatree.net\/?p=1021","title":{"rendered":"Games from Nothing: Black & White Exercise #4 \u2014 Fire Box"},"content":{"rendered":"

\"Screenshot_2014-11-11-18-00-14\"<\/a><\/p>\n

Fire Box is a game based on a simple particle system. The player is presented with a white box, and every tap will move the lid slightly to the right. The idea of having only one object on the screen is influenced by Krug’s “Don’t make me think.” While many other objects can fit into the screen to serve as decorations, they might also distract the player.<\/p>\n

The sliding effect is also based on the same principle. While no instruction is provided, it is important to give immediate feedback to lead the player. As Krug says”We don’t figure out how things work, we muddle through,” in this case the sliding of the lid should be especially\u00a0visible for the first tap. However, because the player also need time to visually “catch up” with the action, it should\u00a0take several taps before the firework starts; therefore the latter moves\u00a0should be smaller.<\/p>\n

\"Screenshot_2014-11-11-18-00-20\"<\/a><\/p>\n

When lid is open, a firework will burst out of the box, accompanied by a cracking sound.<\/p>\n

\"Screenshot_2014-11-11-18-00-24\"<\/p>\n

When untapped, the firework is generated in light, tinge colors. When touched, it will change into more vibrant colors.<\/p>\n

\"Screenshot_2014-11-11-18-00-32\"<\/a><\/p>\n

\"Screenshot_2014-11-11-18-00-38\"<\/a><\/p>\n

The firework is created using a particle system that generates small circles that move away from their origin. While they are moving away, the alpha value decreases and thus makes the fading effect.<\/p>\n

In the coding process, the challenging step is not to make the firework, but actually to create the box.\u00a0 Because I wanted to create a 3D feeling using two dimensional shapes, I began with three parallelograms of different shades. When the lid slides to the right, two inner sides of the box will be shown. I have tried several ways to represent those two sides, but eventually found that a short grey line worked better than others.<\/p>\n

For future improvement, I would like to find a way to close the box and stop the firework. As this program is written without a background function in draw<\/em>, and the firework and the sliding effect all depends on no background, it becomes difficult to erase things already drawn on the screen. This, however, may require more advanced code.<\/p>\n","protected":false},"excerpt":{"rendered":"

Fire Box is a game based on a simple particle system. The player is presented with a white box, and every tap will move the lid slightly to the right. The idea of having only one object on the screen…<\/p>\n","protected":false},"author":23,"featured_media":1023,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[16,90],"class_list":["post-1021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-games-from-nothing","tag-black-white-exercises","tag-particle-systems","wpcat-5-id"],"_links":{"self":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/1021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1021"}],"version-history":[{"count":6,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/1021\/revisions"}],"predecessor-version":[{"id":13990,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/posts\/1021\/revisions\/13990"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=\/wp\/v2\/media\/1023"}],"wp:attachment":[{"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/astoryisnotatree.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}