modern-canvas 0.9.5 → 0.9.6

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { Font, Fonts } from 'modern-font';
-import { ObservableEvents, Observable, ReactivableEvents, Reactivable, Color as Color$1, RawWeakMap as RawWeakMap$1, LinearGradient, RadialGradient, NormalizedFill, Fill, NormalizedBackground, Background, NormalizedForeground, Foreground, NormalizedOutline, Outline, NormalizedShadow, Shadow, NormalizedShape, Shape, FullStyle, Text as Text$1, TextContent, Style, ImageFillCropRect } from 'modern-idoc';
+import { ObservableEvents, Observable, ReactivableEvents, Reactivable, Color as Color$1, RawWeakMap as RawWeakMap$1, LinearGradient, RadialGradient, Hex8Color, NormalizedFill, Fill, NormalizedBackground, Background, NormalizedForeground, Foreground, NormalizedOutline, Outline, NormalizedShadow, Shadow, NormalizedShape, Shape, FullStyle, Text as Text$1, TextContent, Style, ImageFillCropRect } from 'modern-idoc';
 export { Color as ColorValue } from 'modern-idoc';
 import { AnimationItem } from 'lottie-web';
 import { Colord, RgbaColor, HslaColor, HsvaColor } from 'colord';
@@ -243,6 +243,7 @@ declare class Input extends Observable {
     protected _onPointerMove: (nativeEvent: PointerEvent | TouchEvent | MouseEvent) => void;
     protected _onPointerUp: (nativeEvent: PointerEvent | TouchEvent | MouseEvent) => void;
     protected _onWheel: (nativeEvent: WheelEvent) => void;
+    destroy(): void;
 }
 
 interface CoreObjectEvents extends ReactivableEvents {
@@ -585,6 +586,10 @@ declare class Vector3 extends Vector {
 interface MainLoopEvents extends CoreObjectEvents {
     process: (delta: number) => void;
 }
+interface MainLoopProperties {
+    fps: number;
+    speed: number;
+}
 interface MainLoop {
     on: <K extends keyof MainLoopEvents & string>(event: K, listener: MainLoopEvents[K]) => this;
     once: <K extends keyof MainLoopEvents & string>(event: K, listener: MainLoopEvents[K]) => this;
@@ -599,10 +604,10 @@ declare class MainLoop extends CoreObject {
     protected _startedProcess?: (delta: number) => void;
     get starting(): boolean;
     get spf(): number;
-    constructor();
+    constructor(properties?: Partial<MainLoopProperties>);
     start(process: (delta: number) => void): void;
     stop(): void;
-    protected _onNextTick(): void;
+    protected _onTicker(): void;
     destroy(): void;
 }
 
@@ -680,9 +685,9 @@ declare const PI_2: number;
 declare function uid(object?: Record<string, any>): number;
 declare function isPow2(v: number): boolean;
 
-declare abstract class Renderer {
-    view?: HTMLCanvasElement;
+declare abstract class Renderer extends Reactivable {
     pixelRatio: number;
+    view?: HTMLCanvasElement;
     readonly screen: {
         x: number;
         y: number;
@@ -690,8 +695,10 @@ declare abstract class Renderer {
         height: number;
     };
     readonly related: RawWeakMap<object, any>;
+    protected _updateProperty(key: string, newValue: any, oldValue: any): void;
     getRelated<T>(source: object, createFn?: () => T): T;
     resize(width: number, height: number, updateStyle?: boolean): void;
+    destroy(): void;
 }
 
 type WebGLBufferTarget = 'array_buffer' | 'element_array_buffer';
@@ -742,6 +749,7 @@ interface WebGLFramebufferOptions {
     width: number;
     height: number;
     mipLevel?: number;
+    msaa?: boolean;
     stencil?: boolean;
     depth?: boolean;
     depthTexture?: WebGLTexture | null;
@@ -749,8 +757,9 @@ interface WebGLFramebufferOptions {
 }
 interface WebGLFramebufferMeta extends Required<WebGLFramebufferOptions> {
     multisample: number;
-    stencilBuffer?: WebGLBuffer | null;
-    msaaBuffer?: WebGLBuffer | null;
+    stencilBuffer: WebGLBuffer | null;
+    msaaRenderBuffers: WebGLRenderbuffer[];
+    framebuffer: WebGLFramebuffer | null;
 }
 type Pick<T> = T extends string ? T extends Uppercase<T> ? Lowercase<T> : never : never;
 type WebGLTarget = Pick<keyof WebGL2RenderingContext>;
@@ -1040,6 +1049,8 @@ declare class WebGLFramebufferModule extends WebGLModule {
         format: number;
     };
     resize(framebuffer: WebGLFramebuffer, width: number, height: number): void;
+    finishRenderPass(framebuffer: WebGLFramebuffer): void;
+    copyToTexture(framebuffer: WebGLFramebuffer, texture: WebGLTexture): void;
     bind(framebuffer: WebGLFramebuffer | null): void;
     forceStencil(): void;
     reset(): void;
@@ -1338,8 +1349,10 @@ interface ImageFrame {
     duration: number;
 }
 declare class AnimatedTexture extends Resource {
-    frames: ImageFrame[];
     duration: number;
+    frames: ImageFrame[];
+    frameIndex: number;
+    get currentFrame(): ImageFrame;
     constructor(source: Texture2D | ImageFrame[]);
     updateDuration(): this;
     destroy(): void;
@@ -1515,6 +1528,7 @@ declare class Viewport extends Node implements Rectangulable {
     y: number;
     width: number;
     height: number;
+    msaa: boolean;
     get valid(): boolean;
     get framebuffer(): ViewportFramebuffer;
     get texture(): ViewportTexture;
@@ -1579,6 +1593,7 @@ declare class Timeline extends Node {
 }
 
 declare class Window extends Viewport {
+    msaa: boolean;
 }
 
 interface SceneTreeEvents extends MainLoopEvents {
@@ -1589,6 +1604,13 @@ interface SceneTreeEvents extends MainLoopEvents {
     nodeProcessing: (node: Node) => void;
     nodeProcessed: (node: Node) => void;
 }
+interface SceneTreeProperties extends MainLoopProperties {
+    backgroundColor: Hex8Color;
+    debug: boolean;
+    processPaused: boolean;
+    fonts: Fonts;
+    timeline: Timeline;
+}
 interface SceneTree {
     on: <K extends keyof SceneTreeEvents & string>(event: K, listener: SceneTreeEvents[K]) => this;
     once: <K extends keyof SceneTreeEvents & string>(event: K, listener: SceneTreeEvents[K]) => this;
@@ -1596,19 +1618,19 @@ interface SceneTree {
     emit: <K extends keyof SceneTreeEvents & string>(event: K, ...args: Parameters<SceneTreeEvents[K]>) => this;
 }
 declare class SceneTree extends MainLoop {
-    processPaused: boolean;
-    backgroundColor: Color$1 | undefined;
+    backgroundColor?: Hex8Color;
     debug: boolean;
-    fonts?: Fonts;
+    processPaused: boolean;
+    fonts: Fonts;
+    timeline: Timeline;
     readonly input: Input;
     readonly renderStack: RenderStack;
     readonly root: Window;
-    readonly timeline: Timeline;
     protected _backgroundColor: Color;
     protected _currentViewport?: Viewport;
     getCurrentViewport(): Viewport | undefined;
     setCurrentViewport(viewport: Viewport | undefined): void;
-    constructor(timeline?: Timeline);
+    constructor(properties?: Partial<SceneTreeProperties>);
     protected _updateProperty(key: string, value: any, oldValue: any): void;
     log(...args: any[]): void;
     protected _process(delta?: number): void;
@@ -1783,8 +1805,8 @@ declare class TimelineNode extends Node {
     constructor(properties?: Partial<TimelineNodeProperties>, nodes?: Node[]);
     /** Timeline */
     computedDuration: number;
-    protected _currentTime: number;
-    protected _startTime: number;
+    _currentTime: number;
+    _startTime: number;
     get timeline(): Timeline | undefined;
     get timelineCurrentTime(): number;
     get parentStartTime(): number;
@@ -1987,14 +2009,17 @@ declare class BaseElement2DFill extends CoreObject {
     tile: NormalizedFill['tile'];
     opacity: NormalizedFill['opacity'];
     protected _texture?: Texture2D;
+    protected _animatedTexture?: AnimatedTexture;
     constructor(parent: BaseElement2D);
     protected _setProperties(properties?: NormalizedFill): this;
     setProperties(properties?: Fill): this;
     protected _updateProperty(key: string, value: any, oldValue: any): void;
-    loadTexture(): Promise<Texture2D | undefined>;
+    loadTexture(): Promise<void>;
     protected _updateTexture(): Promise<void>;
     canDraw(): boolean;
     draw(): void;
+    protected _getFrameCurrentTime(): number;
+    updateFrameIndex(): this;
 }
 
 declare class BaseElement2DBackground extends BaseElement2DFill {
@@ -2143,6 +2168,7 @@ declare class BaseElement2D extends Node2D implements Rectangulable {
     constructor(properties?: Partial<BaseElement2DProperties>, nodes?: Node[]);
     setProperties(properties?: Record<string, any>): this;
     protected _updateStyleProperty(key: string, value: any, oldValue: any): void;
+    protected _process(delta: number): void;
     protected _updateMaskImage(): void;
     getTransformOrigin(): Vector2;
     updateTransform(cb?: (transform: Transform2D) => void): void;
@@ -3296,17 +3322,14 @@ declare class CanvasItemEditor extends Control {
     protected _updateScrollbars(): void;
 }
 
-interface EngineOptions extends WebGLContextAttributes {
-    debug?: boolean;
+interface EngineProperties extends WebGLContextAttributes, SceneTreeProperties {
     view?: HTMLCanvasElement | WebGLRenderingContext | WebGL2RenderingContext;
     width?: number;
     height?: number;
     pixelRatio?: number;
-    backgroundColor?: Color$1;
-    fonts?: Fonts;
-    autoResize?: boolean;
-    autoStart?: boolean;
-    timeline?: Timeline;
+    autoResize: boolean;
+    autoStart: boolean;
+    msaa: boolean;
 }
 interface EngineEvents extends SceneTreeEvents {
     pointerdown: (ev: PointerInputEvent) => void;
@@ -3330,6 +3353,9 @@ interface Engine {
     emit: <K extends keyof EngineEvents>(event: K, ...args: Parameters<EngineEvents[K]>) => this;
 }
 declare class Engine extends SceneTree {
+    msaa: boolean;
+    autoResize: boolean;
+    autoStart: boolean;
     readonly renderer: WebGLRenderer;
     get view(): HTMLCanvasElement | undefined;
     get gl(): WebGLRenderingContext | WebGL2RenderingContext;
@@ -3344,19 +3370,19 @@ declare class Engine extends SceneTree {
     get pixelRatio(): number;
     set pixelRatio(val: number);
     protected _resizeObserver: ResizeObserver | undefined;
-    constructor(options?: EngineOptions);
+    constructor(properties?: Partial<EngineProperties>);
+    protected _updateProperty(key: string, value: any, oldValue: any): void;
     protected _setupInput(): this;
-    enableAutoResize(enable?: boolean): this;
     resize(width: number, height: number, updateCss?: boolean): this;
     nextTick(): Promise<void>;
     waitUntilLoad(): Promise<void>;
     waitAndRender(delta?: number): Promise<void>;
     render(delta?: number): void;
     start(): Promise<void>;
-    destroy(): void;
     toPixels(): Uint8ClampedArray<ArrayBuffer>;
     toImageData(): ImageData;
     toCanvas2D(): HTMLCanvasElement;
+    destroy(): void;
 }
 
 interface RenderOptions {
@@ -3371,4 +3397,4 @@ interface RenderOptions {
 declare function render(options: RenderOptions): Promise<HTMLCanvasElement>;
 
 export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, Camera2D, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GaussianBlurEffect, Geometry, GifLoader, GlitchEffect, GodrayEffect, GradientTexture, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JsonLoader, KawaseBlurEffect, KawaseTransition, KeyboardInputEvent, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, Window, XScrollBar, YScrollBar, ZoomBlurEffect, alignMap, assets, boxSizingMap, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, directionMap, displayMap, ease, easeIn, easeInOut, easeOut, edgeMap, flexDirectionMap, flexWrapMap, frag, getDefaultCssPropertyValue, gutterMap, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, justifyMap, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, overflowMap, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, positionTypeMap, render, timingFunctions, uid };
-export type { AnimationEffectMode, AnimationProperties, AssetHandler, AudioWaveformProperties, BaseElement2DEvents, BaseElement2DProperties, BaseElement2DStyleProperties, Batchable2D, CSSFilterKey, CSSFilters, Camera2DEvents, Camera2DProperties, CanvasBatchable, CanvasItemEvents, CanvasItemProperties, ColorAdjustEffectProperties, ColorFilterEffectProperties, ColorOverlayEffectProperties, ColorRemoveEffectProperties, ColorReplaceEffectProperties, ComputedLayout, ControlEvents, ControlProperties, CoreObjectEvents, CssFunction, CssFunctionArg, Cursor, DropShadowEffectProperties, Easing, EffectContext, EffectMode, EffectProperties, Element2DEvents, Element2DProperties, Element2DStyleProperties, EmbossEffectProperties, EngineOptions, FillDraw, FlexBaseElement2DEvents, FlexElement2DProperties, FlexElement2DStyleProperties, GaussianBlurEffectProperties, GeometryOptions, GlitchEffectProperties, GodrayEffectProperties, IAudioContext, IAudioNode, IPlayOptions, Image2DProperties, ImageFrame, ImageTextureOptions, IndexBufferOptions, InputEventKey, InputEvents, InputMode, InternalMode, KawaseBlurEffectProperties, Keyframe, Lottie2DProperties, MainLoopEvents, MaskColor, MaskData, MaskEffectProperties, MaskObject, MaskRect, Maskable, MaterialOptions, MatrixLike, MatrixOperateOutput, Node2DEvents, Node2DProperties, NodeEvents, NodeProperties, NormalizedKeyframe, OutlineEffectProperties, PixelateEffectProperties, PlatformAudio, PlatformSound, ProcessMode, ProcessSortMode, RangeProperties, Rectangulable, RectangulableEvents, RefCountedEvents, RenderMode, RenderOptions, Renderable, ResourceEvents, RulerProperties, ScalerEvents, ScalerProperties, SceneTreeEvents, ScrollBarProperties, StrokeDraw, Texture2DFilterMode, Texture2DPixelsSource, Texture2DSource, Texture2DWrapMode, TextureRect2DProperties, TimelineEvents, TimelineNodeEvents, TimelineNodeProperties, TimelineProperties, TimingFunctions, TransformObject, TransformRect2DProperties, TransformableObject, TransitionProperties, UvTransform, Vector2Data, VectorLike, VectorOperateOutput, VertTransform, VertexAttributeOptions, VertexBufferOptions, Video2DProperties, VideoTextureOptions, VideoTextureSource, ViewportEvents, ViewportFramebuffer, WebGLBufferMeta, WebGLBufferOptions, WebGLBufferTarget, WebGLBufferUsage, WebGLDrawMode, WebGLDrawOptions, WebGLExtensions, WebGLFramebufferMeta, WebGLFramebufferOptions, WebGLProgramMeta, WebGLProgramOptions, WebGLTarget, WebGLTextureFilterMode, WebGLTextureLocation, WebGLTextureMeta, WebGLTextureOptions, WebGLTextureSource, WebGLTextureTarget, WebGLTextureWrapMode, WebGLVertexArrayObjectMeta, WebGLVertexArrayObjectOptions, WebGLVertexAttrib, WebGLVertexAttribType, WebGLViewport, XScrollBarProperties, YScrollBarProperties, ZoomBlurEffectProperties };
+export type { AnimationEffectMode, AnimationProperties, AssetHandler, AudioWaveformProperties, BaseElement2DEvents, BaseElement2DProperties, BaseElement2DStyleProperties, Batchable2D, CSSFilterKey, CSSFilters, Camera2DEvents, Camera2DProperties, CanvasBatchable, CanvasItemEvents, CanvasItemProperties, ColorAdjustEffectProperties, ColorFilterEffectProperties, ColorOverlayEffectProperties, ColorRemoveEffectProperties, ColorReplaceEffectProperties, ComputedLayout, ControlEvents, ControlProperties, CoreObjectEvents, CssFunction, CssFunctionArg, Cursor, DropShadowEffectProperties, Easing, EffectContext, EffectMode, EffectProperties, Element2DEvents, Element2DProperties, Element2DStyleProperties, EmbossEffectProperties, EngineProperties, FillDraw, FlexBaseElement2DEvents, FlexElement2DProperties, FlexElement2DStyleProperties, GaussianBlurEffectProperties, GeometryOptions, GlitchEffectProperties, GodrayEffectProperties, IAudioContext, IAudioNode, IPlayOptions, Image2DProperties, ImageFrame, ImageTextureOptions, IndexBufferOptions, InputEventKey, InputEvents, InputMode, InternalMode, KawaseBlurEffectProperties, Keyframe, Lottie2DProperties, MainLoopEvents, MainLoopProperties, MaskColor, MaskData, MaskEffectProperties, MaskObject, MaskRect, Maskable, MaterialOptions, MatrixLike, MatrixOperateOutput, Node2DEvents, Node2DProperties, NodeEvents, NodeProperties, NormalizedKeyframe, OutlineEffectProperties, PixelateEffectProperties, PlatformAudio, PlatformSound, ProcessMode, ProcessSortMode, RangeProperties, Rectangulable, RectangulableEvents, RefCountedEvents, RenderMode, RenderOptions, Renderable, ResourceEvents, RulerProperties, ScalerEvents, ScalerProperties, SceneTreeEvents, SceneTreeProperties, ScrollBarProperties, StrokeDraw, Texture2DFilterMode, Texture2DPixelsSource, Texture2DSource, Texture2DWrapMode, TextureRect2DProperties, TimelineEvents, TimelineNodeEvents, TimelineNodeProperties, TimelineProperties, TimingFunctions, TransformObject, TransformRect2DProperties, TransformableObject, TransitionProperties, UvTransform, Vector2Data, VectorLike, VectorOperateOutput, VertTransform, VertexAttributeOptions, VertexBufferOptions, Video2DProperties, VideoTextureOptions, VideoTextureSource, ViewportEvents, ViewportFramebuffer, WebGLBufferMeta, WebGLBufferOptions, WebGLBufferTarget, WebGLBufferUsage, WebGLDrawMode, WebGLDrawOptions, WebGLExtensions, WebGLFramebufferMeta, WebGLFramebufferOptions, WebGLProgramMeta, WebGLProgramOptions, WebGLTarget, WebGLTextureFilterMode, WebGLTextureLocation, WebGLTextureMeta, WebGLTextureOptions, WebGLTextureSource, WebGLTextureTarget, WebGLTextureWrapMode, WebGLVertexArrayObjectMeta, WebGLVertexArrayObjectOptions, WebGLVertexAttrib, WebGLVertexAttribType, WebGLViewport, XScrollBarProperties, YScrollBarProperties, ZoomBlurEffectProperties };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { Font, Fonts } from 'modern-font';
-import { ObservableEvents, Observable, ReactivableEvents, Reactivable, Color as Color$1, RawWeakMap as RawWeakMap$1, LinearGradient, RadialGradient, NormalizedFill, Fill, NormalizedBackground, Background, NormalizedForeground, Foreground, NormalizedOutline, Outline, NormalizedShadow, Shadow, NormalizedShape, Shape, FullStyle, Text as Text$1, TextContent, Style, ImageFillCropRect } from 'modern-idoc';
+import { ObservableEvents, Observable, ReactivableEvents, Reactivable, Color as Color$1, RawWeakMap as RawWeakMap$1, LinearGradient, RadialGradient, Hex8Color, NormalizedFill, Fill, NormalizedBackground, Background, NormalizedForeground, Foreground, NormalizedOutline, Outline, NormalizedShadow, Shadow, NormalizedShape, Shape, FullStyle, Text as Text$1, TextContent, Style, ImageFillCropRect } from 'modern-idoc';
 export { Color as ColorValue } from 'modern-idoc';
 import { AnimationItem } from 'lottie-web';
 import { Colord, RgbaColor, HslaColor, HsvaColor } from 'colord';
@@ -243,6 +243,7 @@ declare class Input extends Observable {
     protected _onPointerMove: (nativeEvent: PointerEvent | TouchEvent | MouseEvent) => void;
     protected _onPointerUp: (nativeEvent: PointerEvent | TouchEvent | MouseEvent) => void;
     protected _onWheel: (nativeEvent: WheelEvent) => void;
+    destroy(): void;
 }
 
 interface CoreObjectEvents extends ReactivableEvents {
@@ -585,6 +586,10 @@ declare class Vector3 extends Vector {
 interface MainLoopEvents extends CoreObjectEvents {
     process: (delta: number) => void;
 }
+interface MainLoopProperties {
+    fps: number;
+    speed: number;
+}
 interface MainLoop {
     on: <K extends keyof MainLoopEvents & string>(event: K, listener: MainLoopEvents[K]) => this;
     once: <K extends keyof MainLoopEvents & string>(event: K, listener: MainLoopEvents[K]) => this;
@@ -599,10 +604,10 @@ declare class MainLoop extends CoreObject {
     protected _startedProcess?: (delta: number) => void;
     get starting(): boolean;
     get spf(): number;
-    constructor();
+    constructor(properties?: Partial<MainLoopProperties>);
     start(process: (delta: number) => void): void;
     stop(): void;
-    protected _onNextTick(): void;
+    protected _onTicker(): void;
     destroy(): void;
 }
 
@@ -680,9 +685,9 @@ declare const PI_2: number;
 declare function uid(object?: Record<string, any>): number;
 declare function isPow2(v: number): boolean;
 
-declare abstract class Renderer {
-    view?: HTMLCanvasElement;
+declare abstract class Renderer extends Reactivable {
     pixelRatio: number;
+    view?: HTMLCanvasElement;
     readonly screen: {
         x: number;
         y: number;
@@ -690,8 +695,10 @@ declare abstract class Renderer {
         height: number;
     };
     readonly related: RawWeakMap<object, any>;
+    protected _updateProperty(key: string, newValue: any, oldValue: any): void;
     getRelated<T>(source: object, createFn?: () => T): T;
     resize(width: number, height: number, updateStyle?: boolean): void;
+    destroy(): void;
 }
 
 type WebGLBufferTarget = 'array_buffer' | 'element_array_buffer';
@@ -742,6 +749,7 @@ interface WebGLFramebufferOptions {
     width: number;
     height: number;
     mipLevel?: number;
+    msaa?: boolean;
     stencil?: boolean;
     depth?: boolean;
     depthTexture?: WebGLTexture | null;
@@ -749,8 +757,9 @@ interface WebGLFramebufferOptions {
 }
 interface WebGLFramebufferMeta extends Required<WebGLFramebufferOptions> {
     multisample: number;
-    stencilBuffer?: WebGLBuffer | null;
-    msaaBuffer?: WebGLBuffer | null;
+    stencilBuffer: WebGLBuffer | null;
+    msaaRenderBuffers: WebGLRenderbuffer[];
+    framebuffer: WebGLFramebuffer | null;
 }
 type Pick<T> = T extends string ? T extends Uppercase<T> ? Lowercase<T> : never : never;
 type WebGLTarget = Pick<keyof WebGL2RenderingContext>;
@@ -1040,6 +1049,8 @@ declare class WebGLFramebufferModule extends WebGLModule {
         format: number;
     };
     resize(framebuffer: WebGLFramebuffer, width: number, height: number): void;
+    finishRenderPass(framebuffer: WebGLFramebuffer): void;
+    copyToTexture(framebuffer: WebGLFramebuffer, texture: WebGLTexture): void;
     bind(framebuffer: WebGLFramebuffer | null): void;
     forceStencil(): void;
     reset(): void;
@@ -1338,8 +1349,10 @@ interface ImageFrame {
     duration: number;
 }
 declare class AnimatedTexture extends Resource {
-    frames: ImageFrame[];
     duration: number;
+    frames: ImageFrame[];
+    frameIndex: number;
+    get currentFrame(): ImageFrame;
     constructor(source: Texture2D | ImageFrame[]);
     updateDuration(): this;
     destroy(): void;
@@ -1515,6 +1528,7 @@ declare class Viewport extends Node implements Rectangulable {
     y: number;
     width: number;
     height: number;
+    msaa: boolean;
     get valid(): boolean;
     get framebuffer(): ViewportFramebuffer;
     get texture(): ViewportTexture;
@@ -1579,6 +1593,7 @@ declare class Timeline extends Node {
 }
 
 declare class Window extends Viewport {
+    msaa: boolean;
 }
 
 interface SceneTreeEvents extends MainLoopEvents {
@@ -1589,6 +1604,13 @@ interface SceneTreeEvents extends MainLoopEvents {
     nodeProcessing: (node: Node) => void;
     nodeProcessed: (node: Node) => void;
 }
+interface SceneTreeProperties extends MainLoopProperties {
+    backgroundColor: Hex8Color;
+    debug: boolean;
+    processPaused: boolean;
+    fonts: Fonts;
+    timeline: Timeline;
+}
 interface SceneTree {
     on: <K extends keyof SceneTreeEvents & string>(event: K, listener: SceneTreeEvents[K]) => this;
     once: <K extends keyof SceneTreeEvents & string>(event: K, listener: SceneTreeEvents[K]) => this;
@@ -1596,19 +1618,19 @@ interface SceneTree {
     emit: <K extends keyof SceneTreeEvents & string>(event: K, ...args: Parameters<SceneTreeEvents[K]>) => this;
 }
 declare class SceneTree extends MainLoop {
-    processPaused: boolean;
-    backgroundColor: Color$1 | undefined;
+    backgroundColor?: Hex8Color;
     debug: boolean;
-    fonts?: Fonts;
+    processPaused: boolean;
+    fonts: Fonts;
+    timeline: Timeline;
     readonly input: Input;
     readonly renderStack: RenderStack;
     readonly root: Window;
-    readonly timeline: Timeline;
     protected _backgroundColor: Color;
     protected _currentViewport?: Viewport;
     getCurrentViewport(): Viewport | undefined;
     setCurrentViewport(viewport: Viewport | undefined): void;
-    constructor(timeline?: Timeline);
+    constructor(properties?: Partial<SceneTreeProperties>);
     protected _updateProperty(key: string, value: any, oldValue: any): void;
     log(...args: any[]): void;
     protected _process(delta?: number): void;
@@ -1783,8 +1805,8 @@ declare class TimelineNode extends Node {
     constructor(properties?: Partial<TimelineNodeProperties>, nodes?: Node[]);
     /** Timeline */
     computedDuration: number;
-    protected _currentTime: number;
-    protected _startTime: number;
+    _currentTime: number;
+    _startTime: number;
     get timeline(): Timeline | undefined;
     get timelineCurrentTime(): number;
     get parentStartTime(): number;
@@ -1987,14 +2009,17 @@ declare class BaseElement2DFill extends CoreObject {
     tile: NormalizedFill['tile'];
     opacity: NormalizedFill['opacity'];
     protected _texture?: Texture2D;
+    protected _animatedTexture?: AnimatedTexture;
     constructor(parent: BaseElement2D);
     protected _setProperties(properties?: NormalizedFill): this;
     setProperties(properties?: Fill): this;
     protected _updateProperty(key: string, value: any, oldValue: any): void;
-    loadTexture(): Promise<Texture2D | undefined>;
+    loadTexture(): Promise<void>;
     protected _updateTexture(): Promise<void>;
     canDraw(): boolean;
     draw(): void;
+    protected _getFrameCurrentTime(): number;
+    updateFrameIndex(): this;
 }
 
 declare class BaseElement2DBackground extends BaseElement2DFill {
@@ -2143,6 +2168,7 @@ declare class BaseElement2D extends Node2D implements Rectangulable {
     constructor(properties?: Partial<BaseElement2DProperties>, nodes?: Node[]);
     setProperties(properties?: Record<string, any>): this;
     protected _updateStyleProperty(key: string, value: any, oldValue: any): void;
+    protected _process(delta: number): void;
     protected _updateMaskImage(): void;
     getTransformOrigin(): Vector2;
     updateTransform(cb?: (transform: Transform2D) => void): void;
@@ -3296,17 +3322,14 @@ declare class CanvasItemEditor extends Control {
     protected _updateScrollbars(): void;
 }
 
-interface EngineOptions extends WebGLContextAttributes {
-    debug?: boolean;
+interface EngineProperties extends WebGLContextAttributes, SceneTreeProperties {
     view?: HTMLCanvasElement | WebGLRenderingContext | WebGL2RenderingContext;
     width?: number;
     height?: number;
     pixelRatio?: number;
-    backgroundColor?: Color$1;
-    fonts?: Fonts;
-    autoResize?: boolean;
-    autoStart?: boolean;
-    timeline?: Timeline;
+    autoResize: boolean;
+    autoStart: boolean;
+    msaa: boolean;
 }
 interface EngineEvents extends SceneTreeEvents {
     pointerdown: (ev: PointerInputEvent) => void;
@@ -3330,6 +3353,9 @@ interface Engine {
     emit: <K extends keyof EngineEvents>(event: K, ...args: Parameters<EngineEvents[K]>) => this;
 }
 declare class Engine extends SceneTree {
+    msaa: boolean;
+    autoResize: boolean;
+    autoStart: boolean;
     readonly renderer: WebGLRenderer;
     get view(): HTMLCanvasElement | undefined;
     get gl(): WebGLRenderingContext | WebGL2RenderingContext;
@@ -3344,19 +3370,19 @@ declare class Engine extends SceneTree {
     get pixelRatio(): number;
     set pixelRatio(val: number);
     protected _resizeObserver: ResizeObserver | undefined;
-    constructor(options?: EngineOptions);
+    constructor(properties?: Partial<EngineProperties>);
+    protected _updateProperty(key: string, value: any, oldValue: any): void;
     protected _setupInput(): this;
-    enableAutoResize(enable?: boolean): this;
     resize(width: number, height: number, updateCss?: boolean): this;
     nextTick(): Promise<void>;
     waitUntilLoad(): Promise<void>;
     waitAndRender(delta?: number): Promise<void>;
     render(delta?: number): void;
     start(): Promise<void>;
-    destroy(): void;
     toPixels(): Uint8ClampedArray<ArrayBuffer>;
     toImageData(): ImageData;
     toCanvas2D(): HTMLCanvasElement;
+    destroy(): void;
 }
 
 interface RenderOptions {
@@ -3371,4 +3397,4 @@ interface RenderOptions {
 declare function render(options: RenderOptions): Promise<HTMLCanvasElement>;
 
 export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DShape, BaseElement2DStyle, BaseElement2DText, Camera2D, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GaussianBlurEffect, Geometry, GifLoader, GlitchEffect, GodrayEffect, GradientTexture, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JsonLoader, KawaseBlurEffect, KawaseTransition, KeyboardInputEvent, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, Window, XScrollBar, YScrollBar, ZoomBlurEffect, alignMap, assets, boxSizingMap, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, determineCrossOrigin, directionMap, displayMap, ease, easeIn, easeInOut, easeOut, edgeMap, flexDirectionMap, flexWrapMap, frag, getDefaultCssPropertyValue, gutterMap, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, justifyMap, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, overflowMap, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, positionTypeMap, render, timingFunctions, uid };
-export type { AnimationEffectMode, AnimationProperties, AssetHandler, AudioWaveformProperties, BaseElement2DEvents, BaseElement2DProperties, BaseElement2DStyleProperties, Batchable2D, CSSFilterKey, CSSFilters, Camera2DEvents, Camera2DProperties, CanvasBatchable, CanvasItemEvents, CanvasItemProperties, ColorAdjustEffectProperties, ColorFilterEffectProperties, ColorOverlayEffectProperties, ColorRemoveEffectProperties, ColorReplaceEffectProperties, ComputedLayout, ControlEvents, ControlProperties, CoreObjectEvents, CssFunction, CssFunctionArg, Cursor, DropShadowEffectProperties, Easing, EffectContext, EffectMode, EffectProperties, Element2DEvents, Element2DProperties, Element2DStyleProperties, EmbossEffectProperties, EngineOptions, FillDraw, FlexBaseElement2DEvents, FlexElement2DProperties, FlexElement2DStyleProperties, GaussianBlurEffectProperties, GeometryOptions, GlitchEffectProperties, GodrayEffectProperties, IAudioContext, IAudioNode, IPlayOptions, Image2DProperties, ImageFrame, ImageTextureOptions, IndexBufferOptions, InputEventKey, InputEvents, InputMode, InternalMode, KawaseBlurEffectProperties, Keyframe, Lottie2DProperties, MainLoopEvents, MaskColor, MaskData, MaskEffectProperties, MaskObject, MaskRect, Maskable, MaterialOptions, MatrixLike, MatrixOperateOutput, Node2DEvents, Node2DProperties, NodeEvents, NodeProperties, NormalizedKeyframe, OutlineEffectProperties, PixelateEffectProperties, PlatformAudio, PlatformSound, ProcessMode, ProcessSortMode, RangeProperties, Rectangulable, RectangulableEvents, RefCountedEvents, RenderMode, RenderOptions, Renderable, ResourceEvents, RulerProperties, ScalerEvents, ScalerProperties, SceneTreeEvents, ScrollBarProperties, StrokeDraw, Texture2DFilterMode, Texture2DPixelsSource, Texture2DSource, Texture2DWrapMode, TextureRect2DProperties, TimelineEvents, TimelineNodeEvents, TimelineNodeProperties, TimelineProperties, TimingFunctions, TransformObject, TransformRect2DProperties, TransformableObject, TransitionProperties, UvTransform, Vector2Data, VectorLike, VectorOperateOutput, VertTransform, VertexAttributeOptions, VertexBufferOptions, Video2DProperties, VideoTextureOptions, VideoTextureSource, ViewportEvents, ViewportFramebuffer, WebGLBufferMeta, WebGLBufferOptions, WebGLBufferTarget, WebGLBufferUsage, WebGLDrawMode, WebGLDrawOptions, WebGLExtensions, WebGLFramebufferMeta, WebGLFramebufferOptions, WebGLProgramMeta, WebGLProgramOptions, WebGLTarget, WebGLTextureFilterMode, WebGLTextureLocation, WebGLTextureMeta, WebGLTextureOptions, WebGLTextureSource, WebGLTextureTarget, WebGLTextureWrapMode, WebGLVertexArrayObjectMeta, WebGLVertexArrayObjectOptions, WebGLVertexAttrib, WebGLVertexAttribType, WebGLViewport, XScrollBarProperties, YScrollBarProperties, ZoomBlurEffectProperties };
+export type { AnimationEffectMode, AnimationProperties, AssetHandler, AudioWaveformProperties, BaseElement2DEvents, BaseElement2DProperties, BaseElement2DStyleProperties, Batchable2D, CSSFilterKey, CSSFilters, Camera2DEvents, Camera2DProperties, CanvasBatchable, CanvasItemEvents, CanvasItemProperties, ColorAdjustEffectProperties, ColorFilterEffectProperties, ColorOverlayEffectProperties, ColorRemoveEffectProperties, ColorReplaceEffectProperties, ComputedLayout, ControlEvents, ControlProperties, CoreObjectEvents, CssFunction, CssFunctionArg, Cursor, DropShadowEffectProperties, Easing, EffectContext, EffectMode, EffectProperties, Element2DEvents, Element2DProperties, Element2DStyleProperties, EmbossEffectProperties, EngineProperties, FillDraw, FlexBaseElement2DEvents, FlexElement2DProperties, FlexElement2DStyleProperties, GaussianBlurEffectProperties, GeometryOptions, GlitchEffectProperties, GodrayEffectProperties, IAudioContext, IAudioNode, IPlayOptions, Image2DProperties, ImageFrame, ImageTextureOptions, IndexBufferOptions, InputEventKey, InputEvents, InputMode, InternalMode, KawaseBlurEffectProperties, Keyframe, Lottie2DProperties, MainLoopEvents, MainLoopProperties, MaskColor, MaskData, MaskEffectProperties, MaskObject, MaskRect, Maskable, MaterialOptions, MatrixLike, MatrixOperateOutput, Node2DEvents, Node2DProperties, NodeEvents, NodeProperties, NormalizedKeyframe, OutlineEffectProperties, PixelateEffectProperties, PlatformAudio, PlatformSound, ProcessMode, ProcessSortMode, RangeProperties, Rectangulable, RectangulableEvents, RefCountedEvents, RenderMode, RenderOptions, Renderable, ResourceEvents, RulerProperties, ScalerEvents, ScalerProperties, SceneTreeEvents, SceneTreeProperties, ScrollBarProperties, StrokeDraw, Texture2DFilterMode, Texture2DPixelsSource, Texture2DSource, Texture2DWrapMode, TextureRect2DProperties, TimelineEvents, TimelineNodeEvents, TimelineNodeProperties, TimelineProperties, TimingFunctions, TransformObject, TransformRect2DProperties, TransformableObject, TransitionProperties, UvTransform, Vector2Data, VectorLike, VectorOperateOutput, VertTransform, VertexAttributeOptions, VertexBufferOptions, Video2DProperties, VideoTextureOptions, VideoTextureSource, ViewportEvents, ViewportFramebuffer, WebGLBufferMeta, WebGLBufferOptions, WebGLBufferTarget, WebGLBufferUsage, WebGLDrawMode, WebGLDrawOptions, WebGLExtensions, WebGLFramebufferMeta, WebGLFramebufferOptions, WebGLProgramMeta, WebGLProgramOptions, WebGLTarget, WebGLTextureFilterMode, WebGLTextureLocation, WebGLTextureMeta, WebGLTextureOptions, WebGLTextureSource, WebGLTextureTarget, WebGLTextureWrapMode, WebGLVertexArrayObjectMeta, WebGLVertexArrayObjectOptions, WebGLVertexAttrib, WebGLVertexAttribType, WebGLViewport, XScrollBarProperties, YScrollBarProperties, ZoomBlurEffectProperties };