<?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>Littleloud &#187; tech</title>
	<atom:link href="http://littleloud.com/category/tech/feed/" rel="self" type="application/rss+xml" />
	<link>http://littleloud.com</link>
	<description>Story, Play, Motion</description>
	<lastBuildDate>Fri, 28 Feb 2014 10:44:45 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>Meet Tara&#8230;</title>
		<link>http://littleloud.com/2012/08/meet-tara/</link>
		<comments>http://littleloud.com/2012/08/meet-tara/#comments</comments>
		<pubDate>Wed, 01 Aug 2012 15:28:24 +0000</pubDate>
		<dc:creator>Nik Faulkner</dc:creator>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[tech]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[3D Artist]]></category>
		<category><![CDATA[After Effects]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[Lightwave]]></category>
		<category><![CDATA[Nik Faulkner]]></category>

		<guid isPermaLink="false">http://www.littleloud.com/?p=1810</guid>
		<description><![CDATA[<p>Wait &#8211; what&#8217;s that? You want me, Nik Faulkner, Head of Animation at Littleloud, to tell you about how I created this image that was featured in <a title="3D Artist" href="http://www.3dartistonline.com/image/11274/headphones">3D Artist</a> magazine? Of course! Littleloud love to talk about the creative process, and we really, <em>really </em>love expressive characters. So any excuse to spend some quality time talking about animation is pretty cool with us. Sit down, get a cuppa, and we can have a look at the process of making Tara come to life!</p>
<h4><strong>Concept</strong></h4>
<p>&#160;</p>
<p>This image started with some... <a href="http://littleloud.com/2012/08/meet-tara/" class="read_more">read more</a></p>]]></description>
				<content:encoded><![CDATA[<p>Wait &#8211; what&#8217;s that? You want me, Nik Faulkner, Head of Animation at Littleloud, to tell you about how I created this image that was featured in <a title="3D Artist" href="http://www.3dartistonline.com/image/11274/headphones">3D Artist</a> magazine? Of course! Littleloud love to talk about the creative process, and we really, <em>really </em>love expressive characters. So any excuse to spend some quality time talking about animation is pretty cool with us. Sit down, get a cuppa, and we can have a look at the process of making Tara come to life!</p>
<h4><strong>Concept</strong></h4>
<p>&nbsp;</p>
<p>This image started with some research into generic character base meshes to be used for virtual sculpting. The concept of a good base mesh is to find a balance between having enough detail to show muscle flow, good topology and enough simplicity that the body shape can be changed easily to make whatever character is required. After a couple of days researching different approaches to topology and building her, she was quickly rigged with the in-house auto-rigger I&#8217;d developed for our character projects.</p>
<p><img class="alignnone size-full wp-image-1819" title="wall_tara-base-mesh" alt="" src="http://www.littleloud.com/wordpress/wp-content/uploads/2012/07/wall_tara-base-mesh.jpg" width="644" height="323" /></p>
<p><strong>Base Mesh</strong></p>
<p>&nbsp;</p>
<p>My initial idea was to go for a virtual pinup, but with the express decision not to over-sexualise her. I&#8217;ve been a fan of  <a title="Tara McPherson" href="http://www.taramcpherson.com/" target="_blank">Tara McPherson</a> for a long time and although the final image doesn&#8217;t bear much resemblance to her work it did serve as a creative and directional springboard for me. I found some 60&#8242;s pinup photos of minidress clad girls lounging on the floor listening records and thought that these kind of images were iconic and fun to riff on. After more web research, the chair, headphones, tape recorder and set were quickly built and textured in less than a day and the composition was roughly laid out before doing first test poses.</p>
<p>&nbsp;</p>
<h4><strong>Scene Setup</strong></h4>
<p>&nbsp;</p>
<p>At this point I pretty much finalised my lighting and render settings. I used <a title="Lightwave" href="http://www.newtek.com" target="_blank">Lightwave&#8217;s</a> fast final gather radiosity with 3 bounces, 2 large area lights (a warm main light and a colder fill light) and an HDRI image of a photo studio to give a bit of variation to the ambience and help with reflections and specular highlights.</p>
<p>Using the rig I finalised Tara&#8217;s pose. This being a still meant that I could be a lot less fussy about deformations in the shoulders and neck areas, traditionally places where a LOT of tweaking is required to get natural muscle flow and bending/deforming. The sculpting stage meant I could fix this very easily once the pose was finalised.</p>
<p>&nbsp;</p>
<h4><strong>Sculpting</strong></h4>
<p>&nbsp;</p>
<p>I sent the posed base mesh over to <a title="Sculptris" href="http://www.pixologic.com/sculptris" target="_blank">Sculptris</a>. I first fixed any deformation issues on the shoulders, then refined the facial expression and softened the areas around the eyes, lips and side of nose. Detail was then added to the collar bones as well as softening and rounding the cleavage and adding a little definition on the knees.</p>
<p>If this was for animation I&#8217;d need to bake out normal and displacement maps to get the sculpt information onto the animation ready mesh &#8211; but as this was a still, I just replaced my pre-sculpt rigged mesh with the hi-poly sculpt.</p>
<h4><img class="alignnone size-full wp-image-1818" title="wall_tara_occlusion" alt="" src="http://www.littleloud.com/wordpress/wp-content/uploads/2012/07/wall_tara_occlusion.jpg" width="644" height="362" /></h4>
<p><strong>Occlusion Pass</strong></p>
<p>&nbsp;</p>
<h4><strong>Props and Surfacing/Texturing</strong></h4>
<p>&nbsp;</p>
<p>The last few steps involved modelling her hair, boots and dress. This was all pretty simple stuff using basic sub-d techniques and very quick UV-mapping on her body and apparel. I toyed with subsurface scattering for her skin, but didn&#8217;t find it as quick as I&#8217;d hoped &#8211; instead I opted for some post techniques that could give me near enough the look I was going for in much less time. a simple tiling texture for her dress, tiled hair diffuse map and eye textures from a previous project and sleeve tattoo stolen from my girlfriends arm. I do tend to use as many procedural textures as I can, thankfully lightwave is pretty well stocked in this department.</p>
<p>&nbsp;</p>
<h4><strong>Render Passes</strong></h4>
<p>&nbsp;</p>
<p>I rendered out various passes at a pretty hefty 4K resolution, just in case I wanted to print the result.</p>
<ul>
<li>a default, straight render (some people call this the &#8220;beauty pass&#8221;)</li>
<li>an rgb pass with no lighting, this is almost a cel shading pass but has the added bonus of the detail from procedural surfaces</li>
<li>an ambient occlusion pass, to pick out detail and help refine the radiosity</li>
<li>a depth pass which I setup manually using fog rather than a depth buffer (i prefer to manually control this) this was used for depth of field in post as well as a very slight fog on the background.</li>
</ul>
<p><img class="alignnone size-full wp-image-1815" title="wall_tara_cell_render" alt="" src="http://www.littleloud.com/wordpress/wp-content/uploads/2012/07/wall_tara_cell_render.jpg" width="644" height="362" /></p>
<p><strong>Cell Shaded Render</strong></p>
<p>&nbsp;</p>
<h4><strong>Post Production</strong></h4>
<p>&nbsp;</p>
<p>I combined all the final elements in <a title="After Effects" href="http://www.adobe.com/uk/products/aftereffects.html" target="_blank">After Effects</a> rather than <a href="http://www.photoshop.com/" target="_blank">Photoshop</a>. I much prefer the After Effects workflow when it comes to multi-pass rendering. The implementation of adjustment layers alone is far superior for my way of working.</p>
<p>The comping of layers is pretty standard stuff: occlusion multiplied over beauty pass, lens blur for depth of field using the depth pass fog, depth pass screened over everything to add fog effects.</p>
<p>The only unusual thing I did was for the skin. I took my raw RGB pass, masked it so it was only the skin surface and overlaid it over the beauty pass. This essentially makes the skin surface look cel-shaded. By lowering the opacity of this layer you can slide between the more realistic render and the stylised cel render. For Tara the skin is roughly 70% beauty render and 30% cel render, with a very subtle After Effects glow added. Although this is nowhere near subsurface scattering, it&#8217;s a nice soft &#8220;un-CG&#8221; look that I think adds a lot and has pretty much no render hit.</p>
<p><img class="alignnone size-full wp-image-1814" title="post-optics-and-grading-final-render" alt="" src="http://www.littleloud.com/wordpress/wp-content/uploads/2012/07/post-optics-and-grading-final-render.jpg" width="644" height="362" /></p>
<p><strong>Finished Render</strong></p>
<p>&nbsp;</p>
<p>After all the above is tweaked to my satisfaction, an adjustment layer is added for final grading and post process image affects. <a title="Magic Bullet" href="http://www.redgiantsoftware.com" target="_blank">Magic Bullet</a> looks helps a lot with the final grade. I have a handful of custom presets that I&#8217;ve made over the years, so I started with one of these. I warmed the image up a bit, added some film grain, subtle chromatic aberration, a bit of diffusion and a very subtle vignette to draw your eye into the image.</p>
]]></content:encoded>
			<wfw:commentRss>http://littleloud.com/2012/08/meet-tara/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Littleloud at the Rezzed game jam</title>
		<link>http://littleloud.com/2012/07/littleloud-at-the-rezzed-game-jam/</link>
		<comments>http://littleloud.com/2012/07/littleloud-at-the-rezzed-game-jam/#comments</comments>
		<pubDate>Wed, 11 Jul 2012 14:47:06 +0000</pubDate>
		<dc:creator>Kerry</dc:creator>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[play]]></category>
		<category><![CDATA[tech]]></category>
		<category><![CDATA[rezzed]]></category>

		<guid isPermaLink="false">http://www.littleloud.com/?p=1782</guid>
		<description><![CDATA[<p>Last weekend, Brighton played host to <a title="Rezzed" href="http://www.rezzed.com/" target="_blank">Rezzed</a>, the brand new PC and indie games show. It was brilliant &#8211; an excellent range of games, developer talks and people dressed as Giger&#8217;s Alien.</p>
<p>I wasn&#8217;t just there for the free badges, though. On Saturday, I participated in the Rock, Paper, Shotgun game jam &#8211; a frankly terrifying event where a dozen or so developers were given a theme, about six inches of desk space and one hour to produce a game.</p>
<p>I&#8217;m delighted to say that I made something... <a href="http://littleloud.com/2012/07/littleloud-at-the-rezzed-game-jam/" class="read_more">read more</a></p>]]></description>
				<content:encoded><![CDATA[<p>Last weekend, Brighton played host to <a title="Rezzed" href="http://www.rezzed.com/" target="_blank">Rezzed</a>, the brand new PC and indie games show. It was brilliant &#8211; an excellent range of games, developer talks and people dressed as Giger&#8217;s Alien.</p>
<p>I wasn&#8217;t just there for the free badges, though. On Saturday, I participated in the Rock, Paper, Shotgun game jam &#8211; a frankly terrifying event where a dozen or so developers were given a theme, about six inches of desk space and one hour to produce a game.</p>
<p>I&#8217;m delighted to say that I made something that I was pleased with, that the audience seemed to enjoy and that didn&#8217;t break when I attempted to demo it to the 300 or so people in the room. I don&#8217;t want to give too much away, but the theme was &#8220;resurrection&#8221; and it&#8217;s a take on the typing tutor genre.</p>
<p><a title="Awake" href="http://www.reallyfancy.com/games/awake/" target="_blank">You can play Awake here</a>.</p>
<p>The whole experience was terrific fun, and I strongly urge you to check out what the other developers got up to &#8211; without sounding too soppy, it&#8217;s genuinely inspiring to see what people can do with an hour and a bit of determination. Both <a title="Rock, Paper, Shotgun" href="http://www.rockpapershotgun.com/2012/07/11/rezzeds-one-hour-gamejam-play-the-results/" target="_blank">Rock, Paper, Shotgun</a> and <a title="Forbes" href="http://www.forbes.com/sites/danielnyegriffiths/2012/07/09/rezzed-one-hour-game-jam/" target="_blank">Forbes</a> have great write ups.</p>
]]></content:encoded>
			<wfw:commentRss>http://littleloud.com/2012/07/littleloud-at-the-rezzed-game-jam/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Making the Thrill Electric</title>
		<link>http://littleloud.com/2012/07/making-the-thrill-electric/</link>
		<comments>http://littleloud.com/2012/07/making-the-thrill-electric/#comments</comments>
		<pubDate>Thu, 05 Jul 2012 09:00:37 +0000</pubDate>
		<dc:creator>Kerry</dc:creator>
				<category><![CDATA[Featured]]></category>
		<category><![CDATA[tech]]></category>
		<category><![CDATA[work]]></category>
		<category><![CDATA[ios]]></category>
		<category><![CDATA[ipad]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[the thrill electric]]></category>
		<category><![CDATA[unity]]></category>
		<category><![CDATA[unity3d]]></category>

		<guid isPermaLink="false">http://www.littleloud.com/?p=1701</guid>
		<description><![CDATA[<p><a href="http://www.littleloud.com/work/the-thrill-electric/">The Thrill Electric</a>, the digital comic we created with Hat Trick Digital, was one of our most technically challenging projects. Each of the ten episodes features hundreds of images, camera effects and animations, integrated videos, music and sound effects &#8211; and all in a stunning interactive 3D environment. This is all possible due to the comic engine we built from scratch for this project, which we&#8217;ve nicknamed Lumi.</p>
<p>We knew from the start that we wanted to push the boundaries of digital... <a href="http://littleloud.com/2012/07/making-the-thrill-electric/" class="read_more">read more</a></p>]]></description>
				<content:encoded><![CDATA[<p><a href="http://www.littleloud.com/work/the-thrill-electric/">The Thrill Electric</a>, the digital comic we created with Hat Trick Digital, was one of our most technically challenging projects. Each of the ten episodes features hundreds of images, camera effects and animations, integrated videos, music and sound effects &#8211; and all in a stunning interactive 3D environment. This is all possible due to the comic engine we built from scratch for this project, which we&#8217;ve nicknamed Lumi.</p>
<p>We knew from the start that we wanted to push the boundaries of digital comics with this project, to make it 3D and to make it cross-platform. With this in mind, Unity was the obvious choice. We&#8217;d used Unity to build 3D games in the past, including <a href="http://www.littleloud.com/work/transformers-decepticon-descent/">Transformers 3</a> and <a href="http://www.littleloud.com/work/iron-man-2-upgraded/">Iron Man Upgraded</a>. We&#8217;d never built anything of this size and scale before, but we were confident that Unity could handle The Thrill Electric.</p>
<p>The early stages of the project consisted mostly of tool development. The key points we focused on at this stage were:</p>
<ul>
<li>Frequent builds. This was vital to a project of this scale, as it allowed us to create test builds when, for example, new dialogue or art was supplied. Frequent builds allowed us to see any layout problems early on.</li>
<li>Automation. What really makes a project of this scale feasible is the ability to drop content into the engine without manual tweaking. The ability to extensively script the Unity IDE allowed us to create a pipeline that allowed us to import artwork, backgrounds, animations, video, sounds and dialogue with ease, meaning that we could quickly respond to updates to the art or dialogue.</li>
</ul>
<p>&nbsp;</p>
<p>Focusing on these areas, we created a robust engine and pipeline that allowed us to automate the creation of 90% of the pages, with only a few very rich scenes requiring special treatment. Once we’d laid this groundwork, we then moved on to achieving the aesthetic effects we wanted &#8211; for example, the multi-layered 3D layout, the playful camera effects and the bespoke animations.</p>
<p>Development of The Thrill Electric wasn&#8217;t completely smooth. The sheer size of the project &#8211; over 10gb, at one point! &#8211; caused some technical problems. However, the Unity team were supportive throughout the process, helping us to work out the causes of crashes, suggesting changes to our workflow and so on.</p>
<p>In addition, we faced specific challenges when exporting such a large, rich project to iOS. We had to be very careful, when optimising the comic for iPhone and iPad, to retain the user experience without sacrificing quality. In particular, this meant focusing on texture optimisation . Having experimented with many options, we found that, in this case, an external tool (<a title="PVRTexTool" href="http://www.imgtec.com/powervr/insider/powervr-pvrtextool.asp" target="_blank">PVRTexTool</a>) offered better compression and image quality than Unity&#8217;s built in tools.</p>
<p>We have a few recommendations for anyone working on a project of this size and complexity in Unity. First of all, check the <a title="Unity Asset Store" href="http://unity3d.com/unity/asset-store/" target="_blank">Asset Store</a> for plugins. Plugins can save you days or weeks of development time, and popular ones will already have been robustly tested by a large user base. Plugins we found helpful on this project included:</p>
<ul>
<li><a title="EZ GUI" href="http://www.anbsoft.com/middleware/ezgui/" target="_blank">EZ GUI</a>, a solution for user interfaces that works cross-platform</li>
<li><a title="Sprite Manager 2" href="http://www.anbsoft.com/middleware/sm2/" target="_blank">Sprite Manager 2</a>, for easy control over animated 2D graphics</li>
<li><a title="FingerGestures" href="http://u3d.as/content/william-ravaine/finger-gestures/21Z" target="_blank">FingerGestures</a>, a tool for managing multitouch gestures across multiple platforms</li>
</ul>
<p>&nbsp;</p>
<p>(Although please note that things move fast, and that there may be better solutions available now.)</p>
<p>In addition, we have more general tips for working on a project of this size. <a title="Asset Server" href="http://unity3d.com/unity/team/assetserver/" target="_blank">Asset Server</a> was absolutely essential to the development of The Thrill Electric. It allowed us to work collaboratively, provided robust version control (allowing us to roll back to a working version if errors were found) and is fully integrated into the Unity environment.</p>
<p>Unity have recently introduced <a title="Cache Server" href="http://unity3d.com/unity/team/cacheserver/" target="_blank">Cache Server</a>, which is designed to ease the pain of working on very large projects in a team environment. It works with Asset Server to reduce the time taken to switch platforms &#8211; which, in our case, took around eighteen hours for each user towards the end of the project!</p>
<p>Following the completion of The Thrill Electric, we&#8217;ve enhanced the Lumi comic book engine further. Lumi can now handle a wide range of enhanced comic formats across multiple platforms, and features an unlimited number of pages, panels, sounds, videos, bespoke animations and even Augmented Reality interactions.</p>
<p>You can view all 10 episodes of The Thrill Electric on the web <a href="http://www.thethrillelectric.com/">here</a>, or download the app for iPhone and iPad <a href="http://itunes.apple.com/gb/app/the-thrill-electric/id503824703?mt=8">here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://littleloud.com/2012/07/making-the-thrill-electric/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>What would Molydeux?</title>
		<link>http://littleloud.com/2012/04/what-would-molydeux/</link>
		<comments>http://littleloud.com/2012/04/what-would-molydeux/#comments</comments>
		<pubDate>Thu, 05 Apr 2012 15:22:02 +0000</pubDate>
		<dc:creator>Kerry</dc:creator>
				<category><![CDATA[play]]></category>
		<category><![CDATA[tech]]></category>
		<category><![CDATA[game jam]]></category>
		<category><![CDATA[molydeux]]></category>
		<category><![CDATA[molyjam]]></category>
		<category><![CDATA[molynew]]></category>

		<guid isPermaLink="false">http://www.littleloud.com/?p=1671</guid>
		<description><![CDATA[<p>Last weekend was the <a title="What would Molydeux? (opens in new window)" href="http://www.whatwouldmolydeux.com/" target="_blank">MolyJam</a>, an international games making event celebrating the work of Twitter games designer <a title="Peter Molydeux (opens in new window)" href="http://twitter.com/#!/petermolydeux" target="_blank">Peter Molydeux</a> &#8211; an affectionate parody of visionary games designer Peter Molyneux.</p>
<p>We at Littleloud sponsored the Brighton outpost, providing beer and pizza to the developers, artists, musicians and designers who turned up to create games in just 48 hours.</p>
<p>I can personally vouch for the fortifying effect of the beer and pizza, as I was one of those developers. I took the following... <a href="http://littleloud.com/2012/04/what-would-molydeux/" class="read_more">read more</a></p>]]></description>
				<content:encoded><![CDATA[<p>Last weekend was the <a title="What would Molydeux? (opens in new window)" href="http://www.whatwouldmolydeux.com/" target="_blank">MolyJam</a>, an international games making event celebrating the work of Twitter games designer <a title="Peter Molydeux (opens in new window)" href="http://twitter.com/#!/petermolydeux" target="_blank">Peter Molydeux</a> &#8211; an affectionate parody of visionary games designer Peter Molyneux.</p>
<p>We at Littleloud sponsored the Brighton outpost, providing beer and pizza to the developers, artists, musicians and designers who turned up to create games in just 48 hours.</p>
<p>I can personally vouch for the fortifying effect of the beer and pizza, as I was one of those developers. I took the following tweets as my inspiration: “You know in cut scenes when it says 3 months later&#8230;? What if the game ACTUALLY locked your save file for 3 months?” and “What if games rewarded you for believing rather than winning?”. From these, I came up with a gentle and melancholy adventure game starring swans, which takes place over six real-time days. If that description hasn&#8217;t put you off too much, you can play Six <a title="Six (opens in new window)" href="http://reallyfancy.com/games/six/" target="_blank">here</a>.</p>
<p>Our Technical Director, Iestyn, also made a game. Taking “Just imagine for a moment that you could actually take CONTROL of a door” as his inspiration, he created a game in which a murderous door gaily flings office workers to their deaths. Built with Unity and PlayMaker, it features AI, pathfinding, physics and at least one truly terrible pun. You can play Murdoor <a title="Murdoor (opens in new window)" href="http://iestyn.net/murdoor/" target="_blank">here</a>.</p>
<p>At six o&#8217;clock on Sunday, everybody showed off what they&#8217;d made. The games made in Brighton included a text adventure about a pigeon, a baby-comforting simulator and a beautiful adventure game featuring a sinister kite. You can see all the Brighton games &#8211; and indeed the rest of the MolyJam games - <a title="MolyJam archive (open in new window)" href="http://www.whatwouldmolydeux.com/archive.php" target="_blank">here</a>. It was, not to sound too sentimental here, really inspiring to see all that creativity and hard work and collaboration pay off.</p>
<p>Then we all went home to dream fitfully about code and swans and possible bugs. Or maybe that was just me.</p>
<p>The Brighton event couldn&#8217;t have happened without the awesome efforts of Edd Paris who organised the whole thing, Jo Summers who provided invaluable ground support, The Skiff who let us use their lovely venue and Relentless, our co-sponsors. Oh, and everyone who spent their really sunny weekend indoors, making ridiculous games, of course.</p>
<p>&nbsp;</p>
<p><em>&#8220;What would Molydeux&#8221; image by <a title="Joe Kowalski (opens in new window)" href="http://codeloss.com/" target="_blank">Joe Kowalski</a></em></p>
]]></content:encoded>
			<wfw:commentRss>http://littleloud.com/2012/04/what-would-molydeux/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
