{"id":74905,"date":"2025-11-26T19:29:42","date_gmt":"2025-11-27T00:29:42","guid":{"rendered":"https:\/\/niixer.com\/?p=74905"},"modified":"2025-11-26T23:46:42","modified_gmt":"2025-11-27T04:46:42","slug":"afterschool-juego-unity","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2025\/11\/26\/afterschool-juego-unity\/","title":{"rendered":"Afterschool: C\u00f3mo creamos un videojuego en Unity con IA, animaciones y escenarios 3D"},"content":{"rendered":"\n
Afterschool juego Unity es un proyecto que creamos combinando sigilo, aventura y humor ligero. En este art\u00edculo explico c\u00f3mo construimos cada parte del desarrollo.. El proyecto naci\u00f3 como una idea simple: un estudiante que olvid\u00f3 su tel\u00e9fono en el colegio debe volver de noche para recuperarlo. Sin embargo, el camino no es f\u00e1cil. Hay guardias, puertas cerradas y muchos obst\u00e1culos. En este art\u00edculo te cuento, de manera clara y detallada, c\u00f3mo desarrollamos el juego desde cero.<\/p>\n\n\n\n
Introducci\u00f3n y concepto del juego<\/h2>\n\n\n\n
Afterschool se basa en una historia cotidiana. Todos hemos olvidado algo importante en el colegio alguna vez. Por eso, el jugador entiende la misi\u00f3n desde el principio. Adem\u00e1s, el ambiente nocturno y la presencia de guardias generan tensi\u00f3n. Como resultado, la experiencia combina humor, misterio y sigilo.<\/p>\n\n\n\n
El juego incluye un men\u00fa principal, un selector de personajes y dos niveles principales. Primero, el jugador debe entrar al colegio. Luego, debe buscar su tel\u00e9fono dentro de varios salones mientras evita al guardia. Cuando por fin encuentra su celular, el juego termina y aparecen los cr\u00e9ditos finales.<\/p>\n\n\n\n
Premisa:<\/strong> Olvidaste tu tel\u00e9fono en el colegio. El profesor lo dej\u00f3 en la oficina del director. Debes colarte de noche, evitar a los guardias y recuperarlo sin que te atrapen.<\/li>\n\n\n\n
Estructura del juego:<\/strong> men\u00fa principal \u2192 selector de personajes \u2192 Nivel 1: Entrada (ganzuado)<\/em> \u2192 Nivel 2: Interior del colegio (b\u00fasqueda por aulas)<\/em> \u2192 final\/creditos al recuperar el tel\u00e9fono.<\/li>\n\n\n\n
Mec\u00e1nicas principales:<\/strong> stealth ligero (evitar visi\u00f3n del guardia), interacci\u00f3n con objetos (E<\/code> para ganzuar\/abrir), coleccionables (latas que dan puntos), vida\/da\u00f1o por contacto con guardias, pickup del celular (meta final).<\/li>\n\n\n\n
Tono:<\/strong> humor ligero que hace las partidas amenas y rejugables.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Proceso de creaci\u00f3n del juego<\/h2>\n\n\n\n
Desarrollamos Afterschool usando Unity<\/strong>, junto con varias herramientas externas. Estas herramientas nos ayudaron a crear modelos, animaciones, escenarios y efectos visuales.<\/p>\n\n\n\n
Crear Escena Base<\/strong><\/p>\n\n\n\n
Se inicia con una escena en blanco en 3D en Unity, configurando el entorno de trabajo<\/sup>.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Instalar Assets del Jugador<\/strong><\/p>\n\n\n\n
Se accede a la Asset Store<\/strong> (Window > Asset Store) <\/sup>para buscar e instalar el paquete “Starter Assets – Third Person”, que proporciona el controlador de personaje y las animaciones b\u00e1sicas<\/sup><\/sup><\/sup><\/sup>.<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n
El modelo del estudiante (Jugador) se importa desde un software de modelado (como Avaturn\/Blender) y se exporta en formato FBX.<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n
Integrar Avatar<\/strong><\/p>\n\n\n\n
El PlayerArmature predeterminado en la escena se reemplaza con el avatar personalizado en el apartado de Geometry del Inspector.<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n
<\/p>\n\n\n\n
1. Modelado y uso de assets<\/h3>\n\n\n\n
Para los personajes usamos Avaturn<\/strong>, y para los objetos y escenarios empleamos Blender<\/strong> y recursos de Sketchfab<\/strong>. De esta manera logramos tener muchos elementos variados sin perder tiempo en modelar todo desde cero. Entre los modelos usados est\u00e1n:<\/p>\n\n\n\n
\n
street_asset_pack<\/li>\n\n\n\n
high_school<\/li>\n\n\n\n
abandoned_playground<\/li>\n\n\n\n
trash_can_big<\/li>\n\n\n\n
abandoned_street_lights_pack<\/li>\n\n\n\n
stone_path_kotor<\/li>\n\n\n\n
real_time_grass<\/li>\n\n\n\n
varios autos y objetos decorativos<\/li>\n<\/ul>\n\n\n\n<\/figure>\n\n\n\n
Gracias a esto, el mapa tiene vida y se ve m\u00e1s completo.<\/p>\n\n\n\n<\/figure>\n\n\n\n
\n
Estos archivos se importaron en Unity (formato FBX\/GLB) y se convirtieron a prefabs<\/strong> para control y reutilizaci\u00f3n en escenas.<\/p>\n<\/blockquote>\n\n\n\n
2. Animaciones y personajes<\/h3>\n\n\n\n
Las animaciones fueron creadas en Mixamo. Despu\u00e9s de descargarlas, las adaptamos en Unity a los personajes creados en Avaturn. Adem\u00e1s, modificamos varios ajustes del rig para que las animaciones no se vieran forzadas.<\/p>\n\n\n\n
Tambi\u00e9n usamos el Third Person Controller de Unity. Sin embargo, tuvimos que adaptarlo para que funcionara con nuestros personajes. Esto incluy\u00f3 cambios en el esqueleto, el collider y el Animator.<\/p>\n\n\n\n<\/figure>\n\n\n\n
3. Dise\u00f1o de niveles<\/h3>\n\n\n\n
Creamos dos niveles principales. Primero est\u00e1 el mapa exterior del colegio. En este lugar hay lluvia, fog, faroles y objetos que crean ambiente. Adem\u00e1s, usamos part\u00edculas de lluvia para dar una sensaci\u00f3n m\u00e1s realista.<\/p>\n\n\n\n
Cuando el jugador llega a la puerta principal puede presionar E<\/strong> para ganzuarla. Luego aparece una animaci\u00f3n y pasa al siguiente nivel.<\/p>\n\n\n\n
El segundo nivel ocurre dentro del colegio. Hay varios salones, pasillos y objetos. El celular aparece en un punto aleatorio, por lo que el jugador debe buscarlo con cuidado. Adem\u00e1s, hay un guardia rondando que puede quitar vida si llega a tocarte.<\/p>\n\n\n\n
4. IA de los guardias<\/h3>\n\n\n\n
Uno de los elementos m\u00e1s importantes del juego es la IA del guardia. Para lograrlo usamos el sistema de NavMesh<\/strong> de Unity.<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n
La IA funciona as\u00ed:<\/p>\n\n\n\n
\n
El guardia tiene varios puntos de patrulla.<\/li>\n\n\n\n
Se mueve entre ellos seg\u00fan un orden.<\/li>\n\n\n\n
Si el jugador se acerca demasiado, el guardia cambia de estado y comienza a perseguirlo.<\/li>\n\n\n\n
Si pierde al jugador, vuelve a patrullar.<\/li>\n<\/ol>\n\n\n\n
Gracias a este sistema, el guardia act\u00faa de forma natural y crea tensi\u00f3n sin necesidad de usar mec\u00e1nicas complicadas.<\/p>\n\n\n\n
Fragmento de C#<\/h3>\n\n\n\n
using UnityEngine;\nusing UnityEngine.AI; \/\/ Necesario para usar el NavMeshAgent\n\npublic class EnemyAI : MonoBehaviour\n{\n [Header(\"Configuraci\u00f3n de Distancia\")]\n public Transform player; \/\/ Tu personaje\n public float chaseRange = 10f; \/\/ Distancia a la que empieza a CORRER\n public float walkRange = 18f; \/\/ Distancia a la que se detiene y empieza a CAMINAR (Patrullar)\n public float patrolSpeed = 1.5f; \/\/ Velocidad para caminar\n public float chaseSpeed = 3.5f; \/\/ Velocidad para correr\n\n [Header(\"Configuraci\u00f3n de Patrulla\")]\n public Transform[] patrolPoints; \/\/ Arreglo donde pondr\u00e1s los puntos A y B\n private int currentPatrolIndex = 0;\n\n private NavMeshAgent agent;\n private Animator animator;\n\n void Start()\n {\n agent = GetComponent<NavMeshAgent>();\n animator = GetComponent<Animator>();\n\n \/\/ Asignamos la velocidad de persecuci\u00f3n inicial\n agent.speed = chaseSpeed;\n\n \/\/ Configuramos los puntos de patrulla si no se han asignado\n if (patrolPoints == null || patrolPoints.Length == 0)\n {\n patrolPoints = new Transform[1];\n GameObject startPoint = new GameObject(\"StartPoint_\" + gameObject.name);\n startPoint.transform.position = transform.position;\n patrolPoints[0] = startPoint.transform;\n }\n\n \/\/ Forzar al agente a detenerse y empezar en estado IDLE\n StopPatrolling();\n }\n\n void Update()\n {\n float distanceToPlayer = Vector3.Distance(transform.position, player.position);\n\n if (distanceToPlayer < chaseRange)\n {\n \/\/ 1. CHASE (CORRER)\n ChasePlayer();\n }\n else if (distanceToPlayer < walkRange)\n {\n \/\/ 2. PATROL (CAMINAR)\n HandlePatrolState();\n }\n else\n {\n \/\/ 3. IDLE (QUIETO)\n StopPatrolling();\n }\n }\n\n \/\/ L\u00f3gica principal para mantener el estado de patrulla (Walking)\n void HandlePatrolState()\n {\n \/\/ Aseguramos la velocidad y animaci\u00f3n de caminar (si viene de correr o idle)\n if (agent.speed != patrolSpeed || !animator.GetBool(\"isPatrolling\"))\n {\n agent.speed = patrolSpeed;\n animator.SetBool(\"isChasing\", false);\n animator.SetBool(\"isPatrolling\", true);\n\n \/\/ Si estaba quieto y empieza a patrullar, le asignamos la primera ruta\n if (!agent.hasPath)\n {\n agent.SetDestination(patrolPoints[currentPatrolIndex].position);\n }\n }\n\n \/\/ Si hemos llegado al punto actual, avanzamos al siguiente punto de patrulla.\n if (!agent.pathPending && agent.remainingDistance < agent.stoppingDistance + 0.5f)\n {\n Patrol();\n }\n }\n\n void ChasePlayer()\n {\n agent.speed = chaseSpeed;\n agent.SetDestination(player.position);\n animator.SetBool(\"isChasing\", true);\n animator.SetBool(\"isPatrolling\", true); \/\/ Para que use la animaci\u00f3n de Run\n }\n\n void Patrol()\n {\n \/\/ Avanza al siguiente punto de patrulla de la lista\n currentPatrolIndex = (currentPatrolIndex + 1) % patrolPoints.Length;\n agent.SetDestination(patrolPoints[currentPatrolIndex].position);\n }\n\n void StopPatrolling()\n {\n \/\/ Detiene el movimiento (SetDestination a su propia posici\u00f3n)\n agent.SetDestination(transform.position);\n agent.speed = chaseSpeed; \/\/ Restaura la velocidad para que al perseguir no haya delay\n animator.SetBool(\"isChasing\", false);\n animator.SetBool(\"isPatrolling\", false);\n }\n\n \/\/ Dibuja los rangos de detecci\u00f3n en la escena (solo visible en el editor)\n void OnDrawGizmosSelected()\n {\n Gizmos.color = Color.yellow;\n Gizmos.DrawWireSphere(transform.position, walkRange);\n Gizmos.color = Color.red;\n Gizmos.DrawWireSphere(transform.position, chaseRange);\n }\n}<\/code><\/pre>\n\n\n\n
5. Part\u00edculas, efectos y ambiente<\/h3>\n\n\n\n
Para mejorar la atm\u00f3sfera agregamos:<\/p>\n\n\n\n
\n
Lluvia en el mapa exterior<\/li>\n<\/ul>\n\n\n\n
Se busca en los menus y se a\u00f1ade sistema de particulas<\/p>\n\n\n\n<\/figure>\n\n\n\n
Se ajustan para que caigan de arriba<\/p>\n\n\n\n<\/figure>\n\n\n\n
Se ajustan para que se vea una mayor cantidad<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n
\n
Fog desde la pesta\u00f1a Lighting<\/li>\n<\/ul>\n\n\n\n
En el menu de Lighting se realizarion los ajustes para configurar la niebla o fog<\/p>\n\n\n\n<\/figure>\n\n\n\n
\n
Luces parpadeantes<\/li>\n\n\n\n
Sonidos ambientales<\/li>\n\n\n\n
Part\u00edculas al recoger latas<\/li>\n\n\n\n
Materiales con brillo para objetos mojados<\/li>\n<\/ul>\n\n\n\n
Adem\u00e1s, a\u00f1adimos efectos al celular para que sea m\u00e1s f\u00e1cil encontrarlo. Por eso, se nota visualmente cuando el jugador se acerca.<\/p>\n\n\n\n
6. Mec\u00e1nicas del jugador<\/h3>\n\n\n\n
El jugador tiene varias acciones b\u00e1sicas:<\/p>\n\n\n\n
\n
Moverse libremente<\/li>\n\n\n\n
Interactuar con objetos al presionar E<\/strong><\/li>\n\n\n\n
Recoger latas para sumar puntos<\/li>\n\n\n\n
Perder vida si el guardia lo alcanza<\/li>\n\n\n\n
Abrir puertas<\/li>\n\n\n\n
Ganzuar la entrada<\/li>\n<\/ul>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n
Estas acciones permiten crear una experiencia simple pero entretenida. Tambi\u00e9n agregamos una interfaz que muestra vida, puntos y mensajes importantes.<\/p>\n\n\n\n
Selector de personajes<\/h3>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n
Optimizaci\u00f3n del proyecto<\/h2>\n\n\n\n
Durante el desarrollo tambi\u00e9n tuvimos que optimizar varios aspectos. Por ejemplo:<\/p>\n\n\n\n
\n
Reducimos el peso de texturas.<\/li>\n\n\n\n
Usamos materiales PBR bien configurados.<\/li>\n\n\n\n
Ajustamos el baking de luces.<\/li>\n\n\n\n
Combinamos objetos est\u00e1ticos para menor uso de CPU.<\/li>\n\n\n\n
Adaptamos colisiones y triggers.<\/li>\n<\/ul>\n\n\n\n
Como resultado, el juego corre mejor y se siente m\u00e1s fluido.<\/p>\n\n\n\n
Conclusi\u00f3n<\/h2>\n\n\n\n
Crear Afterschool fue un proceso muy completo. Aprendimos sobre modelado, animaci\u00f3n, programaci\u00f3n, iluminaci\u00f3n y dise\u00f1o de niveles. Adem\u00e1s, logramos unir todos estos elementos para crear una experiencia divertida y con identidad propia.<\/p>\n\n\n\n
Aunque el objetivo del juego es simple, el proceso escond\u00eda muchos retos. Sin embargo, gracias a la organizaci\u00f3n y al uso de buenas herramientas, logramos un resultado s\u00f3lido. Ahora el jugador puede disfrutar una aventura corta, ligera, pero llena de personalidad.<\/p>\n\n\n\n
Unity: estructura b\u00e1sica del proyecto<\/h3>\n\n\n\n<\/figure>\n\n\n\n
![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image28_resultado-1024x539.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image1_resultado-1024x545.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image23_resultado-1024x554.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image31_resultado-1024x546.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image46_resultado-1024x584.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image8_resultado-1024x528.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image29_resultado.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image9_resultado.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image20_resultado-1024x450.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image49_resultado-1024x588.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image50_resultado-1024x525.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image70_resultado-1024x540.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image27_resultado-1024x496.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image15_resultado-1024x552.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image12_resultado-1024x538.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image32_resultado.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image65_resultado-1024x534.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image2_resultado-1.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image3_resultado.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image16_resultado-1024x355.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image11_resultado-1024x578.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image61_resultado-1024x595.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image42_resultado.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image60_resultado.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image48_resultado-1024x564.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image22_resultado-1024x494.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image19_resultado-1024x581.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image63_resultado-1024x646.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image52_resultado.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image7_resultado.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image21_resultado-1024x563.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/image59_resultado-1.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/niixer.com\/wp-content\/uploads\/2025\/11\/download.webp\")
<\/figure>\n\n\n\n