.katex { display: block; text-align: center; white-space: nowrap; }
.katex-display > .katex > .katex-html { display: block; }
.katex-display > .katex > .katex-html > .tag { position: absolute; right: 0px; }
.katex { font: 1.21em/1.2 KaTeX_Main, "Times New Roman", serif; text-indent: 0px; text-rendering: auto; }
.katex * { }
.katex .katex-mathml { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0px; border: 0px; height: 1px; width: 1px; overflow: hidden; }
.katex .katex-html { }
.katex .katex-html > .newline { display: block; }
.katex .base { position: relative; display: inline-block; white-space: nowrap; width: min-content; }
.katex .strut { display: inline-block; }
.katex .textbf { font-weight: bold; }
.katex .textit { font-style: italic; }
.katex .textrm { font-family: KaTeX_Main; }
.katex .textsf { font-family: KaTeX_SansSerif; }
.katex .texttt { font-family: KaTeX_Typewriter; }
.katex .mathit { font-family: KaTeX_Math; font-style: italic; }
.katex .mathrm { font-style: normal; }
.katex .mathbf { font-family: KaTeX_Main; font-weight: bold; }
.katex .boldsymbol { font-family: KaTeX_Math; font-weight: bold; font-style: italic; }
.katex .amsrm { font-family: KaTeX_AMS; }
.katex .mathbb, .katex .textbb { font-family: KaTeX_AMS; }
.katex .mathcal { font-family: KaTeX_Caligraphic; }
.katex .mathfrak, .katex .textfrak { font-family: KaTeX_Fraktur; }
.katex .mathtt { font-family: KaTeX_Typewriter; }
.katex .mathscr, .katex .textscr { font-family: KaTeX_Script; }
.katex .mathsf, .katex .textsf { font-family: KaTeX_SansSerif; }
.katex .mainit { font-family: KaTeX_Main; font-style: italic; }
.katex .mainrm { font-family: KaTeX_Main; font-style: normal; }
.katex .vlist-t { display: inline-table; table-layout: fixed; }
.katex .vlist-r { display: table-row; }
.katex .vlist { display: table-cell; vertical-align: bottom; position: relative; }
.katex .vlist > span { display: block; height: 0px; position: relative; }
.katex .vlist > span > span { display: inline-block; }
.katex .vlist > span > .pstrut { overflow: hidden; width: 0px; }
.katex .vlist-t2 { margin-right: -2px; }
.katex .vlist-s { display: table-cell; vertical-align: bottom; font-size: 1px; width: 2px; min-width: 2px; }
.katex .msupsub { text-align: left; }
.katex .mfrac > span > span { text-align: center; }
.katex .mfrac .frac-line { display: inline-block; width: 100%; border-bottom-style: solid; }
.katex .mspace { display: inline-block; }
.katex .llap, .katex .rlap, .katex .clap { width: 0px; position: relative; }
.katex .llap > .inner, .katex .rlap > .inner, .katex .clap > .inner { position: absolute; }
.katex .llap > .fix, .katex .rlap > .fix, .katex .clap > .fix { display: inline-block; }
.katex .llap > .inner { right: 0px; }
.katex .rlap > .inner, .katex .clap > .inner { left: 0px; }
.katex .clap > .inner > span { margin-left: -50%; margin-right: 50%; }
.katex .rule { display: inline-block; border: 0px solid; position: relative; }
.katex .overline .overline-line, .katex .underline .underline-line, .katex .hline { display: inline-block; width: 100%; border-bottom-style: solid; }
.katex .hdashline { display: inline-block; width: 100%; border-bottom-style: dashed; }
.katex .sqrt > .root { margin-left: 0.277778em; margin-right: -0.555556em; }
.katex .sizing, .katex .fontsize-ensurer { display: inline-block; }
.katex .sizing.reset-size1.size1, .katex .fontsize-ensurer.reset-size1.size1 { font-size: 1em; }
.katex .sizing.reset-size1.size2, .katex .fontsize-ensurer.reset-size1.size2 { font-size: 1.2em; }
.katex .sizing.reset-size1.size3, .katex .fontsize-ensurer.reset-size1.size3 { font-size: 1.4em; }
.katex .sizing.reset-size1.size4, .katex .fontsize-ensurer.reset-size1.size4 { font-size: 1.6em; }
.katex .sizing.reset-size1.size5, .katex .fontsize-ensurer.reset-size1.size5 { font-size: 1.8em; }
.katex .sizing.reset-size1.size6, .katex .fontsize-ensurer.reset-size1.size6 { font-size: 2em; }
.katex .sizing.reset-size1.size7, .katex .fontsize-ensurer.reset-size1.size7 { font-size: 2.4em; }
.katex .sizing.reset-size1.size8, .katex .fontsize-ensurer.reset-size1.size8 { font-size: 2.88em; }
.katex .sizing.reset-size1.size9, .katex .fontsize-ensurer.reset-size1.size9 { font-size: 3.456em; }
.katex .sizing.reset-size1.size10, .katex .fontsize-ensurer.reset-size1.size10 { font-size: 4.148em; }
.katex .sizing.reset-size1.size11, .katex .fontsize-ensurer.reset-size1.size11 { font-size: 4.976em; }
.katex .sizing.reset-size2.size1, .katex .fontsize-ensurer.reset-size2.size1 { font-size: 0.833333em; }
.katex .sizing.reset-size2.size2, .katex .fontsize-ensurer.reset-size2.size2 { font-size: 1em; }
.katex .sizing.reset-size2.size3, .katex .fontsize-ensurer.reset-size2.size3 { font-size: 1.16667em; }
.katex .sizing.reset-size2.size4, .katex .fontsize-ensurer.reset-size2.size4 { font-size: 1.33333em; }
.katex .sizing.reset-size2.size5, .katex .fontsize-ensurer.reset-size2.size5 { font-size: 1.5em; }
.katex .sizing.reset-size2.size6, .katex .fontsize-ensurer.reset-size2.size6 { font-size: 1.66667em; }
.katex .sizing.reset-size2.size7, .katex .fontsize-ensurer.reset-size2.size7 { font-size: 2em; }
.katex .sizing.reset-size2.size8, .katex .fontsize-ensurer.reset-size2.size8 { font-size: 2.4em; }
.katex .sizing.reset-size2.size9, .katex .fontsize-ensurer.reset-size2.size9 { font-size: 2.88em; }
.katex .sizing.reset-size2.size10, .katex .fontsize-ensurer.reset-size2.size10 { font-size: 3.45667em; }
.katex .sizing.reset-size2.size11, .katex .fontsize-ensurer.reset-size2.size11 { font-size: 4.14667em; }
.katex .sizing.reset-size3.size1, .katex .fontsize-ensurer.reset-size3.size1 { font-size: 0.714286em; }
.katex .sizing.reset-size3.size2, .katex .fontsize-ensurer.reset-size3.size2 { font-size: 0.857143em; }
.katex .sizing.reset-size3.size3, .katex .fontsize-ensurer.reset-size3.size3 { font-size: 1em; }
.katex .sizing.reset-size3.size4, .katex .fontsize-ensurer.reset-size3.size4 { font-size: 1.14286em; }
.katex .sizing.reset-size3.size5, .katex .fontsize-ensurer.reset-size3.size5 { font-size: 1.28571em; }
.katex .sizing.reset-size3.size6, .katex .fontsize-ensurer.reset-size3.size6 { font-size: 1.42857em; }
.katex .sizing.reset-size3.size7, .katex .fontsize-ensurer.reset-size3.size7 { font-size: 1.71429em; }
.katex .sizing.reset-size3.size8, .katex .fontsize-ensurer.reset-size3.size8 { font-size: 2.05714em; }
.katex .sizing.reset-size3.size9, .katex .fontsize-ensurer.reset-size3.size9 { font-size: 2.46857em; }
.katex .sizing.reset-size3.size10, .katex .fontsize-ensurer.reset-size3.size10 { font-size: 2.96286em; }
.katex .sizing.reset-size3.size11, .katex .fontsize-ensurer.reset-size3.size11 { font-size: 3.55429em; }
.katex .sizing.reset-size4.size1, .katex .fontsize-ensurer.reset-size4.size1 { font-size: 0.625em; }
.katex .sizing.reset-size4.size2, .katex .fontsize-ensurer.reset-size4.size2 { font-size: 0.75em; }
.katex .sizing.reset-size4.size3, .katex .fontsize-ensurer.reset-size4.size3 { font-size: 0.875em; }
.katex .sizing.reset-size4.size4, .katex .fontsize-ensurer.reset-size4.size4 { font-size: 1em; }
.katex .sizing.reset-size4.size5, .katex .fontsize-ensurer.reset-size4.size5 { font-size: 1.125em; }
.katex .sizing.reset-size4.size6, .katex .fontsize-ensurer.reset-size4.size6 { font-size: 1.25em; }
.katex .sizing.reset-size4.size7, .katex .fontsize-ensurer.reset-size4.size7 { font-size: 1.5em; }
.katex .sizing.reset-size4.size8, .katex .fontsize-ensurer.reset-size4.size8 { font-size: 1.8em; }
.katex .sizing.reset-size4.size9, .katex .fontsize-ensurer.reset-size4.size9 { font-size: 2.16em; }
.katex .sizing.reset-size4.size10, .katex .fontsize-ensurer.reset-size4.size10 { font-size: 2.5925em; }
.katex .sizing.reset-size4.size11, .katex .fontsize-ensurer.reset-size4.size11 { font-size: 3.11em; }
.katex .sizing.reset-size5.size1, .katex .fontsize-ensurer.reset-size5.size1 { font-size: 0.555556em; }
.katex .sizing.reset-size5.size2, .katex .fontsize-ensurer.reset-size5.size2 { font-size: 0.666667em; }
.katex .sizing.reset-size5.size3, .katex .fontsize-ensurer.reset-size5.size3 { font-size: 0.777778em; }
.katex .sizing.reset-size5.size4, .katex .fontsize-ensurer.reset-size5.size4 { font-size: 0.888889em; }
.katex .sizing.reset-size5.size5, .katex .fontsize-ensurer.reset-size5.size5 { font-size: 1em; }
.katex .sizing.reset-size5.size6, .katex .fontsize-ensurer.reset-size5.size6 { font-size: 1.11111em; }
.katex .sizing.reset-size5.size7, .katex .fontsize-ensurer.reset-size5.size7 { font-size: 1.33333em; }
.katex .sizing.reset-size5.size8, .katex .fontsize-ensurer.reset-size5.size8 { font-size: 1.6em; }
.katex .sizing.reset-size5.size9, .katex .fontsize-ensurer.reset-size5.size9 { font-size: 1.92em; }
.katex .sizing.reset-size5.size10, .katex .fontsize-ensurer.reset-size5.size10 { font-size: 2.30444em; }
.katex .sizing.reset-size5.size11, .katex .fontsize-ensurer.reset-size5.size11 { font-size: 2.76444em; }
.katex .sizing.reset-size6.size1, .katex .fontsize-ensurer.reset-size6.size1 { font-size: 0.5em; }
.katex .sizing.reset-size6.size2, .katex .fontsize-ensurer.reset-size6.size2 { font-size: 0.6em; }
.katex .sizing.reset-size6.size3, .katex .fontsize-ensurer.reset-size6.size3 { font-size: 0.7em; }
.katex .sizing.reset-size6.size4, .katex .fontsize-ensurer.reset-size6.size4 { font-size: 0.8em; }
.katex .sizing.reset-size6.size5, .katex .fontsize-ensurer.reset-size6.size5 { font-size: 0.9em; }
.katex .sizing.reset-size6.size6, .katex .fontsize-ensurer.reset-size6.size6 { font-size: 1em; }
.katex .sizing.reset-size6.size7, .katex .fontsize-ensurer.reset-size6.size7 { font-size: 1.2em; }
.katex .sizing.reset-size6.size8, .katex .fontsize-ensurer.reset-size6.size8 { font-size: 1.44em; }
.katex .sizing.reset-size6.size9, .katex .fontsize-ensurer.reset-size6.size9 { font-size: 1.728em; }
.katex .sizing.reset-size6.size10, .katex .fontsize-ensurer.reset-size6.size10 { font-size: 2.074em; }
.katex .sizing.reset-size6.size11, .katex .fontsize-ensurer.reset-size6.size11 { font-size: 2.488em; }
.katex .sizing.reset-size7.size1, .katex .fontsize-ensurer.reset-size7.size1 { font-size: 0.416667em; }
.katex .sizing.reset-size7.size2, .katex .fontsize-ensurer.reset-size7.size2 { font-size: 0.5em; }
.katex .sizing.reset-size7.size3, .katex .fontsize-ensurer.reset-size7.size3 { font-size: 0.583333em; }
.katex .sizing.reset-size7.size4, .katex .fontsize-ensurer.reset-size7.size4 { font-size: 0.666667em; }
.katex .sizing.reset-size7.size5, .katex .fontsize-ensurer.reset-size7.size5 { font-size: 0.75em; }
.katex .sizing.reset-size7.size6, .katex .fontsize-ensurer.reset-size7.size6 { font-size: 0.833333em; }
.katex .sizing.reset-size7.size7, .katex .fontsize-ensurer.reset-size7.size7 { font-size: 1em; }
.katex .sizing.reset-size7.size8, .katex .fontsize-ensurer.reset-size7.size8 { font-size: 1.2em; }
.katex .sizing.reset-size7.size9, .katex .fontsize-ensurer.reset-size7.size9 { font-size: 1.44em; }
.katex .sizing.reset-size7.size10, .katex .fontsize-ensurer.reset-size7.size10 { font-size: 1.72833em; }
.katex .sizing.reset-size7.size11, .katex .fontsize-ensurer.reset-size7.size11 { font-size: 2.07333em; }
.katex .sizing.reset-size8.size1, .katex .fontsize-ensurer.reset-size8.size1 { font-size: 0.347222em; }
.katex .sizing.reset-size8.size2, .katex .fontsize-ensurer.reset-size8.size2 { font-size: 0.416667em; }
.katex .sizing.reset-size8.size3, .katex .fontsize-ensurer.reset-size8.size3 { font-size: 0.486111em; }
.katex .sizing.reset-size8.size4, .katex .fontsize-ensurer.reset-size8.size4 { font-size: 0.555556em; }
.katex .sizing.reset-size8.size5, .katex .fontsize-ensurer.reset-size8.size5 { font-size: 0.625em; }
.katex .sizing.reset-size8.size6, .katex .fontsize-ensurer.reset-size8.size6 { font-size: 0.694444em; }
.katex .sizing.reset-size8.size7, .katex .fontsize-ensurer.reset-size8.size7 { font-size: 0.833333em; }
.katex .sizing.reset-size8.size8, .katex .fontsize-ensurer.reset-size8.size8 { font-size: 1em; }
.katex .sizing.reset-size8.size9, .katex .fontsize-ensurer.reset-size8.size9 { font-size: 1.2em; }
.katex .sizing.reset-size8.size10, .katex .fontsize-ensurer.reset-size8.size10 { font-size: 1.44028em; }
.katex .sizing.reset-size8.size11, .katex .fontsize-ensurer.reset-size8.size11 { font-size: 1.72778em; }
.katex .sizing.reset-size9.size1, .katex .fontsize-ensurer.reset-size9.size1 { font-size: 0.289352em; }
.katex .sizing.reset-size9.size2, .katex .fontsize-ensurer.reset-size9.size2 { font-size: 0.347222em; }
.katex .sizing.reset-size9.size3, .katex .fontsize-ensurer.reset-size9.size3 { font-size: 0.405093em; }
.katex .sizing.reset-size9.size4, .katex .fontsize-ensurer.reset-size9.size4 { font-size: 0.462963em; }
.katex .sizing.reset-size9.size5, .katex .fontsize-ensurer.reset-size9.size5 { font-size: 0.520833em; }
.katex .sizing.reset-size9.size6, .katex .fontsize-ensurer.reset-size9.size6 { font-size: 0.578704em; }
.katex .sizing.reset-size9.size7, .katex .fontsize-ensurer.reset-size9.size7 { font-size: 0.694444em; }
.katex .sizing.reset-size9.size8, .katex .fontsize-ensurer.reset-size9.size8 { font-size: 0.833333em; }
.katex .sizing.reset-size9.size9, .katex .fontsize-ensurer.reset-size9.size9 { font-size: 1em; }
.katex .sizing.reset-size9.size10, .katex .fontsize-ensurer.reset-size9.size10 { font-size: 1.20023em; }
.katex .sizing.reset-size9.size11, .katex .fontsize-ensurer.reset-size9.size11 { font-size: 1.43981em; }
.katex .sizing.reset-size10.size1, .katex .fontsize-ensurer.reset-size10.size1 { font-size: 0.24108em; }
.katex .sizing.reset-size10.size2, .katex .fontsize-ensurer.reset-size10.size2 { font-size: 0.289296em; }
.katex .sizing.reset-size10.size3, .katex .fontsize-ensurer.reset-size10.size3 { font-size: 0.337512em; }
.katex .sizing.reset-size10.size4, .katex .fontsize-ensurer.reset-size10.size4 { font-size: 0.385728em; }
.katex .sizing.reset-size10.size5, .katex .fontsize-ensurer.reset-size10.size5 { font-size: 0.433944em; }
.katex .sizing.reset-size10.size6, .katex .fontsize-ensurer.reset-size10.size6 { font-size: 0.48216em; }
.katex .sizing.reset-size10.size7, .katex .fontsize-ensurer.reset-size10.size7 { font-size: 0.578592em; }
.katex .sizing.reset-size10.size8, .katex .fontsize-ensurer.reset-size10.size8 { font-size: 0.694311em; }
.katex .sizing.reset-size10.size9, .katex .fontsize-ensurer.reset-size10.size9 { font-size: 0.833173em; }
.katex .sizing.reset-size10.size10, .katex .fontsize-ensurer.reset-size10.size10 { font-size: 1em; }
.katex .sizing.reset-size10.size11, .katex .fontsize-ensurer.reset-size10.size11 { font-size: 1.19961em; }
.katex .sizing.reset-size11.size1, .katex .fontsize-ensurer.reset-size11.size1 { font-size: 0.200965em; }
.katex .sizing.reset-size11.size2, .katex .fontsize-ensurer.reset-size11.size2 { font-size: 0.241158em; }
.katex .sizing.reset-size11.size3, .katex .fontsize-ensurer.reset-size11.size3 { font-size: 0.28135em; }
.katex .sizing.reset-size11.size4, .katex .fontsize-ensurer.reset-size11.size4 { font-size: 0.321543em; }
.katex .sizing.reset-size11.size5, .katex .fontsize-ensurer.reset-size11.size5 { font-size: 0.361736em; }
.katex .sizing.reset-size11.size6, .katex .fontsize-ensurer.reset-size11.size6 { font-size: 0.401929em; }
.katex .sizing.reset-size11.size7, .katex .fontsize-ensurer.reset-size11.size7 { font-size: 0.482315em; }
.katex .sizing.reset-size11.size8, .katex .fontsize-ensurer.reset-size11.size8 { font-size: 0.578778em; }
.katex .sizing.reset-size11.size9, .katex .fontsize-ensurer.reset-size11.size9 { font-size: 0.694534em; }
.katex .sizing.reset-size11.size10, .katex .fontsize-ensurer.reset-size11.size10 { font-size: 0.833601em; }
.katex .sizing.reset-size11.size11, .katex .fontsize-ensurer.reset-size11.size11 { font-size: 1em; }
.katex .delimsizing.size1 { font-family: KaTeX_Size1; }
.katex .delimsizing.size2 { font-family: KaTeX_Size2; }
.katex .delimsizing.size3 { font-family: KaTeX_Size3; }
.katex .delimsizing.size4 { font-family: KaTeX_Size4; }
.katex .delimsizing.mult .delim-size1 > span { font-family: KaTeX_Size1; }
.katex .delimsizing.mult .delim-size4 > span { font-family: KaTeX_Size4; }
.katex .nulldelimiter { display: inline-block; width: 0.12em; }
.katex .delimcenter { position: relative; }
.katex .op-symbol { position: relative; }
.katex .op-symbol.small-op { font-family: KaTeX_Size1; }
.katex .op-symbol.large-op { font-family: KaTeX_Size2; }
.katex .op-limits > .vlist-t { text-align: center; }
.katex .accent > .vlist-t { text-align: center; }
.katex .accent .accent-body:not(.accent-full) { width: 0px; }
.katex .accent .accent-body { position: relative; }
.katex .overlay { display: block; }
.katex .mtable .vertical-separator { display: inline-block; margin: 0px -0.025em; border-right: 0.05em solid; }
.katex .mtable .vs-dashed { border-right: 0.05em dashed; }
.katex .mtable .arraycolsep { display: inline-block; }
.katex .mtable .col-align-c > .vlist-t { text-align: center; }
.katex .mtable .col-align-l > .vlist-t { text-align: left; }
.katex .mtable .col-align-r > .vlist-t { text-align: right; }
.katex .svg-align { text-align: left; }
.katex svg, .screenShotTempCanvas { display: block; position: absolute; width: 100%; height: inherit; fill: currentcolor; stroke: currentcolor; fill-rule: nonzero; fill-opacity: 1; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1; }
.katex svg path { stroke: none; }
.katex .stretchy { width: 100%; display: block; position: relative; overflow: hidden; }
.katex .stretchy::before, .katex .stretchy::after { content: ""; }
.katex .hide-tail { width: 100%; position: relative; overflow: hidden; }
.katex .halfarrow-left { position: absolute; left: 0px; width: 50.2%; overflow: hidden; }
.katex .halfarrow-right { position: absolute; right: 0px; width: 50.2%; overflow: hidden; }
.katex .brace-left { position: absolute; left: 0px; width: 25.1%; overflow: hidden; }
.katex .brace-center { position: absolute; left: 25%; width: 50%; overflow: hidden; }
.katex .brace-right { position: absolute; right: 0px; width: 25.1%; overflow: hidden; }
.katex .x-arrow-pad { padding: 0px 0.5em; }
.katex .x-arrow, .katex .mover, .katex .munder { text-align: center; }
.katex .boxpad { padding: 0px 0.3em; }
.katex .fbox { box-sizing: border-box; border: 0.04em solid black; }
.katex .fcolorbox { box-sizing: border-box; border: 0.04em solid; }
.katex .cancel-pad { padding: 0px 0.2em; }
.katex .cancel-lap { margin-left: -0.2em; margin-right: -0.2em; }
.katex .sout { border-bottom-style: solid; border-bottom-width: 0.08em; }
.output_wrapper pre code { display: -webkit-box !important; }
.output_wrapper .hljs{color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 0.5em;}
.output_wrapper .hljs-params{color: rgb(255, 152, 35);}
.output_wrapper .hljs-number,.output_wrapper .hljs-literal,.output_wrapper .hljs-symbol,.output_wrapper .hljs-bullet{color: rgb(174, 135, 250);}
.output_wrapper .hljs-function,.output_wrapper .hljs-built_in,.output_wrapper .hljs-name,.output_wrapper .hljs-keyword,.output_wrapper .hljs-selector-tag,.output_wrapper .hljs-deletion{color: rgb(248, 35, 117);}
.output_wrapper .hljs-variable,.output_wrapper .hljs-template-variable,.output_wrapper .hljs-link{color: rgb(98, 151, 85);}
.output_wrapper .hljs-comment,.output_wrapper .hljs-quote{color: rgb(128, 128, 128);}
.output_wrapper .hljs-meta{color: rgb(91, 218, 237);}
.output_wrapper .hljs-string,.output_wrapper .hljs-attribute,.output_wrapper .hljs-addition{color: rgb(238, 220, 112);}
.output_wrapper .hljs-attr,.output_wrapper .hljs-section,.output_wrapper .hljs-title,.output_wrapper .hljs-type{color: rgb(165, 218, 45);}
.output_wrapper .hljs-selector-class{color: rgb(165, 218, 45);}
.output_wrapper .hljs-emphasis{font-style: italic;}
.output_wrapper .hljs-strong{font-weight: bold;}
.output_wrapper pre code {line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px;}
.output_wrapper{font-size: 16px; color: rgb(62, 62, 62); line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); background-size: 20px 20px; background-position: center center;}
.output_wrapper *{font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;}
.output_wrapper p{margin: 1.5em 0px;}
.output_wrapper h1,.output_wrapper h2,.output_wrapper h3,.output_wrapper h4,.output_wrapper h5,.output_wrapper h6{margin: 1.5em 0px; font-weight: bold;}
.output_wrapper h1{font-size: 1.6em;}
.output_wrapper h2{font-size: 1.4em;}
.output_wrapper h3{font-size: 1.3em;}
.output_wrapper h4{font-size: 1.2em;}
.output_wrapper h5{font-size: 1em;}
.output_wrapper h6{font-size: 1em;}
.output_wrapper ul,.output_wrapper ol{padding-left: 32px;}
.output_wrapper ul{list-style-type: disc;}
.output_wrapper ol{list-style-type: decimal;}
.output_wrapper li *{}
.output_wrapper li{margin-bottom: 0.5em;}
.output_wrapper .code_size_default{line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px;}
.output_wrapper .code_size_tight{line-height: 15px; font-size: 11px; font-weight: normal; word-spacing: -3px; letter-spacing: 0px;}
.output_wrapper pre code{font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px;}
.output_wrapper blockquote{display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(129, 145, 152); border-left: 6px solid rgb(220, 230, 240); background: rgb(242, 247, 251); overflow: auto; overflow-wrap: normal; word-break: normal;}
.output_wrapper blockquote p{margin: 0px;}
.output_wrapper a{text-decoration: none; color: rgb(30, 107, 184); overflow-wrap: break-word;}
.output_wrapper strong{font-weight: bold;}
.output_wrapper em{font-style: italic;}
.output_wrapper del{font-style: italic;}
.output_wrapper strong em{font-weight: bold;}
.output_wrapper hr{height: 1px; margin: 1.5rem 0px; border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px dashed rgb(165, 165, 165);}
.output_wrapper code{overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(233, 105, 0); background: rgb(248, 248, 248);}
.output_wrapper img{display: block; margin: 0px auto; max-width: 100%;}
.output_wrapper figcaption{margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;}
.output_wrapper table{display: table; width: 100%; text-align: left;}
.output_wrapper tbody{border: 0px;}
.output_wrapper table tr{border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(204, 204, 204); background-color: white;}
.output_wrapper table tr th,.output_wrapper table tr td{font-size: 1em; border: 1px solid rgb(204, 204, 204); padding: 0.5em 1em; text-align: left;}
.output_wrapper table tr th{font-weight: bold; background-color: rgb(240, 240, 240);}
.output_wrapper .katex-display{font-size: 1.22em;}
.output_wrapper .katex{padding: 8px 3px;}
.output_wrapper .katex-display > .katex{display: inline-block; text-align: center; padding: 3px;}
.output_wrapper .katex img{display: inline-block; vertical-align: middle;}
.output_wrapper a[href^="#"] sup{vertical-align: super; margin: 0px 2px; padding: 1px 3px; color: rgb(255, 255, 255); background: rgb(102, 102, 102); font-size: 0.7em;}
.output_wrapper .task-list-list{list-style-type: none;}
.output_wrapper .task-list-list.checked{color: rgb(62, 62, 62);}
.output_wrapper .task-list-list.uncheck{color: rgb(191, 193, 191);}
.output_wrapper .task-list-list .icon_uncheck,.output_wrapper .task-list-list .icon_check{display: inline-block; vertical-align: middle; margin-right: 10px;}
.output_wrapper .task-list-list .icon_check::before{content: "√"; border: 2px solid rgb(62, 62, 62); color: red;}
.output_wrapper .task-list-list .icon_uncheck::before{content: "x"; border: 2px solid rgb(191, 193, 191); color: rgb(191, 193, 191);}
.output_wrapper .task-list-list .icon_check::before,.output_wrapper .task-list-list .icon_uncheck::before{padding: 2px 8px 2px 5px; border-radius: 5px;}
.output_wrapper .toc{margin-left: 25px;}
.output_wrapper .toc_item{display: block;}
.output_wrapper .toc_left{margin-left: 25px;}
.output_wrapper pre code{border-radius: 3px; border-width: 1px 1px 1px 6px; border-style: solid; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(33, 152, 99);}
.output_wrapper pre code .linenum{padding-right: 20px; word-spacing: 0px;}
.output_wrapper .hljs{color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 0.5em;}
.output_wrapper .hljs-params{color: rgb(255, 152, 35);}
.output_wrapper .hljs-number,.output_wrapper .hljs-literal,.output_wrapper .hljs-symbol,.output_wrapper .hljs-bullet{color: rgb(174, 135, 250);}
.output_wrapper .hljs-function,.output_wrapper .hljs-built_in,.output_wrapper .hljs-name,.output_wrapper .hljs-keyword,.output_wrapper .hljs-selector-tag,.output_wrapper .hljs-deletion{color: rgb(248, 35, 117);}
.output_wrapper .hljs-variable,.output_wrapper .hljs-template-variable,.output_wrapper .hljs-link{color: rgb(98, 151, 85);}
.output_wrapper .hljs-comment,.output_wrapper .hljs-quote{color: rgb(128, 128, 128);}
.output_wrapper .hljs-meta{color: rgb(91, 218, 237);}
.output_wrapper .hljs-string,.output_wrapper .hljs-attribute,.output_wrapper .hljs-addition{color: rgb(238, 220, 112);}
.output_wrapper .hljs-attr,.output_wrapper .hljs-section,.output_wrapper .hljs-title,.output_wrapper .hljs-type{color: rgb(165, 218, 45);}
.output_wrapper .hljs-selector-class{color: rgb(165, 218, 45);}
.output_wrapper .hljs-emphasis{font-style: italic;}
.output_wrapper .hljs-strong{font-weight: bold;}
.output_wrapper p{margin: 1.5em 0px;}
.output_wrapper h1,.output_wrapper h2,.output_wrapper h3,.output_wrapper h4,.output_wrapper h5,.output_wrapper h6{margin: 1.5em 0px; font-weight: bold;}
.output_wrapper h1{font-size: 1.6em;}
.output_wrapper h2{font-size: 1.4em;}
.output_wrapper h3{font-size: 1.3em;}
.output_wrapper h4{font-size: 1.2em;}
.output_wrapper h5{font-size: 1em;}
.output_wrapper h6{font-size: 1em;}
.output_wrapper h3{border-bottom: 2px solid rgb(62, 62, 62); margin-bottom: 50px;}
.output_wrapper h3 span{display: inline-block; padding: 10px 0px;}
.output_wrapper h3 span::first-letter,.output_wrapper h3 .firstletter{color: rgb(255, 255, 255); padding: 10px 15px; margin-right: 20px; background: rgb(62, 62, 62);}
-->
在本篇教程中，你将学习如何创建粒子特效并使用蓝图进行更新。
粒子特效是构成视觉效果的关键组件。它能让开发者创造如爆炸，烟雾和雨水等特效。
Unreal Engine 4有一个非常壮健，易于使用的粒子特效系统——Cascade。这个系统允许用户创建模块化特效，并能随意地控制粒子行为。
在本篇教程中，你将学习：
- 创建粒子系统
- 设置粒子的速度和体积
- 调整粒子的生成速度
- 使用曲线调整其生成周期的粒子体积
- 使用Cascade设置粒子颜色
- 使用蓝图激活/反激活粒子系统
- 使用蓝图设置粒子颜色
起步入门
下载示例项目并解压。进入项目文件夹，双击SpaceshipBattle.uproject打开项目。
按下Play运行游戏，长按左键射击，使用W，A，S和D键进行移动。
在本篇教程中，我们将创建两个粒子特效，分别用于飞船推进喷射和飞船爆炸。我们将使用粒子系统来创建特效。
什么是粒子系统？
顾名思义，粒子系统是用于创建并管理粒子的系统。一个粒子本质只是游戏世界里的一个点。通过粒子系统，我们可以控制粒子的出现和表现。
粒子系统包含一个或多个所谓发射器的组件，它们负责生成粒子。
发射器同样包含所谓模块的组件，模块控制发射器粒子的一组参数。比如，一个粒子的材质和初始速度。如下面动图，是用了两个模块定义了红色圆形材质和随机速度做出了粒子效果。
我们也可以在粒子的生命周期里修改其颜色。比如下面动图，粒子的颜色会从红色渐变成蓝色：
现在你已了解什么是粒子系统了，我们先来创建飞船的推进喷射效果。
创建粒子系统
打开ParticleSystems文件夹，点击Add New\Particle System，将新建资源命名为PS_Thruster并双击打开编辑器。
Cascade：粒子系统编辑器
Cascade编辑器由四个主要面板组成：
1.Viewport：该面板用于展示粒子特效的预览效果。我们可以通过长按右键移动鼠标转动视角，长按右键并配合WASD键移动镜头。
2.Details：显示你选中的任何组件（发射器，模块等）的参数。如果没有任何组件选中，则显示粒子系统的参数。
3.Emitters：该面板会从左至右的显示一组发射器列表。每个发射器都会显示它的模块列表。
4.Curve Editor：曲线编辑器允许我们可视化地调整模块曲线数值，不过不是所有模块参数都支持曲线调节的。
现在，粒子系统正在使用默认粒子材质。
第一步，我们先将粒子材质替换为球形材质。
应用粒子材质
在Emitters面板选中Required模块。
Required模块包含如粒子材质和发射器时长等必要参数。每个发射器都有一个Required模块。
为了修改材质，在Details面板将Material修改成M_Particle。可以看到，粒子的外观已经变成了橙色圆形。
接着，我们要将粒子系统应用到玩家飞船上。
关联粒子系统
回到主编辑器并打开Blueprints文件夹，打开BP_Player并找到Components面板。
我们可以使用Particle System组件来使用粒子系统，创建组件并将其命名为ThrusterParticles。确保将其放在Collision组件下。
为了指定具体粒子系统，在Details面板展开Particles设置，将Template设置为PS_Thruster。
接着，设置ThrusterParticles的Location为(-80, 0, 0)。将组件放在飞船的后面。
最后，将Rotation设置为(0, 90, 0)，旋转粒子系统，让粒子朝远离飞船的方向喷射。
点击Compile并回到主编辑器，按下Play运行游戏看看粒子特效的实际效果。
粒子特效已经生效了，但粒子喷射得有点缓慢，也比较小型。我们可以通过设置粒子的初始速度和体积来调整。
设置粒子的速度和体积
首先，我们先设置粒子的初始速度。打开PS_Thruster并选中Initial Velocity模块。随后，展开Start Velocity\Distribution。
默认情况下，粒子的初始速度范围是从(-10, -10, 50)到(10, 10, 100)。
为了粒子以更高的速度朝飞船相反方向喷射，我们所要做的是增加Z轴速度。将Min Z设为300，Max Z设为400。
以下是原始速度跟修改后速度的粒子对比图：
接着，我们需要设置粒子的初始体积。
设置粒子体积
选中Initial Size模块，在Details面板展开Start Size\Distribution。
一如Initial Velocity模块，Initial Size也有最大值最小值随机范围。然而，在本例中，我们要将体积设定为常量值。将Distribution字段设置成Distribution Vector Constant。
随后，将Constant设置为(70, 70, 70)。以下是体积对比图：
回到主编辑器并按下Play查看效果。
粒子效果看起来好多了，但粒子间距显得比较大。这是因为粒子间的生成时间间隔太长了。要解决这个问题，就要增加粒子生成速率。
增加粒子生成速率
为了增加生成速率，我们需要使用Spawn模块，这个模块决定了生成器生成粒子的速率。跟Required模块一样，每个发射器都有一个Spawn模块。
打开PS_Thruster并选中Spawn，在Details面板展开Spawn\Rate设置。
将Constant调成50，使得粒子器每秒生成50个粒子。
回到主编辑器并点击Play。
如你所见，粒子特效现在看起来更像喷气拖尾了。为了让效果看起来更加逼真，我们还可以让粒子随时间缩小。
随时间缩小粒子效果
打开PS_Thruster并找到Emitters面板。
要缩小粒子效果，我们可以使用Size By Life模块。这个模块使用了一个乘数来控制粒子体积。在面板空白处右键点击弹出选中菜单并选中Size\Size By Life。
添加完后，粒子效果体积不会有任何变化。因为乘数默认设置为1。为了缩小粒子体积，我们需要调整模块的曲线来逐渐减小体积乘数。不过首先第一点疑问，什么是曲线？
什么是曲线？
曲线是一系列点的集合。每个点包含两个信息：位置和值。
当你拥有多于两个点时，你就拥有了一条线段。下面是一条简单线性的曲线。点A是个坐标点，其数值为0。点B也是个坐标点，其数值为1。
如果你在线段的任意位置取点采样，效果跟线性插值是一样的。比如，如果你在采样在图中坐标1处取点采样，你就会得到0.5的数值。
如果你创建了一条递增下降的曲线，所获得的返回值就会逐渐变小。Size By Life模块所需要的就是这样一条曲线。
现在，我们就要在Cascade系统里创建一条这样的曲线。
修改模块曲线
选中Size By Life并观察Details面板，随后，展开Life Multiplier\Distribution\Constant Curve\Points。在这里可以看到Life Multiplier曲线的坐标点列表。
In Val代表曲线点的位置，对于Size By Life来说，数值0代表粒子生命周期的开始，数值1代表粒子生命周期的结尾。
为了逐步减小体积乘数，我们需要减小第二个点的Out Val值。将point 1的Out Val改为(0,0,0)。这样就能将粒子的体积逐渐改为0.
你可以使用曲线编辑器可视化查看Life Multiplier。具体做法是点击Size By Lift模块的图表图标.
这样我们就能在曲线编辑器里添加Life Multiplier了，为了调整视图画面到适合大小，点击编辑器里的Fix按钮。
如你所见，在粒子生存周期里，体积乘数从1降低到0.
回到主编辑器，按下Play。
这个粒子效果现在看起来就非常像喷射烟火了！我们最后还要做一件事就是增加粒子的颜色变化。
增加颜色变化
要用Casade设置粒子的颜色，我们需要正确地设置粒子材质，在Materials文件夹打开M_Particle。
现在，可以看到材质已经设置了颜色。为了使用粒子系统的颜色设置，我们需要用上ParticleColor节点。
首先，删除连接Emissive Color的节点。接着，添加ParticleColor节点并进入如下连接：
点击Apply并关闭M_Particle。
为了设置粒子颜色，我们要使用Initial Color模块。
Initial Color模块
打开PS_Thruster并添加Initial Color模块。我们可以看到如下的Color二级列表。
要增加颜色变化，我们需要指定颜色范围，要实现这点，就要用上Distribution设置。
选中Initial Color并打开Details面板，展开Start Color设置并将Distribution改为Distribution Vector Uniform。这样我们就可以可视化指定颜色范围了。
在本例中，颜色范围应由橙色过渡到红色，因此我们将Max设置为(1.0, 0.0, 0.0)，将Min设置为(1.0, 0.35, 0.0)。
如果我们观察Viewport，会发现颜色变化非常异样。
这是由于Color Over Life模块恒定地把颜色设置为白色。为了解决这个问题，选中Color Over Life并按下Delete键。粒子模块列表现在看起来应该是这样的：
关闭PS_Thruster并在主编辑器按下Play运行游戏，看看这些喷射焰火！
接下来，我们要学习如何根据飞船移动与否来切换激活粒子系统。
切换激活粒子系统
要判读飞船是否处于移动状态，我们可以取而判断玩家有没有按下任何移动按键。
打开BP_Player并找到Event Tick节点，在节点末端做如下设置：
让我们看看这些节点做了什么事情：
- 检查了MoveUp和MoveRight轴按键映射情况，如果两者都为0，说明玩家目前没有按任何移动按键。
- Branch分支返回true（玩家没有按键），反激活ThrusterParticles。
- Branch分支返回false（玩家有按键），激活ThrusterParticles。
点击Compile并关闭BP_Player，按下Play运行游戏在尝试体会静止，移动的特效差别。
现在有趣的部分来了：创建爆炸特效！
创建爆炸特效
与其重新创建新的粒子特效，我们直接复制喷射推进特效。在ParticleSystems文件夹，右键点击PS_Thruster并选中Duplicate，将复制资源重命名为PS_Explosion并双击打开。
对于爆炸特效而言，所有的粒子都应该在同一时间生成，这被称之为（爆破发射）burst-emitting。
创建爆破
首先，我们需要将生成速率设置为0，因为我们不需要使用默认的生成效果，选中Spawn模块并将Spawn\Rate\Distribution\Constant设置为0。
接着，我们需要让发射器知道我们想要一个爆破效果，滑动到Burst部分设置，点击+号图标给Burst List添加新元素。
每组元素都包含三个字段：
- Count：要生成的粒子数，将其设置为20。
- Count Low：如果该值设置为大于等于0，所生成的粒子数量在Count Low到Count之间，将其保留为-1。
- Time：生成粒子的时机。数值为0表示在发射器生命周期的一开始就生成，数值为1表示在生命周期最后生成，将其保留为0.0。
这意味着发射器会在粒子特效伊始就生成20个粒子。
为了使其看起来更像爆炸，我们需要设置粒子的爆炸方向让其四射散开。
粒子四散效果
由于本例是一个垂直视角游戏，我们只需要指定X和Y轴的速度。选中Initial Velocity模块并展开Start Velocity\Distribution设置，将Max设置为(1000, 1000, 0)，将Min设置为(-1000, -1000, 0)。
通过指定一个负数到正数的范围，粒子就会从发射器中间往四周四散飞去。
接着，我们需要设置发射器的播放循环次数。
设置发射器循环
发射器默认上会无限循环播放，这对于火焰或者烟雾效果而言非常适合，但爆炸特效却只应该播放一次。
选中Required模块并找到Duration设置，将Emitter Loops设置为1 。
现在，试试实现敌机死亡时的爆炸特效吧！
敌机死亡生成爆炸特效
回到主编辑器并打开Blueprints文件夹，打开BP_Enemy并找到OnDeath事件。
为了生成粒子特效，我们可以使用Spawn Emitter at Location节点。创建节点并连接Destroy Actor节点。
现在，将Emitter Template设置为PS_Explosion。
最后，创建GetActorLocation节点并将其于Location引脚相连。
现在，当敌机死亡时，它会在敌机位置生成PS_Explosion实例。
点击Compile并返回主编辑器。按下Play运行游戏射杀其他敌机吧。
看看这些爆炸效果！接着，我们要丰富细节，将爆炸特效颜色改成给敌机颜色一样。
修改爆炸颜色为敌机颜色
为了使用敌机颜色，我们需要从蓝图中获取该信息。幸运地是，Cascade有一个Distribution字段类型可以干这件事。
打开PS_Explosion并选中Initial Color模块，将Start Color\Distribution设置为Distribution Vector Particle Parameter。
这样就能设置任何蓝图里有的参数，我们将Parameter Name设置为PrimaryColor。
爆炸特效我们希望能用上敌机上的两种颜色。为了使用第二种颜色，我们需要多一个发射器。右键点击 Emitter面板的空白处，在弹出菜单中选择Emitter\Duplicate and Share Emitter，这样就能复制多一个发射器。
你可以留意到现在每个模块旁边都有一个+号设置。使用Duplicate and Share Emitter而非Duplicate，其效果就是在原有的发射器上进行链接，而非复制。你在一个发射器上做任意改动，都会连带影响另一个发射器。当你想一同修改所有发射器的某个参数，比如说体积时，这个特性非常有用。
我们这个模块唯一想单独修改的属性是Initial Color。然而，如果我们修改了其中一个发射器，另一个发射器也会受到影响。这种情况下，我们不希望某些参数收到链接影响，最简单的实现方法就是删除Initial Color模块，并创建一个新模块。
选中新建的Initial Color并设置Start Color\Distribution为Distribution Vector Particle Parameter。接着，设置Parameter Name为SecondaryColor。
截至目前，粒子特效已经设置好了。关闭PS_Explosion。
接着，我们需要通过蓝图设置这两个变量。
通过蓝图设置粒子特效参数变量
打开BP_Enemy并在Spawn Emitter at Location节点后添加如下高亮节点：
这样就可以设置PS_Explosion里的两个变量了。
现在，我们需要设置下这两个参数名字。将第一个Set Color Parameter节点的Parameter Name字段设为PrimaryColor，将第二个Set Color Parameter节点的Parameter Name字段设为SecondaryColor。
最后，我们需要设置具体的颜色数值。为了简化教程步骤，我以提前将数值存储在PrimaryColor和SecondaryColor这两个变量里了。如下图进行变量连接：
最后我们就得到如下连接：
最后回顾下整个过程：
- 当敌机死亡时，它会在当前位置生成PS_Explosion实例
- 设置PS_Explosion的PrimaryColor参数
- 设置PS_Explosion的SecondaryColor参数
点击Compile并关闭BP_Enemy。按下Play运行游戏开始射杀敌机，享受粒子盛宴吧！
看看这些养眼的粒子。看看你能不能给主角死亡加上爆炸效果吧！
后续学习
你可以在这里下载完整项目。
你相信到目前为止你对Cascade系统的了解仅仅只是皮毛吗？我们创建了一些有趣的特效，不过仍有很多模块没有尝试过。我建议你学习更多有关TypeData模块的内容。利用这个模块，你可以创建诸如剑影拖尾，闪电甚至倾盆大雨的特效！
如果你还想继续学习引擎其他内容，点击下篇教程，将讲解有如何上手使用AI。