Cómo detectar cuando un objeto ha sido rodeado por un gesto

() translation by (you can also view the original English article)

Nunca eres demasiado viejo para un juego de Spot the Difference. Recuerdo jugarlo de niño, ¡y ahora encuentro que mi esposa todavía juega ocasionalmente! En este tutorial, veremos cómo detectar cuándo se ha dibujado un anillo alrededor de un objeto, con un algoritmo que se podría usar con el mouse, el lápiz óptico o la entrada de la pantalla táctil.

Nota: Aunque las demostraciones y el código fuente de este tutorial utilizan Flash y AS3, debería poder usar las mismas técnicas y conceptos en casi cualquier entorno de desarrollo de juegos.

Vista previa del resultado final

Echemos un vistazo al resultado final en el que trabajaremos. La pantalla está dividida en dos imágenes, que son casi idénticas pero no del todo. Intenta detectar las seis diferencias y encierra en un círculo las de la imagen de la izquierda. ¡Buena suerte!

Nota: ¡No tienes que dibujar un círculo perfecto! Solo necesitas dibujar un anillo aproximado o un bucle alrededor de cada diferencia.

¿No tienes flash? Echa un vistazo a esta demostración de vídeo:

Paso 1: El movimiento circular

Usaremos algunos cálculos vectoriales en el algoritmo. Como siempre, es bueno entender las matemáticas subyacentes antes de aplicarlas, así que aquí hay un breve repaso de las matemáticas vectoriales.

La imagen de arriba muestra el vector A desglosado en sus componentes horizontal y vertical (Ax y Ay, respectivamente).

Ahora veamos la operación del producto punto, ilustrada en la siguiente imagen. Primero, verá la operación del producto de puntos entre los vectores A y B.

Para encontrar el ángulo intercalado entre los dos vectores, podemos hacer uso de este producto de puntos.

| A | y | B | denota las magnitudes de los vectores A y B, así dados | A | y | B | y A punto B, lo que queda desconocido es theta. Con un poco de álgebra (como se muestra en la imagen), se produce la ecuación final, que podemos usar para encontrar theta.

Para obtener más información sobre el producto vector dot, consulte la siguiente página de Wolfram.

La otra operación útil es el producto cruzado. Echa un vistazo a la operación a continuación:

Esta operación es útil para encontrar si el ángulo intercalado es hacia la derecha o hacia la izquierda con respecto a un vector específico.

Déjame elaborar más. Para el caso del diagrama anterior, la rotación de A a B es en el sentido de las agujas del reloj, por lo que A es B negativo. La rotación de B a A es en sentido contrario a las agujas del reloj, por lo que B en A es positivo. Tenga en cuenta que esta operación es sensible a la secuencia. Una cruz B producirá un resultado diferente de B cruz A.

Eso no es todo. Sucede que en el espacio de coordenadas de muchas plataformas de desarrollo de juegos, el eje y se invierte (y aumenta a medida que avanzamos hacia abajo). Por lo tanto, nuestro análisis se invierte, y A cruz B será positivo mientras que B cruz A es negativo.

Eso es suficiente revisión. Vayamos a nuestro algoritmo.

Paso 2: Interacción en círculos

Los jugadores deberán rodear el detalle correcto en la imagen. Ahora, ¿cómo hacemos eso? Antes de responder a esta pregunta, debemos calcular el ángulo entre dos vectores. Como recordará ahora, podemos usar el producto punto para esto, así que implementaremos esa ecuación aquí.

Aquí hay una demostración para ilustrar lo que estamos haciendo. Arrastre cualquiera de las flechas para ver los comentarios.

Vamos a ver cómo funciona esto. En el código a continuación, simplemente he inicializado los vectores y un temporizador, y puse algunas flechas interactivas en la pantalla.

public function Demo1() 
{
    feedback = new TextField; addChild(feedback);
    feedback.selectable = false;
    feedback.autoSize = TextFieldAutoSize.LEFT;
    
    a1 = new Arrow; addChild(a1); 
    a2 = new Arrow; addChild(a2); a2.rotation = 90
    
    center = new Point(stage.stageWidth >> 1, stage.stageHeight >> 1)
    a1.x = center.x;  a1.y = center.y; a1.name = "a1";
    a2.x = center.x;  a2.y = center.y; a2.name = "a2";
    
    a1.transform.colorTransform = new ColorTransform(0, 0, 0, 1, 255);
    a2.transform.colorTransform = new ColorTransform(0, 0, 0, 1, 0, 255);
    
    a1.addEventListener(MouseEvent.MOUSE_DOWN, handleMouse);
    a2.addEventListener(MouseEvent.MOUSE_DOWN, handleMouse);
    stage.addEventListener(MouseEvent.MOUSE_UP, handleMouse);
    
    v1 = new Vector2d(1, 0);
    v2 = new Vector2d(0, 1);
    curr_vec = new Vector2d(1, 0);
    
    t = new Timer(50);
}

Cada 50 milisegundos, la siguiente función se ejecuta y se usa para actualizar la retroalimentación gráfica y de texto:

private function update(e:TimerEvent):void 
{
    var curr_angle:Number = Math.atan2(mouseY - center.y, mouseX - center.x);
    curr_vec.angle = curr_angle;
    
    if (item == 1) {
        //update arrow's rotation visually
        a1.rotation = Math2.degreeOf(curr_angle);
        
        //measuring the angle from a1 to b1
        v1 = curr_vec.clone();
        direction = v2.crossProduct(v1);
        feedback.text = "You are now moving the red vector, A \n";
        feedback.appendText("Angle measured from green to red: ");
    }
    else if (item == 2) {
        a2.rotation = Math2.degreeOf(curr_angle);
        
        v2 = curr_vec.clone();
        direction = v1.crossProduct(v2);
        feedback.text = "You are now moving the green vector, B\n";
        feedback.appendText("Angle measured from red to green: ");
    }
    
    theta_rad = Math.acos(v1.dotProduct(v2));  //theta is in radians
    theta_deg = Math2.degreeOf(theta_rad);
    if (direction < 0) {
        feedback.appendText("-" + theta_deg.toPrecision(4) + "\n");
        feedback.appendText("rotation is anti clockwise")
    }
    else {
        feedback.appendText(theta_deg.toPrecision(4) + "\n");
        feedback.appendText("rotation is clockwise")
    }
    drawSector();
}

Notará que la magnitud para v1 y v2 son 1 unidad en este escenario (verifique las líneas 52 y 53 resaltadas arriba), por lo que omití la necesidad de calcular la magnitud de los vectores por ahora.

Si desea ver el código fuente completo, consulte Demo1.as en la descarga de la fuente.

Paso 3: Detectar un círculo completo

Ok, ahora que hemos entendido la idea básica, ahora la usaremos para verificar si el jugador circuló un punto con éxito.

Espero que el diagrama habla por sí mismo. El inicio de la interacción es cuando se presiona el botón del mouse, y el final de la interacción es cuando se suelta el botón del mouse.

En cada intervalo (de, por ejemplo, 0,01 segundos) durante la interacción, calcularemos el ángulo intercalado entre los vectores actuales y anteriores. Estos vectores se construyen desde la ubicación del marcador (donde está la diferencia) a la ubicación del mouse en esa instancia. Sume todos estos ángulos (t1, t2, t3 en este caso) y si el ángulo formado es de 360 grados al final de la interacción, entonces el jugador ha dibujado un círculo.

Por supuesto, puede ajustar la definición de un círculo completo para que sea de 300-340 grados, dando espacio a los errores del jugador al realizar el gesto del mouse.

Aquí hay una demostración de esta idea. Arrastra un gesto circular alrededor del marcador rojo en el medio. Puede mover la posición del marcador rojo usando las teclas W, A, S, D.

Paso 4: La Implementación

Examinemos la implementación de la demo. Veremos los cálculos importantes aquí.

Verifique el código resaltado a continuación y cópielo con la ecuación matemática en el Paso 1. Notará que el valor para arccos a veces produce Not a Number (NaN) si salta la línea 92. Además, constants_value a veces excede de 1 debido a imprecisiones de redondeo, por lo que necesitamos devolverlo manualmente a un máximo de 1. Cualquier número de entrada para arccos más de 1 producirá un NaN.

private function update(e:TimerEvent):void 
{
    graphics.clear();
    graphics.lineStyle(1)
    graphics.moveTo(marker.x, marker.y);
    graphics.lineTo(mouseX, mouseY);
    
    prev_vec = curr_vec.clone();
    curr_vec = new Vector2d(mouseX - marker.x, mouseY - marker.y);
    //value of calculation sometimes exceed 1 need to manually handle the precission
    var constants_value:Number = Math.min(1, 
                                prev_vec.dotProduct(curr_vec) / (prev_vec.magnitude * curr_vec.magnitude)
                                );
    var delta_angle:Number = Math.acos(constants_value)	//angle made
    var direction:Number = prev_vec.crossProduct(curr_vec) > 0? 1: -1;	//checking the direction of rotation
    total_angle += direction * delta_angle;	//add to the cumulative angle made during the interaction
}

La fuente completa para esto se puede encontrar en Demo2.as

Paso 5: El defecto

Un problema que puede ver es que mientras dibuje un círculo grande que encierre el lienzo, el marcador se considerará en un círculo. No necesito saber dónde está el marcador.

Bueno, para contrarrestar este problema, podemos verificar la proximidad del movimiento circular. Si el círculo se dibuja dentro de los límites de un cierto rango (cuyo valor está bajo su control), solo entonces se considera un éxito.

Echa un vistazo al código de abajo. Si alguna vez el usuario supera MIN_DIST (con un valor de 60 en este caso), entonces se considera una suposición aleatoria.

private function update(e:TimerEvent):void 
{
    graphics.clear();
    graphics.lineStyle(1)
    graphics.moveTo(marker.x, marker.y);
    graphics.lineTo(mouseX, mouseY);
    
    prev_vec = curr_vec.clone();
    curr_vec = new Vector2d(mouseX - marker.x, mouseY - marker.y);
    
    if (curr_vec.magnitude > MIN_DIST) within_bound = false;
    
    //value of calculation sometimes exceed 1 need to manually handle the precission
    var constants_value:Number = Math.min(1, 
                                prev_vec.dotProduct(curr_vec) / (prev_vec.magnitude * curr_vec.magnitude)
                                );
    var delta_angle:Number = Math.acos(constants_value)	//angle made
    var direction:Number = prev_vec.crossProduct(curr_vec) > 0? 1: -1;	//checking the direction of rotation
    total_angle += direction * delta_angle;	//add to the cumulative angle made during the interaction
    
    mag_box.text = "Distance from marker: " + curr_vec.magnitude.toPrecision(4);
    mag_box.x = mouseX + 10;
    mag_box.y = mouseY + 10;
    feedback.text = "Do not go beyond "+MIN_DIST
}

De nuevo, trata de rodear el marcador. Si crees que el MIN_DIST es un poco implacable, siempre se puede ajustar para adaptarse a la imagen.

Paso 6: Diferentes formas

¿Qué pasa si la "diferencia" no es un círculo exacto? Algunos pueden ser rectangulares, triangulares o cualquier otra forma.
En estos casos, en lugar de utilizar un solo marcador, podemos colocar algunos:

En el diagrama de arriba, se muestran dos cursores de ratón en la parte superior. Comenzando con el cursor situado más a la derecha, realizaremos un movimiento circular en el sentido de las agujas del reloj hacia el otro extremo de la izquierda. Tenga en cuenta que la ruta rodea los tres marcadores.

También he dibujado los ángulos transcurridos por este camino en cada uno de los marcadores (guiones claros a guiones oscuros). Si los tres ángulos son más de 360 grados (o el valor que elija), solo entonces lo contamos como un círculo.

Pero eso no es suficiente. ¿Recuerdas la falla en el paso 4? Bueno, lo mismo ocurre aquí: tendremos que verificar la proximidad. En lugar de requerir que el gesto no exceda un radio determinado de un marcador específico, solo verificaremos si el cursor del mouse se acercó a todos los marcadores para al menos una breve instancia. Usaré pseudocódigo para explicar esta idea:

Calculate angle elapsed by path for marker1, marker2 and marker3

if each angle is more than 360
	if each marker's proximity was crossed by mouse cursor
		then the circle made is surrounding the area marked by markers
	endif
endif

Paso 7: Demo para la Idea

Aquí, estamos usando tres puntos para representar un triángulo.

Trate de rodear alrededor:

un punto
dos puntos
tres puntos

... en la imagen de abajo. Tenga en cuenta que el gesto solo tiene éxito si contiene los tres puntos.

Veamos el código de esta demo. He resaltado las líneas clave para la idea a continuación; El script completo está en Demo4.as.

private function handleMouse(e:MouseEvent):void 
{
    if (e.type == "mouseDown") {
        t.addEventListener(TimerEvent.TIMER, update);
        t.start();
        update_curr_vecs();
    }
    else if (e.type == "mouseUp") {
        t.stop();
        t.removeEventListener(TimerEvent.TIMER, update);
        
        //check if conditions were met
        condition1 = true	//all angles are meeting MIN_ANGLE
        condition2 = true	//all proximities are meeting MIN_DIST
        
        for (var i:int = 0; i < markers.length; i++) {
            if (Math.abs(angles[i])< MIN_ANGLE) {
                condition1 = false;
                break;
            }
            if (proximity[i] == false) {
                condition2 = false;
                break
            }
        }
        
        if (condition1 && condition2) {
            box.text="Attempt to circle the item is successful"
        }
        else {
            box.text="Failure"
        }
        
        reset_vecs();
        reset_values();
    }
}

private function update(e:TimerEvent):void 
{
    update_prev_vecs();
    update_curr_vecs();
    update_values();
}

Paso 8: Dibujando los círculos

El mejor método para dibujar realmente la línea que traza dependerá de su plataforma de desarrollo, por lo que solo describiré el método que usaríamos en Flash aquí.

Hay dos formas de dibujar líneas en AS3, como se indica en la imagen de arriba.

El primer enfoque es bastante simple: use moveTo () para mover la posición de dibujo a coordinar (10, 20). Luego dibuja una línea para conectar (10, 20) a (80, 70) usando lineTo ().

El segundo enfoque es almacenar todos los detalles en dos matrices, commands [] y coords [] (con las coordenadas almacenadas en pares (x, y) dentro de coords []) y luego dibujar todos los detalles gráficos en el lienzo usando drawPath () en un sola Disparo. He optado por el segundo enfoque en mi demo.

Compruébelo: intente hacer clic y arrastrar el mouse sobre el lienzo para dibujar una línea.

Y aquí está el código AS3 para esta demo. Echa un vistazo a la fuente completa en Drawing1.as.

public class Drawing1 extends Sprite
{
    private var cmd:Vector.<int>;
    private var coords:Vector.<Number>;
    private var _thickness:Number = 2, _col:Number = 0, _alpha:Number = 1;
    
    public function Drawing1() 
    {
        //assign event handlerst to mouse up and mouse down
        stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseHandler);
        stage.addEventListener(MouseEvent.MOUSE_UP, mouseHandler);
    }
    
    /**
     * Mouse event handler
     * @param	e	mouse event
     */
    private function mouseHandler(e:MouseEvent):void 
    {
        if (e.type == "mouseDown") {
            //randomise the line properties
            _thickness = Math.random() * 5;
            _col = Math.random() * 0xffffff;
            _alpha = Math.random() * 0.5 + 0.5
            
            //initiate the variables
            cmd = new Vector.<int>;
            coords = new Vector.<Number>;
            
            //first registration of line beginning
            cmd[0] = 1;
            coords[0] = mouseX;
            coords[1] = mouseY;
            
            //start the drawing when mouse move
            stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseHandler);
        }
        else if (e.type == "mouseUp") {
            //remove the mouse move handler once mouse button is released
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseHandler);
        }
        else if (e.type == "mouseMove") {
            //pushing into the mouse move the
            cmd.push(2);			//draw command
            coords.push(mouseX);	//coordinates to draw line to
            coords.push(mouseY);
            redraw();				//execute the drawing command
        }
    }
    /**
     * Method to draw the line(s) as defined by mouse movement
     */
    private function redraw():void {
        graphics.clear();	//clearing all previous drawing 
        graphics.lineStyle(_thickness, _col, _alpha);
        graphics.drawPath(cmd, coords);
    }
    
}

En Flash, el uso del objeto graphics para dibujar de esta manera utiliza el procesamiento en modo retenido, lo que significa que las propiedades de las líneas individuales se almacenan por separado, a diferencia del procesamiento en modo inmediato, donde solo se almacena la imagen final. (Los mismos conceptos existen en otras plataformas de desarrollo; por ejemplo, en HTML5, dibujar en SVG usa el modo retenido, mientras que dibujar en lienzo usa el modo inmediato).

Si hay muchas líneas en la pantalla, entonces almacenarlas y volver a renderizarlas todas por separado puede hacer que su juego sea lento y lento. La solución dependerá de su plataforma: en Flash, puede usar BitmapData.draw () para almacenar cada línea en un solo mapa de bits una vez que se haya dibujado.

Paso 9: Nivel de muestra

Aquí he creado una demostración para el nivel de muestra de un juego Spot the Difference. ¡Echale un vistazo! La fuente completa está en Sample2.as de la descarga de la fuente.

Conclusión

Gracias por leer este artículo; Espero que te haya dado una idea para construir tu propio juego. Deje algunos comentarios si hay algún problema con el código y le responderé lo antes posible.