Customize an image

[Discord]

I am trying to determine the easiest way to do this.

I would like to display an image that the user can customize through some options off to the side. I wanted to have parts of the overall image to be customizable by color, and appearance – for instance imagine a character wearing a hat. You could choose for it to be a fedora, baseball cap, cowboy hat, or whatever is available, and then you would also be able to change the color of the hat. Now, I imagine that using a Vector Image would be the easiest way to do this because including a large number of graphics with the game would probably make it much harder. I would have to have a different graphic for every color of every hat, not to mention that limits the user to the colors that I decided to create graphics for. Not what I want.

I’m not sure how I could accomplish this, but I have a few ideas.
Could create vector images in a program like Microsoft Expression Studio 4, for instance a bunch of hats with no color, and then I could change the color in Love?
I would HATE to have to figure out how to draw the objects in the game itself, but if I had to go that route, is there an easier way to do it? Anyone know of any Tutorials?
The idea is to allow the player to create a Profile pic/Character portrait that would display whenever they talk to another player, but they must be allowed to have a fully customizable appearance. This is a must for my game.
Thanks,
~D

[micha]

If the individual objects really only have one color each (or shades of one color) then you can simple make a (pixel) image in white and then draw it colored using

Code: Select all

love.graphics.setColor(r,g,b)
love.graphics.draw(object,x,y)

If I am not mistaken, then the color you set gets multiplied onto all following drawing calls.

If you have only parts of the player that you want to color, then you have to make separate images and change the color in between every time.

And if you want to have multiple shades of the color in the image, then draw in original image not only in white but also in different shades of gray.

[Lafolie]

It sounds like you want to create composited images for the player graphics. Along with the dynamic colour settings suggested by micha you may want to create an image that is made up of several component images. For example, you could use a base sprite for the portrait and overlay the appropriate hat sprite. You could structure this in several different ways using separate images, quads from a sheet, spritebatches, or even using a canvas to raster or 'merge' the two into a single drawable object.

With the exception of pre-rendering every possible combination you will have to store some data that tells your game where to draw the hats. However, you can make this very easy by using a standard image size for all the hats or by drawing the hats in such a way they 'fit' onto the player sprite at the same offset. So if you have all the hats, perhaps laid out in sheet/atlas according to a grid, you can simply generate quads/load images and draw the appropriate quad/image at a generic offset. You can also include the colour selection in your draw calls. This way you can generate the required offsets based on the height of the sprites.

Assuming that the base of each hat should be 8 pixels from the top of the player sprite:

Code: Select all

player = {}
hat = love.graphics.newImage("topHat.png")

function player:load()
    self.img = love.graphics.newImg("player.png")
    self.x, self.y = 1, 1
    self.color = {255, 255, 255, 255}
end

function player:setHat(hat, color)
    self.hat = hat
    self.hatColor = color
    self.hatOffset = hat:getWidth() + 8 --hat overlaps by 8 pixels
end

function player:draw()
    love.graphics.setColor(self.color)
    love.graphics.draw(self.img, self.x, self.x)
    if self.hat then
        love.graphics.setColor(self.hatColor)
        love.graphics.draw(self.hat, self.x, self.y - self.hatOffset)
    end
end

That's a sort of rudimentary example that you could implement a lot better, but it demonstrates a way of structuring your player object to incorporate different graphical elements.

[Discord]

Thank you Micha, Lafolie, for your quick responses. I love the suggestions, I had forgotten about spacing the pictures so that they overlay properly, I had learned a practice like that years ago. That should be easy enough.
Thank you for the code snippets, I’ve been struggling to understand how it all works because I don’t have a whole lot of time to dedicate to reading up on it.
I have a fair grasp when it comes to simple VBA code writing in Excel, I’ve written many functions, macros, and subroutines, but Love is a little confusing to me, and it makes me feel like an idiot!
Do you know of a decent video tutorial series out there or anyone willing to IM? If I could just talk one on one with someone I may be able to ask some questions and get past this roadblock.
Thanks
~D