Best way to make a letter-tracing app?

Unity Engine
,
1

Hi all-

I have a simple flash cards type app, nothing too special, but I’d like to add the ability to trace letters within it. I’ve seen this done by several other apps, and have an idea of how to accomplish it, however if anyone has a better method…perhaps you wouldn’t mind sharing it? Or pointing out the huge, glaring flaw in my plan? :wink:

My plan: use a mesh of the letter/number/etc, invisible and placed beneath the image, which would test raycasts and scream “FAIL” if the cursor/touch exits the mesh mesh boundaries.

Obviously, that seems a little complex for the need…also, it doesn’t solve how to make sure the letter/etc it drawn in the right direction. I’ve been looking around, but not finding a good method yet. Also, I’ve been able to use the line renderer to draw a trail behind the cursor/touch point, but it looks pretty ugly…thoughts on this would be helpful too.

Thanks!

2

ah-HA!

So, I just found out that “GetPixel” exists (thanks HiggyB via old forum post!). This seems awefully useful- I could test for the pixel color where the mouse is, and decide if it’s still over the letter while drawing.

Problem is, I’m not quite certain how to use that “GetPixel” bit. It seems to actually sample from a selected texture…not actually the color of the screen at that exact point- although, that works out for better, actually.

The question now becomes, can I simply say:

if press
shoot ray from mouse pos
get object hit, then object’s texture
in that texture, GetPixel at mouse point

…or something to that effect? Seems I’m missing something here.

Thanks for any help, I feel I’m right on the edge of a big breakthrough!

3

To be honest I think you would be better off using fixed points stored in an array, and testing the distance from these points.

As the user “draws” you can check the current touch position against the current control point (starting at position 0 in the array), once they get closer to the next control point you set that as the current control point. If they get too far from the currernt control point AND the next control point they are drawing the wrong thing.

Psuedo code:

int MAX_DIST = 20;
Vector2 drawPos;
Vector2[] controlPoints;
int currentControl = 0;

update(){
  if (mode == start) {
    if (touch began) {
      if (distance(drawPos, controlPoints[0]) < MAX_DIST) {
        mode = drawing;
      }
    }
  } else if (mode == drawing) {
     if (currentControl >= controlpos.length - 1) {
       CompletedSuccessfully()
     } else {
      distFromControl = distance (drawPos, controlPos(currentControl));
      distFromNext = distance (drawPos, controlPos(currentControl + 1));
      if (distFromNext < distFromControl  distFromNext < MAX_DIST) {
        currentControl++;
      } else if (distFromControl < MAX_DIST) {
        Failed();
      }
    }
  }
}

Obviously it means creating control point arrays for each shape, and theres a lot to add to that code (stationary checks, etc). But I think it will perform much better, and be easier to implement.

4

Thanks JohnnyA :slight_smile:

Yeah, that’s close to what my original plan was. I’ll keep your method in mind, however I’m really hoping for a method to have this work straight from script, no need to make bits n pieces. Then again, can’t win 'em all, eh?

thanks!

5

If you want to make them draw things in the right order you are going to have to add information to the mesh/texture, in which case you might as well just create control points. Ensuring that order is part of the mesh/texture information (such as certain colour channel changing in a particular way as you move along the correct path) would be cool, but if you have already built it without considering this it’s likely to be just as much work as manually adding control points.

6

Good points…order would definitely be nice to have. Luckily we haven’t really set up much, still very much “prototyping”. I think I’ll probably just go with your control point scheme, but gotta play around with this GetPixel thing just for kicks first. Seems like something I’d like to know in the future…

7

Another idea is to use box colliders along the letters you are drawing, and to sample the position of the finger at given intervals. Test the trace between these points, see if it collides with the letter boundaries, and if it does, there was a failure to trace the letter.

Might be a little over kill though.

1 Like
8

I’m new to unity and trying to implement same idea. I successfully detected the tracing points but what i don’t know is how to check if user has not left the boundaries of the alphabet ?

9

hey, can you please send me your project as I’ve to submit it as a project in college and don’t have any knowledge of it… PLEASE PLEASE PLEASE