Native Rendering Components

Relevant source files

The following files were used as context for generating this wiki page:

• lib/components/native/Rectangle.ts
• lib/components/native/Sprite.ts
• lib/components/native/Text.ts
• lib/components/native/AnimatedSprite.ts
• lib/Canvas.ts
• src/overlays/SplashScreen.ts
• src/components/Smoke.ts

Native Rendering Components are the foundational building blocks of the game's rendering engine. They are low-level components that directly interface with the HTML5 CanvasRenderingContext2D to draw primitive shapes, text, and images onto the screen. These components do not contain game logic themselves but are used by higher-level components to create the visual representation of the game world.

All native components extend the base Component class and implement a render method. This method receives a RenderingContext, a position, and the component's specific properties (props) to perform the drawing operations. The Canvas class orchestrates the main render loop, which clears the canvas and recursively calls the render method of the root component, propagating the RenderingContext down the component tree until it reaches these native components.

Core Concepts

Rendering Flow

The rendering process is initiated and managed by the Canvas class. On each animation frame, it clears the canvas, calculates the time difference from the last frame, and calls the render method on the root component, passing a new RenderingContext.

This diagram illustrates the high-level rendering loop for each frame.

Class Hierarchy

All native rendering components extend a base Component class. This provides a consistent interface for the rendering engine to interact with.

The diagram below shows the inheritance structure of the native components.

Native Components

Rectangle

The Rectangle component draws a solid, filled rectangle on the canvas. It is used for backgrounds, overlays, and simple geometric shapes.

Sources: lib/components/native/Rectangle.ts

Properties (RectangleProps)

Prop	Type	Description
width	number	The width of the rectangle in pixels.
height	number	The height of the rectangle in pixels.
color	string	The fill color of the rectangle (e.g., '#fff', 'rgba(0,0,0,0.5)').

Sources: lib/components/native/Rectangle.ts:5-9

Rendering Logic

The render method sets the fillStyle on the CanvasRenderingContext2D and then calls fillRect with the calculated position and dimensions, adjusted by the canvas scale factor.

Sources: lib/components/native/Rectangle.ts:12-19

Text

The Text component is used to draw text on the canvas. It supports basic styling such as font, size, color, alignment, and baseline.

Sources: lib/components/native/Text.ts

Properties (TextProps)

Prop	Type	Default	Description
text	string	-	The string of text to be rendered.
color	string (optional)	'black'	The color of the text.
font	string (optional)	'Arial'	The font family to use.
size	number (optional)	16	The font size in pixels.
align	CanvasTextAlign (optional)	'start'	The horizontal alignment of the text.
baseline	CanvasTextBaseline (optional)	'alphabetic'	The vertical alignment (baseline) of the text.

Sources: lib/components/native/Text.ts:8-15

Rendering Logic

The render method configures the CanvasRenderingContext2D with the provided text styling properties and then calls fillText to draw the text at the specified position. The font size is multiplied by the scaleFactor from the RenderingContext.

Sources: lib/components/native/Text.ts:17-26

Sprite

The Sprite component renders a static image from a given source URL. It includes logic to load the HTMLImageElement and caches it to avoid reloading the same image on subsequent render calls.

Sources: lib/components/native/Sprite.ts

Properties (SpriteProps)

Prop	Type	Description
source	string	The URL or path to the image file.
width	number	The width to render the image.
height	number	The height to render the image.

Sources: lib/components/native/Sprite.ts:5-9

Rendering Logic

On the first render or when the source prop changes, a new HTMLImageElement is created and its src is set. For all renders, drawImage is called to render the image. Image smoothing is explicitly disabled to maintain a crisp, pixel-art style.

AnimatedSprite

The AnimatedSprite component renders an animated sprite from a spritesheet. It assumes the spritesheet is a horizontal strip of frames of equal size. The animation is time-based, controlled by an interval property.

Sources: lib/components/native/AnimatedSprite.ts

Properties (AnimatedSpriteProps)

Prop	Type	Description
source	string	The URL of the spritesheet image.
spriteWidth	number	The width of a single frame in the spritesheet.
spriteHeight	number	The height of a single frame in the spritesheet.
width	number	The target width to render the frame on the canvas.
height	number	The target height to render the frame on the canvas.
interval	number	The time in milliseconds between animation frames.

Sources: lib/components/native/AnimatedSprite.ts:5-12

Rendering and Animation Logic

The AnimatedSprite component extends Sprite's logic. When the image loads, it calculates the number of frames (length) available in the spritesheet. In each render call, it uses drawImage with clipping arguments to draw only the current frame. It then checks if enough time has passed since the last frame update (based on props.interval and context.frameStart). If so, it increments the frame index, looping back to the start if necessary, and schedules the next update time.

This sequence diagram shows the process of updating and rendering an animation frame.

An example of AnimatedSprite is the Smoke component, which uses it to create a smoke effect animation from a spritesheet.
Sources: src/components/Smoke.ts:13-23

Usage Example

The SplashScreen provides a clear example of how these native components are used together. It uses a Rectangle for the background, Sprite for branding, and Text for the author's name. These are composed within a higher-level component to create a complex animated scene.

// From src/overlays/SplashScreen.ts
protected template: Template = [
  // Background
  {
    component: new Rectangle(),
    position: (): Coordinates => new Coordinates(0, 0),
    props: (): RectangleProps => ({
      width: 1600,
      height: 1200,
      color: `rgba(255, 255, 255, ${this.opacity})`
    })
  },
  // ...
  // Branding
  {
    component: new Sprite(),
    position: (): Coordinates => new Coordinates(600, 800 - 30),
    props: (): SpriteProps => ({
      source: branding,
      width: 64,
      height: 64
    }),
    // ...
  },
  {
    component: new Text(),
    position: (): Coordinates => new Coordinates(1000, 800),
    props: (): TextProps => ({
      text: 'Felix Wotschofsky',
      align: 'end',
      baseline: 'middle',
      color: `rgba(0, 0, 0, ${this.opacity})`,
      font: 'Heartbit',
      size: 64
    }),
    // ...
  }
];

Sources: src/overlays/SplashScreen.ts:43-92

Summary

The Native Rendering Components (Rectangle, Text, Sprite, AnimatedSprite) are the essential, low-level drawing primitives for the Farm Siege game engine. They provide a direct but abstracted interface to the HTML5 Canvas API, allowing higher-level game components to define what should be on screen without managing the direct rendering calls themselves. Their design, combined with the Canvas render loop and RenderingContext, forms a simple yet effective component-based rendering architecture.