I am thinking about doing a simple football kit design app and wondered if there is a a way you can change a colour of a sprite on the fly?
For instance I have a shirt and shorts graphic that have 2 defined default colours (255,0,255 and 0,255,0) can I change it to say 210,30,77 and 1,1,1 for the shirt and on the shorts graphic make the 255,0,255 to say 255,228,0 and then draw it? Obviously the final program would have many kits and many predefined colors but for now im just stuck on doing the one.
The only way I can see to do it is a bit complex and uses sprite2mem, is there an easier way?
Cheers
Gary
Might be worth trying POLYVECTOR
Had a look at polyvector and from what I can see it applies a standard colour add to the sprite so would not work for the attached example if I wanted to set one colour to black and one to white for example (or could it?)
Of course I could split it into 2 graphics to allow the different colours but is there an easier way?
Thanks
Gary
[attachment deleted by admin]
Polyvector and every color as a single white/greyscale image would be the best quality, I think. Also make it a png with alpha background, don´t scale it and set alphamode to -0.999. Every pixel based approach would make fuzzy edges.
Good question.
For your exact situation, I'd split it into 2 graphics, like you said. And use polyvectors.
It's simple to implement, and it's fast, but may be more difficult to manage working with and positioning two graphics.
'sprite2mem' would probably work if you didn't want the overhead of managing two separate sprites per item.
I've never used it however, so don't know it's speed or features, but you'd only have to do it once per colour change.
I don't know this, but can OpenGL use custom shaders in 2D mode?
If so, you could have a shader to substitute the base colours with two colours passed to the shader.
This would be at the fragment level? Do a check, if the base pixel is 'colour 1' (say (200,200,200)), set it to the passed colour 1, or else if it's 'colour 2' (say (100,100,100), set it to passed colour 2. Ha, I really have limited shader experience and don't know it it's possible, or how difficult it would be.
Have you seen this thread : http://www.glbasic.com/forum/index.php?topic=5624.msg44204#msg44204 (http://www.glbasic.com/forum/index.php?topic=5624.msg44204#msg44204) Scroll upwards for a full zipped up code example with images.
This is basically what I was considering using for the football game I'm developing.
Cheers
Crivens, handy bit of code that but it still does not take away the need to break up my shirt patterns :(
I had a little mess about with my single shirt I have here (on a PSD file at home I have about 50 different styles and patterns some are single colour, some are 4 colour. I could set a default back colour for the shirt which would remove the need for the 2 colour shirts to have 2 graphics, one colour would be the default colour, the other would be the overlaid colour so this would cut down the number of images by maybe a 3rd
The code I have so far is
SETCURRENTDIR("Media") // seperate media and binaries?
LOADSPRITE "left.png",0
LOADSPRITE "right.png",1
GLOBAL white_color% = RGB(255, 255, 255)
GLOBAL red_color% = RGB(255, 0, 0)
GLOBAL green_color% = RGB(0, 255, 0)
GLOBAL blue_color% = RGB(0, 0, 255)
SETSCREEN 450,666,0
WHILE KEY(01)=0
STARTPOLY 1,2
myDrawPoly_fast(1,0,0,0,0,450,666, red_color%)
ENDPOLY
STARTPOLY 0,2
myDrawPoly_fast(0,0,0,0,0,450,666,blue_color%)
ENDPOLY
SHOWSCREEN
WEND
//simple poly strip drawing function
FUNCTION myDrawPoly_fast: texture_id%, dest_x%, dest_y%, src_x%, src_y%, reg_width%, reg_height%, color%
POLYVECTOR dest_x%, dest_y%, src_x%, src_y%, color%
POLYVECTOR dest_x%, dest_y%+reg_height%, src_x%, src_y%+reg_height%, color%
POLYVECTOR dest_x%+reg_width%, dest_y%, src_x%+reg_width%, src_y%, color%
POLYVECTOR dest_x%+reg_width%, dest_y%+reg_height%, src_x%+reg_width%, src_y%+reg_height%, color%
POLYNEWSTRIP
ENDFUNCTION
which is currently using the draw routine dreamerman posted on the sprite speed test thread with a change to allow for a different colour to be applied. I know its not memory friendly but I would probably keep all the parts of the kit the same size so all draw routines are done at 0,0 rather than storing the x,y start position for every graphic.
Still, its all learning another part of GLB, even if I dont fully understand it just yet :)
Have attached the code so far with graphics but doubt it will be of use to anyone lol
[attachment deleted by admin]
There is no command that will amend your test image in any language. As others have said split the image into the separate parts and use polyvector to draw the two overlayed on top of each other.
QuoteThere is no command that will amend your test image in any language
You could actually palette change in Div Games Studio. Unfortunately that program went the way of the dodo. However others took up its mantle, including Fenix, Gemix and Bennuu. So there are languages that can do it.
Actually, if ALL your cloths have mirrored patterns, like your sample pic, you may be able to use just one picture.
Split the pic by removing one colour, just as you would if you were to use the two pic method. Colour it white.
In your code plot the one side with one colour, then redraw the same polygon but flipped using the other colour.
Use the tx, ty to plot the pic backwards.
Of course this wont work if the item isn't perfectly symmetrical.
[Edit] I was just looking at it again, I would save the 1 colour image with the same dimensions as the 2 colour original pic. It will make aligning the two sides so much easier.
I'd use SPRITE2MEM, then split each pixel in RGBA and compare to a given value (draw tricots in red/green and if the pixel is definitely red, recolour.) That way you can also have shades of other colours and keep skin colour untainted. Also, polyvector with colours is slow on mobile devices, usually.
I haven't tried it, but is it also possible to use SPRITE2MEM and MEM2SPRITE with spritesheets that you load with LOADANIM and then can draw with DRAWANIM? So I mean an image with lots of small images for animation.
yes. I mean.. Oh - you have to set the animation width/height then. I think it's not possible :(
Quote from: Ian Price on 2011-Jul-12
QuoteThere is no command that will amend your test image in any language
You could actually palette change in Div Games Studio. Unfortunately that program went the way of the dodo. However others took up its mantle, including Fenix, Gemix and Bennuu. So there are languages that can do it.
True but this would only be for languages that use a 256 colour palette. Plus it would be a total waste of colours because you may have a shirt that visually appears to use 2 colours but may actually be 16 in total with 8 shades of each colour for antialiasing. 16 colour changes for the shirts and your palette is gone. I meant no language would have a command to do this as it would be a pretty unique feature to implement a replace colour command.
Fenix and Bennu both offer 24bit colour - and don't knock 256 colours, I suspect most coders here use far less, with some very impressive results. Anyway you are changing the goalposts, you stated language, not colour depth limited language! :P
PlayBASIC also has the ability to colour change (forgot about that one despite using it for a couple of years). That offers full 32bit colour. There was a specific example of shirt colour changing functions when Kevin Picone was doing a sports game (rugby IIRC). He's rolled out some wonderful examples with PB.
Quote from: BdR on 2011-Jul-13
I haven't tried it, but is it also possible to use SPRITE2MEM and MEM2SPRITE with spritesheets that you load with LOADANIM and then can draw with DRAWANIM? So I mean an image with lots of small images for animation.
Yahaaa! It IS POSSIBLE:
http://www.glbasic.com/xmlhelp.php?lang=en&id=372&action=view (http://www.glbasic.com/xmlhelp.php?lang=en&id=372&action=view)
A sprite says more than a thousand words?
(http://www.filindeblogg.nu/wp-content/uploads/2010/12/Klippdockor-2-300x213.jpg)
Got things working now, just need to get all the variants in. Thought I would use a fairly easy to identify football figure as the base :)
Worked out a system as well for only loading the parts of the shirts needed and keeping the same draw routine for a plain shirt as well as one with lots of extras.
Only got some basic looking kits in at the moment but use key 1 and 2 to scroll through the kits. If anyone can spot an easier way to do things then please let me know :)
Also is it possible to use antialiased images with polyvector and have the shading change to the new colour? I have tried it up it has always turned into a solid colour. It would get rid of some of the jagged edges im getting
[attachment deleted by admin]
Quote from: Kitty Hello on 2011-Jul-13
Quote from: BdR on 2011-Jul-13
I haven't tried it, but is it also possible to use SPRITE2MEM and MEM2SPRITE with spritesheets that you load with LOADANIM and then can draw with DRAWANIM? So I mean an image with lots of small images for animation.
Yahaaa! It IS POSSIBLE:
http://www.glbasic.com/xmlhelp.php?lang=en&id=372&action=view (http://www.glbasic.com/xmlhelp.php?lang=en&id=372&action=view)
Sweet, I'll rewrite my blitzbasic colorize demo in glbasic =D (when I can find the time)
Okay yesterday I ported my colorize demo to GLBasic, it works great. :good: Very useful for example when your game has several identical sprites but with different colors, like in bomberman or in soccer games.
I haven't tested it on iphone yet only on pc, so I don't know how fast it is on iphone, it might be slow when using very large spritesheets. Note that you have to compile using the new GLBasic v10 because it fixes a bug in the LOADSPRITEMEM function.
[attachment deleted by admin]
totally awesome!
Bravo!