{"id":168,"date":"2009-04-27T13:38:57","date_gmt":"2009-04-27T18:38:57","guid":{"rendered":"http:\/\/www.vertigogaming.net\/blog\/?p=168"},"modified":"2009-04-27T13:38:57","modified_gmt":"2009-04-27T18:38:57","slug":"kablooey-shadows-color-filters","status":"publish","type":"post","link":"https:\/\/www.vertigogaming.net\/blog\/?p=168","title":{"rendered":"Kablooey! Shadows & Color Filters"},"content":{"rendered":"

With every game I make I’m actively trying to experiment with different graphical features. With The Winter Solstice, it was the first attempt at using particles for both explosions and background images. With greenTech, it was applying visual overlays to graphically distort the display. And now there’s Kablooey, which I’m attempting both color filters and shadow effects.
\n
\nI’ve had a lot of graphical assets left over from the now-canceled Helicopter Cacophony 3 game, but visually it wasn’t graphically pleasing to the eyes.
\n<\/p>\n

<\/a><\/p>\n


\nThe new game I’m working on will use these assets in a different way, but what I wanted to make sure of first was to somehow enhance the visuals and tie them in all together in a coherent visual display. I did this by using a color filter over the entire game, much like greenTech used the green display screen.
\n<\/p>\n

<\/a><\/p>\n


\nThis isn’t just for the background though. Watch as the color filter is applied to the downtown section of the city:
\n<\/p>\n

<\/a><\/p>\n


\n<\/p>\n

<\/a><\/p>\n


\nThe color tones are subtle, but it creates a pleasing look. Take a view of the blue glass building, how it’s a bit orange at the bottom but blue at the top. It suggests an illumination from the bottom grass to the blue sky. Neato.
\n
\nStill, the image lacks any kind of separation…it looks more like cardboard cutouts than buildings. It was time to practice with shadows.
\n
\nThere are two main kinds of shadows: prebaked, and dymanic. Because dynamic shadows can topple computers easily with resource requirements, it was an easy decision to go with prebaked. Prebaked is a term used when you just need some shadows in a location, but aren’t planning to move the lightsource or interact with it (in our case, the sun). Dynamic would create shadows in real time, changing wherever the light source is (imagine a swinging bulb in a dim room). The prebaked lighting works great in Kablooey because there’s no need for real time light changes or any background elements changing on the fly.
\n
\nThere are two ways I’ve done shadows: literally prebaked using Photoshop and using Game Maker’s engine to provide shadows. Using Photoshop I created shadows and lights on buildings to create an illusion of maybe cloud covering overhead, or a wear and tear factor on a building. The same method was used in Sim City 4 with great results.
\n


\n<\/center>
\n
\nSo now that that’s done, it’s time to use Game Maker to supply the rest of the shadows. Some are actual real-time blendings of sprites, but most are simply blackened versions of sprites overlaid with an alpha of 0.2 or so. Check out the way the shadows bring some depth to an image without being immediately apparent:
\n

\n<\/center>
\n
\nNotice how the buildings become more separated and defined, and notice the palm tree giving out three unique shadows. Theoretically the shadows don’t make sense from a global light perspective, and that’s OK, as you can get away with a lot more in 2D than you could in 3D (in 3D these shadows wouldn’t make any sense and look almost ridiculous).
\n
\nNow take a look at the final blending of shadows and lighting (note especially the scaffolding on the small blue tower with shadows, as it was barely noticeable at all in the non-shadowed version):
\n<\/p>\n

<\/a><\/p>\n


\nIt’s been a blast (heh) working on Kablooey, and I look forward to unveiling the game for the first time with a teaser trailer sometime next month. Woo!<\/p>\n","protected":false},"excerpt":{"rendered":"

With every game I make I’m actively trying to experiment with different graphical features. With The Winter Solstice, it was the first attempt at using particles for both explosions and background images. With greenTech, it was applying visual overlays to graphically distort the display. And now there’s Kablooey, which I’m attempting both color filters and shadow effects.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[1,23],"tags":[],"class_list":["post-168","post","type-post","status-publish","format-standard","hentry","category-game-maker","category-kablooey"],"_links":{"self":[{"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=168"}],"version-history":[{"count":9,"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/168\/revisions"}],"predecessor-version":[{"id":177,"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/168\/revisions\/177"}],"wp:attachment":[{"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vertigogaming.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}