dbfaf78b.42665dff.js

js excaliburjs.com collected 2026-09-24 22:38:28 UTC 94,496 bytes, 1 lines download raw bytes

1"use strict";(globalThis.webpackChunksite=globalThis.webpackChunksite||[]).push([[4633],{59770(s,e,n){n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>o,default:()=>x,frontMatter:()=>i,metadata:()=>l,toc:()=>d});const l=JSON.parse('{"id":"fundamentals/transitions","title":"Scene Transitions","description":"Many times in your game you\'ll want to smoothly go from one scene to the next, or provide a custom effect when transitioning!","source":"@site/docs/02-fundamentals/05-transitions.mdx","sourceDirName":"02-fundamentals","slug":"/transitions","permalink":"/docs/transitions","draft":false,"unlisted":false,"editUrl":"https://github.com/excaliburjs/Excalibur/tree/main/site/docs/02-fundamentals/05-transitions.mdx","tags":[],"version":"current","sidebarPosition":5,"frontMatter":{"title":"Scene Transitions","slug":"/transitions","section":"Fundamentals"},"sidebar":"learnSidebar","previous":{"title":"Scenes","permalink":"/docs/scenes"},"next":{"title":"Loaders","permalink":"/docs/loaders"}}');var r=n(74848),c=n(28453);const i={title:"Scene Transitions",slug:"/transitions",section:"Fundamentals"},o=void 0,a={},d=[{value:"Using Pre-Defined Scene Transitions",id:"using-pre-defined-scene-transitions",level:2},{value:"Transition Options",id:"transition-options",level:2},{value:"Overriding Transitions",id:"overriding-transitions",level:2},{value:"FadeInOut",id:"fadeinout",level:2},{value:"CrossFade",id:"crossfade",level:2},{value:"Starting Scene Transition",id:"starting-scene-transition",level:2},{value:"Custom built Transitions",id:"custom-built-transitions",level:2}];function t(s){const e={a:"a",admonition:"admonition",code:"code","data-lsp":"data-lsp",div:"div",h2:"h2",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...(0,c.R)(),...s.components},n=e["data-lsp"],{PlaygroundEmbed:l}=e;return l||function(s,e){throw new Error("Expected "+(e?"component":"object")+" `"+s+"` to be defined: you likely forgot to import, pass, or provide it.")}("PlaygroundEmbed",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.div,{className:"shiki-twoslash-fragment"}),"\n",(0,r.jsx)(e.p,{children:"Many times in your game you'll want to smoothly go from one scene to the next, or provide a custom effect when transitioning!"}),"\n",(0,r.jsx)(e.h2,{id:"using-pre-defined-scene-transitions",children:"Using Pre-Defined Scene Transitions"}),"\n",(0,r.jsx)(e.p,{children:"It is generally recommended that you define you scenes up front, when you do you have the opportunity to also specify the in/out transitions for a scene."}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"in"})," transitions play when the target scene has started, and will play the effect until the ",(0,r.jsx)(e.code,{children:"duration"})," in milliseconds is complete"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"out"})," transitions play before the current scene is deactivated, the transition must complete before deactivation."]}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["If no ",(0,r.jsx)(e.code,{children:"in/out"})," transition is specified for a scene it will hard cut from one to the other."]}),"\n",(0,r.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,r.jsxs)(e.pre,{className:"shiki github-light twoslash lsp",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,r.jsx)(e.div,{className:"language-id",children:"ts"}),(0,r.jsx)(e.div,{className:"code-container",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:(0,r.jsx)(n,{lsp:'const game: ex.Engine<"scene1" | "scene2">',children:"game"})}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:(0,r.jsx)(n,{lsp:'constructor Engine<"scene1" | "scene2">(options?: ex.EngineOptions<"scene1" | "scene2"> | undefined): ex.Engine<"scene1" | "scene2">',children:"Engine"})}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"({"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["  ",(0,r.jsx)(n,{lsp:'(property) EngineOptions<"scene1" | "scene2">.scenes?: ex.SceneMap<"scene1" | "scene2"> | undefined',children:"scenes"}),": {"]})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["    ",(0,r.jsx)(n,{lsp:"(property) scene1: ex.Scene<unknown> | ex.SceneConstructor | ex.SceneWithOptions",children:"scene1"}),": {"]})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["      ",(0,r.jsx)(n,{lsp:"(property) SceneWithOptions.scene: ex.Scene<unknown> | ex.SceneConstructor",children:"scene"}),": ",(0,r.jsx)(n,{lsp:"class MyScene",children:"MyScene"}),","]})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["      ",(0,r.jsx)(n,{lsp:"(property) SceneWithOptions.transitions?: {\n    in?: ex.Transition;\n    out?: ex.Transition;\n} | undefined",children:"transitions"}),": {"]})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["        ",(0,r.jsx)(n,{lsp:"(property) in?: ex.Transition | undefined",children:"in"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:(0,r.jsx)(n,{lsp:"constructor FadeInOut(options: ex.FadeOptions & ex.TransitionOptions): ex.FadeInOut",children:"FadeInOut"})}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["({",(0,r.jsx)(n,{lsp:"(property) duration: number",children:"duration"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"500"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[", ",(0,r.jsx)(n,{lsp:'(property) TransitionOptions.direction?: "in" | "out" | undefined',children:"direction"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:"'in'"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[", ",(0,r.jsx)(n,{lsp:"(property) FadeOptions.color?: ex.Color | undefined",children:"color"}),": ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),".",(0,r.jsx)(n,{lsp:"class Color",children:"Color"}

1),".",(0,r.jsx)(n,{lsp:"(property) Color.Black: ex.Color",children:"Black"}),"}),"]})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["        ",(0,r.jsx)(n,{lsp:"(property) out?: ex.Transition | undefined",children:"out"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:(0,r.jsx)(n,{lsp:"constructor FadeInOut(options: ex.FadeOptions & ex.TransitionOptions): ex.FadeInOut",children:"FadeInOut"})}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["({",(0,r.jsx)(n,{lsp:"(property) duration: number",children:"duration"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"500"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[", ",(0,r.jsx)(n,{lsp:'(property) TransitionOptions.direction?: "in" | "out" | undefined',children:"direction"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:"'out'"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[", ",(0,r.jsx)(n,{lsp:"(property) FadeOptions.color?: ex.Color | undefined",children:"color"}),": ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),".",(0,r.jsx)(n,{lsp:"class Color",children:"Color"}),".",(0,r.jsx)(n,{lsp:"(property) Color.Black: ex.Color",children:"Black"}),"})"]})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"      }"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    },"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["    ",(0,r.jsx)(n,{lsp:"(property) scene2: ex.Scene<unknown> | ex.SceneConstructor | ex.SceneWithOptions",children:"scene2"}),": {"]})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["      ",(0,r.jsx)(n,{lsp:"(property) SceneWithOptions.scene: ex.Scene<unknown> | ex.SceneConstructor",children:"scene"}),": ",(0,r.jsx)(n,{lsp:"class MyOtherScene",children:"MyOtherScene"}),","]})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["      ",(0,r.jsx)(n,{lsp:"(property) SceneWithOptions.transitions?: {\n    in?: ex.Transition;\n    out?: ex.Transition;\n} | undefined",children:"transitions"}),": {"]})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["        ",(0,r.jsx)(n,{lsp:"(property) in?: ex.Transition | undefined",children:"in"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:(0,r.jsx)(n,{lsp:"constructor FadeInOut(options: ex.FadeOptions & ex.TransitionOptions): ex.FadeInOut",children:"FadeInOut"})}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["({",(0,r.jsx)(n,{lsp:"(property) duration: number",children:"duration"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"500"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[", ",(0,r.jsx)(n,{lsp:'(property) TransitionOptions.direction?: "in" | "out" | undefined',children:"direction"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:"'in'"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[", ",(0,r.jsx)(n,{lsp:"(property) FadeOptions.color?: ex.Color | undefined",children:"color"}),": ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),".",(0,r.jsx)(n,{lsp:"class Color",children:"Color"}),".",(0,r.jsx)(n,{lsp:"(property) Color.Black: ex.Color",children:"Black"}),"}),"]})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["        ",(0,r.jsx)(n,{lsp:"(property) out?: ex.Transition | undefined",children:"out"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:(0,r.jsx)(n,{lsp:"constructor FadeInOut(options: ex.FadeOptions & ex.TransitionOptions): ex.FadeInOut",children:"FadeInOut"})}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["({",(0,r.jsx)(n,{lsp:"(property) duration: number",children:"duration"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"500"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[", ",(0,r.jsx)(n,{lsp:'(property) TransitionOptions.direction?: "in" | "out" | undefined',children:"direction"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:"'out'"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[", ",(0,r.jsx)(n,{lsp:"(property) FadeOptions.color?: ex.Color | undefined",children:"color"}),": ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),".",(0,r.jsx)(n,{lsp:"class Color",children:"Color"}

1),".",(0,r.jsx)(n,{lsp:"(property) Color.Black: ex.Color",children:"Black"}),"})"]})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"      }"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    }"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"});"})}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[(0,r.jsx)(n,{lsp:'const game: ex.Engine<"scene1" | "scene2">',children:"game"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:(0,r.jsx)(n,{lsp:'(method) Engine<"scene1" | "scene2">.goToScene<undefined>(destinationScene: ex.WithRoot<"scene1" | "scene2">, options?: ex.GoToOptions<undefined> | undefined): Promise<void>',children:"goToScene"})}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:"'scene1'"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:");"})]}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"})]})})]}),"\n",(0,r.jsxs)(e.pre,{className:"shiki github-dark twoslash lsp",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,r.jsx)(e.div,{className:"language-id",children:"ts"}),(0,r.jsx)(e.div,{className:"code-container",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:(0,r.jsx)(n,{lsp:'const game: ex.Engine<"scene1" | "scene2">',children:"game"})}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:(0,r.jsx)(n,{lsp:'constructor Engine<"scene1" | "scene2">(options?: ex.EngineOptions<"scene1" | "scene2"> | undefined): ex.Engine<"scene1" | "scene2">',children:"Engine"})}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"({"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["  ",(0,r.jsx)(n,{lsp:'(property) EngineOptions<"scene1" | "scene2">.scenes?: ex.SceneMap<"scene1" | "scene2"> | undefined',children:"scenes"}),": {"]})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["    ",(0,r.jsx)(n,{lsp:"(property) scene1: ex.Scene<unknown> | ex.SceneConstructor | ex.SceneWithOptions",children:"scene1"}),": {"]})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["      ",(0,r.jsx)(n,{lsp:"(property) SceneWithOptions.scene: ex.Scene<unknown> | ex.SceneConstructor",children:"scene"}),": ",(0,r.jsx)(n,{lsp:"class MyScene",children:"MyScene"}),","]})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["      ",(0,r.jsx)(n,{lsp:"(property) SceneWithOptions.transitions?: {\n    in?: ex.Transition;\n    out?: ex.Transition;\n} | undefined",children:"transitions"}),": {"]})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["        ",(0,r.jsx)(n,{lsp:"(property) in?: ex.Transition | undefined",children:"in"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:(0,r.jsx)(n,{lsp:"constructor FadeInOut(options: ex.FadeOptions & ex.TransitionOptions): ex.FadeInOut",children:"FadeInOut"})}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["({",(0,r.jsx)(n,{lsp:"(property) duration: number",children:"duration"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"500"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[", ",(0,r.jsx)(n,{lsp:'(property) TransitionOptions.direction?: "in" | "out" | undefined',children:"direction"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'in'"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[", ",(0,r.jsx)(n,{lsp:"(property) FadeOptions.color?: ex.Color | undefined",children:"color"}),": ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),".",(0,r.jsx)(n,{lsp:"class Color",children:"Color"}

1),".",(0,r.jsx)(n,{lsp:"(property) Color.Black: ex.Color",children:"Black"}),"}),"]})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["        ",(0,r.jsx)(n,{lsp:"(property) out?: ex.Transition | undefined",children:"out"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:(0,r.jsx)(n,{lsp:"constructor FadeInOut(options: ex.FadeOptions & ex.TransitionOptions): ex.FadeInOut",children:"FadeInOut"})}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["({",(0,r.jsx)(n,{lsp:"(property) duration: number",children:"duration"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"500"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[", ",(0,r.jsx)(n,{lsp:'(property) TransitionOptions.direction?: "in" | "out" | undefined',children:"direction"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'out'"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[", ",(0,r.jsx)(n,{lsp:"(property) FadeOptions.color?: ex.Color | undefined",children:"color"}),": ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),".",(0,r.jsx)(n,{lsp:"class Color",children:"Color"}),".",(0,r.jsx)(n,{lsp:"(property) Color.Black: ex.Color",children:"Black"}),"})"]})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"      }"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    },"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["    ",(0,r.jsx)(n,{lsp:"(property) scene2: ex.Scene<unknown> | ex.SceneConstructor | ex.SceneWithOptions",children:"scene2"}),": {"]})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["      ",(0,r.jsx)(n,{lsp:"(property) SceneWithOptions.scene: ex.Scene<unknown> | ex.SceneConstructor",children:"scene"}),": ",(0,r.jsx)(n,{lsp:"class MyOtherScene",children:"MyOtherScene"}),","]})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["      ",(0,r.jsx)(n,{lsp:"(property) SceneWithOptions.transitions?: {\n    in?: ex.Transition;\n    out?: ex.Transition;\n} | undefined",children:"transitions"}),": {"]})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["        ",(0,r.jsx)(n,{lsp:"(property) in?: ex.Transition | undefined",children:"in"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:(0,r.jsx)(n,{lsp:"constructor FadeInOut(options: ex.FadeOptions & ex.TransitionOptions): ex.FadeInOut",children:"FadeInOut"})}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["({",(0,r.jsx)(n,{lsp:"(property) duration: number",children:"duration"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"500"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[", ",(0,r.jsx)(n,{lsp:'(property) TransitionOptions.direction?: "in" | "out" | undefined',children:"direction"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'in'"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[", ",(0,r.jsx)(n,{lsp:"(property) FadeOptions.color?: ex.Color | undefined",children:"color"}),": ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),".",(0,r.jsx)(n,{lsp:"class Color",children:"Color"}),".",(0,r.jsx)(n,{lsp:"(property) Color.Black: ex.Color",children:"Black"}),"}),"]})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["        ",(0,r.jsx)(n,{lsp:"(property) out?: ex.Transition | undefined",children:"out"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:(0,r.jsx)(n,{lsp:"constructor FadeInOut(options: ex.FadeOptions & ex.TransitionOptions): ex.FadeInOut",children:"FadeInOut"})}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["({",(0,r.jsx)(n,{lsp:"(property) duration: number",children:"duration"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"500"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[", ",(0,r.jsx)(n,{lsp:'(property) TransitionOptions.direction?: "in" | "out" | undefined',children:"direction"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'out'"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[", ",(0,r.jsx)(n,{lsp:"(property) FadeOptions.color?: ex.Color | undefined",children:"color"}),": ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),".",(0,r.jsx)(n,{lsp:"class Color",children:"Color"}

1),".",(0,r.jsx)(n,{lsp:"(property) Color.Black: ex.Color",children:"Black"}),"})"]})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"      }"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    }"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"});"})}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[(0,r.jsx)(n,{lsp:'const game: ex.Engine<"scene1" | "scene2">',children:"game"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:(0,r.jsx)(n,{lsp:'(method) Engine<"scene1" | "scene2">.goToScene<undefined>(destinationScene: ex.WithRoot<"scene1" | "scene2">, options?: ex.GoToOptions<undefined> | undefined): Promise<void>',children:"goToScene"})}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'scene1'"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:");"})]}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"})]})})]})]}),"\n",(0,r.jsx)(e.p,{children:"or using the add scene api"}),"\n",(0,r.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,r.jsxs)(e.pre,{className:"shiki github-light twoslash lsp",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,r.jsx)(e.div,{className:"language-id",children:"ts"}),(0,r.jsx)(e.div,{className:"code-container",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:(0,r.jsx)(n,{lsp:"const game: ex.Engine<any>",children:"game"})}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:(0,r.jsx)(n,{lsp:"constructor Engine<any>(options?: ex.EngineOptions<any> | undefined): ex.Engine<any>",children:"Engine"})}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"();"})]}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[(0,r.jsx)(n,{lsp:"const game: ex.Engine<any>",children:"game"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:(0,r.jsx)(n,{lsp:"(method) Engine<any>.add(sceneKey: string, scene: ex.Scene | ex.SceneConstructor | ex.SceneWithOptions): void (+5 overloads)",children:"add"})}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:"'scene1'"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:", {"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["  ",(0,r.jsx)(n,{lsp:"(property) SceneWithOptions.scene: ex.Scene<unknown> | ex.SceneConstructor",children:"scene"}),": ",(0,r.jsx)(n,{lsp:"class MyScene",children:"MyScene"}),","]})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["  ",(0,r.jsx)(n,{lsp:"(property) SceneWithOptions.transitions?: {\n    in?: ex.Transition;\n    out?: ex.Transition;\n} | undefined",children:"transitions"}),": {"]})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["    ",(0,r.jsx)(n,{lsp:"(property) in?: ex.Transition | undefined",children:"in"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:(0,r.jsx)(n,{lsp:"constructor FadeInOut(options: ex.FadeOptions & ex.TransitionOptions): ex.FadeInOut",children:"FadeInOut"})}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["({",(0,r.jsx)(n,{lsp:"(property) duration: number",children:"duration"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"500"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[", ",(0,r.jsx)(n,{lsp:'(property) TransitionOptions.direction?: "in" | "out" | undefined',children:"direction"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:"'in'"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[", ",(0,r.jsx)(n,{lsp:"(property) FadeOptions.color?: ex.Color | undefined",children:"color"}),": ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),".",(0,r.jsx)(n,{lsp:"class Color",children:"Color"}

1),".",(0,r.jsx)(n,{lsp:"(property) Color.Black: ex.Color",children:"Black"}),"}),"]})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["    ",(0,r.jsx)(n,{lsp:"(property) out?: ex.Transition | undefined",children:"out"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:(0,r.jsx)(n,{lsp:"constructor FadeInOut(options: ex.FadeOptions & ex.TransitionOptions): ex.FadeInOut",children:"FadeInOut"})}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["({",(0,r.jsx)(n,{lsp:"(property) duration: number",children:"duration"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"500"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[", ",(0,r.jsx)(n,{lsp:'(property) TransitionOptions.direction?: "in" | "out" | undefined',children:"direction"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:"'out'"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[", ",(0,r.jsx)(n,{lsp:"(property) FadeOptions.color?: ex.Color | undefined",children:"color"}),": ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),".",(0,r.jsx)(n,{lsp:"class Color",children:"Color"}),".",(0,r.jsx)(n,{lsp:"(property) Color.Black: ex.Color",children:"Black"}),"})"]})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"});"})}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"})]})})]}),"\n",(0,r.jsxs)(e.pre,{className:"shiki github-dark twoslash lsp",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,r.jsx)(e.div,{className:"language-id",children:"ts"}),(0,r.jsx)(e.div,{className:"code-container",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:(0,r.jsx)(n,{lsp:"const game: ex.Engine<any>",children:"game"})}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:(0,r.jsx)(n,{lsp:"constructor Engine<any>(options?: ex.EngineOptions<any> | undefined): ex.Engine<any>",children:"Engine"})}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"();"})]}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[(0,r.jsx)(n,{lsp:"const game: ex.Engine<any>",children:"game"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:(0,r.jsx)(n,{lsp:"(method) Engine<any>.add(sceneKey: string, scene: ex.Scene | ex.SceneConstructor | ex.SceneWithOptions): void (+5 overloads)",children:"add"})}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'scene1'"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:", {"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["  ",(0,r.jsx)(n,{lsp:"(property) SceneWithOptions.scene: ex.Scene<unknown> | ex.SceneConstructor",children:"scene"}),": ",(0,r.jsx)(n,{lsp:"class MyScene",children:"MyScene"}),","]})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["  ",(0,r.jsx)(n,{lsp:"(property) SceneWithOptions.transitions?: {\n    in?: ex.Transition;\n    out?: ex.Transition;\n} | undefined",children:"transitions"}),": {"]})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["    ",(0,r.jsx)(n,{lsp:"(property) in?: ex.Transition | undefined",children:"in"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:(0,r.jsx)(n,{lsp:"constructor FadeInOut(options: ex.FadeOptions & ex.TransitionOptions): ex.FadeInOut",children:"FadeInOut"})}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["({",(0,r.jsx)(n,{lsp:"(property) duration: number",children:"duration"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"500"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[", ",(0,r.jsx)(n,{lsp:'(property) TransitionOptions.direction?: "in" | "out" | undefined',children:"direction"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'in'"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[", ",(0,r.jsx)(n,{lsp:"(property) FadeOptions.color?: ex.Color | undefined",children:"color"}),": ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),".",(0,r.jsx)(n,{lsp:"class Color",children:"Color"}

1),".",(0,r.jsx)(n,{lsp:"(property) Color.Black: ex.Color",children:"Black"}),"}),"]})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["    ",(0,r.jsx)(n,{lsp:"(property) out?: ex.Transition | undefined",children:"out"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:(0,r.jsx)(n,{lsp:"constructor FadeInOut(options: ex.FadeOptions & ex.TransitionOptions): ex.FadeInOut",children:"FadeInOut"})}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["({",(0,r.jsx)(n,{lsp:"(property) duration: number",children:"duration"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"500"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[", ",(0,r.jsx)(n,{lsp:'(property) TransitionOptions.direction?: "in" | "out" | undefined',children:"direction"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'out'"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[", ",(0,r.jsx)(n,{lsp:"(property) FadeOptions.color?: ex.Color | undefined",children:"color"}),": ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),".",(0,r.jsx)(n,{lsp:"class Color",children:"Color"}),".",(0,r.jsx)(n,{lsp:"(property) Color.Black: ex.Color",children:"Black"}),"})"]})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"});"})}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"})]})})]})]}),"\n",(0,r.jsx)(e.p,{children:"Click canvas to transition!"}),"\n",(0,r.jsx)(l,{title:"Transition",code:"import * as ex from 'excalibur';\n\nconst game = new ex.Engine({\n  canvasElementId: 'preview-canvas',\n  displayMode: ex.DisplayMode.FillContainer,\n});\n\nclass MyScene extends ex.Scene {\n  public override onInitialize(): void {\n    this.add(\n      new ex.Actor({\n        pos: ex.vec(200, 200),\n        color: ex.Color.Red,\n        width: 100,\n        height: 200\n      }))\n  }\n}\n\n\nclass MyOtherScene extends ex.Scene {\n  public override onInitialize(): void {\n    this.add(\n      new ex.Actor({\n        pos: ex.vec(200, 200),\n        color: ex.Color.Blue,\n        width: 200,\n        height: 100\n      }))\n  }\n}\n\ngame.add('scene1', {\n  scene: MyScene,\n  transitions: {\n    in: new ex.FadeInOut({duration: 500, direction: 'in', color: ex.Color.Black}),\n    out: new ex.FadeInOut({duration: 500, direction: 'out', color: ex.Color.Black})\n  }\n});\n\ngame.add('scene2', { \n  scene: MyOtherScene,\n  transitions: {\n    in: new ex.FadeInOut({duration: 500, direction: 'in', color: ex.Color.Black}),\n    out: new ex.FadeInOut({duration: 500, direction: 'out', color: ex.Color.Black})\n  }\n});\n\ngame.input.pointers.primary.on('down', () => {\n  game.currentSceneName === 'scene2' ? game.goToScene('scene1') : game.goToScene('scene2');\n});\n\ngame.start('scene2');\n"}),"\n",(0,r.jsx)(e.h2,{id:"transition-options",children:"Transition Options"}),"\n",(0,r.jsx)(e.p,{children:"Transitions have a few tricks up their sleeves, you can control duration, direction, easing function, whether to hide any loaders, or block user input during the transition"}),"\n",(0,r.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,r.jsxs)(e.pre,{className:"shiki github-light twoslash lsp",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,r.jsx)(e.div,{className:"language-id",children:"ts"}),(0,r.jsx)(e.div,{className:"code-container",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:(0,r.jsx)(n,{lsp:"const transition: ex.Transition",children:"transition"})}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:(0,r.jsx)(n,{lsp:"constructor Transition(options: ex.TransitionOptions): ex.Transition",children:"Transition"})}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"({"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"/**"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   * Transition duration in milliseconds"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   */"})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["  ",(0,r.jsx)(n,{lsp:"(property) TransitionOptions.duration: number",children:"duration"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"1000"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:","})]}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"/**"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   * Optionally hides the loader during the transition"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   *"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   * If either the out or in transition have this set to true, then the loader will be hidden."})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   *"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   * Default false"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   */"})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["  ",(0,r.jsx)(n,{lsp:"(property) TransitionOptions.hideLoader?: boolean | undefined",children:"hideLoader"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"false"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:","})]}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"/**"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   * Optionally blocks user input during a transition"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   *"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   * Default false"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   */"})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["  ",(0,r.jsx)(n,{lsp:"(property) TransitionOptions.blockInput?: boolean | undefined",children:"blockInput"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"false"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:","})]}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"/**"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   * Optionally specify a easing function, by default linear"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   */"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["  ",(0,r.jsx)(n,{lsp:"(property) TransitionOptions.easing?: ex.Easing | undefined",children:"easing"}),": ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),".",(0,r.jsx)(n,{lsp:"function linear(currentTime: number): number",children:"linear"}),","]})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"/**"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   * Optionally specify a transition direction, by default 'out'"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   *"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   * * For 'in' direction transitions start at 1 and complete is at 0"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   * * For 'out' direction transitions start at 0 and complete is at 1"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#6E7781"},children:"   */"})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#24292F"},children:["  ",(0,r.jsx)(n,{lsp:'(property) TransitionOptions.direction?: "out" | "in" | undefined',children:"direction"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:"'out'"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:","})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"})"})})]})})]}),"\n",(0,r.jsxs)(e.pre,{className:"shiki github-dark twoslash lsp",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,r.jsx)(e.div,{className:"language-id",children:"ts"}),(0,r.jsx)(e.div,{className:"code-container",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:(0,r.jsx)(n,{lsp:"const transition: ex.Transition",children:"transition"})}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:[" ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),"."]}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:(0,r.jsx)(n,{lsp:"constructor Transition(options: ex.TransitionOptions): ex.Transition",children:"Transition"})}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"({"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"/**"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   * Transition duration in milliseconds"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   */"})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["  ",(0,r.jsx)(n,{lsp:"(property) TransitionOptions.duration: number",children:"duration"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"1000"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:","})]}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"/**"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   * Optionally hides the loader during the transition"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   *"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   * If either the out or in transition have this set to true, then the loader will be hidden."})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   *"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   * Default false"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   */"})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["  ",(0,r.jsx)(n,{lsp:"(property) TransitionOptions.hideLoader?: boolean | undefined",children:"hideLoader"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"false"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:","})]}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"/**"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   * Optionally blocks user input during a transition"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   *"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   * Default false"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   */"})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["  ",(0,r.jsx)(n,{lsp:"(property) TransitionOptions.blockInput?: boolean | undefined",children:"blockInput"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"false"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:","})]}),(0,r.jsx)(e.div,{className:"line",children:"\xa0"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"/**"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   * Optionally specify a easing function, by default linear"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   */"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["  ",(0,r.jsx)(n,{lsp:"(property) TransitionOptions.easing?: ex.Easing | undefined",children:"easing"}),": ",(0,r.jsx)(n,{lsp:"export namespace ex",children:"ex"}),".",(0,r.jsx)(n,{lsp:"function linear(currentTime: number): number",children:"linear"}),","]})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"/**"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   * Optionally specify a transition direction, by default 'out'"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   *"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   * * For 'in' direction transitions start at 1 and complete is at 0"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   * * For 'out' direction transitions start at 0 and complete is at 1"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#8B949E"},children:"   */"})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsxs)(e.span,{style:{color:"#C9D1D9"},children:["  ",(0,r.jsx)(n,{lsp:'(property) TransitionOptions.direction?: "out" | "in" | undefined',children:"direction"}),": "]}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'out'"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:","})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"})"})})]})})]})]}),"\n",(0,r.jsx)(e.h2,{id:"overriding-transitions",children:"Overriding Transitions"}),"\n",(0,r.jsx)(e.p,{children:"Th

1ere are 2 ways to override pre-defined transitions"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"goToScene('myscene', { destinationIn: ..., sourceOut: ... })"})," takes the highest precedence and will override any transition"]}),"\n",(0,r.jsxs)(e.li,{children:["Extending ",(0,r.jsx)(e.a,{href:"/api/class/Scene#onTransition",title:"View 'onTransition'",className:"tsdoc-link",children:"Scene.onTransition"})," you can provide dynamic transitions depending on your scene's state"]}),"\n"]}),"\n",(0,r.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,r.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,r.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,r.jsx)(e.div,{className:"code-container",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"class"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"MyCustomScene"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"extends"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"ex"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"."}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"Scene"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"onTransition"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"direction"}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:'"in"'}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"|"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:'"out"'}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:") {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"return"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"new"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" ex."}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"FadeInOut"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"({"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"      direction,"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"      color: ex.Color.Violet,"})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"      duration: "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"2000"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    });"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"}"})})]})})]}),"\n",(0,r.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,r.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,r.jsx)(e.div,{className:"code-container",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"class"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"MyCustomScene"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"extends"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"ex"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"."}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"Scene"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"onTransition"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"direction"}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"in"'}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"|"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"out"'}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:") {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"return"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"new"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ex."}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"FadeInOut"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"({"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"      direction,"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"      color: ex.Color.Violet,"})}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"      duration: "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"2000"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    });"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"}"})})]})})]})]}),"\n",(0,r.jsx)(e.h2,{id:"fadeinout",children:"FadeInOut"}),"\n",(0,r.jsxs)(e.p,{children:["This transition does exactly as it sounds, you can specific a duration in milliseconds and it will fade in the specified ",(0,r.jsx)(e.code,{children:"direction"}),". ",(0,r.jsx)(e.a,{href:"/api/class/FadeInOut",title:"View 'FadeInOut'",className:"tsdoc-link",children:"FadeInOut"})," uses the color ",(0,r.jsx)(e.a,{href:"/api/class/Color#Black",title:"View 'Black'",className:"tsdoc-link",children:"Color.Black"})," by default."]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:["The ",(0,r.jsx)(e.code,{children:"direction: 'in'"})," direction means the transition will start fully opaque (non-transparent), then transition to fully transparent."]}),"\n",(0,r.jsxs)(e.li,{children:["The ",(0,r.jsx)(e.code,{children:"direction: 'out'"})," direction means the transition will start fully transparent, then transition to fully opaque (non-transparent)."]}),"\n"]}),"\n",(0,r.jsx)(e.h2,{id:"crossfade",children:"CrossFade"}),"\n",(0,r.jsx)(e.admonition,{type:"warning",children:(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.a,{href:"/api/class/CrossFade",title:"View 'CrossFade'",className:"tsdoc-link",children:"CrossFade"})," can only be used on the ",(0,r.jsx)(e.code,{children:"in"})," transition for a scene, this is because it needs to ",(0,r.jsx)(e.a,{href:"/api/class/Engine#screenshot",title:"View 'screenshot'",className:"tsdoc-link tsdoc-link--aliased",children:"screenshot"})," the previous scene in order to cross fade it."]})}),"\n",(0,r.jsxs)(e.p,{children:["You can specific a duration in milliseconds and it will fade in the specified ",(0,r.jsx)(e.code,{children:"direction"}),". ",(0,r.jsx)(e.a,{href:"/api/class/CrossFade",title:"View 'CrossFade'",className:"tsdoc-link",children:"CrossFade"})," takes a screen shot of the previous scene and blends that into the current scene."]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:["The ",(0,r.jsx)(e.code,{children:"direction: 'in'"})," direction means the transition will start fully opaque (non-transparent), then transition to fully transparent."]}),"\n",(0,r.jsxs)(e.li,{children:["The ",(0,r.jsx)(e.code,{children:"direction: 'out'"})," direction means the transition will start fully transparent, then transition to fully opaque (non-transparent)."]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"Click canvas to transition!"}),"\n",(0,r.jsx)(l,{title:"CrossFade Transition",code:"import * as ex from 'excalibur';\n\nconst game = new ex.Engine({\n  canvasElementId: 'preview-canvas',\n  displayMode: ex.DisplayMode.FillContainer,\n});\n\nclass MyScene extends ex.Scene {\n  public override onInitialize(): void {\n    this.add(\n      new ex.Actor({\n        pos: ex.vec(200, 200),\n        color: ex.Color.Red,\n        width: 100,\n        height: 200\n      }))\n  }\n}\n\n\nclass MyOtherScene extends ex.Scene {\n  public override onInitialize(): void {\n    this.add(\n      new ex.Actor({\n        pos: ex.vec(200, 200),\n        color: ex.Color.Blue,\n        width: 200,\n        height: 100\n      }))\n  }\n}\n\ngame.add('scene1', {\n  scene: MyScene,\n  transitions: {\n    in: new ex.CrossFade({duration: 1500, blockInput

1: true }),\n  }\n});\n\ngame.add('scene2', { \n  scene: MyOtherScene,\n  transitions: {\n    in: new ex.CrossFade({duration: 1500, blockInput: true }),\n  }\n});\n\ngame.input.pointers.primary.on('down', () => {\n  game.currentSceneName === 'scene2' ? game.goToScene('scene1') : game.goToScene('scene2');\n});\n\ngame.start('scene2');\n"}),"\n",(0,r.jsx)(e.h2,{id:"starting-scene-transition",children:"Starting Scene Transition"}),"\n",(0,r.jsx)(e.p,{children:"Sometimes you want a special start transition for the beginning of your game after loading. You may want to match the color, do something special, etc."}),"\n",(0,r.jsxs)(e.p,{children:["This can be done on the ",(0,r.jsx)(e.a,{href:"/api/class/Engine#start",title:"View 'start'",className:"tsdoc-link",children:"Engine.start"})," by providing a start transition"]}),"\n",(0,r.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,r.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,r.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,r.jsx)(e.div,{className:"code-container",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"game."}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"start"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:"'scene1'"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:","})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"{"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  inTransition: startTransition"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"});"})}),(0,r.jsx)(e.div,{className:"line"})]})})]}),"\n",(0,r.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,r.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,r.jsx)(e.div,{className:"code-container",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"game."}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"start"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'scene1'"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:","})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"{"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  inTransition: startTransition"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"});"})}),(0,r.jsx)(e.div,{className:"line"})]})})]})]}),"\n",(0,r.jsx)(e.h2,{id:"custom-built-transitions",children:"Custom built Transitions"}),"\n",(0,r.jsxs)(e.p,{children:["Transitions are really an ",(0,r.jsx)(e.a,{href:"/api/class/Entity",title:"View 'Entity'",className:"tsdoc-link",children:"Entity"})," with a ",(0,r.jsx)(e.a,{href:"/api/class/TransformComponent",title:"View 'TransformComponent'",className:"tsdoc-link",children:"TransformComponent"})," and ",(0,r.jsx)(e.a,{href:"/api/class/GraphicsComponent",title:"View 'GraphicsComponent'",className:"tsdoc-link",children:"GraphicsComponent"})," that take up the entire screen and draw on top of everything by default ",(0,r.jsx)(e.code,{children:"z = Infinity"}),"."]}),"\n",(0,r.jsxs)(e.p,{children:["To build your own custom transition, extend ",(0,r.jsx)(e.a,{href:"/api/class/Transition",title:"View 'Transition'",className:"tsdoc-link",children:"Transition"})," and implement the stubbed methods"]}),"\n",(0,r.jsx)(e.p,{children:"For example this is CrossFade's implementation"}),"\n",(0,r.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,r.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,r.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,r.jsx)(e.div,{className:"code-container",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"class"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}

1),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"CrossFade"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"extends"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"Transition"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"engine"}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"Engine"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:";"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"image"}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"HTMLImageElement"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:";"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"screenCover"}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"Sprite"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:";"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"constructor"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"options"}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"TransitionOptions"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"&"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"CrossFadeOptions"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:") {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"super"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"(options);"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".name "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:"`CrossFade#${"}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:"."}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"id"}),(0,r.jsx)(e.span,{style:{color:"#0A3069"},children:"}`"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:";"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"override"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"async"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"onPreviousSceneDeactivate"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"scene"}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}

1),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"Scene"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:">) {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".image "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" scene.engine."}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"screenshot"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"true"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:");"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"override"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"onInitialize"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"engine"}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"Engine"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:")"}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".engine "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" engine;"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"bounds"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" engine.screen."}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"getWorldBounds"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"();"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".transform.pos "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"vec"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"(bounds.left, bounds.top);"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".screenCover "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" ImageSource."}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"fromHtmlImageElement"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".image)."}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"toSprite"}),(0,r.jsx)(e.span,{style:{color:"#24292F"}

1,children:"();"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".graphics."}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"add"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".screenCover);"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".transform.scale "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"vec"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"/"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" engine.screen.pixelRatio, "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"/"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" engine.screen.pixelRatio);"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".graphics.opacity "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".progress;"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"override"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"onStart"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"_progress"}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"number"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:")"}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".graphics.opacity "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".progress;"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"override"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"onReset"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"() {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".graphics.opacity "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".progress;"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"override"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"onEnd"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"("}

1),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"progress"}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"number"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:")"}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".graphics.opacity "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" progress;"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"override"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#8250DF"},children:"onUpdate"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#953800"},children:"progress"}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"number"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:")"}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#0550AE"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:".graphics.opacity "}),(0,r.jsx)(e.span,{style:{color:"#CF222E"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#24292F"},children:" progress;"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#24292F"},children:"}"})})]})})]}),"\n",(0,r.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,r.jsx)(e.div,{className:"language-id",children:"typescript"}),(0,r.jsx)(e.div,{className:"code-container",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"class"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"CrossFade"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"extends"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"Transition"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"engine"}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"Engine"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:";"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"image"}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"HTMLImageElement"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:";"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"screenCover"}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"Sprite"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:";"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"constructor"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"options"}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"TransitionOptions"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"&"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"CrossFadeOptions"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:") {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"super"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(options);"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".name "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:"`CrossFade#${"}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:"."}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"id"}),(0,r.jsx)(e.span,{style:{color:"#A5D6FF"},children:"}`"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:";"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"override"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"async"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"onPreviousSceneDeactivate"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"scene"}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"Scene"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:">) {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".image "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" scene.engine."}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"screenshot"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"true"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:");"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"override"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"onInitialize"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"engine"}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"Engine"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:")"}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".engine "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" engine;"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"bounds"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" engine.screen."}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"getWorldBounds"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"}

1,children:"();"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".transform.pos "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"vec"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(bounds.left, bounds.top);"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".screenCover "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ImageSource."}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"fromHtmlImageElement"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".image)."}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"toSprite"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"();"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".graphics."}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"add"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".screenCover);"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".transform.scale "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"vec"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"/"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" engine.screen.pixelRatio, "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"/"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" engine.screen.pixelRatio);"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".graphics.opacity "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".progress;"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"override"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"onStart"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"_progress"}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"number"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:")"}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".graphics.opacity "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".progress;"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"override"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"onReset"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"}

1,children:"() {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".graphics.opacity "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".progress;"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"override"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"onEnd"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"progress"}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"number"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:")"}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".graphics.opacity "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" progress;"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line"}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"override"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#D2A8FF"},children:"onUpdate"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,r.jsx)(e.span,{style:{color:"#FFA657"},children:"progress"}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"number"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:")"}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" {"})]}),(0,r.jsxs)(e.div,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"    "}),(0,r.jsx)(e.span,{style:{color:"#79C0FF"},children:"this"}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:".graphics.opacity "}),(0,r.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:" progress;"})]}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  }"})}),(0,r.jsx)(e.div,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"#C9D1D9"},children:"}"})})]})})]})]})]})}function x(s={}){const{wrapper:e}={...(0,c.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(t,{...s})}):t(s)}},28453(s,e,n){n.d(e,{R:()=>i,x:()=>o});var l=n(96540);const r={},c=l.createContext(r);function i(s){const e=l.useContext(c);return l.useMemo(function(){return"function"==typeof s?s(e):{...e,...s}},[e,s])}function o(s){let e;return e=s.disableParentContext?"function"==typeof s.components?s.components(r):s.components||r:i(s.components),l.createElement(c.Provider,{value:e},s.children)}}}]);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.