<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Josh Talks Flash</title>
	<atom:link href="http://joshblog.net/feed/" rel="self" type="application/rss+xml" />
	<link>http://joshblog.net</link>
	<description>Josh Tynjala explores Flash, Flex, and ActionScript.</description>
	<lastBuildDate>Fri, 05 Mar 2010 19:08:28 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Addressing color blindness in game design</title>
		<link>http://joshblog.net/2010/02/18/addressing-color-blindness-in-game-design/</link>
		<comments>http://joshblog.net/2010/02/18/addressing-color-blindness-in-game-design/#comments</comments>
		<pubDate>Thu, 18 Feb 2010 22:38:54 +0000</pubDate>
		<dc:creator>Josh Tynjala</dc:creator>
				<category><![CDATA[Games]]></category>

		<guid isPermaLink="false">http://joshblog.net/?p=759</guid>
		<description><![CDATA[As a game developer, I try to be accommodating to all types of players. One thing I learned pretty quickly after I released my first web game, Chroma Circuit, is that choosing colors (especially in puzzle games) is very important and not a task to take lightly. Color blindness can easily make two colors that [...]]]></description>
			<content:encoded><![CDATA[<p>As a game developer, I try to be accommodating to all types of players. One thing I learned pretty quickly after I released my first web game, Chroma Circuit, is that choosing colors (especially in puzzle games) is very important and not a task to take lightly. Color blindness can easily make two colors that seem very different to me look almost indistinguishable to others. When gameplay only relies on being able to see the difference between colors, you&#8217;ve got a problem.</p>
<p>As soon as I received the first request from a color blind user who was having some trouble with Chroma Circuit, I realized my mistake in simply choosing an aesthetic mix of colors that looked good to my own eyes. Only a couple of the colors seemed similar to the color blind player, but those were enough to take all the fun out of the game, and to make it mostly unplayable. Right away, I started putting together a new palette for Chroma Circuit. I&#8217;m no expert in this area, but I do have some tools at my disposal that certainly helped me out.</p>
<div class="previewimage"><img src="http://joshblog.net/wp-content/uploads/photoshop-color-blind.jpg" alt="Photoshop color blindness modes"/></div>
<p>I think the first thing I did was take screenshots of a few levels from Chroma Circuit to load into Photoshop. Under the <strong>View</strong> menu, go to the <strong>Proof Setup</strong> sub-menu. This section lets you preview how your image will look in different color modes. For instance, designers can try CMYK to see how something might look a little different in print. You&#8217;ll find two options relevent to color blindness here, <strong>Color Blindness &mdash; Protanopia-type</strong> and <strong>Color Blindness &mdash; Deuteranopia-type</strong>.</p>
<div class="previewimage"><img src="http://joshblog.net/wp-content/uploads/color-blindness-spectrum.jpg" alt="Spectrum as seen with Protanopia-type and Deuteranopia-type color blindness"></div>
<p>A standard spectrum of hues is shown above. Each of the color blindness proof options is shown for comparison. If you have a moment, and want some more examples, grab screenshots of your favorite websites that use an interesting mix of colors, paste into Photoshop, and take a look at how they change for color blind visitors. Below, you can see Chroma Circuit through the eyes of someone with Deuteranopia-type color blindness. The top half displays a level with the original colors, and the bottom half shows the same level after I made changes to the palette.</p>
<div class="previewimage"><img src="http://joshblog.net/wp-content/uploads/chroma-circuit-color-blindness.jpg" alt="Screenshot of Chroma Circuit with color blindness mode enabled"/></div>
<p>To address the issue with Chroma Circuit, I took a pretty basic approach. I bumped up the contrast among each level&#8217;s colors as high as I could so that players could rely on brightness, in addition to hue. I generated the brightness levels based on the number of colors appearing in the level to achieve maximum contrast. If there were four colors required, I might set brightness values to 20%, 40%, 60%, and 80% brightness. If there were only three color needed, I would use 20%, 50% and 80%. The resulting colors weren&#8217;t particularly pretty, but they seemed to work well enough for the players who thanked me after I made the change (accessible in the Settings screen).</p>
<div class="previewimage"><img src="http://joshblog.net/wp-content/uploads/circuit-mobile-color-blindness.jpg" alt="Screenshot of Chroma Circuit mobile with Pattern Mode enabled"/></div>
<p>When I brought Chroma Circuit to mobile devices, I decided to take a different approach based on a suggestion from a color-blind player. Rather than creating a palette of high-contrast colors, I decided to augment my regular palette with a set of unique patterns for each color, if &#8220;Pattern Mode&#8221; is enabled.</p>
<div class="previewimage"><img src="http://joshblog.net/wp-content/uploads/qrossfire-symbols.jpg" alt="Screenshot of Qrossfire's symbols"/></div>
<p>With Qrossfire, another puzzle game I made, I tried adding something directly to the game, rather than making players enable it from the settings screen. In addition to colors, I created a set of visually unique symbols to display on the game board.</p>
<div class="previewimage"><img src="http://joshblog.net/wp-content/uploads/gridshock-mobile-patterns.jpg" alt="Screenshot of Gridshock with patterns mode enabled"/></div>
<p>In my most recent mobile game, Gridshock, I went back to making the patterns an option. Still, I feel like I integrated the patterns into the overall design better because I often &#8220;forgot&#8221; that I had the patterns enabled while testing. Additionally, Gridshock provided a new challenge that I think may have actually helped me design the patterns better. Since the timer bar shows the current color, and it&#8217;s a different shape than the squarish blocks in the grid, I had to ensure that the patterns were bold and flexible enough to display within differently-sized regions.</p>
<h4>More Real-World Examples</h4>
<p>Let&#8217;s take a look at some other games out there, including popular commercial titles to see how they handle (or mishandle) colors.</p>
<div class="previewimage"><img src="http://joshblog.net/wp-content/uploads/bioshock-color-blindness.jpg" alt="Bioshock screenshots"/></div>
<p>As I was writing this post, I was lucky to came across some complaints about BioShock 2, an example of a big commercial game that isn&#8217;t friendly with colors. Negative Gamer shows us <a href="http://negativegamer.com/2010/02/11/what-bioshock-2s-hacking-looks-like-if-youre-colour-blind/">What BioShock 2&#8217;s Hacking Looks Like if You’re Colour Blind</a>.</p>
<div class="previewimage"><img src="http://joshblog.net/wp-content/uploads/puzzle-fighter-color-blindness.jpg" alt="Screenshot of Puzzle Fighter with color blindness comparison"/></div>
<p>Ars Technica had an article about the <a href="http://arstechnica.com/gaming/news/2008/04/color-blind-gamers-common-developer-awareness-minimal.ars">developers being unaware of color blindness</a> a couple years ago. It includes the Puzzle Fighter screenshot comparison above, and many other examples described in the text, including first-person shooters, platformers, and more. Notably, New Super Mario Bros. doesn&#8217;t provide enough visual cues to easily tell the difference between Mario and Luigi.</p>
<div class="previewimage"><img src="http://joshblog.net/wp-content/uploads/bejeweled-shapes.jpg" alt="Screen shot of Bejeweled showing the different shapes of colored jewels"/></div>
<p>In Bejeweled, each gem not only has a different color, but a different shape as well. These shapes are integrated into the design, and they&#8217;re always on by default. Instantly playable by color blind gamers!</p>
<div class="previewimage"><img src="http://joshblog.net/wp-content/uploads/playing-cards-colors.jpg" alt="Image of playing cards"/></div>
<p>I know, I know, it&#8217;s not a video game, but standard playing cards are an excellent example of game pieces that can be used by color blind players. Though card games often rely on the difference between red and black suits, color blind players shouldn&#8217;t have a problem with that. You might have never noticed, but both red symbols (hearts and diamonds) come to a point at the bottom while the black symbols (spades and clubs) have that little flat handle. Moreover, the contrast between red and black should be more than enough to allow players to note the difference, even if red looks a little more brown or yellow to them.</p>
<h4>Don&#8217;t ruin the fun!</h4>
<p>We all hate when players to stop having fun in our games for any reason. Though we might not be able to make changes to support all disabilities, ones like color blindness are often very simple to address, and I think it&#8217;s worth the small amount of effort required. One needs not ruin the aesthetic experience to make it happen either. If you can integrate various helpful tweaks into your main design, great, but a simple setting that can be enabled only when needed can be an acceptable alternative. Don&#8217;t forget that Photoshop provides tools that can be a big help in the process.</p>
<p>If you can, try to remember color blindness early in the design process, so that you don&#8217;t have to spend time changing an existing design that you might already be happy with. Not only will it save you frustration, but it might allow you to find better solutions that might not be acceptable later in the process.</p>
]]></content:encoded>
			<wfw:commentRss>http://joshblog.net/2010/02/18/addressing-color-blindness-in-game-design/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Gridshock Mobile for iPhone (with Android on the way?)</title>
		<link>http://joshblog.net/2010/02/16/gridshock-mobile-for-iphone-with-android-on-the-way/</link>
		<comments>http://joshblog.net/2010/02/16/gridshock-mobile-for-iphone-with-android-on-the-way/#comments</comments>
		<pubDate>Tue, 16 Feb 2010 22:46:25 +0000</pubDate>
		<dc:creator>Josh Tynjala</dc:creator>
				<category><![CDATA[Games]]></category>

		<guid isPermaLink="false">http://joshblog.net/?p=762</guid>
		<description><![CDATA[My most recent mobile conversion, Gridshock, has gone live in the iPhone App Store. Unlike Chroma Circuit, Gridshock required some heavier fundamental layout changes, but I think I kept the difficulty balance and speed at a level that&#8217;s about the same as the original. I even took some time to add a couple new features.

First, [...]]]></description>
			<content:encoded><![CDATA[<p>My most recent mobile conversion, <a href="http://bowlerhatgames.com/mobile-games/gridshock/">Gridshock</a>, has gone live in the iPhone App Store. Unlike <a href="http://joshblog.net/2009/10/18/bowler-hat-games-phase-two-begins-chroma-circuit-for-iphone/">Chroma Circuit</a>, Gridshock required some heavier fundamental layout changes, but I think I kept the difficulty balance and speed at a level that&#8217;s about the same as the original. I even took some time to add a couple new features.</p>
<div class="previewimage"><a href="http://bowlerhatgames.com/mobile-games/gridshock/"><img src="http://joshblog.net/wp-content/uploads/mobile-gridshock1.png" alt="Gridshock iPhone title screen"></a></div>
<p>First, I added the Shock powerup to the mix. When you match five or more lights, one of them won&#8217;t disappear. Instead, it upgrades to add the powerup, and it can be matched again. When matched a second time, it will remove an entire row of lights. Very useful when things get fast and frenzied, and the grid has almost overflowed.</p>
<div class="previewimage"><a href="http://bowlerhatgames.com/mobile-games/gridshock/"><img src="http://joshblog.net/wp-content/uploads/mobile-gridshock2.png" alt="Gridshock iPhone game with patterns"></a></div>
<p>On the Options screen is a new setting called &#8220;Patterns&#8221;. For players who might have difficulty telling the difference between some of the game&#8217;s colors, Patterns mode adds a unique and high-contrast shape to each color.</p>
<h4>What&#8217;s that I said about Android?</h4>
<p>On other fronts, you might be interested to know that I&#8217;ve had a chance to preview an upcoming version of Adobe AIR for the Android mobile operating system. Adobe&#8217;s Ted Patrick recently showed off a few <a href="http://onflash.org/ted/2010/02/breath-of-fresh-air-air-on-android.php">sneak peek Android screenshots</a>, and he includes both Chroma Circuit and Gridshock in the mix.</p>
<div class="previewimage"><a href="http://onflash.org/ted/2010/02/breath-of-fresh-air-air-on-android.php"><img src="http://joshblog.net/wp-content/uploads/mobile-chroma-android.png" alt="Chroma Circuit on Android!"></a></div>
<p>The only thing I needed to focus on for Android from a development perspective was ensuring that my games would fit well in different screen resolutions. Christian Cantrell&#8217;s recent article, <a href="http://www.adobe.com/devnet/flash/articles/authoring_for_multiple_screen_sizes.html">Authoring mobile Flash content for multiple screen sizes</a>, has a wealth of information on this subject, and I suggest any Flash developer expecting to target mobile check it out. I was thinking about writing a blog post about multi-screen content myself, but Christian covered all the details I would have, so I recommend it highly.</p>
]]></content:encoded>
			<wfw:commentRss>http://joshblog.net/2010/02/16/gridshock-mobile-for-iphone-with-android-on-the-way/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Adobe TV video about Packager for iPhone and Chroma Circuit</title>
		<link>http://joshblog.net/2010/01/18/bowler-hat-games-talks-iphone-on-flash-platform-in-action/</link>
		<comments>http://joshblog.net/2010/01/18/bowler-hat-games-talks-iphone-on-flash-platform-in-action/#comments</comments>
		<pubDate>Mon, 18 Jan 2010 22:56:43 +0000</pubDate>
		<dc:creator>Josh Tynjala</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Games]]></category>

		<guid isPermaLink="false">http://joshblog.net/?p=750</guid>
		<description><![CDATA[At the end of 2009, I released by my game Chroma Circuit for the iPhone. It was developed using early builds of the Packager for iPhone to be included with the upcoming Flash CS5. Adobe recently met with me to chat about my experience using this exciting new technology.

Watch the video above or over at [...]]]></description>
			<content:encoded><![CDATA[<p>At the end of 2009, I released by my game <a href="http://joshblog.net/2009/10/18/bowler-hat-games-phase-two-begins-chroma-circuit-for-iphone/">Chroma Circuit for the iPhone</a>. It was developed using early builds of the <a href="http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/">Packager for iPhone</a> to be included with the upcoming Flash CS5. Adobe recently met with me to chat about my experience using this exciting new technology.</p>
<div class="previewimage"><object width="425" height="256"><param name="movie" value="http://tv.adobe.com/assets//swf/player.swf"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="FlashVars" value="fileID=4871&#038;context=76&#038;embeded=true&#038;environment=production"></param><embed src="http://tv.adobe.com/assets//swf/player.swf" flashvars="fileID=4871&#038;context=76&#038;embeded=true&#038;environment=production" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="256"></embed></object></div>
<p>Watch the video above or over at <a href="http://tv.adobe.com/watch/flash-platform-in-action/chroma-circuit-game-for-the-iphone-using-flash/">Adobe TV</a>. Now, if you&#8217;ll excuse me, I have a couple other mobile games to hurry up and finish.</p>
]]></content:encoded>
			<wfw:commentRss>http://joshblog.net/2010/01/18/bowler-hat-games-talks-iphone-on-flash-platform-in-action/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Indie Flash Game Development: A 2009 Year-End Retrospective</title>
		<link>http://joshblog.net/2010/01/04/indie-flash-game-development-a-2009-year-end-retrospective/</link>
		<comments>http://joshblog.net/2010/01/04/indie-flash-game-development-a-2009-year-end-retrospective/#comments</comments>
		<pubDate>Mon, 04 Jan 2010 08:12:12 +0000</pubDate>
		<dc:creator>Josh Tynjala</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Games]]></category>
		<category><![CDATA[Technology]]></category>

		<guid isPermaLink="false">http://joshblog.net/?p=710</guid>
		<description><![CDATA[In early 2009, I came up with an idea for a Flash game. At the time, I had enough saved up to take a short break from regular work, and I decided to try out game development on my own for a little while. That first idea eventually became Chroma Circuit, a cool little puzzler [...]]]></description>
			<content:encoded><![CDATA[<p>In early 2009, I came up with an idea for a Flash game. At the time, I had enough saved up to take a short break from regular work, and I decided to try out game development on my own for a little while. That first idea eventually became <a href="http://joshblog.net/2009/03/12/a-preview-of-my-first-flash-game-chroma-circuit/">Chroma Circuit</a>, a cool little puzzler released by my new company, <a href="http://bowlerhatgames.com/">Bowler Hat Games</a>. Since then, I&#8217;ve released two other free-to-play Flash games, one iPhone game using Adobe&#8217;s upcoming <a href="http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/">Packager for iPhone</a> in Flash CS5, and I&#8217;m working on another iPhone game as I write this. The other day, I realized that I started creating games in January, right at the beginning of the year. With that in mind, I thought I&#8217;d take a look at how I did, financially speaking, in my first full year as an indie game developer. Get ready for some numbers!</p>
<h4>Time Breakdown</h4>
<p>To start, let&#8217;s look at the time I spent on various projects in 2009. Unfortunately, it wasn&#8217;t all fun and games. Though I had a decent savings to get me started, I needed to refill my treasure chests mid-year, and that meant time away from game development. Here&#8217;s a pie chart to visualize the breakdown:</p>
<div class="previewimage"><img src="http://joshblog.net/wp-content/uploads/2009-time-chart.png" alt="Time Spent on Projects. 33% RIA Contracts. 13% Game Contracts. 50% Bowler Hat Games. 4% Time Off."></div>
<p>As you can see above, I spent six months working exclusively on my own games full-time. For a month and a half, I worked on some contracts that involved developing games for other people (the next best thing to working on my own games, I suppose). In addition, I spent another four months on contracts building some Flex <abbr title="Rich Internet Applications">RIAs</abbr> (non-game development, obviously). Finally, I took a couple weeks off in December to relax and enjoy the holidays.</p>
<p>As we take a look at my income next, please note that I will omit the amount I earned from things other than developing games. I want to focus more on what I earned specifically as a game developer rather than as an RIA developer. Regardless, I&#8217;ve mentioned this additional income because many game developers take the same approach: contract work funds the things we really want to do. Though I won&#8217;t give you specific numbers about the non-game income, I will note that well over half of my overall income this year falls into that bucket. In short, games did not pay the bills this year.</p>
<h4>Quick Income Breakdown</h4>
<p>In total, games earned me $29,413 USD in 2009. This year, I had five sources of income from games: primary sponsorships, non-exclusive licenses, advertising, iPhone game sales, and custom game development for clients. I&#8217;ll explain each of these below, for those who might not be familiar. However, let&#8217;s start with a simpler comparison to make one important point.</p>
<div class="previewimage"><img src="http://joshblog.net/wp-content/uploads/2009-contract-income-time-chart.png" alt="Income. 58% Game Contracts. 42% Bowler Hat Games. Time. 20% Game Contracts. 80% Bowler Hat Games."></div>
<p>As you can see from the chart on the left, about 58% of my game-related income came from contract work. Once again, even focusing specifically on game development, we can see that contracting is still where the real money is. Big clients pay big money to bring in developers to get their projects done. For comparison, the chart on the right shows the amount of time I spent on each. As you can see, the majority of the income from games comes from only 20% of the time I spent on them. If I were only interested in the size of my paycheck, I think it should be obvious which type of work I&#8217;d want to choose.</p>
<h4>Detailed Income Breakdown</h4>
<p>Now, let&#8217;s go one level deeper. The games I built entirely under the Bowler Hat Games banner earned me $12,413 in 2009 with six months of work. Assuming I didn&#8217;t live in the San Francisco Bay Area, I might have been able to stick to games the whole year with only a small loss, hoping to make up for it as revenue continues to grow in 2010. However, my current location is pretty expensive, so focusing on my games exclusively is still not possible yet.</p>
<div class="previewimage"><img src="http://joshblog.net/wp-content/uploads/2009-bhg-revenue.png" alt="Bowler Hat Games Revenue. 54% Primary Sponsorships. 21% Non-Exclusive Licenses. 20% Advertising. 5% iPhone Sales."></div>
<p>The majority of revenue comes from primary sponsorships, which are sold to game portals who want their branding and links to appear in any distributed version of a game. Sponsorships help them bring traffic back to their sites. They usually pay an author a lump sum for this privilege. Sometimes, sponsors offer performance incentives so that very popular games can earn more, but usually, a sponsored game only earns money from the sponsor once. I found this form of revenue useful to start out, but I&#8217;m not sure how often I will pursue it in the future. I&#8217;m starting to feel that they make it harder to build my own company&#8217;s brand because my games promote the brands of others so strongly.</p>
<p>Next in line is the non-exclusive, site-locked license, which allows game portals and virtual worlds to customize a game by adding their high score APIs, removing advertising, and making other small changes. By getting the game site-locked to one website (in other words, no distribution), they can offer a quality game directly on their portal for a lower price than sponsorship, but without the audience reach that a sponsorship offers. A non-exclusive license can earn as much or more than the primary sponsorship in the long run because you can sell as many licenses as you want. Generally, it only takes 2-3 hours for me to whip out a customized version of one of my games, and I earn more per hour for this work than what a primary sponsorship gets me for the original game.</p>
<blockquote><p>By the way, <a href="http://www.flashgamelicense.com/">FlashGameLicense.com</a> provides an excellent service for Flash game developers to connect with publishers and sell sponsorships and licenses. I found primary sponsors for all three of my games there, and many of the portal owners that made non-exclusive deals with me initiated contact on FGL.</p>
</blockquote>
<p>Often, advertising earnings can be a pretty low percentage of a game author&#8217;s revenue. However, my game <a href="http://joshblog.net/2009/05/26/gridshock-flash-game-by-bowler-hat-games/">Gridshock</a> has found itself among the top games on the popular <a href="http://www.mindjolt.com/">MindJolt</a> portal (and <a href="http://apps.facebook.com/mindjolt/">Facebook app</a>) for some time now, having received over 16 million plays overall as of the time of this writing. My all-time eCPM for all three games combined right now is $0.26 from MochiAds, though I&#8217;m showing a custom ad in Chroma Circuit right now to promote the iPhone version so that&#8217;s not earning anything at the moment. Gridshock alone is a tiny bit higher, at $0.28. I also use Google AdSense on the Bowler Hat Games website for some extra ad revenue, but their Terms of Service are mean, so I can&#8217;t really share anything about that.</p>
<p>Finally, there&#8217;s my iPhone game. I released it in October, and, as you can see, it hasn&#8217;t brought in much revenue, relatively speaking. The App Store isn&#8217;t an easy win these days, and that&#8217;s pretty much what I expected. However, Chroma Circuit has always done a little poorly compared to my other two games (other than the larger-than-average primary sponsorship), and that means I expect those to do better in the App Store once I finish polishing them up for the iPhone. If the iPhone version of Chroma Circuit had been released much earlier in the year,  that percentage would have been higher overall, so I&#8217;m not ready to say that iPhone development isn&#8217;t worth the effort yet. Plus, it&#8217;s been a lot of fun learning to optimize for a mobile device and developing with a touch screen, so I&#8217;m happy to explore this area more in the coming year just because I enjoy it.</p>
<h4>On to 2010!</h4>
<p>As I noted above, my earnings as an indie game developer are pretty low in comparison to the salary I used to earn (and what I still earn as a part-time independent contractor). However, I&#8217;ve seen steady growth throughout the year from game-related revenue, and I&#8217;m expecting that growth to continue into my second year. I don&#8217;t know for sure how many months I&#8217;ll be able to focus on my own games exclusively in 2010, but it should be at least six again. Hopefully more!</p>
<p>My main goal for this coming year is to explore new sources of revenue. The mobile games space still deserves some of my time, and that will likely include more devices than the iPhone, if they don&#8217;t require too large a commitment. Should Adobe offer Flash Player 10 (I&#8217;m not interested in Flash Lite) on a device, I&#8217;m more likely to play with it. I&#8217;m also looking to explore micro-transactions. From what I&#8217;ve seen, games that use <a href="http://www.mochimedia.com/developers/coins.html">MochiCoins</a> seem to do pretty well with players (though some portals seem to dislike them), and I definitely want to try adding them (or maybe another service, like <a href="https://www.gamersafe.com/">GamerSafe</a> or <a href="http://www.heyzap.com/">Heyzap</a>) to some totally new games I have simmering in the back of my head. Desktop versions of my existing games are certainly a possibility too. Who knows if I&#8217;ll get around to all of that, but I will say that I definitely have a barrel full of ideas for the future of <a href="http://bowlerhatgames.com/">Bowler Hat Games</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://joshblog.net/2010/01/04/indie-flash-game-development-a-2009-year-end-retrospective/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Bowler Hat Games Phase Two Begins: Chroma Circuit for iPhone</title>
		<link>http://joshblog.net/2009/10/18/bowler-hat-games-phase-two-begins-chroma-circuit-for-iphone/</link>
		<comments>http://joshblog.net/2009/10/18/bowler-hat-games-phase-two-begins-chroma-circuit-for-iphone/#comments</comments>
		<pubDate>Sun, 18 Oct 2009 19:32:39 +0000</pubDate>
		<dc:creator>Josh Tynjala</dc:creator>
				<category><![CDATA[Games]]></category>

		<guid isPermaLink="false">http://joshblog.net/?p=692</guid>
		<description><![CDATA[Head on over to the iTunes App Store now, and support your favorite indie game developer! Chroma Circuit can now be purchased for the iPhone and iPod Touch. If you&#8217;ve played Chroma Circuit before, get ready to experience new touchscreen controls, slick new graphics, and a total of 30 puzzles to solve. That&#8217;s 12 more [...]]]></description>
			<content:encoded><![CDATA[<p>Head on over to the iTunes App Store now, and support your favorite indie game developer! <a href="http://bowlerhatgames.com/mobile-games/chroma-circuit-for-iphone/">Chroma Circuit</a> can now be purchased for the iPhone and iPod Touch. If you&#8217;ve played Chroma Circuit before, get ready to experience new touchscreen controls, slick new graphics, and a total of 30 puzzles to solve. That&#8217;s 12 more levels than the original web version, plus some remixed levels that better fit the iPhone&#8217;s screen.</p>
<div class="previewimage"><a href="http://bowlerhatgames.com/mobile-games/chroma-circuit-for-iphone/"><img src="http://joshblog.net/wp-content/uploads/IMG_0005.PNG" alt="Screenshot of Chroma Circuit for iPhone"></a></div>
<p>Alright, with the sales pitch out of the way, let&#8217;s get into the nitty-gritty details. First of all, yes, Chroma Circuit is built with Adobe Flash. It&#8217;s not Flash Player, though. This is a native app with the ActionScript compiled down to ARM assembly. You can read more about the details in the press release, <a href="http://eon.businesswire.com/portal/site/eon/permalink/?ndmViewId=news_view&#038;newsId=20091005006358&#038;newsLang=en">Adobe Opens iPhone to Flash Developers</a> (which has a quote from me!), and on the <a href="http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/">Apps for iPhone section of Adobe Labs</a>.</p>
<p>Of course, what everyone&#8217;s been waiting for is, what do I think about it? Personally, I absolutely love this technology. I spent a few weeks with Objective-C earlier this year, trying to do a port of Chroma Circuit. I started getting the hang of the language and tools pretty fast, but to be honest, I wasn&#8217;t a fan. Too much memory management. Drawing and animation APIs that were a pain. It just wasn&#8217;t for me. I kept an interactive prototype of Chroma Circuit sitting around for months without any updates. Then Adobe asked me to help them bring Flash to the iPhone, and I had a more complete prototype within a couple of hours because I could reuse my existing code from the web version with very minor tweaks.</p>
<h4>Optimization</h4>
<p><em>Currently</em>, iPhone native apps built with Flash are obviously slower than typical native apps, especially on older phones. The bottleneck, much like in the browser, is the software renderer. I think I&#8217;ve seen some speculation that because ActionScript is traditionally an interpreted language that it&#8217;s probably very slow when pre-compiled. That&#8217;s simply not true, and unless you write crappy code, it won&#8217;t be your bottleneck. Adobe has said that they&#8217;re using the same software renderer as their browser and desktop runtimes because it keeps things visually consistent. I like that, and I&#8217;m excited to see optimization to make it run better on less-powerful devices. Hopefully, that optimization will make its way back to Flash Player itself&mdash;much like what&#8217;s already happened with Flash Player 10.1&mdash;and that it will help push the community to innovate more.</p>
<p>Of course, optimization is not all on Adobe&#8217;s side. The fact is, most of us write code that is &#8220;good enough&#8221; to run on modern desktops. For a mobile device, optimization is more important, and I&#8217;m working hard to ensure that future updates to Chroma Circuit run better. Though I haven&#8217;t started using the new hardware acceleration feature, <code>cacheAsSurface</code>, I have spent time simplifying some of my graphical effects (which don&#8217;t need to be so detailed on such a small screen), ensuring that vectors don&#8217;t get redrawn unnecessarily, and making some display list manipulations (like depth changes) more conditional. For the original version, I focused mainly on removing bitmap filters (either completely or replaced by PNGs) and turning static vector art like backgrounds into bitmaps. Both helped quite a bit, and that&#8217;s the best I could do with a looming deadline to get it into the App Store in time for Adobe MAX. Now that I have more time to focus on polishing, I can explore and discover new ways to make the game run faster. Again, while I want to see more performance coming from the renderer itself, I certainly am not denying the fact that part of the job is my own.</p>
<h4>The Future</h4>
<p>What&#8217;s coming next? More features and better performance in Chroma Circuit, of course. My other games, <a href="http://joshblog.net/2009/05/26/gridshock-flash-game-by-bowler-hat-games/">Gridshock</a> and <a href="http://joshblog.net/2009/07/23/bowler-hat-games-new-flash-puzzle-game-qrossfire/">Qrossfire</a>, will be getting the iPhone treatment too. Making iPhone games isn&#8217;t my sole focus, though. The App Store is not a gold mine, and probably hasn&#8217;t been since people started calling it that. Instead, iPhone apps will be just one part of my revenue. Licensing, advertising, iPhone apps, and probably more. Adobe&#8217;s <a href="http://labs.adobe.com/technologies/shibuya/">Shibuya</a> looked pretty cool. Maybe I&#8217;ll make some AIR desktop versions of my games too. Certainly, there are new games simmering in my brain, and I&#8217;m sure you&#8217;ll see those hitting portals and making their way to iPhones and desktops as well.</p>
<p>That&#8217;s the focus of what I call &#8220;phase two&#8221; of Bowler Hat Games. I want to explore more revenue sources and discover a good mix that will help me reach my financial goals for the business. With the retroactively named &#8220;phase one&#8221; coming to a close, I hope to share with you a blog post with some charts and analysis showing the breakdown of revenue so far. I haven&#8217;t compared all the numbers yet, except to ballpark it all in my head, so I&#8217;m pretty excited to get down and dirty with the data.</p>
]]></content:encoded>
			<wfw:commentRss>http://joshblog.net/2009/10/18/bowler-hat-games-phase-two-begins-chroma-circuit-for-iphone/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Make your company more fun: Start &#8220;back channel&#8221; conversations</title>
		<link>http://joshblog.net/2009/08/21/engaging-employees-with-fun-back-channel-whiteboard-conversations/</link>
		<comments>http://joshblog.net/2009/08/21/engaging-employees-with-fun-back-channel-whiteboard-conversations/#comments</comments>
		<pubDate>Fri, 21 Aug 2009 21:16:46 +0000</pubDate>
		<dc:creator>Josh Tynjala</dc:creator>
				<category><![CDATA[Inspiration]]></category>

		<guid isPermaLink="false">http://joshblog.net/?p=687</guid>
		<description><![CDATA[Put up a whiteboard in your company&#8217;s office. Not a whiteboard for meetings, mind you. A whiteboard with a question. Then, drop a bunch of markers next to it and wait for answers. It doesn&#8217;t matter what you ask, but try to make it a question that requires more than a &#8220;yes&#8221; or &#8220;no&#8221; answer. [...]]]></description>
			<content:encoded><![CDATA[<p>Put up a whiteboard in your company&#8217;s office. Not a whiteboard for meetings, mind you. A whiteboard with a question. Then, drop a bunch of markers next to it and wait for answers. It doesn&#8217;t matter what you ask, but try to make it a question that requires more than a &#8220;yes&#8221; or &#8220;no&#8221; answer. It could be something fun, or maybe a wild idea that you want validated. Without a doubt, passersby will stop for a moment and start writing. Don&#8217;t get it? Here&#8217;s an example of a question to ask:</p>
<blockquote><p>What do we need?</p>
</blockquote>
<p>It&#8217;s a very straightforward question, but you might be surprised about the answers. You&#8217;ll get serious answers about things that slow people down and make it hard for them to do their job. You&#8217;ll get inspiring answers about features your products or services may benefit from in the future (maybe even things people might be too scared to suggest in real meetings). You&#8217;ll get funny answers about how someone wants &#8220;weapons-grade plutonium&#8221;. In all cases, you&#8217;ll get useful results and engage the people around you. You&#8217;ll probably get more than answers, though. The most fascinating phenomenon is that people will start having conversations. Bob will read another Alice&#8217;s answer, then comment on it with his own thoughts with a little arrow pointing to the original.</p>
<p>I&#8217;ve seen the happen at two companies at which I&#8217;ve worked. At one, I was a full-time employee, and at the other, I was a contractor. In both cases, the message board instantly caught on, <em>without explanation</em>. One day it appears, and people instantly get it. In one case, it wasn&#8217;t a whiteboard. Nothing was provided for writing an answer. It was just a big thing on the wall with a permanent question (I don&#8217;t remember what exactly, but basically, &#8220;what are you up to?&#8221;). By day two, a clever individual had figured it out, and his or her answer materialized on a post-it. A conversation thread on the board became a cascading line of yellow squares. A couple weeks in, pictures of team members doing fun stuff were taped up there, and it was a great success.</p>
<p>Many business focus engagement so strongly on customers, that a little extra effort to engage employees can be surprising and exciting. A whiteboard or something else that asks a simple question brings a light-hearted atmosphere to the office and it may give you some information about what&#8217;s happening behind the scenes that was otherwise hidden. As someone who has experienced this addition to an office environment twice in my career, I highly recommend it for every business.</p>
]]></content:encoded>
			<wfw:commentRss>http://joshblog.net/2009/08/21/engaging-employees-with-fun-back-channel-whiteboard-conversations/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Bowler Hat Games Introduces Qrossfire</title>
		<link>http://joshblog.net/2009/07/23/bowler-hat-games-new-flash-puzzle-game-qrossfire/</link>
		<comments>http://joshblog.net/2009/07/23/bowler-hat-games-new-flash-puzzle-game-qrossfire/#comments</comments>
		<pubDate>Thu, 23 Jul 2009 15:34:01 +0000</pubDate>
		<dc:creator>Josh Tynjala</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Games]]></category>

		<guid isPermaLink="false">http://joshblog.net/?p=650</guid>
		<description><![CDATA[Two weeks ago, my company Bowler Hat Games released a new game called Qrossfire. Within a short time, Mochi Media featured Qrossfire as a Flash Game Friday winner. Today, the game reached a milestone of one million plays. I attribute Qrossfire&#8217;s success to a few factors, including a focus on graphics, better playtesting, and building [...]]]></description>
			<content:encoded><![CDATA[<p>Two weeks ago, my company <a href="http://bowlerhatgames.com/">Bowler Hat Games</a> released a new game called <a href="http://bowlerhatgames.com/games/qrossfire/">Qrossfire</a>. Within a short time, <a href="http://mochiland.com/articles/flash-game-friday-qrossfire">Mochi Media featured Qrossfire as a Flash Game Friday winner</a>. Today, the game reached a milestone of one million plays. I attribute Qrossfire&#8217;s success to a few factors, including a focus on graphics, better playtesting, and building upon an already successful and familiar gameplay mechanics.</p>
<div class="previewimage"><a href="http://bowlerhatgames.com/games/qrossfire/"><img src="http://joshblog.net/wp-content/uploads/qrossfire1.jpg" alt="Screenshot of Qrossfire's Title Screen"/></a><br />
<caption>Qrossfire&#8217;s Title Screen</caption>
</div>
<p>With Qrossfire, I spent some extra time creating unique art and graphics. Color, in particular, played a big role in giving Qrossfire the personality it needed and the quality of gameplay I wanted. I tried to pick strong primary colors with heavy saturation, in a balanced set of brightness levels. With both <a href="http://joshblog.net/2009/03/12/a-preview-of-my-first-flash-game-chroma-circuit/">Chroma Circuit</a> and <a href="http://joshblog.net/2009/05/26/gridshock-flash-game-by-bowler-hat-games/">Gridshock</a>, a small number of players complained that some of the colors weren&#8217;t different enough, and it made the game a bit harder to play. To compensate in Chroma Circuit, I added a color-blind mode with very high-contrast colors. For Qrossfire, I tried to ensure from the start that the colors I chose would work well together aesthetically and technically. As a fallback, I also added unique shapes to go along with each of the colors.</p>
<div class="previewimage"><a href="http://bowlerhatgames.com/games/qrossfire/"><img src="http://joshblog.net/wp-content/uploads/qrossfire2.jpg" alt="Screenshot of Qrossfire Gameplay"/></a><br />
<caption>Qrossfire In-Game</caption>
</div>
<p>Qrossfire was the first game of mine to use the First Impressions feature on <a href="http://flashgamelicense.com/">FlashGameLicense</a>. It&#8217;s a wonderful option that puts your game in front of a variety of players with many backgrounds and skill levels, and you receive their honest feedback, as if the game were out in the real world. While I&#8217;ve heard that many developers put early versions of their games up there, I decided to upload Qrossfire later in development when I was mostly adding finishing touches. Regardless, the participants gave me excellent advice related to sound effects, difficulty, and controls. Between the comments from these helpful souls and very useful suggestions I received some of the potential licensees on FGL, I was able to make Qrossfire more dynamic, interesting, and universally enjoyable. If you sell licenses for your games on FGL, I highly recommend this feature, and I don&#8217;t doubt that I will use it again.</p>
<p>From the beginning, I intended to create Qrossfire using an established formula. While I strive to create unique games that stand out from the crowd and go in their own differing directions, even when we&#8217;re talking simple puzzle games, there are benefits to me as a game developer to building an old standard that&#8217;s tried and true.</p>
<ul>
<li>
<p><strong>More experience.</strong> This is only my third game, and a good way to spend more time on graphics, sound, and other non-development areas is to create something that won&#8217;t require too much thought from the engineering side of my brain. This choice also lets me spend a bit more time refining the project structure and architecture. What I learn from those possible improvements, I can take with me to my next game and beyond.</p>
</li>
<li>
<p><strong>Creative exercise.</strong> What better way to force myself to be creative than to take an established&mdash;and nearly overdone&mdash;genre and try to find a fresh way to present it to players? A good balance between new and familiar elements is often the best way to find success.</p>
</li>
<li>
<p><strong>It&#8217;s relaxing.</strong> I have plans in the works for an epic sequel to Chroma Circuit with more levels, new game modes, and some very exciting new features&mdash;all of which offer me great revenue potential. I&#8217;ve also been experimenting and brainstorming for games in genres I haven&#8217;t tried yet. Giving my mind a short break from planning those longer-term tasks allows me to restart them later with a fresh perspective and new ideas.</p>
</li>
</ul>
<p>Currently, I&#8217;m taking a short break from game development to do some Flex consulting work. I hope that games will be able to pay the bills sooner than later, but I&#8217;m still not there yet. Thankfully, I only need to work for about three months to allow myself to work fulltime on games well into 2010. Hopefully, I&#8217;ll get started on a new game in early October. In the meantime, I&#8217;ll be doing customizations for portals that want site-locked licenses of my existing games, exploring interesting technologies I may be able to use in my games in the future, and enjoying the summer as much as possible.</p>
]]></content:encoded>
			<wfw:commentRss>http://joshblog.net/2009/07/23/bowler-hat-games-new-flash-puzzle-game-qrossfire/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Skipping id in MXML to create private sub-components</title>
		<link>http://joshblog.net/2009/07/22/flex-mxml-private-child-id/</link>
		<comments>http://joshblog.net/2009/07/22/flex-mxml-private-child-id/#comments</comments>
		<pubDate>Wed, 22 Jul 2009 23:58:57 +0000</pubDate>
		<dc:creator>Josh Tynjala</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[Source Code]]></category>

		<guid isPermaLink="false">http://joshblog.net/?p=662</guid>
		<description><![CDATA[As you probably know, when you create an MXML component in Flex, and you give one of its children an id, that child will become a public property on the class. What if you&#8217;d rather make it private because you don&#8217;t want code outside the MXML component accessing sub-components? Well, you could do something like [...]]]></description>
			<content:encoded><![CDATA[<p>As you probably know, when you create an MXML component in Flex, and you give one of its children an <code>id</code>, that child will become a public property on the class. What if you&#8217;d rather make it private because you don&#8217;t want code outside the MXML component accessing sub-components? Well, you could do something like this:</p>
<pre>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	creationComplete="application_creationCompleteHandler(event)"&gt;

	&lt;mx:Button label="Example" preinitialize="_exampleButton = Button(event.currentTarget)"/&gt;

	&lt;mx:Script&gt;&lt;![CDATA[
		import mx.events.FlexEvent;
		import mx.controls.Button;

		[Bindable]
		private var _exampleButton:Button;

		private function application_creationCompleteHandler(event:FlexEvent):void
		{
			trace("_exampleButton:", this._exampleButton);
		}

	]]&gt;&lt;/mx:Script&gt;
&lt;/mx:Application&gt;</pre>
<p>In the code above, there&#8217;s a private <code>_exampleButton</code> variable that will be used to reference the Button we create in the MXML without an <code>id</code> property. It is Bindable so that we can use its properties in binding elsewhere. Hooking onto the <a href="http://livedocs.adobe.com/flex/3/langref/mx/core/UIComponent.html#event:preinitialize"><code>FlexEvent.PREINITIALIZE</code></a> event, we pass the component reference to the variable using the <code>currentTarget</code> property of the event.</p>
<p>If you have a reason to enforce stronger encapsulation in MXML components, this method could be useful, but it&#8217;s probably overkill most of the time. Obviously, this won&#8217;t stop someone from using standard display list functions to access the child you &#8220;hid&#8221; by making it private. I doubt I&#8217;ll use this anywhere, but it was a fun exercise, and I thought I&#8217;d share.</p>
<h4>A Couple Related Links</h4>
<ul>
<li>
<p>Feature Request: <a href="https://bugs.adobe.com/jira/browse/SDK-219">SDK-219: Access-controlled MXML Properties</a></p>
</li>
<li>
<p>Blog Post: <a href="http://blog.ashier.com/2008/03/25/hiding-properties-in-flex-components/">Hiding Properties in Flex Components</a></p>
</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://joshblog.net/2009/07/22/flex-mxml-private-child-id/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>[Bindable] on a read-only getter is unnecessary and will be ignored.</title>
		<link>http://joshblog.net/2009/07/15/flex-readonly-bindable-getter-ignored-warning-explained/</link>
		<comments>http://joshblog.net/2009/07/15/flex-readonly-bindable-getter-ignored-warning-explained/#comments</comments>
		<pubDate>Wed, 15 Jul 2009 23:51:29 +0000</pubDate>
		<dc:creator>Josh Tynjala</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[Source Code]]></category>

		<guid isPermaLink="false">http://joshblog.net/?p=656</guid>
		<description><![CDATA[Sometimes, when you build a Flex application, you encounter a compiler warning that says, &#8220;[Bindable] on a read-only getter is unnecessary and will be ignored.&#8221; If you&#8217;ve seen that message, and you&#8217;re curious what it means, hopefully I can explain it. In short, the compiler is telling you that it can&#8217;t actually make that property [...]]]></description>
			<content:encoded><![CDATA[<p>Sometimes, when you build a Flex application, you encounter a compiler warning that says, &#8220;[Bindable] on a read-only getter is unnecessary and will be ignored.&#8221; If you&#8217;ve seen that message, and you&#8217;re curious what it means, hopefully I can explain it. In short, the compiler is telling you that it can&#8217;t actually make that property bindable because it has no way of determining when the property changes.</p>
<p>To understand that better, you should first know a little more about how binding works. Normally, when you make a getter/setter pair bindable, the compiler adds a little extra code for you. Behind the scenes, it dispatches <a href="http://livedocs.adobe.com/flex/3/langref/mx/events/PropertyChangeEvent.html#PROPERTY_CHANGE"><code>PropertyChangeEvent.PROPERTY_CHANGE</code></a> to tell the binding system that your property has changed. Basically, it converts your property functions from something like this:</p>
<pre>private var _example:String = "I am the very model of a modern Flex developer";

[Bindable]
public function get example():String
{
    return this._example;
}
public function set example(value:String):void
{
    this._example = value;
}</pre>
<p>to this:</p>
<pre>private var _example:String = "I am the very model of a modern Flex developer";

[Bindable("propertyChange")]
public function get example():String
{
    return this._example;
}
public function set example(value:String):void
{
    this._example = value;
    this.dispatchEvent(new PropertyChangeEvent(PropertyChangeEvent.PROPERTY_CHANGE);
}</pre>
<p>If you don&#8217;t have a setter, there&#8217;s nowhere for the compiler to act smart and determine that your property has changed. If you want a getter without a setter to be bindable, you need to specify an event to be fired when the value returned by the getter changes. Your code should look something like this:</p>
<pre>private var _example:String = "I am the very model of a modern Flex developer";

[Bindable("exampleChange")]
public function get example():String
{
    return this._example;
}</pre>
<p>Notice the inclusion of the event type in the metadata&#8217;s parentheses.</p>
<p>That&#8217;s only the first part, though. Next, you need to actually dispatch the <code>exampleChange</code> event from somewhere in your code. For example, let&#8217;s say that we change the <code>_example</code> variable when an <code>URLLoader</code> returns a result:</p>
<pre>private function urlLoader_completeHandler(event:Event):void
{
    var loader:URLLoader = URLLoader(event.currentTarget);
    loader.removeEventListener(Event.COMPLETE, completeHandler);
    this._example = loader.data.toString();
    this.dispatchEvent(new Event("exampleChange"));
}</pre>
<p>Any time you change <code>_example</code>, you need to dispatch the <code>exampleChange</code> event specified in the metadata so that the the binding system knows about what you did. If you set <code>_example</code> in many different places, you might consider making a private or protected setter that sets <code>_example</code> and dispatches that event, but that&#8217;s not required.</p>
<p>In summary, the compiler warning goes away when you specify an event type in the metadata. Simply specifying an event type won&#8217;t update bindings though, you also have to dispatch that event when the underlying variable changes. When the binding system receives your event, it knows to update any component to which your getter is bound.</p>
<p>One extra thing worth mentioning is that any property with Bindable metadata that has no event specified with dispatch the same generic <code>propertyChange</code> event. This means the binding system will have to work harder than needed because it could receive the same event for many different properties. It&#8217;s a good idea to a create custom event for each property to avoid this limitation. You can see in the Flex framework source code that Adobe has separate events for most, if not all, bindable properties they create.</p>
]]></content:encoded>
			<wfw:commentRss>http://joshblog.net/2009/07/15/flex-readonly-bindable-getter-ignored-warning-explained/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Sometimes, fl.core.UIComponent redraws too often</title>
		<link>http://joshblog.net/2009/06/25/flash-component-drawing-call-later-validation-monkey-patch/</link>
		<comments>http://joshblog.net/2009/06/25/flash-component-drawing-call-later-validation-monkey-patch/#comments</comments>
		<pubDate>Fri, 26 Jun 2009 01:23:20 +0000</pubDate>
		<dc:creator>Josh Tynjala</dc:creator>
				<category><![CDATA[Components]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Source Code]]></category>
		<category><![CDATA[Yahoo!]]></category>

		<guid isPermaLink="false">http://joshblog.net/?p=640</guid>
		<description><![CDATA[Recently, as I was working on a Flash component (not a Flex component, mind you), I found myself wondering why the component would redraw for supposedly no reason. It had obviously drawn itself to display the current state after a property change, but sometimes it would throw in one extra redraw a bit later. If [...]]]></description>
			<content:encoded><![CDATA[<p>Recently, as I was working on a Flash component (not a Flex component, mind you), I found myself wondering why the component would redraw for supposedly no reason. It had obviously drawn itself to display the current state after a property change, but sometimes it would throw in one extra redraw a bit later. If you&#8217;re unfamiliar with the way the &#8220;fl&#8221; components work, they use a system of invalidation where property changes will queue up a drawing cycle for later (typically before the next frame is drawn by Flash Player&#8217;s renderer). When the extra redraw slipped in there, it seemed that something wasn&#8217;t getting cleaned up properly during the validation cycle.</p>
<p>When you create an <a href="http://help.adobe.com/en_US/AS3LCR/Flash_10.0/fl/core/UIComponent.html">&#8220;fl&#8221; component</a> that has children that are also &#8220;fl&#8221; components, you&#8217;re required to call a function named <a href="http://help.adobe.com/en_US/AS3LCR/Flash_10.0/fl/core/UIComponent.html#drawNow()"><code>drawNow()</code></a> on the sub-components inside the parent&#8217;s <code>draw()</code> function. You want to do this because many users will find it aesthetically undesirable to see those sub-components update one frame later rather than immediately. In fact, the architecture actually forces you to call <code>drawNow()</code> because it refuses to queue another redraw while in the &#8220;call later phase&#8221;. Of course, there are ways to <a href="http://jessewarden.com/2008/03/how-to-fix-the-flash-cs3-components.html">force &#8220;fl&#8221; sub-components to invalidate during that call later phase</a> if you don&#8217;t mind patching the source yourself, but that&#8217;s a different story.</p>
<h4>Call later, or else!</h4>
<p>That&#8217;s the background for how the architecture works. Here&#8217;s the problem I discovered. When you set a property of a sub-component from outside its parent, that sub-component will invalidate and <code>callLater()</code> will get it ready for a redraw. If, for some reason, the parent redraws before its sub-component, the sub-component will draw when <code>drawNow()</code> is called, but the redraw it independently queued up earlier won&#8217;t be removed from the queue!</p>
<p>The only time that the <code>draw()</code> function gets removed from the queue is when the <code>callLaterDispatcher()</code> receives the stage&#8217;s render event. Instead, <code>UIComponent</code> should account for the possibility that a certain functions that will be &#8220;called later&#8221; may not need to be called again if they get called early. Here&#8217;s a patch to <code>fl.core.UIComponent</code> that will do just that for component drawing:</p>
<pre>protected function validate():void
{
	invalidHash = {};

	//remove draw() from the "call later" queue
	delete this.callLaterMethods[draw];
}</pre>
<p>I simply added one line at the end of the function <code>validate()</code> This function gets called at the end of <code>draw()</code>. The default version only cleans the invalidation hash, which tracks changes to minimize the number of component parts that need to redraw. My addition also ensures that it only redraws once. If the component has validated, then there&#8217;s nothing invalid to require another draw.</p>
<p>It&#8217;s worth noting that an extra redraw isn&#8217;t the end of the world. For most components, it won&#8217;t cause any noticeable problems, but for some, it may impact performance. Things like the <a href="http://developer.yahoo.com/flash/astra-flash/layout-containers/">layout containers in Yahoo! Astra</a> are a bit more CPU-intensive than most &#8220;fl&#8221; components because they need to determine ideal dimensions, the best positioning of components, and whether scrollbars are needed and that involves some nasty looping. They have a few flags to indicate whether certain changes affect the layout at all, but still, that&#8217;s not always perfect and drawing the component again for no good reason isn&#8217;t useful.</p>
<p>By the way, if you ever want to <a href="http://en.wikipedia.org/wiki/Monkey_patch">monkey patch</a> a component in a specific Flash or Flex project, it&#8217;s easy.</p>
<ol>
<li>
<p>Copy the original source file into a new file. Make sure the package structure is the same as the original.</p>
</li>
<li>
<p>Make any changes that are needed.</p>
</li>
<li>
<p>Add the folder for the top-level package of the new component to your compiler&#8217;s &#8220;source path&#8221;. Make sure your patched source is higher in the list than the original version so that the compiler knows that it is more important. Typically, if the patched version is in the project&#8217;s own directory, it will be given more importance.</p>
</li>
</ol>
<p>Enjoy!</p>
]]></content:encoded>
			<wfw:commentRss>http://joshblog.net/2009/06/25/flash-component-drawing-call-later-validation-monkey-patch/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
