csharp
/
MonoGame.XNASamples
mirror of https://github.com/SimonDarksideJ/XNAGameStudio.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017
							<html xmlns:MSHelp="http://msdn.microsoft.com/mshelp" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:xanx="http://schemas.microsoft.com/developer/xanx/2005"><head><META http-equiv="Content-Type" content="text/html; charset=utf-8"><META NAME="save" CONTENT="history"><title>Sprite Sheet Sample</title>
<style><!--
/***********************************************************
 *             SCRIPT-SUPPORTING STYLES
 ***********************************************************/

/* Defines the userData cache persistence mechanism. */
.userDataStyle
{
	behavior: url(#default#userData);
}

/* Used to save the scroll bar position when navigating away from a page. */
div.saveHistory
{
	behavior: url(#default#saveHistory);
}

/* Formats the expand/collapse images for all collapsible regions. */
img.toggle
{
	border: 0;
	margin-right: 5;
}

/* Formats the Language filter drop-down image. */
img#languageFilterImage
{
	border: 0;
	margin-left: 0;
	vertical-align: middle;
}

/* Formats the Members Options filter drop-down image. */
img#membersOptionsFilterImage
{
	border: 0;
	margin-left: 0;
	vertical-align: middle;
}

/* Formats the Collapse All/Expand All images. */
img#toggleAllImage
{
	margin-left: 0;
	vertical-align: middle;
}

/* Supports XLinks */
MSHelp\:link
{
 	text-decoration: underline;
	color: #0000ff; 
	hoverColor: #3366ff;
	filterString: ;
}


body
	{
	background:	#FFFFFF;
	color: #000000;
	font-family:	Verdana;
	font-size: medium;
	font-style: normal;
	font-weight: normal;
	margin-top:	0;
	margin-bottom:	0;
	margin-left:	0;
	margin-right:	0;
	width:	100%;
	/*font-size: 110%;*/
	}

div.section
	{
	margin-left: 15px;
	}

div.hxnx5
	{
	margin-left: 1.5em;
	}

/* Font for all headings */	
h1, h2, h3, h4, h5, h6
	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-top: 18;
	margin-bottom: 8; 
	font-weight: bold;
	}
h1
	{
	font-size: 130%;
	color: #003399;
	}
div#scrollyes h1 /* Changes font size for full-scrolling topic */
	{
	font-size: 150%;
	}
h2
	{
	font-size: 125%;
	}
h3
	{
	font-size: 115%;
	margin-top: 9;
	margin-bottom: 4; 
	}
h4
	{
	font-size: 115%;
	margin-top: 9;
	margin-bottom: 4; 
	}
h5
	{
	font-size: 100%;
	margin-top: 9;
	margin-bottom: 4; 
	}
h6
	{
	font-size: 100%;
	margin-top: 9;
	margin-bottom: 4; 
	}

ul p, ol p, dl p
	{
	margin-left: 0em;
	}

p
	{
	margin-top: .6em;
	margin-bottom: .6em;
	}
	
td p
	{
	margin-top: 0.0em;
	margin-bottom: 0.6em;
	}

dd p
	{
	margin-top: 0.0em;
	margin-bottom: 0.6em;
	}

.image
	{
	text-align: center;
	}

dl
	{
	margin-top: 0em; 
	margin-bottom: 1.3em;
	}

dd
	{
	margin-bottom: 0em;
	margin-left: 1.5em;
	}

dl.glossary dd 
{
	margin-bottom: 0em;  
	margin-left: 1.5em; 
}

dt
	{
	margin-top: .6em;
	margin-bottom: 1;
	}

ul, ol
	{
	margin-top: 0.6em;
	margin-bottom: 0.6em; 	
	}
	
ol
	{
	margin-left: 2.5em; 
	
	}	
	
ul
	{
	list-style-type: disc; 
	margin-left: 1.9em; 
	}

li
	{
	margin-bottom: 0.4em;
	}

ul ol, ol ol
	{
	list-style-type: lower-alpha;
	}

pre
	{
	margin-top: .6em;
	margin-bottom: .6em; 
	}

pre
	{
	font: 105% Lucida, mono; 
	color: #000066;
	}

code
{
	font-family: Monospace, Courier New, Courier;
	font-size: 105%;
	color:	#000066;
}

table.userdata td 
	{
	background: #ffffff;
	background-color: #F5F5F5;
	border-color: #ffffff;
	border: none;
	}	
table.clsWarning
	{
	background: #ffffff;
	padding: 0px;
	margin: 0px;
	border: none;
	}
table.clsWarning td
	{
	padding: 0px;
	margin: 0px;
	background: #ffffff;
	vertical-align: middle;
	font-size: 70%;
	}

div#mainSection table
	{
	width: 98%;
	background: #ffffff;
	margin-top: 5px;
	margin-bottom: 5px;
	}

div#mainSection table th
	{ 
	padding: 5px 6px;
	background: #EFEFF7;
	text-align: left;
	font-size: 70%;
	vertical-align: bottom;
	border-bottom: 1px solid #C8CDDE;
	}
div#mainSection table td
	{ 
	padding: 5px 5px;
	background: #F7F7FF;
	vertical-align: top;
	font-size: 70%;
	border-bottom: 1px solid #D5D5D3;
	}

div#syntaxCodeBlocks table th
	{
	padding: 1px 6px;
	color: #000066;
	}

div#syntaxCodeBlocks table td
	{
	padding: 1px 5px;
	}

/* Applies to the running header text in the first row of the upper table in the
   non-scrolling header region. */
span#runningHeaderText
{
	color: #003399;
	font-size: 90%;
	padding-left: 13;
}

/* Applies to the topic title in the second row of the upper table in the
   non-scrolling header region. */
span#nsrTitle
{
	color: #003399;
	font-size: 120%;
	font-weight: 600;
	padding-left: 13;
}

/* Applies to everything below the non-scrolling header region. */
div#mainSection
{
	font-size: 70%;
	width: 100%;
}

/* Applies to everything below the non-scrolling header region, minus the footer. */
div#mainBody
{
	font-size: 90%;
	margin-left: 15;
	margin-top: 10;
	padding-bottom: 20;
}

/* Adds right padding for all blocks in mainBody */
div#mainBody p, div#mainBody ol, div#mainBody ul, div#mainBody dl
{
	padding-right: 5;
}

div#mainBody div.alert, div#mainBody div.code, div#mainBody div.tableSection
{
	width:98.9%;
}

div.alert p, div.code p
{
	margin-top:5;
	margin-bottom:8;
}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Begin Note Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
div#mainSection div.alert table
{
	border: 0;
}

div#mainSection div.alert table th
{
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 5;
	padding-right: 5;
}

div#mainSection div.alert table td
{
	padding-left: 5;
	padding-right: 5;
}

img.note
{
	border: 0;
	margin-left: 0;
	margin-right: 3;
}
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - End Note Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Begin Non-scrolling Header Region Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* Applies to the entire non-scrolling header region. */
div#header
{
	background-color: #D4DFFF;
	padding-top:	0;
	padding-bottom:	0;
	padding-left:	0;
	padding-right:	0;
	width:	100%;
}

/* Applies to both tables in the non-scrolling header region. */
div#header table
{
	margin-top:	0;
	margin-bottom: 0;
	border-bottom-color: #C8CDDE;
	border-bottom-style: solid;
	border-bottom-width: 1;
	background: #D4DFFF;
	width:	100%;
}

/* Applies to cells in both tables in the non-scrolling header region. */
div#header table td
{
	color: #0000FF;
	font-size: 70%;
	padding-right: 20;
	padding-top: 1;
	padding-bottom: 1;
	border: none;
	background: #D4DFFF;
}

/* Applies to the last row in the upper table of the non-scrolling header region. Text 
   in this row includes See Also, Constructors, Methods, and Properties. */
div#header table tr#headerTableRow3 td
{
	padding-bottom: 2;
	padding-top: 5;
	padding-left: 15;
}

/* Applies to the lower table in the non-scrolling header region. Text in this table
   includes Collapse All/Expand All, Language Filter, and Members Options. */
div#header table#bottomTable
{
	border-top-color: #FFFFFF;
	border-top-style: solid;
	border-top-width: 1;
	text-align: left;
	padding-left: 15;
}


blockquote
	{
	margin-left: 3.8em;
	margin-right: 3.8em;
	margin-top: .6em;
	margin-bottom: .6em;
	}

sup
	{
	text-decoration: none;
	font-size: smaller; 
	}

a:link
	{
	color: #0000FF;
/*    font-weight: bold */
	}
	
a:visited
	{
	color: #0000AA;
/*    font-weight: bold	*/
	}
	
a:hover
	{
	color: #3366FF;
/*    font-weight: bold */
	}
	
.label
	{
	font-weight: bold; 
	margin-top: 1em;
	margin-left: -26px;
	}
	
.tl
	{
	margin-bottom: .75em; 
	}
	
.atl
	{
	padding-left: 1.5em;
	padding-bottom: .75em; 
	}
	
.cfe
	{
	font-weight: bold; 
	}
	
.mini
	{
	font-size: smaller;
	}
	
.dt
	{
	margin-bottom: -.6em; 
	}
	
.indent
	{
	margin-left: 1.9em; 
	margin-right: 1.9em;
	}

.product
	{
	text-align: right;
	color: #333333;
	font-size: smaller;
	font-style: italic;
	}

.buttonbarshade
	{
	position: relative;
	margin: 0;
	left: 0px;
	top: 2;
	width: 50%;
	height: 40px;
	}

.buttonbartable
	{
	position: absolute;
	margin: 0;
	padding:0;
	border:0;
	left:0px;
	top: 2;
	width: 100%;
	height: 40px;
	}

/* background color, font for header */ 
table.buttonbartable td, table.buttonbarshade td
	{
	background: #ffffff; /*#5177B8; #80C615;*/
	border-left: 0px solid #80C615;
	margin: 0;
	padding: 0px 0px 0px 0px;
	font-family: Impact, sans-serif;
	font-size: 14pt;
	}

table.buttonbartable td.button1
	{
	background: #5177B8; /*#80C615;*/;
	padding: 0;
	font-weight: bold;
	text-align: center;
	cursor: hand;
	}

table.buttonbartable td.button2
	{
	background: #5177B8; /*#80C615;*/;
	font-weight: bold;
	text-align: center;
	}

table.buttonbartable td.button3
	{
	background: #5177B8; /*#80C615;*/;
	font-weight: bold;
	text-align: center;
	}

table.buttonbartable td.runninghead
	{
	padding-left: 0px;
	font-style: italic;
	text-align: left;
	}

.version
	{
	text-align: left;
	color: #000000;
	margin-top: 3em;
	margin-left: -26px;
	font-size: smaller;
	font-style: italic;
	}

.lang, .ilang
	{
	color: #0000ff;
	font: normal 7pt Arial, Helvetica, sans-serif;
	}

div.langMenu
	{
	position: absolute;
	z-index: 1;
	width: 96pt;
	padding: 8pt;
	visibility: hidden;
	border: 1px solid #000000;
	background: #ffffd0;
	}

div.langMenu ul
	{
	padding-left: 2em;
	margin-left: 0;
	}

div.filtered
	{
	margin: 4pt 0 8pt -26px;
	padding: 4px 4px 8px 26px;
	width: 100%;
	border: 2px solid #aaaacc;
	background: #ffffff;
	}

div.filtered2
	{
	margin: 4pt 0 8pt -26px;
	padding: 4px 4px 8px 26px;
	width: 100%;
	border: none;
	background: #ffffff;
	}

div.filtered h1, div.filtered h2, div.filtered h3, div.filtered h4
	{
	margin-left: -22px;
	}

div.filtered span.lang
	{
	position: relative;
	left: -22px;
	}

div.reftip
	{
	position: absolute;
	z-index: 1;
	padding: 8pt;
	visibility: hidden;
	border: 1px solid #000000;
	background: #ffffd0;
	}

a.synParam
	{
	color: #0000FF;
	/*color: #3F7800;*/ 	
	/*color: #8DC54F;*/
	text-decoration: none;
    font-weight: normal;
	}

a.synParam:hover
	{
	text-decoration: underline;
    font-weight: normal;
	}

div.sapop
	{
	position: absolute;
	z-index: 1;
	left: 26px;
	width: 100%;
	padding: 10px 10px 10px 36px;
	visibility: hidden;
	border: 1px solid #000000;
	background: #ffffd0;
	}

div.footer
	{
	width: 100%;
	border: none;
	background: #ffffff;
	margin-top: 18pt;
	padding-bottom: 12pt;
	color: #0000FF;
	/*color: #228B22; */
	text-align: center;
	font-size: 76%;
	}

div.preliminary
	{
	margin-top: 8pt;
	padding-bottom: 12pt;
	color: #A0A0A0;
	}

/* A procedure section. eg. 'To create a file', 'To add a value' */
div.proc
    {
	margin-left: 0.5em; 
    }
     
/* The title of a 'procedure' section. */
div.proc h3
    {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 115%;
	margin-top: 1em;
	margin-bottom: 0.4em;
	margin-left: -0.5em; 
	color: #003399;
    }

div.proc ul
    {
    margin-left: 1.5em;
    }

div.proc ol
    {
    margin-left: 2.0em;
    }
      
.note
	{
	margin-left: 14pt;
	margin-right: 12pt;
	}

.indent1
	{
	margin-left: 12pt;
	}

.indent2
	{
	margin-left: 24pt;
	}

.indent3
	{
	margin-left: 36pt;
	}

p.proch
	{
	padding-left: 16px;
	}

p.proch img
	{
	position: relative; 
	vertical-align: top;
	left: -18px; 
	margin-right: -14px; 
	margin-bottom: -18px;
	}
	
div.clsPlatSpec
{
	background-color:#FFF8DC;
	border-style:solid;
	border-width:1pt 0pt 0pt 1pt;
	border-color:#ffE4C4;
	margin-top:0.6em;
	width:100%;
}


/* Applies to the language labels in the Language Filter drop-down list. */
.languageFilter
{
	color:	#0000FF;
	cursor:hand;
	text-decoration:underline;
	padding-bottom:4;
}

/* Dropdown areas */

#languageSpan {
	position: absolute;
	visibility: hidden;
	border-style: solid;
	border-width: 1px;
	border-color: #C8CDDE;
	background: #d4dfff;
	padding: 4px;
	font-size: 70%;
}

#membersOptionsSpan {
	position: absolute;
	visibility: hidden;
	border-style: solid;
	border-width: 1px;
	border-color: #C8CDDE;
	background: #d4dfff;
	padding: 4px;
	font-size: 70%;
}
--></style>

<xml>
<MSHelp:TOCTitle Title="Sprite Sheet Sample" />
<MSHelp:RLTitle Title="Sprite Sheet Sample" />
<MSHelp:Keyword Index="A" Term="O:Microsoft.Xna.SpriteSheet" />
<MSHelp:Keyword Index="A" Term="3d1d46c0-ccf3-7096-5775-cccc9a4ee950" />
<MSHelp:Keyword Index="K" Term="Sprite Sheet Sample" />

<MSHelp:Attr Name="AssetID" Value="3d1d46c0-ccf3-7096-5775-cccc9a4ee950" />
<MSHelp:Attr Name="Locale" Value="en-us" />
<MSHelp:Attr Name="CommunityContent" Value="1" />
<MSHelp:Attr Name="TopicType" Value="kbOrient" />
<MSHelp:Attr Name="DocSet" Value="XNA" />
<MSHelp:Attr Name="DocSet" Value="ExpressLibVS" />
<MSHelp:Attr Name="DocSet" Value="C#" />
<MSHelp:Attr Name="ProjType" Value="LocalProj" />
<MSHelp:Attr Name="ProjType" Value="XNA_31" />
<MSHelp:Attr Name="ProjType" Value="XNA_30" />
<MSHelp:Attr Name="Technology" Value="XNA" />
</xml>
</head><body><div id="mainSection"><div id="mainBody">

  <h1>Sprite Sheet Sample</h1>

  This sample shows how to implement sprite sheets, combining many separate sprite images into a single larger texture that will be more efficient for the graphics card.

  <a name="ID4EK"></a><h1 class="heading">Sample Overview</h1><div id="ID4EK" class="hxnx1">
    

    <p>Graphics cards are slow to get going, but then extremely fast after they start. If you ask the graphics card to draw one single triangle, it will take a relatively long time for it to wake up and notice your request, but then it will draw the triangle in hardly any time at all. If you ask it to draw 100 triangles, it will take exactly the same amount of time to get going, and then draw all 100 triangles in not much longer time than it took for just one. To get the best performance, you want to give the graphics card large batches of triangles rather than feeding them to it one at a time.</p>

    <p>
      The <b>SpriteBatch</b> class in the XNA Framework does exactly this. If you draw more than one sprite in a row using the same texture, it will batch them up, then give them all to the graphics card in one event. This works only when the sprites use the same texture, however. If you draw two sprites using texture A, then two using texture B, <b>SpriteBatch</b> will say, "Hey graphics card, here are two sprites. Now stop, change your texture. OK, now here are two more sprites." It would be faster if it could give all four sprites to the graphics card in a single batch, but it cannot do this because the texture is not the same.
    </p>

    <p>
      What if you made a single bigger texture that contained the image from texture A and also the image from texture B, arranged next to each other? You could then use the overload of <b>SpriteBatch.Draw</b> that lets you specify a source rectangle parameter, telling the card which part of this bigger texture to display on the screen. The results will look the same as before, but now all four sprites use the same texture, so <b>SpriteBatch</b> can render them more efficiently.
    </p>

    <p>
      Manually combining sprite images into larger sheets works well if you have just a few sprites, but it quickly becomes a burden as your game grows larger. When you have hundreds of sprites, it can be laborious having to manually pack them all into a single sprite sheet texture, and then remember where you put each image so you know what source rectangle to pass to <b>SpriteBatch.Draw</b> in your game code.
    </p>

    <p>This sample automates the process of creating sprite sheets by using a custom content processor. You provide an XML file listing any number of individual bitmap files, one per sprite. The processor reads all these bitmaps, packs them into a single larger texture, and saves this new texture along with information recording what source rectangle should be used for each sprite. You can then look up your sprites by name rather than having to remember the specific coordinates for each image.</p>

    <a name="ID4EFB"></a>

    <a name="ID4ERB"></a><h2 class="subHeading">Sample Controls</h2><div id="ID4ERB" class="hxnx2">
      
      <p>This sample uses the following keyboard and gamepad controls.</p>

      <table>
        <tr>
          <th>Action</th>
          <th>Keyboard control</th>
          <th>Gamepad control</th>
          <th>Windows Phone</th>
        </tr>
        <tr>
          <td>Exit the sample.</td>
          <td>ESC or ALT+F4</td>
          <td>
            <b>BACK</b>
          </td>
          <td>
            <strong>BACK</strong></td>
        </tr>
      </table>
    </div>
  </div>

  <a name="ID4ERC"></a><h1 class="heading">How the Sample Works</h1><div id="ID4ERC" class="hxnx1">
    

    <p>Sprite sheets are created from XML files that list any number of individual sprite bitmaps, for instance:</p>

    <pre>
      &lt;XnaContent&gt;
      &lt;Asset Type="System.String[]"&gt;
      &lt;Item&gt;cat.tga&lt;/Item&gt;
      &lt;Item&gt;glow1.png&lt;/Item&gt;
      &lt;Item&gt;glow2.png&lt;/Item&gt;
      &lt;/Asset&gt;
      &lt;/XnaContent&gt;
    </pre>

    <p>
      To create a new sprite sheet, add an XML file in this format to your Content folder. Make sure the Content Importer property is set to <b>XML Content - XNA Framework</b>, and change the Content Processor setting to <b>SpriteSheetProcessor</b>. This will build all the sprite bitmaps listed in your XML file into a sprite sheet .xnb file, which you can load into your game by calling <b>
        Content.Load&lt;SpriteSheet&gt;(...)
      </b>.
    </p>

    <p>
      See the <b>SpriteSheetGame.Draw</b> method for an example of how to use the <b>SpriteSheet</b> object. You can look up individual sprites either by name (as used for the cat) or by index (as used for the glow animation). You can perform math on the index values to cycle through multiframe sprite animations.
    </p>

    <p>
      To reuse this code in your own game, add the <b>SpriteSheetPipeline</b> and <b>SpriteSheetRuntime</b> projects to your solution.
    </p>
    <div class="proc"><h3 class="subHeading">To make the pipeline project available for building your content</h3><div class="subSection">
      

      <ol>
        <li>
          Right-click the <b>Content | References</b> item in your content project.
        </li>
        <li>
          Click <b>Add Reference</b>.
        </li>
        <li>
          Click the <b>Projects</b> tab, and then select the SpriteSheetPipeline project.
        </li>
      </ol>
    </div></div>
    <div class="proc"><h3 class="subHeading">To make the SpriteSheet class available to your game</h3><div class="subSection">
      
      <ol>
        <li>
          Right-click the <b>References</b> item in your main game project.
        </li>
        <li>
          Click <b>Add Reference</b>.
        </li>
        <li>
          Click the <b>Projects</b> tab, and select the SpriteSheetRuntime project
        </li>
      </ol>
    </div></div>
    <a name="ID4EMG"></a><h2 class="subHeading">The SpriteSheetProcessor</h2><div id="ID4EMG" class="hxnx2">
      

      <p>
        The <b>SpriteSheetProcessor</b> class runs during the content build process. It is responsible for converting an array of strings that contain texture file names into a <b>SpriteSheetContent</b> object. The Content Pipeline XNB serializer then writes this <b>SpriteSheetContent</b> data into a binary .xnb file. At run time, the .xnb data is deserialized into a <b>SpriteSheet</b> object that can be used by your game. Note how the <b>SpriteSheetContent</b> class is decorated with a <b>ContentSerializerRuntimeType</b> attribute. This tells the serializer what type the content should be loaded into when you call <b>ContentManager.Load</b>. This attribute is needed because the design time <b>SpriteSheetContent</b> class is not the same as the runtime <b>SpriteSheet</b> class. The two types are similar, having the same fields in the same order, but not exactly the same, so this attribute is required to tell the serializer about their relationship. If you move the runtime <b>SpriteSheet</b> class into a different namespace or assembly, you must also update this attribute to match.
      </p>

      <p>
        See <a href="http://msdn2.microsoft.com/en-us/library/bb447756.aspx">http://msdn2.microsoft.com/en-us/library/bb447756.aspx</a> for more information about the architecture of the Content Pipeline.
      </p>

      <p>
        The hard work of this processor is implemented by the <b>SpritePacker</b> helper class. This class arranges many small sprite bitmaps onto a single larger sheet. The algorithm works as follows:
      </p>

      <ol>
        <li>Sort sprites by size, so the biggest ones will be arranged first. If you leave the smaller sprites until the end, it makes it more likely they could fit into holes left between earlier big ones.</li>
        <li>
          <p>
            Call <b>PositionSprite</b> for each sprite in turn, so you can decide where to put each one. This starts at the top left of the sheet, and checks whether it overlaps with any previously arranged sprite, as follows:
          </p>
          <ul>
            <li>If there is a collision, move to the right, looking for a free space.</li>
            <li>If it reaches the right edge of the sheet, wrap back to the left, and move down one row.</li>
            <li>Repeat until a free location is found.</li>
          </ul>
        </li>
      </ol>

      <p>
        When the packing process is complete, the processor calls <b>ContentBuildLogger.LogImportantMessage</b>, which reports how large a sheet it created and what percentage of this sheet contains sprite data versus unused space. Visual Studio displays this information in the output pane after building the content. Keep in mind that it is often impossible to find a perfect fit, so there will usually be some wasted space.
      </p>

    </div>

    <a name="ID4EPAAC"></a><h2 class="subHeading">Texture Filtering</h2><div id="ID4EPAAC" class="hxnx2">
      

      <p>When you use sprite sheets, pixels from the edge of one sprite may bleed onto others. This often happens when you are scaling or rotating the sprites. This occurs because the graphics card applies filtering, averaging out the values of adjacent pixels to reduce aliasing. If one sprite is arranged next to another of a radically different color, this filtering may accidentally pick up some amount of that other color, which will cause a nasty looking border along the edge of your sprite.</p>

      <p>
        The sprite sheet processor presented in this sample automatically avoids filtering problems by including one pixel of padding around the edge of each sprite while they are being arranged onto the sheet. The <b>SpritePacker.CopySpritesToOutput</b> method fills this border area with a copy of the colors from the edge of the sprite. Things will look acceptable even if the graphics card filters values from slightly outside the sprite itself.
      </p>
    </div>

  </div>

  <a name="ID4E3AAC"></a><h1 class="heading">Extending the Sample</h1><div id="ID4E3AAC" class="hxnx1">
    

    <p>
      This sample always outputs the sprite sheet in 32-bit <b>Color</b> format. To save space, you could change the <b>SpriteSheetProcessor</b> to convert the bitmap data into some other format, perhaps using DXT1 or DXT5 compression. You could even use a content processor parameter to make the compression optional for each sprite sheet.
    </p>

    <p>
      To create a processor parameter, add the following property to the <b>SpriteSheetProcessor</b> class.
    </p>

    <div class="code"><span codeLanguage="CSharp"><table><tr><th>C# </th></tr><tr><td><pre><pre>
      [DefaultValue(false)]
      public bool Compress
      {
      get { return compress; }
      set { compress = value; }
      }

      bool compress;
    </pre></pre></td></tr></table></span></div>

    <p>
      To implement the compression, add the following code at the end of <b>SpriteSheetProcessor.Process</b>, immediately before the return statement.
    </p>

    <div class="code"><span codeLanguage="CSharp"><table><tr><th>C# </th></tr><tr><td><pre><pre>
      if (compress)
      {
      spriteSheet.Texture.ConvertBitmapType(typeof(Dxt5BitmapContent));
      }
    </pre></pre></td></tr></table></span></div>

    <p>
      DXT compression requires texture sizes to be multiples of four. We need to make sure the generated sprite sheet will always be a valid size. The packing algorithm always produces sheets with a valid width. However, the height could be anything, so we must round it up to the next larger multiple of four. Add this line to <b>SpritePacker.PackSprites</b> immediately before the "Sort the sprites back into index order" comment:
    </p>

    <div class="code"><span codeLanguage="CSharp"><table><tr><th>C# </th></tr><tr><td><pre><pre>
      outputHeight = (outputHeight + 3) &amp; ~3;
    </pre></pre></td></tr></table></span></div>

    <p>
      After rebuilding the processor project, you can select any XML content file that is set to use the sprite sheet processor. Then open up the Visual Studio properties pane, expand the <b>+</b> sign next to the <b>Content Processor</b> property, and change the newly created <b>Compress</b> setting.
    </p>

  </div>

</div><div class="footer" id="footer"><p>© 2010 Microsoft Corporation. All rights reserved.<br>Send feedback to <a href="mailto:[email protected]?subject=Documentation Feedback: Sprite Sheet Sample">[email protected]</a>.</p></div></div></body></html>