@szymmis/tsgl NPM

🖼️ TSGL - Simple TypeScript WebGL Library

💬 Introduction

TSGL is a basic wrapper on WebGL primitive API. \ You don't need to worry about creating shaders, compiling programs etc.\ Simply create a TSGLInstance object with init() function and use it's exposed functions such as

⚙️ Installation and usage

You can use TSGL in every possible way.

as ESModules or CommonJS importable package with some kind of bundler (ex: webpack)
- Preferable because of built-in TypeScript typings

import TSGL from '@szymmis/tsgl'; // ESModules
// or
const TSGL = require('@szymmis/tsgl'); // CommonJS

(async function () {
  const canvas = document.querySelector('canvas');
  const tsgl = TSGL.init(canvas);
  const img = await tsgl.createTexture('img.png');
  tsgl.drawImage(img, 50, 50);
})();

in browser by importing the script file and consuming TSGL object exposed globally

<body>
  <canvas></canvas>
  <script src="PATH_TO_TSGL.js"></script>
  <script>
    (async function () {
      const canvas = document.querySelector('canvas');
      const tsgl = TSGL.init(canvas);
      const img = await tsgl.createTexture('img.png');
      tsgl.drawImage(img, 50, 50);
    })();
  </script>
</body>

📝 Documentation

`TSGL` object functions
`init(canvas, options?) => TSGLInstance`

`init(canvas, options?) => TSGLInstance`

Function used to create a TSGLInstance object and set up WebGL with passed in canvas to draw on.\ You can specify options to control how TSGL is initialised

Parameters

canvas: HTMLCanvasElement - canvas on which the graphics will be rendered on
options?: TSGLInitialOptions - (optional)
- width?: number - (optional) width
- height?: number - (optional) and height of the viewport
- worldScale?: { x: number, y: number } - (optional) global scale factor;\ usefull when you have small sprites and want to upscale them at render x times
- clearColor?: { r: number, g: number, b: number } - (optional) specifies the color of the canvas background color after every clear

Example

// create TSGLInstance, and set the initial dimensions of the canvas to 800x600
const tsgl = TSGL.init(document.querySelector('canvas'), {
  width: 800,
  height: 600,
  worldScale: { x: 2, y: 2 },
});

`TSGLInstance` functions
`async createTexture(src) => TSGLTexture`
`drawImage(img, x, y, options?)`
`drawText(text, x, y)`

`async createTexture(src) => TSGLTexture`

Function used to create a TSGLTexture from a file.\ It returns a promise that resolves to said texture object, which is used inside drawImage() function.

Parameters

src: string - path to an image file

Example

(async function () {
  // ... initialising tsgl object with TSGL.init()

  // load image from file and create texture object
  const img = await tsgl.createTexture('my_image.png');
})();

`drawImage(img, x, y, options?)`

Function used to draw TSGLTexture onto the canvas

img: TSGLTexture - texture to be drawn
x: number - horizontal
y: number - and vertical position of a texture
options?: TSGLDrawOptions - (optional)
- width?: number - (optional) width
- height?: number - (optional) and height of the quad that the texture will be drawn on
- rotation?: number - (optional) rotation in radians
- region?: TSGLRegion - (optional) region of the texture to be rendered;\ used when you want to render a tile out of tileset or a frame of an animation

(async function () {
  // ... initialising tsgl object with TSGL.init()

  // load image from file and create texture object
  const img = await tsgl.createTexture('my_image.png');
  /*
   * draw the texture on a rect of size 100x100
   * on position (50,50)
   */
  tsgl.drawImage(img, 50, 50, { width: 100, height: 100 });
})();

`drawText(text, x, y)`

Function used to draw text on the canvas using built-in bitmap font

text: string - A string to be drawn onto the screen
x: number - horizontal
y: number - and vertical position of the text

(async function () {
  // ... initialising tsgl object with TSGL.init()

  tsgl.drawText('Hello world!' 100, 100);
})();

⚠️ Note ⚠️

Only the basic characters as\ aąbcćdeęfghijklłmnoópqrstuvwxyzźż\ 1234567890!?.,;:()[]+-="\\ are supported right now

`TSGL` custom objects
`class TSGLTexture`
`interface TSGLRegion`

`class TSGLTexture`

Object representing an image on a sprite batch.\ Created using createTexture() and used in drawImage() to draw the image it represents onto the canvas.

Fields

width: number - width of the original image
height: number - height of the original image

`interface TSGLRegion`

Interface describing a texture region - a part of a texture.\ Used as a paremeter of drawImage() to determine which part of the texture you want to draw.\ Can be used to draw a single frame out of an animation texture or a tileset

Fields