Te mostramos como se creó Penalty Trivia Crack, un videojuego de fútbol y trivia, multiplataforma, gratuito, disponible para iOS y Android.
Hace unos meses una empresa me contrató para que hiciera un juego.
Una nueva empresa llamada Champ Productions, que buscaba hacer un juego de fútbol mezclado con trivia.
Cómo fue ese proceso? Te voy a mostrar cómo empezó todo.
Roberto Miranda: Bueno, la verdad que un gusto conocerlos a todos. Como entenderán digamos que este proyecto es nuestra vida, es el futuro de nuestros hijos, entonces es pues pues nada, ponernos también a la orden para lo que ustedes necesiten, y pues nada, chévere.
Alvaro Cuellar: Nuevamente conocerlos y si tienen dudas acerca de lo que es el proyecto o de lo que es la empresa como tal pues creo que este es un buen momento pues para contestarles esas preguntas.
Soy Iki. Como llegué ahí?. Para eso es necesario que primero conozcas el equipo.
José Guerra Prado: Sergio es nuestro artista 2D y animador. Es quien se encarga de hacer la magia visual. Iki que es nuestro programador estrella. Programador, investigador. Gran referente del mundo Godot en las redes. Que tiene su canal de Youtube. Escuela de Juegos es tu canal, no Iki?. Así que bueno, lo tenemos a él como especialista y la verdad es que Iki viene haciendo no esporque él esté acá yo ya se lo dije en privado pero viene haciendo un trabajo muy grande de investigación y desarrollo, desde que arrancamos con nuestras primeras conversaciones hace un par de meses, él estuvo trabajando, investigando y viendo la mejor manera para sacar esto adelante, así que tenemos un gran valor acá.
Así es soy el programador, el que trae una idea desde la cabeza de alguien al mundo real. Detrás de los personajes, estadios mundos, hay una mano invisible, códigos. Una ilusión hecha de algoritmos.
José: Néstor, que ya lo conocen, nuestro game designer. Y bueno y yo que estoy acá un poco en el rol de the project manager, producer del juego. Y bueno por el lado de Champ Productions los tenemos Alvaro y a Roberto.
Alvaro: Yo soy Alvaro Cuéllar, yo soy junto a Roberto co-fundador de esta de esta idea que nada, y también pongo la orden de ustedes para lo que necesiten cualquier duda o cualquier sugerencia que tengan sobre lo que nosotros vamos planteando pues buenísimo que las podamos resolver o debatir o lo que sea necesario.
Roberto: Pues yo soy Roberto Miranda, el otro co-fundador de Champ Productions. Un poquito como en la misma línea lo que dice Alvaro, la idea es después que la compañía cree muchos juegos, siendo nuestro primer juego el Penalty Trivia Crack. Y pues nada, digamos que mi expertise está más en el lado de las ventas y más en el lado del mercadeo. Y Sergio si existe o es un?.
José: No, si existe, lo conocemos.
Sergio: Hola, si, estoy acá.
Roberto: Pensaba que era otro computador de José o de Nestor por ahí.
Para empezar el proyecto dependemos mucho del game designer. Este se va a encargar de armar el guión, las mecánicas. Necesitamos documentos sabiendo qué es lo
que va a necesitar el juego, qué es lo que va a requerir.
Así es que comenzaron una serie de reuniones donde se expone y planea todo esto.
Nestor: Nada de palabra, todo dejarlo asentado en
un documento, todo. Porque es ahí donde te vas a remitir después.Nestor: Hoy damos como inicializado este proyecto, que es peculiar porque vamos a ir diseñando, programando, desarrollando, todo al mismo tiempo. Cuando en realidad tendriamos que primero abordar bien el diseño, el balanceo, mostrárselo al cliente, que el cliente apruebe, y ahí arrancamos. Peculiar también porque solamente dos meses o sea es algo a cien kilómetros tenemos que ir.
Ah sí, me olvidé de mencionarlo. Nos dieron dos meses para hacer un juego de fútbol, trivia, con servidor, preguntas, sistema de logueo, sistema de seguridad. Imposible?, no para mí.
Nestor: Estamos en el Drive en la carpeta de desarrollo. Como les decía, tenemos acá un backlog, con tareas. Esto lo vamos a ir completando entre todos
y entre todos lo vamos a ir viendo. Yo puse acá de programación. Un poco dividir los features que merecen, que merece el proyecto. Acá obviamente falta el tema de servidores, entonces esto chicos a completarlo de acuerdo a ustedes su visión y su manera de laburo.
Una de las cosas más difíciles de diagramar inicialmente fue la base de datos. Tené en cuenta por ejemplo que los usuarios van a tener un montón de datos. También las preguntas. Y cómo se jerarquizan éstas? es decir, yo podría pensar: bueno, más tarde agregó otra estructura, la cambio, la modificó. Pero no. Ten en cuenta que algunos datos afectan a otros. Tenés que tener en cuenta también cómo vas a codificar las contraseñas, qué sistema de seguridad vas a ofrecer, y todo esto ya tiene que estar en una etapa inicial, para poder construir desde esa base la pirámide sin que ésta se caiga.
José: Cuando tengamos el acceso al servidor se los pasamos. Arranca Sergio. Iki vos empezarías entonces con el desarrollo de videojuego.
Iki: Claro, y seguramente haya que reinterpretar lo que se envía del servidor, así que estaría bueno ir probando.
Lo que ninguno de nosotros se imaginaba es que no había servidor. Poco después nos íbamos a enterar.
Tocaba investigar cómo instalar un servidor, cual servidor, los costos de los servidores. El tiempo estaba corriendo así que me puse manos a la obra.
Decidí empezar contactando el servicio técnico de Google Cloud, preguntando cuál era el servicio más óptimo para esta tarea. Sin embargo se peleaban entre los de atención al cliente para ver cuál de los servicios me ofrecían. Todos querían ganar.
Disconforme, decidí preguntar en Amazon. La atención parecía bastante personalizada,
sin embargo tardaban un poco en responder. Tanto como que llevo esperando seis meses
por una respuesta. Al mismo tiempo salía publicado el juego New World de Amazon, muy criticado por sus servidores, por lo tanto decide dejarlos de lado.
José: Ellos ya compraron el acceso Iki, el paquete que habías armado. Entonces lo que hay que hacer es vincular la cuenta esa a tu cuenta, para poder hacer todas las configuraciones.
Roberto: Si, yo aquí lo tengo abierto Iki. Tu me dirás si lo hacemos de una vez, porque
yo te puedo dar el acceso pero creo que te quedas con un full access inclusive a mi cuenta de correo. Yo toda la confianza del mundo pero pues no creo que tú quieras tener mi cuenta de correo tampoco.Iki: Ya tengo varias.
Para poder instalar el servidor en Google Cloud, tuve que aprender Centos, PHPMyAdmin, Mysql, Vim, configuraciones de cuenta, tráfico y seguridad.
Iki: Lo que si por ahí no sé eso depende también de cómo se quieran manejar, pero lo que yo armaría primero en los gráficos también, porque el resto del menú y todo eso se puede ir cambiando se puede ir poniendo como un prototipo, pero lo que sí va a definir mucho es como esté el jugador armado, porque si se va a cambiar de camiseta o de más y el arquero esas dos cosas yo creo que una vez que estén animados después es muy difícil cambiarlo. Tenés que hacer más quilombo digo. Yo empezaría por esos lados tal vez. O cómo se va a constituir realmente el jugador.
Sergio: La imagen que tenía ya armada, el largo con el pateador y todo, si me la podrías mandar después. Porque con esa referencia ya puedo sacar los tamaños.
Nestor: Todo esto, estas imágenes que están acá en el Figma, están en el documento, en el guión técnico. Más o menos ahí va.
Iki: Bueno, como mostré más o menos en el vídeo, acá tenés la base de datos, entras directamente de acá. Primero voy a tratar de explicar cómo se sube masivamente, que justo es lo que primero les interesa, para hacerlo rápido.
Acá como se puede observar estoy haciendo un indicativo sobre la base de datos, ya que ellos van a tener que subir las miles de preguntas para que los jugadores puedan jugar y responder.
El gran problema es que esta base de datos no era tan intuitiva para un cliente poder subir las preguntas, por lo tanto nos solicitaron un sistema para poder subir a través de planillas de Excel.
Jose: Cuando ustedes nos envíen eso nosotros nos ponemos a trabajar con Iki en ese rearmado de la base de datos, para después pasarselas y seguir trabajando todo.
Sergio: Estas son 24. Después tengo. Imagínate que va a salir la pelota de ahí, y la pelota yo creo que no puede tardar un segundo.
Jose: La pelota tiene que tardar medio segundo desde el pie del pateador al arco.
Nestor: Él quiere saber si tiene que hacer la animación con el recorrido, es decir que el Spritesheet va a ser ancho, más ancho, porque el jugador se desplaza en esa misma animación.
Sergio: O si te mando todo limpio. y el recorrido lo armas vos.
Nestor: Claro, esa primera que tira no es mala Iki.
Jose: Por eso yo preguntaba lo de 1920 por 1080, porque ahi ya tiene el recorrido completo.
Iki: Te digo, lo más eficiente en teoría sería que uno arma el recorrido, por que eso sabes que va a cargar más fluido. Armarlo, todo eso, es más trabajo obviamente, inclusive para mí imagínate que no va a ser divertido tener que hacerlo.
Nestor: Esto, los assets que pasó, que ya subió en el Drive Sergio, tiene un pequeño, este es el festejo.
Iki: Ah, cierto que lo había mostrado también en la reunion eso.
Sergio: El espacio que tengo entre el jugador y la pelota, no me da para que el recorrido (que es desde donde parte hasta la pelota) quede fluido. Me va a quedar, ya lo intenté hacer así, y queda un Sprite arriba de otro, parece que está pisando dos veces en el mismo lugar.
Jose: Que esté más cerca. Es lo de menos.
Sergio: Acá lo que hice fue achicar un poquito el arco y aleje un poquito el jugador, y ahí le puse el primero y el último.
Horas de armar y coordinar animaciones para que el tiempo sea perfecto, para que el movimiento llegue a la posición exacta donde tiene que patear el jugador, y coordinarlo con la animación de festejo y de perdida.
Nestor: Si, claro, ves?. Se oscurece la pantalla. Acá, oscurece la pantalla y te tira eso. Nombre, email, contraseña, iniciar y crear.
Un menú de logueo simple de 5 o 6 botones. Cuánto tiempo puede llevar eso?.
Programo gestión de usuarios, conexión y sistemas de seguridad en PHP, conectados a una base de datos Mysql.
Genero claves de acceso SSH para hacer transferencias FTP al server.
Creo y configuro los nodos en la interfaz en Godot.
Codifico los paquetes de datos en JSON para transferir a través del protocolo HTTP.
Iki: Claro, y ellos van a dejar fija la publicidad o va a ir variando? tiene una ubicación en el servidor de su publicidad las imágenes?.
Nestor: Ahí ya estoy perdido. Es buena pregunta.
Iki: Para ver como levantarla la publicidad.
Nestor: Bien, entonces juega ronda 1. Gano?, no. Sino ganó… Se le ofrece ver publicidad para volver a jugar. Y es una publicidad larga.
Iki: Vos ronda le llamas a cinco penales?a los cinco y el sexto digamos.
Nestor: Exactamente. Entonces si decide que sí, se le muestra el nodo, se habilita el nodo de publicidad, mira la publicidad. Esto lo va a mirar por motus propio, porque lo eligió. Por eso es publicidad larga. Y vuelve a jugar la ronda. Me estoy quedando sin batería, que onda?.
Jose: La intención Iki, te cuento porque era algo
que nosotros veníamos, lo habíamos trabajado con Néstor en el proyecto de Banfield. Lo viste el juego. Era que en las vallas electrónicas atrás del arco ahí esté la publicidad in game digamos. Que funcione como una publicidad de la cancha. Y algo que habíamos hablado con Néstor, que puede dar esa sensación de pixel art, aunque no sea pixel art, es meterle Iki un
shader a la valla. Viste? hay un shader que es de efecto tipo led. Ahí lo encontré. Acá está. Entonces yo donde decía de meter el shader es acá, en esa valla.Iki: Claro cómo un shader electrónico de leds queres vos.
Acá estoy otra vez, codificando y estudiando documentación para que veas una imagen que simula luces de led en movimiento.
Iki: Primero que nada, bueno acá tenés el tutorial. Todavía no le agregué un montón de cosas,
faltan un montón de cosas. Pero te sale un cartel, va a salir un cartel. Vamos a tener que ver la dimensión en base a la pantalla, el color que va a tener y demás todavía no está definido, pero hice que ya lea la parte del tutorial automáticamente. Ves? Le pones siguiente. Tenes la otra parte. Después acá logré el efecto de led que querían. Obviamente que depende del tamaño de la imagen que va a haber acá, porque usé la de ejemplo. Eso tengo que aplicar el shader según, porque son 2 shaders. Uno es para led y otro es para movimiento, que el de movimiento fácil, el de led es un poco más complejo. Porque tiene que acompañar el led al movimiento.Sergio: El mapa en realidad es referencia visual.
Jose: Claro, pero ponele, el pin, no se vería el pin. O sea el pin quedaría atrás de esto.
Sergio: Y si se pone el cuadradito este en el medio?.
Iki: Y sino también cuando vos seleccionas puede hacerse transparente, va el pin y entra al juego. O sea se haría transparente al cuadrado.
Jose: Me gusta esa idea che. Una especie de transición animada. Cuando yo selecciono selección Colombia, esto está acá y está cerrado. Entonces yo para elegir toco, se abre, elijo
la categoría, me pone el pin, y esto se cierra. Y el pin como que titila o se agranda y se
achica, cosa de que llame la atención para tocar el pin.
Como van a poder hacer temporadas infinitas, tengo que hacer un sistema online de coordenadas, para que puedan cargar todas las que quieran.
Después de animar, crear nodos y diseñar un sistema de lectura de coordenadas online, así es cómo quedó.
Alvaro: La categorías dentro del PHP, como es más fácil para ustedes que les hacemos eso? o olvidamos la idea de que aparezca un pin ubicándolos en el mapa?.
Jose: Lo que definimos con Iki, que ya lo probamos, está funcional dentro del prototipo; es que va a haber (si quieres ahora lo mostras Iki) un campo, una columna, donde se pone la coordenada y esa coordenada va a aparecer en el mapa con un pin.
Alvaro: Si, vi que en el PHP ya Iki habilitó esto de las coordenadas.
Jose: Si, después les vamos a decir cómo van a tener que hacer para leer esa coordenada y saber donde quedaría en el mapa.
Jose: No se si ahí se está viendo.
En esta escena donde nos presentan el diseño de los arqueros, me estoy conteniendo la gracia que me genera este arquero con cabeza de semáforo.
Jose: Sería éste, éste, éste y éste.
Sergio: El que puse los dos pelados que están en el centro, el que está todo cuadrado, ese es el tamaño que es. El otro es el que lo agrande y modifiqué las dimensiones.
Jose: Metelo en la carpeta de arte así yo puedo usarlo para el trailer.
Jose: Entonces así cuando está bloqueado. Desbloqueado.
Jose: Bueno aprovecho que estamos. Recién termine la reunión con Sergio. Iki, en breve Sergio ya sube assets para que sigas integrando. Ya tenemos el asset del menú principal, me lo acaba de mostrar antes de hacer la exportación. Esa es la imagen del menú. La imagen que yo le di de referencia. Y armó esa imagen con la cancha llena de gente y encima redobló la apuesta por que lo animó Iki. Está toda la cancha animada.
Jose: Iki ya te aviso, lo que yo le pedí, el cambio que yo le pedí es que el cielo, el fondo del cielo lo haga aparte, el celeste lo haga aparte, y las nubes también. Para moverlo. Vamos a copiar y pegar muchas veces.
Así que hice un sistema de movimiento animado de nubes mediante Tweens. Este es el resultado.
Jose: El cargando se me ocurre así. Trivia Penalty Crack, la pelota gira, y el cargando vuelve otra vez a 0. Vos me dijiste que lo sabías hacer con texto el cronómetro?.
Iki: También, sí.
Jose: Porque yo puedo dibujarte y puedo darte una fuente. Puedo dibujar el cronómetro y no ponerle nada dentro, y darte la fuente de leds. Listo. Ahí ésta. Y la font ya la meto ahí adentro también. Mira, ahí lo achique y mira se ve bien.
Jose: Iki, algo que necesites?.
Iki: Un millón de dolares, un avión.
Jose: Vamos a hacer un degrade. Algo llamativo, si amarillo creo que va bien.
La animación de gol parece simple… por ahora.
Jose: Pregunta. Cuando hace el gol podemos poner un shader de papel picado?.
Iki: Podría ser. Hay que hacer también la textura del papel picado, porque vos podes poner partículas. Tenes que tener una textura.
Después de mucho trabajo en equipo así es cómo quedó.
Jose: Después la ronda de penales, si pierdo la
ronda, me debería aparecer un modal diciendo: quiere volver a jugar esta ronda de penales?.Jose: Esta re bien optimizado. Pesa 30 megas la aplicación.
Jose: Escuchame, ayer, ya tengo la Mac preparada para hacer la compilación.
Alvaro: Y yo creo que ahí cuando tenga el tutorial van a entender un poquito más la progresión, y van a querer seguir jugando. Porque ahorita siento como que no entienden muy bien la progresión, pero no es por culpa del juego digo sino por el tutorial.
Roberto: Cuando uno entra a este tablero que este ya abierto. Si lo quiere cerrar pues que lo cierre.
Alvaro: Uno si quiere interactuar con ellos para cerrarlos, no para abrirlo. Por default esté abierto.
Roberto: Como les decía, creo que la cuenta, yo hice la de Apple, Alvaro está haciendo la de Android.
Alvaro: Yo creo que eso tendríamos que verlo como decía pronto, como ver el cargue a las tiendas. Cuando podríamos hacer ese cargue a tiendas?. Cuando tendríamos ya la aplicación definitiva?.
Jose: Si todo va bien y implementamos bien el tema de Firebase, porque nos queda solamente ahora sacando el tema de Firebase, solamente nos queda implementar el tutorial, y testear obviamente. Por eso decíamos aprovechemos esta semana para hacer un testing feroz todos, después que implemente obviamente implementes el tutorial Iki, y si empiezas a trabajar con Firebase, yo te diría de implementar el tutorial, hacer una versión para testear, y en paralelo trabajes con la implementación de Firebase.
Nestor: Ahí, ahí que yo no pueda modificar ni nombre, ni contraseña.
Roberto: Si, es un celular por jugador. Cositas chiquitas. Sobre todo que en el tema los tutoriales que lo resolvimos, el tema de la jugabilidad que no la entedían muy bien pero pues con los tutoriales, en general las respuestas han sido muy positivas.
Iki: Lo que voy a hacer ahora, les pedí los modelos del último para testear con emulador. Sé que no es lo mismo pero bueno, por lo menos puedo ver el mismo modelo más o menos.
Jose: A ver que pasa, pero para mi es eso, debe tener algun Firewall activado, quizás tenga antivirus.
Jose: Llegamos a tener la app funcional en testing, nosotros en el motor. En ese momento se hacen como si fueran dos proyectos, uno para compilar para Android y otro para compilar para iOS. El de Android, que fue el primero que tuvimos funcionando, porque lo podíamos testear pronto, nosotros ya lo tenemos listo para mandar a producción si ustedes lo necesitan. Como les decía antes, encontramos un bug que no había saltado en ningún lado. Alvaro, lo que decías de que te tendría que dar alguna información de los que están testeando, debería dartela en la consola. Si es algún error grave debería saltar ahí.
Alvaro: Eso es lo otro que tenía una duda ahí Jose. No sé si esa prueba, ese bundle que subimos, eso iba a ser revisado por la Play Console. Pero sigue sin revision, aparece todavía sin revisión.
Jose: Porque todavía está en proceso.
Alvaro: Y eso cuánto tiempo tomará?.
Jose: Es que en realidad depende de Google. Y la última versión de prueba, que ustedes no les llegaron a ver, nosotros la estuvimos testeando que fue un error que nos apareció
testeando duro, y buscando romper el juego a propósito. Ahí fue que la encontramos y en base a eso Iki acomodó el código, y está super duro para Android.Alvaro: Entonces pues sí entiendo bien, pues resolver este tema de Admob, a ver si nos solucionan el tema del plugin, y sino pues intentar con otro network, y ahí ponerlo ahí sí ya a correr en iOS y esperar pues el tiempo normal de aceptación, y ya estamos. Con trackeo entonces lo que yo pienso es que si a Roberto y a mí nos gusta por ejemplo el whisky, a nosotros porque saben que hemos estado viendo anuncios, nos pasaría un anuncio de whisky que a ustedes no. Entonces si lo ponemos no personalizado, pues que pase el mismo anuncio para todos.
Iki: Si ,lo ideal yo diría que sería que sería
no trackeado. Y por qué digo esto?. Porque justo lo que tiene Apple es que vos por más que le muestres el consentimiento, la persona puede aceptar o rechazarlo, y si lo rechaza nosotros tendríamos que hacer que no juegue, porque la publicidad se va a mostrar igual. Pero no puedes hacer eso. Apple no te deja hacer eso. Va contra las normas prohibirle a la persona jugar o sacarla de la aplicación. O sea que le tendrías que permitir igual jugar y no van a estar los anuncios, entonces no habría sentido en todo eso.Alvaro: Champ, te parece intentamos eso?, lo que dice Iki. Cambiar los de Admob.
Iki: Se clavó el amigo. Se pasó de ron.
Alvaro: Uy si, se parece al Grinch. El hijo del Grinch.
Después de masivos testeos intentando romper el código, por fin terminamos de solucionar todo.
Las cuestiones que más nos dieron problemas fueron Admob y los plugins de publicidad, así como también las excesivamente estrictas políticas de Apple.
Creo que ahí abajo a ver, más abajo de todo, me parece que ahí donde está anuncios personalizados, y más abajo creo que están los no personalizados.
Roberto: Vamos a editar éste, no?.
Iki: Claro, y ahí fijate que dice 2 opciones. Ah, ahí está.
Roberto: Que pesadilla esos de Apple, no?.
Iki: Increíble men.
Jose: La verdad es que yo tengo que renovar mi contrato de desarrollador con Apple. Estoy a punto de no renovarlo.
Iki: Hay cosas que tienen sentido, por ejemplo si me dijeras como Google, lo de los niños y todo eso, bueno, podría tener sentido. Pero que no te permitan poner el botón cerrar
aplicación, eso ya es…Jose: Si, esos serían los cambios que haría. No sé si quieren leerlo tranquilos y después nos pasan esto. Tendríamos que sacar, me parece, esto es lo que estuvimos hablando con Iki en estos días. Nosotros en la de Android tenemos que tildar la que acepto los términos de usos y condiciones para poder iniciar. O sea si o si tengo que aceptar los términos de usos y condiciones. En iOS si yo no los aceptó tendría que poder ingresar igual. Entonces acepte o no acepte habría que dejar a disposición que los lea y que pueda ingresar en el juego. No ponerle el check list para que acepte los términos y condiciones. Entonces Iki, tendríamos que sacar la palabra acepto. Va a quedar términos, cómo está en la aplicación.
Habiendo evitado usar anuncios reales en etapa de prueba, Google Ads banea injustamente el proyecto por un mes.
Roberto: Como me pueden sancionar a mí por lo que haga un tercero en el juego?.
Alvaro: En línea con lo que dice Iki, que es dependiendo del número de usuarios que uno tenga. Facebook puede entrar todos los anuncios, pues uno sólo contra la cantidad de usuarios que tiene Facebook, es un soplido. Si son 30 usuarios y 2 lo están haciendo, pues ya es un porcentaje. Android entonces ya acabamos de subir la nueva versión sin Ads. Porfa si a alguien le llega ya la actualización le avisa, levanta la mano para para saber.
Jose: Apple entonces falta que hagan el cambio de lo del tutorial, y se compila y se vuelve a subir. Y sacarle las publicidades. No sé Iki si estuviste trabajando en eso.
Iki: Ya está hecho eso. Ahora, habría que ver si puedo aprovechar y meterle el modo dios. Para eso lo que necesitaría es que me pasen los nombres de usuarios que quieren como modo Dios digamos, que no vean publicidades.
Finalmente el juego se publicó teniendo repercusión inmediata en los medios de comunicación.
Si quieres probarlo vas a encontrar los links en la descripción, y si quieres aprender a crear juegos visita mi canal de youtube Escuela de Juegos.
Nos sintonizamos detrás del próximo algoritmo.
Descarga Penalty Trivia Crack Gratis para Android:
https://play.google.com/store/apps/details?id=com.champproductions.penaltytriviacrack
Descarga Penalty Trivia Crack Gratis para iOS: