how to create a color transition of a sprite around the color wheel ??

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By orelvis15
:warning: Old Version Published before Godot 3 was released.

it’s too much simple question to answer.

volzhs | 2016-06-21 14:46

:bust_in_silhouette: Reply From: ericdl

color wheel
Using color values from this color wheel as a guide, simply use an AnimationPlayer to cycle through the colors.

modulate gif

Link to project: https://drive.google.com/file/d/0BwnfZQAEnciAeldvWUFNQTNOLVE/view?usp=sharing

Note: this solution uses two sprites layered atop each other: a unchanging base sprite, and a sprite that accepts color modulation. For a more elegant and complicated solution, consider using shaders as described here

by code can not do ??, and that the transition smoother

orelvis15 | 2016-06-21 15:34

The AnimationPlayer transition is very smooth. What you see above in the preview is misleading because the gif was recorded with a small number of frames. It is basically just a proof of concept.

To do this in code set the sprite’s Modulate property via the set_modulate method, something like:

extends Sprite

var count = 0.0
var old_color
var color_target
const TARGET_TIME = .5

# Set color RAW values here
var color_array = [Color(.39,.68,.21),Color(1,1,.32),Color(.98,.6,.07),Color(1,.15,.07),Color(.51,0,.65),Color(.07,.27,.98)]
var array_index = 0


func _ready():
	set_process(true)

func _process(delta):
	count += delta
	if count > TARGET_TIME:
		array_index += 1
		count = 0
	if array_index > (color_array.size() - 1): array_index = 0
	color_target = Color(color_array[array_index])
	old_color = self.get_modulate()
	self.set_modulate(Color(old_color.linear_interpolate(color_target, count)))

ericdl | 2016-06-21 20:07

:bust_in_silhouette: Reply From: Zylann

I think orelvis15 wants to simply animate a hue property instead of interpolate between two colors. You can change the color of a sprite with the modulate property, but AFAIK there is no hue property, even in the Color class.

You can create a ColorRamp to build a gradient and animate using this. Btw it’s a resource so you can edit the gradient from the editor. But it would be the same as having color keys in the animation itself.

If you want a true hue property going through the full spectrum, have a look here for the formulas: Hue - Wikipedia
(Sorry not much time to provide code)

Those can be found here.

mateusak | 2016-06-22 00:24

Color does have hue, saturation and value. And you can get or set all of those in code using Color.h, Color.s, and Color.v. But the Color class only stores RGB, so it is harder to work with HSV. This also means HSV must be set in reverse order (V first, then S, then H).

CowThing | 2016-06-22 03:10

OMG you’re right. I didn’t saw them, I expected to see getter and setter methods (knowing Color stores only RGB). The documentation can be a bit weird sometimes. It would be great to document those properties, nothing is said about them.

Zylann | 2016-06-22 19:49

:bust_in_silhouette: Reply From: CowThing

Here is the way to animate the hue smoothly with script, I’ve commented it a lot to help explain parts of it.

var hue_timer = 0
var speed = 60 #degrees per second
func _process(delta):
	#Simple number that goes from 0 to 360 and repeats.
	hue_timer = fmod(hue_timer + delta * speed, 360)
	var h = hue_timer / 360 #h,s,v needs to be in range 0-1
	
	#New color, the order MUST be set in V,S,H, this is because Color
	#only saves RGB values, it does not save HSV values.
	var new_color = Color()
	new_color.v = 1 #value
	new_color.s = 1 #saturation
	new_color.h = h #hue
	
	get_node("Sprite").set_modulate(new_color)

Here is another example of using HSV of a color, a function I made to lerp HSV.

func hsv_lerp(cola, colb, t):
	#This part will flip the direction of the lerp if the two colors are above
	#180 degrees apart, this way the lerp always takes the shortest path.
	var h
	var ha = cola.h
	var hb = colb.h
	var d = hb - ha
	if ha <= hb:
		if d > 0.5:
			h = fmod(lerp(ha + 1, hb, t), 1)
		else:
			h = lerp(ha, hb, t)
	else:
		d = -d
		if d > 0.5:
			h = fmod(lerp(ha, hb + 1, t), 1)
		else:
			h = lerp(ha, hb, t)
	
	#Setting the color
	var newcol = Color()
	newcol.v = lerp(cola.v, colb.v, t)
	newcol.s = lerp(cola.s, colb.s, t)
	newcol.h = h
	
	return newcol