CustomModelRigidAndSkinnedAnimations.htm 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870
  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>Custom Model Rigid and Skinned Animations 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="Custom Model Rigid and Skinned Animations Sample" />
  695. <MSHelp:RLTitle Title="Custom Model Rigid and Skinned Animations Sample" />
  696. <MSHelp:Keyword Index="A" Term="O:Microsoft.Xna.Custom Model Rigid and Skinned Animations" />
  697. <MSHelp:Keyword Index="A" Term="ff347d3f-59a6-7e3f-1f3b-a7d123932524" />
  698. <MSHelp:Keyword Index="K" Term="Custom Model Rigid and Skinned Animations 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="ff347d3f-59a6-7e3f-1f3b-a7d123932524" />
  706. <MSHelp:Attr Name="TopicType" Value="kbOrient" />
  707. </xml>
  708. </head><body><div id="mainSection"><div id="mainBody">
  709. <h1>Custom Model Rigid and Skinned Animations Sample</h1>
  710. This sample shows how animations can be imported on rigid and skinned models
  711. using a 3D content creation tool and then
  712. played automatically.
  713. <a name="ID2EK"></a><h1 class="heading">Sample Overview</h1><div id="ID2EK" class="hxnx1">
  714. <p>
  715. This sample shows how animations can be baked into a rigid or
  716. skinned model using a 3D content creation tool that would typically
  717. require game logic, by simply loading and playing the animation. The
  718. two examples presented in this sample are a rigid cube which falls
  719. apart as it hits the ground, and a skinned &quot;Dude&quot; model that is able
  720. to walk through a scene without having to move him using code.</p>
  721. <p>
  722. These examples are both useful for different reasons. When using a
  723. rigid model for instance, an artist can creat a complex explosion
  724. effect like the one pictured, without having the incorporate any
  725. complex physics capabilities into the game code. For a skinned
  726. model, a good place to use this technique might be inside a
  727. cutscene, where the artists can develop the entire scene independent
  728. of code.</p>
  729. <a name="ID2EX"></a>
  730. <a name="ID2EDB"></a><h2 class="subHeading">Sample Controls</h2><div id="ID2EDB" class="hxnx2">
  731. <p>This sample uses the following keyboard and gamepad controls.</p>
  732. <table>
  733. <tr>
  734. <th>Action</th>
  735. <th>Windows</th>
  736. <th>Windows/Xbox Gamepad</th>
  737. </tr>
  738. <tr>
  739. <td>Play the Rigid Animation</td>
  740. <td>A</td>
  741. <td>A</td>
  742. </tr>
  743. <tr>
  744. <td>Play the Skinned Animation</td>
  745. <td>B</td>
  746. <td>B</td>
  747. </tr>
  748. <tr>
  749. <td>Exit the game.</td>
  750. <td>ESC or ALT+F4</td>
  751. <td><b>BACK</b></td>
  752. </tr>
  753. </table>
  754. </div>
  755. </div>
  756. </div><div class="footer" id="footer"><p>© 2010 Microsoft Corporation. All rights reserved.<br>Send feedback to
  757. <a href="mailto:[email protected]?subject=Documentation Feedback: Custom Model Rigid and Skinned Animations Sample">
  758. [email protected]</a>.</p></div></div></body></html>