koobas.hobune.stream
Wierd behaviour of slider when value is changed too fast
I have an array of images and a slider which controls a their alpha. At one moment the slider only affects two images - the one which is fading and the one which is appearing. Once an image has fully appeared (alpha = 1) the controlled image pair changes and the image which has just appeared becomes the fading one. And so on, until the end of image array is reached. When the slider is moved slowly everything works and inteded, however when the slider value is changed quickly (by flicking the mouse for example) something breaks and as the result ALL of the images can se somewhat visible. Please see this link to understand what's happening, in case my description isn't really descriptive enough.
My code:
public class ImageControl : MonoBehaviour
{
[SerializeField] private Image fadingImg, appearingImg;
public Slider slider;
[SerializeField] private int sliderValue;
//Array of all images
public GameObject[] images;
//Array of points on the slider
public List<float> points = null;
//Segment width
[SerializeField] private int segmentWidth, segmentNumber;
private void Start()
{
segmentNumber = 0;
CalculatePoints();
}
public void OnSliderChange()
{
CalculateSegmentNumber();
ChangeAlpha();
}
private void CalculatePoints()
{
int numberOfPoints = images.Length - 1;
Debug.Log("Number of points is: " + numberOfPoints);
segmentWidth = Mathf.RoundToInt( slider.maxValue / numberOfPoints);
Debug.Log("Segment width is: " + segmentWidth);
int i = 0;
while (i <= 100)
{
points.Add(i);
i += segmentWidth;
}
}
public void CalculateSegmentNumber()
{
if (slider.value > 0)
{
segmentNumber = (int)Mathf.Floor(slider.value / segmentWidth);
//This is for debugging
sliderValue = (int)slider.value;
}
else
{
segmentNumber = 0;
}
if (segmentNumber < 0)
{
segmentNumber = 0;
}
else if (segmentNumber > points.Count)
{
segmentNumber = points.Count - 1;
}
}
private void ChangeAlpha()
{
int fadingImgIndex = segmentNumber;
//Debug.Log("Fading image index is: " + fadingImgIndex);
int appearingImgIndex = segmentNumber + 1;
//Debug.Log("Appearing image index is " + appearingImgIndex);
if (appearingImgIndex < images.Length)
{
fadingImg = images[fadingImgIndex].GetComponent<Image>();
appearingImg = images[appearingImgIndex].GetComponent<Image>();
}
//Calculates current opacity value based on the slider value
int corrSliderValue = ((int)slider.value % segmentWidth);
//Debug.Log("Slider value is: " + slider.value +
//"Corrected slider value is: " + corrSliderValue);
float opacityValue = (float)corrSliderValue * (points.Count -1) / 100;
//Debug.Log("opacityValue value is :" + opacityValue);
for (int i = 0; i < images.Length; i++)
{
if (i == fadingImgIndex)
{ //Decreases alpha of fading picture
fadingImg.color = new Color(fadingImg.color.r, fadingImg.color.g, fadingImg.color.b, 1 - opacityValue);
} else if(i == appearingImgIndex)
{ //Increases alpha of appearing image
appearingImg.color = new Color(fadingImg.color.r, fadingImg.color.g, fadingImg.color.b, opacityValue);
}
else //sets the alpha of the rest of images == 0
{
Color color = images[i].GetComponent<Image>().color;
color = new Color(color.r, color.g, color.b, 0f);
}
}
}
}
you seem to iterate over multiple images while keeping track of the currently fading out and fading in. But since a slider can be anywhere at any time any image can have any alpha at any time. It looks as if skipping over images changes which previous or next image is to be altered before resetting the previous ones, leaving them in their last alpha state. What I suggest is that you assign the alpha to ALL images part of your fader.
- divide the slider into as many parts as you have images
- whenever the slider changes, calculate the 0 to 1 value within the portion the slider is currently in, set the corresponding image to it and all other to 0
I think that's pretty much what I'm doing - the slider is divided into segments based on the number of images in the array. In each segment only the fading and appearing images should be affected while, the rest should have their alpha = 0. The slider value is recalculated in each segment so that it would always properly reflect the gradual change between state where the image is completely invisible and the state where it's visible. I'l update my question with full code. Apologies for not doing so earlier but I wasn't sure if anybody would bother to read through all of it.
