417 lines
14 KiB
HTML
417 lines
14 KiB
HTML
<!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> |