{"id":67664,"date":"2025-05-27T20:40:01","date_gmt":"2025-05-28T01:40:01","guid":{"rendered":"https:\/\/niixer.com\/?p=67664"},"modified":"2025-05-28T11:56:06","modified_gmt":"2025-05-28T16:56:06","slug":"paso-a-paso-videojuego-camara-0","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2025\/05\/27\/paso-a-paso-videojuego-camara-0\/","title":{"rendered":"Paso a paso videojuego c\u00e1mara 0"},"content":{"rendered":"\n

Introducci\u00f3n<\/strong><\/h3>\n\n\n\n

Este videojuego serio en 2D<\/a>, desarrollado con Unity<\/a>, est\u00e1 dise\u00f1ado como una herramienta educativa para ense\u00f1ar de manera pr\u00e1ctica y entretenida los conceptos b\u00e1sicos sobre el funcionamiento de la c\u00e1mara. A trav\u00e9s de una experiencia interactiva, el jugador aprender\u00e1 desde las partes fundamentales de una c\u00e1mara hasta principios clave como la exposici\u00f3n, el enfoque, la apertura del diafragma y la velocidad de obturaci\u00f3n.<\/p>\n\n\n\n

Con un estilo visual accesible y din\u00e1micas dise\u00f1adas espec\u00edficamente para facilitar la comprensi\u00f3n, el juego combina elementos pedag\u00f3gicos con mec\u00e1nicas simples para fomentar el aprendizaje aut\u00f3nomo. Su dise\u00f1o en 2D y desarrollo en Unity permiten una ejecuci\u00f3n fluida y multiplataforma<\/a>, adecuada tanto para entornos educativos como para uso personal.<\/p>\n\n\n\n

A continuaci\u00f3n, se presenta el proceso detallado de creaci\u00f3n de este videojuego.<\/p>\n\n\n\n

Pantalla principal<\/strong><\/h3>\n\n\n\n

Primeramente se va a configurar una pantalla para poder iniciar el juego, para esto se crea una nueva escena.<\/p>\n\n\n\n

En este caso se llama men\u00fa inicial ya que ser\u00e1 la pantalla con los botones para iniciar el juego<\/p>\n\n\n\n

\"men\u00fa<\/figure>\n\n\n\n


<\/p>\n\n\n\n

Se abre dicha escena para que se pueda ver en la jerarqu\u00eda (Hierachy) en la parte izquierda del editor
<\/p>\n\n\n\n

\"jerarqu\u00eda<\/figure>\n\n\n\n

Para crear el canvas inicial, dentro de la jerarqu\u00eda se presiona clic derecho, UI y en la opci\u00f3n donde dice canvas
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ahora dentro del canvas creado anteriormente se va a crear un panel que ser\u00e1 la imagen de fondo que se va a tener para la pantalla inicial
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

En este caso se le dio el nombre de inicio
<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

El plano creado se debe ver de la siguiente manera
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ahora en la parte derecha, es decir en el inspector se busca el apartado donde dice background
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Para la imagen que se va a poner se arrastra la imagen deseada en la parte de abajo en los assets
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Posteriormente se selecciona la imagen y se arrastra al apartado background mostrado anteriormente
<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Despu\u00e9s de esto el plano quedar\u00e1 autom\u00e1ticamente con la imagen asignada 
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Botones<\/strong><\/h3>\n\n\n\n

En la jerarqu\u00eda se vuelve a presionar clic derecho para crear un bot\u00f3n en las siguientes opciones
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Se crear\u00e1 un bot\u00f3n y al desplegar saldr\u00e1 un apartado llamado text TMP
<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Se selecciona para poder editar el texto que llevar\u00e1 el bot\u00f3n desde el inspector
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Despu\u00e9s de esto volviendo a seleccionar el bot\u00f3n se podr\u00e1 cambiar el color nuevamente en el inspector
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ahora se repite el mismo procedimiento para crear el bot\u00f3n de salir <\/p>\n\n\n\n

Una vez realizado esto se tendr\u00e1n los dos botones que ir\u00e1n en la pantalla principal<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Ya que se tienen acomodados los botones se les debe agregar la funcionalidad mediante scripts usando en este caso Visual Studio Code, para esto nos dirigimos al canvas 
<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Y en la parte derecha, en el inspector seleccionamos la opci\u00f3n Add component para a\u00f1adir un nuevo script 
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Se le da un nombre y se selecciona new script de la siguiente manera
<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Se abre el script en Visual y por defecto se va a ver as\u00ed:
<\/p>\n\n\n\n

using UnityEngine;\n\npublic class MenuInicial : MonoBehaviour\n{\n    \n}\n<\/code><\/pre>\n\n\n\n
Para poder cambiar entre escenas en la parte superior del c\u00f3digo se debe importar la siguiente librer\u00eda
<\/p>\n\n\n\n
using UnityEngine.SceneManagment;<\/code><\/pre>\n\n\n\n
Se crea la funci\u00f3n jugar y dentro de este se escribe scene manger.load scene para cargar una escena y dentro del par\u00e9ntesis se le escribe get active scene para abrir la escena en la que nos encontramos y se le suma 1 al final para que cargue la siguiente <\/p>\n\n\n\n
 public void Jugar(string Selecci\u00f3n)\n    {\n        SceneManager.LoadScene(Selecci\u00f3n);\n    }<\/code><\/pre>\n\n\n\n
Ahora se crea la funci\u00f3n para salir de la aplicaci\u00f3n<\/p>\n\n\n\n
Adentro se escribe Application.Quit(); que ser\u00e1 lo que va a cerrar el juego cuando este creado<\/p>\n\n\n\n
    public void salir()\n    {\n        Debug.Log(\"Salir...\");\n        Application.Quit();\n    }\n}\n<\/code><\/pre>\n\n\n\n
Para tener el orden de las escenas posteriores y que se pueda hacer el cambio de escenas correctamente se deben ordenar, para esto nos dirigimos a el apartado file y luego en build profiles en la parte superior<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Aca se deben ordenar correctamente las escenas que se van a tener, en caso de agregar una una nueva se presiona Add open scenes y para ordenarlas se selecciona la escena y se arrastra al orden que se quiera, en este caso ya se ordenaron correctamente<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Por \u00faltimo se le agrega la funcionalidad que se establece en los canvas a los botones creados, para esto abrimos el bot\u00f3n jugar primero y en el inspector en la parte derecha nos vamos al componente llamado button<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
En la parte de abajo de este componente donde dice On click se presiona el simbolo + de la parte inferior derecha <\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Cuando se le da al + saldra lo siguente dentro de esa interfaz<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Ahora se debe arrastrar el canvas en donde dice None(Object)<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Al lado donde dice no function se despliega ese men\u00fa y se le da en donde dice men\u00fa Inicial que corresponde al script creado anteriormente<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Y dentro de men\u00fa inicial se busca la funcion jugar<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Se repite la misma operaci\u00f3n para el bot\u00f3n de salir a diferencia de que en el \u00faltimo paso en la funci\u00f3n se selecciona salir<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Para probar la funcionalidad de los botones se le da play en la parte superior del editor <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Al presionar salir nos aparecer\u00e1 el mensaje en la parte inferior ya que no se tiene el juego terminado por ahora solo se mostrar\u00e1 dicho mensaje<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Y al presionar jugar nos lleva a la siguiente escena.<\/p>\n\n\n\n
Historia<\/strong><\/h3>\n\n\n\n
Antes de empezar con el juego, se da una breve introducci\u00f3n donde se le da al jugador su misi\u00f3n adem\u00e1s de empezar con el aprendizaje que se quiere impartir<\/p>\n\n\n\n
Se crea una nueva escena llamada introducci\u00f3n<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Se repite el mismo procedimiento que se hizo para agregar una imagen en la portada para poder darle un fondo a esta nueva escena, posteriormente se a\u00f1ade un texto <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Por \u00faltimo se le agrega un bot\u00f3n con el mismo script usado en la escena anterior para cambiar a la siguiente<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Cinem\u00e1tica inicial<\/strong><\/h3>\n\n\n\n
Para la cinem\u00e1tica inicial realizada con CapCut y se ea\u00f1ade a los assets de unity el video en formato mp4 <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Se creo una nueva escena llamada cinem\u00e1tica y siguiendo la misma l\u00f3gica de poner los botones para la siguiente escena se cre\u00f3 un canvas donde se a\u00f1adi\u00f3 dicho bot\u00f3n y se crea un nuevo objeto llamado videoPlayer<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
 Seleccionando el video player nos dirigimos al inspector y en la opci\u00f3n llamada videoplayer  donde dice videoClip se arrastra el video anterior <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Al reproducir la escena se reproduce el video con el bot\u00f3n previamente establecido<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Video de la cinem\u00e1tica<\/strong> <\/h2>\n\n\n\n