| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938 |
- <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>Safe Area 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: 122%;
- }
- 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;
- 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: 95%;
- 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="Safe Area Sample" />
- <MSHelp:RLTitle Title="Safe Area Sample" />
- <MSHelp:Keyword Index="A" Term="O:Microsoft.Xna.SafeArea" />
- <MSHelp:Keyword Index="A" Term="9b38404d-aab5-6ffe-017e-875f87724d00" />
- <MSHelp:Keyword Index="K" Term="Safe Area Sample" />
- <MSHelp:Attr Name="AssetID" Value="9b38404d-aab5-6ffe-017e-875f87724d00" />
- <MSHelp:Attr Name="Locale" Value="en-us" />
- <MSHelp:Attr Name="CommunityContent" Value="1" />
- <MSHelp:Attr Name="TopicType" Value="kbOrient" />
- </xml>
- </head><body><div id="mainSection"><div id="mainBody">
- <h1>Safe Area Sample</h1>
- This sample shows how to make an XNA Framework game display correctly on a wide range of different televisions.
- <a id="ID2EK" name="ID2EK"> </a><h1 class="heading">Sample Overview</h1><div id="ID2EK" class="hxnx1">
-
- <p>It is all very well to test a game on your shiny new 21-inch widescreen CRT that is sitting two feet away on your desk, but what happens when you release it into the wild? Many users have older displays, some of which will be lower resolution, and which may be much farther away if they are sitting on the couch while playing on a TV at the other side of their living room. If you are not careful, important information may not even be visible to some of these customers!</p>
- <p>This sample and the associated document explain what problems you will encounter in supporting a wide range of different displays, and how to overcome them.</p>
- <a id="ID2ES" name="ID2ES"> </a><h2 class="subHeading">Sample Controls</h2><div id="ID2ES" 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>
- </tr>
- <tr>
- <td>Move the cat</td>
- <td>UP ARROW, DOWN ARROW, LEFT ARROW, and RIGHT ARROW</td>
- <td>Left thumb stick</td>
- </tr>
- <tr>
- <td>Show or hide the safe area overlay</td>
- <td>A</td>
- <td>
- <b>A</b>
- </td>
- </tr>
- <tr>
- <td>Exit</td>
- <td>ESC or ALT+F4</td>
- <td>
- <b>BACK</b>
- </td>
- </tr>
- </table>
- </div>
- </div>
- <a id="ID2EHC" name="ID2EHC"> </a><h1 class="heading">How the Sample Works</h1><div id="ID2EHC" class="hxnx1">
-
- <p>Not all televisions are created equal. Common variations include:</p>
- <ul>
- <li>Overscan versus full image display</li>
- <li>Standard versus high definition</li>
- <li>Widescreen versus 4:3 aspect ratio</li>
- <li>Component versus composite cables</li>
- <li>On your desk versus in your living room</li>
- </ul>
- <p>Handling these differences need not be difficult if you design appropriately; if ignored, the differences can cause a world of pain for your users.</p>
- <a id="ID2E3C" name="ID2E3C"> </a><h2 class="subHeading">Overscan and Safe Areas</h2><div id="ID2E3C" class="hxnx2">
-
- <p>
- Some televisions display the entire image they are given; others do not. On many displays, some number of pixels will be cropped around the edges of the screen. This behavior is called <i>overscan</i>. Because of this, if your game displays important information right at the edge of the screen, it will not be visible to some players. Note that overscan is not unique to older televisions. A new high definition display is just as likely to crop the image as an older CRT screen.
- </p>
- <p>
- To avoid this problem, console games should move all important information in from the edge of the screen, keeping it within the inner 80 percent of the total area. This inner 80 percent is called the <i>title safe area</i> because you can safely assume that everyone will be able to see what you display there, no matter what TV they use.
- </p>
- <p>
- The <b>DrawOverlays</b> method in this sample draws text labels in the four corners of the screen, aligning them to the safe area. It uses the <b>Viewport.TitleSafeArea</b> property to look up the size of the safe area, and the <b>AlignedSpriteBatch</b> helper class (provided as part of this sample) to display right-aligned and bottom-aligned text, in addition to the default top left alignment used by the standard XNA Framework <b>SpriteBatch</b> implementation. Note that the <b>Viewport.TitleSafeArea</b> property behaves differently on each platform. On Xbox 360, this computes an 80-percent safe area region, but on Windows, it returns the entire screen area, because overscan is not a problem on Windows. You will notice that when you run this sample on Windows, the text labels are in the very corners of the screen, but when you run it on Xbox 360, they are moved in from the corners. This is a good technique to use for any overlay components such as score, health, weapon selection indicators, and so on.
- </p>
- <p>When it comes to your gameplay graphics, choosing how to handle the safe area depends on your game design. Obviously, it would be bad if your player character could move outside the visible region, but you should draw your background graphics all the way out to the edge, because some people will have no overscan. Therefore, they won't be able to see outside the safe area.</p>
- <ul>
- <li>For most 3D games, you can basically just ignore the safe area for 3D rendering, as long as you make sure your 2D overlays are inside it.</li>
- <li>
- For a scrolling 2D game like this sample, the tiled background is drawn all the way to the edge, but the cat character is constrained to move only within the safe area. When the character reaches the edge of the safe region, the camera scrolls to keep him visible. In fact, the safe area used for the cat in this sample is even more conservative than the normal 80 percent, so the camera will scroll to keep him in the inner 70 percent of the screen. You can experiment with different values for this by changing the <code>catSafeArea</code> constant in the <b>UpdateCamera</b> method.
- </li>
- <li>For a 2D game with a fixed, non-scrolling viewpoint, safe areas can be more awkward. In this situation, it is important to keep the entire play area visible. For example, it would be terrible in a puzzle game if some of the blocks were off the edge of the screen for some players! At this point, it becomes a visual design problem to come up with some attractive border graphics to fill the region outside the safe area for those players who are able to see it.</li>
- </ul>
- <p>
- The <code>SafeAreaOverlay</code> component used in this sample makes it easy to check if your graphics are inside the safe area. This is designed to be reusable in different games. It draws a red border over the non-safe parts of the screen. Note that this will appear only when you run the sample on Xbox 360 because on Windows the entire screen is safe. If you look at how this component is created in the <code>SafeAreaGame</code> constructor, you will see it is inside a <code>
- #if XBOX && DEBUG
- </code> conditional. This is a convenient way to include the overlay while testing your game, but have it removed when you build a final version for distribution to your customers. If you change the solution configuration (in the Visual Studio toolbar) from Debug to Release, you will notice that the overlay is automatically removed.
- </p>
- <p>Some games may wish to provide an option for the user to adjust the safe area to fit their particular TV, but generally this it is not recommended. If you do include such an option, you should default to the standard 80-percent safe area, and should not require users to adjust this before they can play your game. Console gamers have an expectation that things should "just work" without them having to tweak lots of settings. As a general rule, the fewer options you make gameers configure, the happier they are. This is particularly important if you plan to sell your work as an Xbox LIVE Indie Game. The trial mode for Indie Games is time limited. The more options you make your users adjust during the limited time, the less time users have to play your game demo!</p>
- </div>
- <a id="ID2EXE" name="ID2EXE"> </a><h2 class="subHeading">Resolution and Aspect Ratio</h2><div id="ID2EXE" class="hxnx2">
-
- <p>
- Display resolutions can vary all the way from standard definition (an interlaced 640×480 image) all the way up to 1080p (a 1920×1080 resolution). And the aspect ratio may be either widescreen (16×9) or standard (4×3).
- </p>
- <p>
- For simplicity, we recommend you use a 720p widescreen resolution: 1280×720. This single resolution will work on every Xbox 360 console, regardless of what kind of display to which it may be connected. If the display has a lower resolution, the console will automatically scale down your image, producing beautiful antialiasing in the process. If the display resolution is higher, the console will automatically scale up. If the display has a 4×3 aspect ratio, the console will automatically letterbox your image to keep the proportions correct.
- </p>
- <p>
- Some games may wish to detect when the display has a 4×3 aspect ratio, and adjust their rendering accordingly. This is unnecessary, but may produce a more polished experience. You can detect this by checking <b>GraphicsAdapter.DefaultAdapter.IsWidescreen</b>.
- </p>
- <p>
- Some games may wish to run in a 1080 resolution if it is supported. Note that such high resolutions are not always possible. In particular, Xbox 360 cannot scale a 1080 image to a standard definition 480i format. If you set your <b>PreferredBackBufferWidth</b> and <b>PreferredBackBufferHeight</b> to anything higher than 720p, you should be prepared for the fact that after the device is created, the actual resolution may be lower than what you asked for.
- </p>
- </div>
- <a id="ID2E3F" name="ID2E3F"> </a><h2 class="subHeading">The "Living Room Experience"</h2><div id="ID2E3F" class="hxnx2">
-
- <p>PC games usually are played on a monitor that is just a few inches away from the player, but console games typically are played on a TV that may be on the other side of the living room. This TV also may have a lower resolution or be driven from a lower-quality input format than what you are testing on. You can always render your game at 720p resolution and let the console scale the image if the TV resolution is lower. However, if your game contains too much fine detail, or the player is sitting too far away from the TV, the resulting picture may be illegible!</p>
- <p>The main trick to making your game visible to everyone is to avoid fine detail. In particular, keep font sizes large (note how this sample uses a 20-point Arial font). Here are some other tricks that can improve image clarity:</p>
- <ul>
- <li>Avoid thin lines, especially horizontal ones (which will flicker on interlaced displays).</li>
- <li>Avoid bright red text or backgrounds (red can cause image bleeding on NTSC televisions).</li>
- <li>Use size or animation, as well as color, to distinguish important information (remember that some users may be color blind).</li>
- </ul>
- <p>
- To see how your game will look on a standard definition TV, you can move the switch on your Xbox video cable to disable HD output. Simply selecting a 480p resolution in the Dashboard is not enough because this will still give you a non-interlaced HD mode, although using a 640×480 resolution. To see the full effects of a 480i standard definition signal, you must physically move the switch to disable HD entirely.
- </p>
- </div>
- </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: Safe Area Sample">[email protected]</a>.</p></div></div></body></html>
|