martes, 2 de marzo de 2010

Conceptos a tener en cuenta

Conceptos a tener en cuenta

Fundamentos de C#

En este tutorial, intentaremos crear nuestra primera aplicación de juegos, paso a paso, para ir descubriendo y conociendo todos y cada uno de los aspectos de la programación utilizando XNA. Es tan solo un ejemplo muy básico, en el que intentaremos desvelar algunos secretillos sobre XNA y sobre todo aprender, que es de lo que se trata. He seguido algunos tutoriales por ahí y éste es uno que me ha llamado la atención porque la verdad, está todo muy bien redactado y explicado. Intentaré darle un enfoque sencillo para que todos podamos seguir dicho tutorial e iremos paso a paso.

Lo primero de todo, como ya os comenté en una entrada anterior, se han de tener ciertos conocimientos de programación orientada a objetos y conocer el lenguaje de programación C# para sacarle más partido a XNA. Para ello os daré algunas nociones de programación orientada a objetos para que sepáis de qué estamos hablando y podáis seguir bien el tutorial con el mínimo de dudas posibles.

Definición de C#: (pronunciado si sharp en inglés) es un lenguaje de programación orientado a objetos desarrollado y estandarizado por Microsoft como parte de su plataforma .NET, que después fue aprobado como un estándar por la ECMA e ISO.

Fuente: WikiPedia

Vamos a crear un primer proyecto para trabajar estos aspectos iniciales. Nos olvidamos un momento de XNA y de la programación de juegos. Es muy importante que si tus conocimientos de programación son nulos, o son mínimos, deberías seguir este manual inicial para facilitarte las cosas en un futuro, ya que la finalidad de dicho bitácora es que todos aprendamos y saquemos algo bueno de esto, con constancia, buen humor y sobre todo paciencia, mucha paciencia, pues cuando entremos con XNA las cosas se complicarán y mucho. Ya os adelanto esto, pero tranquilidad y buenos alimentos, paso a paso y hay que recordar que esto lo hacemos por placer y por gusto, tomárselo como un reto es otra de las buenas opciones que tenemos para avanzar con fuerza y con vigor.

Bueno, después de esta introducción, comenzamos con el minitutorial de C# y la programación orientada a objetos. Incluiré más material sobre éste tema, porque creo que es importante que la base de programación en lenguaje C# es importante y todo conocimiento es poco para elaborar nuestro cometido aquí. De todos modos comencemos de una vez. Empezamos por abrir el Visual Studio y creando un nuevo proyecto:

(FOTO 1 y FOTO 2)


Haremos clic en Visual C#, después seleccionaremos Windows del árbol “Tipo de proyecto” y en “Plantillas” seleccionaremos “Aplicación de Windows Forms” que es de lo más sencillito y atractivo para el principiante que se me ocurre. Como “Nombre” podemos ponerle por ejemplo “miProgramaCSharp”, en la ubicación seleccionamos el sitio donde guardar la solución y como “Nombre de la solución” pues en mi caso “Ejemplo1”. Un consejo que os doy de aquí en adelante, es que utilicéis los mismos nombres que se describan y se detallen en el manual, porque luego pueden surgir ciertas dudas a la hora de seguir nuevos tutoriales, modificaciones o ampliaciones.

(FOTO 3)


Nos aparecerá el proyecto como en la imagen anterior. Ahora tan solo tenemos que ponernos manos a la obra con lo primero y fundamental. Hagamos en esta primera introducción al mundo de C# nuestro mítico “Hola Mundo”. El “Hola Mundo” es el típico ejemplo que se pone siempre cuando alguien se enseña a programar y sirve para entender lo más básico de los fundamentos de la programación básica. Como se trata de un bitácora para inexpertos, y no tienen porqué saber programar si quiera, pues nos detendremos en esto por ahora unos minutos para proseguir más seguros de nosotros mismos.

Bien, nuestro primer “Hola Mundo” será muy sencillo, pero a la vez muy interesante para que os valláis familiarizando con el entorno de Visual Studio. Ahora lo que tenemos que hacer para efectuar un “Hola Mundo” como Dios manda, es hacer doble clic sobre la ventana que lleva por nombre “Form1” y nos aparecerá en el área de trabajo su código fuente:

(FOTO 4)


Nos encontramos con las siguientes líneas superiores:

using System.Drawing;

using System.Linq;

using System.Text;

using System.Windows.Forms;

Éstas líneas lo que nos indican, si utilizamos la intuición podemos deducirlo, es que éste formulario utilizará los espacios de nombres siguientes para su funcionamiento. Un espacio de nombres es una colección de código en la que se incluyen diversos métodos y atributos reutilizables, puesto que los podremos implementar y usar tantas veces como queramos en tantos proyectos como deseemos, y que realizan funciones para las que están creados. Bien, es una definición algo pobre y no del todo correcta, pero espero que os sirva para ir adentrándoos en el mundo de la programación.

Como podéis observar, nos aparece la palabra namespace en el código de nuestro formulario, más concretamente aparece lo siguiente “namespace MiProgramaCSharp” y luego una llave que abre su cuerpo y contiene una clase llamada “Form1 : Form” y dentro de ésta otras dos llaves que abren el cuerpo de dicha clase y a su vez dos métodos, uno llamado Form1() en cuyo interior aparece “InitializeComponent();” y en el otro método “Form1_Load(lo que hay aquí dentro de momento no nos hace falta)” que no contiene nada y después de esto una serie de llaves, tres para ser exactos, opuestas a las que abrían. Pues bien, eso no es más que el cierre de cada una de las estructuras anteriores.

Bien, para nuestro hola mundo haremos lo siguiente:

(FOTO 5)


Después de esto, presionamos la tecla F5 para compilar nuestro programa y debería de aparecernos una ventana como la siguiente:

(FOTO 6)

Bien, ahora supongamos que queremos decirle Hola a quién arranque nuestro programa. Haremos una serie de modificaciones. Lo primero añadimos éstos controles al formulario, por lo que tendremos que volver a la vista Diseño y darle una apariencia como la siguiente:

(FOTO 7)

Las propiedades de cada objeto, como por ejemplo para darle el nombre a la ventana o formulario que estamos creando, las encontramos haciendo clic derecho sobre el objeto en cuestión y seleccionando del menú emergente “Propiedades” o con el objeto seleccionado presionamos la tecla F4 y en la parte derecha de la ventana nos aparecerá lo siguiente:

(FOTO 8)

Estas por ejemplo son las propiedades del formulario en sí. Es muy importante que le demos nombres a cada uno de los objetos, pues nos servirá para identificarlos después en el código. Así que empezando ya a acostumbrarse. Tendremos que cambiar la propiedad “Name” que está en la parte superior del listado de propiedades. Al formulario le daremos el nombre de “frm_principal” para saber que se trata del formulario principal. Ahora que tenemos pocos formularios, uno tan solo, parece que no es necesario, pero hacerme caso, es muy necesario nombrar cada uno de los objetos con los que trabajemos pues nos facilitará mucho trabajo conocer sus nombres, pues deberíamos siempre por optar a ponerles nombres muy descriptivos para que no se nos olvide. Además hay que utilizar cierta nomenclatura para saber distinguir si se trata de un botón, una caja de texto, una etiqueta,… Para el éste y otros ejemplos utilizaremos la siguiente nomenclatura (aquí sólo menciono aquellos objetos con los que trabajamos hoy):

Objeto

Nomenclatura

Formulario

frm_

Botón

bt_

Etiqueta

lbl_

Caja de Texto

txt_

Y para éste ejercicio los nombres quedarían así:

frm_principal, bt_aceptar, lbl_nombre, txt_nombre

Una vez hayamos dotado de nombres a nuestros objetos del formulario, pasamos a agregar código al botón “Aceptar” haciendo doble clic sobre él. Y nos aparecerá el siguiente código:

(FOTO 9)

Bien, en el método Click de nuestro bt_aceptar añadimos lo siguiente:

(FOTO 10)

Nota: Pongo el código en formato imagen para obligaros a escribirlo, pues es así la mejor forma de aprender, escribiéndolo y no copiándolo J.

Bien, pues es muy sencillo, en el evento Click de nuestro bt_aceptar accedemos a la propiedad Text, que es donde se almacena el texto introducido en el cuadro de texto de nuestro objeto txt_nombre y lo asignamos a nuestra variable “nombre”, más que nada para evitar tener que poner la parrafada de “txt_nombre.Text” cada vez que queramos acceder al contenido de la caja de texto. Después preparamos un formulario de diálogo “MessageBox” con el texto “Hola Pepe!” y como título de la ventanita que se abrirá “¿Qué tal estás Pepe?”, si Pepe fuese el nombre que hemos ingresado en el cuadro de texto, claro está. Nos debería quedar algo parecido a esto:

(FOTO 11)

Bien, pero que pasa si además de nombre, tiene apellido, número de teléfono y correo electrónico. Pues nada, añadiríamos campos de texto con su correspondiente etiqueta y listo, ¿verdad? Pero, ¿Y si tenemos más de una persona que registrar? Bueno, pues entonces podemos pensar en crear clases. Una clase, es una definición de un objeto. Es más complejo de lo que parece llegar a entender esto a la primera, pero paciencia. A ver, tenemos como ejemplo las personas que serán nuestros usuarios, ¿verdad? Pues bien, que nos interesa saber de ellas es lo primero que debemos preguntarnos. Nos podría interesar lo siguiente:

1. Nombre

2. Apellido

3. Fecha de nacimiento (No haremos control de fechas en éste ejercicio para no complicarlo más)

4. Género

5. Número de hijos

6. Correo Electrónico

Por ejemplo, de todos y cada uno de los usuarios que utilicen nuestra aplicación. Pues bien, ¿es posible que todos puedan responder si le preguntas cualquiera de los datos anteriores? Sí, ¿verdad? Tú le puedes preguntar a Pepe por su apellido y te responderá “Fulano”, también si es “Hombre” o “Mujer” o por su e-mail. Y a que también se lo puedes preguntar a María, Juan, Alfonso,… Evidentemente sí, pues todos ellos son personas y las propiedades que aquí detallamos son homogéneas para todos.

Muy bien, pues empecemos a crear nuestra clase “Persona”. Lo primero que debemos hacer es lo siguiente, hacemos clic derecho sobre nuestro proyecto “miProgramaCSharp”, se nos desplegará el siguiente menú, nos dirigimos hasta “Agregar” y allí seleccionamos “Clase…”.

(FOTO 12)

Nos aparecerá el siguiente diálogo, en el que tendremos seleccionada la plantilla de Clase y en el nombre pondremos “Persona.cs”.

(FOTO 13)

Bien, ya la tenemos agregada a nuestro proyecto, ahora vamos a preparar el formulario principal para que se puedan insertar los datos de las personas, pero vamos paso por paso, para que así podáis ver algunos controles más para los formularios, ¿ok? Bien, para agregar la fecha de nacimiento y tener algo más de control sobre los números utilizaremos el objeto “NumericUpDown” que nos ofrece darle al usuario final una serie limitada de opciones a la hora de introducir números.

(FOTO 14)

En la ventana de propiedades de dicho objeto nos fijaremos sobre todo en dos campos “Increment” que lo dejaremos a 1 y el “Maximum” que lo bajaremos de 100 que es como viene por defecto a 31 que es el número máximo que puede tener un mes. Antes decíamos que no íbamos a hacer control de fechas, por lo que se quedará así y listo. Haremos lo mismo para el mes, poniendo el “Maximum” a 12 y en años tendremos que incrementarlo tanto como deseemos. Total no es más que un ejemplo para ver cómo funcionan las clases, pero si queréis, le podéis echar un vistazo al atributo Value de éste mismo objeto, y darle valor de 1970 por ejemplo, así empezará a contar desde ese año y no tendremos que ir desde el año 1 hasta 1980 o cuando sea que haya nacido el usuario final. Lo mismo podemos hacer con el resto de “nud_” (NumericUpDown) e inicializarlos a 1.

(FOTO 15)

Para el género utilizaremos un ComboBox, “cb_genero”:

(FOTO 16)

Y le introduciremos los únicos dos géneros que nuestra aplicación comprende:

(FOTO 17)

En las propiedades del combo modificaremos la siguiente para bloquear la respuesta y limitarla a nuestras dos únicas opciones:

(FOTO 18)

Nos quedaría al final algo así:

(FOTO 19)

Bien, ahora pasamos a la confección de la clase. Lo primero de todo os recomiendo que la borréis entera, todo lo que contiene y la dejéis en blanco.

Vamos paso a paso. Lo primero los espacios de nombres que necesitaremos, que en este simple ejemplo no necesitamos añadir ninguno. Después creamos nuestro namespace y añadimos el resto de código que explicamos más adelante:

(FOTO 20)

En primer lugar asociamos ésta clase “Persona” al espacio de nombres de nuestra aplicación “MiProgramaCSharp”. Una vez hecho esto creamos la clase “Persona” que es lo que nos interesa. En su interior, tenemos al inicio los atributos de éste objeto “Persona”, el nombre, apellido, fecha de nacimiento (para la cual se ha utilizado una estructura para que se vean más formas de trabajar), el género, el número de hijos, el e-mail. Para entender bien éste código, deberéis de saber que son los tipos de datos y para qué sirven. Se intuye que son para identificar el tipo de valor que va a contener nuestra variable, por ejemplo si es de tipo “int” pues significa que contendrá un valor de tipo numérico y éste será entero, también lo hay decimal, float,... Si es de tipo “string” pues es de tipo cadena, para almacenar letras, palabras, frases, caracteres alfanuméricos en general… Y así con los demás. Por ejemplo un tipo interesante, es el tipo “struct” que nos permite crear nuestra propia estructura de datos, como en el ejemplo de la fecha de nacimiento que lo guardamos con tres números (día, mes y año). Si os habéis dado cuenta están como decimal y no como entero, y sí, evidentemente los días, los meses o los años son enteros pero, a causa del objeto que hemos utilizado para introducir los datos en el programa han de ser tratados como decimales. El género es un número entero también, pues almacenamos el índice del combo box y no el texto, es decir, que almacenamos la posición del combo box, (Posición 0 = Hombre, Posición 1 = Mujer).

Creo que en cuanto a la clase, poco más se puede explicar. Todos los atributos (variables) de la misma están como públicos (public) para no tener que andar creando Get y Set de cada uno de ellos, que no son más que una función que devuelve, definida ésta del mismo tipo de datos que la variable a devolver, el valor solicitado. Pero para esto ya tenéis Internet, de investigar más a fondo sobre los fundamentos de programación. Aquí, si que he de acelerar un poquito más, lo siento por los que vayáis algo más rezagados, pero éste blog tratará sobre la creación de videojuegos en XNA y claro, para ello se necesita tener ciertas nociones de programación, por mínimas que sean pero, al menos lo anterior explicado debe estar más que sabido.

Bien, toca hacer unos cambios al diseño de nuestro formulario. Recordad dar nombres a los nuevos objetos que incluyáis al formulario, utilizando siempre la nomenclatura antes indicada, podéis echar un ojo al código fuente del formulario que está más adelante para saber cómo he llamado a cada objeto. Y bien, puedo decir que si he añadido un botón y he modificado el existente, no es por otra razón que por la de que se vea más claro el uso de objetos. En un botón guardamos los datos del jugador 1 y a su vez borra el formulario. Después, al pulsar sobre “Ver” se cargarán los datos de nuevo que estarán almacenados en memoria, pero no desde las variables antes utilizadas, si no de nuestro propio objeto Persona, que hemos llamado “jugador1”:

(FOTO 21)

Ahora pasamos al código que contiene nuestro formulario:

(FOTO 22 y 23)

Aquí vemos el código que contiene nuestro formulario. Tan sólo necesitamos usar dos espacios de nombres (System y System.Windows.Forms). Si os fijáis, aquí podemos ver el primer adelanto a la herencia entre clases, es decir, que un objeto hereda todas las propiedades de otro y se le suman las nuevas que se definan en él. Por ejemplo nosotros ahora tenemos la clase persona, luego podremos crear la clase jugador, y que jugador herede todo lo que contenga la clase persona, pudiendo añadir más características propias de la clase jugador, que no tengan sentido añadir en la clase persona. Imaginaros que una persona es jugador de nuestra aplicación, pues bien, para crear y salvar sus datos crearemos un perfil utilizando la clase jugador, que a su vez usa la clase persona, pero si además de la clase jugador tenemos otra que sea juez de juegos, por ejemplo, pues entonces no tendrá sentido crearle un perfil jugador, crearíamos en su defecto una clase juez que también heredará de persona, pero no tendrá las cualidades que un jugador, si no las propias de juez. Así que podríamos decir que es un árbol con sus ramas, en la copa tendríamos a la clase persona y pendiendo de ella, pero separadas, las clases persona y juez. De éste modo evitamos repetir código en ambas clases, por eso es muy interesante saber que se pretende hacer y aprender a dividir bien las ideas, a la vez que estructurar y organizar nuestro código. Si todo sale bien, podremos reutilizarlo, de tal modo que ahorraremos mucho tiempo.

Bien, es un ejemplo muy chorra sobre cómo utilizar objetos en programación, pero espero que os haya servido para algo. Iremos dándole más caña a este tema creando algo más complejo sobre objetos, así que a refugiaros en los libros y en el gran Dios Google para ir aprendiendo más sobre la programación orientada a objetos y en nuestro caso C#, para que los próximos tutoriales o ayudas sean más entendibles y fáciles de digerir.

Descargar el Ejemplo