Color Swipe

Tinder but for real or fake colors

July 2018

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

About

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

Layout

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)

field

Swiping

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 = Vector2.zero;
  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;
    else
      swipeNormal.x = 0;
    swipeNormal.Normalize();
			
    // intersect point
    Vector3 intersectionPoint = Vector3.zero;
    bool foundIntersect = Math3d.LineLineIntersection(out intersectionPoint, cardPos, cardDir, swipeTarget, swipeNormal);

    swipeEnd = foundIntersect? (Vector2)intersectionPoint : swipeTarget;
  }
  else
    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.zero;
  Vector2 to = Vector2.zero;
  float f = 0;
  if (doneCardLength <= swipeEndLength)
  {
    f = doneCardLength / swipeEndLength;
    from = initCardPosition;
    to = swipeEnd;
  }
  else
  {
    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

Project

The project code can be found at https://gitlab.com/Orcolom/color-swipe