Large amounts of textures, a good way to store them?

Programming Questions

gordoncsa

Large amounts of textures, a good way to store them?

in Programming Questions • 3 years ago

So I'm making an RPG game using single images on polygons for the graphics (think Doom with no animation ;) ). The graphic images I'm using are 32*32 pixels each arranged in large grids. My main problem right now is that at that size, they become too blurry when rendered to polygons 400 pixels high. For this reason I'm scaling up their size when I load them. 2X is not enough, but when I try scaling 3X I get an out of memory error, and garbage collection every Nth time doesn't help. This is odd since all of the images only come out to 724 kilobytes (so shouldn't that only be about 6mb when scaled?) So my first question:
Is there a way to increase resolution of a polygon without having to just increase the size of the image?

Currently, I'm working on a level editor for it, which is why I need all the images loaded at once. In the game itself I'll have a more intelligent way to only load the images I need for that level.
Another thing I'm not sure of is how to store them. Right now I'm splitting them all up into an array holding each 32*32 (or now 64*64 or 96*96) tile. So my second question:
Would it be helpful or harmful to just store them in their unscaled grid form, and then each time I texture a polygon, get() the part I need and scale it, then replace it with the next one? I'm just not sure how expensive get() and suchlike are.

Replies(7)

owaunandr..

Re: Large amounts of textures, a good way to store them?

3 years ago

Processing never fails to surprise me with it's power. I have found that Processing's core strength is it's pixel array.

You can store whatever you like in it. It's for pixels, but you can refer to it at any given instance.

For your technique, one thing you can do is create a matte pixel array and then one large PImage (preferably a createImage(w,h,ARGB)

from then you can create the tiles each. Once you are are ready to scale, use vertices to shape.

This method you can stretch the the image in any proportion, leaving the image in its original dimensions where as the vertex is what manipulates the scale.

If you need a code example, I can post one.

gordoncsa

Re: Large amounts of textures, a good way to store them?

3 years ago

Bit confused, would love to see a code example of what you're saying.
Sounds like you're suggesting staying with fewer images (or just one) and accessing the part I want through the UV controls in the vertex command?

quarks

Re: Re: Large amounts of textures, a good way to store them?

3 years ago

You say that you are running out of memory but that the images are only coming out to 724kB.

The problem could be that you are loading the same image multiple times (once for each tile) for instance the following code loads the file twice resulting in double the memory used.

image1 = loadImage("anImage.png");
image2 = loadImage("anImage.png");

The solution is to load the image once and 'share' it among the tiles.

I have used this technique in the Shapes3D library if this is your problem then in your sketch create a new Tab called Textures.java (case sensitive and needs the .java) and copy the code below into it.

import java.util.HashMap;

import processing.core.PApplet;
import processing.core.PImage;

/**
* This class is used to load bitmap files and create images. <br>
*
* Although there maybe multiple requests for a particular bitmap file only
* one PImage is created for each file.
*
* @author Peter Lager
*
*/
public class Textures {

    private static HashMap<String, PImage> textures = new HashMap<String, PImage>();

    /**
    * Load an bitmap file return a reference to the PImage created.
    *
    * @param app
    * @param filename
    * @return null if the file does not exist else the PImage object
    */
    public static PImage loadImage(PApplet app, String filename){
        if(textures.containsKey(filename)){
            return textures.get(filename);
        }
        PImage image = app.loadImage(filename);
        if(image != null){
            textures.put(filename, image);
        }
        else
            PApplet.println("Unable to load image from file '" + filename+"'");
        return image;
    }

    /**
    * Load images from multiple files
    * @param app
    * @param filename an array of filenames
    * @return an array of images
    */
    public static PImage[] loadImage(PApplet app, String[] filename){
        PImage[] images = new PImage[filename.length];
        for(int i = 0; i < images.length; i++)
            images[i] = loadImage(app, filename[i]);
        return images;
    }

    /**
    * Make multiple images from a given image.
    *
    * @param app
    * @param img the tiled image
    * @param nCols number of tiles across
    * @param nRows number of tiles down
    * @return an array of images (tiles)
    */
    public static PImage[][] makeTiles(PApplet app, PImage img, int nCols, int nRows){
        PImage[][] imageTiles = new PImage[nCols][nRows];
        int tileW = img.width / nCols;
        int tileH = img.height / nRows;
        for(int y = 0; y < nRows; y++){
            for(int x = 0; x < nCols; x++){
                imageTiles[x][y] = app.createImage(tileW, tileH, PApplet.ARGB);
                imageTiles[x][y].copy(img, x * tileW, y * tileH, tileW, tileH, 0, 0, tileW, tileH);
            }
        }
        return imageTiles;
    }
}

To load the images now use

image1 = Textures.loadImage(this, "anImage.png");
image2 = Textures.loadImage(this, "anImage.png");

image1 and image2 now share the bitmap data so reducing memory usage.

kooogy

Re: Large amounts of textures, a good way to store them?

3 years ago

> This is odd since all of the images only come out to 724 kilobytes

the image files? these will be heavily compressed but they'll be expanded and stored internally in processing as a 4 bytes per pixel (one each for red, green, blue and alpha values, plus some overhead for the PImage class itself). which is probably a lot more than you think.

you can change the memory available to processing btw - it's a preference.

owaunandr..

Re: Large amounts of textures, a good way to store them?

3 years ago

I had the same problem with my Bevel 3.0 application.

I stored thousands of images in a PImage [] array and got the error. I had to declare the array each draw loop and so I just use the exact index I needed.

I will post a snippet of the code I mentioned in my first post.

owaunandr..

Re: Large amounts of textures, a good way to store them?

3 years ago

This is just a basic demo, so it does not really showcase of what you can really do with processing. I did this up in like 13 minutes.

Press "0" to "7" to cycle through the algorithmically created images / textures.

Press "c" to use a circle shape

Press "b" to use a box shape

Drag the mouse to change the size

Here is a screenshot

Here is the code

PImage a,b,c,d;
PImage [] pic;
public int w=255;
public int h=255;
public PImage nowimg;
public PImage nowimginv;
public String nowshape = "circle";
void setup(){
size(w,h,P3D);
//smooth();
nowimg = createImage(w,h,ARGB);
nowimginv = createImage(w,h,ARGB);
a= createImage(w,h,ARGB);
b= createImage(w,h,ARGB);
c= createImage(w,h,ARGB);
d = createImage(w,h,ARGB);
pic = new PImage[5];
for (int x=0;x<4;x++){
    pic[x]=createImage(w,h,ARGB);

    for (int _x=0;_x<w;_x++){
      for (int _y=0;_y<h;_y++){
        int pos = _x+w*_y;
        if(x==0)
        {
          color a0 = color (h-_y,_y,w-_x);

          a.set(_x,_y,a0);
          pic[x].pixels[pos]=a0;
        }
        if(x==1)
        {
          color a1 = color (h-_x,_y,_x);

          b.set(_x,_y,a1);
          pic[x].pixels[pos]=a1;
        }
        if(x==2)
        {
          color a2 = color (h-_x,_y-_x,_x-_y);

          c.set(_x,_y,a2);
          pic[x].pixels[pos]=a2;

        }
        if(x==3)
        {
          color a3 = color (w-_x,_x+_y,_x-_y);

          d.set(_x,_y,a3);
          pic[x].pixels[pos]=a3;

        }

      }
    }

}

arraycopy(pic[0].pixels,nowimg.pixels);
arraycopy(pic[0].pixels,nowimginv.pixels);
nowimginv.filter(INVERT);
}
public int xsize=25;
void draw(){
image(nowimg,0,0);
if (nowshape=="circle"){
    beginShape();
    noStroke();
    texture(nowimginv);
    for (float z=0;z<6.2;z+=.1){

      circle((float)mouseX,(float)mouseY,z,xsize);
    }
    endShape(CLOSE);

}

if (nowshape=="box"){
    beginShape();
    texture(nowimginv);
    float _mx = (float)mouseX;
    float _my = (float)mouseY;
   // if (_mx<w-xsize && _my<h-xsize){
      vertex(_mx,_my,0,_my,_my);
      vertex(_mx+xsize,_my,0,_mx+xsize,_my);
      vertex(_mx+xsize,_my+xsize,0,_mx+xsize,_my+xsize);
      vertex(_mx,_my+xsize,0,_mx,_my+xsize);
// }

    endShape();

}
}

void keyPressed(){
if (key=='0')arraycopy(pic[0].pixels,nowimg.pixels);
if (key=='1')arraycopy(pic[1].pixels,nowimg.pixels);
if (key=='2')arraycopy(pic[2].pixels,nowimg.pixels);
if (key=='3')arraycopy(pic[3].pixels,nowimg.pixels);
if (key=='4')arraycopy(a.pixels,nowimg.pixels);
if (key=='5')arraycopy(b.pixels,nowimg.pixels);
if (key=='6')arraycopy(c.pixels,nowimg.pixels);
if (key=='7')arraycopy(d.pixels,nowimg.pixels);
arraycopy(nowimg.pixels,nowimginv.pixels);
nowimginv.filter(INVERT);

if (key=='c')nowshape = "circle";
if (key=='b')nowshape = "box";

}

void mouseDragged(){

if (mouseX>3){
    xsize= mouseX;
}
}

void circle(float startx,float starty, float angle,float distance){

float endx = startx + cos(angle) * distance;
float endy = starty + sin(angle) * distance;
stroke(startx,endx);
vertex(endx,endy,0,endx,endy);
}

gordoncsa

Re: Large amounts of textures, a good way to store them?

3 years ago

First of all, I have found a solution to this. :)

@ quarks. While I have indeed had the problem you'd described before, It wasn't that in this case. I had been loading several large images and cutting them up, thus leading to what I'm assuming is the issue that Kooogy described.

I fixed it by trying what I'd said above, (and I think Owaunandrew was describing) where I would just cut out the part of the large texture I need for each polygon and it seems to be working fine speed wise so far (I haven't given it thousands of polygons or anything yet).

Top Reply