SplitScreenSample.htm 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799
  1. <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">
  2. <title>Split Screen Sample</title>
  3. <style>
  4. <!--
  5. .userDataStyle
  6. {
  7. behavior: url(#default#userData);
  8. }
  9. div.saveHistory
  10. {
  11. behavior: url(#default#saveHistory);
  12. }
  13. img.toggle
  14. {
  15. border: 0;
  16. margin-right: 5;
  17. }
  18. img#languageFilterImage
  19. {
  20. border: 0;
  21. margin-left: 0;
  22. vertical-align: middle;
  23. }
  24. img#membersOptionsFilterImage
  25. {
  26. border: 0;
  27. margin-left: 0;
  28. vertical-align: middle;
  29. }
  30. img#toggleAllImage
  31. {
  32. margin-left: 0;
  33. vertical-align: middle;
  34. }
  35. MSHelp\:link
  36. {
  37. text-decoration: underline;
  38. color: #0000ff;
  39. hoverColor: #3366ff;
  40. filterString: ;
  41. }
  42. body
  43. {
  44. background: #FFFFFF;
  45. color: #000000;
  46. font-family: Verdana;
  47. font-size: medium;
  48. font-style: normal;
  49. font-weight: normal;
  50. margin-top: 0;
  51. margin-bottom: 0;
  52. margin-left: 0;
  53. margin-right: 0;
  54. width: 100%;
  55. /*font-size: 110%;*/
  56. }
  57. div.section
  58. {
  59. margin-left: 15px;
  60. }
  61. div.hxnx5
  62. {
  63. margin-left: 1.5em;
  64. }
  65. h1, h2, h3, h4, h5, h6
  66. {
  67. font-family: Verdana, Arial, Helvetica, sans-serif;
  68. margin-top: 18;
  69. margin-bottom: 8;
  70. font-weight: bold;
  71. }
  72. h1
  73. {
  74. font-size: 130%;
  75. color: #003399;
  76. }
  77. div#scrollyes h1 /* Changes font size for full-scrolling topic */
  78. {
  79. font-size: 150%;
  80. }
  81. h2
  82. {
  83. font-size: 125%;
  84. }
  85. h3
  86. {
  87. font-size: 115%;
  88. margin-top: 9;
  89. margin-bottom: 4;
  90. }
  91. h4
  92. {
  93. font-size: 115%;
  94. margin-top: 9;
  95. margin-bottom: 4;
  96. }
  97. h5
  98. {
  99. font-size: 100%;
  100. margin-top: 9;
  101. margin-bottom: 4;
  102. }
  103. h6
  104. {
  105. font-size: 100%;
  106. margin-top: 9;
  107. margin-bottom: 4;
  108. }
  109. ul p, ol p, dl p
  110. {
  111. margin-left: 0em;
  112. }
  113. p
  114. {
  115. margin-top: .6em;
  116. margin-bottom: .6em;
  117. }
  118. td p
  119. {
  120. margin-top: 0.0em;
  121. margin-bottom: 0.6em;
  122. }
  123. dd p
  124. {
  125. margin-top: 0.0em;
  126. margin-bottom: 0.6em;
  127. }
  128. .image
  129. {
  130. text-align: center;
  131. }
  132. dl
  133. {
  134. margin-top: 0em;
  135. margin-bottom: 1.3em;
  136. }
  137. dd
  138. {
  139. margin-bottom: 0em;
  140. margin-left: 1.5em;
  141. }
  142. dl.glossary dd
  143. {
  144. margin-bottom: 0em;
  145. margin-left: 1.5em;
  146. }
  147. dt
  148. {
  149. margin-top: .6em;
  150. margin-bottom: 1;
  151. }
  152. ul, ol
  153. {
  154. margin-top: 0.6em;
  155. margin-bottom: 0.6em;
  156. }
  157. ol
  158. {
  159. margin-left: 2.5em;
  160. }
  161. ul
  162. {
  163. list-style-type: disc;
  164. margin-left: 1.9em;
  165. }
  166. li
  167. {
  168. margin-bottom: 0.4em;
  169. }
  170. ul ol, ol ol
  171. {
  172. list-style-type: lower-alpha;
  173. }
  174. pre
  175. {
  176. margin-top: .6em;
  177. margin-bottom: .6em;
  178. }
  179. pre
  180. {
  181. font: 105% Lucida, mono;
  182. color: #000066;
  183. }
  184. code
  185. {
  186. font-family: Monospace, Courier New, Courier;
  187. font-size: 105%;
  188. color: #000066;
  189. }
  190. table.userdata td
  191. {
  192. background: #ffffff;
  193. background-color: #F5F5F5;
  194. border-color: #ffffff;
  195. border: none;
  196. }
  197. table.clsWarning
  198. {
  199. background: #ffffff;
  200. padding: 0px;
  201. margin: 0px;
  202. border: none;
  203. }
  204. table.clsWarning td
  205. {
  206. padding: 0px;
  207. margin: 0px;
  208. background: #ffffff;
  209. vertical-align: middle;
  210. font-size: 70%;
  211. }
  212. div#mainSection table
  213. {
  214. width: 98%;
  215. background: #ffffff;
  216. margin-top: 5px;
  217. margin-bottom: 5px;
  218. }
  219. div#mainSection table th
  220. {
  221. padding: 5px 6px;
  222. background: #EFEFF7;
  223. text-align: left;
  224. font-size: 70%;
  225. vertical-align: bottom;
  226. border-bottom: 1px solid #C8CDDE;
  227. }
  228. div#mainSection table td
  229. {
  230. padding: 5px 5px;
  231. background: #F7F7FF;
  232. vertical-align: top;
  233. font-size: 70%;
  234. border-bottom: 1px solid #D5D5D3;
  235. }
  236. div#syntaxCodeBlocks table th
  237. {
  238. padding: 1px 6px;
  239. color: #000066;
  240. }
  241. div#syntaxCodeBlocks table td
  242. {
  243. padding: 1px 5px;
  244. }
  245. span#runningHeaderText
  246. {
  247. color: #003399;
  248. font-size: 90%;
  249. padding-left: 13;
  250. }
  251. span#nsrTitle
  252. {
  253. color: #003399;
  254. font-size: 120%;
  255. font-weight: 600;
  256. padding-left: 13;
  257. }
  258. div#mainSection
  259. {
  260. font-size: 70%;
  261. width: 100%;
  262. }
  263. div#mainBody
  264. {
  265. font-size: 90%;
  266. margin-left: 15;
  267. margin-top: 10;
  268. padding-bottom: 20;
  269. }
  270. div#mainBody p, div#mainBody ol, div#mainBody ul, div#mainBody dl
  271. {
  272. padding-right: 5;
  273. }
  274. div#mainBody div.alert, div#mainBody div.code, div#mainBody div.tableSection
  275. {
  276. width:98.9%;
  277. }
  278. div.alert p, div.code p
  279. {
  280. margin-top:5;
  281. margin-bottom:8;
  282. }
  283. div#mainSection div.alert table
  284. {
  285. border: 0;
  286. }
  287. div#mainSection div.alert table th
  288. {
  289. padding-top: 0;
  290. padding-bottom: 0;
  291. padding-left: 5;
  292. padding-right: 5;
  293. }
  294. div#mainSection div.alert table td
  295. {
  296. padding-left: 5;
  297. padding-right: 5;
  298. }
  299. img.note
  300. {
  301. border: 0;
  302. margin-left: 0;
  303. margin-right: 3;
  304. }
  305. div#header
  306. {
  307. background-color: #D4DFFF;
  308. padding-top: 0;
  309. padding-bottom: 0;
  310. padding-left: 0;
  311. padding-right: 0;
  312. width: 100%;
  313. }
  314. div#header table
  315. {
  316. margin-top: 0;
  317. margin-bottom: 0;
  318. border-bottom-color: #C8CDDE;
  319. border-bottom-style: solid;
  320. border-bottom-width: 1;
  321. background: #D4DFFF;
  322. width: 100%;
  323. }
  324. div#header table td
  325. {
  326. color: #0000FF;
  327. font-size: 70%;
  328. padding-right: 20;
  329. padding-top: 1;
  330. padding-bottom: 1;
  331. border: none;
  332. background: #D4DFFF;
  333. }
  334. div#header table tr#headerTableRow3 td
  335. {
  336. padding-bottom: 2;
  337. padding-top: 5;
  338. padding-left: 15;
  339. }
  340. div#header table#bottomTable
  341. {
  342. border-top-color: #FFFFFF;
  343. border-top-style: solid;
  344. border-top-width: 1;
  345. text-align: left;
  346. padding-left: 15;
  347. }
  348. blockquote
  349. {
  350. margin-left: 3.8em;
  351. margin-right: 3.8em;
  352. margin-top: .6em;
  353. margin-bottom: .6em;
  354. }
  355. sup
  356. {
  357. text-decoration: none;
  358. font-size: smaller;
  359. }
  360. a:link
  361. {
  362. color: #0000FF;
  363. /* font-weight: bold */
  364. }
  365. a:visited
  366. {
  367. color: #0000AA;
  368. /* font-weight: bold */
  369. }
  370. a:hover
  371. {
  372. color: #3366FF;
  373. /* font-weight: bold */
  374. }
  375. .label
  376. {
  377. font-weight: bold;
  378. margin-top: 1em;
  379. margin-left: -26px;
  380. }
  381. .tl
  382. {
  383. margin-bottom: .75em;
  384. }
  385. .atl
  386. {
  387. padding-left: 1.5em;
  388. padding-bottom: .75em;
  389. }
  390. .cfe
  391. {
  392. font-weight: bold;
  393. }
  394. .mini
  395. {
  396. font-size: smaller;
  397. }
  398. .dt
  399. {
  400. margin-bottom: -.6em;
  401. }
  402. .indent
  403. {
  404. margin-left: 1.9em;
  405. margin-right: 1.9em;
  406. }
  407. .product
  408. {
  409. text-align: right;
  410. color: #333333;
  411. font-size: smaller;
  412. font-style: italic;
  413. }
  414. .buttonbarshade
  415. {
  416. position: relative;
  417. margin: 0;
  418. left: 0px;
  419. top: 2;
  420. width: 50%;
  421. height: 40px;
  422. }
  423. .buttonbartable
  424. {
  425. position: absolute;
  426. margin: 0;
  427. padding:0;
  428. border:0;
  429. left:0px;
  430. top: 2;
  431. width: 100%;
  432. height: 40px;
  433. }
  434. table.buttonbartable td, table.buttonbarshade td
  435. {
  436. background: #ffffff; /*#5177B8; #80C615;*/
  437. border-left: 0px solid #80C615;
  438. margin: 0;
  439. padding: 0px 0px 0px 0px;
  440. font-family: Impact, sans-serif;
  441. font-size: 14pt;
  442. }
  443. table.buttonbartable td.button1
  444. {
  445. background: #5177B8; /*#80C615;*/;
  446. padding: 0;
  447. font-weight: bold;
  448. text-align: center;
  449. cursor: hand;
  450. }
  451. table.buttonbartable td.button2
  452. {
  453. background: #5177B8; /*#80C615;*/;
  454. font-weight: bold;
  455. text-align: center;
  456. }
  457. table.buttonbartable td.button3
  458. {
  459. background: #5177B8; /*#80C615;*/;
  460. font-weight: bold;
  461. text-align: center;
  462. }
  463. table.buttonbartable td.runninghead
  464. {
  465. padding-left: 0px;
  466. font-style: italic;
  467. text-align: left;
  468. }
  469. .version
  470. {
  471. text-align: left;
  472. color: #000000;
  473. margin-top: 3em;
  474. margin-left: -26px;
  475. font-size: smaller;
  476. font-style: italic;
  477. }
  478. .lang, .ilang
  479. {
  480. color: #0000ff;
  481. font: normal 7pt Arial, Helvetica, sans-serif;
  482. }
  483. div.langMenu
  484. {
  485. position: absolute;
  486. z-index: 1;
  487. width: 96pt;
  488. padding: 8pt;
  489. visibility: hidden;
  490. border: 1px solid #000000;
  491. background: #ffffd0;
  492. }
  493. div.langMenu ul
  494. {
  495. padding-left: 2em;
  496. margin-left: 0;
  497. }
  498. div.filtered
  499. {
  500. margin: 4pt 0 8pt -26px;
  501. padding: 4px 4px 8px 26px;
  502. width: 100%;
  503. border: 2px solid #aaaacc;
  504. background: #ffffff;
  505. }
  506. div.filtered2
  507. {
  508. margin: 4pt 0 8pt -26px;
  509. padding: 4px 4px 8px 26px;
  510. width: 100%;
  511. border: none;
  512. background: #ffffff;
  513. }
  514. div.filtered h1, div.filtered h2, div.filtered h3, div.filtered h4
  515. {
  516. margin-left: -22px;
  517. }
  518. div.filtered span.lang
  519. {
  520. position: relative;
  521. left: -22px;
  522. }
  523. div.reftip
  524. {
  525. position: absolute;
  526. z-index: 1;
  527. padding: 8pt;
  528. visibility: hidden;
  529. border: 1px solid #000000;
  530. background: #ffffd0;
  531. }
  532. a.synParam
  533. {
  534. color: #0000FF;
  535. /*color: #3F7800;*/
  536. /*color: #8DC54F;*/
  537. text-decoration: none;
  538. font-weight: normal;
  539. }
  540. a.synParam:hover
  541. {
  542. text-decoration: underline;
  543. font-weight: normal;
  544. }
  545. div.sapop
  546. {
  547. position: absolute;
  548. z-index: 1;
  549. left: 26px;
  550. width: 100%;
  551. padding: 10px 10px 10px 36px;
  552. visibility: hidden;
  553. border: 1px solid #000000;
  554. background: #ffffd0;
  555. }
  556. div.footer
  557. {
  558. width: 100%;
  559. border: none;
  560. background: #ffffff;
  561. margin-top: 18pt;
  562. padding-bottom: 12pt;
  563. color: #0000FF;
  564. /*color: #228B22; */
  565. text-align: center;
  566. font-size: 76%;
  567. }
  568. div.preliminary
  569. {
  570. margin-top: 8pt;
  571. padding-bottom: 12pt;
  572. color: #A0A0A0;
  573. }
  574. div.proc
  575. {
  576. margin-left: 0.5em;
  577. }
  578. div.proc h3
  579. {
  580. font-family: Verdana, Arial, Helvetica, sans-serif;
  581. font-weight: bold;
  582. font-size: 115%;
  583. margin-top: 1em;
  584. margin-bottom: 0.4em;
  585. margin-left: -0.5em;
  586. color: #003399;
  587. }
  588. div.proc ul
  589. {
  590. margin-left: 1.5em;
  591. }
  592. div.proc ol
  593. {
  594. margin-left: 2.0em;
  595. }
  596. .note
  597. {
  598. margin-left: 14pt;
  599. margin-right: 12pt;
  600. }
  601. .indent1
  602. {
  603. margin-left: 12pt;
  604. }
  605. .indent2
  606. {
  607. margin-left: 24pt;
  608. }
  609. .indent3
  610. {
  611. margin-left: 36pt;
  612. }
  613. p.proch
  614. {
  615. padding-left: 16px;
  616. }
  617. p.proch img
  618. {
  619. position: relative;
  620. vertical-align: top;
  621. left: -18px;
  622. margin-right: -14px;
  623. margin-bottom: -18px;
  624. }
  625. div.clsPlatSpec
  626. {
  627. background-color:#FFF8DC;
  628. border-style:solid;
  629. border-width:1pt 0pt 0pt 1pt;
  630. border-color:#ffE4C4;
  631. margin-top:0.6em;
  632. width:100%;
  633. }
  634. .languageFilter
  635. {
  636. color: #0000FF;
  637. cursor:hand;
  638. text-decoration:underline;
  639. padding-bottom:4;
  640. }
  641. #languageSpan {
  642. position: absolute;
  643. visibility: hidden;
  644. border-style: solid;
  645. border-width: 1px;
  646. border-color: #C8CDDE;
  647. background: #d4dfff;
  648. padding: 4px;
  649. font-size: 70%;
  650. }
  651. #membersOptionsSpan {
  652. position: absolute;
  653. visibility: hidden;
  654. border-style: solid;
  655. border-width: 1px;
  656. border-color: #C8CDDE;
  657. background: #d4dfff;
  658. padding: 4px;
  659. font-size: 70%;
  660. }
  661. --></style>
  662. <xml>
  663. <MSHelp:TOCTitle Title="Primitives 3D Sample" />
  664. <MSHelp:RLTitle Title="Primitives 3D Sample" />
  665. <MSHelp:Keyword Index="A" Term="O:Microsoft.Xna.Primitives3D" />
  666. <MSHelp:Keyword Index="A" Term="6336846e-5264-82f5-883d-7cf38401b788" />
  667. <MSHelp:Keyword Index="K" Term="Primitives 3D Sample" />
  668. <MSHelp:Attr Name="AssetID" Value="6336846e-5264-82f5-883d-7cf38401b788" />
  669. <MSHelp:Attr Name="Locale" Value="en-us" />
  670. <MSHelp:Attr Name="CommunityContent" Value="1" />
  671. <MSHelp:Attr Name="TopicType" Value="kbOrient" />
  672. <MSHelp:Attr Name="DocSet" Value="XNA" />
  673. <MSHelp:Attr Name="DocSet" Value="ExpressLibVS" />
  674. <MSHelp:Attr Name="DocSet" Value="C#" />
  675. <MSHelp:Attr Name="ProjType" Value="LocalProj" />
  676. <MSHelp:Attr Name="ProjType" Value="XNA_31" />
  677. <MSHelp:Attr Name="ProjType" Value="XNA_30" />
  678. <MSHelp:Attr Name="Technology" Value="XNA" />
  679. </xml>
  680. </head><body><div id="mainSection"><div id="mainBody">
  681. <h1>Split Screen Sample</h1>
  682. <p>This sample demonstrates how to display the same scene in two viewports using two separate view and projection matrices, simulating a two-player game scenario.</p>
  683. <h1>Sample Overview</h1>
  684. <p>The Split Screen Sample demonstrates how to render the same scene to multiple viewports. This technique is often used for split-screen multiplayer, but can be used for other situations where content is desired to be clipped to a particular area.</p>
  685. <h1>How the Sample Works</h1>
  686. <p>The main area of the sample is the <strong>DrawScene</strong> method, which takes in a viewport, view matrix and projection matrix. The method is responsible for setting the viewport, as well as rendering the entire scene using the specified view and projection matrices. This sample only renders the tank, but this method is where you can add the rest of your scene’s rendering, so that all viewports are capable of seeing the game objects.</p>
  687. <p>The tank model and class are borrowed from the Simple Animation Sample, and are used to help show that the two viewports are indeed seeing the same thing from different angles.</p>
  688. <a name="ID4EK"></a>
  689. </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: Split Screen Sample">
  690. [email protected]</a>