{"id":3102,"date":"2014-12-06T14:06:23","date_gmt":"2014-12-06T14:06:23","guid":{"rendered":"http:\/\/positech.co.uk\/cliffsblog\/?p=3102"},"modified":"2014-12-06T14:06:23","modified_gmt":"2014-12-06T14:06:23","slug":"on-programming-decent-2d-game-explosions","status":"publish","type":"post","link":"https:\/\/www.positech.co.uk\/cliffsblog\/2014\/12\/06\/on-programming-decent-2d-game-explosions\/","title":{"rendered":"On programming decent 2D Game Explosions"},"content":{"rendered":"<p>Getting explosions right is HARD. Explosions are (obviously) a big part of <a href=\"http:\/\/www.gratuitousspacebattles2.com\">Gratuitous Space Battles 2<\/a>, and I want the GBS2 ones to be better than GBS1 by a noticeable margin. They already are, but I&#8217;m aiming for greater heights. Currently the explosions look like this:<\/p>\n<p><a href=\"http:\/\/positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3103\" src=\"http:\/\/positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp1.jpg\" alt=\"exp1\" width=\"550\" height=\"355\" srcset=\"https:\/\/www.positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp1.jpg 550w, https:\/\/www.positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp1-300x193.jpg 300w, https:\/\/www.positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp1-317x204.jpg 317w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<p>And this: (smaller ones)<\/p>\n<p><a href=\"http:\/\/positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3104\" src=\"http:\/\/positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp2.jpg\" alt=\"exp2\" width=\"550\" height=\"316\" srcset=\"https:\/\/www.positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp2.jpg 550w, https:\/\/www.positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp2-300x172.jpg 300w, https:\/\/www.positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp2-317x182.jpg 317w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<p>Which is &#8216;ok&#8217;, but I&#8217;d like them to be better, which means spending a lot of time looking at video of space battles (oh the things I have to suffer), freeze framing, stroking my chin and looking at code. There are a number of things people assume about this task which I&#8217;ve found not to be true.<\/p>\n<p>Assumption #1: You can do it all on the graphics card. Not so, because different people have different cards, whose capabilities may vary dramatically. I want GSB2 to be playable on a standard laptop, not demand a DX11 driver and card. Plus a lot of these techniques assume Directx11, and you then need a DX9 backup for people who still have windows XP anyway so&#8230;.<\/p>\n<p>Assumption #2: it&#8217;s simply about the number of particles. Not so. I have a fairly efficient particle system that can handle lots, but I have found more does not always equal better. In short, it doesn&#8217;t seem to be how many particles you have, but how they interact, what textures they use, and how they move. Render modes (additive vs normal) also factors in a lot.<\/p>\n<p>Generally, my approach has been to have a bunch of particle emitters all clustered together into one explosion. I have some big black clouds that build slowly, some firey small particles that fade out quickly (additive ones), some flame-texture particles that are additive, and some not additive, and I render them in a deliberate order and it looks like the stuff you see above, which is fine, up to a point.<\/p>\n<p>The thing I haven&#8217;t managed to really convey is the &#8216;billowing&#8217; effect of an explosion. Here are some of my reference images&#8230;<\/p>\n<p><a href=\"http:\/\/positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/ex3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3105\" src=\"http:\/\/positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/ex3.jpg\" alt=\"ex3\" width=\"550\" height=\"367\" srcset=\"https:\/\/www.positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/ex3.jpg 550w, https:\/\/www.positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/ex3-300x200.jpg 300w, https:\/\/www.positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/ex3-317x211.jpg 317w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><a href=\"http:\/\/positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp4.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3106\" src=\"http:\/\/positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp4.jpg\" alt=\"exp4\" width=\"550\" height=\"268\" srcset=\"https:\/\/www.positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp4.jpg 550w, https:\/\/www.positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp4-300x146.jpg 300w, https:\/\/www.positech.co.uk\/cliffsblog\/wp-content\/uploads\/2014\/12\/exp4-317x154.jpg 317w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<p>This sort of thing is very hard to get right &#8216;in-motion&#8217; because it involves some 3D movement of frankly millions of particles, so obviously the first question is how on earth to &#8216;cheat at it&#8217; and get it looking vaguely right. In Gratuitous Stank Battles I tried a complex system where particles had #heat&#8217; assigned to them, and cross-faded between white hot to black smoke (and different textures) over time. it looked ok, but probably not enough difference to warrant a bucket of extra code that was associated with it.<\/p>\n<p>I am starting to think that decent explosions are 90% physics, 10% graphics. What I need is some more complex control over the movement of individual particles, rather than just more of them. With the explosion at the bottom, I&#8217;m thinking that there are a bunch of different &#8216;focal points&#8217; of the explosion, different &#8216;billow-centers&#8217;, if you will. There has obviously been a central &#8216;bang&#8217; and this has &#8216;spawned&#8217; a bunch of airborne &#8216;flame emitters&#8217; which continue to create new burst of flames which are created, balloon up, and then down and dissipate.<\/p>\n<p>Currently I have zero support for such a system. An explosion is a single event, which may have a bunch of timed emitters with it, but it has a single focal point. Secondly, a particle has a single growth variable, which means it either is spawned and gets bigger over time, or it gets smaller over time. What I may need is the capacity to associate a timed sinewave with the size of a particle.<\/p>\n<p>So my latest explosion todo list (fun stuff I do when I&#8217;m not busy) is something like this&#8230;<\/p>\n<p>Add support to particle configs for a &#8216;sinewave-based&#8217; growth variable, with starting size, max size and duration.<\/p>\n<p>Create a new class of object called a GUI_SubExplosion, which can be spawned by an explosion and drift off from the central point slowly over time. Have that sub-explosion itself contain a list of particle emitters that it manages.<\/p>\n<p>Should be worth a try anyway&#8230; In the meantime here is the <a href=\"http:\/\/youtu.be\/xmcs4ChG62M\">latest big pharma blog video<\/a>. and a <a href=\"http:\/\/www.showmethegames.com\/2014\/12\/05\/banished-simcity\/\">nice article on showmethegames about banished<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Getting explosions right is HARD. Explosions are (obviously) a big part of Gratuitous Space Battles 2, and I want the GBS2 ones to be better than GBS1 by a noticeable margin. They already are, but I&#8217;m aiming for greater heights. Currently the explosions look like this: And this: (smaller ones) Which is &#8216;ok&#8217;, but I&#8217;d<\/p>\n<p class=\"text-right\"><span class=\"screen-reader-text\">Continue Reading&#8230; On programming decent 2D Game Explosions<\/span><a class=\"btn btn-secondary continue-reading\" href=\"https:\/\/www.positech.co.uk\/cliffsblog\/2014\/12\/06\/on-programming-decent-2d-game-explosions\/\">Continue Reading&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[119,4],"tags":[],"class_list":["post-3102","post","type-post","status-publish","format-standard","hentry","category-gsb2","category-programming"],"_links":{"self":[{"href":"https:\/\/www.positech.co.uk\/cliffsblog\/wp-json\/wp\/v2\/posts\/3102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.positech.co.uk\/cliffsblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.positech.co.uk\/cliffsblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.positech.co.uk\/cliffsblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.positech.co.uk\/cliffsblog\/wp-json\/wp\/v2\/comments?post=3102"}],"version-history":[{"count":2,"href":"https:\/\/www.positech.co.uk\/cliffsblog\/wp-json\/wp\/v2\/posts\/3102\/revisions"}],"predecessor-version":[{"id":3108,"href":"https:\/\/www.positech.co.uk\/cliffsblog\/wp-json\/wp\/v2\/posts\/3102\/revisions\/3108"}],"wp:attachment":[{"href":"https:\/\/www.positech.co.uk\/cliffsblog\/wp-json\/wp\/v2\/media?parent=3102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.positech.co.uk\/cliffsblog\/wp-json\/wp\/v2\/categories?post=3102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.positech.co.uk\/cliffsblog\/wp-json\/wp\/v2\/tags?post=3102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}