Author Topic: sprite color change  (Read 6513 times)

Offline Gary

  • Dr. Type
  • ****
  • Posts: 313
    • View Profile
sprite color change
« on: 2011-Jul-12 »
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
« Last Edit: 2011-Jul-12 by Gary_Leeds »

MrTAToad

  • Guest
Re: sprite color change
« Reply #1 on: 2011-Jul-12 »
Might be worth trying POLYVECTOR

Offline Gary

  • Dr. Type
  • ****
  • Posts: 313
    • View Profile
Re: sprite color change
« Reply #2 on: 2011-Jul-12 »
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]

Offline monono

  • Mr. Polyvector
  • ***
  • Posts: 213
    • View Profile
    • Sockel Lernmedien
Re: sprite color change
« Reply #3 on: 2011-Jul-12 »
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.

Offline Slydog

  • Prof. Inline
  • *****
  • Posts: 930
  • KodeSource
    • View Profile
    • KodeSource
Re: sprite color change
« Reply #4 on: 2011-Jul-12 »
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.
My current project (WIP) :: TwistedMaze <<  [Updated: 2015-11-25]

Offline Crivens

  • Prof. Inline
  • *****
  • Posts: 913
    • View Profile
Re: sprite color change
« Reply #5 on: 2011-Jul-12 »
Have you seen this thread : 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
Current fave quote: Cause you like musicians and I like people with boobs.

Offline Gary

  • Dr. Type
  • ****
  • Posts: 313
    • View Profile
Re: sprite color change
« Reply #6 on: 2011-Jul-12 »
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

Code: GLBasic [Select]
        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]

Offline spicypixel

  • Prof. Inline
  • *****
  • Posts: 646
  • Pixel Artist
    • View Profile
    • SpicyPixel.net
Re: sprite color change
« Reply #7 on: 2011-Jul-12 »
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.
http://www.spicypixel.net | http://www.facebook.com/SpicyPixel.NET

Comps Owned - ZX.81, ZX.48K, ZX.128K+2, Vic20, C64, Atari-ST, A500.600.1200, PC, Apple Mini-Mac.

Offline Ian Price

  • Administrator
  • Prof. Inline
  • *******
  • Posts: 4147
  • On the shoulders of giants.
    • View Profile
    • My Apps
Re: sprite color change
« Reply #8 on: 2011-Jul-12 »
Quote
There 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.
I came. I saw. I played.

Offline Slydog

  • Prof. Inline
  • *****
  • Posts: 930
  • KodeSource
    • View Profile
    • KodeSource
Re: sprite color change
« Reply #9 on: 2011-Jul-12 »
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.
« Last Edit: 2011-Jul-12 by Slydog »
My current project (WIP) :: TwistedMaze <<  [Updated: 2015-11-25]

Offline Kitty Hello

  • code monkey
  • Administrator
  • Prof. Inline
  • *******
  • Posts: 10713
  • here on my island the sea says 'hello'
    • View Profile
    • http://www.glbasic.com
Re: sprite color change
« Reply #10 on: 2011-Jul-13 »
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.

Offline BdR

  • Dr. Type
  • ****
  • Posts: 303
    • View Profile
    • BdR Games
Re: sprite color change
« Reply #11 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.

Offline Kitty Hello

  • code monkey
  • Administrator
  • Prof. Inline
  • *******
  • Posts: 10713
  • here on my island the sea says 'hello'
    • View Profile
    • http://www.glbasic.com
Re: sprite color change
« Reply #12 on: 2011-Jul-13 »
yes. I mean.. Oh - you have to set the animation width/height then. I think it's  not possible :(

Offline spicypixel

  • Prof. Inline
  • *****
  • Posts: 646
  • Pixel Artist
    • View Profile
    • SpicyPixel.net
Re: sprite color change
« Reply #13 on: 2011-Jul-13 »
Quote
There 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.
http://www.spicypixel.net | http://www.facebook.com/SpicyPixel.NET

Comps Owned - ZX.81, ZX.48K, ZX.128K+2, Vic20, C64, Atari-ST, A500.600.1200, PC, Apple Mini-Mac.

Offline Ian Price

  • Administrator
  • Prof. Inline
  • *******
  • Posts: 4147
  • On the shoulders of giants.
    • View Profile
    • My Apps
Re: sprite color change
« Reply #14 on: 2011-Jul-13 »
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.
I came. I saw. I played.