@moderrkowo/jsgl/dist/drawing/Renderer.d.ts

Client-side JavaScript library for creating web 2D games. Focusing at objective game.

import { Game } from '../Game';
import { Sprite } from '../gameobjects/Sprite';
import { Vector2 } from '../structs/Vector2';
import { DrawSettings } from '../structs/DrawSettings';
import { ClickableGameObject } from '../gameobjects/ClickableGameObject';
/**
 * Class represents Game Renderer.
 * @group Important Classes
 */
export declare class Renderer {
    /**
     * Renderer owner.
     */
    private readonly handler;
    /**
     * How many pixels have one grid unit.
     */
    gridSize: number;
    /**
     * The decimal midpoint of parent element size.
     */
    canvasParentSize: number;
    /**
     * Constructs new Renderer.
     * @param handler The {@link Game} reference
     */
    constructor(handler: Game);
    /**
     * Resizes canvas to parent element size by canvasParentSize (decimal midpoint).
     * @method
     * @example
     * renderer.resizeCanvas();
     */
    resizeCanvas(): void;
    /**
     * Gets canvas width in pixels.
     */
    get canvasWidth(): number;
    /**
     * Sets canvas width in pixels.
     * @param width The new width
     */
    set canvasWidth(width: number);
    /**
     * Gets canvas height in pixels.
     */
    get canvasHeight(): number;
    /**
     * Sets canvas height in pixels.
     * @param height The new height
     */
    set canvasHeight(height: number);
    /**
     * Gets the {@link CanvasRenderingContext2D}.
     */
    get ctx(): CanvasRenderingContext2D;
    /**
     * Gets the Vector2 of width and height in pixels.
     */
    get canvasSize(): Vector2;
    /**
     * Scales number from client coordinate to grid coordinate.
     * @method
     * @param a - The client coordinate
     * @returns The scaled number
     * @example
     * const scaledToGrid = renderer.scale(5);
     */
    scale(a: number): number;
    /**
     * Combines given draw settings with default draw settings.
     * @method
     * @param drawSettings - The given draw settings
     * @returns The combined draw settings
     * @example
     * const drawSettings = renderer.combineDrawSettings({ color: 'red' });
     */
    private combineDrawSettings;
    /**
     * Sets canvas context properties to given settings.
     * @param drawSettings - The draw settings
     */
    private setContextSettings;
    /**
     * Draws a rect.
     * @method
     * @param worldX - The X-coordinate
     * @param worldY - The Y-coordinate
     * @param worldWidth - The width
     * @param worldHeight - The height
     * @param drawSettings - The draw settings
     * @example
     * renderer.drawRectangle(5, 2, 1, 1, { color: 'green', border: true });
     */
    drawRectangle(worldX: number, worldY: number, worldWidth: number, worldHeight: number, drawSettings?: DrawSettings): void;
    /**
     * Draws a circle.
     * @method
     * @param worldX - The X-coordinate
     * @param worldY - The Y-coordinate
     * @param diameter - The diameter
     * @param drawSettings - The draw settings
     * @example
     * renderer.drawCircle(0, 0, 1, { color: 'yellow' });
     */
    drawCircle(worldX: number, worldY: number, diameter: number, drawSettings?: DrawSettings): void;
    /**
     * Draws line from position to another position.
     * @method
     * @param fromWorldX - From X-coordinate
     * @param fromWorldY - From Y-coordinate
     * @param toWorldX - To X-coordinate
     * @param toWorldY - To Y-coordinate
     * @param drawSettings - The draw settings
     * @example
     * renderer.drawLine(2, 3, 3, 4);
     */
    drawLine(fromWorldX: number, fromWorldY: number, toWorldX: number, toWorldY: number, drawSettings?: DrawSettings): void;
    /**
     * Draws arrow from position to another position.
     * @method
     * @param fromWorldX - From X-coordinate
     * @param fromWorldY - From Y-coordinate
     * @param toWorldX - To X-coordinate
     * @param toWorldY - To Y-coordinate
     * @param drawSettings - The draw settings
     * @example
     * renderer.drawArrow(2, 3, 3, 4);
     */
    drawArrow(fromWorldX: number, fromWorldY: number, toWorldX: number, toWorldY: number, drawSettings?: DrawSettings): void;
    /**
     * Clears the canvas.
     * @method
     * @example
     * renderer.clearFrame();
     */
    clearFrame(): void;
    /**
     * Fills the canvas with color property from settings.
     * @param drawSettings - The settings
     * @deprecated
     */
    fillFrame(drawSettings: DrawSettings): void;
    /**
     * Fills canvas with image.
     * @param image - The image
     * @deprecated
     */
    fillImageFrame(image: HTMLCanvasElement): void;
    /**
     * Fills canvas with content.
     * @method
     * @param content - The color, image or {@link DrawSettings}
     * @example
     * renderer.fill('white');
     * renderer.fill({ color: 'white' })
     * renderer.fill(game.GetImage('background'));
     */
    fill(content: string | DrawSettings | HTMLCanvasElement): void;
    /**
     * Draws image.
     * @method
     * @param image - The image
     * @param worldX - The X-coordinate
     * @param worldY - The Y-coordinate
     * @param worldWidth - The width
     * @param worldHeight - The height
     * @param drawSettings - The draw settings
     * @example
     * renderer.drawImage(game.GetImage('player'), 0, 0, 1, 1, { angle: 45 });
     */
    drawImage(image: HTMLImageElement, worldX: number, worldY: number, worldWidth: number, worldHeight: number, drawSettings?: DrawSettings): void;
    /**
     * Draws sprite texture.
     * @method
     * @param sprite - The sprite
     * @returns is success?
     * @example
     * const exampleSprite = ...;
     * renderer.drawSprite(exampleSprite);
     */
    drawSprite(sprite: Sprite): boolean;
    /**
     * Draws hitbox with direction arrow.
     * @method
     * @param clickableObject - The clickable game object
     * @example
     * const exampleClickableObject = ...;
     * renderer.drawHitbox(exampleClickableObject);
     */
    drawHitbox(clickableObject: ClickableGameObject): void;
}