design.html 51 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="generator" content="Asciidoctor 1.5.4">
  8. <title>Game Design short introduction</title>
  9. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
  10. <style>
  11. /* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */
  12. /* Remove comment around @import statement below when using as a custom stylesheet */
  13. /*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/
  14. article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
  15. audio,canvas,video{display:inline-block}
  16. audio:not([controls]){display:none;height:0}
  17. [hidden],template{display:none}
  18. script{display:none!important}
  19. html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
  20. body{margin:0}
  21. a{background:transparent}
  22. a:focus{outline:thin dotted}
  23. a:active,a:hover{outline:0}
  24. h1{font-size:2em;margin:.67em 0}
  25. abbr[title]{border-bottom:1px dotted}
  26. b,strong{font-weight:bold}
  27. dfn{font-style:italic}
  28. hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
  29. mark{background:#ff0;color:#000}
  30. code,kbd,pre,samp{font-family:monospace;font-size:1em}
  31. pre{white-space:pre-wrap}
  32. q{quotes:"\201C" "\201D" "\2018" "\2019"}
  33. small{font-size:80%}
  34. sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
  35. sup{top:-.5em}
  36. sub{bottom:-.25em}
  37. img{border:0}
  38. svg:not(:root){overflow:hidden}
  39. figure{margin:0}
  40. fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
  41. legend{border:0;padding:0}
  42. button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
  43. button,input{line-height:normal}
  44. button,select{text-transform:none}
  45. button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
  46. button[disabled],html input[disabled]{cursor:default}
  47. input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
  48. input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
  49. input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
  50. button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
  51. textarea{overflow:auto;vertical-align:top}
  52. table{border-collapse:collapse;border-spacing:0}
  53. *,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
  54. html,body{font-size:100%}
  55. body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;font-weight:400;font-style:normal;line-height:1;position:relative;cursor:auto}
  56. a:hover{cursor:pointer}
  57. img,object,embed{max-width:100%;height:auto}
  58. object,embed{height:100%}
  59. img{-ms-interpolation-mode:bicubic}
  60. .left{float:left!important}
  61. .right{float:right!important}
  62. .text-left{text-align:left!important}
  63. .text-right{text-align:right!important}
  64. .text-center{text-align:center!important}
  65. .text-justify{text-align:justify!important}
  66. .hide{display:none}
  67. body{-webkit-font-smoothing:antialiased}
  68. img,object,svg{display:inline-block;vertical-align:middle}
  69. textarea{height:auto;min-height:50px}
  70. select{width:100%}
  71. .center{margin-left:auto;margin-right:auto}
  72. .spread{width:100%}
  73. p.lead,.paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{font-size:1.21875em;line-height:1.6}
  74. .subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
  75. div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr}
  76. a{color:#2156a5;text-decoration:underline;line-height:inherit}
  77. a:hover,a:focus{color:#1d4b8f}
  78. a img{border:none}
  79. p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
  80. p aside{font-size:.875em;line-height:1.35;font-style:italic}
  81. h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em}
  82. h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0}
  83. h1{font-size:2.125em}
  84. h2{font-size:1.6875em}
  85. h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
  86. h4,h5{font-size:1.125em}
  87. h6{font-size:1em}
  88. hr{border:solid #ddddd8;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}
  89. em,i{font-style:italic;line-height:inherit}
  90. strong,b{font-weight:bold;line-height:inherit}
  91. small{font-size:60%;line-height:inherit}
  92. code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
  93. ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
  94. ul,ol,ul.no-bullet,ol.no-bullet{margin-left:1.5em}
  95. ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}
  96. ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}
  97. ul.square{list-style-type:square}
  98. ul.circle{list-style-type:circle}
  99. ul.disc{list-style-type:disc}
  100. ul.no-bullet{list-style:none}
  101. ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
  102. dl dt{margin-bottom:.3125em;font-weight:bold}
  103. dl dd{margin-bottom:1.25em}
  104. abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help}
  105. abbr{text-transform:none}
  106. blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
  107. blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)}
  108. blockquote cite:before{content:"\2014 \0020"}
  109. blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)}
  110. blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
  111. @media only screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
  112. h1{font-size:2.75em}
  113. h2{font-size:2.3125em}
  114. h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
  115. h4{font-size:1.4375em}}
  116. table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede}
  117. table thead,table tfoot{background:#f7f8f7;font-weight:bold}
  118. table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left}
  119. table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
  120. table tr.even,table tr.alt,table tr:nth-of-type(even){background:#f8f8f7}
  121. table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.6}
  122. body{tab-size:4}
  123. h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
  124. h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
  125. .clearfix:before,.clearfix:after,.float-group:before,.float-group:after{content:" ";display:table}
  126. .clearfix:after,.float-group:after{clear:both}
  127. *:not(pre)>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background-color:#f7f7f8;-webkit-border-radius:4px;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed}
  128. pre,pre>code{line-height:1.45;color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;text-rendering:optimizeSpeed}
  129. .keyseq{color:rgba(51,51,51,.8)}
  130. kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em white inset;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #fff inset;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap}
  131. .keyseq kbd:first-child{margin-left:0}
  132. .keyseq kbd:last-child{margin-right:0}
  133. .menuseq,.menu{color:rgba(0,0,0,.8)}
  134. b.button:before,b.button:after{position:relative;top:-1px;font-weight:400}
  135. b.button:before{content:"[";padding:0 3px 0 2px}
  136. b.button:after{content:"]";padding:0 2px 0 3px}
  137. p a>code:hover{color:rgba(0,0,0,.9)}
  138. #header,#content,#footnotes,#footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em}
  139. #header:before,#header:after,#content:before,#content:after,#footnotes:before,#footnotes:after,#footer:before,#footer:after{content:" ";display:table}
  140. #header:after,#content:after,#footnotes:after,#footer:after{clear:both}
  141. #content{margin-top:1.25em}
  142. #content:before{content:none}
  143. #header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
  144. #header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #ddddd8}
  145. #header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #ddddd8;padding-bottom:8px}
  146. #header .details{border-bottom:1px solid #ddddd8;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap}
  147. #header .details span:first-child{margin-left:-.125em}
  148. #header .details span.email a{color:rgba(0,0,0,.85)}
  149. #header .details br{display:none}
  150. #header .details br+span:before{content:"\00a0\2013\00a0"}
  151. #header .details br+span.author:before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
  152. #header .details br+span#revremark:before{content:"\00a0|\00a0"}
  153. #header #revnumber{text-transform:capitalize}
  154. #header #revnumber:after{content:"\00a0"}
  155. #content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #ddddd8;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem}
  156. #toc{border-bottom:1px solid #efefed;padding-bottom:.5em}
  157. #toc>ul{margin-left:.125em}
  158. #toc ul.sectlevel0>li>a{font-style:italic}
  159. #toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
  160. #toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
  161. #toc li{line-height:1.3334;margin-top:.3334em}
  162. #toc a{text-decoration:none}
  163. #toc a:active{text-decoration:underline}
  164. #toctitle{color:#7a2518;font-size:1.2em}
  165. @media only screen and (min-width:768px){#toctitle{font-size:1.375em}
  166. body.toc2{padding-left:15em;padding-right:0}
  167. #toc.toc2{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
  168. #toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
  169. #toc.toc2>ul{font-size:.9em;margin-bottom:0}
  170. #toc.toc2 ul ul{margin-left:0;padding-left:1em}
  171. #toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
  172. body.toc2.toc-right{padding-left:0;padding-right:15em}
  173. body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #efefed;left:auto;right:0}}
  174. @media only screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
  175. #toc.toc2{width:20em}
  176. #toc.toc2 #toctitle{font-size:1.375em}
  177. #toc.toc2>ul{font-size:.95em}
  178. #toc.toc2 ul ul{padding-left:1.25em}
  179. body.toc2.toc-right{padding-left:0;padding-right:20em}}
  180. #content #toc{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
  181. #content #toc>:first-child{margin-top:0}
  182. #content #toc>:last-child{margin-bottom:0}
  183. #footer{max-width:100%;background-color:rgba(0,0,0,.8);padding:1.25em}
  184. #footer-text{color:rgba(255,255,255,.8);line-height:1.44}
  185. .sect1{padding-bottom:.625em}
  186. @media only screen and (min-width:768px){.sect1{padding-bottom:1.25em}}
  187. .sect1+.sect1{border-top:1px solid #efefed}
  188. #content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
  189. #content h1>a.anchor:before,h2>a.anchor:before,h3>a.anchor:before,#toctitle>a.anchor:before,.sidebarblock>.content>.title>a.anchor:before,h4>a.anchor:before,h5>a.anchor:before,h6>a.anchor:before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
  190. #content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
  191. #content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
  192. #content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
  193. .audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
  194. .admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
  195. table.tableblock>caption.title{white-space:nowrap;overflow:visible;max-width:0}
  196. .paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{color:rgba(0,0,0,.85)}
  197. table.tableblock #preamble>.sectionbody>.paragraph:first-of-type p{font-size:inherit}
  198. .admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
  199. .admonitionblock>table td.icon{text-align:center;width:80px}
  200. .admonitionblock>table td.icon img{max-width:none}
  201. .admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
  202. .admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #ddddd8;color:rgba(0,0,0,.6)}
  203. .admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
  204. .exampleblock>.content{border-style:solid;border-width:1px;border-color:#e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;-webkit-border-radius:4px;border-radius:4px}
  205. .exampleblock>.content>:first-child{margin-top:0}
  206. .exampleblock>.content>:last-child{margin-bottom:0}
  207. .sidebarblock{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
  208. .sidebarblock>:first-child{margin-top:0}
  209. .sidebarblock>:last-child{margin-bottom:0}
  210. .sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
  211. .exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0}
  212. .literalblock pre,.listingblock pre:not(.highlight),.listingblock pre[class="highlight"],.listingblock pre[class^="highlight "],.listingblock pre.CodeRay,.listingblock pre.prettyprint{background:#f7f7f8}
  213. .sidebarblock .literalblock pre,.sidebarblock .listingblock pre:not(.highlight),.sidebarblock .listingblock pre[class="highlight"],.sidebarblock .listingblock pre[class^="highlight "],.sidebarblock .listingblock pre.CodeRay,.sidebarblock .listingblock pre.prettyprint{background:#f2f1f1}
  214. .literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{-webkit-border-radius:4px;border-radius:4px;word-wrap:break-word;padding:1em;font-size:.8125em}
  215. .literalblock pre.nowrap,.literalblock pre[class].nowrap,.listingblock pre.nowrap,.listingblock pre[class].nowrap{overflow-x:auto;white-space:pre;word-wrap:normal}
  216. @media only screen and (min-width:768px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:.90625em}}
  217. @media only screen and (min-width:1280px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:1em}}
  218. .literalblock.output pre{color:#f7f7f8;background-color:rgba(0,0,0,.9)}
  219. .listingblock pre.highlightjs{padding:0}
  220. .listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px}
  221. .listingblock pre.prettyprint{border-width:0}
  222. .listingblock>.content{position:relative}
  223. .listingblock code[data-lang]:before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:#999}
  224. .listingblock:hover code[data-lang]:before{display:block}
  225. .listingblock.terminal pre .command:before{content:attr(data-prompt);padding-right:.5em;color:#999}
  226. .listingblock.terminal pre .command:not([data-prompt]):before{content:"$"}
  227. table.pyhltable{border-collapse:separate;border:0;margin-bottom:0;background:none}
  228. table.pyhltable td{vertical-align:top;padding-top:0;padding-bottom:0;line-height:1.45}
  229. table.pyhltable td.code{padding-left:.75em;padding-right:0}
  230. pre.pygments .lineno,table.pyhltable td:not(.code){color:#999;padding-left:0;padding-right:.5em;border-right:1px solid #ddddd8}
  231. pre.pygments .lineno{display:inline-block;margin-right:.25em}
  232. table.pyhltable .linenodiv{background:none!important;padding-right:0!important}
  233. .quoteblock{margin:0 1em 1.25em 1.5em;display:table}
  234. .quoteblock>.title{margin-left:-1.5em;margin-bottom:.75em}
  235. .quoteblock blockquote,.quoteblock blockquote p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify}
  236. .quoteblock blockquote{margin:0;padding:0;border:0}
  237. .quoteblock blockquote:before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)}
  238. .quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
  239. .quoteblock .attribution{margin-top:.5em;margin-right:.5ex;text-align:right}
  240. .quoteblock .quoteblock{margin-left:0;margin-right:0;padding:.5em 0;border-left:3px solid rgba(0,0,0,.6)}
  241. .quoteblock .quoteblock blockquote{padding:0 0 0 .75em}
  242. .quoteblock .quoteblock blockquote:before{display:none}
  243. .verseblock{margin:0 1em 1.25em 1em}
  244. .verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}
  245. .verseblock pre strong{font-weight:400}
  246. .verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
  247. .quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
  248. .quoteblock .attribution br,.verseblock .attribution br{display:none}
  249. .quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
  250. .quoteblock.abstract{margin:0 0 1.25em 0;display:block}
  251. .quoteblock.abstract blockquote,.quoteblock.abstract blockquote p{text-align:left;word-spacing:0}
  252. .quoteblock.abstract blockquote:before,.quoteblock.abstract blockquote p:first-of-type:before{display:none}
  253. table.tableblock{max-width:100%;border-collapse:separate}
  254. table.tableblock td>.paragraph:last-child p>p:last-child,table.tableblock th>p:last-child,table.tableblock td>p:last-child{margin-bottom:0}
  255. table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
  256. table.grid-all th.tableblock,table.grid-all td.tableblock{border-width:0 1px 1px 0}
  257. table.grid-all tfoot>tr>th.tableblock,table.grid-all tfoot>tr>td.tableblock{border-width:1px 1px 0 0}
  258. table.grid-cols th.tableblock,table.grid-cols td.tableblock{border-width:0 1px 0 0}
  259. table.grid-all *>tr>.tableblock:last-child,table.grid-cols *>tr>.tableblock:last-child{border-right-width:0}
  260. table.grid-rows th.tableblock,table.grid-rows td.tableblock{border-width:0 0 1px 0}
  261. table.grid-all tbody>tr:last-child>th.tableblock,table.grid-all tbody>tr:last-child>td.tableblock,table.grid-all thead:last-child>tr>th.tableblock,table.grid-rows tbody>tr:last-child>th.tableblock,table.grid-rows tbody>tr:last-child>td.tableblock,table.grid-rows thead:last-child>tr>th.tableblock{border-bottom-width:0}
  262. table.grid-rows tfoot>tr>th.tableblock,table.grid-rows tfoot>tr>td.tableblock{border-width:1px 0 0 0}
  263. table.frame-all{border-width:1px}
  264. table.frame-sides{border-width:0 1px}
  265. table.frame-topbot{border-width:1px 0}
  266. th.halign-left,td.halign-left{text-align:left}
  267. th.halign-right,td.halign-right{text-align:right}
  268. th.halign-center,td.halign-center{text-align:center}
  269. th.valign-top,td.valign-top{vertical-align:top}
  270. th.valign-bottom,td.valign-bottom{vertical-align:bottom}
  271. th.valign-middle,td.valign-middle{vertical-align:middle}
  272. table thead th,table tfoot th{font-weight:bold}
  273. tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7}
  274. tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
  275. p.tableblock>code:only-child{background:none;padding:0}
  276. p.tableblock{font-size:1em}
  277. td>div.verse{white-space:pre}
  278. ol{margin-left:1.75em}
  279. ul li ol{margin-left:1.5em}
  280. dl dd{margin-left:1.125em}
  281. dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
  282. ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
  283. ul.unstyled,ol.unnumbered,ul.checklist,ul.none{list-style-type:none}
  284. ul.unstyled,ol.unnumbered,ul.checklist{margin-left:.625em}
  285. ul.checklist li>p:first-child>.fa-square-o:first-child,ul.checklist li>p:first-child>.fa-check-square-o:first-child{width:1em;font-size:.85em}
  286. ul.checklist li>p:first-child>input[type="checkbox"]:first-child{width:1em;position:relative;top:1px}
  287. ul.inline{margin:0 auto .625em auto;margin-left:-1.375em;margin-right:0;padding:0;list-style:none;overflow:hidden}
  288. ul.inline>li{list-style:none;float:left;margin-left:1.375em;display:block}
  289. ul.inline>li>*{display:block}
  290. .unstyled dl dt{font-weight:400;font-style:normal}
  291. ol.arabic{list-style-type:decimal}
  292. ol.decimal{list-style-type:decimal-leading-zero}
  293. ol.loweralpha{list-style-type:lower-alpha}
  294. ol.upperalpha{list-style-type:upper-alpha}
  295. ol.lowerroman{list-style-type:lower-roman}
  296. ol.upperroman{list-style-type:upper-roman}
  297. ol.lowergreek{list-style-type:lower-greek}
  298. .hdlist>table,.colist>table{border:0;background:none}
  299. .hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
  300. td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
  301. td.hdlist1{font-weight:bold;padding-bottom:1.25em}
  302. .literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
  303. .colist>table tr>td:first-of-type{padding:0 .75em;line-height:1}
  304. .colist>table tr>td:last-of-type{padding:.25em 0}
  305. .thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd}
  306. .imageblock.left,.imageblock[style*="float: left"]{margin:.25em .625em 1.25em 0}
  307. .imageblock.right,.imageblock[style*="float: right"]{margin:.25em 0 1.25em .625em}
  308. .imageblock>.title{margin-bottom:0}
  309. .imageblock.thumb,.imageblock.th{border-width:6px}
  310. .imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
  311. .image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
  312. .image.left{margin-right:.625em}
  313. .image.right{margin-left:.625em}
  314. a.image{text-decoration:none;display:inline-block}
  315. a.image object{pointer-events:none}
  316. sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
  317. sup.footnote a,sup.footnoteref a{text-decoration:none}
  318. sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
  319. #footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
  320. #footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em 0;border-width:1px 0 0 0}
  321. #footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;text-indent:-1.05em;margin-bottom:.2em}
  322. #footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none}
  323. #footnotes .footnote:last-of-type{margin-bottom:0}
  324. #content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
  325. .gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
  326. .gist .file-data>table td.line-data{width:99%}
  327. div.unbreakable{page-break-inside:avoid}
  328. .big{font-size:larger}
  329. .small{font-size:smaller}
  330. .underline{text-decoration:underline}
  331. .overline{text-decoration:overline}
  332. .line-through{text-decoration:line-through}
  333. .aqua{color:#00bfbf}
  334. .aqua-background{background-color:#00fafa}
  335. .black{color:#000}
  336. .black-background{background-color:#000}
  337. .blue{color:#0000bf}
  338. .blue-background{background-color:#0000fa}
  339. .fuchsia{color:#bf00bf}
  340. .fuchsia-background{background-color:#fa00fa}
  341. .gray{color:#606060}
  342. .gray-background{background-color:#7d7d7d}
  343. .green{color:#006000}
  344. .green-background{background-color:#007d00}
  345. .lime{color:#00bf00}
  346. .lime-background{background-color:#00fa00}
  347. .maroon{color:#600000}
  348. .maroon-background{background-color:#7d0000}
  349. .navy{color:#000060}
  350. .navy-background{background-color:#00007d}
  351. .olive{color:#606000}
  352. .olive-background{background-color:#7d7d00}
  353. .purple{color:#600060}
  354. .purple-background{background-color:#7d007d}
  355. .red{color:#bf0000}
  356. .red-background{background-color:#fa0000}
  357. .silver{color:#909090}
  358. .silver-background{background-color:#bcbcbc}
  359. .teal{color:#006060}
  360. .teal-background{background-color:#007d7d}
  361. .white{color:#bfbfbf}
  362. .white-background{background-color:#fafafa}
  363. .yellow{color:#bfbf00}
  364. .yellow-background{background-color:#fafa00}
  365. span.icon>.fa{cursor:default}
  366. .admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
  367. .admonitionblock td.icon .icon-note:before{content:"\f05a";color:#19407c}
  368. .admonitionblock td.icon .icon-tip:before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
  369. .admonitionblock td.icon .icon-warning:before{content:"\f071";color:#bf6900}
  370. .admonitionblock td.icon .icon-caution:before{content:"\f06d";color:#bf3400}
  371. .admonitionblock td.icon .icon-important:before{content:"\f06a";color:#bf0000}
  372. .conum[data-value]{display:inline-block;color:#fff!important;background-color:rgba(0,0,0,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
  373. .conum[data-value] *{color:#fff!important}
  374. .conum[data-value]+b{display:none}
  375. .conum[data-value]:after{content:attr(data-value)}
  376. pre .conum[data-value]{position:relative;top:-.125em}
  377. b.conum *{color:inherit!important}
  378. .conum:not([data-value]):empty{display:none}
  379. dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
  380. h1,h2,p,td.content,span.alt{letter-spacing:-.01em}
  381. p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
  382. p,blockquote,dt,td.content,span.alt{font-size:1.0625rem}
  383. p{margin-bottom:1.25rem}
  384. .sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
  385. .exampleblock>.content{background-color:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc}
  386. .print-only{display:none!important}
  387. @media print{@page{margin:1.25cm .75cm}
  388. *{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
  389. a{color:inherit!important;text-decoration:underline!important}
  390. a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
  391. a[href^="http:"]:not(.bare):after,a[href^="https:"]:not(.bare):after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
  392. abbr[title]:after{content:" (" attr(title) ")"}
  393. pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
  394. thead{display:table-header-group}
  395. svg{max-width:100%}
  396. p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
  397. h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
  398. #toc,.sidebarblock,.exampleblock>.content{background:none!important}
  399. #toc{border-bottom:1px solid #ddddd8!important;padding-bottom:0!important}
  400. .sect1{padding-bottom:0!important}
  401. .sect1+.sect1{border:0!important}
  402. #header>h1:first-child{margin-top:1.25rem}
  403. body.book #header{text-align:center}
  404. body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em 0}
  405. body.book #header .details{border:0!important;display:block;padding:0!important}
  406. body.book #header .details span:first-child{margin-left:0!important}
  407. body.book #header .details br{display:block}
  408. body.book #header .details br+span:before{content:none!important}
  409. body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
  410. body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
  411. .listingblock code[data-lang]:before{display:block}
  412. #footer{background:none!important;padding:0 .9375em}
  413. #footer-text{color:rgba(0,0,0,.6)!important;font-size:.9em}
  414. .hide-on-print{display:none!important}
  415. .print-only{display:block!important}
  416. .hide-for-print{display:none!important}
  417. .show-for-print{display:inherit!important}}
  418. </style>
  419. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  420. <style>
  421. /* Stylesheet for CodeRay to match GitHub theme | MIT License | http://foundation.zurb.com */
  422. /*pre.CodeRay {background-color:#f7f7f8;}*/
  423. .CodeRay .line-numbers{border-right:1px solid #d8d8d8;padding:0 0.5em 0 .25em}
  424. .CodeRay span.line-numbers{display:inline-block;margin-right:.5em;color:rgba(0,0,0,.3)}
  425. .CodeRay .line-numbers strong{color:rgba(0,0,0,.4)}
  426. table.CodeRay{border-collapse:separate;border-spacing:0;margin-bottom:0;border:0;background:none}
  427. table.CodeRay td{vertical-align: top;line-height:1.45}
  428. table.CodeRay td.line-numbers{text-align:right}
  429. table.CodeRay td.line-numbers>pre{padding:0;color:rgba(0,0,0,.3)}
  430. table.CodeRay td.code{padding:0 0 0 .5em}
  431. table.CodeRay td.code>pre{padding:0}
  432. .CodeRay .debug{color:#fff !important;background:#000080 !important}
  433. .CodeRay .annotation{color:#007}
  434. .CodeRay .attribute-name{color:#000080}
  435. .CodeRay .attribute-value{color:#700}
  436. .CodeRay .binary{color:#509}
  437. .CodeRay .comment{color:#998;font-style:italic}
  438. .CodeRay .char{color:#04d}
  439. .CodeRay .char .content{color:#04d}
  440. .CodeRay .char .delimiter{color:#039}
  441. .CodeRay .class{color:#458;font-weight:bold}
  442. .CodeRay .complex{color:#a08}
  443. .CodeRay .constant,.CodeRay .predefined-constant{color:#008080}
  444. .CodeRay .color{color:#099}
  445. .CodeRay .class-variable{color:#369}
  446. .CodeRay .decorator{color:#b0b}
  447. .CodeRay .definition{color:#099}
  448. .CodeRay .delimiter{color:#000}
  449. .CodeRay .doc{color:#970}
  450. .CodeRay .doctype{color:#34b}
  451. .CodeRay .doc-string{color:#d42}
  452. .CodeRay .escape{color:#666}
  453. .CodeRay .entity{color:#800}
  454. .CodeRay .error{color:#808}
  455. .CodeRay .exception{color:inherit}
  456. .CodeRay .filename{color:#099}
  457. .CodeRay .function{color:#900;font-weight:bold}
  458. .CodeRay .global-variable{color:#008080}
  459. .CodeRay .hex{color:#058}
  460. .CodeRay .integer,.CodeRay .float{color:#099}
  461. .CodeRay .include{color:#555}
  462. .CodeRay .inline{color:#000}
  463. .CodeRay .inline .inline{background:#ccc}
  464. .CodeRay .inline .inline .inline{background:#bbb}
  465. .CodeRay .inline .inline-delimiter{color:#d14}
  466. .CodeRay .inline-delimiter{color:#d14}
  467. .CodeRay .important{color:#555;font-weight:bold}
  468. .CodeRay .interpreted{color:#b2b}
  469. .CodeRay .instance-variable{color:#008080}
  470. .CodeRay .label{color:#970}
  471. .CodeRay .local-variable{color:#963}
  472. .CodeRay .octal{color:#40e}
  473. .CodeRay .predefined{color:#369}
  474. .CodeRay .preprocessor{color:#579}
  475. .CodeRay .pseudo-class{color:#555}
  476. .CodeRay .directive{font-weight:bold}
  477. .CodeRay .type{font-weight:bold}
  478. .CodeRay .predefined-type{color:inherit}
  479. .CodeRay .reserved,.CodeRay .keyword {color:#000;font-weight:bold}
  480. .CodeRay .key{color:#808}
  481. .CodeRay .key .delimiter{color:#606}
  482. .CodeRay .key .char{color:#80f}
  483. .CodeRay .value{color:#088}
  484. .CodeRay .regexp .delimiter{color:#808}
  485. .CodeRay .regexp .content{color:#808}
  486. .CodeRay .regexp .modifier{color:#808}
  487. .CodeRay .regexp .char{color:#d14}
  488. .CodeRay .regexp .function{color:#404;font-weight:bold}
  489. .CodeRay .string{color:#d20}
  490. .CodeRay .string .string .string{background:#ffd0d0}
  491. .CodeRay .string .content{color:#d14}
  492. .CodeRay .string .char{color:#d14}
  493. .CodeRay .string .delimiter{color:#d14}
  494. .CodeRay .shell{color:#d14}
  495. .CodeRay .shell .delimiter{color:#d14}
  496. .CodeRay .symbol{color:#990073}
  497. .CodeRay .symbol .content{color:#a60}
  498. .CodeRay .symbol .delimiter{color:#630}
  499. .CodeRay .tag{color:#008080}
  500. .CodeRay .tag-special{color:#d70}
  501. .CodeRay .variable{color:#036}
  502. .CodeRay .insert{background:#afa}
  503. .CodeRay .delete{background:#faa}
  504. .CodeRay .change{color:#aaf;background:#007}
  505. .CodeRay .head{color:#f8f;background:#505}
  506. .CodeRay .insert .insert{color:#080}
  507. .CodeRay .delete .delete{color:#800}
  508. .CodeRay .change .change{color:#66f}
  509. .CodeRay .head .head{color:#f4f}
  510. </style>
  511. </head>
  512. <body class="article toc2 toc-left">
  513. <div id="header">
  514. <div id="toc" class="toc2">
  515. <div id="toctitle">Table of Contents</div>
  516. <ul class="sectlevel1">
  517. <li><a href="#game-design-short-introduction">Game Design short introduction</a>
  518. <ul class="sectlevel2">
  519. <li><a href="#wisdoms-and-insights-with-images">Wisdoms and Insights with Images</a></li>
  520. <li><a href="#website">Website</a></li>
  521. <li><a href="#books-to-read">Books to read</a></li>
  522. <li><a href="#tips">Tips</a></li>
  523. </ul>
  524. </li>
  525. <li><a href="#management-tips">Management tips</a>
  526. <ul class="sectlevel3">
  527. <li><a href="#time-constraints">Time constraints</a></li>
  528. <li><a href="#phases-and-its-expected-result">Phases and its expected result</a></li>
  529. <li><a href="#design-as-first-step">Design as first step!</a></li>
  530. <li><a href="#in-the-scale-of-whole-project">In the scale of whole project</a></li>
  531. </ul>
  532. </li>
  533. <li><a href="#useful-terms">Useful terms</a>
  534. <ul class="sectlevel3">
  535. <li><a href="#gameplay">Gameplay</a></li>
  536. <li><a href="#design-to-programming-translation">Design to Programming translation</a></li>
  537. </ul>
  538. </li>
  539. <li><a href="#userful-tools">Userful tools</a>
  540. <ul class="sectlevel3">
  541. <li><a href="#online-docs-and-repository">Online Docs and Repository</a></li>
  542. <li><a href="#mindmap">Mindmap</a></li>
  543. <li><a href="#open-source-projects">Open source projects</a></li>
  544. <li><a href="#free-software">Free software</a></li>
  545. </ul>
  546. </li>
  547. <li><a href="#detailed-game-design-course">Detailed Game Design Course</a>
  548. <ul class="sectlevel2">
  549. <li><a href="#game-design-prime">Game design prime</a></li>
  550. <li><a href="#story-theme-and-plot">Story, Theme and Plot</a></li>
  551. <li><a href="#competitive-game-and-fun-theory">Competitive, game and fun theory</a></li>
  552. <li><a href="#map-making">Map making</a></li>
  553. <li><a href="#emotional-creature-and-character-design">Emotional creature and character design</a></li>
  554. <li><a href="#dialogue-and-cinematic-prime">Dialogue and cinematic prime</a></li>
  555. <li><a href="#gamer-s-input-and-exprience-concern">Gamer&#8217;s Input and exprience concern</a></li>
  556. </ul>
  557. </li>
  558. </ul>
  559. </div>
  560. </div>
  561. <div id="content">
  562. <div class="sect1">
  563. <h2 id="game-design-short-introduction">Game Design short introduction</h2>
  564. <div class="sectionbody">
  565. <div class="paragraph">
  566. <p>This page is dedicated to introduce you to Game design/Planing/Managing with:</p>
  567. </div>
  568. <div class="paragraph">
  569. <p>basic ideas, some terms, techniques,idioms, workflows you should learn and practice in the way of game/software developing.</p>
  570. </div>
  571. <div class="paragraph">
  572. <p>I will keep it short but concise!</p>
  573. </div>
  574. <div class="sect2">
  575. <h3 id="wisdoms-and-insights-with-images">Wisdoms and Insights with Images</h3>
  576. <div class="paragraph">
  577. <p>TRY: <a href="http://www.handdrawnapps.com/category/game-design-resources/">http://www.handdrawnapps.com/category/game-design-resources/</a></p>
  578. </div>
  579. <hr>
  580. <div class="literalblock">
  581. <div class="content">
  582. <pre>Doing it right!</pre>
  583. </div>
  584. </div>
  585. <div class="paragraph">
  586. <p><span class="image"><img src="images/http///rubycowgames.com/wp-content/uploads/game-design.jpg" alt="game-design.jpg" height=""></span></p>
  587. </div>
  588. <hr>
  589. <div class="literalblock">
  590. <div class="content">
  591. <pre>The Process and elements</pre>
  592. </div>
  593. </div>
  594. <div class="paragraph">
  595. <p><span class="image"><img src="images/http///www.gamasutra.com/db_area/images/feature/3934/image002.jpg" alt="image002.jpg" height=""></span></p>
  596. </div>
  597. <hr>
  598. <div class="literalblock">
  599. <div class="content">
  600. <pre>Use UML &amp; List &amp; Tree and Graph</pre>
  601. </div>
  602. </div>
  603. <div class="paragraph">
  604. <p><span class="image"><img src="images/http///dundee.cs.queensu.ca/~cax/arch/game-design-3.png" alt="game-design-3.png" height=""></span></p>
  605. </div>
  606. <div class="paragraph">
  607. <p><span class="image"><img src="images/http///indiegamesstudio.com/blog/wp-content/uploads/2012/08/articydraft_dialogjunkie_shot02_615x362.jpg" alt="articydraft_dialogjunkie_shot02_615x362.jpg" height=""></span></p>
  608. </div>
  609. <hr>
  610. <div class="literalblock">
  611. <div class="content">
  612. <pre>Line up gameplay's element for better overview first</pre>
  613. </div>
  614. </div>
  615. <div class="paragraph">
  616. <p><span class="image"><img src="images/http///fc04.deviantart.net/fs50/i/2009/287/d/c/Game_Design_Sketch_Pack_by_deadinsane.jpg" alt="Game_Design_Sketch_Pack_by_deadinsane.jpg" height=""></span></p>
  617. </div>
  618. <hr>
  619. <div class="literalblock">
  620. <div class="content">
  621. <pre>Care about player input and experience, motion and emotion,inspired by them!</pre>
  622. </div>
  623. </div>
  624. <div class="paragraph">
  625. <p><span class="image"><img src="images/http///gametea.files.wordpress.com/2010/09/game-design-101.gif" alt="game-design-101.gif" height=""></span></p>
  626. </div>
  627. <div class="paragraph">
  628. <p><span class="image"><img src="images/http///bulk2.destructoid.com/ul/215158-GameDesignEvent.JPG" alt="215158-GameDesignEvent.JPG" height=""></span></p>
  629. </div>
  630. <div class="paragraph">
  631. <p><span class="image"><img src="images/http///www-static.dreambox.com/wp-content/uploads/2009/06/video_gamestest.jpg" alt="video_gamestest.jpg" height=""></span></p>
  632. </div>
  633. <hr>
  634. <div class="literalblock">
  635. <div class="content">
  636. <pre>Teamwork and share, hubris is the gamekiller!</pre>
  637. </div>
  638. </div>
  639. <div class="paragraph">
  640. <p><span class="image"><img src="images/http///gamecareerguide.net/db_area/images/item_images/20071120/071120_design_game03.jpg" alt="071120_design_game03.jpg" height=""></span></p>
  641. </div>
  642. </div>
  643. <div class="sect2">
  644. <h3 id="website">Website</h3>
  645. <div class="paragraph">
  646. <p><span class="image"><img src="images/http///gamedesignschools.com/uploads/digital_asset/file/1161/gamedesignschoolscom-main-image_900x300.jpg" alt="gamedesignschoolscom-main-image_900x300.jpg" height=""></span></p>
  647. </div>
  648. <div class="paragraph">
  649. <p><a href="http://gamedesignschools.com/">http://gamedesignschools.com/</a></p>
  650. </div>
  651. <div class="paragraph">
  652. <p><a href="http://www.gamasutra.com/">http://www.gamasutra.com/</a></p>
  653. </div>
  654. </div>
  655. <div class="sect2">
  656. <h3 id="books-to-read">Books to read</h3>
  657. <div class="paragraph">
  658. <p>Try to google them please!</p>
  659. </div>
  660. <div class="ulist">
  661. <ul>
  662. <li>
  663. <p>Game Architecture and Design</p>
  664. </li>
  665. <li>
  666. <p>Game Design Foundations</p>
  667. </li>
  668. <li>
  669. <p>Game Design Theory and Practice</p>
  670. </li>
  671. <li>
  672. <p>Game Development and Production</p>
  673. </li>
  674. <li>
  675. <p>Ultimate Game Design Building Game Worlds</p>
  676. </li>
  677. </ul>
  678. </div>
  679. </div>
  680. <div class="sect2">
  681. <h3 id="tips">Tips</h3>
  682. <div class="paragraph">
  683. <p>If you are not a professional game designer developer, or not in a “restricted workflow, or even you are, here is some tips:</p>
  684. </div>
  685. <div class="sect3">
  686. <h4 id="thing-to-keep-near">Thing to keep near</h4>
  687. <div class="olist arabic">
  688. <ol class="arabic">
  689. <li>
  690. <p>Papers &amp; Pencils</p>
  691. </li>
  692. <li>
  693. <p>Your search engine</p>
  694. </li>
  695. <li>
  696. <p>Game dev books</p>
  697. </li>
  698. <li>
  699. <p>Open sources &amp; Free softwares</p>
  700. </li>
  701. <li>
  702. <p>Good kind of musics</p>
  703. </li>
  704. </ol>
  705. </div>
  706. </div>
  707. <div class="sect3">
  708. <h4 id="smart-workflow">Smart workflow</h4>
  709. <div class="imageblock" style="text-align: center">
  710. <div class="content">
  711. <img src="images/http///www.creativeuncut.com/imgs/video-game-designer.jpg" alt="video-game-designer.jpg" height="">
  712. </div>
  713. </div>
  714. <div class="sect4">
  715. <h5 id="as-developer">As developer</h5>
  716. <div class="paragraph">
  717. <p>Read :
  718. <a href="http://en.wikipedia.org/wiki/Rapid_Application_Development">http://en.wikipedia.org/wiki/Rapid_Application_Development</a></p>
  719. </div>
  720. <div class="paragraph">
  721. <p>try <strong>Extreme programing</strong>:
  722. <a href="http://en.wikipedia.org/wiki/Extreme_programming">http://en.wikipedia.org/wiki/Extreme_programming</a></p>
  723. </div>
  724. </div>
  725. <div class="sect4">
  726. <h5 id="as-designer">As designer</h5>
  727. <div class="paragraph">
  728. <p>Career
  729. <a href="http://www.creativeuncut.com/how-to-be-a-video-game-designer.html">http://www.creativeuncut.com/how-to-be-a-video-game-designer.html</a></p>
  730. </div>
  731. <div class="paragraph">
  732. <p>Principles
  733. <a href="http://www.handdrawnapps.com/2013/02/19/game-design-principles/">http://www.handdrawnapps.com/2013/02/19/game-design-principles/</a></p>
  734. </div>
  735. </div>
  736. <div class="sect4">
  737. <h5 id="as-an-artist">As an artist</h5>
  738. <div class="paragraph">
  739. <p>See 4 phase I recommended below as my experience manage a small team:</p>
  740. </div>
  741. <div class="imageblock" style="text-align: center">
  742. <div class="content">
  743. <img src="images/http///www.skillset.org/uploads/jpeg/asset_11049_hl.jpg" alt="asset_11049_hl.jpg" height="">
  744. </div>
  745. </div>
  746. <div class="imageblock" style="text-align: center">
  747. <div class="content">
  748. <img src="images/http///hub.leoartz.com/wp-content/uploads/2009/05/m_creative_uncut.jpg" alt="m_creative_uncut.jpg" height="">
  749. </div>
  750. </div>
  751. <div class="olist arabic">
  752. <ol class="arabic">
  753. <li>
  754. <p>2D Concept</p>
  755. <div class="olist loweralpha">
  756. <ol class="loweralpha" type="a">
  757. <li>
  758. <p>Outline: sketch first, dicuss a lot about ideas, be wild</p>
  759. </li>
  760. <li>
  761. <p>Coloring: get as much of details as you can</p>
  762. </li>
  763. </ol>
  764. </div>
  765. </li>
  766. <li>
  767. <p>3D Modeling</p>
  768. <div class="olist loweralpha">
  769. <ol class="loweralpha" type="a">
  770. <li>
  771. <p>Draft: T-Pose, Simple geometry, basic lighting</p>
  772. </li>
  773. <li>
  774. <p>Detail: with clean up textures, maps, shaders, better scuplting, animation</p>
  775. </li>
  776. </ol>
  777. </div>
  778. </li>
  779. </ol>
  780. </div>
  781. <div class="imageblock" style="text-align: center">
  782. <div class="content">
  783. <img src="images/http///benregimbal.com/lame_example_benrc_2007.jpg" alt="lame_example_benrc_2007.jpg" height="">
  784. </div>
  785. </div>
  786. <div class="imageblock" style="text-align: center">
  787. <div class="content">
  788. <img src="images/http///fc00.deviantart.net/fs49/f/2009/206/d/b/Attack_Force_Iphone_game_art_by_carefulconan.jpg" alt="Attack_Force_Iphone_game_art_by_carefulconan.jpg" height="">
  789. </div>
  790. </div>
  791. </div>
  792. <div class="sect4">
  793. <h5 id="as-indie-as-one-man-army">As Indie &amp; As one man army</h5>
  794. <div class="paragraph">
  795. <p>If you never in a professinal workflow before, try to do it simplier as your only have limited man power. Most valuable advice if you’re an artist do programming: Do it like Zen :p</p>
  796. </div>
  797. <div class="olist arabic">
  798. <ol class="arabic">
  799. <li>
  800. <p>Smart and active: Research first, try to call out for help if need! Opensource are the key.</p>
  801. <div class="olist loweralpha">
  802. <ol class="loweralpha" type="a">
  803. <li>
  804. <p>Flexible but manageable: Try to use SVN.</p>
  805. </li>
  806. <li>
  807. <p>Shoot with both hands: Do both assets and programming can cause a mesh, do one at a time. After finish review, get approved by yourself or the leader. Continue developing.</p>
  808. </li>
  809. <li>
  810. <p>Pirate spirit: Use place holder as much as your can. Skip concept, may use existed assets. There are plenty of free assets.</p>
  811. </li>
  812. <li>
  813. <p>Avoid premature optimization: If still concerning about design, make it work first. When doubt lelf out.</p>
  814. </li>
  815. <li>
  816. <p><abbr title="What You See Is What You Get">WYSIWYG</abbr> : What You See Is What You® (Get| Got| Goodat | Goingto | Goal )</p>
  817. </li>
  818. <li>
  819. <p><abbr title="Keep it simple stupid">KISS</abbr> : Keep It Simple Stupid! <a href="http://en.wikipedia.org/wiki/KISS_principle">http://en.wikipedia.org/wiki/KISS_principle</a></p>
  820. </li>
  821. </ol>
  822. </div>
  823. </li>
  824. </ol>
  825. </div>
  826. <div class="imageblock" style="text-align: center">
  827. <div class="content">
  828. <img src="images/http///billeebrady.com/wp-content/uploads/2012/06/Keep-It-Simple-Stupid.jpg" alt="Keep-It-Simple-Stupid.jpg" height="">
  829. </div>
  830. </div>
  831. </div>
  832. </div>
  833. </div>
  834. </div>
  835. </div>
  836. <div class="sect1">
  837. <h2 id="management-tips">Management tips</h2>
  838. <div class="sectionbody">
  839. <div class="sect3">
  840. <h4 id="time-constraints">Time constraints</h4>
  841. <div class="paragraph">
  842. <p>With any workflow and model your team choose, keep in mind this to get high quality artworks in short limit of time, keep phase (a duration of development) tight, as my personal experiences:</p>
  843. </div>
  844. <div class="olist arabic">
  845. <ol class="arabic">
  846. <li>
  847. <p><strong>Concept phase</strong> The more the better researches and ideas in short/afforable time!</p>
  848. </li>
  849. <li>
  850. <p><strong>Design phase</strong> The detailed the better/look ahead solutions and architecture in rather long time.</p>
  851. </li>
  852. <li>
  853. <p><strong>Implementaion phase</strong> The focus, intensive and “make it work first time.</p>
  854. </li>
  855. <li>
  856. <p><strong>Review phase</strong> Reviews and test, fix , always take long time, but do it frequently or you are doomed!!!</p>
  857. </li>
  858. </ol>
  859. </div>
  860. </div>
  861. <div class="sect3">
  862. <h4 id="phases-and-its-expected-result">Phases and its expected result</h4>
  863. <div class="paragraph">
  864. <p>So, in the end of each phase, you want to estimate your objectives and performane successes with a simple test/checklist . Here is “common expected result:</p>
  865. </div>
  866. <div class="paragraph">
  867. <p><strong>Concept phase</strong> Ideas → Gameplay</p>
  868. </div>
  869. <div class="paragraph">
  870. <p><strong>Design phase</strong> Gameplay → Screens</p>
  871. </div>
  872. <div class="paragraph">
  873. <p><strong>Implementation phase</strong> Screen → States [or other paradigms] → Codes (class,config)</p>
  874. </div>
  875. <div class="paragraph">
  876. <p><strong>Review phase</strong> Runs → Bugs → Patches → Deployed publishabe packages, game.</p>
  877. </div>
  878. </div>
  879. <div class="sect3">
  880. <h4 id="design-as-first-step">Design as first step!</h4>
  881. <div class="paragraph">
  882. <p>In this phase, we will design the most important things have influence to our game:</p>
  883. </div>
  884. <div class="ulist">
  885. <ul>
  886. <li>
  887. <p>Gameplay</p>
  888. </li>
  889. <li>
  890. <p>Screens</p>
  891. </li>
  892. </ul>
  893. </div>
  894. <div class="paragraph">
  895. <p>Consider, gameplay brief texts is the initial basic “outline, and the screens are the detailed sketches of the gameplay into a “software form (that&#8217;s it, a game :p).</p>
  896. </div>
  897. </div>
  898. <div class="sect3">
  899. <h4 id="in-the-scale-of-whole-project">In the scale of whole project</h4>
  900. <div class="paragraph">
  901. <p>This article talking about pre-production and other durations</p>
  902. </div>
  903. <div class="paragraph">
  904. <p><a href="http://dokgames.blogspot.com/2012/09/brick-4-whats-games-development-workflow.html">http://dokgames.blogspot.com/2012/09/brick-4-whats-games-development-workflow.html</a></p>
  905. </div>
  906. </div>
  907. </div>
  908. </div>
  909. <div class="sect1">
  910. <h2 id="useful-terms">Useful terms</h2>
  911. <div class="sectionbody">
  912. <div class="sect3">
  913. <h4 id="gameplay">Gameplay</h4>
  914. <div class="paragraph">
  915. <p>A list of “names or “things will be seen in our game, bricks that build up the gameplay piece by piece.</p>
  916. </div>
  917. <div class="sect4">
  918. <h5 id="as-shortlist">As shortlist</h5>
  919. <div class="paragraph">
  920. <p>Yeah, a real text list of names, short description and notes!</p>
  921. </div>
  922. <div class="paragraph">
  923. <p>For examples, in a Football Manager game, as my EuroKick game <a href="jme3/atomixtuts/kickgame.html">kickgame</a>
  924. You can see them as things:</p>
  925. </div>
  926. <div class="ulist">
  927. <ul>
  928. <li>
  929. <p>a Football fan see a football match in a stadium*.</p>
  930. </li>
  931. </ul>
  932. </div>
  933. <div class="paragraph">
  934. <p>or</p>
  935. </div>
  936. <div class="paragraph">
  937. <p><strong>a business man see a company with finance, reports and statistics</strong>.</p>
  938. </div>
  939. </div>
  940. <div class="sect4">
  941. <h5 id="as-mindmapping">As Mindmapping</h5>
  942. <div class="paragraph">
  943. <p>In mind mapping, the links between the names represent various kind relationships such as “Has - “Belong to , “In category… or unknown as they just poped out of our mind.</p>
  944. </div>
  945. <div class="paragraph">
  946. <p>…<a href="http://www.text2mindmap.com/">http://www.text2mindmap.com/</a>…</p>
  947. </div>
  948. </div>
  949. </div>
  950. <div class="sect3">
  951. <h4 id="design-to-programming-translation">Design to Programming translation</h4>
  952. <div class="paragraph">
  953. <p>Those, in turn will be implemented in programming language with a programming manner.</p>
  954. </div>
  955. <div class="paragraph">
  956. <p>OOP for specific, appropriate name should be transfer to a appropriate Class of Object, with properties and methods.</p>
  957. </div>
  958. <div class="paragraph">
  959. <p>For Component Oriented Programming (COP), names should be interpreted as Prefab with a specific set of components, and their processors.
  960. Read : <a href="jme3/entitysystem.html">entitysystem</a></p>
  961. </div>
  962. </div>
  963. </div>
  964. </div>
  965. <div class="sect1">
  966. <h2 id="userful-tools">Userful tools</h2>
  967. <div class="sectionbody">
  968. <div class="sect3">
  969. <h4 id="online-docs-and-repository">Online Docs and Repository</h4>
  970. <div class="paragraph">
  971. <p>To writing corporate documentations</p>
  972. </div>
  973. <div class="sect4">
  974. <h5 id="google">Google</h5>
  975. <div class="paragraph">
  976. <p>Google doc <a href="http://doc.google.com">http://doc.google.com</a>
  977. Google code <a href="http://code.google.com">http://code.google.com</a></p>
  978. </div>
  979. </div>
  980. <div class="sect4">
  981. <h5 id="github">Github</h5>
  982. <div class="paragraph">
  983. <p><a href="http://github.com">http://github.com</a></p>
  984. </div>
  985. </div>
  986. </div>
  987. <div class="sect3">
  988. <h4 id="mindmap">Mindmap</h4>
  989. <div class="paragraph">
  990. <p>Mind map can be consider very simple and basic ideas of the game in Graph based presentation, simplest Game Design document…</p>
  991. </div>
  992. <div class="paragraph">
  993. <p>Go to Text2Mindmap.com <a href="http://www.text2mindmap.com/">http://www.text2mindmap.com/</a> and build one… !</p>
  994. </div>
  995. </div>
  996. <div class="sect3">
  997. <h4 id="open-source-projects">Open source projects</h4>
  998. <div class="paragraph">
  999. <p>Google code <a href="http://code.google.com">http://code.google.com</a>
  1000. Source forge <a href="http://sourceforge.com">http://sourceforge.com</a></p>
  1001. </div>
  1002. </div>
  1003. <div class="sect3">
  1004. <h4 id="free-software">Free software</h4>
  1005. </div>
  1006. </div>
  1007. </div>
  1008. <div class="sect1">
  1009. <h2 id="detailed-game-design-course">Detailed Game Design Course</h2>
  1010. <div class="sectionbody">
  1011. <div class="sect2">
  1012. <h3 id="game-design-prime">Game design prime</h3>
  1013. </div>
  1014. <div class="sect2">
  1015. <h3 id="story-theme-and-plot">Story, Theme and Plot</h3>
  1016. </div>
  1017. <div class="sect2">
  1018. <h3 id="competitive-game-and-fun-theory">Competitive, game and fun theory</h3>
  1019. </div>
  1020. <div class="sect2">
  1021. <h3 id="map-making">Map making</h3>
  1022. </div>
  1023. <div class="sect2">
  1024. <h3 id="emotional-creature-and-character-design">Emotional creature and character design</h3>
  1025. </div>
  1026. <div class="sect2">
  1027. <h3 id="dialogue-and-cinematic-prime">Dialogue and cinematic prime</h3>
  1028. </div>
  1029. <div class="sect2">
  1030. <h3 id="gamer-s-input-and-exprience-concern">Gamer&#8217;s Input and exprience concern</h3>
  1031. </div>
  1032. </div>
  1033. </div>
  1034. </div>
  1035. <div id="footer">
  1036. <div id="footer-text">
  1037. Last updated 2016-05-21 23:44:18 UTC
  1038. </div>
  1039. </div>
  1040. </body>
  1041. </html>