Skip to main content

Quick Start

Logo

This page will get you coding your game in no time!

  • All examples shown in this site will be using ESM instead of CommonJS
  • All examples shown in this site will be written in TypeScript
  • Additionally, drawing examples will only use the 2d context instead of the more complicated WebGL context

Prepare your environment​

  • Add the GamingCanvas to your package.json with the following:
    • NPM: npm i @tknight-dev/gaming-canvas
    • Yarn: yarn add @tknight-dev/gaming-canvas

Creating the HTML​

GamingCanvas will inject all the necessary HTML elements into the container element you select. In this example the container id is hook-for-gaming-canvas.

HTML
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<!-- Prevent mobile devices from pinch zooming your entire app 
			You can zoom your game with touch based inputs -->
		<meta
			name="viewport"
			id="viewport-app"
			content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
		/>
		<title>My First Game</title>
	</head>
	<body>
		<div class="title">
			<h1>My Game Title</h1>
		</div>
		<div class="game" id="hook-for-fullscreen">
			<!-- GamingCanvas will inject into the following element -->
			<div class="container" id="hook-for-gaming-canvas"></div>
		</div>
	</body>
</html>

Creating the Script​

The following will hook the HTML element, initialize the GamingCanvas with your hook, set the dimensions of the generated canvas element, and then draw on that canvas element

Script
import { GamingCanvas, GamingCanvasOptions, GamingCanvasResolutionScaleType } from '@tknight-dev/gaming-canvas';

// Intialize
const container: HTMLElement = document.getElementById('hook-for-gaming-canvas') as HTMLElement;
const options: GamingCanvasOptions = {
	// default aspect ratio is 16 / 9
	resolutionWidthPx: 640,
};
const canvases: HTMLCanvasElement[] = GamingCanvas.initialize(container, options);

// Configure
const canvas: HTMLCanvasElement = canvases[0];
const canvasContext: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;

// Your game logic and drawing here
cavnas.height = report.canvasHeight;
cavnas.width = report.canvasWidth;
canvasContext.font = '48px serif';
canvasContext.fillText('Hello world', canvas.width / 3, canvas.height / 2);

That's it!​

You can now start coding your game! Keep reading the documenation to learn more about what the GamingCanvas can do for you as well as some insights into how games can be made