Comunidad de diseño web y desarrollo en internet online

Codigo para que un objeto se dezplaze hacia donde doy click

Citar            
MensajeEscrito el 15 Sep 2009 05:07 pm
necesito el codigo para q mi personaje, se desplaze caminando hasta donde doy click, como lo hace en la aplicacion de facebook "yoville" o en el juego Age of Empires, donde el personaje camina por donde yo vaya dando clicks

:swat:

Por DieMx

3 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 16 Sep 2009 07:46 am
en AS3...... aclaro....

Por DieMx

3 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 16 Sep 2009 03:30 pm
Todo problema complejo lo abordaremos aproximándonos poco a poco
1.-Hacer que un MC se desplaze desde su posición

Código ActionScript :

//supongo que tienes un MC con nombre de instancia "mimc" en tu película
mimc.addEventListener(Event.ENTER_FRAME,moverMc)
function moverMc(e:Event){
    mimc.x+=2
    mimc.y+=3
}

2.-Hacer que el MC se desplaze con una velocidad dada, p.e. 5 pixels por cada fps

Código ActionScript :

//supongo que tienes un MC con nombre de instancia "mimc" en tu película
mimc.addEventListener(Event.ENTER_FRAME,moverMc)
mimc.vel=5  //lo pongo aquí poque va a poder variar
mimc.angulo_rad=30*Math.PI/180;
function moverMc(e:Event){
    mimc.x+=mimc.vel*Math.cos(mimc.angulo_rad)
    mimc.y+=mimc.vel*Math.sin(mimc.angulo_rad)
}

Bueno, ya que MAth.cos y MAth.sin son funciones muy leeentas, no tenemos porqué calcularlas SIEMPRE -en cada ENTER_FRAME- así que podemos escribir

Código ActionScript :

//supongo que tienes un MC con nombre de instancia "mimc" en tu película
mimc.addEventListener(Event.ENTER_FRAME,moverMc)
mimc.vel=5  //lo pongo aquí poque va a poder variar
mimc.angulo_rad=30*Math.PI/180;
mimc.inc_x=mimc.vel*Math.cos(mimc.angulo_rad)
mimc.inc_y=mimc.vel*Math.sin(mimc.angulo_rad)
function moverMc(e:Event){
    mimc.x+=mimc.inc_x
    mimc.y+=mimc.inc_y
}


3.-Mover un MC hacia un punto dado X0,Y0

Código ActionScript :

mimc.addEventListener(Event.ENTER_FRAME,moverMc)
mimc.vel=5  //lo pongo aquí poque va a poder variar
X0=350
Y0=300
mimc.angulo_rad=Math.atan2(mimc.x-X0,mimx.y-Y0)
mimc.inc_x=mimc.vel*Math.cos(mimc.angulo_rad)
mimc.inc_y=mimc.vel*Math.sin(mimc.angulo_rad)
function moverMc(e:Event){
    mimc.x+=mimc.inc_x
    mimc.y+=mimc.inc_y
}


4.-Complicándolo: nuestro MC sólo se pude mover en horizontal, vertical o en diagonal
Aquí hay mucho que explicar. Así que algo de literatura. Nuestro MC se puede mover de 8 modos distintos. Así que vamos a hacer un ejercicio en el que un MC se mueva aleatoriamente en cualquiera de esas direcciones

Código ActionScript :

mimc.addEventListener(Event.ENTER_FRAME,moverMc)
mimc.vel=5  //lo pongo aquí poque va a poder variar
var angulo:Array=new Array(0,45,90,135,180,225,270,315)
mimc.angulo_rad=Math.PI/180*angulo[(Math.floor(angulo.length*Math.random()))]
mimc.inc_x=mimc.vel*Math.cos(mimc.angulo_rad)
mimc.inc_y=mimc.vel*Math.sin(mimc.angulo_rad)
function moverMc(e:Event){
    mimc.x+=mimc.inc_x
    mimc.y+=mimc.inc_y
}

Bueno, el problema es que nuestro MC no queremos que se mueva aleatoriamente, sino hacia un punto dado. Luego, en cada ENTER_FRAME vamos a tener que averiguar el ángulo que queremos, y usar de nuevo esos fastidiosos Math.cos y Math.sin. Así que voy a plantear el problema con un array de objetos. No te preocupes que es fácil

Código ActionScript :

mimc.addEventListener(Event.ENTER_FRAME,moverMc)
mimc.vel=5  //lo pongo aquí poque va a poder variar
var direcciones:Array=new Array({x:1,y:0},
                                              {x:1,y:1},
                                              {x:0,y:1},
                                              {x:-1,y:1},
                                              {x:-1,y:0},
                                              {x:-1,y:-1},
                                              {x:0,y:-1},
                                              {x:1,y:-1});
var index=Math.floor(8*Math.random())
mimc.inc_x=mimc.vel*direcciones[index].x;
mimc.inc_y=mimc.vel*direcciones[index].y;
function moverMc(e:Event){
    mimc.x+=mimc.inc_x
    mimc.y+=mimc.inc_y
}

Bueno, eso no es tan así, porque en diagonal se movería el doble de rápido. Se soluciona, cuando sea horizontal o vertical, haciendo que la x y la y valgan Math.sqrt(2) -la raiz cuadrada de 2-
5.-Queda que, en el onenterFrame, averiguar la dirección que quiere tomar, pero lo dejo para luego

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Sep 2009 04:46 pm
Gracias por la respuesta, estara probandola, si tienes mas avances seria un gusto revisarlos

Por DieMx

3 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 17 Sep 2009 04:55 pm
Es cuestión de ver los casos para averiguar la dirección. aunque le voy a añadir al array una dirección que va a ser "estar parado"

Código ActionScript :

var direcciones:Array=new Array({x:0,y0},
                                              {x:1,y:0}, 
                                              {x:1,y:1}, 
                                              {x:0,y:1}, 
                                              {x:-1,y:1}, 
                                              {x:-1,y:0}, 
                                              {x:-1,y:-1}, 
                                              {x:0,y:-1}, 
                                              {x:1,y:-1}); 

Trato de hacer un dibujo en ASCII, con las direcciones posibles

Código :


6  7  8
 \ | /

5--0---1

 / | \
4  3  2

supongamos que nuestro MC quiere llegar a X0,Y0
hallemos
dist_x=X0-mimc.x
dist_y=Y0-mimc.y

Si dist_x=0, tenemos los casos dist_y>0, dist_y<0 ó dist_y=0
Si dist_x>0,tenemos los casos dist_y>0, dist_y<0 ó dist_y=0
Si dist_x<0,tenemos los casos dist_y>0, dist_y<0 ó dist_y=0
Vale, es cuestión de poner una serie de "ifs" dentro del moverMC

Código ActionScript :

index=0
dist_x=X0-mimc.x
dist_y=Y0-mimc.y
if (dist_x==0){
      if (dist_y>0){
        index=7
      }else{
          if (dist_y<0){
               index=3
          }else{
               index=0
          }
      }
}
if (dist_x>0){
      if (dist_y>0){
        index=2
      }else{
          if (dist_y<0){
               index=8
          }else{
               index=1
          }
      }
}
if (dist_x<0){
      if (dist_y>0){
        index=4
      }else{
          if (dist_y<0){
               index=6
          }else{
               index=5
          }
      }
}

puff, demasiados "ifs" ¿no crees?
Aquí es donde cuenta la imaginación y ver cómo podemos resolverlo "reordenando" el array
Veamos qué tal con estos números

Código :


7  1  4
 \ | /

6--0---3

 / | \
8  2  5

Vemos que, por columnas
7=6+1
6=6+0
8=6+2

1=0+1
0=0+0
2=0+2

4=3+1
3=3+0
5=3+2

Esto es, para hallar el "index" sólo necesitamos dos sumas. Lo pongo primero con "ifs"

Código ActionScript :

if (dist_x<0){
    index=6
}else{
    if (dist_x>0){
        index=3
    }else{
        index=0
    }
}
if (dist_y<0){
    index=index+1
}else{
    if (dist_y>0){
        index=index+2
    }
}

Vemos que hemos reducido los "ifs"
Si lo ponemos con el operador módulo queda más compacto

Código ActionScript :

index=(dist_x<0)? 6 :((dist_x>0)? 3 : 0)
index+=((dist_y<0)? 1 : ((dist_y>0)? 2 : 0))


El motivo de ponerlo con el operador módulo no es por ganas de joder, es porque es más rápido que un "if".

Así que nuestra función moverMc quedará como, recordemos que, para que funcione hay que reordenar el array

Código ActionScript :

function moverMc(e:Event){ 
    var dist_x=X0-mimc.x
    var dist_y=Y0-mimc.y
    var index=(dist_x<0)? 6 :((dist_x>0)? 3 : 0)
    index+=((dist_y<0)? 1 : ((dist_y>0)? 2 : 0))
    mimc.x+=mimc.vel*direcciones[index].x;
    mimc.y+=mimc.vel*direcciones[index].y;
} 


Vale, ahora sólo queda
1.-añadir al stage un MouseEvent.CLICK y, en la función cambiar los valores de X0 e Y0 por los de la x e y del ratón
2.-Hacer que no vaya a "saltos", esto es que si se mueve en una diagonal, no sobrepase la horizontal de la posición -si no, se movería siempre en diagonal arriba-abajo-arriba-abajo en momento que llegara a la posición horizontal.

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 29 Sep 2009 05:05 pm
viejo aki tengo el codigo para que el muñeco me busque la pocision del mouse, ahora necesito que gire sobre su eje sin moverse siguiendo la pocision del mouse.....

Código :

package {

   import fl.transitions.Tween;
   import fl.transitions.*;
   import fl.transitions.easing.*;
   import flash.display.MovieClip;
   import flash.events.MouseEvent;

   public class muñecomoviendose extends MovieClip {

      private var Mmov:Simbolo1 = new Simbolo1();

      public function muñecomoviendose():void {
         Mmov.izq.visible=false;
         Mmov.der.visible=false;
         Mmov.espalda.visible=false;
         Mmov.x=100;
         Mmov.y=100;
         addChild(Mmov);
         stage.addEventListener(MouseEvent.CLICK, MoverMuñeco);


      }


      private function MoverMuñeco(evento:MouseEvent):void {
         var mover:Tween=new Tween(Mmov,"x",None.easeInOut,Mmov.x,mouseX,2,true);
         var mover2:Tween=new Tween(Mmov,"y",None.easeInOut,Mmov.y,mouseY,2,true);
         
         if (Mmov.y>mouseY) {
            Mmov.frente.visible=false;
            Mmov.espalda.visible=true;
            Mmov.izq.visible=false;
            Mmov.der.visible=false;

         } else {
            Mmov.frente.visible=true;
            Mmov.espalda.visible=false;
            Mmov.izq.visible=false;
            Mmov.der.visible=false;

         }
         if (Mmov.x>mouseX) {
            Mmov.frente.visible=false;
            Mmov.espalda.visible=false;
            Mmov.izq.visible=false;
            Mmov.der.visible=true;

         } else {
            Mmov.frente.visible=false;
            Mmov.espalda.visible=false;
            Mmov.izq.visible=true;
            Mmov.der.visible=false;

         }
      }
   }
}

Por DieMx

3 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 29 Sep 2009 05:15 pm
En General, usar un Tween para mover un MC "a golpe de ratón" es mala solución ¿has probado a ver qué pasa si le damos click antes de que acabe el movimiento?
Por otra parte nuestro muñeco sólo se mueve -según lo tienes tú- en horizontal y en vertical, ¿quieres que el movimiento esté "restringido" a esas direcciones? ¿quieres que también se pueda mover en diagonal?

Pero volviento a tu pregunta, usa un ENTER_FRAME y, según la posición del ratón haz visible o invisible los Mmov.frente, Mmov.espalda, etc

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 29 Sep 2009 05:26 pm
con ese codigo el se mueve en diagonal, si le doy click antes que acabe el movimiento cambia el rumbo es algo que nos ayuda mucho, el problema que tengo actualmente es que no me muestra la posicion espalda.

y que tambien kiero que haga esos giros pero sin desplazarse solo que si yo muevo el mouse sin dar click a la derecha el me muestre solo el personaje derecha.

Por DieMx

3 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 30 Sep 2009 04:07 pm
DieMx, reconozco que me he perdido. Ahora mismo no tengo ni idea de lo que quieres hacer.
Creía que tu MC se iba a mover tanto horizontal como verticalmente pero ADEMÁS en diagonal.
Así que mi idea era tener un MC (llamado "mimc") con 9 frames. el primero en blanco y lo siguientes (según indiqué en el gráfico anterior) mirando hacia arriba, mirando hacia abajo, mirando hacia la derecha, mirando en diagonal derecha hacia arriba, mirando en diagonal derecha hacia abajo, mirando en diagonal izquierda hacia arriba y mirando en diagonal izquierda hacia abajo.

Código :

7  1  4
 \ | /

6--0---3

 / | \
8  2  5

En un Array según esa direcciones la x valdrá 0,1 ó -1 y la y 0,1 ó -1
En un ENTER_FRAME, calculo la dirección donde tiene que ir e incremento la posición según el array de direcciones.
Quedaba sólo hacer un gotoAndStop(index) para que nuestro MC muestre sus direferentes caras.
Además, en el propio ENTER_FRAME podemos, si está parado, hacer que "mire al ratón".
Pongo todo el código, suponiendo que tengo un MC llamado "mimc" en el escenario:

Código ActionScript :

//nuestro Array de direcciones. Cuando sólo se mueve horizontal o verticalmente
//le incremento la raiz cuadrada de 2, en lugar de 1. Esto hará que vaya igual de rápido en diagonal
//que en horizontal
      private var direcciones:Array=new Array({x:0,y:0}, 
                   {x:0,y:-Math.SQRT2},  
                                                {x:0,y:Math.SQRT2},  
                                                {x:Math.SQRT2,y:0},  
                                                {x:1,y:-1},  
                                                {x:1,y:1},  
                                                {x:-Math.SQRT2,y:0},  
                                                {x:-1,y:-1},  
                                                {x:-1, y: 1 } );
//En dos variables X0 e Y0 almacenaré dónde se ha pulsado con el ratón
      private var X0:Number;
      private var Y0:Number;
//velocidad es un factor por el que multiplicaré
      private var velocidad:Number = 3;
//velocidad2 es el cuadrado de la velocidad anterior
      private var velocidad2:Number = velocidad * velocidad
//finalmente guardo en una variable la "cara_actual" que muestra
      private var cara_actual:int;
      
//añado el listener al stage
      stage.addEventListener(MouseEvent.MOUSE_DOWN, cambiarDireccion);
//añado el listener a mimc
      mimc.addEventListener(Event.ENTER_FRAME, moverMc);
//La función cambiarDirección simplemente iguala las variables X0 e Y0 a donde se ha pulsado
      private function cambiarDireccion(e:MouseEvent):void {
         X0 = e.stageX;
         Y0 = e.stageY;
      }
//La función importante, la de mover
      private function moverMc(e:Event):void{  
//calculo el "index"
         var dist_x:Number=X0-mimc.x 
         var dist_y:Number=Y0-mimc.y 
         var index:int=(dist_x<0)? 6 :((dist_x>0)? 3 : 0) 
         index += ((dist_y<0)? 1 : ((dist_y>0)? 2 : 0)) 
//si dist_x*dist_x es menor que la velocidad al cuadrado, directamente
//igualo mimc.x a X0
//Si no es así incremento la x en velocidad*direcciones[index].x
         mimc.x=((dist_x*dist_x)<velocidad2)? X0 :mimc.x+(velocidad*direcciones[index].x); 
//idem para mimc.y
         mimc.y = ((dist_y * dist_y) < velocidad2)? Y0 :mimc.y + (velocidad * direcciones[index].y); 
//si index es distinto de 0, vamos, si no está parado
         if (index != 0){
            if (index != cara_actual) {
                                        mimc.gotoAndStop(index)
                                        cara_actual=index
            }
//Si está parado, calcularemos el "index" pero no respecto a X0,Y0 sino respecto a la posición del ratón
         }else {
            dist_x=stage.mouseX-mimc.x 
            dist_y=stage.mouseY-mimc.y 
            index=(dist_x<0)? 6 :((dist_x>0)? 3 : 0) 
            index += ((dist_y<0)? 1 : ((dist_y>0)? 2 : 0)) 
//idénticamente, si index!=cara_actual, haremos el gotoAndStop(index)
            if (index != cara_actual) {
                                        mimc.gotoAndStop(index)
                                        cara_actual=index
            }
         }
      }  
   }


Vale, si has entendido algo, no te será muy difícil hacer algo parecido pero SÓLO con CUATRO direcciones. Es cuestión de que calcules bien el "index". Recuerda que somos nosotros los que elegimos dónde poner cuándo va hacia la derecha, cuando hacia la izquierda, cuándo arriba y cuándo abajo. Vamos tus direcciones serán, p.e.

Código :

   1
   |

3--0---4

   |
   2

NOTA:Lo del MC con 9 frames es algo arbitrario, también podríamos tener un MC con, por ejemplo 9*4 frames (cada movimiento con 4 frames). En tal caso el gotoAndStop(index) se cambiará por un gotoAndPlay(index*4)

Por Eliseo2

710 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.