Test text rendering

assets/scene/minesweeper.lua

@@ -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(
+  textDraw(10, 10, "Hello World\nHow are you?")
-    x, y,
+
-    x + 32, y + 32,
+  -- spriteBatchPush(
-    colorWhite()
+  --   x, y,
-  )
+  --   x + 32, y + 32,
+  --   colorWhite()
+  -- )
 
   -- Update mouse position
   -- if INPUT_POINTER then

src/dusk/asset/assettype.h

@@ -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
-  // },
 };

src/dusk/asset/type/assettexture.c

@@ -12,50 +12,67 @@
 #include "util/endian.h"
 
 errorret_t assetTextureLoad(assetentire_t entire) {
-  // assertNotNull(entire.data, "Data pointer cannot be NULL.");
+  assertNotNull(entire.data, "Data pointer cannot be NULL.");
-  // assertNotNull(entire.output, "Output pointer cannot be NULL.");
+  assertNotNull(entire.output, "Output pointer cannot be NULL.");
 
-  // assettexture_t *assetData = (assettexture_t *)entire.data;
+  assettexture_t *assetData = (assettexture_t *)entire.data;
-  // texture_t *texture = (texture_t *)entire.output;
+  texture_t *texture = (texture_t *)entire.output;
 
-  // // Read header and version (first 4 bytes)
+  // Read header and version (first 4 bytes)
-  // if(
+  if(
-  //   assetData->header[0] != 'D' || 
+    assetData->header[0] != 'D' || 
-  //   assetData->header[1] != 'P' ||
+    assetData->header[1] != 'T' ||
-  //   assetData->header[2] != 'T'
+    assetData->header[2] != 'X'
-  // ) {
+  ) {
-  //   errorThrow("Invalid texture header");
+    errorThrow("Invalid texture header");
-  // }
+  }
   
-  // // Version (can only be 1 atm)
+  // Version (can only be 1 atm)
-  // if(assetData->version != 0x01) {
+  if(assetData->version != 0x01) {
-  //   errorThrow("Unsupported texture version");
+    errorThrow("Unsupported texture version");
-  // }
+  }
 
-  // // Fix endian
+  // Fix endian
-  // assetData->width = endianLittleToHost32(assetData->width);
+  assetData->width = endianLittleToHost32(assetData->width);
-  // assetData->height = endianLittleToHost32(assetData->height);
+  assetData->height = endianLittleToHost32(assetData->height);
 
-  // // Check dimensions.
+  // Check dimensions.
-  // if(
+  if(
-  //   assetData->width == 0 || assetData->width > ASSET_TEXTURE_WIDTH_MAX ||
+    assetData->width == 0 || assetData->width > ASSET_TEXTURE_WIDTH_MAX ||
-  //   assetData->height == 0 || assetData->height > ASSET_TEXTURE_HEIGHT_MAX
+    assetData->height == 0 || assetData->height > ASSET_TEXTURE_HEIGHT_MAX
-  // ) {
+  ) {
-  //   errorThrow("Invalid texture dimensions");
+    errorThrow("Invalid texture dimensions");
-  // }
+  }
 
-  // textureInit(
+  // Validate format
-  //   texture,
+  textureformat_t format;
-  //   assetData->width,
+  texturedata_t data;
-  //   assetData->height,
-  //   TEXTURE_FORMAT_PALETTE,
-  //   (texturedata_t){
-  //     .paletted = {
-  //       .indices = NULL,
-  //       .palette = NULL
-  //     }
-  //   }
-  // );
 
-  // errorOk();
+  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();
 }

src/dusk/asset/type/assettexture.h

@@ -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)
 

src/dusk/display/text/text.c

@@ -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.dtx", &DEFAULT_FONT_TEXTURE));
-  // errorChain(assetLoad("ui/minogram.dtf", &DEFAULT_FONT_TILESET));
+  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,

tools/texture-creator.html

@@ -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>

tools/tileset-creator.html

@@ -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);
+        columnCount = Math.floor((imageWidth - right) / tileWidth);
-        rowCount = Math.floor(imageHeight / tileHeight);
+        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);
+        tileWidth = Math.floor((imageWidth - right) / columnCount);
-        tileHeight = Math.floor(imageHeight / rowCount);
+        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;