Render all frames of a sprite sheet in different places at the same time?

[Rixarn]

Hi,

 

I have a image file with a 'box drawing' with dimensions 96x96 pixels. I want to be able to 'draw' boxes of customizable size using each of its frames. So for example, render a box in sizes that are multiple of 32 (minimum 64x64 pixels with only the 'corner' frames). 

 

In other words, I want to use the same texture and render different frames of it at the same time in different positions of the screen. I don't think this qualifies as a tile map, but I'm a newbie here so.. 

 

Thanks in advance

[Rixarn]

As far as I understand, the way the engine is made is for you to not worry about the render method. Right now this is my approach, but I consider it suboptimal, inelegant and ugly:

function updateSpriteBox(sprite_array,x,y,w,h){  // Draw Corners  var index = 0;  // Top left corner  sprite_array[index].x = x;  sprite_array[index].y = y;  sprite_array[index].visible = true;  sprite_array[index].frame = 0;  index = index + 1;  // Top Right corner  sprite_array[index].x = x + sprite_array[index].width * (w + 1);  sprite_array[index].y = y;  sprite_array[index].visible = true;  sprite_array[index].frame = 2;  index = index + 1;  // Mid top & bottom Frames  for(i = 1; i <= w; i++){    sprite_array[index].x = x + sprite_array[index].width * i;    sprite_array[index].y = y;    sprite_array[index].visible = true;    sprite_array[index].frame = 1;    index = index + 1;    sprite_array[index].x = x + sprite_array[index].width * i;    sprite_array[index].y = y + sprite_array[index].height * (h + 1);    sprite_array[index].visible = true;    sprite_array[index].frame = 7;    index = index + 1;  }  // Mid Left & right Frames  for(i = 1; i <= h; i++){    sprite_array[index].x = x;    sprite_array[index].y = y + sprite_array[index].height * i;    sprite_array[index].visible = true;    sprite_array[index].frame = 3;    index = index + 1;    sprite_array[index].x = x + sprite_array[index].width * (w + 1);    sprite_array[index].y = y + sprite_array[index].height * i;    sprite_array[index].visible = true;    sprite_array[index].frame = 5;    index = index + 1;  }  // Center frames  for(i = 1; i <= w; i++){    for(j = 1; j <= h; j++){      sprite_array[index].x = x + sprite_array[index].width * i;      sprite_array[index].y = y + sprite_array[index].height * j;      sprite_array[index].visible = true;      sprite_array[index].frame = 4;      index = index + 1;    }  }  // Bottom Left corner  sprite_array[index].x = x;  sprite_array[index].y = y + sprite_array[index].height * (h + 1);  sprite_array[index].visible = true;  sprite_array[index].frame = 6;  index = index + 1;  // Bottom right corner  sprite_array[index].x = x + sprite_array[index].width * (w+1);  sprite_array[index].y = y + sprite_array[index].height * (h+1);  sprite_array[index].visible = true;  sprite_array[index].frame = 8;}

I need to define the size of the array in advance and it holds an array of sprites that have the same texture. Until I find something better, I'll have to use this ugly piece of code.