Tutorial Kodu parte 1

Kodu es una aplicación que nos permite crear nuestros propios videojuegos, además de poder jugar con los que vienen ya instalados.Kodu nos ayuda a aprender sobre creación de videojuegos y programas, forma sencilla y divertida, sin necesidad se conocer ningún lenguaje de de programación.

Para comenzar nos descargaremos el programa de aquí.Lo instalaremos en nuestras computadoras y lo ejecutaremos.Al iniciarlo debemos ver un menú como el siguiente:

Este menú nos ofrece:

1. Resume: Podremos continuar con el último mundo que estábamos editando.
2. Load World: Permite cargar uno de los mundos guardados.
3. Options: Aquí haremos las configuraciones internas del juego.
4. Help: Ayuda sobre Kodu.
5. Quit Kodu: Salir de Kodu.

Daremos click en Load World y veremos un menú como el siguiente:

En el cual buscaremos (dándole click a las flechas verdes de los extremos) uno que diga Empty World v01.Al encontrarlo, lo seleccionaremos y daremos click en la opción play. Para editar el mundo que estamos viendo damos "esc" y lo que veremos será algo como esto:

Ahora sé que puede parecer confuso todas las herramientas que tenemos en el borde inferior, pero no se preocupen puesto que las iremos aprendiendo en el correr del tutorial.
Lo primero que haremos será crear una porción de tierra donde posicionar nuestros objetos, para lo cual elijiremos la 6 herramienta que es como un pincel pintando cubos y haremos click en ella.
Debajo de nuestro puntero deberíamos ver un cuadrado blanco que señala donde se colocara el cuadrado de material, así que lo que haremos será seleccionar que tipo de material queremos. Para eso haremos click en la herramienta que está indicada en la imagen.

Ahora nos aparecerá una gama de posibles materiales para usar como terreno, elijiremos el que más nos guste, y manteniendo el click izquierdo apretado iremos "pintando" nuestro mundo con un poco de este material, hasta tener un área de terreno no muy pequeña.

Aquí es cuando comienza lo divertido que es agregar los personajes de nuestro juego y es ahí cuando entra en acción la 4 herramienta que es la de objetos.
Al hacer click en ella y luego en cualquier parte de nuestro terreno se nos abrirá un submenú como el siguiente:

En este menú podremos decidir qué tipo de objeto vamos a agregar a nuestro mundo. Para nuestro tutorial seleccionaremos un kudo(marcado en la imagen con negro) que es un pequeño personaje que participara en nuestro juego. Ahora podemos ver que en nuestro mundo hay un kudo. Este kudo todavía no realiza ninguna acción pero en el siguiente tutorial aprenderemos a darle órdenes e instrucciones para que realice ciertos objetivos.

Leer entrada

Videotutorial crear terreno para Xna

Este tutorial lo hice en video para que sea más gráfico y más fácil de entender. Basicamente trata de como crear un terreno en 3DMax studio para poder importarlo luego en XNA.
Para este tutorial vamos a necesitar:
- 3D Max Studio
- Plugins para exportar modelo a .FBX
En el caso de que no podamos exportar a .fbx desde el 3DMax nos tendremos que descargar los plugins de acá: http://usa.autodesk.com/adsk/servlet/pc/item?siteID=123112&id=10775855 
El archivo es autoinstalable, osea una vez descargado doble click y listo.
- Photoshop o algun programa de dibujo.

Se recomienda tener conocimientos de 3dMax y del programa de dibujo para este tutorial.
Sin más preámbulos les dejo el tutorial.

Leer entrada

Creando nuestra primera clase en Xna

Bueno en la última entrega vimos como cargar una imágen en Xna, en éste caso vamos a crear una clase para cargar una imágen en Xna. ¿Para que nos sirve esto? para que cada vez que querramos cargar una imágen no tengamos que escribir todo el código de nuevo, y simplemente llamemos al código que se encuentra en la clase.

Empecemos: Sobre el nombre de nuestro proyecto, en el explorador de soluciones, botón derecho del mouse, Agregar nuevo elemento. Una vez en la ventana que nos aparece, seleccionamos clase y le ponemos un nombre, en mi caso le puse imagen, ya que ésta clase la vamos a usar para cargar imágenes.

En la región includes vamos a añadir lo siguiente.

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.Graphics;

Esto es necesario ya que lo necesitamos para trabajar con las imágenes.

Luego, abajo de     class imagen  {

Vamos a crear un vector que nos va a servir para definir la posición de la imágen, y vamos a crear una variable del tipo Texture2D para poder cargar la imágen que deseemos.

public Vector2 Position = new Vector2(0, 0);
private Texture2D mSpriteTexture;

El vector llamado Position lo definimos como público ya que necesitamos usarlo desde nuestro main (Game1.cs)  y la textura como privada. Para los que no entiendan bien estos términos recomendamos hacer algun tutorial de C# o de C++ ya que son cosas específicas del lenguaje.

Al igual que hicimos en nuestro main, vamos a tener que hacer un método para cargar nuestro contenido, quedandonos algo asi:

  public void LoadContent(ContentManager theContentManager, string theAssetName)
        {

            mSpriteTexture = theContentManager.Load(theAssetName);

        }

Acá le tenemos que pasar el contentmanager  ya que de otra forma no lo podríamos obtener y el nombre de la imágen. Dentro de la función le asignamos a la textura la imágen.

Ya tenemos cargada la imágen ahora nos queda dibujarla, bueno al igual que en nuestro main, vamos a hacer un método Draw.

       public void Draw(SpriteBatch theSpriteBatch)

        {

            theSpriteBatch.Draw(mSpriteTexture, Position, Color.White);

        }

Acá le pasamos el sprite, textura, dibujo o como más les guste llamarle, y lo dibujamos en la posición "Position" y con el color de la imágen sin alterarla.

Bien ya tenemos nuestra clase para cargar imágenes, ahora lo que tenemos que hacer es borrar el código anterior en nuestro main y añadir algunas modificaciones.

Primero tenemos que borrar lo que declaramos

        //Declaramos Fondo como una variable de tipo Texture2D
        Texture2D Fondo;
        //Declaramos Rectangulo como una variable de tipo Rectangle
        Rectangle Rectangulo;

ya que esto lo estamos haciendo en nuestra clase, y vamos a declarar una variable del tipo de nuestra clase.

imagen cubito;

ahí declaramos a cubito del tipo de nuestra clase imagen. Luego de declararla tenemos que inicializarla, bueno vamos al initialize y ponemos algo así:

cubito = new imagen();

Vamos a borrar lo que habíamos hecho anteriormente en el Load y vamos a cargar nuestra imágen.

 cubito.LoadContent(this.Content, "cubito");

Acá llamamos al loadcontent de la clase y cargamos a cubito

 cubito.Position = new Vector2(125,200);

Le definimos la posición a cubito llamando a position de nuestra clase y definiendo el vector.

Ya casi terminamos ahora lo único que nos falta es dibujar a cubito, bueno para eso vamos a reemplazar lo que habíamos hecho en la entrega anterior en el metodo Draw por lo siguiente:

Remplazamos spriteBatch.Draw(Fondo, Rectangulo, Color.White);

Por cubito.Draw(this.spriteBatch);

Ahora le podemos dar play y ver los resultados.

En la próxima entrega vamos a ver como cargar múltiples imágenes.

Próximamente dejo el link con los fuentes con el código bastante comentado, igual cabe aclarar que cada vez se irá comentando menos el códgo ya que vamos a ir saliendo de lo básico y ya vamos a tener idea de como funcionan las cosas.

Leer entrada

Escribiendo código en Xna

Bueno ya sabemos lo que es Xna como funciona, y sabemos como se conforma el programa en Xna, bien ahora vamos a pasar a la parte práctica y vamos a escribir nuestro primer código.
En esta entrega veremos como dibujar una imágen. El código vamos a escribirlo en nuestra clase principal.
En donde definimos las variables vamos a crear las siguientes variables:

Texture2D Fondo;

Rectangle Rectangulo;

Acá creamos la variable Fondo que va a ser nuestra imágen de fondo, como un tipo Texture2D, y vamos a definir la variable Rectangulo como un tipo Rectangle. 

En el constructor de la clase principal (para el que no sepa lo que es el constructor recomiendo leer el artículo como se conforma un programa en Xna y bajarse el ejemplo) vamos a escribir lo siguiente:

graphics.IsFullScreen = false;

graphics.PreferredBackBufferWidth = 800;

graphics.PreferredBackBufferHeight = 600;

Acá estamos seteando la variable graphics.IsFullScreen en false, ésta variable nos sirve para que la aplicación sea full screen o no, despues le seteamos el ancho y el alto de la aplicación, en nuestro caso 800 x 600, pueden hacer pruebas cambiando estos valores y van a ver como cambia la aplicación.

Luego de hacer esto y crear nuestras variables vamos a inicializarlas como se explicó anteriormente. Ésto lo hacemos en el método Initialize.

Fondo = Content.Load("NombredelaImagen");
Rectangulo = new Rectangle(0,0,graphics.GraphicsDevice.Viewport.Width, graphics.GraphicsDevice.Viewport.Height );
 

Lo que hacemos es inicializar la variable fondo cargandole una textura 2d con el nombre de nuestra imágen entre comillas dobles, luego inicializamos nuestro rectangulo con una posición x 0, posición y 0, un ancho igual al ancho de nuestra ventana, y un alto igual al alto de nuestra ventana.

Aclaración: Las imágenes, sonidos o todo el contenido externo que tengamos que cargar en el juego, lo tenemos que cargar en "Content" en el explorador de proyectos. Hacemos click derecho sobre content le ponemos agregar elemento existente, buscamos la imágen o el contenido que queramos y quedaran ahí.

Por último en el método Draw vamos a poner lo siguiente:

spriteBatch.Begin();

spriteBatch.Draw(Fondo, Rectangulo, Color.White);

spriteBatch.End();

Lo que hacemos aca es poner spriteBach.Begin(); para poder comenzar a dibujar, y luego dibujamos nuestro fondo con spriteBatch.Draw(Fondo,Rectangulo, Color.White); . Acá lo que hacemos es dibujar nuestra imágen que la definimos como "Fondo" al principio del programa y que luego le cargamos la imágen que queríamos que se muestre, le pasamos el parametro Rectangulo para indicarle las dimensiones de la imágen, y el color que le pusimos White para que quede tal cual está. Recomiendo jugar con estos valores, se puede cargar otra imágen, cambiarle la dimension a la misma, y el color.
Por último damos por finalizado el proceso de dibujado con spriteBatch.End(); y podemos dar ejecutar tranquilamente para ver nuestro resultado.

 Les dejo un código sobre este artículo muy comentado para que no puedan no entenderlo.

Código de fuente: Descargalo acá

Leer entrada

Como se conforma un programa en Xna (Capítulo 1)

En este capítulo vamos a ver como se conforma un programa en Xna osea como es el ciclo de vida del mismo. Ya vimos que es Xna y como funciona, también vimos como instalarlo. Ahora que ya lo tenemos instalado vamos a poner manos a la obra.

La imágen no se ve muy bien pero hagan click en ella asi se amplia.

Ahora vamos a elegir Windows Game (3.0), le ponemos un nombre a nuestro proyecto y hacemos clic en aceptar.

Al aceptar vamos a ver que se nos abre el proyecto ya con un código, vamos a explicar el ciclo de vida de un programa en Xna basandonos en el código que obtenemos al iniciar un nuevo proyecto.

Vamos a ver el código que se encunetra en la clase Game1 que es el que nos va a servir por ahora.

El código que nos aparece es similar a este.

//Sección: Includes

//Aca se incluyen todas las bibliotecas que vamos a usar como sonido, graficos, red, e.t.c.

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
using Microsoft.Xna.Framework.Net;
using Microsoft.Xna.Framework.Storage;

//En NameSpace se encuentra el nombre que le vamos a poner a la clase, para llamarla desde otro lugar.

namespace MiPrimerJuego

{

    public class Game1 : Microsoft.Xna.Framework.Game

    {

//Sección: Declaración de variables
//Acá es en donde vamos a definir nuestras variables, en este caso se definieron dos variables una para el GraphicsDeviceManager, que nos va a servir para manejar diferentes aspectos sobre la pantalla y los gráficos los cuales vamos a ver más adelante, y SpriteBach el cual nos va a servir para dibujar "Sprites" o "Imágenes".

        GraphicsDeviceManager graphics;

        SpriteBatch spriteBatch;

//Sección: Constructor
        public Game1()
        {

//Acá se crea contenido para las variables que ya vienen definidas por XML, osea cuando hablamos de objetos si la variable existe pero no se hace un new del objeto el objeto no se crea.  Es como cocinar, nosotros queremos comer "Comida", ya tenemos definido lo que queremos comer "Comida" (Nuestro objeto), pero para comer la "Comida" hay que hacer la comida (new Comida(Fideos) ) y una vez hecha podemos usar el objeto "Comida" (Comida.Comer) . También se define la ruta de donde va a estar archivado el contenido ("Imágenes, Música, Sonidos, e.t.c."). Generalmente esto quedará así y no se toca más.
 
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }


//Sección: Metodo Initialize

        protected override void Initialize()

        {
 

 //Acá vamos a inicializar todas las variables o las constantes del juego, según la lógica del XNA inicializar las constantes como es el ejemplo de la ruta de nuestro contenido se hace en Public Game1() pero lo más correcto seria es hacerlo en el Initialize, eso queda a criterio de cada uno. Lo que si les podría decir es que las variables hay que definirlas acá si o si, no nos conviene inicializarlas en Public Game1() porque seguramente vamos a hacer lío.

            spriteBatch = new SpriteBatch(GraphicsDevice);

            base.Initialize();
        }

//Sección: Metodo Load Content
        protected override void LoadContent()
        {

 //Acá es donde cargamos todos los elementos del programa, la música, los sonidos, todo tipo de gráficos,e.t.c.

        }

//Sección: Metodo Unload Content
        protected override void UnloadContent()
        {

 //Acá vamos a descargar de memoria los elementos que ya no usemos más. Nos va a servir para optimizar nuestro juego y no se vuelva super lento.

        }

//Sección: Metodo Update
        protected override void Update(GameTime gameTime)

        {

 //Acá en el update tenemos lo que se va a ejecutar mientras el juego esta corriendo. En este caso verifica en todo momento que no se aprete el botón para salir de la aplicación.
         
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();

    
           base.Update(gameTime);

        }

//Sección: Metodo Draw

        protected override void Draw(GameTime gameTime)

        {

 //Acá vamos a poner todo lo que queramos dibujar. En este caso me esta pintando toda la pantalla de un color azul claro.

           GraphicsDevice.Clear(Color.CornflowerBlue);

            base.Draw(gameTime);

        }

    }

}

Gráficamente sería algo así:

Voy a dejar el código de fuente con todo esto explicado y organizado ya que a mucha gente le resulta más fácil verlo en el ejemplo práctico.

Código de fuente de MiPrimerJuego: Descargalo acá

Bueno en la próxima entrega ya vamos a comenzar a escribir un poco de código asi ponemos toda ésta teoría en práctica.

Leer entrada

Instalación de XNA y C#

Bueno para poder empezar necesitamos instalar el C#, ya que en nuestro caso el lenguaje a utilizar va a ser ese y el XNA 3.1

Recomiendo descargar el Visual C# 2008 Express Edition que es con el que trabajamos para hacer los ejercicios del tutorial. El Visual C# 2008 Express Edition se lo pueden bajar desde acá:
http://argade.blogspot.com/2010/04/visual-c-2008-express-edition.html

Luego de descargarse el Visual C# Express Edition hay que descargar el XNA 3.1 el cual lo pueden descargar desde acá:
http://argade.blogspot.com/2010/05/xna-game-studio-31.html

Instalar Visual C# 2008 Express Edition:

Al ejecutar la aplicación nos mostrará la siguiente ventana. 

Presionamos Siguiente.

Marcamos las opciones y presionamos Siguiente.

Desmarcamos el Cuadrito y presionamos Siguiente.

Finalmente presionamos Instalar.

y comenzaran a Descargarse los elementos marcados.

Al Terminar nos dirá que tenemos 30 días para registrar nuestro producto, recomiendo hacerlo es totalmente gratuito las instrucciones las tienes en cerras en el primero ovalo.

Instalación de XNA 3.1;

Ahora bien ya tenemos instalado Visual Studio 2008 pero ahora debemos instalarle el XNA

Al ejecutar la aplicación se nos abre la siguiente ventana:

Esta será la imagen que veremos al correr el programa XNA 3.1, presionamos siguiente.

Aceptamos los términos del contrato y presionamos siguiente.

En esta ventana pueden activar la opción que quieran, una vez seleccionadas las reglas proceden a Instalar.

Presionamos Finalizar y ya tendremos instalado Visual C# y XNA Game Studio 3.1.

El próximo capítulo vamos a ver como se conforma un programa en C# con Xna.

Leer entrada

Tutorial Xna (Introducción) por Argade

Bueno gente les comento primero que nada que en este momento del blog voy a empezar a hacer un tutorial en español desde 0 para poder programar en Xna, asi que seguramente voy a tardar un poco mas en hacer los post y dejando de lado un poco las noticias, asi que si hay algun bondadoso que tenga ganas de ofrecerse para postear alguna que otra noticia en el blog, bienvenido sea.
Bien empecemos por lo basico

¿Qué es Xna?

XNA es una API desarrollada por Microsoft para el desarrollo de videojuegos para las plataformas Xbox 360 , Windows y Zune.

¿Qué es una API?

Según las siglas significa "interfaz de programación de aplicaciones". Una interfaz de programación representa una interfaz de comunicación entre componentes de software. Osea en definitiva una API es un conjunto de "llamadas" a ciertas bibliotecas. Y ¿Para qué me sirve una API?, bueno básicamente en esas bibliotecas a las cuales llamamos existen funciones que nos facilitan mucho las cosas, por ejemplo necesitamos iniciar el modo de video de la placa, sin una API tendríamos que estar usando ensamblador para llamar a interrupciones de video para poder iniciar el modo de video.

En definitiva algo asi:

#include  getch(), clrscr()
#include  MK_FP, geninterrupt()
#include memset()
unsigned char *pantalla = (unsigned char *) MK_FP(0xA000, 0);
void SetMCGA()
{
_AX = 0x0013;
geninterrupt (0x10);
}
void SetText()
{
_AX = 0x0003;
geninterrupt (0x10);
}

Si tuvieramos una API que llame a una biblioteca que tenga la función esta definida, seguramente haríamos algo asi:

InicializarVideo(Resolucion)

Conclusión resumimos 14 líneas en 1 sola.Tal vez no sea tan complicado inicializar el modo de video, pero si tendríamos que cargar modelos y texturas 3D podrían ser muchisimas líneas resumidas en una sola o en un par en su defecto.

Como ibamos explicando Xna técnicamente es un Marco de Trabajo (Framework), basado en .NET Framework 2.0 y al igual el .NET Framework 2.0, éste corre sobre el CLR, aunque en una implementación que provee un manejo optimizado para la ejecución de videojuegos.

Resumidamente y muy por encima un Framework es un entorno de trabajo que nos reune todas las funciones que llaman a las bibliotecas para poder programar más comodamente en lo que tengamos que hacer.

 Hasta acá todo muy lindo pero muchos se preguntarán que es el CLR, bién El Common Language Runtime o CLR (Lenguaje común en tiempo de ejecución) es el componente de máquina virtual de la plataforma .Net de Microsoft.  Es la implementación del estándar Common Language Infrastructure (CLI) que define un ambiente de ejecución para los codigos de los programas. El CLR ejecuta una forma de código intermedio (bytecode) llamada Common Intermediate Language (CIL, anteriormente conocido como MSIL -- Microsoft Intermediate Language), la implementación de Microsoft del CLI.

Los desarrolladores que usan CLR escriben el código en un lenguaje como C# o VB.Net. En tiempo de compilación, un compilador.NET convierte el código a MSIL (Microsoft Intermediate Language). En tiempo de ejecución, el compilador en tiempo de ejecución (Just-in-time compiler) del CLR convierte el código MSIL en código nativo para el sistema operativo. Alternativamente, el código MSIL es compilado a código nativo en un proceso separado anterior a la ejecución. Esto acelera las posteriores ejecuciones del software debido a que la compilación de MSIL a nativo ya no es necesaria.

Para que se vea un poco mejor entonces lo que se hace es lo siguiente: Nosotros tenemos nuestro código en un lenguaje como C#, VB.NET o cualquier otro lenguaje .NET, cuando le damos play, para que ejecute el código de fuente, el programa se compila, al compilar el programa se convierte el código en C# o en el lenguaje que lo hayamos hecho en un lenguaje intermedio entre el C# o el lenguaje que hayamos utilizado y el código de máquina o código nativo, luego mientras se ejecuta el código de fuente (osea el programa ya compilo y está corriendo), se convierte lo que quedo en el lenguaje intermedio al lenguaje nativo "en tiempo de ejecución".

Hasta acá vamos bien, entonces el funcionamiento de todo el sistema seria

Capas de XNA - Las diferentes capas de XNA, vistas de arriba a abajo, el XNA game studio utiliza la  funcionalidad del xna framework, y éste a su vez se basa en el .net framework. Por último están las  plataformas a las que van destinadas nuestras aplicaciones, windows, Xbox 360 o zune.

En otras palabras, XNA es una plataforma de desarrollo de videojuegos sobre DirectX, en la cual disponemos de cierta funcionalidad ya integrada lo que nos permite centrarnos en la parte de qué queremos hacer en nuestro juego y no en el cómo hacerlo.

Para verlo gráficamente:

Framework de XNA - Los recuadros verdes se corresponde con la funcionalidad que ya viene de "serie" con el framework.

Bueno en este momento ya tendríamos una idea de que es XNA y de como funciona, en el próximo Capítulo vamos a ver lo que necesitamos instalar para poder comenzar con la acción.

Leer entrada