JUEGO: CARRITOS DE CARRERAS ActionScript 2.0 CIRCUITO DE LA CARRERA Teclas a usar: Jugador 1 W A S D Jugador 2 Flechas 1
JUEGO: CARRITOS DE CARRERAS Paso 1: Creación del carro y movimiento Empezaremos por ver como se realiza el carro y el movimiento del mismo, para ello dibuja un carro como más te guste, yo he dibujado este que miras aquí debajo: Es importante que lo dibujes de lado, luego mediante una función podremos elegir hacia donde quieres que mire. Bien, una vez lo tienes dibujado debes convertirlo en un clip de película y llamarlo en la biblioteca AccionesCarroAzul. En este clip meteremos las acciones para girar, colisionar, etc. De momento pondremos solo las acciones de girar, más adelante veremos cómo hacerlo para que colisione con las paredes y el otro carro. Las acciones que debes poner ahora son estas: onclipevent (load) { _root.speeda = 0; _root.angle1 = 270; onclipevent (enterframe) { radian = Math.PI/180*_root.angle1; _parent._x += (_root.speeda*math.cos(radian)); _parent._y += (_root.speeda*math.sin(radian)); _parent._rotation = _root.angle1; Explicación del código: Primero inicializamos las variables speeda y angle1. Speeda, es la velocidad (empieza parado), y angle1 es la dirección en la que empieza mirando. Si angle1 está en 0 empezará mirando hacia la derecha, yo lo he puesto en 270, por lo tanto empezará mirando 270º más hacia la derecha, es decir, mirando hacia arriba. Ver imagen: 2
Con la variable radian, calculamos el ángulo de giro, fíjate que _root.angle1 aparece aquí, y ten en cuenta que aunque cambiemos el valor para posicionarlo mirando hacia donde quieras, esta fórmula funcionara igual. Luego con el coseno y el seno (math.cos y math.sin) calculamos cuanto tiene que moverse en x e y según la velocidad que lleva (_root.speeda) en ese momento nuestro vehículo. Por último, aplicamos la rotación que hemos guardado en _root.angle1. Esta variable la modificaremos con nuestro teclado, lo veremos en el siguiente paso. Bueno, ahora tenemos nuestro carro pero aún no se mueve, sólo hemos aplicado las fórmulas, tenemos que darle valores a esas fórmulas a través de nuestro teclado, vamos a ver cómo... Este clip de película, conviértelo de nuevo en clip de película, puedes llamarlo Jugador1, Carro1 o como más te parezca, pero en el nombre de variable ponle "carroazul". Luego, ponle las siguientes acciones: onclipevent (enterframe) { // Primer IF, incremento y decremento del giro if (_root.speeda>0 _root.speeda<0) { if (Key.isDown(Key.RIGHT)) { _root.angleclav1 = 4; else if (Key.isDown(Key.LEFT)) { _root.angleclav1 = -4; 3
//Segundo IF,velocidad y desaceleracion en la marcha adelante if (Key.isDown(Key.UP)) { if (_root.speeda<8) { _root.speeda += 0.5; else { if (_root.speeda>0) { _root.speeda -= 0.1; if (_root.speeda<0.5) { _root.speeda = 0; //Tercer IF,velocidad y desaceleracion en la marcha atras if (Key.isDown(Key.DOWN)) { if (_root.speeda>-4) { _root.speeda--; else { if (_root.speeda<0) { _root.speeda = _root.speeda+0.1; if (_root.speeda>0.5) { _root.speed1 = 0; _root.angle1 += _root.angleclav1; _root.angleclav1 = 0; Explicación del código: En el primer "if" vemos que cuando el carro se mueve (_root.speeda>0 _root.speeda<0), este puede girar a través del Key.isDown, 4
aumentando o reduciendo el angulo (angleclav) en saltos de 4. Puedes modificar este valor para hacer que vaya más rápido o más lento (para el juego a entregar debes cambiar los valores). El segundo "if", sirve para calcular la velocidad que tendrá el carro hacia delante, su aceleración y su deceleración. La velocidad la podemos ver en _root.speeda<8, el carro no podrá de ir más rápido de 7 "puntos". Acelerará a un ritmo de 0.5 "puntos" (_root.speeda+=0.5), y decelerará cuando no toquemos la flecha arriba (_root.speeda-=0.1). Si te fijas también verás que cuando llega a 0.5 de velocidad, esta cambia directamente a 0, esto lo he hecho para evitar bucles infinitos y así hacer que cuando llegue a 0 deje de restar, sino estaría restando siempre. El tercer "if", calcula la velocidad en marcha atrás. Básicamente funciona igual que el anterior, sólo que los valores están ajustados para que vaya más lento, dado que la marcha atrás del carro es más lenta, que la marcha adelante. Por último, añadimos a _root.angle1, la cantidad de giro deseada e inicializamos _root.angleclav. Bien, pues por ahora ya está, ya tienes tu carro que se mueve por la pantalla. Ajustar los fps (fotogramas por segundo), yo lo he puesto a 36 y se mueve bastante suave. Paso 2: Colisiones con los bordes Vamos a hacer que nuestro carro colisione contra las paredes, en el siguiente paso crearemos otro carro, y veremos como colisionan entre sí, de una manera un poco rudimentaria, pero efectiva a la hora de hacerlo jugable. Primero que todo ajusta las medidas de la película, mi escenario mide 900x900, pero tú puedes hacerlo todo lo grande o pequeño que quieras, aunque 5
preferiblemente hazlo grande para luego trabajar mejor cuando hagamos el circuito. Una vez tengas las medidas adecuadas entra dentro del carro haciendo doble click, ahora tienes que estar en el clip de película interno, que contenía las fórmulas. Añade a lo que había en el evento onclipevent (enterframe) lo siguiente al final del todo: //Colisión contra las paredes Derecha if (_parent._x>880) { _parent._x = 880; if (_root.speeda>0) { _root.speeda--; else { _root.speeda++; //Izquierda if (_parent._x<20) { _parent._x = 20; if (_root.speeda>0) { _root.speeda--; else { _root.speeda++; //Abajo if (_parent._y>880) { _parent._y = 880; if (_root.speeda>0) { _root.speeda--; else { _root.speeda++; 6
//Arriba if (_parent._y<20) { _parent._y = 20; if (_root.speeda>0) { _root.speeda--; else { _root.speeda++; Explicación del código: Si te fijas, cada segmento está claramente marcado con una etiqueta que indica lo que detecta cada uno, nosotros tomaremos como ejemplo el de Izquierda. Básicamente la colisión se produce cuando el carro se acerca a una de las paredes, en este caso izquierda, por lo tanto si mi carro mide 40 pixels de largo, cuando esté a 20 significará que estará tocando la pared (if (_parent._y<20)), entonces lo que hago es que no avance (_parent._y=20). Como penalización, lo que hago es que si toca la pared pierde velocidad, por eso si va hacia adelante (if (_root.speeda>0)) hacemos _root.speeda--, de lo contrario (else) sumamos _root.speeda++. Paso 3: Colisiones con otro vehículo Para empezar este paso, necesitamos otro carro igual que el anterior puedes duplicar los clips si lo prefieres, yo por mi parte he hecho uno nuevo y luego he vuelto a hacer los pasos que ya he explicado en los pasos 1 y 2, pero lo que SÍ ES INDISPENSABLE, es que los nombres de las variables de los vehículos sean diferentes. Si te fijas, todas las variables del carro azul acaban con la letra "a" y las del carro rojo no, por ejemplo a _root.speeda yo la he llamado _root.speed en el otro carro. Una vez hayas acabado de realizar tu nuevo carro, yo he hecho este deportivo... 7
...tendrás que repetir los pasos anteriores de los (Pasos 1 y 2) y a este nuevo carro llamarlo "carrorojo", como nombre de variable. Ahora dentro del clip del carro rojo, pones debajo del control de colisiones contra los muros, las siguientes acciones: //Colisión contra el otro carro with (_root.carrorojo) { if (_root.carroazul.hittest(getbounds(_root).xmax)) { _root.speed = 0; if (_root.carroazul.hittest(getbounds(_root).xmin)) { _root.speed = 0; if (_root.carroazul.hittest(_x, getbounds(_root).ymax)) { _root.speed = 0; if (_root.carroazul.hittest(_x, getbounds(_root).ymin)) { _root.speed = 0; Explicación del código: Con la función with (_root.carrorojo) lo que hacemos es que todo lo que hay entre sus llaves solo afecte al clip carrorojo, no es una función que se utilice en exceso pero va bastante bien. Luego utilizamos el hittest con getbounds, que sirve para calcular los límites que tiene nuestro clip de película y hacer que si "carrorojo" da con uno de los bordes de "carroazul", la velocidad se ponga a 0. 8
Esto produce un frenado cuando impactan ambos vehículos, y lo hace de una manera muy sencilla bastante jugable. Paso 4: Seguimiento del circuito Lo que vamos a hacer es lo siguiente. Primero dibujaremos los diferentes tramos de la pista, es decir, primero la recta, luego un giro a la derecha, otro a la izquierda, etc... cada uno de estos tramos los convertiremos en un clip de película que contendrá las siguientes acciones: onclipevent (load) { fina = 0; finr = 0; onclipevent (enterframe) { if (this, hittest(_root.carroazul)) { if (fina == 0) { _root.ok1 += 1; fina = 1; if (this, hittest(_root.carrorojo)) { if (finr == 0) { _root.ok2 += 1; finr = 1; 9
También tendremos que dibujar una meta que contendrá estas acciones: onclipevent (load) { nv1 = 0; nv2 = 0; _root.ok1 = 0; _root.ok2 = 0; onclipevent (enterframe) { // Llegada a meta del carro azul if (this, hittest(_root.carroazul) && _root.ok1 == 11) { nv1 = nv1+1; _root.jugador1 = nv1+"ª Vuelta"; _root.ok1 = 0; _root.t1.fina = 0; _root.t2.fina = 0; _root.t3.fina = 0; _root.t4.fina = 0; _root.t5.fina = 0; _root.t6.fina = 0; _root.t7.fina = 0; _root.t8.fina = 0; _root.t9.fina = 0; _root.t10.fina = 0; _root.t11.fina = 0; // Llegada a meta del carro rojo if (this, hittest(_root.carrorojo) && _root.ok2 == 11) { nv2 = nv2+1; _root.jugador2 = nv2+"ª Vuelta"; _root.ok2 = 0; _root.t1.finr = 0; _root.t2.finr = 0; 10
_root.t3.finr = 0; _root.t4.finr = 0; _root.t5.finr = 0; _root.t6.finr = 0; _root.t7.finr = 0; _root.t8.finr = 0; _root.t9.finr = 0; _root.t10.finr = 0; _root.t11.finr = 0; Explicación del código: Primero podemos ver que en cada tramo comprobamos mediante una variable interna llamada "fina". Cuando el carro toca el tramo, si fina es igual a 0 aumentamos en 1 ok1. En el momento que toquemos la meta si has pasado por todos los tramos ok1 tiene que valer 11, por lo tanto, sumaremos una nueva vuelta y pondremos a 0 otra vez las variables "fina" de todos los tramos. En el código del tramo fíjense que es muy importante poner "fina" en 1 para que no haya un "tramposo" que se dedique a pasar 11 veces por un mismo tramo y no siga el circuito. Es una manera poco ortodoxa de hacer que sigan el circuito, aunque es igual de efectivo. 11