{"author_name":"Izzimach","cat":"October Challenge 2012","comments":[],"epoch":1350615120,"likes":2,"metadata":{"p_key":"51208","p_author":"Izzimach","p_authorkey":"11739","p_urlkey":"86901","p_title":"Tutorials and Alpha Bleeding","p_cat":"October Challenge 2012","p_event":"LD24","p_time":"1350615120","p_likes":"2","p_comments":"0","p_status":"UPD5","us_key":"11739","us_name":"Izzimach","us_username":"izzimach","event_start":"1345766400","event_key":"12","event_name":"LD24"},"text":"<p>&nbsp;<\/p>\n <p>So after stripping out some extra abilities and monsters, I have six monsters and six abilities. Now I need some levels! I have the randomly generated &#8220;sandbox&#8221; levels but I figure some tutorial levels would be good since the mechanics are non-trivial.<\/p>\n <p><a href=\"http:\/\/www.ludumdare.com\/compo\/2012\/10\/18\/tutorials-and-alpha-bleeding\/tutorial1screen\/\" rel=\"attachment wp-att-185907\"><img class=\"alignnone size-large wp-image-185907\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/Tutorial1Screen-550x435.jpg\" alt=\"\" width=\"550\" height=\"435\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/Tutorial1Screen-300x237.jpg 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/Tutorial1Screen-550x435.jpg 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/Tutorial1Screen.jpg 835w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n <p>Each tutorial only has a few monsters and\/or abilities to avoid user overload. I&#8217;m going with the &#8220;explain everything as if you were talking to a 5-year-old&#8221; method. Players can always just skip the tutorial levels and each level only takes about 30 seconds anyways so even if some players find it too easy they can quickly go on to harder levels.<\/p>\n <p><a href=\"http:\/\/www.ludumdare.com\/compo\/2012\/10\/18\/tutorials-and-alpha-bleeding\/tutorial1island\/\" rel=\"attachment wp-att-185913\"><img class=\"alignnone size-large wp-image-185913\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/Tutorial1Island-550x435.jpg\" alt=\"\" width=\"550\" height=\"435\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/Tutorial1Island-300x237.jpg 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/Tutorial1Island-550x435.jpg 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/Tutorial1Island.jpg 833w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n <p>One problem I had was with transparency of the icons; this wasn&#8217;t obvious when monster icons were placed on the bright buttons, but viewed over the dark help window they showed some obvious fringing&#8230;<\/p>\n <p><span id=\"more-185906\"><\/span><\/p>\n <p><a href=\"http:\/\/www.ludumdare.com\/compo\/2012\/10\/18\/tutorials-and-alpha-bleeding\/bad-alpha\/\" rel=\"attachment wp-att-185909\"><img class=\"alignnone size-large wp-image-185909\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/Bad-Alpha-550x90.png\" alt=\"\" width=\"550\" height=\"90\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/Bad-Alpha-300x49.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/Bad-Alpha-550x90.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/Bad-Alpha.png 780w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n <p>Can&#8217;t see it? Let me zoom that in for you<\/p>\n <p><a href=\"http:\/\/www.ludumdare.com\/compo\/2012\/10\/18\/tutorials-and-alpha-bleeding\/badalphazoom\/\" rel=\"attachment wp-att-185910\"><img class=\"alignnone size-full wp-image-185910\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/BadAlphaZoom.png\" alt=\"\" width=\"327\" height=\"300\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/BadAlphaZoom-300x275.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/BadAlphaZoom.png 327w\" sizes=\"(max-width: 327px) 100vw, 327px\" \/><\/a><\/p>\n <p>Yeah, that&#8217;s not good. It turns out my original drawing in Inkscape had the background set to transparent white instead of transparent black. Switching to transparent black helps a lot here:<\/p>\n <p><a href=\"http:\/\/www.ludumdare.com\/compo\/2012\/10\/18\/tutorials-and-alpha-bleeding\/goodalphazoom\/\" rel=\"attachment wp-att-185911\"><img class=\"alignnone size-full wp-image-185911\" src=\"http:\/\/www.ludumdare.com\/compo\/wp-content\/uploads\/2012\/10\/GoodAlphaZoom.png\" alt=\"\" width=\"339\" height=\"315\" \/><\/a><\/p>\n <p>The real fix to this problem is to use \u00a0<a title=\"Blog entry\" href=\"http:\/\/blogs.msdn.com\/b\/shawnhar\/archive\/2009\/11\/06\/premultiplied-alpha.aspx\">premultiplied alpha<\/a>\u00a0but I wasn&#8217;t about to start fiddling with that right now. In any case the background should be transparent black anyways since it is easier to work with in other contexts.<\/p>","time":"October 18th, 2012 9:52 pm","title":"Tutorials and Alpha Bleeding"}