Desarrollo de juegos

Impact Js Hacer que la bola vaya hacia donde he pulsado

B
[Borrado] #1 Feb '14

Buenas noches, acudo una vez más a vuestra sabiduría para resolver un par de dudas. La primera es saber por qué en el evento update de una entidad por muy alta que ponga la propiedad this.vel.x la velocidad siempre es la misma y no cambia.

La segunda duda es que no sé como hacer que la bola vaya hacia donde pulso con el ratón. Adjunto ejemplo para que veáis lo que quiero hacer.

spoiler

He conseguido que la X y la Y cambie según pulse a la derecha/izquierda arriba/abajo de la bola. Pero no consigo que se dirija concretamente hacia el punto en el que he hecho click.

Un saludo y gracias.

Edit: adjunto código #4

ig.module(
	'game.entities.bola'
)
.requires(
	'impact.entity'	
)
.defines(function(){
	var iniciadoMovimiento = false;	

EntityBola = ig.Entity.extend({

	size: {x:20, y:20},
	collides: ig.Entity.COLLIDES.ACTIVE,

	animSheet: new ig.AnimationSheet('media/BolaAzulPeque.png', 20, 20),
	bounciness: 1,  //Hace que rebote, si es 0 no rebota

	init: function(x, y, settings){
		this.parent(x, y, settings);
		this.addAnim('idle', 1, [0]);
	},

	update: function(){
		this.parent();

		var velY, velX;
		velY = 100;
		velX = 100;

		if ((iniciadoMovimiento == true) && (ig.input.pressed('empezar')))
		{
			iniciadoMovimiento = false;
		}

		if (iniciadoMovimiento == false)
		{								
			if (ig.input.pressed('disparar'))
			{
				iniciadoMovimiento = true;

				if (ig.input.mouse.x < this.pos.x)
				{				
					//velX = velX * -1;
				}				

				if (ig.input.mouse.y < this.pos.y)
				{
					velY = velY * -1;
				}

				this.vel.x = velX;
				this.vel.y = velY;				
			}
		}
	},

	draw: function() {
		this.parent();				       
	}
});
});
Jastro
Jastro #2 Feb '14 Moderador

#1 podrias poner el codigo? me estoy imaginando el problema, pero con el codigo me haces el trabajo mas facil ;P

1 respuesta
B
[Borrado] #3 Feb '14

#2 ok ¿cómo se hace para que aparezca el código correctamente sin que sea texto plano?

1 respuesta
Jastro
Jastro #4 Feb '14 Moderador

#3 pon [ code]El codigo que quieres poner [ /code]

1
cabron
cabron #5 Feb '14 Judas

La forma de que algo vaya en la dirección del ratón, es siempre igual sin importar que uses (aunque luego hay que adaptarlo obviamente a cada librería)

Transforma las coordenadas de pantalla donde esté el ratón al sistema de coordenadas de tu simulación, luego crea un vector dirección entre el punto actual donde está el objeto y el punto donde se ha pinchado el ratón (con las coordenadas transformadas).

Una vez que tienes la dirección en un vector, solo tienes que usarlo para aplicar movimiento a la posición actual de forma constante en cada actualización del juego, o si tienes un simulador de física, multiplica el vector dirección por una velocidad escalar, para obtener un vector velocidad, y aplícalo directamente sobre el cuerpo físico del objeto.

Te pondría un ejemplo pero no he usado nunca ImpactJS.

Si no te has enterado de nada, repasa un poco el tema de los vectores y coordenadas, sin esto no vas a llegar muy lejos en el desarrollo de juegos (hablo de vectores de física, no de arrays, que a veces también se les llama vectores)

2 2 respuestas
Jastro
Jastro #6 Feb '14 Moderador

Lo imaginaba, es lo que dice #5.

#1 Tienes que añadirle las coordenadas de la camara, eso lo consigues con:

ig.game.screen.x
ig.game.screen.y

Añadeselo a los if que quede asi:

if ((ig.input.mouse.y+ig.game.screen.y) < this.pos.y)

Y ya deberia tirar.

1
B
[Borrado] #7 Feb '14

#5 a ver si lo pillo. Por ejemplo la bola está en (3,4) y hago click en (5,6) el vector director que marca la dirección sería (2,2). Tendría que multiplicarlo en cada actualización por una constante y esa X e Y sería cada posición de la bola?

cabron
cabron #8 Feb '14 Judas

No exactamente, la forma completa de hacerlo (te lo pongo con código inventado por que esto vale para cualquier librería que uses) sería:

  1. Transformar las coordenadas de pantalla a mundo. La pantalla tiene un tamaño fijo que se mide en pixeles, (ej: 800x600) y cuando pinchas con el ratón, tienes una coordenada en pixeles, sin embargo normalmente en un juego el mundo es más grande de lo que se ve en pantalla, y las unidades se miden en metros para poder hacer simulaciones físicas de forma más fácil. La mayoría de librerías tienen su propio método para hacer esto, ya que suele ser trabajo de la librería crear la proyección que muestra el mundo por pantalla:

OnClick(eventoRaton)
{
coordenadasMundo = TransformarACoordenadasMundo (eventoRaton.obtCoordenadasPantalla())
}

  1. Con las coordenadas donde el ratón ha pinchado pero transformadas a las coordenadas del mundo, necesitas obtener un vector dirección entre donde está el objeto, y donde se ha pinchado:

vectorDirección = coordenadasMundo - Objeto.posicionActual

  1. Ahora tienes que normalizar el vector, esto simplemente significa que el vector va a seguir apuntando al mismo, pero va a tener magnitud 1.

vectorDirección = vectorDireccion.normalizar()

  1. El vector dirección te dice "hacia donde", pero no "cuanto". Para eso tienes que multiplicar el vectorDirección por la velocidad a la que quieras que se mueva. Por eso se normaliza el vector para que tenga magnitud 1. Si no hicieses eso, al multiplicar el vector por una velocidad escalar constante, te saldrían velocidades con magnitudes diferentes según si el destino está más lejos o más cerca, pero si lo normalizas la magnitud de la velocidad siempre será la misma.

vectorVelocidad = vectorDireccion * velocidad

  1. Lo anterior solo lo tienes que hacer una vez, en el momento en el que detectes un evento de ratón, ahora viene lo que tendrías que hacer en cada "update", aplicar el vector velocidad a la posición el objeto. He simplificado la operación, pero ten en cuenta que si la velocidad está en m/s tendrás que usar el deltatime entre cada actualización para ajustar cuanto del vector aplicar en cada update, o de lo contrario te iría más rápido/lento según el número de frames por segundo que se estén dibujando. De nuevo aquí la mayoría de librerías suelen tener facilidades para obtener y usar el deltaTime:

onUpdate()
{
Objeto.posicion = objeto.posicion + vectorVelocidad
}

2 1 respuesta
B
[Borrado] #9 Feb '14

#8 Impresionante. Ya lo tengo. Lo he hecho en la hora de la comida. Cuando llegue a casa posteo gif y el código por si le sirve a alguien que esté empezando. Ahora tengo un problema menor, ya que al cambiar yo "manualmente" la x e y, el motor no tiene en cuenta las colisiones con los bordes, pero eso es algo que puedo arreglar yo mismo, o eso espero. Muchísimas gracias. Me habéis ayudado una vez más.

B
[Borrado] #10 Feb '14

Estoy pensando en que no va a ser fácil lo de comprobar las colisiones, porque vale, yo puedo detectar cuando colisiona con un borde o con un objeto, pero ¿hacia dónde tiene que ir la bola después de colisionar? ahí ya no tengo punto de destino. ¿Hay algún algoritmo mágico para saber hacia dónde tiene que rebotar?

1 respuesta
Hopper
Hopper #11 Feb '14

Ni idea, pero te ha bajado una raya del wifi.

1 respuesta
Gif
Gif #12 Feb '14

#10 niegas la constante de velocidad y haces el efecto de rebote.

1 2 respuestas
B
[Borrado] #13 Feb '14

#11 no lo pillo
#12 en llegar a casa lo pruebo. Gracias

Edit: #11 jaja sí, pero eso es lo menos importante ahora mismo

B
[Borrado] #14 Feb '14

.

Usuarios habituales

Tags