Advanced(ish) sprite color help

Questions & Answers
1

Hi guys,

So I’m not really sure how to describe what I want to do here, but I’ll give it my best shot.

So I an going to have a gray 2D sprite (aka the ground) constantly moving to the left on my screen (think an endless runner), and I will have a player sprite on it. As the ground sprite passes under the player sprite, I would like to make the color of the ground change to red, but ONLY past the player. I have drawn a concept of what I’m going for below:

55216-color-change-concept.png

The red square represents the player, and the red/gray line is the ground before and after the player passes over it. The arrow is the direction the player is traveling.

Has anybody ever done something like this? Should I use some sort of empty GameObject? Is this even possible? It would be of great help if someone could point me in the right direction.

Thanks :slight_smile:

2

There are several ways you can probably accomplish this. If you’re using simple shapes for ground like in the example provided. You could make the ground into 2 shapes (one gray, one red). The red layer’s width would be scaled to 0, as the player runs by, the red layer’s scale will increase. Similar to how progress bars or sliders have a fill amount value of 0 to 1. You would need to calculate the shapes position and width in accordance with the player’s position to know when to increase the fill amount on the current shape that’s directly under the player.

Edit: I was able to get results with this script. Have to set the Pivot on the Sprites to Left. “The ground” is a GameObject that contains this script, and it has 2 children Sprite GameObjects, named Gray and Red respectively.

using UnityEngine;

public class FillableBlock : MonoBehaviour {

    public Transform _Player;
    public Renderer _Gray, _Red;
	
	// Update is called once per frame
	void Update () {
        float distanceFromBlock = _Player.position.x - _Gray.transform.position.x;
        float fillAmount = Mathf.Clamp(distanceFromBlock, 0f, _Gray.bounds.size.x) / _Gray.bounds.size.x * _Gray.transform.localScale.x;
        _Red.transform.localScale = new Vector3(fillAmount, _Red.transform.localScale.y, _Red.transform.localScale.z);
    }
}
3

@Jessespike is on the money there. That would by far be the simplest solution.

It depends a bit on how complex the ground will be too. If you’re going to have different/complex shapes it becomes a bit more tricky.

There may be different approaches, but I can think of 2 which use shaders:

  1. Have two copies of your ground/terrain, one red and one grey. Then a custom shader could set the opacity of each ground (left for grey, right for right) based on the position of the player.
  • You would have a colliders on only one of them I suspect
  1. Have a single terrain item, but a custom shader that renders a different color based on the position of the player (to left of player = red, to right of player = grey)
4

I would just use a world canvas for the ground with a mask on it and then blend two images. [almost zero coding]

You can plant an collider behind them, and dont need to code anything except the scaling of the width of the images RectTransform ( dont forget to anker it to the left ).

Cheers :slight_smile: