How to check touch input follows path / shape?

Questions
1

I’m wondering how I could go about checking whether touch input continuously follows a defined path or shape, especially a complete circle, in a 2D game. This could either be finger-based on a touch screen device, or a click-hold-drag action of a mouse button.

This action could be used for something like drawing on paper, turning a valve, rotating an object, casting a spell etc.

I understand the basics of touch but don’t know where to begin with something like this.

Thanks!

2

I have never coded this, but I will in a futur game idea (I want to make a game where Attack is like in Okami, you draw the action pattern on screen) so I want to think about it with you!

We have 2 problems to solve I guess:

  1. Record continuous touch positions made by the user
  2. Determine if this recorded path is similar enough to a predefine shape.

For the first, we can do it like that I guess (i am writing on my phone, just thinking about it, none of it has been tested…)

function init(self)
    -- Acquire input focus so the script receives events
    msg.post(".", "acquire_input_focus")
    self.touch_active = false
    self.touch_positions = {}
end

function on_input(self, action_id, action)
    if action_id == hash("touch") then
        if action.pressed then
            self.touch_active = true
             self.touch_positions = {} -- reset
           table_insert( self.touch_positions, vmath.vector3(action.x, action.y, 0) )
        elseif action.released then
            self.touch_active = false
            test_shape(self.touch_positions) -- where we solve problem 2...
        elseif self.touch_active then
            -- This captures the continuous movement while holding/dragging
            table_insert(self.touch_positions , vmath.vector3(action.x, action.y, 0) )
        end
    end
end

For the problem to test shape similarity, I have to think about it more, that could be a tough problem to solve

1 Like
3

And it will depend if you want one of these sitation:
A. there is a shape already drawn on screen to follow. So positions of shape point are absolute. Here you can compute distances from shape points to user points.
B. there is no drawn shape, user can start it wherever on the screen => so positions of shape point are relative, to (0,0), and we need to bring back the user shape positions to the same reference point (I guess compute the barycenter of the shape, then substract it to each positions). Then we are in situation A again.

1 Like
4

I haven’t implemented it my self, but I’d look into Penny Pincher algorithm (and possible improvements upon that).
The Black & White game uses it iirc:
Black & White Style Spell Gesture Recognition

EDIT: I also haven’t tried it but this asset mentions gesture support, and lists as supporting all platforms: Defold-Input

2 Likes
5

Thanks for your suggestions, to both Mathias!

I’ll investigate further and share my findings once I get a chance.

1 Like
6

Hi, I have a working implementation of the Penny Pincher algortihm (found parts of the original paper online and also asked AI a starting help), but for now it works I would say “a bit”
I made templates like lines (horizontal, verticals, diagonals), square, different triangles, circles, fish shape etc. to test it.

But it has to be refined because:

  1. The way shape is drawn is important. I already implemented reversed recognition, so it recognize if you go back or forth. But maybe it is not what one want for a template. Like a left vs right arrow/line, direction is important. So it depends on the template.
  2. The algorithm dont go well with rotation. For example, for a symetrical shape like a circle, it is ok if the user start drawing near the same start point the template is drawn. But if user start somewhere else in the circle, this starts to be really bad, and other shapes starts to match with better score (like square or triangles). Even for Triangle, they have many symetries that doesnt help, like a rectangular triangle is bad but isocele is ok.

So I am refining it. I think I will define template that have sub-shapes, the sub-shapes are the rotated or symetrical versions of the original shape. When you define the template, you choose if it needs to generate the subshapes, and you choose if it should test the reverse path.

I will finish this and put online the project with testable demo.
I will also add in it a recording mode: the user draw the template that is recorded.
Then you can test shape recognition on it

1 Like
7

I will add that as discussions above, this is for the relative-positioned shape. So user draw anywhere, and the app test all templates to find the one with best score.

I still have to do absolute-positioned shape, where the template is draw in a specific place on screen, and user HAS TO draw over it. This could be a harder or completely different to do in fact, because for the penny pincher algorithm you work with direction vectors on each point, that are not attached to an frame of reference. The version I use already compute the bounding box of shape and normalize the template and user shape by rescaling and aligning the bounding boxes.
So going from that to absolute positioning could be hard. I think I would add a computation of the barycenter of the original points, and just add a test of distance to barycenters. And see if it wokrs

1 Like