<?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>Thinking in Code &#187; Papervision</title>
	<atom:link href="http://www.michelboudreau.com/category./papervision/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.michelboudreau.com</link>
	<description>Michel Boudreau&#039;s Personal Blog</description>
	<lastBuildDate>Wed, 25 Apr 2012 20:18:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>FITC Toronto 2009</title>
		<link>http://www.michelboudreau.com/2009/05/01/fitc-toronto-2009/</link>
		<comments>http://www.michelboudreau.com/2009/05/01/fitc-toronto-2009/#comments</comments>
		<pubDate>Fri, 01 May 2009 19:17:46 +0000</pubDate>
		<dc:creator>Michel Boudreau</dc:creator>
				<category><![CDATA[Flash Platform]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Papervision]]></category>
		<category><![CDATA[FITC]]></category>

		<guid isPermaLink="false">http://www.michelboudreau.com/?p=100</guid>
		<description><![CDATA[As my first experience going to FITC, there&#8217;s only one ...]]></description>
			<content:encoded><![CDATA[<p>As my first experience going to <a href="http://www.fitc.ca" target="_blank">FITC</a>, there&#8217;s only one word to describe it all.</p>
<p><strong>Epic.</strong></p>
<p>Considering the amount of people there (and surprisingly, a lot of females), the big names in the industry coming to it (<a href="http://www.moock.org" target="_blank">Colin Moock</a>, <a href="http://www.gskinner.com/" target="_blank">Grant Skinner</a>, <a href="http://www.unitzeroone.com/blog/" target="_blank">Ralph Hauwert</a> to name a few), and the fun and knowledge being thrown around; it makes for one hell of a conference.</p>
<p>I was impressed with several of the new technology presentations like <a href="https://www.scaleform.com/" target="_blank">Scaleform</a> (Flash Player within 3D games), <a href="http://www.tryunion.com" target="_blank">Union</a> (Easy to use and free multiuser framework) and <a href="http://blog.papervision3d.org/" target="_blank">PapervisionX</a> (The latest papervision version using FP10 and Alchemy).  To see all these projects and new technologies being used is very exciting stuff.  Seeing what the future holds for people in this industry is nice since you can start learning now and expect it to become big in the near future.</p>
<p>I will definitely be at the next one, and hopefully one way I&#8217;ll be able to be a speaker for one of these events in my career.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.michelboudreau.com/2009/05/01/fitc-toronto-2009/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Dabbling in Papervision</title>
		<link>http://www.michelboudreau.com/2009/01/06/dabbling-in-papervision/</link>
		<comments>http://www.michelboudreau.com/2009/01/06/dabbling-in-papervision/#comments</comments>
		<pubDate>Tue, 06 Jan 2009 23:00:43 +0000</pubDate>
		<dc:creator>Michel Boudreau</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Papervision]]></category>
		<category><![CDATA[Collada]]></category>
		<category><![CDATA[game]]></category>
		<category><![CDATA[image map]]></category>
		<category><![CDATA[import]]></category>
		<category><![CDATA[model]]></category>

		<guid isPermaLink="false">http://www.michelboudreau.com/?p=52</guid>
		<description><![CDATA[A few months ago, I was approached by the president ...]]></description>
			<content:encoded><![CDATA[<p>A few months ago, I was approached by the president of the company I&#8217;m currently working for.</p>
<p>He needed a game; more precisely, one of our clients needed a game.  The president approached me for two reasons:  I&#8217;m the flash guru in this joint and he knew I wanted to work in games.  We sat down with the client and talked more about the game, how it&#8217;ll play and more importantly, how it&#8217;ll look.</p>
<p>Without a doubt, I pitched the idea that we use<a href="http://blog.papervision3d.org/" target="_blank"> Papervision 3D</a> to render the game.  It&#8217;ll add the extra wow factor to the project when combining it with a proper 2D physics engine to create something that should look and feel like the real thing.  After showing a few examples of what Papervision 3D can do, they were both sold that we should use this technology.  Only problem was, I never used it before and I needed to learn it quickly to get a working prototype up.</p>
<p><span id="more-52"></span></p>
<p>Being an open source project, it was lacking what open source projects lack the most; proper documentation.  A lot of my questions could not be answered through the internet since this project is still very new and not a whole lot of people have dabbled in it.  However, luckily for me, there was an <a href="http://pv3d.org/chat/" target="_blank">irc chan</a> with some really helpful people that saved my ass on several occasions.</p>
<p>For our purposes, we needed two different viewports with two cameras (a shot cam and an overview cam) and because of this, we could only go with the very latest version of <a href="http://papervision3d.googlecode.com/svn/trunk/as3/trunk" target="_blank">Papervision (Great White)</a>.  For the physics engine, we needed something that&#8217;s fast, easy to use and easy to modify.  I personally selected the <a href="http://www.cove.org/ape/" target="_blank">APE engine</a> since it was one of the least complex, yet it was fast and did it&#8217;s job properly.  I needed something not too complex since I&#8217;m no physics major and furthermore, I needed to modify the engine to have &#8216;z friction&#8217; since this is a 2D engine.  I decided to go with a 2D engine because a 3D engine would be too complex and slow for something which is essentially 2D with a deceleration of speed when moving which I call &#8216;z friction&#8217;.</p>
<p>The learning curve wasn&#8217;t too steep, which is good since we had a tight deadline for this project.  The beginning tutorial on papervision is easy to follow, but the more advanced topics aren&#8217;t exactly talked about and that&#8217;s where things became a hassle.  With our engines chosen, it was off to the races to get this out.</p>
<p><strong>Modeling</strong></p>
<p>When I was in my teens, I did some 3D modeling using <a href="http://www.newtek.com" target="_blank">Lightwave</a> which was self-taught using online resources.  I wasn&#8217;t an expert, but it gave me some basic concepts on how to model and texture.  Thankfully, this knowledge was enough to get me by on this project.</p>
<p>However, there is one important question to ask yourself before you do anything else:  Do I really need a model of that?</p>
<p>Simple question, but I noticed that just a few polygons removed can make a significant difference in processing speed.  Sometimes it&#8217;s the model that&#8217;s too complex, sometimes the texture.  Either way, we needed this game to be able to run on most computers, so performance was the utmost priority.</p>
<p>At first, I used a plane to have the ice surface on.  After trying this out for a while, I decided against it because it was hogging resources to render it.  Instead, I made the background static (both the overview background and shot background), this gave the game a 35% performance increase.  So, before you start modeling, ask yourself if a model is really required, or you could get away with a simple image or some other ingenious solution.</p>
<p>The first obstacle was to import a model into Papervision that was modeled with 3dsmax.  Since Papervision uses the Collada file format to import their models, I decided to use that.  Luckily enough, there&#8217;s a free plugin to export Collada files with 3dsmax (don&#8217;t use the native collada exporter) called <a href="http://update.multiverse.net/wiki/index.php/Installing_the_3ds_Max_COLLADA_Plugin" target="_blank">ColladaMax</a>.  After installing the plugin, we need to create our model; let&#8217;s create a box for example sake.  Next, click the modify tab and make sure our box is selected.  We are now going to create a UVW Map for the box so to texture our model.  Drop down the modifier list and add &#8216;Unwrap UVW&#8217; from the list.  Now, find the &#8216;Parameters&#8217; box and click on the &#8216;Edit&#8217; button.  This will pop up a window with a mesh (a square if you made a box).  Normally, the mesh is a lot more complex when it isn&#8217;t a primitive object and we would need to turn this mesh into a human understandable map.  To simplify it, click the &#8216;Face Sub &#8211; Object Mode&#8217; button at the bottom then click on the &#8216;Mapping&#8217; menu bar item and click on &#8216;Flatten Mapping&#8217;.  Keep the numbers in the popup box as default and click &#8216;ok&#8217;.</p>
<p>You should now see each face of your object in 2D.  Now remove the checkerboard texture from the dropdown box at the top right by clicking on &#8216;Remove Texture&#8217;.  Then click the &#8216;Tools&#8217; menu bar item and select &#8216;Render UVW Template&#8217;.  Keep the defaults and click on the &#8216;Render UV Template&#8217; button. A new window should appear with all your faces outlined.  Click the top-left button to save your template as an image where you can then open it using your favorite image editing software and add whichever texture you want to each face then save your changes while removing the actual template.</p>
<p>Now we&#8217;re going to add the texture to our object. Open the Material Editor window (under Rendering -&gt; Material Editor), and change the name of the material in the combobox to whatever you want or just keep it as default.  Then we will add the image map to this material by pressing the button on the right of the &#8216;Diffuse&#8217; box.  A window should appear with a list and in that list, click on &#8216;Bitmap&#8217;.  You can now choose the texture you want to add to it.  You then just need to click the &#8216;Assign Material to Selection&#8217; button located near the top of the Material Editor window.  That&#8217;s it, our map is now complete.  Now you can see the object with the current applied map to it and you can modify the texture and the changes will be applied to the object in real time.</p>
<p>The last step is to export the model in Collada file format.  Select &#8216;Export Selected&#8217; from the File menu item and select the file type to be &#8216;COLLADA(*.DAE)&#8217; and choose a filename.  A window should appear, make sure that &#8216;Relative Paths&#8217; and &#8216;Triangulate&#8217; option is selected.  The relative paths is so that the texture is in a relative directory from the file you&#8217;re saving (ie. ../../images/texture.jpg).  And that&#8217;s it, you&#8217;re now ready to load your model within papervision!</p>
<p><strong>Importing Model</strong></p>
<p>My prefered way to import a model is to create a subclass of the Collada class to load the model and then you can modify it from within the class as you want.  It&#8217;s also useful to have all the physics related to the model within this subclass.  Here&#8217;s an example class:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #9900cc; font-weight: bold;">package</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.events</span><span style="color: #000066; font-weight: bold;">.*;</span>
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">import</span> org<span style="color: #000066; font-weight: bold;">.</span>papervision3d<span style="color: #000066; font-weight: bold;">.</span>events<span style="color: #000066; font-weight: bold;">.</span>FileLoadEvent<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">import</span> org<span style="color: #000066; font-weight: bold;">.</span>papervision3d<span style="color: #000066; font-weight: bold;">.</span>events<span style="color: #000066; font-weight: bold;">.</span>InteractiveScene3DEvent<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">import</span> org<span style="color: #000066; font-weight: bold;">.</span>papervision3d<span style="color: #000066; font-weight: bold;">.</span>objects<span style="color: #000066; font-weight: bold;">.</span>DisplayObject3D<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">import</span> org<span style="color: #000066; font-weight: bold;">.</span>papervision3d<span style="color: #000066; font-weight: bold;">.</span>objects<span style="color: #000066; font-weight: bold;">.</span>parsers<span style="color: #000066; font-weight: bold;">.</span>Collada<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">import</span> org<span style="color: #000066; font-weight: bold;">.</span>papervision3d<span style="color: #000066; font-weight: bold;">.</span>materials<span style="color: #000066; font-weight: bold;">.</span>utils<span style="color: #000066; font-weight: bold;">.</span>MaterialsList<span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
	<span style="color: #3f5fbf;">/**
	*  Creates the different rocks to be displayed in the game
	*
	* @see org.papervision3d.objects.parsers.Collada
	* @see org.papervision3d.objects.DisplayObject3D
	*/</span>
	<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> SomeModel <span style="color: #0033ff; font-weight: bold;">extends</span> Collada
	<span style="color: #000000;">&#123;</span>
		<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> modelLoaded<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span> = <span style="color: #0033ff; font-weight: bold;">false</span><span style="color: #000066; font-weight: bold;">;</span> <span style="color: #009900; font-style: italic;">// loaded flag</span>
&nbsp;
		<span style="color: #3f5fbf;">/**
		* Constructor
		*
		* @param matList:MaterialList the material list to be added to the model
		* @param name:String name of this specific rock
		*/</span>
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> SomeModel<span style="color: #000000;">&#40;</span>matList<span style="color: #000066; font-weight: bold;">:</span>MaterialsList<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #004993;">name</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">String</span> = <span style="color: #0033ff; font-weight: bold;">null</span><span style="color: #000000;">&#41;</span>
		<span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">super</span><span style="color: #000000;">&#40;</span><span style="color: #990000;">'modelPath.dae'</span><span style="color: #000066; font-weight: bold;">,</span> matList<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #004993;">name</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
&nbsp;
			<span style="color: #009900; font-style: italic;">// listen for when it's done</span>
			<span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span>FileLoadEvent<span style="color: #000066; font-weight: bold;">.</span>LOAD_COMPLETE<span style="color: #000066; font-weight: bold;">,</span> handleLoadComplete<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
		<span style="color: #000000;">&#125;</span>
&nbsp;
                <span style="color: #3f5fbf;">/**
		*  Handles the event when the broom finishs loading the material and model.
		*  Certain properties cannot be accessed until model is fully loaded
		*
		*  @param e:Event event handler object
		*  @return void
		*/</span>
		<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> handleLoadComplete<span style="color: #000000;">&#40;</span>e<span style="color: #000066; font-weight: bold;">:</span><span style="color: #004993;">Event</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
		<span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000066; font-weight: bold;">.</span>modelLoaded = <span style="color: #0033ff; font-weight: bold;">true</span><span style="color: #000066; font-weight: bold;">;</span>
		<span style="color: #000000;">&#125;</span>
      <span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>This will load the model, but will not add it to the scene, you need to use the &#8216;scene.addChild&#8217; function to add the model to your scene.  The material list that needs to be provided is the texture that was used on your model in 3dsmax.  So, to instantiate the class to add it to the stage, you&#8217;d do something like this:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #6699cc; font-weight: bold;">var</span> mat<span style="color: #000066; font-weight: bold;">:</span>BitmapFileMaterial = <span style="color: #0033ff; font-weight: bold;">new</span> BitmapFileMaterial<span style="color: #000000;">&#40;</span><span style="color: #990000;">&quot;boxMaterial.jpg&quot;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #6699cc; font-weight: bold;">var</span> model<span style="color: #000066; font-weight: bold;">:</span>SomeModel = <span style="color: #0033ff; font-weight: bold;">new</span> SomeModel<span style="color: #000000;">&#40;</span>mat<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #990000;">'someBox'</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
scene<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span>model<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></pre></div></div>

<p><strong>Rendering</strong></p>
<p>A problem I&#8217;ve noticed early on is how the rendering engine works.  Apparently, it uses a painter&#8217;s algorithm which isn&#8217;t exactly perfect and when it comes to displaying objects that are close to each other, it can create some flickering.  After a lot of searching, some people on the irc chan helped out.  I needed to change the rendering order of the object manually using a z sort.  To do this, you need to access your viewport and change the sortMode property like so:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #0033ff; font-weight: bold;">import</span> org<span style="color: #000066; font-weight: bold;">.</span>papervision3d<span style="color: #000066; font-weight: bold;">.</span>view<span style="color: #000066; font-weight: bold;">.</span>layer<span style="color: #000066; font-weight: bold;">.</span>util<span style="color: #000066; font-weight: bold;">.</span>ViewportLayerSortMode<span style="color: #000066; font-weight: bold;">;</span>
viewport<span style="color: #000066; font-weight: bold;">.</span>containerSprite<span style="color: #000066; font-weight: bold;">.</span>sortMode = ViewportLayerSortMode<span style="color: #000066; font-weight: bold;">.</span>INDEX_SORT<span style="color: #000066; font-weight: bold;">;</span></pre></div></div>

<p>After that, the rest was easy.  I placed all rendered objects in a 2D array consisting of the object itself then it&#8217;s z coordinate.  Since the camera was at (0, 0, 0), we can sort the array using the z index in descending order and add the proper layerIndex to each model.</p>
<p><strong>Conclusion</strong></p>
<p>This game was quite an experience and has gotten quite a good amount of attention.  Throughout the whole project, creating the model, adding the texture and the z sorting was the biggest challenges because of lack of information.  Hopefully this will help anyone out there.  Please be free to ask any questions or come visit on the irc chan.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.michelboudreau.com/2009/01/06/dabbling-in-papervision/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic
Page Caching using disk: enhanced
Database Caching 1/17 queries in 0.005 seconds using disk: basic
Object Caching 339/364 objects using disk: basic

Served from: www.michelboudreau.com @ 2012-05-21 06:53:50 -->
