YourWishes/dusk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Test text rendering

Browse Source
This commit is contained in:
Dominic Masters
2026-03-29 10:15:22 -05:00
parent ea898da6c2
commit 1c5e50cc4d
10 changed files with 503 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/scene/minesweeper.lua
View File

@@ -63,7 +63,7 @@ function cellDraw(x, y, type)
slice = cellSliceDisabled
end
spriteBatchPush(textureCell,
spriteBatchPush(
x, y,
x + tilesetCell.tileWidth, y + tilesetCell.tileHeight,
colorWhite(),
@@ -185,7 +185,8 @@ end
function sceneRender()
-- Update camera
camera.bottom = screenGetHeight()
camera.bottom = 0
camera.top = screenGetHeight()
camera.right = screenGetWidth()
shaderBind(SHADER_UNLIT)
@@ -194,11 +195,13 @@ function sceneRender()
view = cameraGetViewMatrix(camera)
shaderSetMatrix(SHADER_UNLIT, SHADER_UNLIT_VIEW, view)
spriteBatchPush(
x, y,
x + 32, y + 32,
colorWhite()
)
textDraw(10, 10, "Hello World\nHow are you?")
-- spriteBatchPush(
-- x, y,
-- x + 32, y + 32,
-- colorWhite()
-- )
-- Update mouse position
-- if INPUT_POINTER then

BIN
assets/ui/minogram.dpt
View File

Binary file not shown.

BIN
assets/ui/minogram.dtf
View File

Binary file not shown.

BIN
assets/ui/minogram.dtx Normal file
View File

Binary file not shown.

26
src/dusk/asset/assettype.h
View File

@@ -19,12 +19,9 @@ typedef enum {
ASSET_TYPE_NULL,
ASSET_TYPE_TEXTURE,
// ASSET_TYPE_PALETTE,
ASSET_TYPE_TILESET,
ASSET_TYPE_LANGUAGE,
ASSET_TYPE_SCRIPT,
ASSET_TYPE_MAP,
ASSET_TYPE_MAP_CHUNK,
ASSET_TYPE_COUNT,
} assettype_t;
@@ -60,21 +57,14 @@ static const assettypedef_t ASSET_TYPE_DEFINITIONS[ASSET_TYPE_COUNT] = {
},
[ASSET_TYPE_TEXTURE] = {
.extension = "dpt",
.extension = "DTX",
.loadStrategy = ASSET_LOAD_STRAT_ENTIRE,
.dataSize = sizeof(assettexture_t),
.entire = assetTextureLoad
},
// [ASSET_TYPE_PALETTE] = {
// .extension = "dpf",
// .loadStrategy = ASSET_LOAD_STRAT_ENTIRE,
// .dataSize = sizeof(palette_t),
// .entire = assetPaletteLoad
// },
[ASSET_TYPE_TILESET] = {
.extension = "dtf",
.extension = "DTF",
.loadStrategy = ASSET_LOAD_STRAT_ENTIRE,
.dataSize = sizeof(assettileset_t),
.entire = assetTilesetLoad
@@ -91,16 +81,4 @@ static const assettypedef_t ASSET_TYPE_DEFINITIONS[ASSET_TYPE_COUNT] = {
.loadStrategy = ASSET_LOAD_STRAT_CUSTOM,
.custom = assetScriptHandler
},
// [ASSET_TYPE_MAP] = {
// .extension = "DMF",
// .loadStrategy = ASSET_LOAD_STRAT_CUSTOM,
// .custom = assetMapHandler
// },
// [ASSET_TYPE_MAP_CHUNK] = {
// .extension = "DMC",
// .loadStrategy = ASSET_LOAD_STRAT_CUSTOM,
// .custom = assetMapChunkHandler
// },
};

97
src/dusk/asset/type/assettexture.c
View File

@@ -12,50 +12,67 @@
#include "util/endian.h"
errorret_t assetTextureLoad(assetentire_t entire) {
// assertNotNull(entire.data, "Data pointer cannot be NULL.");
// assertNotNull(entire.output, "Output pointer cannot be NULL.");
assertNotNull(entire.data, "Data pointer cannot be NULL.");
assertNotNull(entire.output, "Output pointer cannot be NULL.");
// assettexture_t *assetData = (assettexture_t *)entire.data;
// texture_t *texture = (texture_t *)entire.output;
assettexture_t *assetData = (assettexture_t *)entire.data;
texture_t *texture = (texture_t *)entire.output;
// // Read header and version (first 4 bytes)
// if(
// assetData->header[0] != 'D' ||
// assetData->header[1] != 'P' ||
// assetData->header[2] != 'T'
// ) {
// errorThrow("Invalid texture header");
// }
// Read header and version (first 4 bytes)
if(
assetData->header[0] != 'D' ||
assetData->header[1] != 'T' ||
assetData->header[2] != 'X'
) {
errorThrow("Invalid texture header");
}
// // Version (can only be 1 atm)
// if(assetData->version != 0x01) {
// errorThrow("Unsupported texture version");
// }
// Version (can only be 1 atm)
if(assetData->version != 0x01) {
errorThrow("Unsupported texture version");
}
// // Fix endian
// assetData->width = endianLittleToHost32(assetData->width);
// assetData->height = endianLittleToHost32(assetData->height);
// Fix endian
assetData->width = endianLittleToHost32(assetData->width);
assetData->height = endianLittleToHost32(assetData->height);
// // Check dimensions.
// if(
// assetData->width == 0 || assetData->width > ASSET_TEXTURE_WIDTH_MAX ||
// assetData->height == 0 || assetData->height > ASSET_TEXTURE_HEIGHT_MAX
// ) {
// errorThrow("Invalid texture dimensions");
// }
// textureInit(
// texture,
// assetData->width,
// assetData->height,
// TEXTURE_FORMAT_PALETTE,
// (texturedata_t){
// .paletted = {
// .indices = NULL,
// .palette = NULL
// }
// }
// );
// Check dimensions.
if(
assetData->width == 0 || assetData->width > ASSET_TEXTURE_WIDTH_MAX ||
assetData->height == 0 || assetData->height > ASSET_TEXTURE_HEIGHT_MAX
) {
errorThrow("Invalid texture dimensions");
}
// errorOk();
// Validate format
textureformat_t format;
texturedata_t data;
switch(assetData->type) {
case 0x00: // RGBA8888
format = TEXTURE_FORMAT_RGBA;
data.rgbaColors = (color_t *)assetData->data;
break;
// case 0x01:
// format = TEXTURE_FORMAT_RGB;
// break;
// case 0x02:
// format = TEXTURE_FORMAT_RGB565;
// break;
// case 0x03:
// format = TEXTURE_FORMAT_RGB5A3;
// break;
default:
errorThrow("Unsupported texture format");
}
errorChain(textureInit(
texture, assetData->width, assetData->height, format, data
));
errorOk();
}

4
src/dusk/asset/type/assettexture.h
View File

@@ -7,6 +7,7 @@
#pragma once
#include "error/error.h"
#include "display/color.h"
#define ASSET_TEXTURE_WIDTH_MAX 2048
#define ASSET_TEXTURE_HEIGHT_MAX 2048
@@ -20,9 +21,10 @@ typedef struct assetentire_s assetentire_t;
typedef struct {
char_t header[3];
uint8_t version;
uint8_t type;
uint32_t width;
uint32_t height;
uint8_t palette[ASSET_TEXTURE_SIZE_MAX];
uint8_t data[ASSET_TEXTURE_SIZE_MAX * sizeof(color4b_t)];
} assettexture_t;
#pragma pack(pop)

10
src/dusk/display/text/text.c
View File

@@ -11,17 +11,19 @@
#include "display/spritebatch/spritebatch.h"
#include "asset/asset.h"
#include "display/shader/shaderunlit.h"
texture_t DEFAULT_FONT_TEXTURE;
tileset_t DEFAULT_FONT_TILESET;
errorret_t textInit(void) {
// errorChain(assetLoad("ui/minogram.dpt", &DEFAULT_FONT_TEXTURE));
// errorChain(assetLoad("ui/minogram.dtf", &DEFAULT_FONT_TILESET));
errorChain(assetLoad("ui/minogram.dtx", &DEFAULT_FONT_TEXTURE));
errorChain(assetLoad("ui/minogram.dtf", &DEFAULT_FONT_TILESET));
errorOk();
}
errorret_t textDispose(void) {
// errorChain(textureDispose(&DEFAULT_FONT_TEXTURE));
errorChain(textureDispose(&DEFAULT_FONT_TEXTURE));
errorOk();
}
@@ -45,6 +47,8 @@ errorret_t textDrawChar(
vec4 uv;
tilesetTileGetUV(tileset, tileIndex, uv);
errorChain(shaderSetTexture(&SHADER_UNLIT, SHADER_UNLIT_TEXTURE, texture));
errorChain(spriteBatchPush(
// texture,
x, y,

417
tools/texture-creator.html Normal file
View File

@@ -0,0 +1,417 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dusk Tools / Texture Creator</title>
<style type="text/css">
* {
box-sizing: border-box;
}
body {
font-size: 16px;
}
canvas {
image-rendering: pixelated;
}
</style>
</head>
<body>
<h1>Dusk Texture Creator</h1>
<p>
Creates texture files. This will not create palletized textures, use the
palette-indexer.html tool for that. This will instead work for all other
kinds of textures.
</p>
<div>
<div>
<input type="file" data-file-input />
</div>
</div>
<div>
<h2>Settings</h2>
<div>
Texture Format:
<div>
<label>
RGBA
<input type="radio" name="texture-type" value="rgba" />
</label><br />
<label>
RGB
<input type="radio" name="texture-type" value="rgb" />
</label><br />
<label>
RGB565
<input type="radio" name="texture-type" value="rgb565" checked />
</label><br />
<label>
RGB5A3 (Dolphin Only)
<input type="radio" name="texture-type" value="rgb5a3" />
</label><br />
</div>
</div>
<div>
<label for="pad-power-of-two">
Pad to power of two
<input type="checkbox" id="pad-power-of-two" name="pad-power-of-two" checked />
</label>
</div>
</div>
<div>
<h2>Preview</h2>
<div>
<label>
Preview Scale:
<input type="number" value="2" data-preview-scale min="1" step="1" />
</label>
</div>
<div>
<label>
Preview Background:
<button data-page-bg-white>White</button>
<button data-page-bg-transparent>Black</button>
<button data-page-bg-checkerboard>Checkerboard</button>
<button data-page-bg-magenta>Magenta</button>
<button data-page-bg-blue>Blue</button>
<button data-page-bg-green>Green</button>
</label>
</div>
<div>
<canvas data-output-preview style="border:1px solid black;"></canvas>
</div>
<div>
<textarea data-output-information readonly rows="15" style="width: 500px;"></textarea>
</div>
<div>
<button data-download>Download Texture</button>
</div>
</div>
</body>
<script type="text/javascript">
const elFileInput = document.querySelector('[data-file-input]');
const elFileError = document.querySelector('[data-file-error]');
const elPreviewScale = document.querySelector('[data-preview-scale]');
const elOutputPreview = document.querySelector('[data-output-preview]');
const elOutputInformation = document.querySelector('[data-output-information]');
const elTextureType = document.querySelectorAll('input[name="texture-type"]');
const elPadPowerOfTwo = document.querySelector('#pad-power-of-two');
const btnDownload = document.querySelector('[data-download]');
const btnBackgroundWhite = document.querySelector('[data-page-bg-white]');
const btnBackgroundTransparent = document.querySelector('[data-page-bg-transparent]');
const btnBackgroundCheckerboard = document.querySelector('[data-page-bg-checkerboard]');
const btnBackgroundMagenta = document.querySelector('[data-page-bg-magenta]');
const btnBackgroundBlue = document.querySelector('[data-page-bg-blue]');
const btnBackgroundGreen = document.querySelector('[data-page-bg-green]');
let image;
let imageName;
let textureData;
let rawData;
let width, height, paddedWidth, paddedHeight;
// Methods
const nextPowerOfTwo = n => {
if(n <= 0) return 1;
return 2 ** Math.ceil(Math.log2(n));
}
const updatePreview = () => {
if(!image) return;
console.log('Updating preview with image:', image);
const scale = parseInt(elPreviewScale.value) || 1;
const padToPowerOfTwo = elPadPowerOfTwo.checked;
const textureType = Array.from(elTextureType).find(r => r.checked)?.value || 'rgba';
width = image.width;
height = image.height;
let scaledWidth = width * scale;
let scaledHeight = height * scale;
paddedWidth = padToPowerOfTwo ? nextPowerOfTwo(width) : width;
paddedHeight = padToPowerOfTwo ? nextPowerOfTwo(height) : height;
let paddedScaledWidth = paddedWidth * scale;
let paddedScaledHeight = paddedHeight * scale;
const tempCanvas = document.createElement('canvas');
tempCanvas.width = paddedWidth;
tempCanvas.height = paddedHeight;
const tempCtx = tempCanvas.getContext('2d');
tempCtx.imageSmoothingEnabled = false;
tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
tempCtx.drawImage(image, 0, 0, width, height);
const pixels = tempCtx.getImageData(0, 0, paddedWidth, paddedHeight);
let sizeBytes;
let strTextureType = Array.from(elTextureType).find(r => r.checked)?.value || 'rgba';
strTextureType = strTextureType.toLowerCase();
rawData = new Uint8Array(paddedWidth * paddedHeight * 4);
if(strTextureType === 'rgba') {
textureData = new Uint8Array(pixels.data.buffer);
rawData = new Uint8Array(pixels.data.buffer);
sizeBytes = paddedWidth * paddedHeight * 4;
} else if(strTextureType === 'rgb') {
sizeBytes = paddedWidth * paddedHeight * 3;
textureData = new Uint8Array(sizeBytes);
for(let i = 0, j = 0; i < textureData.length; i += 4, j += 3) {
textureData[j] = pixels.data[i]; // R
textureData[j + 1] = pixels.data[i + 1]; // G
textureData[j + 2] = pixels.data[i + 2]; // B
rawData[i] = pixels.data[i]; // R
rawData[i + 1] = pixels.data[i + 1]; // G
rawData[i + 2] = pixels.data[i + 2]; // B
rawData[i + 3] = 255;
}
} else if(strTextureType === 'rgb565') {
sizeBytes = paddedWidth * paddedHeight * 2;
textureData = new Uint8Array(sizeBytes);
let j = 0;
for (let i = 0; i < pixels.data.length; i += 4) {
const r = pixels.data[i];
const g = pixels.data[i + 1];
const b = pixels.data[i + 2];
const value =
((r & 0xf8) << 8) |
((g & 0xfc) << 3) |
(b >> 3);
textureData[j++] = (value >> 8) & 0xff; // high byte
textureData[j++] = value & 0xff; // low byte
}
// Now convert back to RGBA for preview
for(let i = 0, j = 0; i < textureData.length; i += 2, j += 4) {
const value = (textureData[i] << 8) | textureData[i + 1];
const r = (value >> 11) & 0x1f;
const g = (value >> 5) & 0x3f;
const b = value & 0x1f;
rawData[j] = (r << 3) | (r >> 2); // R
rawData[j + 1] = (g << 2) | (g >> 4); // G
rawData[j + 2] = (b << 3) | (b >> 2); // B
rawData[j + 3] = 255; // A
}
} else if(strTextureType === 'rgb5a3') {
sizeBytes = paddedWidth * paddedHeight * 2;
textureData = new Uint8Array(sizeBytes);
let j = 0;
for (let i = 0; i < pixels.data.length; i += 4) {
const r8 = pixels.data[i];
const g8 = pixels.data[i + 1];
const b8 = pixels.data[i + 2];
const a8 = pixels.data[i + 3];
let value;
// Opaque: 1RRRRRGGGGGBBBBB
if (a8 >= 224) {
const r5 = r8 >> 3;
const g5 = g8 >> 3;
const b5 = b8 >> 3;
value =
0x8000 |
(r5 << 10) |
(g5 << 5) |
b5;
} else {
// Transparent/translucent: 0AAARRRRGGGGBBBB
const a3 = a8 >> 5;
const r4 = r8 >> 4;
const g4 = g8 >> 4;
const b4 = b8 >> 4;
value =
(a3 << 12) |
(r4 << 8) |
(g4 << 4) |
b4;
}
textureData[j++] = (value >> 8) & 0xff; // high byte
textureData[j++] = value & 0xff; // low byte
}
// Convert back to RGBA for preview
for (let i = 0, j = 0; i < textureData.length; i += 2, j += 4) {
const value = (textureData[i] << 8) | textureData[i + 1];
if (value & 0x8000) {
// 1RRRRRGGGGGBBBBB
const r5 = (value >> 10) & 0x1f;
const g5 = (value >> 5) & 0x1f;
const b5 = value & 0x1f;
rawData[j] = (r5 << 3) | (r5 >> 2);
rawData[j + 1] = (g5 << 3) | (g5 >> 2);
rawData[j + 2] = (b5 << 3) | (b5 >> 2);
rawData[j + 3] = 255;
} else {
// 0AAARRRRGGGGBBBB
const a3 = (value >> 12) & 0x7;
const r4 = (value >> 8) & 0xf;
const g4 = (value >> 4) & 0xf;
const b4 = value & 0xf;
rawData[j] = (r4 << 4) | r4;
rawData[j + 1] = (g4 << 4) | g4;
rawData[j + 2] = (b4 << 4) | b4;
rawData[j + 3] = (a3 << 5) | (a3 << 2) | (a3 >> 1);
}
}
} else {
return alert('Unsupported texture type selected.');
}
// Write out pixels.
const imageData = new ImageData(new Uint8ClampedArray(rawData.buffer), paddedWidth, paddedHeight);
tempCanvas.width = paddedWidth;
tempCanvas.height = paddedHeight;
const tempCtx2 = tempCanvas.getContext('2d');
tempCtx2.imageSmoothingEnabled = false;
tempCtx2.putImageData(imageData, 0, 0);
elOutputPreview.width = paddedScaledWidth;
elOutputPreview.height = paddedScaledHeight;
const ctx = elOutputPreview.getContext('2d');
ctx.imageSmoothingEnabled = false;
ctx.clearRect(0, 0, elOutputPreview.width, elOutputPreview.height);
ctx.drawImage(tempCanvas, 0, 0, paddedScaledWidth, paddedScaledHeight);
// Output information
elOutputInformation.value = `Original Size: ${width}x${height}\n`;
elOutputInformation.value += `New Size: ${paddedWidth}x${paddedHeight}\n`;
elOutputInformation.value += `Texture Format: ${textureType}\n`;
elOutputInformation.value += `Size: ${sizeBytes} bytes / (${(sizeBytes / 1024).toFixed(2)} KB)\n`;
}
const onFile = async file => {
elFileInput.disabled = true;
console.log('Selected file:', file);
imageName = file.name;
// Load as image
const img = new Image();
img.onload = () => {
image = img;
elFileInput.disabled = false;
updatePreview();
};
img.onerror = () => {
alert('Failed to load image. Please select a valid image file.');
elFileInput.disabled = false;
};
img.src = URL.createObjectURL(file);
}
// Listeners
elFileInput.addEventListener('change', event => {
if(!event.target.files || event.target.files.length <= 0) {
return alert('No file selected.');
}
const file = event.target.files[0];
if(!file.type.startsWith('image/')) {
return alert('Selected file is not an image.');
}
onFile(file);
});
btnBackgroundWhite.addEventListener('click', () => {
document.body.style.background = 'white';
});
btnBackgroundTransparent.addEventListener('click', () => {
document.body.style.background = 'black';
});
btnBackgroundCheckerboard.addEventListener('click', () => {
document.body.style.background = 'repeating-conic-gradient(#ccc 0% 25%, #eee 0% 50%) 50% / 20px 20px';
});
btnBackgroundMagenta.addEventListener('click', () => {
document.body.style.background = 'magenta';
});
btnBackgroundBlue.addEventListener('click', () => {
document.body.style.background = 'blue';
});
btnBackgroundGreen.addEventListener('click', () => {
document.body.style.background = 'green';
});
elPreviewScale.addEventListener('input', () => {
updatePreview();
});
elPadPowerOfTwo.addEventListener('change', () => {
updatePreview();
});
elTextureType.forEach(radio => {
radio.addEventListener('change', () => {
updatePreview();
});
})
btnDownload.addEventListener('click', () => {
if(!image) {
return alert('Please select an image file before downloading.');
}
// DTX, then texture type, then width, then height, then raw data
const dtfHeader = new TextEncoder().encode('DTX');
const versionHeader = new Uint8Array([1]); // Version 1
let strTextureType = Array.from(elTextureType).find(r => r.checked)?.value || 'rgba';
strTextureType = strTextureType.toLowerCase();
let typeHeader;
if(strTextureType === 'rgba') {
typeHeader = new Uint8Array([0]);
} else if(strTextureType === 'rgb') {
typeHeader = new Uint8Array([1]);
} else if(strTextureType === 'rgb565') {
typeHeader = new Uint8Array([2]);
} else if(strTextureType === 'rgb5a3') {
typeHeader = new Uint8Array([3]);
} else {
return alert('Unsupported texture type selected.');
}
const widthBytes = new Uint32Array([ paddedWidth ]);
const heightBytes = new Uint32Array([ paddedHeight ]);
const blob = new Blob([dtfHeader, versionHeader, typeHeader, widthBytes, heightBytes, textureData], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${imageName.replace(/\.[^/.]+$/, "")}.dtx`;
a.click();
URL.revokeObjectURL(url);
});
btnBackgroundCheckerboard.click();
</script>
</html>

13
tools/tileset-creator.html
View File

@@ -151,23 +151,24 @@
const getValues = () => {
if(!pixels) return null;
const right = parseInt(elRight.value) || 0;
const bottom = parseInt(elBottom.value) || 0;
let tileWidth, tileHeight, columnCount, rowCount;
if(elDefineBySize.checked) {
console.log('Defining by size');
tileWidth = parseInt(elTileWidth.value) || 0;
tileHeight = parseInt(elTileHeight.value) || 0;
columnCount = Math.floor(imageWidth / tileWidth);
rowCount = Math.floor(imageHeight / tileHeight);
columnCount = Math.floor((imageWidth - right) / tileWidth);
rowCount = Math.floor((imageHeight - bottom) / tileHeight);
} else {
console.log('Defining by count');
columnCount = parseInt(elColumnCount.value) || 0;
rowCount = parseInt(elRowCount.value) || 0;
tileWidth = Math.floor(imageWidth / columnCount);
tileHeight = Math.floor(imageHeight / rowCount);
tileWidth = Math.floor((imageWidth - right) / columnCount);
tileHeight = Math.floor((imageHeight - bottom) / rowCount);
}
const right = parseInt(elRight.value) || 0;
const bottom = parseInt(elBottom.value) || 0;
const scale = parseInt(elScale.value) || 1;
const scaledWidth = imageWidth * scale;