![\"\"](\"https:\/\/www.puppygames.net\/blog\/wp-content\/uploads\/revenge-of-the-titans-cooling-tower-1.jpg\" "\\"revenge-of-the-titans-cooling-tower-1\\"")
<\/p>\nHere’s an example of the colouring system we’re using in Titan Attacks 2 – Revenge of the Titans. In this case as applied to a cooling tower, a player building that cools down your overheating turrets. It’s a common problem. Building a load of these little fellas nearby though can increase their fire rate.<\/p>\n
Here we have the cooling tower as it looks with colours applied in two schemes – night and desert. On the left we have the Colour Diddler which lets us fidddle away with the level palettes as the game is running. Neat eh?<\/p>\n
<\/p>\n
So how this all work then?<\/p>\n
The cooling tower is a collection of static sprites, animated sprites and emitters. The sprites, mostly white, can be coloured by the level palettes, and then this colour is affected by an attenuation colour and % the further from the center of the level they are – black in the case of the nighttime level, and a subtle red tint for the desert level colour scheme. Here’s the various sprites…<\/p>\n
![\"\"](\"https:\/\/www.puppygames.net\/blog\/wp-content\/uploads\/revenge-of-the-titans-cooling-tower-23.jpg\" "\\"revenge-of-the-titans-cooling-tower-2\\"")
<\/p>\n
First of all we have the base. This defines the bounds of the building making it easier to tell where the player can build things and distinguishes player buildings from other stuff going on. All buildings and monsters and trees and things are drawn from the front, but the map is actually viewed from above which is perhaps a bit of an odd way to do things, but it’s a lot easier to draw poo like that. The next sprite, the shadow, also helps in making the flat front-on sprite look like it’s sitting on the ground and not just floating about in space.<\/p>\n
That little black rectangle sits behind the main sprite animation. Inbetween these is an emitter that pumps out steam. This way the steam looks more like it’s coming out of the cooling tower rather than just from behind it. It’s hardly noticeable really. Maybe got a bit carried away there.<\/p>\n
The main sprite, unlike the others, has two colours applied to it – a top and a bottom colour – applied as a gradient to the sprite. The top colour is specific to buildings, and the bottom is a general ‘floor fog’ colour which is applied to almost everything – buildings and monsters and trees etc. This helps in the illusion of the flat building existing in the world space wotsit. It also means if buildings overlap vertically there will be a bit of colour difference between them, making it easier to tell them apart.<\/p>\n
Next up is the overlay sprite – this is about 50% transparent and is not affected by the level’s attenuation, meaning it’ll seem like it’s a bit glowy or reflective. Then finally on top of all that is the little glowing light animation that is synched up with the pumpy animation of the tower and the steam emitter. This sprite is neither coloured nor affected by the attenuation colour, so it’s always going to be a bright orangey red light thang.<\/p>\n
…and if you’re really interested or just having trouble sleeping here’s how the cooling tower appearance is defined in xml…<\/p>\n
Phew. Any questions? Anyone still awake?<\/p>\n","protected":false},"excerpt":{"rendered":" Here’s an example of the colouring system we’re using in Titan Attacks 2 – Revenge of the Titans. In this case as applied to a cooling tower, a player building that cools down your overheating turrets. It’s a common problem. Building a load of these little fellas nearby though can increase their fire rate. Here […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[18],"class_list":["post-178","post","type-post","status-publish","format-standard","hentry","category-diary","tag-revenge-of-the-titans"],"_links":{"self":[{"href":"https:\/\/www.puppygames.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/178"}],"collection":[{"href":"https:\/\/www.puppygames.net\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.puppygames.net\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.puppygames.net\/blog\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.puppygames.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=178"}],"version-history":[{"count":9,"href":"https:\/\/www.puppygames.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/178\/revisions"}],"predecessor-version":[{"id":195,"href":"https:\/\/www.puppygames.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/178\/revisions\/195"}],"wp:attachment":[{"href":"https:\/\/www.puppygames.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.puppygames.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.puppygames.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<sprite layer=\"4\" sublayer=\"1\" colored=\"floor\" attenuated=\"true\" image=\"spriteimage.generic.2x2.base.01\"\/>
\n<sprite layer=\"4\" sublayer=\"2\" colored=\"shadow\" attenuated=\"true\" image=\"spriteimage.generic.cooling.ground.01\"\/>
\n<sprite layer=\"5\" sublayer=\"1\" colored=\"buildings\" attenuated=\"true\" animation=\"generic.cooling.back.animation\"\/>
\n<emitter offset=\"25,0\" emitter=\"steam.burst.emitter\"\/>
\n<sprite layer=\"5\" sublayer=\"3\" bottomColored=\"floor-fog\" topColored=\"buildings\" attenuated=\"true\" animation=\"generic.cooling.animation\"\/>
\n<sprite layer=\"5\" sublayer=\"4\" colored=\"buildings-alt\" attenuated=\"false\" animation=\"generic.cooling.top.animation\"\/>
\n<sprite layer=\"5\" sublayer=\"5\" animation=\"generic.cooling.glow.animation\"\/><\/code><\/p>\n