History of Gfx2Manager (No. 1)

• History
• View the diff.
• View the diff current.
• View the source.
• Go to Gfx2Manager.
  • 1 (2024-02-10 (Sat) 09:41:46)
  • 2 (2024-02-10 (Sat) 19:09:15)

Class: Gfx2Manager

The `Gfx2Manager` class is a singleton responsible for managing 2D canvas for drawing and provides functions for camera manipulation and coordinate conversions.

Constructors

• new Gfx2Manager(): Gfx2Manager
  The constructor.
  

Methods

• beginDrawing(): void
  The "beginDrawing" function prepares the canvas for drawing by restoring the context, clearing the canvas, setting the background color, and applying camera transformations. Warning: You need to call this method before any draw calls.
  
  
• endDrawing(): void
  The "endDrawing" function restores the previous state of the canvas context.
  
  
• findCanvasPosFromClientPos(clientX: number, clientY: number): vec2
  The "findCanvasPosFromClientPos" function calculates the canvas position from the client's viewport position
  
  • clientX: The `clientX` parameter represents the horizontal coordinate (in pixels) of the mouse pointer relative to the client area of the browser window.
    
  • clientY: The `clientY` parameter represents the vertical coordinate (in pixels) of the mouse pointer relative to the client area of the browser window.
    
    
• findWorldPosFromClientPos(clientX: number, clientY: number): vec2
  The "findWorldPosFromClientPos" function calculates the world position from the client's viewport position by taking care of the canvas dimensions and camera position.
  
  • clientX: The clientX parameter represents the x-coordinate of the mouse or touch event relative to the client area of the browser window.
    
  • clientY: The `clientY` parameter represents the vertical coordinate (in pixels) of the mouse pointer relative to the client area of the browser window.
    
    
• getBgColor(): vec4
  The "getBgColor" function returns the background color.
  
  
• getCameraPosition(): vec2
  The "getCameraPosition" function returns the camera position.
  
  
• getCameraPositionX(): number
  The "getCameraPositionX" function returns the X coordinate of the camera position.
  
  
• getCameraPositionY(): number
  The "getCameraPositionY" function returns the Y coordinate of the camera position.
  
  
• getCameraRotation(): number
  The "getCameraRotation" function returns the camera rotation angle in radians.
  
  
• getCameraScale(): vec2
  The "getCameraScale" function returns the camera scale.
  
  
• getCameraScaleX(): number
  The "getCameraScaleX" function returns the camera scale factor on x-axis.
  
  
• getCameraScaleY(): number
  The "getCameraScaleY" function returns the camera scale factor on y-axis.
  
  
• getCameraTransform(): mat3
  The "getCameraTransform" function returns the transformation matrix apply to the camera.
  
  
• getClientHeight(): number
  The "getClientHeight" function returns the client height of the canvas.
  
  
• getClientWidth(): number
  The "getClientWidth" function returns the client width of the canvas.
  
  
• getContext(): CanvasRenderingContext2D
  The "getContext" function returns the 2D rendering context of the canvas element.
  
  
• getDefaultTexture(): HTMLImageElement
  The "getDefaultTexture" function returns a default HTMLImageElement.
  
  
• getHeight(): number
  The "getHeight" function returns the height of the canvas.
  
  
• getWidth(): number
  The "getWidth" function returns the width of the canvas.
  
  
• hasFilter(): boolean
  The "hasFilter" function checks if the canvas element has an active filter.
  
  
• moveCamera(x: number, y: number): void
  The "moveCamera" function move the camera.
  
  • x: The move in x-axis direction.
    
  • y: The move in y-axis direction.
    
    
• setBgColor(r: number, g: number, b: number, a: number): void
  The "setBgColor" function sets the background color using the provided RGBA values (0 - 255).
  
  • r: The parameter "r" represents the red component.
    
  • g: The parameter "g" represents the green component.
    
  • b: The parameter "b" represents the blue component.
    
  • a: The parameter "a" represents the alpha value.
    
    
• setCameraPosition(x: number, y: number): void
  The "setCameraPosition" function sets the camera position.
  
  • x: The x-coordinate.
    
  • y: The y-coordinate.
    
    
• setCameraRotation(cameraRotation: number): void
  The "setCameraRotation" function sets the rotation of the camera.
  
  • cameraRotation: The `cameraRotation` parameter is the camera rotation angle in radians.
    
    
• setCameraScale(x: number, y: number): void
  The "setCameraScale" function sets the camera scale.
  
  • x: The `x` parameter represents the scale factor for the camera in the x-axis.
    
  • y: The `y` parameter represents the scale factor for the camera in the y-axis.
    
    
• setCameraTransform(cameraTransform: mat3): void
  The "setCameraTransform" function add transformation matrix to the camera (before position/rotation/scale).
  
  • cameraTransform: The `cameraTransform` parameter is a 3x3 matrix (mat3) that represents the transformation applied to the camera.
    
    
• setFilter(filter: string): void
  The "setFilter" function sets the filter property of a canvas element to the specified filter value.
  
  • filter: The filter parameter is a string that represents the CSS filter property. It can be used to apply various visual effects to an element, such as blur, brightness, contrast, grayscale, etc.
    
    
• update(ts: number): void
  The "update" function is called during the update phase.
  
  • ts: The `ts` parameter stands for "timestep".