Is there a simple way to have in-game changeable sprites?

[Robotmenace]

Okay, so I'm new to Love2D and Lua. I've been wanting to get into video game development and a friend recommended using this engine to start off, for which I thank him. I've always figured one of the more difficult things for me to grasp is going to be sprite handling. So, here's my question:

Is it possible to have a sprite with dynamic visual properties? Different hairstyles would be cool, but just color of hair/clothing/ etc. that the player can customize in-game. I know I could just have a set of stock sprites with every possible color combination, but that would be so terribly tedious.

If it's not that simple, I had another idea of perhaps splitting the sprite into three portions: Head, torso, legs. And just use pixel measurements to force all three to stick together as though it were a single sprite. But that would make animation so much more annoying.

Any suggestions would be much appreciated. Thanks in advance.

[Kingdaro]

The way I'd approach it is to just have a "player object" with different properties for each visual element. If you're going for just color, you can just use regular sprites for the hair, torso and legs, store the properties as color tables, then draw the sprites appropriately using said colors.

Code: Select all

player = {
	colors = {
		hair = {255, 100, 100};
		torso = {100, 255, 100};
		legs = {100, 100, 255};
	};
}

function love.draw()
	love.graphics.setColor(player.colors.hair)
	drawHair()
	love.graphics.setColor(player.colors.torso)
	drawTorso()
	love.graphics.setColor(player.colors.legs)
	drawLegs()
end

[Zarty55]

love.graphics.draw function uses the current color being used. If you create a white hair and then set a color, it will draw the image with the current color. Example:

Code: Select all

function love.load()
	local testImage = love.image.newImageData(32, 32) -- Create a new imageData
	--Draw stuff to image
	for x = 0, 31 do -- images index begin at 0
		for y = 0, 31 do
			testImage:setPixel(x, y, 255, 255, 255)
		end
	end
	--Create a new drawable image
	image = love.graphics.newImage(testImage)
end

function love.draw()
  love.graphics.setColor(120, 40, 40) -- set color to red
  love.graphics.draw(image, 2, 2) -- draw image
  love.graphics.setColor(40, 120, 40) -- set color to green
  love.graphics.draw(image, 36, 2) -- draw same image but with green color
end

Edit: As you can see, the draw function basically adds the current color setted (So 255, 255, 255, will make any difference at all) to the pixel being drawn. Then you can make white sprites and use this for colouring them.

Edit2: I was slow :p

Hope it helps

[Robotmenace]

Well guys, I thank you for the quick responses. Both of your suggestions should make good references.

Follow up question: Is it possible to detect pixels of a specific RGB, and set only said pixels to a different color?

[Plu]

No, but it is possible to make two images, one that needs to be drawn with color and one without, and draw them on top of each other.

[Zarty55]

Well guys, I thank you for the quick responses. Both of your suggestions should make good references.

Follow up question: Is it possible to detect pixels of a specific RGB, and set only said pixels to a different color?

Actually you can, but it depends on what you want to do. There's http://www.love2d.org/wiki/ImageData:mapPixel, which again, depending on what you want to do, it won't work very well.

[Germanunkol]

You can also use shaders to colour the different parts of the object differently. This allows for some nice effects and allows you to use a "mask" (an image that determines where to draw which color). If you're new to all this, though, then I recommend separating the player image into all the different parts (one part per color) and then drawing them seperately using love.graphics.setColor and love.graphics.draw, as mentioned by others before.
Micha recommended a nice method a few days ago, using grayscale images. That way, you can use setColor to set a base color and the sprite will use different shades of color depending on the greyscale of the image.

ImageData:mapPixel (or ImageData:setPixel) is slow. If you use it, you can basically draw an image during run time. If this is done only once at startup, you'll be fine (put up a loading screen while it's running) but you'll have to note that it "freezes" your game. If it's just a few pixels, it'll work, if it's more than that it might take a second or two. You could also fork it into a background thread, which will make sure your game doesn't freeze. Again, though, if you're new to it, I don't recommend this method.

[Karai17]

To add to the comments above, it is common practice to create an image with the appropriate shading in greyscale, then when you add colour to it, it will continue to be shaded.