Color Swipe

Tinder but for real or fake colors

July 2018

c-sharp, Unity, mobile, prototype, prototype mechanic,


Here I created a self contained swiping field mechanic. Tried to make an logical and easy extendable. There is a code snippet how this is made what lower the page or click here

gameplay gif


If a touch gets registered anywhere in a swipe field that counts as touching the card (black).
While swiping a card (red) towards a directing, it will move from its deck location (brown) towards a swipe area (green). This area can be any shape or have any locations.
Via Editor scripts or code it can decided what happens when a card gets released inside an area. When released in an area and swiped away it will go towards the area target (blue)



When swipling a card away like shown above, you see it will keep the direction of the swipe while still going towards to correct target position. This gives a better swiping feeling. Here is how that is done.

IEnumerator SwipeCoroutine(SwipeCard card, SwipeArea area, Vector2 initCardPosition)
  var cardPos = card.transform.position;
  Vector2 swipeTarget = area.SwipeTarget.transform.position;

  Vector2 cardDir = (Vector2)cardPos - initCardPosition;

  Vector2 swipeEnd =;
  if (area.Direction != SwipeDirection.None)
    // get the local up or down direction it needs to hit
    Vector2 swipeNormal = cardDir;
    if (area.Direction == SwipeDirection.Up || area.Direction == SwipeDirection.Down)
      swipeNormal.y = 0;
      swipeNormal.x = 0;
    // intersect point
    Vector3 intersectionPoint =;
    bool foundIntersect = Math3d.LineLineIntersection(out intersectionPoint, cardPos, cardDir, swipeTarget, swipeNormal);

    swipeEnd = foundIntersect? (Vector2)intersectionPoint : swipeTarget;
    swipeEnd = swipeTarget;

  // find the procent it has already done of its path
  var swipeEndLength = (swipeEnd - initCardPosition).magnitude;
  var doneCardLength = cardDir.magnitude;

  // set loop values
  Vector2 from =;
  Vector2 to =;
  float f = 0;
  if (doneCardLength <= swipeEndLength)
    f = doneCardLength / swipeEndLength;
    from = initCardPosition;
    to = swipeEnd;
    to = swipeEnd;
    from = cardPos;

  // move for the rest of the time
  for (; f <= 1.0f; f += Time.deltaTime * 6)
    var pos = Vector2.Lerp(from, to, f);
    card.transform.position = pos;
    yield return null;

  // trigger
  card.transform.position = to;
  OnCardSwiped.Invoke(area, card);
  area.OnCardSwiped.Invoke(area, card);

See the rest of the file here


The project code can be found at