diff --git a/404.html b/404.html index aa2537b..ce66d6a 100644 --- a/404.html +++ b/404.html @@ -4,13 +4,13 @@ Page Not Found | Etro - - + +
-
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

+ + \ No newline at end of file diff --git a/assets/js/0505c0b7.96c6b4e8.js b/assets/js/0505c0b7.96c6b4e8.js new file mode 100644 index 0000000..64c6995 --- /dev/null +++ b/assets/js/0505c0b7.96c6b4e8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunketro_site_2=self.webpackChunketro_site_2||[]).push([[2367],{5569:e=>{e.exports=JSON.parse('{"title":"Effects","slug":"/category/effects","permalink":"/docs/0.11/category/effects","navigation":{"previous":{"title":"Visual Layer","permalink":"/docs/0.11/reference/layers/visual"},"next":{"title":"Introduction","permalink":"/docs/0.11/reference/effects/intro"}}}')}}]); \ No newline at end of file diff --git a/assets/js/0ae9fee1.691b942a.js b/assets/js/0ae9fee1.691b942a.js new file mode 100644 index 0000000..1f01259 --- /dev/null +++ b/assets/js/0ae9fee1.691b942a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunketro_site_2=self.webpackChunketro_site_2||[]).push([[2586],{3905:(e,t,r)=>{r.d(t,{Zo:()=>p,kt:()=>m});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),c=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},p=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=c(r),f=a,m=u["".concat(s,".").concat(f)]||u[f]||d[f]||o;return r?n.createElement(m,i(i({ref:t},p),{},{components:r})):n.createElement(m,i({ref:t},p))}));function m(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,i=new Array(o);i[0]=f;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[u]="string"==typeof e?e:a,i[1]=l;for(var c=2;c{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>c});var n=r(7462),a=(r(7294),r(3905));const o={sidebar_position:1},i="Installation",l={unversionedId:"getting-started/installation",id:"version-0.11/getting-started/installation",title:"Installation",description:"To get started with the tutorial, you'll need to install Etro:",source:"@site/versioned_docs/version-0.11/getting-started/installation.md",sourceDirName:"getting-started",slug:"/getting-started/installation",permalink:"/docs/0.11/getting-started/installation",draft:!1,tags:[],version:"0.11",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Getting Started",permalink:"/docs/0.11/category/getting-started"},next:{title:"Create a Movie",permalink:"/docs/0.11/getting-started/create-a-movie"}},s={},c=[{value:"Next",id:"next",level:2}],p={toc:c};function u(e){let{components:t,...r}=e;return(0,a.kt)("wrapper",(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"installation"},"Installation"),(0,a.kt)("p",null,"To get started with the tutorial, you'll need to install Etro:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"npm install etro\n")),(0,a.kt)("p",null,(0,a.kt)("em",{parentName:"p"},"or")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add etro\n")),(0,a.kt)("h2",{id:"next"},"Next"),(0,a.kt)("p",null,"Now that you have Etro installed, you can ",(0,a.kt)("a",{parentName:"p",href:"create-a-movie"},"create a movie"),"!"))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/0b09c3e7.d7d68926.js b/assets/js/0b09c3e7.d7d68926.js new file mode 100644 index 0000000..6eef134 --- /dev/null +++ b/assets/js/0b09c3e7.d7d68926.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunketro_site_2=self.webpackChunketro_site_2||[]).push([[6814],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>m});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=r.createContext({}),c=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},s=function(e){var t=c(e.components);return r.createElement(p.Provider,{value:t},e.children)},d="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},u=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,p=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),d=c(n),u=a,m=d["".concat(p,".").concat(u)]||d[u]||f[u]||i;return n?r.createElement(m,o(o({ref:t},s),{},{components:n})):r.createElement(m,o({ref:t},s))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=u;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l[d]="string"==typeof e?e:a,o[1]=l;for(var c=2;c{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>o,default:()=>d,frontMatter:()=>i,metadata:()=>l,toc:()=>c});var r=n(7462),a=(n(7294),n(3905));const i={},o="EllipticalMask Effect",l={unversionedId:"reference/effects/elliptical-mask",id:"version-0.11/reference/effects/elliptical-mask",title:"EllipticalMask Effect",description:"etro.effect.EllipticalMask preserves an elliptical area of the layer and clears the rest.",source:"@site/versioned_docs/version-0.11/reference/effects/elliptical-mask.md",sourceDirName:"reference/effects",slug:"/reference/effects/elliptical-mask",permalink:"/docs/0.11/reference/effects/elliptical-mask",draft:!1,tags:[],version:"0.11",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Contrast Effect",permalink:"/docs/0.11/reference/effects/contrast"},next:{title:"Gaussian Blur Effect",permalink:"/docs/0.11/reference/effects/gaussian-blur"}},p={},c=[{value:"Usage",id:"usage",level:2},{value:"Inheritance",id:"inheritance",level:2},{value:"Options",id:"options",level:2},{value:"x (required)",id:"x-required",level:3},{value:"y (required)",id:"y-required",level:3},{value:"radiusX (required)",id:"radiusx-required",level:3},{value:"radiusY (required)",id:"radiusy-required",level:3},{value:"rotation",id:"rotation",level:3},{value:"startAngle",id:"startangle",level:3},{value:"endAngle",id:"endangle",level:3},{value:"anticlockwise",id:"anticlockwise",level:3}],s={toc:c};function d(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"ellipticalmask-effect"},"EllipticalMask Effect"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"etro.effect.EllipticalMask")," preserves an elliptical area of the layer and clears the rest."),(0,a.kt)("h2",{id:"usage"},"Usage"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const effect = new etro.effect.EllipticalMask({\n x: 100, // the x-coordinate of the center of the ellipse\n y: 100, // the y-coordinate of the center of the ellipse\n radiusX: 50, // the horizontal radius of the ellipse\n radiusY: 25, // the vertical radius of the ellipse\n rotation: 0, // rotation angle in radians (default: 0)\n startAngle: 0, // start angle in radians (default: 0)\n endAngle: 2 * Math.PI, // end angle in radians (default: 2 * Math.PI)\n anticlockwise: false, // whether the ellipse is drawn clockwise or anticlockwise (default: false)\n})\n")),(0,a.kt)("h2",{id:"inheritance"},"Inheritance"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"etro.effect.EllipticalMask")," inherits from ",(0,a.kt)("a",{parentName:"p",href:"visual"},(0,a.kt)("inlineCode",{parentName:"a"},"etro.effect.Visual")),"."),(0,a.kt)("h2",{id:"options"},"Options"),(0,a.kt)("h3",{id:"x-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"x")," (required)"),(0,a.kt)("admonition",{type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"This is a ",(0,a.kt)("a",{parentName:"p",href:"../dynamic-properties"},"Dynamic Property"),".")),(0,a.kt)("p",null,"The x-coordinate of the center of the ellipse."),(0,a.kt)("h3",{id:"y-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"y")," (required)"),(0,a.kt)("admonition",{type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"This is a ",(0,a.kt)("a",{parentName:"p",href:"../dynamic-properties"},"Dynamic Property"),".")),(0,a.kt)("p",null,"The y-coordinate of the center of the ellipse."),(0,a.kt)("h3",{id:"radiusx-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"radiusX")," (required)"),(0,a.kt)("admonition",{type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"This is a ",(0,a.kt)("a",{parentName:"p",href:"../dynamic-properties"},"Dynamic Property"),".")),(0,a.kt)("p",null,"The horizontal radius of the ellipse."),(0,a.kt)("h3",{id:"radiusy-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"radiusY")," (required)"),(0,a.kt)("admonition",{type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"This is a ",(0,a.kt)("a",{parentName:"p",href:"../dynamic-properties"},"Dynamic Property"),".")),(0,a.kt)("p",null,"The vertical radius of the ellipse."),(0,a.kt)("h3",{id:"rotation"},(0,a.kt)("inlineCode",{parentName:"h3"},"rotation")),(0,a.kt)("admonition",{type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"This is a ",(0,a.kt)("a",{parentName:"p",href:"../dynamic-properties"},"Dynamic Property"),".")),(0,a.kt)("p",null,"The rotation angle in radians. Defaults to ",(0,a.kt)("inlineCode",{parentName:"p"},"0"),"."),(0,a.kt)("h3",{id:"startangle"},(0,a.kt)("inlineCode",{parentName:"h3"},"startAngle")),(0,a.kt)("admonition",{type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"This is a ",(0,a.kt)("a",{parentName:"p",href:"../dynamic-properties"},"Dynamic Property"),".")),(0,a.kt)("p",null,"The start angle in radians. Defaults to ",(0,a.kt)("inlineCode",{parentName:"p"},"0"),"."),(0,a.kt)("h3",{id:"endangle"},(0,a.kt)("inlineCode",{parentName:"h3"},"endAngle")),(0,a.kt)("admonition",{type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"This is a ",(0,a.kt)("a",{parentName:"p",href:"../dynamic-properties"},"Dynamic Property"),".")),(0,a.kt)("p",null,"The end angle in radians. Defaults to ",(0,a.kt)("inlineCode",{parentName:"p"},"2 * Math.PI"),"."),(0,a.kt)("h3",{id:"anticlockwise"},(0,a.kt)("inlineCode",{parentName:"h3"},"anticlockwise")),(0,a.kt)("admonition",{type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"This is a ",(0,a.kt)("a",{parentName:"p",href:"../dynamic-properties"},"Dynamic Property"),".")),(0,a.kt)("p",null,"Whether the ellipse is drawn clockwise or anticlockwise. Defaults to ",(0,a.kt)("inlineCode",{parentName:"p"},"false"),"."))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/0ce50805.9e2cf29d.js b/assets/js/0ce50805.9e2cf29d.js new file mode 100644 index 0000000..0abc666 --- /dev/null +++ b/assets/js/0ce50805.9e2cf29d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunketro_site_2=self.webpackChunketro_site_2||[]).push([[7637],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>m});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=r.createContext({}),p=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},s=function(e){var t=p(e.components);return r.createElement(c.Provider,{value:t},e.children)},u="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),u=p(n),d=a,m=u["".concat(c,".").concat(d)]||u[d]||f[d]||o;return n?r.createElement(m,i(i({ref:t},s),{},{components:n})):r.createElement(m,i({ref:t},s))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l[u]="string"==typeof e?e:a,i[1]=l;for(var p=2;p{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>p});var r=n(7462),a=(n(7294),n(3905));const o={},i="Shader Effect",l={unversionedId:"reference/effects/shader",id:"version-0.11/reference/effects/shader",title:"Shader Effect",description:"etro.effect.Shader is the base class for all effects that render the target with a custom GLSL fragment shader.",source:"@site/versioned_docs/version-0.11/reference/effects/shader.md",sourceDirName:"reference/effects",slug:"/reference/effects/shader",permalink:"/docs/0.11/reference/effects/shader",draft:!1,tags:[],version:"0.11",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Pixelate Effect",permalink:"/docs/0.11/reference/effects/pixelate"},next:{title:"Stack Effect",permalink:"/docs/0.11/reference/effects/stack"}},c={},p=[{value:"Usage",id:"usage",level:2},{value:"Inheritance",id:"inheritance",level:2},{value:"Options",id:"options",level:2},{value:"fragmentSource",id:"fragmentsource",level:3},{value:"uniforms",id:"uniforms",level:3},{value:"textures",id:"textures",level:3},{value:"sourceTextureOptions",id:"sourcetextureoptions",level:3},{value:"TextureOptions",id:"textureoptions",level:2},{value:"createUniform",id:"createuniform",level:3},{value:"target",id:"target",level:3},{value:"level",id:"level",level:3},{value:"internalFormat",id:"internalformat",level:3},{value:"srcFormat",id:"srcformat",level:3},{value:"srcType",id:"srctype",level:3},{value:"minFilter",id:"minfilter",level:3},{value:"magFilter",id:"magfilter",level:3},{value:"wrapS",id:"wraps",level:3},{value:"wrapT",id:"wrapt",level:3}],s={toc:p};function u(e){let{components:t,...n}=e;return(0,a.kt)("wrapper",(0,r.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"shader-effect"},"Shader Effect"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"etro.effect.Shader")," is the base class for all effects that render the target with a custom GLSL fragment shader."),(0,a.kt)("p",null,"When using this effect, you need to provide a fragment shader source and a list of uniforms. The uniforms are automatically updated when the effect is applied. There needs to be a property with the same name as each custom uniform in the effect class. The property can be a ",(0,a.kt)("a",{parentName:"p",href:"../dynamic-properties"},(0,a.kt)("inlineCode",{parentName:"a"},"Dynamic"))," or a regular value."),(0,a.kt)("h2",{id:"usage"},"Usage"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"class MyEffect extends etro.effect.Shader {\n foo: Dynamic\n\n constructor(foo: Dynamic = 1) {\n super({\n fragmentSource: `\n precision mediump float;\n\n uniform sampler2D u_Source;\n uniform ivec2 u_Size;\n uniform float u_Foo;\n\n varying vec2 v_TextureCoord;\n\n void main() {\n vec4 color = texture2D(u_Source, v_TextureCoord);\n gl_FragColor = vec4(color.rgb * u_Foo, color.a);\n }\n `,\n uniforms: {\n foo: '1f',\n },\n })\n\n this.foo = foo\n }\n}\n\nconst effect = new MyEffect(() => Math.random())\n")),(0,a.kt)("h2",{id:"inheritance"},"Inheritance"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"etro.effect.Shader")," inherits from ",(0,a.kt)("a",{parentName:"p",href:"visual"},(0,a.kt)("inlineCode",{parentName:"a"},"etro.effect.Visual")),"."),(0,a.kt)("h2",{id:"options"},"Options"),(0,a.kt)("h3",{id:"fragmentsource"},(0,a.kt)("inlineCode",{parentName:"h3"},"fragmentSource")),(0,a.kt)("p",null,"The GLSL fragment shader source."),(0,a.kt)("h3",{id:"uniforms"},(0,a.kt)("inlineCode",{parentName:"h3"},"uniforms")),(0,a.kt)("p",null,"A map of uniforms to their types. The types are the same as the ones used in the ",(0,a.kt)("inlineCode",{parentName:"p"},"uniform")," keyword in GLSL. For example, ",(0,a.kt)("inlineCode",{parentName:"p"},"1f")," is a float, ",(0,a.kt)("inlineCode",{parentName:"p"},"1i")," is an integer, and ",(0,a.kt)("inlineCode",{parentName:"p"},"2f")," is a 2D vector."),(0,a.kt)("h3",{id:"textures"},(0,a.kt)("inlineCode",{parentName:"h3"},"textures")),(0,a.kt)("p",null,"A map of additional texture uniforms to ",(0,a.kt)("inlineCode",{parentName:"p"},"TextureOptions"),". The source texture is always available as ",(0,a.kt)("inlineCode",{parentName:"p"},"u_Source"),", so there is no need to add it here. See ",(0,a.kt)("a",{parentName:"p",href:"#textureoptions"},(0,a.kt)("inlineCode",{parentName:"a"},"TextureOptions")),"."),(0,a.kt)("h3",{id:"sourcetextureoptions"},(0,a.kt)("inlineCode",{parentName:"h3"},"sourceTextureOptions")),(0,a.kt)("p",null,"Options for the source texture. See ",(0,a.kt)("a",{parentName:"p",href:"#textureoptions"},(0,a.kt)("inlineCode",{parentName:"a"},"TextureOptions")),"."),(0,a.kt)("h2",{id:"textureoptions"},(0,a.kt)("inlineCode",{parentName:"h2"},"TextureOptions")),(0,a.kt)("admonition",{type:"caution"},(0,a.kt)("p",{parentName:"admonition"},"These options are experimental and may change in the future.")),(0,a.kt)("h3",{id:"createuniform"},(0,a.kt)("inlineCode",{parentName:"h3"},"createUniform")),(0,a.kt)("p",null,"If set to ",(0,a.kt)("inlineCode",{parentName:"p"},"false"),", the texture uniform will not be created. This is useful if you want to create the uniform yourself. Defaults to ",(0,a.kt)("inlineCode",{parentName:"p"},"true"),"."),(0,a.kt)("p",null,"The uniform will be created with the name ",(0,a.kt)("inlineCode",{parentName:"p"},"u_${name}"),"."),(0,a.kt)("h3",{id:"target"},(0,a.kt)("inlineCode",{parentName:"h3"},"target")),(0,a.kt)("p",null,"The WebGL texture target. Defaults to ",(0,a.kt)("inlineCode",{parentName:"p"},"'TEXTURE_2D'"),"."),(0,a.kt)("h3",{id:"level"},(0,a.kt)("inlineCode",{parentName:"h3"},"level")),(0,a.kt)("p",null,"The mipmap level. Defaults to ",(0,a.kt)("inlineCode",{parentName:"p"},"0"),"."),(0,a.kt)("h3",{id:"internalformat"},(0,a.kt)("inlineCode",{parentName:"h3"},"internalFormat")),(0,a.kt)("p",null,"The internal format. Defaults to ",(0,a.kt)("inlineCode",{parentName:"p"},"'RGBA'"),"."),(0,a.kt)("h3",{id:"srcformat"},(0,a.kt)("inlineCode",{parentName:"h3"},"srcFormat")),(0,a.kt)("p",null,"The source format. Defaults to ",(0,a.kt)("inlineCode",{parentName:"p"},"'RGBA'"),"."),(0,a.kt)("h3",{id:"srctype"},(0,a.kt)("inlineCode",{parentName:"h3"},"srcType")),(0,a.kt)("p",null,"The source type. Defaults to ",(0,a.kt)("inlineCode",{parentName:"p"},"'UNSIGNED_BYTE'"),"."),(0,a.kt)("h3",{id:"minfilter"},(0,a.kt)("inlineCode",{parentName:"h3"},"minFilter")),(0,a.kt)("p",null,"The minification filter. Defaults to ",(0,a.kt)("inlineCode",{parentName:"p"},"'LINEAR'"),"."),(0,a.kt)("h3",{id:"magfilter"},(0,a.kt)("inlineCode",{parentName:"h3"},"magFilter")),(0,a.kt)("p",null,"The magnification filter. Defaults to ",(0,a.kt)("inlineCode",{parentName:"p"},"'LINEAR'"),"."),(0,a.kt)("h3",{id:"wraps"},(0,a.kt)("inlineCode",{parentName:"h3"},"wrapS")),(0,a.kt)("p",null,"The horizontal wrapping mode. Defaults to ",(0,a.kt)("inlineCode",{parentName:"p"},"'CLAMP_TO_EDGE'"),"."),(0,a.kt)("h3",{id:"wrapt"},(0,a.kt)("inlineCode",{parentName:"h3"},"wrapT")),(0,a.kt)("p",null,"The vertical wrapping mode. Defaults to ",(0,a.kt)("inlineCode",{parentName:"p"},"'CLAMP_TO_EDGE'"),"."))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/1341e10e.14a4d90d.js b/assets/js/1341e10e.14a4d90d.js new file mode 100644 index 0000000..4eeca2e --- /dev/null +++ b/assets/js/1341e10e.14a4d90d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunketro_site_2=self.webpackChunketro_site_2||[]).push([[958],{3905:(e,t,r)=>{r.d(t,{Zo:()=>c,kt:()=>y});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var d=n.createContext({}),s=function(e){var t=n.useContext(d),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},c=function(e){var t=s(e.components);return n.createElement(d.Provider,{value:t},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,d=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=s(r),m=a,y=p["".concat(d,".").concat(m)]||p[m]||u[m]||i;return r?n.createElement(y,o(o({ref:t},c),{},{components:r})):n.createElement(y,o({ref:t},c))}));function y(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=m;var l={};for(var d in t)hasOwnProperty.call(t,d)&&(l[d]=t[d]);l.originalType=e,l[p]="string"==typeof e?e:a,o[1]=l;for(var s=2;s{r.r(t),r.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>p,frontMatter:()=>i,metadata:()=>l,toc:()=>s});var n=r(7462),a=(r(7294),r(3905));const i={},o="Base Layer",l={unversionedId:"reference/layers/base",id:"version-0.11/reference/layers/base",title:"Base Layer",description:"etro.layer.Base is the base class for all layers. It is not meant to be used directly.",source:"@site/versioned_docs/version-0.11/reference/layers/base.md",sourceDirName:"reference/layers",slug:"/reference/layers/base",permalink:"/docs/0.11/reference/layers/base",draft:!1,tags:[],version:"0.11",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Audio Layer",permalink:"/docs/0.11/reference/layers/audio"},next:{title:"Image Layer",permalink:"/docs/0.11/reference/layers/image"}},d={},s=[{value:"Options",id:"options",level:2},{value:"startTime (required)",id:"starttime-required",level:3},{value:"duration (required)",id:"duration-required",level:3},{value:"enabled",id:"enabled",level:3},{value:"Read-only Properties",id:"read-only-properties",level:2},{value:"currentTime",id:"currenttime",level:3},{value:"Methods",id:"methods",level:2},{value:"attach(movie: Movie)",id:"attachmovie-movie",level:3},{value:"detach()",id:"detach",level:3},{value:"start()",id:"start",level:3},{value:"render()",id:"render",level:3},{value:"stop()",id:"stop",level:3}],c={toc:s};function p(e){let{components:t,...r}=e;return(0,a.kt)("wrapper",(0,n.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"base-layer"},"Base Layer"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"etro.layer.Base")," is the base class for all layers. It is not meant to be used directly."),(0,a.kt)("h2",{id:"options"},"Options"),(0,a.kt)("h3",{id:"starttime-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"startTime")," (required)"),(0,a.kt)("p",null,"The time to start the layer at in seconds."),(0,a.kt)("h3",{id:"duration-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"duration")," (required)"),(0,a.kt)("p",null,"The duration of the layer in seconds."),(0,a.kt)("h3",{id:"enabled"},(0,a.kt)("inlineCode",{parentName:"h3"},"enabled")),(0,a.kt)("admonition",{type:"caution"},(0,a.kt)("p",{parentName:"admonition"},"This property must be set after the layer is created until it is added as an option.")),(0,a.kt)("p",null,"Whether the layer should be used. The default value is ",(0,a.kt)("inlineCode",{parentName:"p"},"true"),"."),(0,a.kt)("h2",{id:"read-only-properties"},"Read-only Properties"),(0,a.kt)("h3",{id:"currenttime"},(0,a.kt)("inlineCode",{parentName:"h3"},"currentTime")),(0,a.kt)("p",null,"The current time of the movie in seconds, relative to the start of the layer."),(0,a.kt)("h2",{id:"methods"},"Methods"),(0,a.kt)("h3",{id:"attachmovie-movie"},(0,a.kt)("inlineCode",{parentName:"h3"},"attach(movie: Movie)")),(0,a.kt)("p",null,"Called by the movie when the layer is added to its ",(0,a.kt)("inlineCode",{parentName:"p"},"layers")," array."),(0,a.kt)("h3",{id:"detach"},(0,a.kt)("inlineCode",{parentName:"h3"},"detach()")),(0,a.kt)("p",null,"Called by the movie when the layer is removed from its ",(0,a.kt)("inlineCode",{parentName:"p"},"layers")," array."),(0,a.kt)("h3",{id:"start"},(0,a.kt)("inlineCode",{parentName:"h3"},"start()")),(0,a.kt)("p",null,"Called by the movie when the layer is activated."),(0,a.kt)("h3",{id:"render"},(0,a.kt)("inlineCode",{parentName:"h3"},"render()")),(0,a.kt)("p",null,"Called by the movie when the layer should render to its internal canvas."),(0,a.kt)("h3",{id:"stop"},(0,a.kt)("inlineCode",{parentName:"h3"},"stop()")),(0,a.kt)("p",null,"Called by the movie when the layer is stopped."))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/1be52d60.ab28ccd3.js b/assets/js/1be52d60.ab28ccd3.js new file mode 100644 index 0000000..e259c51 --- /dev/null +++ b/assets/js/1be52d60.ab28ccd3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunketro_site_2=self.webpackChunketro_site_2||[]).push([[1652],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>f});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var u=n.createContext({}),p=function(e){var t=n.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},d=function(e){var t=p(e.components);return n.createElement(u.Provider,{value:t},e.children)},c="mdxType",s={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,u=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),c=p(r),m=a,f=c["".concat(u,".").concat(m)]||c[m]||s[m]||o;return r?n.createElement(f,i(i({ref:t},d),{},{components:r})):n.createElement(f,i({ref:t},d))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,i=new Array(o);i[0]=m;var l={};for(var u in t)hasOwnProperty.call(t,u)&&(l[u]=t[u]);l.originalType=e,l[c]="string"==typeof e?e:a,i[1]=l;for(var p=2;p{r.r(t),r.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>c,frontMatter:()=>o,metadata:()=>l,toc:()=>p});var n=r(7462),a=(r(7294),r(3905));const o={},i="Audio Layer",l={unversionedId:"reference/layers/audio",id:"version-0.11/reference/layers/audio",title:"Audio Layer",description:"etro.layer.Audio plays audio from an audio clip.",source:"@site/versioned_docs/version-0.11/reference/layers/audio.md",sourceDirName:"reference/layers",slug:"/reference/layers/audio",permalink:"/docs/0.11/reference/layers/audio",draft:!1,tags:[],version:"0.11",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Introduction",permalink:"/docs/0.11/reference/layers/intro"},next:{title:"Base Layer",permalink:"/docs/0.11/reference/layers/base"}},u={},p=[{value:"Usage",id:"usage",level:2},{value:"Inheritance",id:"inheritance",level:2},{value:"Options",id:"options",level:2},{value:"source (required)",id:"source-required",level:3},{value:"sourceStartTime",id:"sourcestarttime",level:3},{value:"muted",id:"muted",level:3},{value:"volume",id:"volume",level:3},{value:"playbackRate",id:"playbackrate",level:3}],d={toc:p};function c(e){let{components:t,...r}=e;return(0,a.kt)("wrapper",(0,n.Z)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"audio-layer"},"Audio Layer"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"etro.layer.Audio")," plays audio from an audio clip."),(0,a.kt)("h2",{id:"usage"},"Usage"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const layer = new etro.layer.Audio({\n startTime: 0,\n duration: 3,\n source: '',\n sourceStartTime: 0, // default: 0\n muted: false, // default: false\n volume: 1, // default: 1\n playbackRate: 1, // default: 1\n});\n")),(0,a.kt)("h2",{id:"inheritance"},"Inheritance"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"etro.layer.Audio")," inherits from ",(0,a.kt)("a",{parentName:"p",href:"base"},(0,a.kt)("inlineCode",{parentName:"a"},"etro.layer.Base")),"."),(0,a.kt)("h2",{id:"options"},"Options"),(0,a.kt)("h3",{id:"source-required"},(0,a.kt)("inlineCode",{parentName:"h3"},"source")," (required)"),(0,a.kt)("p",null,"The ",(0,a.kt)("inlineCode",{parentName:"p"},"