Can I make & color-cycle a palettized image in memory ?

[brucejs777]

Hi,
Can I make & color-cycle a palettized image in memory ? I want to build up an image computationally, not from a file. Then select one of several color palettes, and optionally color-cycle the image. The image would be a 2D array of integer pixels, and each of those 'color values' is an index into the 1D color palette array, selecting a color for that pixel. Then love2d would be told to draw the image in it's draw callback.
I 'm having trouble finding enough details in the love2d docs about this. It seems like the image object would by the thing to use. I did try loading a file into an image and then it displayed using the draw function in the draw callback. But I don't see a way to build the image myself in memory using a palette indexing scheme.
It not possible as stated, perhaps a shader would do it ? I'v no experience in shaders though.
I'm just getting started in love2d and Lua (but have programmed in C & assembler a lot), just discovering it this past week or so.

[MasterLee]

Löve has no nativ support for indexed images, so you are right you have to use an shader. That is definitely possible i did this before.

[zorg]

What you want is an ImageData, that's what you can edit, then you need to make an Image out of that, using love.graphics.newImage(yourimagedata); as for color cycling, as MasterLee said above, you need a shader.

[brucejs777]

Thank you for the replies.
I don't see any information on the internals of the ImageData structure, nor any calls to individual members like the palette. There is a format enum and PNG is one format. PNG as a standard does support indexed color modes. But I don't see any indication of actual implemented support for that in the Image and imageData docs on the wiki. The PNG support may only be for files and not exposed to the user. But if that is true, what IS the format of the image in memory ? Is there another source of detailed docs for the love2d functions and data structures ?
Also, IF love2d has native support for the indexed color mode images, then why would I need a shader ? I'd just create the palettized image in the right format in memory and send it to the draw function. The idea is that I can swap a whole range of colors by changing only the color table of the image, or even the index to it, if supported. I'm not saying I don't need a shader, just that I would not need one if the indexed color was supported in the image manipulation classes.

[Nixola]

LÖVE has native support for indexed images meaning that it can load them correctly; it doesn't keep the index data in memory, it only converts them to RGB. If you need to swap colours you can either use ImageDatas to manually modify the image, thus possibly ending up with several copies which differ by colour, or use Shaders to dynamically choose colours from a palette (which, itself, should be an image or a canvas; I did an implementation of this by using a canvas as a palette, drawing to the canvas when I need to change colours.).
EDIT: This is my shader. It only uses the red channel value as index, indexing a 1x256 canvas. If you use a canvas you only need to send it once and draw to it, whereas if you use different images as different palettes you'll need to send the palette each time you want to change it.

Code: Select all

hader = love.graphics.newShader [[
    extern Image palette;

    vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords) { 
      vec4 tex_color = texture2D(texture, texture_coords);
      vec2 index = vec2(tex_color.r, 0); //get color based on red
      return texture2D(palette, index);
    }]]

[brucejs777]

Thanks Nixola; I'll have to go study shaders and then analyze this further. I'm looking at this tutorial: http://blogs.love2d.org/content/beginners-guide-shaders.

[MasterLee]

Sorry there was an type i would say no native support.
You can create image data like that:

Code: Select all

    local data=love.image.newImageData(width,height)
    local image=love.graphics.newImage(data)
    image:setWrap("clamp","clamp")
    image:setFilter("nearest","nearest") 

now when you wan't to write an pixel to image data use for example

Code: Select all

    local ptr=ffi.cast('unsigned char*',data:getPointer())
    ptr[(x+y*width)*4]=red
    ptr[(x+y*width)*4+1]=green
    ptr[(x+y*width)*4+2]=blue
    ptr[(x+y*width)*4+3]=alpha
      image:refresh()

or for example when width and height is 256 an you wan't to write into the whole panel but only the red component from some table

Code: Select all

    local ptr=ffi.cast('unsigned char*',data:getPointer())
        for y=0,255 do
            for x=0,255 do
              ptr[0]=tiles[y][x]
              ptr=ptr+4
            end
        end
      image:refresh()

now you could the shader mentioned above to render it with color lut.

[brucejs777]

Thanks MasterLee, I'll look at this. But for now, it's off to work !