Class: TextmodeTileset

Manages a bitmap tileset as a normalized glyph atlas.

Tiles are imported from a source sheet, repacked into the same contiguous atlas layout used by vector fonts, and exposed through the shared glyph-atlas contract.

fontSize() changes on a tileset only affect the effective output cell size. The native atlas stays at the authored tile resolution.

Extends

Disposable

Implements

TextmodeGlyphAtlas

Accessors

cellDimensions

Get Signature

get cellDimensions(): object;

Returns the effective tile cell dimensions used by the layer grid.

Returns

object

Name	Type
`height`	`number`
`width`	`number`

Example

javascript

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
			fontSize: 16,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	if (!tileset) {
		label('loading tileset...', 0, [255, 225, 140]);
		return;
	}

	const nativeDimensions = tileset.nativeCellDimensions;
	const maxGlyphDimensions = tileset.maxGlyphDimensions;
	const cellDimensions = tileset.cellDimensions;

	label('TextmodeTileset dimensions', -7, [255, 225, 140]);
	label('T64 tileset source', -3);
	label(`native ${nativeDimensions.width} x ${nativeDimensions.height}`, 1);
	label(`max ${maxGlyphDimensions.width} x ${maxGlyphDimensions.height}`, 5);
	label(`cell ${cellDimensions.width} x ${cellDimensions.height}`, 9);
	label(`cellWidth ${tileset.cellWidth}  cellHeight ${tileset.cellHeight}`, 13);
	label(`fontSize ${tileset.fontSize}`, 17, [120, 205, 255]);
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

Implementation of

TextmodeGlyphAtlas.cellDimensions

cellHeight

Get Signature

get cellHeight(): number;

Returns the effective tile cell height used by the layer grid.

Returns

number

Example

javascript

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
			fontSize: 16,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	if (!tileset) {
		label('loading tileset...', 0, [255, 225, 140]);
		return;
	}

	const nativeDimensions = tileset.nativeCellDimensions;
	const maxGlyphDimensions = tileset.maxGlyphDimensions;
	const cellDimensions = tileset.cellDimensions;

	label('TextmodeTileset dimensions', -7, [255, 225, 140]);
	label('T64 tileset source', -3);
	label(`native ${nativeDimensions.width} x ${nativeDimensions.height}`, 1);
	label(`max ${maxGlyphDimensions.width} x ${maxGlyphDimensions.height}`, 5);
	label(`cell ${cellDimensions.width} x ${cellDimensions.height}`, 9);
	label(`cellWidth ${tileset.cellWidth}  cellHeight ${tileset.cellHeight}`, 13);
	label(`fontSize ${tileset.fontSize}`, 17, [120, 205, 255]);
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

Implementation of

TextmodeGlyphAtlas.cellHeight

cellWidth

Get Signature

get cellWidth(): number;

Returns the effective tile cell width used by the layer grid.

Returns

number

Example

javascript

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
			fontSize: 16,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	if (!tileset) {
		label('loading tileset...', 0, [255, 225, 140]);
		return;
	}

	const nativeDimensions = tileset.nativeCellDimensions;
	const maxGlyphDimensions = tileset.maxGlyphDimensions;
	const cellDimensions = tileset.cellDimensions;

	label('TextmodeTileset dimensions', -7, [255, 225, 140]);
	label('T64 tileset source', -3);
	label(`native ${nativeDimensions.width} x ${nativeDimensions.height}`, 1);
	label(`max ${maxGlyphDimensions.width} x ${maxGlyphDimensions.height}`, 5);
	label(`cell ${cellDimensions.width} x ${cellDimensions.height}`, 9);
	label(`cellWidth ${tileset.cellWidth}  cellHeight ${tileset.cellHeight}`, 13);
	label(`fontSize ${tileset.fontSize}`, 17, [120, 205, 255]);
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

Implementation of

TextmodeGlyphAtlas.cellWidth

characterMap

Get Signature

get characterMap(): Map<string, TextmodeGlyph>;

Returns the character-to-glyph lookup map for the tileset.

Returns

Map<string, TextmodeGlyph>

Example

javascript

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	if (!tileset) {
		label('loading tileset...', 0, [255, 225, 140]);
		return;
	}

	const atlas = tileset.framebuffer;
	label('TextmodeTileset atlas', -6, [255, 225, 140]);
	label('T64 bitmap tileset', -2);
	label(`characters ${tileset.characters.length}  map ${tileset.characterMap.size}`, 2);
	label(`source sheet ${TILE_COLUMNS} x ${TILE_ROWS}`, 6);
	label(`normalized atlas ${tileset.columns} x ${tileset.rows}`, 10);
	label(`framebuffer ${atlas.width} x ${atlas.height}`, 14, [120, 205, 255]);
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

Implementation of

TextmodeGlyphAtlas.characterMap

characters

Get Signature

get characters(): readonly TextmodeGlyph[];

Returns the array of glyphs generated from the tileset mapping.

Returns

readonly TextmodeGlyph[]

Example

javascript

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	if (!tileset) {
		label('loading tileset...', 0, [255, 225, 140]);
		return;
	}

	const atlas = tileset.framebuffer;
	label('TextmodeTileset atlas', -6, [255, 225, 140]);
	label('T64 bitmap tileset', -2);
	label(`characters ${tileset.characters.length}  map ${tileset.characterMap.size}`, 2);
	label(`source sheet ${TILE_COLUMNS} x ${TILE_ROWS}`, 6);
	label(`normalized atlas ${tileset.columns} x ${tileset.rows}`, 10);
	label(`framebuffer ${atlas.width} x ${atlas.height}`, 14, [120, 205, 255]);
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

Implementation of

TextmodeGlyphAtlas.characters

columns

Get Signature

get columns(): number;

Returns the number of columns in the normalized glyph atlas.

Returns

number

Example

javascript

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	if (!tileset) {
		label('loading tileset...', 0, [255, 225, 140]);
		return;
	}

	const atlas = tileset.framebuffer;
	label('TextmodeTileset atlas', -6, [255, 225, 140]);
	label('T64 bitmap tileset', -2);
	label(`characters ${tileset.characters.length}  map ${tileset.characterMap.size}`, 2);
	label(`source sheet ${TILE_COLUMNS} x ${TILE_ROWS}`, 6);
	label(`normalized atlas ${tileset.columns} x ${tileset.rows}`, 10);
	label(`framebuffer ${atlas.width} x ${atlas.height}`, 14, [120, 205, 255]);
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

Implementation of

TextmodeGlyphAtlas.columns

fontFramebuffer

Get Signature

get fontFramebuffer(): TextmodeFramebuffer;

Returns the tileset atlas framebuffer backing this glyph atlas.

Returns

TextmodeFramebuffer

Example

javascript

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	if (!tileset) {
		label('loading tileset...', 0, [255, 225, 140]);
		return;
	}

	const atlas = tileset.framebuffer;
	label('TextmodeTileset atlas', -6, [255, 225, 140]);
	label('T64 bitmap tileset', -2);
	label(`characters ${tileset.characters.length}  map ${tileset.characterMap.size}`, 2);
	label(`source sheet ${TILE_COLUMNS} x ${TILE_ROWS}`, 6);
	label(`normalized atlas ${tileset.columns} x ${tileset.rows}`, 10);
	label(`framebuffer ${atlas.width} x ${atlas.height}`, 14, [120, 205, 255]);
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
			fontSize: 16,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	if (!tileset) {
		label('loading tileset...', 0, [255, 225, 140]);
		return;
	}

	const nativeDimensions = tileset.nativeCellDimensions;
	const maxGlyphDimensions = tileset.maxGlyphDimensions;
	const cellDimensions = tileset.cellDimensions;

	label('TextmodeTileset dimensions', -7, [255, 225, 140]);
	label('T64 tileset source', -3);
	label(`native ${nativeDimensions.width} x ${nativeDimensions.height}`, 1);
	label(`max ${maxGlyphDimensions.width} x ${maxGlyphDimensions.height}`, 5);
	label(`cell ${cellDimensions.width} x ${cellDimensions.height}`, 9);
	label(`cellWidth ${tileset.cellWidth}  cellHeight ${tileset.cellHeight}`, 13);
	label(`fontSize ${tileset.fontSize}`, 17, [120, 205, 255]);
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

framebuffer

Get Signature

get framebuffer(): TextmodeFramebuffer;

Returns the normalized glyph atlas framebuffer used by the ASCII shader.

Returns

TextmodeFramebuffer

Example

javascript

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	if (!tileset) {
		label('loading tileset...', 0, [255, 225, 140]);
		return;
	}

	const atlas = tileset.framebuffer;
	label('TextmodeTileset atlas', -6, [255, 225, 140]);
	label('T64 bitmap tileset', -2);
	label(`characters ${tileset.characters.length}  map ${tileset.characterMap.size}`, 2);
	label(`source sheet ${TILE_COLUMNS} x ${TILE_ROWS}`, 6);
	label(`normalized atlas ${tileset.columns} x ${tileset.rows}`, 10);
	label(`framebuffer ${atlas.width} x ${atlas.height}`, 14, [120, 205, 255]);
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

Implementation of

TextmodeGlyphAtlas.framebuffer

maxGlyphDimensions

Get Signature

get maxGlyphDimensions(): object;

Returns the effective tile dimensions used by the layer grid.

Returns

object

Name	Type
`height`	`number`
`width`	`number`

Example

javascript

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
			fontSize: 16,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	if (!tileset) {
		label('loading tileset...', 0, [255, 225, 140]);
		return;
	}

	const nativeDimensions = tileset.nativeCellDimensions;
	const maxGlyphDimensions = tileset.maxGlyphDimensions;
	const cellDimensions = tileset.cellDimensions;

	label('TextmodeTileset dimensions', -7, [255, 225, 140]);
	label('T64 tileset source', -3);
	label(`native ${nativeDimensions.width} x ${nativeDimensions.height}`, 1);
	label(`max ${maxGlyphDimensions.width} x ${maxGlyphDimensions.height}`, 5);
	label(`cell ${cellDimensions.width} x ${cellDimensions.height}`, 9);
	label(`cellWidth ${tileset.cellWidth}  cellHeight ${tileset.cellHeight}`, 13);
	label(`fontSize ${tileset.fontSize}`, 17, [120, 205, 255]);
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

nativeCellDimensions

Get Signature

get nativeCellDimensions(): object;

Returns the authored tile dimensions from the source tileset in pixels.

Returns

object

Name	Type
`height`	`number`
`width`	`number`

Example

javascript

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
			fontSize: 16,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	if (!tileset) {
		label('loading tileset...', 0, [255, 225, 140]);
		return;
	}

	const nativeDimensions = tileset.nativeCellDimensions;
	const maxGlyphDimensions = tileset.maxGlyphDimensions;
	const cellDimensions = tileset.cellDimensions;

	label('TextmodeTileset dimensions', -7, [255, 225, 140]);
	label('T64 tileset source', -3);
	label(`native ${nativeDimensions.width} x ${nativeDimensions.height}`, 1);
	label(`max ${maxGlyphDimensions.width} x ${maxGlyphDimensions.height}`, 5);
	label(`cell ${cellDimensions.width} x ${cellDimensions.height}`, 9);
	label(`cellWidth ${tileset.cellWidth}  cellHeight ${tileset.cellHeight}`, 13);
	label(`fontSize ${tileset.fontSize}`, 17, [120, 205, 255]);
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

rows

Get Signature

get rows(): number;

Returns the number of rows in the normalized glyph atlas.

Returns

number

Example

javascript

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	if (!tileset) {
		label('loading tileset...', 0, [255, 225, 140]);
		return;
	}

	const atlas = tileset.framebuffer;
	label('TextmodeTileset atlas', -6, [255, 225, 140]);
	label('T64 bitmap tileset', -2);
	label(`characters ${tileset.characters.length}  map ${tileset.characterMap.size}`, 2);
	label(`source sheet ${TILE_COLUMNS} x ${TILE_ROWS}`, 6);
	label(`normalized atlas ${tileset.columns} x ${tileset.rows}`, 10);
	label(`framebuffer ${atlas.width} x ${atlas.height}`, 14, [120, 205, 255]);
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

Implementation of

TextmodeGlyphAtlas.rows

textureColumns

Get Signature

get textureColumns(): number;

Returns the number of columns in the repacked tileset texture atlas.

Returns

number

Example

javascript

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	if (!tileset) {
		label('loading tileset...', 0, [255, 225, 140]);
		return;
	}

	const atlas = tileset.framebuffer;
	label('TextmodeTileset atlas', -6, [255, 225, 140]);
	label('T64 bitmap tileset', -2);
	label(`characters ${tileset.characters.length}  map ${tileset.characterMap.size}`, 2);
	label(`source sheet ${TILE_COLUMNS} x ${TILE_ROWS}`, 6);
	label(`normalized atlas ${tileset.columns} x ${tileset.rows}`, 10);
	label(`framebuffer ${atlas.width} x ${atlas.height}`, 14, [120, 205, 255]);
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

textureRows

Get Signature

get textureRows(): number;

Returns the number of rows in the repacked tileset texture atlas.

Returns

number

Example

javascript

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	if (!tileset) {
		label('loading tileset...', 0, [255, 225, 140]);
		return;
	}

	const atlas = tileset.framebuffer;
	label('TextmodeTileset atlas', -6, [255, 225, 140]);
	label('T64 bitmap tileset', -2);
	label(`characters ${tileset.characters.length}  map ${tileset.characterMap.size}`, 2);
	label(`source sheet ${TILE_COLUMNS} x ${TILE_ROWS}`, 6);
	label(`normalized atlas ${tileset.columns} x ${tileset.rows}`, 10);
	label(`framebuffer ${atlas.width} x ${atlas.height}`, 14, [120, 205, 255]);
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

Methods

dispose()

dispose(): void;

Dispose the tileset and release its shared atlas resources.

Returns

void

Example

javascript

const TILE_COLUMNS = 16;
const TILE_ROWS = 16;
const TILE_COUNT = TILE_COLUMNS * TILE_ROWS;

const t = textmode.create({ width: window.innerWidth, height: window.innerHeight, fontSize: 16 });

let tileset = null;
let disposed = false;

function label(text, y, color = [220, 220, 220]) {
	t.push();
	t.translate(-Math.floor(text.length / 2), y);
	t.charColor(color[0], color[1], color[2]);

	for (let i = 0; i < text.length; i++) {
		t.push();
		t.translate(i, 0);
		t.char(text[i]);
		t.point();
		t.pop();
	}

	t.pop();
}

t.setup(async () => {
	tileset = await t.loadTileset(
		{
			source: 'https://littlebitspace.com/resources/fonts/T64.png',
			columns: TILE_COLUMNS,
			rows: TILE_ROWS,
			count: TILE_COUNT,
		},
		false
	);
});

t.draw(() => {
	t.background(5, 7, 18);

	label('click to dispose tileset', -4, [255, 225, 140]);
	label(disposed ? 'tileset disposed' : 'tileset active', 0);
	label('T64  16 x 16  8 x 8 cells', 4);
	label('this frees atlas resources early', 8, [120, 205, 255]);
});

t.mouseClicked(() => {
	if (!tileset || disposed) {
		return;
	}

	tileset.dispose();
	disposed = true;
});

t.windowResized(() => {
	t.resizeCanvas(window.innerWidth, window.innerHeight);
});

@codex{ai-generated}Replace it with your own sketch, claim the credit, and climb the leaderboard.↗ View sketch on GitHub

Overrides

Disposable.dispose

conversion

Classes

Interfaces

Type Aliases

errors

Enumerations

Classes

filters

Classes

Interfaces

Type Aliases

fonts

Classes

Interfaces

Type Aliases

input

Namespaces

gamepad

keyboard

mouse

touch

Type Aliases

Variables

layering

Classes

Interfaces

Variables

loading

Classes

Interfaces

Type Aliases

media

Classes

plugins

Interfaces

Type Aliases

Quick Actions

Class: TextmodeTileset ​

Extends ​

Implements ​

Accessors ​

cellDimensions ​

Get Signature ​

Returns ​

Example ​

Implementation of ​

cellHeight ​

Get Signature ​

Returns ​

Example ​

Implementation of ​

cellWidth ​

Get Signature ​

Returns ​

Example ​

Implementation of ​

characterMap ​

Get Signature ​

Returns ​

Example ​

Implementation of ​

characters ​

Get Signature ​

Returns ​

Example ​

Implementation of ​

columns ​

Get Signature ​

Returns ​

Example ​

Implementation of ​

fontFramebuffer ​

Get Signature ​

Returns ​

Example ​

fontSize ​

Get Signature ​

Returns ​

Example ​

framebuffer ​

Class: TextmodeTileset

Extends

Implements

Accessors

cellDimensions

Get Signature

Returns

Example

Implementation of

cellHeight

Get Signature

Returns

Example

Implementation of

cellWidth

Get Signature

Returns

Example

Implementation of

characterMap

Get Signature

Returns

Example

Implementation of

characters

Get Signature

Returns

Example

Implementation of

columns

Get Signature

Returns

Example

Implementation of

fontFramebuffer

Get Signature

Returns

Example

fontSize

Get Signature

Returns

Example

framebuffer

Get Signature

Returns

Example

Implementation of

maxGlyphDimensions

Get Signature

Returns

Example

nativeCellDimensions

Get Signature

Returns

Example

rows

Get Signature

Returns

Example

Implementation of

textureColumns

Get Signature

Returns

Example

textureRows

Get Signature

Returns

Example

Methods

dispose()

Returns

Example

Overrides