Test text rendering
This commit is contained in:
417
tools/texture-creator.html
Normal file
417
tools/texture-creator.html
Normal 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>
|
||||
Reference in New Issue
Block a user