ChaseCamera.htm 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932
  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"><title>Chase Camera Sample</title>
  2. <style><!--
  3. /***********************************************************
  4. * SCRIPT-SUPPORTING STYLES
  5. ***********************************************************/
  6. /* Defines the userData cache persistence mechanism. */
  7. .userDataStyle
  8. {
  9. behavior: url(#default#userData);
  10. }
  11. /* Used to save the scroll bar position when navigating away from a page. */
  12. div.saveHistory
  13. {
  14. behavior: url(#default#saveHistory);
  15. }
  16. /* Formats the expand/collapse images for all collapsible regions. */
  17. img.toggle
  18. {
  19. border: 0;
  20. margin-right: 5;
  21. }
  22. /* Formats the Language filter drop-down image. */
  23. img#languageFilterImage
  24. {
  25. border: 0;
  26. margin-left: 0;
  27. vertical-align: middle;
  28. }
  29. /* Formats the Members Options filter drop-down image. */
  30. img#membersOptionsFilterImage
  31. {
  32. border: 0;
  33. margin-left: 0;
  34. vertical-align: middle;
  35. }
  36. /* Formats the Collapse All/Expand All images. */
  37. img#toggleAllImage
  38. {
  39. margin-left: 0;
  40. vertical-align: middle;
  41. }
  42. /* Supports XLinks */
  43. MSHelp\:link
  44. {
  45. text-decoration: underline;
  46. color: #0000ff;
  47. hoverColor: #3366ff;
  48. filterString: ;
  49. }
  50. body
  51. {
  52. background: #FFFFFF;
  53. color: #000000;
  54. font-family: Verdana;
  55. font-size: medium;
  56. font-style: normal;
  57. font-weight: normal;
  58. margin-top: 0;
  59. margin-bottom: 0;
  60. margin-left: 0;
  61. margin-right: 0;
  62. width: 100%;
  63. /*font-size: 110%;*/
  64. }
  65. div.section
  66. {
  67. margin-left: 15px;
  68. }
  69. div.hxnx5
  70. {
  71. margin-left: 1.5em;
  72. }
  73. /* Font for all headings */
  74. h1, h2, h3, h4, h5, h6
  75. {
  76. font-family: Verdana, Arial, Helvetica, sans-serif;
  77. margin-top: 18;
  78. margin-bottom: 8;
  79. font-weight: bold;
  80. }
  81. h1
  82. {
  83. font-size: 130%;
  84. color: #003399;
  85. }
  86. div#scrollyes h1 /* Changes font size for full-scrolling topic */
  87. {
  88. font-size: 150%;
  89. }
  90. h2
  91. {
  92. font-size: 125%;
  93. }
  94. h3
  95. {
  96. font-size: 115%;
  97. margin-top: 9;
  98. margin-bottom: 4;
  99. }
  100. h4
  101. {
  102. font-size: 115%;
  103. margin-top: 9;
  104. margin-bottom: 4;
  105. }
  106. h5
  107. {
  108. font-size: 100%;
  109. margin-top: 9;
  110. margin-bottom: 4;
  111. }
  112. h6
  113. {
  114. font-size: 100%;
  115. margin-top: 9;
  116. margin-bottom: 4;
  117. }
  118. ul p, ol p, dl p
  119. {
  120. margin-left: 0em;
  121. }
  122. p
  123. {
  124. margin-top: .6em;
  125. margin-bottom: .6em;
  126. }
  127. td p
  128. {
  129. margin-top: 0.0em;
  130. margin-bottom: 0.6em;
  131. }
  132. dd p
  133. {
  134. margin-top: 0.0em;
  135. margin-bottom: 0.6em;
  136. }
  137. .image
  138. {
  139. text-align: center;
  140. }
  141. dl
  142. {
  143. margin-top: 0em;
  144. margin-bottom: 1.3em;
  145. }
  146. dd
  147. {
  148. margin-bottom: 0em;
  149. margin-left: 0;
  150. }
  151. dl.glossary dd
  152. {
  153. margin-bottom: 0em;
  154. margin-left: 1.5em;
  155. }
  156. dt
  157. {
  158. margin-top: .6em;
  159. margin-bottom: 1;
  160. }
  161. ul, ol
  162. {
  163. margin-top: 0.6em;
  164. margin-bottom: 0.6em;
  165. }
  166. ol
  167. {
  168. margin-left: 2.5em;
  169. }
  170. ul
  171. {
  172. list-style-type: disc;
  173. margin-left: 1.9em;
  174. }
  175. li
  176. {
  177. margin-bottom: 0.4em;
  178. }
  179. ul ol, ol ol
  180. {
  181. list-style-type: lower-alpha;
  182. }
  183. pre
  184. {
  185. margin-top: .6em;
  186. margin-bottom: .6em;
  187. }
  188. pre
  189. {
  190. font: 105% Lucida, mono;
  191. color: #000066;
  192. }
  193. code
  194. {
  195. font-family: Monospace, Courier New, Courier;
  196. font-size: 105%;
  197. color: #000066;
  198. }
  199. table.userdata td
  200. {
  201. background: #ffffff;
  202. background-color: #F5F5F5;
  203. border-color: #ffffff;
  204. border: none;
  205. }
  206. table.clsWarning
  207. {
  208. background: #ffffff;
  209. padding: 0px;
  210. margin: 0px;
  211. border: none;
  212. }
  213. table.clsWarning td
  214. {
  215. padding: 0px;
  216. margin: 0px;
  217. background: #ffffff;
  218. vertical-align: middle;
  219. font-size: 70%;
  220. }
  221. div#mainSection table
  222. {
  223. width: 98%;
  224. background: #ffffff;
  225. margin-top: 5px;
  226. margin-bottom: 5px;
  227. }
  228. div#mainSection table th
  229. {
  230. padding: 5px 6px;
  231. background: #EFEFF7;
  232. text-align: left;
  233. font-size: 70%;
  234. vertical-align: bottom;
  235. border-bottom: 1px solid #C8CDDE;
  236. }
  237. div#mainSection table td
  238. {
  239. padding: 5px 5px;
  240. background: #F7F7FF;
  241. vertical-align: top;
  242. font-size: 70%;
  243. border-bottom: 1px solid #D5D5D3;
  244. }
  245. div#syntaxCodeBlocks table th
  246. {
  247. padding: 1px 6px;
  248. color: #000066;
  249. }
  250. div#syntaxCodeBlocks table td
  251. {
  252. padding: 1px 5px;
  253. }
  254. /* Applies to the running header text in the first row of the upper table in the
  255. non-scrolling header region. */
  256. span#runningHeaderText
  257. {
  258. color: #003399;
  259. font-size: 90%;
  260. padding-left: 13;
  261. }
  262. /* Applies to the topic title in the second row of the upper table in the
  263. non-scrolling header region. */
  264. span#nsrTitle
  265. {
  266. color: #003399;
  267. font-size: 120%;
  268. font-weight: 600;
  269. padding-left: 13;
  270. }
  271. /* Applies to everything below the non-scrolling header region. */
  272. div#mainSection
  273. {
  274. font-size: 70%;
  275. width: 100%;
  276. }
  277. /* Applies to everything below the non-scrolling header region, minus the footer. */
  278. div#mainBody
  279. {
  280. font-size: 90%;
  281. margin-left: 15;
  282. margin-top: 10;
  283. padding-bottom: 20;
  284. }
  285. /* Adds right padding for all blocks in mainBody */
  286. div#mainBody p, div#mainBody ol, div#mainBody ul, div#mainBody dl
  287. {
  288. padding-right: 5;
  289. }
  290. div#mainBody div.alert, div#mainBody div.code, div#mainBody div.tableSection
  291. {
  292. width:98.9%;
  293. }
  294. div.alert p, div.code p
  295. {
  296. margin-top:5;
  297. margin-bottom:8;
  298. }
  299. /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Begin Note Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
  300. div#mainSection div.alert table
  301. {
  302. border: 0;
  303. }
  304. div#mainSection div.alert table th
  305. {
  306. padding-top: 0;
  307. padding-bottom: 0;
  308. padding-left: 5;
  309. padding-right: 5;
  310. }
  311. div#mainSection div.alert table td
  312. {
  313. padding-left: 5;
  314. padding-right: 5;
  315. }
  316. img.note
  317. {
  318. border: 0;
  319. margin-left: 0;
  320. margin-right: 3;
  321. }
  322. /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - End Note Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
  323. /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Begin Non-scrolling Header Region Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
  324. /* Applies to the entire non-scrolling header region. */
  325. div#header
  326. {
  327. background-color: #D4DFFF;
  328. padding-top: 0;
  329. padding-bottom: 0;
  330. padding-left: 0;
  331. padding-right: 0;
  332. width: 100%;
  333. }
  334. /* Applies to both tables in the non-scrolling header region. */
  335. div#header table
  336. {
  337. margin-top: 0;
  338. margin-bottom: 0;
  339. border-bottom-color: #C8CDDE;
  340. border-bottom-style: solid;
  341. border-bottom-width: 1;
  342. background: #D4DFFF;
  343. width: 100%;
  344. }
  345. /* Applies to cells in both tables in the non-scrolling header region. */
  346. div#header table td
  347. {
  348. color: #0000FF;
  349. font-size: 70%;
  350. padding-right: 20;
  351. padding-top: 1;
  352. padding-bottom: 1;
  353. border: none;
  354. background: #D4DFFF;
  355. }
  356. /* Applies to the last row in the upper table of the non-scrolling header region. Text
  357. in this row includes See Also, Constructors, Methods, and Properties. */
  358. div#header table tr#headerTableRow3 td
  359. {
  360. padding-bottom: 2;
  361. padding-top: 5;
  362. padding-left: 15;
  363. }
  364. /* Applies to the lower table in the non-scrolling header region. Text in this table
  365. includes Collapse All/Expand All, Language Filter, and Members Options. */
  366. div#header table#bottomTable
  367. {
  368. border-top-color: #FFFFFF;
  369. border-top-style: solid;
  370. border-top-width: 1;
  371. text-align: left;
  372. padding-left: 15;
  373. }
  374. blockquote
  375. {
  376. margin-left: 3.8em;
  377. margin-right: 3.8em;
  378. margin-top: .6em;
  379. margin-bottom: .6em;
  380. }
  381. sup
  382. {
  383. text-decoration: none;
  384. font-size: smaller;
  385. }
  386. a:link
  387. {
  388. color: #0000FF;
  389. /* font-weight: bold */
  390. }
  391. a:visited
  392. {
  393. color: #0000AA;
  394. /* font-weight: bold */
  395. }
  396. a:hover
  397. {
  398. color: #3366FF;
  399. /* font-weight: bold */
  400. }
  401. .label
  402. {
  403. font-weight: bold;
  404. margin-top: 1em;
  405. margin-left: -26px;
  406. }
  407. .tl
  408. {
  409. margin-bottom: .75em;
  410. }
  411. .atl
  412. {
  413. padding-left: 1.5em;
  414. padding-bottom: .75em;
  415. }
  416. .cfe
  417. {
  418. font-weight: bold;
  419. }
  420. .mini
  421. {
  422. font-size: smaller;
  423. }
  424. .dt
  425. {
  426. margin-bottom: -.6em;
  427. }
  428. .indent
  429. {
  430. margin-left: 1.9em;
  431. margin-right: 1.9em;
  432. }
  433. .product
  434. {
  435. text-align: right;
  436. color: #333333;
  437. font-size: smaller;
  438. font-style: italic;
  439. }
  440. .buttonbarshade
  441. {
  442. position: relative;
  443. margin: 0;
  444. left: 0px;
  445. top: 2;
  446. width: 50%;
  447. height: 40px;
  448. }
  449. .buttonbartable
  450. {
  451. position: absolute;
  452. margin: 0;
  453. padding:0;
  454. border:0;
  455. left:0px;
  456. top: 2;
  457. width: 100%;
  458. height: 40px;
  459. }
  460. /* background color, font for header */
  461. table.buttonbartable td, table.buttonbarshade td
  462. {
  463. background: #ffffff; /*#5177B8; #80C615;*/
  464. border-left: 0px solid #80C615;
  465. margin: 0;
  466. padding: 0px 0px 0px 0px;
  467. font-family: Impact, sans-serif;
  468. font-size: 14pt;
  469. }
  470. table.buttonbartable td.button1
  471. {
  472. background: #5177B8; /*#80C615;*/;
  473. padding: 0;
  474. font-weight: bold;
  475. text-align: center;
  476. cursor: hand;
  477. }
  478. table.buttonbartable td.button2
  479. {
  480. background: #5177B8; /*#80C615;*/;
  481. font-weight: bold;
  482. text-align: center;
  483. }
  484. table.buttonbartable td.button3
  485. {
  486. background: #5177B8; /*#80C615;*/;
  487. font-weight: bold;
  488. text-align: center;
  489. }
  490. table.buttonbartable td.runninghead
  491. {
  492. padding-left: 0px;
  493. font-style: italic;
  494. text-align: left;
  495. }
  496. .version
  497. {
  498. text-align: left;
  499. color: #000000;
  500. margin-top: 3em;
  501. margin-left: -26px;
  502. font-size: smaller;
  503. font-style: italic;
  504. }
  505. .lang, .ilang
  506. {
  507. color: #0000ff;
  508. font: normal 7pt Arial, Helvetica, sans-serif;
  509. }
  510. div.langMenu
  511. {
  512. position: absolute;
  513. z-index: 1;
  514. width: 96pt;
  515. padding: 8pt;
  516. visibility: hidden;
  517. border: 1px solid #000000;
  518. background: #ffffd0;
  519. }
  520. div.langMenu ul
  521. {
  522. padding-left: 2em;
  523. margin-left: 0;
  524. }
  525. div.filtered
  526. {
  527. margin: 4pt 0 8pt -26px;
  528. padding: 4px 4px 8px 26px;
  529. width: 100%;
  530. border: 2px solid #aaaacc;
  531. background: #ffffff;
  532. }
  533. div.filtered2
  534. {
  535. margin: 4pt 0 8pt -26px;
  536. padding: 4px 4px 8px 26px;
  537. width: 100%;
  538. border: none;
  539. background: #ffffff;
  540. }
  541. div.filtered h1, div.filtered h2, div.filtered h3, div.filtered h4
  542. {
  543. margin-left: -22px;
  544. }
  545. div.filtered span.lang
  546. {
  547. position: relative;
  548. left: -22px;
  549. }
  550. div.reftip
  551. {
  552. position: absolute;
  553. z-index: 1;
  554. padding: 8pt;
  555. visibility: hidden;
  556. border: 1px solid #000000;
  557. background: #ffffd0;
  558. }
  559. a.synParam
  560. {
  561. color: #0000FF;
  562. /*color: #3F7800;*/
  563. /*color: #8DC54F;*/
  564. text-decoration: none;
  565. font-weight: normal;
  566. }
  567. a.synParam:hover
  568. {
  569. text-decoration: underline;
  570. font-weight: normal;
  571. }
  572. div.sapop
  573. {
  574. position: absolute;
  575. z-index: 1;
  576. left: 26px;
  577. width: 100%;
  578. padding: 10px 10px 10px 36px;
  579. visibility: hidden;
  580. border: 1px solid #000000;
  581. background: #ffffd0;
  582. }
  583. div.footer
  584. {
  585. width: 100%;
  586. border: none;
  587. background: #ffffff;
  588. margin-top: 18pt;
  589. padding-bottom: 12pt;
  590. color: #0000FF;
  591. /*color: #228B22; */
  592. text-align: center;
  593. font-size: 76%;
  594. }
  595. div.preliminary
  596. {
  597. margin-top: 8pt;
  598. padding-bottom: 12pt;
  599. color: #A0A0A0;
  600. }
  601. /* A procedure section. eg. 'To create a file', 'To add a value' */
  602. div.proc
  603. {
  604. margin-left: 0.5em;
  605. }
  606. /* The title of a 'procedure' section. */
  607. div.proc h3
  608. {
  609. font-family: Verdana, Arial, Helvetica, sans-serif;
  610. font-weight: bold;
  611. font-size: 115%;
  612. margin-top: 1em;
  613. margin-bottom: 0.4em;
  614. margin-left: -0.5em;
  615. color: #003399;
  616. }
  617. div.proc ul
  618. {
  619. margin-left: 1.5em;
  620. }
  621. div.proc ol
  622. {
  623. margin-left: 2.0em;
  624. }
  625. .note
  626. {
  627. margin-left: 14pt;
  628. margin-right: 12pt;
  629. }
  630. .indent1
  631. {
  632. margin-left: 12pt;
  633. }
  634. .indent2
  635. {
  636. margin-left: 24pt;
  637. }
  638. .indent3
  639. {
  640. margin-left: 36pt;
  641. }
  642. p.proch
  643. {
  644. padding-left: 16px;
  645. }
  646. p.proch img
  647. {
  648. position: relative;
  649. vertical-align: top;
  650. left: -18px;
  651. margin-right: -14px;
  652. margin-bottom: -18px;
  653. }
  654. div.clsPlatSpec
  655. {
  656. background-color:#FFF8DC;
  657. border-style:solid;
  658. border-width:1pt 0pt 0pt 1pt;
  659. border-color:#ffE4C4;
  660. margin-top:0.6em;
  661. width:100%;
  662. }
  663. /* Applies to the language labels in the Language Filter drop-down list. */
  664. .languageFilter
  665. {
  666. color: #0000FF;
  667. cursor:hand;
  668. text-decoration:underline;
  669. padding-bottom:4;
  670. }
  671. /* Dropdown areas */
  672. #languageSpan {
  673. position: absolute;
  674. visibility: hidden;
  675. border-style: solid;
  676. border-width: 1px;
  677. border-color: #C8CDDE;
  678. background: #d4dfff;
  679. padding: 4px;
  680. font-size: 70%;
  681. }
  682. #membersOptionsSpan {
  683. position: absolute;
  684. visibility: hidden;
  685. border-style: solid;
  686. border-width: 1px;
  687. border-color: #C8CDDE;
  688. background: #d4dfff;
  689. padding: 4px;
  690. font-size: 70%;
  691. }
  692. --></style>
  693. <xml>
  694. <MSHelp:TOCTitle Title="Chase Camera Sample" />
  695. <MSHelp:RLTitle Title="Chase Camera Sample" />
  696. <MSHelp:Keyword Index="A" Term="O:Microsoft.Xna.ChaseCamera" />
  697. <MSHelp:Keyword Index="A" Term="8f93ab92-c538-da6e-b7ff-9bdc61fbb120" />
  698. <MSHelp:Keyword Index="K" Term="Chase Camera Sample" />
  699. <MSHelp:Attr Name="ProjType" Value="LocalProj" />
  700. <MSHelp:Attr Name="ProjType" Value="XNA" />
  701. <MSHelp:Attr Name="DocSet" Value="XNA" />
  702. <MSHelp:Attr Name="DocSet" Value="ExpressLibVS" />
  703. <MSHelp:Attr Name="DocSet" Value="C#" />
  704. <MSHelp:Attr Name="Locale" Value="en-us" />
  705. <MSHelp:Attr Name="AssetID" Value="8f93ab92-c538-da6e-b7ff-9bdc61fbb120" />
  706. <MSHelp:Attr Name="TopicType" Value="kbOrient" />
  707. </xml>
  708. </head><body><div id="mainSection"><div id="mainBody">
  709. <h1>Chase Camera Sample</h1>
  710. This sample demonstrates how to create a simple chase camera with spring physics.
  711. <a name="ID2EK"></a><h1 class="heading">Sample Overview</h1><div id="ID2EK" class="hxnx1">
  712. <p>
  713. In this sample, you can pilot a Spacewar ship from a third-person chase camera view. The motion of both the ship and the camera are governed by simple physics. When the ship speeds away, the camera pulls back. When the ship turns, the camera lags behind in the turn to show a partial profile view of the ship. When the ship stops moving, the camera gradually slides back into place.
  714. </p>
  715. <p>By pressing a button, you can compare and contrast the spring-based camera with a rigid, fixed-offset camera. You will notice that the spring-based camera provides a greater sense of speed and the ship will feel more natural to control.
  716. </p>
  717. <a name="ID2ES"></a><h2 class="subHeading">Minimum Shader Profile</h2><div id="ID2ES" class="hxnx2">
  718. <dl class="glossary">
  719. <dt>Vertex Shader Model 1.1</dt>
  720. <dt>Pixel Shader Model 1.1</dt>
  721. </dl>
  722. </div>
  723. <a name="ID2E5"></a><h2 class="subHeading">Sample Controls</h2><div id="ID2E5" class="hxnx2">
  724. <p>This sample uses the following keyboard and gamepad controls.</p>
  725. <table>
  726. <tr>
  727. <th>Action</th>
  728. <th style="width: 465px">Keyboard Control (Windows)</th>
  729. <th>Gamepad Control</th>
  730. <th>Windows Phone</th>
  731. </tr>
  732. <tr>
  733. <td>Steer.</td>
  734. <td style="width: 465px">UP ARROW, DOWN ARROW, LEFT ARROW, and RIGHT ARROW</td>
  735. <td>Left thumbstick</td>
  736. <td>Touch (Screen Edge)</td>
  737. </tr>
  738. <tr>
  739. <td>Accelerate.</td>
  740. <td style="width: 465px">SPACEBAR</td>
  741. <td>Right trigger</td>
  742. <td>Touch (Center)</td>
  743. </tr>
  744. <tr>
  745. <td>Toggle camera spring enabled</td>
  746. <td style="width: 465px"><b>A</b></td>
  747. <td><b>A</b></td>
  748. <td>Touch (Top-Left Corner)</td>
  749. </tr>
  750. <tr>
  751. <td>Exit the sample.</td>
  752. <td style="width: 465px">ESC or ALT+F4</td>
  753. <td><b>BACK</b></td>
  754. <td><b>BACK</b></td>
  755. </tr>
  756. </table>
  757. </div>
  758. </div>
  759. <a name="ID2EZC"></a><h1 class="heading">How the Sample Works</h1><div id="ID2EZC" class="hxnx1">
  760. <p>
  761. The three classes in this sample are <code>ChaseCameraGame</code>, <code>ChaseCamera</code> and <code>Ship</code>. The game class demonstrates the usage pattern for the <code>ChaseCamera</code> class. The <code>ChaseCamera</code> class implements the physics behavior and can easily be reused as is in your own games. The <code>Ship</code> class exists solely for the sake of having something to chase.
  762. </p>
  763. <a name="ID2EMD"></a><h2 class="subHeading">Using the ChaseCamera Class</h2><div id="ID2EMD" class="hxnx2">
  764. <p>
  765. During initialization, the game creates a <code>Ship</code> and <code>ChaseCamera</code>. The camera is initialized with values that will not change throughout the course of the sample such as the near and far plane distance. At this point, the camera's positioning is also defined. <b>DesiredPositionOffset</b> and <b>LookAtOffset</b> determine the resting location of the camera as well as the point the camera will look at. Both values are relative to the position of the camera and are specified in object space. That means that an offset of (0,1,1) will be one unit behind and one unit above the chased object regardless of which direction the object and camera are facing.
  766. </p>
  767. <p>
  768. Each time the ship moves (once at initialization and during every frame) the camera must be informed of the new goals to chase. This is done by the game's <b>UpdateCameraChaseTarget</b> method, which simply copies the ship's position, direction, and up vectors to the appropriate properties of the <code>ChaseCamera</code> object.
  769. </p>
  770. <p>
  771. Once the new chase targets are set, the camera's <b>Update</b> method is called to apply the physics logic. The <b>Update</b> method also updates the camera's view and projection matrices, which must be used when drawing the scene.
  772. </p>
  773. </div>
  774. <a name="ID2EKE"></a><h2 class="subHeading">Understanding the ChaseCamera Class Implementation</h2><div id="ID2EKE" class="hxnx2">
  775. <p>
  776. At first glance, the <code>ChaseCamera</code> class has a lot of properties, which can be quite intimidating. The following figure, which maps the key properties, may be equally intimidating, but after studying it carefully, you will find the camera's behavior to be less mysterious.
  777. </p>
  778. <img src="Documentation/chaseCamera.png">
  779. <p>These properties are described in full detail in their associated comments. Take special care to understand which coordinate system or units each of the properties use.</p>
  780. <p>Notice that the camera is attached to a spring anchored at the desired position (which is some offset from the chase position). This spring pulls the camera toward the desired position. When the ship comes to rest, the spring subsequently brings the camera to rest as well. The exact behavior of the spring is dependant on both the spring’s stiffness and damping as well as the camera's mass, position, and velocity.</p>
  781. </div>
  782. <a name="ID2E2E"></a><h2 class="subHeading">Spring Physics</h2><div id="ID2E2E" class="hxnx2">
  783. <p>When you stretch or compress a spring, it exerts a force on the attached bodies that is directly proportional to the elongation or compression of the spring. This force acts in the direction opposite of the elongation or compression. You can represent the displacement from the resting position as a vector originating at the camera's current position and extending to the desired camera position.</p>
  784. <pre>Vector3 stretch = position - desiredPosition;</pre>
  785. <p>You calculate the force of the spring by using Hook's Law, which formalizes the direct proportion between the elongation of a spring and the force it exerts. Do this by using a coefficient representing the stiffness of the spring. Because the spring force acts in the direction opposite the elongation, this stiffness coefficient is negated.</p>
  786. <pre>Vector3 force = -stiffness * stretch;</pre>
  787. <p>Given only this force in the absence of air resistance, internal friction, and other forces that act against an object with velocity, an elongated spring would oscillate infinitely. In order to combat this behavior, a simple linear damping force is employed in the force calculation. The force calculation is extended to the following:</p>
  788. <pre>Vector3 force = -stiffness * stretch - damping * velocity;</pre>
  789. <p>Once you've calculated the force, you apply it to the body by calculating acceleration using Newton's second law of motion. You then integrate acceleration to get the velocity, and integrate velocity to identify the new camera position. This sample uses Euler integration by simply multiplying by elapsed time.</p>
  790. <pre>// Apply acceleration
  791. Vector3 acceleration = force / mass;
  792. velocity += acceleration * elapsed;
  793. // Apply velocity
  794. position += velocity * elapsed;</pre>
  795. </div>
  796. </div>
  797. <a name="ID2ERF"></a><h1 class="heading">Ideas to Expand</h1><div id="ID2ERF" class="hxnx1">
  798. <p>Want to create an even cooler camera? Try these ideas.</p>
  799. <ul>
  800. <li>Add a method to shake the camera to look like an earthquake in a movie.</li>
  801. <li>In many scenes, a larger field of view creates a greater illusion of speed. Animate the field of view so that it is larger when the camera is moving faster.</li>
  802. <li>Add collision with your game world. If the camera or some bounding sphere collides with the game world, add another spring to prevent the camera from sticking out of the world.</li>
  803. </ul>
  804. </div>
  805. </div><div class="footer" id="footer"><p>© 2007 Microsoft Corporation. All rights reserved.<br>Send feedback to <a href="mailto:[email protected]?subject=Documentation Feedback: Chase Camera Sample">[email protected]</a>.</p></div></div></body></html>