Implement spritebatch properly.

This commit is contained in:
2026-03-22 09:13:42 -05:00
parent 66ebcb1608
commit ca0e9fc3b2
19 changed files with 205 additions and 142 deletions

View File

@@ -247,13 +247,13 @@
// Draw red grid lines for tile boundaries
ctx.strokeStyle = 'rgba(255,0,0,1)';
for (let x = v.scaledTileWidth; x < elOutputPreview.width; x += v.scaledTileWidth) {
for(let x = v.scaledTileWidth; x < elOutputPreview.width; x += v.scaledTileWidth) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, elOutputPreview.height);
ctx.stroke();
}
for (let y = v.scaledTileHeight; y < elOutputPreview.height; y += v.scaledTileHeight) {
for(let y = v.scaledTileHeight; y < elOutputPreview.height; y += v.scaledTileHeight) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(elOutputPreview.width, y);
@@ -289,7 +289,7 @@
btnBackgroundGreen.addEventListener('click', () => document.body.style.background = 'green');
elDefineBySize.addEventListener('change', () => {
if (elDefineBySize.checked) {
if(elDefineBySize.checked) {
elTileSizes.style.display = '';
elTileCounts.style.display = 'none';
}
@@ -297,7 +297,7 @@
});
elDefineByCount.addEventListener('change', () => {
if (elDefineByCount.checked) {
if(elDefineByCount.checked) {
elTileSizes.style.display = 'none';
elTileCounts.style.display = '';
}
@@ -332,7 +332,7 @@
elOutputError.style.display = 'none';
pixels = null;
if (!elFileInput.files.length) {
if(!elFileInput.files.length) {
elOutputError.textContent = 'No file selected';
elOutputError.style.display = 'block';
return;
@@ -340,18 +340,18 @@
const file = elFileInput.files[0];
if (file.name.endsWith('.dpt')) {
if(file.name.endsWith('.dpt')) {
// Load DPT file
const reader = new FileReader();
reader.onload = () => {
const arrayBuffer = reader.result;
const data = new Uint8Array(arrayBuffer);
if (data[0] !== 'D'.charCodeAt(0) || data[1] !== 'P'.charCodeAt(0) || data[2] !== 'T'.charCodeAt(0)) {
if(data[0] !== 'D'.charCodeAt(0) || data[1] !== 'P'.charCodeAt(0) || data[2] !== 'T'.charCodeAt(0)) {
elOutputError.textContent = 'Invalid DPT file';
elOutputError.style.display = 'block';
return;
} else if (data[3] !== 0x01) {
} else if(data[3] !== 0x01) {
elOutputError.textContent = 'Unsupported DPT version';
elOutputError.style.display = 'block';
return;
@@ -381,15 +381,15 @@
}
const uniqueIndexes = [];
for (let i = 0; i < width * height; i++) {
for(let i = 0; i < width * height; i++) {
const colorIndex = data[12 + i];
if (!uniqueIndexes.includes(colorIndex)) {
if(!uniqueIndexes.includes(colorIndex)) {
uniqueIndexes.push(colorIndex);
}
}
const adhocPalette = [];
for (let i = 0; i < uniqueIndexes.length; i++) {
for(let i = 0; i < uniqueIndexes.length; i++) {
const index = uniqueIndexes[i];
// Get the most different possible color for this index
const color = [
@@ -402,7 +402,7 @@
}
pixels = new Uint8Array(width * height * 4);
for (let i = 0; i < width * height; i++) {
for(let i = 0; i < width * height; i++) {
const colorIndex = data[12 + i];
const color = adhocPalette[colorIndex];
pixels[i * 4] = color[0];
@@ -487,13 +487,13 @@
input.accept = '.dtf';
input.addEventListener('change', (e) => {
const files = e?.target?.files;
if (!files || !files.length || !files[0]) {
if(!files || !files.length || !files[0]) {
alert('No file selected');
return;
}
const file = files[0];
if (!file.name.endsWith('.dtf')) {
if(!file.name.endsWith('.dtf')) {
alert('Invalid file type. Please select a .dtf file.');
return;
}
@@ -502,12 +502,12 @@
reader.onload = () => {
const arrayBuffer = reader.result;
const data = new Uint8Array(arrayBuffer);
if (data[0] !== 'D'.charCodeAt(0) || data[1] !== 'T'.charCodeAt(0) || data[2] !== 'F'.charCodeAt(0)) {
if(data[0] !== 'D'.charCodeAt(0) || data[1] !== 'T'.charCodeAt(0) || data[2] !== 'F'.charCodeAt(0)) {
alert('Invalid DTF file');
return;
}
if (data[3] !== 0x00) {
if(data[3] !== 0x00) {
alert('Unsupported DTF version');
return;
}