Elaboracion-de-un-manual-para-programar-en-XNA-Game-Studio-3 1

Vista previa del material en texto

U
E
pro
C
niversid
Fa
Elabora
grama
Q
Ciudad Un
dad Na
M
cultad 
ación d
r en XN
Que para o
Ingeniero 
P
Carlos O
iversitaria,
 
 
cional A
éxico 
 
 
de Ing
 
 
de un m
NA Gam
 
 
Tesis 
 
 
btener el t
en Compu
 
 
 
 
 
 
Presenta: 
Osnaya Med
, México D
Autóno
geniería
manual
me Stud
título de: 
utación 
drano 
D.F., junio d
oma de 
a 
 para 
dio 3.1
de 2011 
1 
 
UNAM – Dirección General de Bibliotecas 
Tesis Digitales 
Restricciones de uso 
 
DERECHOS RESERVADOS © 
PROHIBIDA SU REPRODUCCIÓN TOTAL O PARCIAL 
 
Todo el material contenido en esta tesis esta protegido por la Ley Federal 
del Derecho de Autor (LFDA) de los Estados Unidos Mexicanos (México). 
El uso de imágenes, fragmentos de videos, y demás material que sea 
objeto de protección de los derechos de autor, será exclusivamente para 
fines educativos e informativos y deberá citar la fuente donde la obtuvo 
mencionando el autor o autores. Cualquier uso distinto como el lucro, 
reproducción, edición o modificación, será perseguido y sancionado por el 
respectivo titular de los Derechos de Autor. 
 
 
 
2 
 
1 Contenido 
Objetivo ........................................................................................................................................................ 5 
Parte I ............................................................................................................................................................ 6 
1  Introducción .......................................................................................................................................... 7 
1.1  México y los videojuegos .............................................................................................................. 7 
1.2  La Interfaz de Programación de Aplicaciones XNA ....................................................................... 7 
2  Diseño del manual de XNA en español .................................................................................................. 8 
2.1  Justificación .................................................................................................................................. 8 
2.2  Estructura ..................................................................................................................................... 8 
2.3  A quién va dirigido el manual de programación en XNA .............................................................. 9 
2.4  Apoyos académicos y requisitos ................................................................................................... 9 
2.4.1  Software ................................................................................................................................... 9 
2.4.2  Hardware ................................................................................................................................ 10 
Parte II Manual ........................................................................................................................................... 11 
1  Vertex Buffer ....................................................................................................................................... 12 
1.1  VertexBuffer ............................................................................................................................... 12 
1.2  DynamicVertexBuffer ................................................................................................................. 22 
2  Primitivas ............................................................................................................................................. 24 
2.1  PointList ...................................................................................................................................... 25 
2.2  LineList ........................................................................................................................................ 26 
2.3  LineStrip ...................................................................................................................................... 26 
2.4  Modos de Culling ........................................................................................................................ 27 
2.5  TriangleList ................................................................................................................................. 27 
2.6  TriangleStrip ............................................................................................................................... 29 
2.7  TriangleFan ................................................................................................................................. 30 
3  Creando objeto 3D .............................................................................................................................. 31 
3.1  Posicionando cámara .................................................................................................................. 34 
3.2  Teclado ....................................................................................................................................... 35 
3.3  Control 360 ................................................................................................................................. 35 
3.4  Traslación .................................................................................................................................... 37 
3.5  Escala .......................................................................................................................................... 38 
3.6  Rotación ...................................................................................................................................... 40 
4  Textura ................................................................................................................................................ 43 
4.1  El téxel ........................................................................................................................................ 43 
4.2  Filtros .......................................................................................................................................... 44 
3 
 
4.3  Mipmaps ..................................................................................................................................... 45 
4.4  Plano con textura........................................................................................................................ 45 
4.5  Modos de direccionamiento ....................................................................................................... 51 
5  Texto .................................................................................................................................................... 55 
5.1  SpriteFont ................................................................................................................................... 55 
5.2  Sprite Font Texture ..................................................................................................................... 60 
6  Cómo cargar modelos 3D desde un archivo X y FBX ........................................................................... 64 
6.1  Formatos de archivos ................................................................................................................. 64 
6.2  La clase Model ............................................................................................................................ 64 
6.3  Ejemplo 01 .................................................................................................................................. 66 
6.4  Ejemplo 02 .................................................................................................................................. 69 
6.4.1  Blending .................................................................................................................................73 
7  Iluminación .......................................................................................................................................... 77 
7.1  Shader ......................................................................................................................................... 77 
7.2  Iluminación ambiental ................................................................................................................ 78 
7.2.1  HLSL. Modelo de iluminación ambiental ................................................................................ 78 
7.2.2  Inciando FX Composer ............................................................................................................ 84 
7.2.3  HLSL. Modelo de iluminación ambiental con textura ............................................................ 89 
7.2.4  Añadiendo nuevo efecto en FX Composer ............................................................................. 93 
7.3  Iluminación difusa ...................................................................................................................... 94 
7.3.1  Fuente de iluminación direccional ......................................................................................... 96 
7.3.2  Fuente de iluminación puntual ............................................................................................ 100 
7.3.3  Fuente de iluminación spot .................................................................................................. 106 
7.4  Iluminación especular ............................................................................................................... 113 
7.4.1  Reflexión especular. Actualizando códigos de fuentes de iluminación................................ 115 
7.5  Múltiples fuentes de iluminación ............................................................................................. 117 
7.5.1  Multi‐pass rending ............................................................................................................... 118 
7.5.2  Ejemplo Multiluces ............................................................................................................... 118 
8  Cómo agregar un efecto en XNA ....................................................................................................... 126 
8.1  Efecto ambiental ....................................................................................................................... 126 
8.1.1  Clonación de efecto .............................................................................................................. 126 
8.1.2  Interfaz para el shader ......................................................................................................... 129 
8.2  Luz direccional .......................................................................................................................... 135 
8.3  Efecto multiluces ...................................................................................................................... 142 
9  Colisión .............................................................................................................................................. 153 
9.1  Bounding Sphere vs. Bounding Sphere ..................................................................................... 154 
4 
 
9.2  Axis Aligned Bounding Box vs. Axis Aligned Bounding Box....................................................... 163 
9.3  Ray vs. Boundign Sphere .......................................................................................................... 170 
9.3.1  Cámara libre ......................................................................................................................... 170 
9.3.2  La clase Mira ......................................................................................................................... 176 
9.3.3  La clase Proyectil .................................................................................................................. 177 
9.3.4  La clase ModeloEstatico ....................................................................................................... 179 
9.3.5  Implementación ................................................................................................................... 181 
10  Conclusiones ................................................................................................................................. 184 
11  Bibliografía .................................................................................................................................... 185 
12  Glosario ......................................................................................................................................... 187 
 
   
5 
 
Objetivo 
Debido a  la  falta de  textos en español sobre programación orientada a gráficos 3D y al  rezago que se 
tiene en los libros de tecnología, por su rápido cambio. Se elaborará material bibliográfico para la creación 
de  programas  en  3D,  utilizando  XNA  Game  Studio  3.1;  como  apoyo  educativo  para  el  estudiante  de 
Computación  Gráfica;  así  como motivar,  enseñar,  y  generar  el  interés  en  la  producción  de  programas 
interactivos, como pueden ser los videojuegos. 
   
6 
 
Parte I 
   
7 
 
1 Introducción 
En el mercado de los videojuegos, México ha comenzado a crecer demasiado en estos últimos tres años 
que lo ha posicionado en el cuarto lugar internacionalmente y el primero en Latinoamérica, pero sólo como 
consumidor. En el año 2010 tuvo un valor de 12, 857 millones de pesos. 
Este nicho comenzó a crecer debido al aumento de nuevos dispositivos multimedia y redes sociales, que 
han dado cabida al entretenimiento digital. Entre los diferentes dispositivos, las consolas de videojuegos han 
alcanzado a penetrar en los hogares mexicanos como la televisión, en especial la consola Xbox 360™ que ha 
ocupado  el  61%  de  preferencia.  Además,  los  teléfonos  celulares  inteligentes  han  comenzado  a 
incrementarse entre la población, sin embargo, la tardía penetración del ancho de banda y el precio alto de 
dicho  servicio  a mermado  el  uso  de  la  Internet  en  estos  dispositivos,  aun  así,  se  han moldeado  nuevos 
jugadores o gamers, en estos móviles. 
El éxito de este mercado ha sido tal, que ha superado al cine, y la tendencia a mejorar la experiencia del 
usuario ha hecho que éste deje su asiento y se vuelva partícipe de lo que ve, como es el caso con Kinect™, 
cuyo éxito se denota en dejar a un lado el control para sustituirlo por todo el cuerpo de quien juega. 
1.1 México y los videojuegos 
Hablando específicamente de  las consolas de videojuegos, por ser el de mayor consumo y preferencia 
entre  los gamers,  los  videojuegos  son producidos por empresas  cuyos  centros  se encuentran en Estados 
Unidos de América, Japón, Canadá y Gran Bretaña; muchas de estas empresas tienen subsidiarias en otros 
países, en los cuales México no tiene hasta el momento alguna. 
Latinoamérica ha emprendido la batalla en el mercado de los videojuegos, y no necesariamente se hace 
pensar que al ser México el primer consumidor en esta región es el pionero en la producción. Es Colombia y 
Argentina  quienes  han  dado  los  primeros  pasos  con  empresas  como ©Immersion  Games &  Graphics  y 
©Sabarasa  Inc. Y en comparación con  los emporios de  los videojuegos, existen en México anexas de estas 
empresas que producen videojuegos. 
El Estado Mexicano ha vislumbrado  la producción de software con el Programa para el Desarrollo de  la 
Industria de Software  (PROSOFT), el cual busca el desarrollo en este  rubro otorgando apoyos a proyectos 
que  sustenten  las  tecnologías  de  la  información  (TI).  Además,  la  Secretaría  de  Economía  ha  lanzado  la 
iniciativa Juego de Talento para fomentar el desarrollo de software interactivo, en especial los videojuegos, 
ysu objetivo es descubrir  las aptitudes que  se encuentran en México para aterrizarlas en  la  creación de 
empresas que destinen su producto al mercado nacional e internacional. 
1.2 La Interfaz de Programación de Aplicaciones XNA 
XNA es conjunto de bibliotecas orientadas al desarrollo de aplicaciones interactivas, sobre la consola de 
videojuegos Xbox 360, equipos basados en Windows y teléfonos móviles. Las diferentes bibliotecas de XNA 
ofrecen operación sobre gráficos 2D, gráficos 3D, audio, video, entradas estándar, entradas no estándar y 
red. 
XNA  se  integra  al  entorno  de  desarrollo  de  Visual  Studio,  ofreciendo  todas  las  ventajas  de  una 
herramienta profesional y de misión crítica. 
XNA está basado en el Framework de .NET, sin embargo, ofrece su propio Framework para poder operar 
entre las diferentes plataformas. 
XNA es un bloque más en  la estructura de  .NET de Microsoft, por  lo que el  lenguaje de programación 
para trabajar es cualquiera que esté bajo las reglas del Common Language Runtime (CLR)1, como lo es Visual 
Basic  .NET,  C#  o  C++  administrado.  Sin  embargo,  la  adopción  de  C#  como  lenguaje  de  programación 
                                                                 
1
 Para mayor información acerca de .NET visite el sitio de Desarrollador 5 estrellas: 
http://www.mslatam.com/latam/msdn/comunidad/dce2005/  
8 
 
primario, ha sido por su sencillez y semejanza con C++, en la cual las Aplication Programming Interface (API) 
DirectX y OpenGL están diseñadas. 
Por  lo anterior XNA  facilita  la escritura de programas  interactivos,  con el menor número de  líneas de 
codificación y la integración sencilla entre los diferentes dispositivos, lo que ha vuelto a esta API en versátil 
para los programadores principiantes. 
2 Diseño del manual de XNA en español 
2.1 Justificación 
A la falta de bibliografía especializada en programación de gráficos 3D, y en idioma español. El manual de 
programación 3D surge como respuesta a las necesidades de volcar el conocimiento adquirido en el aula en 
una consola de videojuegos, PC y posteriormente en el teléfono celular. Todo eso, sin cambiar el lenguaje de 
programación y el entorno de desarrollo. 
XNA es un conjunto de bibliotecas que permite desarrollar aplicaciones gráficas 2D y 3D, sobre  las tres 
plataformas en que el mundo de los medios interactivos está pululando. Las herramientas son gratuitas, y la 
posibilidad de vender el producto  final a un costo de suscripción  justo, hizo atractivo  la generación de un 
libro que trata de motivar, enseñar, y generar el interés en la producción de programas interactivos, como 
pueden ser los videojuegos. 
2.2 Estructura 
El  manual  está  constituido  por  nueve  capítulos,  los  primeros  seis  muestran  el  uso  de  las  clases 
principales de dibujado en 3D en XNA, y no demuestran una gran complicación para el  lector. Los últimos 
tres capítulos hacen uso de las clases explicadas en los seis primeros, y aumenta la complejidad del código, 
pues  abarca  conceptos  matemáticos  computación  gráfica  y  un  nuevo  lenguaje  de  programación.  Sin 
embargo, se ha tratado de explicar de la mejor manera para su comprensión. 
En cada capítulo se muestra una serie de ejemplos con su código explicado línea a línea, al finalizar cada 
uno se muestran imágenes que ayudan a demostrar el resultado esperado. En ocasiones se deja al lector un 
ejercicio  para  que  verifique  los  diferentes  valores  que  pueden  tomar  algunos métodos,  o  se  deja  que 
complemente algunos ejemplos vistos con anterioridad. 
En seguida se muestra un resumen de los capítulos del manual de programación en XNA. 
Vertex buffer. En este capítulo se explican  las clases VertexBuffer y DynamicVertexBuffer, clases que 
representan el búfer de  vértices del dispositivo  gráfico. Para mostrar  las diferencias entre  cada  clase,  se 
utiliza un arreglo de vértices para dibujar un triángulo. 
Primitivas. Aquí se muestra cada una de las primitivas que XNA ofrece para dibujar. En cada una de ellas 
se utiliza un mismo arreglo de vértices para mostrar las diferencias entre cada una de ellas; a excepción de la 
última, en donde se le asigna al búfer de vértices otro arreglo. 
Creando objeto 3D. En este capítulo se muestra cómo posicionar la cámara en el mundo tridimensional, 
a utilizar  la entrada de datos por medio del  teclado y el gamepad del Xbox 360, para  trasladar,  rotar y/o 
escalar un cubo. Este cubo es creado a partir de un arreglo de vértices y uno de índices. 
Textura. Se presenta un plano, creado a partir de un arreglo de vértices, en donde texturiza una imagen. 
A  la  textura  se  le  aplican diferentes  filtros predefinidos en XNA,  también  se utilizan  todos  los modos de 
direccionamiento que presenta XNA. 
Texto. XNA  tiene dos  formas de presentar  texto en pantalla, una es a partir de un XML con  todas  las 
propiedades de la fuente y la otra es a partir de una imagen con todos los caracteres a mostrar. 
9 
 
Iluminación.  Se  deja  a un  lado  XNA  y  se manejan  los  shaders, para  explicar modelos  de  iluminación 
básicos con diferentes tipos de fuente de iluminación. Y se introduce al lector al lenguaje de programación 
sobre hardware, High Level Languaje (HLSL). 
Cómo agregar un efecto en XNA. Se integran los efectos, vistos en el capítulo anterior, en una solución 
de XNA. Se hacen pequeños  cambios a  los  shaders, pero  solo  como  cuestión de  ilustración;  se  le deja al 
lector tratar de entender los cambios y el crear la aplicación que totalice los efectos de iluminación en XNA. 
Colisión. El último capítulo revisa las clases BoundingSphere, BoundingBox y Ray. Para cada una de ellas 
se presenta un caso de colisión entre ellas mismas, a excepción de la clase Ray, ya que no es una envolvente. 
Se crean las clases Camara, Mira, Proyectil, ModeloEstatico y ModeloDinamico; que complementan los tres 
ejemplos de colisión. 
2.3 A quién va dirigido el manual de programación en XNA 
El manual de programación nació con  la  idea de apoyar a  los estudiantes que estén cursando, o hayan 
cursado,  la materia de Computación gráfica, en  la carrera de  Ingeniería en computación, de  la Facultad de 
Ingeniería en la Universidad Nacional Autónoma de México. Sin embargo, en la Internet se encontró mucho 
interés  por  parte  de  personas  apasionadas  con  los  gráficos,  y  sobre  todo,  con  la  nueva  tecnología  que 
representa XNA Game Studio. 
El manual está enfocado en  los gráficos 3D, por  lo  tanto, se  recomienda que el público  lector de esta 
obra tenga los siguientes conocimientos, solo para una mejor comprensión. 
 Lenguaje de programación C#. 
 Paradigma de programación orientado a objetos. 
 Lenguaje de programación C. 
 Geometría Analítica. 
 Algebra Lineal. 
Aunque  la  anterior  lista  representa  un  obstáculo,  se  ha  tratado  de  explicar  de  la mejor manera  los 
ejemplos, para aquellas que estén por involucrarse en esta materia. 
2.4 Apoyos académicos y requisitos 
El manual de programación estará acompañado por  los programas  fuentes,  listos para  ser ejecutados 
desde un inicio. También se incluirán videos demostrativos de algunos ejemplos que requieran más que una 
imagen. 
Además se incluirá una copia de Visual Studio 2008 Express, XNA Game Studio 3.1 y FX Composer. Todo 
este software se puede descargar gratuitamente de las siguientes direcciones Web. 
 http://www.microsoft.com/express/download/ 
 http://www.microsoft.com/downloads/details.aspx?FamilyID=80782277‐d584‐42d2‐8024‐
893fcd9d3e82&displaylang=en 
 http://developer.nvidia.com/object/fx_composer_home.html 
2.4.1 Software 
XNA Game Studio funciona sobre plataformas Windows, en la Tabla 2‐1 se muestran las versiones de los 
sistemas  operativos  admitidos  para  la  instalación  de  XNA.  Se  recomienda  la  actualización  del  sistema 
operativo 
10 
 
Tabla 2‐12 
Sistema Operativo  Versiones admitidas 
Windows XP   Home Edition 
 Professional Media Center Edition 
 Tablet PC Edition 
Windows Vista   Home Basic 
 Home Premium 
 Business 
 Enterprise 
 Ultimate 
Window 7   Home Basic 
 Home Premium 
 Professional 
 Enterprise 
 Ultimate 
En el caso del Xbox 360, se debe contar con XNA Game Studio Connect. Este software se descarga desde 
el bazar del Xbox 360. 
XNA  Game  Studio  3.1  necesita  del  entorno  de  desarrollo  Visual  Studio  2008,  en  cualquiera  de  sus 
versiones Express, Standard, Professional o Team System. Las especificaciones de software y hardware de 
cada una de ellas varían. 
2.4.2 Hardware 
El  requisito adicional en hardware,  sobre  la PC, es una  tarjeta gráfica que admita Shader Model 3.0 y 
DirectX 9.0c. Este requisito es  indispensable para poder ejecutar  los ejemplos mostrados en el capítulo de 
Iluminación. Se recomienda la actualización de los controladores de la tarjeta gráfica. 
Para probar los ejemplos en el Xbox 360, se debe contar con un disco duro para su almacenamiento. 
   
                                                                 
2
 Tabla de requisitos tomada de la siguiente dirección: http://msdn.microsoft.com/es‐mx/library/bb203925.aspx  
11 
 
Parte II Manual 
   
 
1 V
1.1 V
Los 
de plan
una  tria
posició
contene
puntos,
El ve
dichos 
hereda 
En e
Visual 
Archivo
plantilla
Window
Al  c
comenz
       
3
 Para ma
Vertex Bu
VertexBuf
modelos tridim
nos triangulare
ada de aristas
n,  color,  textu
er  un  conjunt
, se les ha deno
ertex buffer es
datos en el bú
de la primera 
el ejemplo sigu
Studio  y  c
o\Nuevo\Proye
a instalados. E
ws Game (3.1)
crear  su  nueva
zar, es más, pu
                         
ayor información a
ffer 
ffer 
mensionales q
es en el espacio
.  Los puntos, 
ura,  normal,  t
o  de  tres  coo
ominado vértic
s una región de
fer de vértices
y VertexBuffer
uiente, se mues
ree  un  nue
ecto. Enseguid
n tipos de pro
), véase Ilustrac
Ilus
a  aplicación,  p
uede oprimir F5
                         
acerca del vertex b
ue se pueden 
o tridimension
alejándonos d
tangente  y  bi
ordenadas  (x,  y
ces. 
e memoria, en
s, XNA ofrece l
r no se recomi
stra el uso del 
vo  proyecto;
da se abrirá un
oyecto, seleccio
ción 1‐1. 
stración 1‐1 Ven
podrá  visualiza
5 para ejecutar
        
buffer consulte: ht
ver en los vide
nal. Cada plano
del  término m
normal.  Los  p
y,  z). Dado  la 
n la tarjeta gráf
as clases Verte
enda para el u
VertexBuffer p
;  para  ello, 
a ventana de d
one XNA Gam
ntana de diálogo
ar  que  autom
rla y ver una ve
ttp://msdn.micros
eojuegos están
o está constitu
atemático, alm
puntos  en  el 
posible  inform
fica, para alma
exBuffer y Dyn
so sobre el Xb
para dibujar un
vaya  al  m
diálogo para se
me Studio 3.1 y
o: Nuevo proyec
máticamente  se
entana azul, vé
soft.com/en‐us/lib
n conformados
uido por una t
macenan  infor
espacio,  por 
mación  que  re
acenar vértices
namicVertexBu
ox3603. 
n triángulo. Co
menú  principa
eleccionar el ti
y en la parte d
cto 
e  crea  todo  lo
éase Ilustració
brary/bb198836.as
s por un conjun
erna de punto
rmación  sobre 
lo  menos  deb
epresentan  es
s. Para estable
uffer, esta últi
omience por ab
al  y  seleccio
ipo de proyect
de plantillas to
 
o  necesario  p
n 1‐2. 
spx 
12 
nto 
os y 
  su 
ben 
tos 
cer 
ma  
brir 
one 
to y 
me 
ara 
 
Clar
cosas a
using S
using M
using M
Esta
archivo
 
 
 
namespa
{ 
 pub
 { 
 
 } 
} 
Visu
de  la  c
adminis
de la in
Para
Graphic
VertexD
       
4
 Para ma
ro está, que es
ntes de contin
System; 
Microsoft.Xna
Microsoft.Xna
as  son  las dire
o Game1.cs cre
System es el 
eventos, las in
Microsoft.XN
juegos. 
Microsoft.XN
bajo nivel. 
ace TutorialX
blic class Ga
 GraphicsDev
ual Studio crea
clase  Game  y
stración del di
icialización bás
a  el  ejemplo 
csDeviceMana
Declaration v
                         
ayor información a
sto hace más r
uar, y sólo ser
a.Framework;
a.Framework.
ectivas  que  se 
ado por Visual
espacio de no
nterfaces, etcé
NA.Framework 
NA.Framework
X01 
ame1 : Micro
viceManager 
 el namespace
y  la  variable 
spositivo gráfi
sica del dispos
se  añaden  la
ager. 
vertexDeclar
                         
acerca de System v
Ilustración 
rápido el desa
án las necesar
 
Graphics; 
necesitan par
l Studio. 
ombre que con
étera.4 
es el espacio 
.Graphics es e
soft.Xna.Fra
graphics; 
e, cuyo nombre
de  instancia 
co, que es la t
itivo gráfico, d
s  siguientes  l
ation; 
        
visite la siguiente d
1‐2 Programa p
rrollo de  la ap
ias para ver el 
ra  crear  el  triá
ntiene  las clas
de nombre q
l espacio de no
amework.Game
e corresponde
GraphicsDevic
tarjeta de vide
e la lógica del 
íneas,  despué
dirección: http://m
redefinido 
plicación, sin e
triángulo dibu
ángulo  y  que 
es  fundament
ue contiene  la
ombre que con
e al del proyect
ceManager  qu
eo de la compu
juego y el cód
és  de  la  decla
msdn.microsoft.co
 
mbargo, hay q
ujado en la ven
tiene  que  colo
tales que defin
as clases nece
ntiene los mét
to; la clase Ga
ue  maneja  la 
utadora. La cla
igo del render
aración  del  di
om/es‐es/library/s
que explicar un
ntana. 
ocar  al  inicio 
nen  los datos, 
esarias para cr
odos de la API
me1, que here
configuración
ase Game prov
. 
ispositivo  gráf
system.aspx  
13 
nas 
del 
los 
ear 
 de 
eda 
n  y 
vee 
fico 
14 
 
BasicEffect effect; 
VertexBuffer vertexBuffer; 
VertexDeclaration  es  la  clase  que  representa  la  declaración  de  un  vértice,  debido  a  que  existen 
diferentes tipos de vértices definidos en XNA, estos pueden ser: 
 VertexPositionColor. Esctructura personalizada que contiene posición y color. 
 VertexPositionColorTexture. Estructura personalizada que contiene posición, color y textura. 
 VertexPositionNormalTexture. Estructura personalizada que contiene posición, normal y textura. 
 VertexPositionTexture. Estructura personalizada que contiene posición y textura. 
En este ejemplo se utiliza VertexPositionColor, más adelante se mostraran  los demás tipos de vértices. 
En DirectX se definía la estructura del tipo de vértice, sin embargo, XNA da estos cuatro tipos de estructuras 
como parte ésta, sin más que llamarlas como cualquier tipo de dato. 
BasicEffect  representa  un  shader  versión  1.1,  dando  soporte  para  el  color  de  los  vértices,  textura  e 
iluminación. En XNA es necesario utilizar un tipo de shader para mostrar en pantalla el dibujo, a diferencia 
de DirectX u OpenGL. 
VertexBuffer es la clase que representa el buffer de vértices para manipular los recursos. 
Ahora  se  instancia  los  vértices  que  crearan  el  triángulo,  por  lo  que  se  usa  un  arreglo  de 
VertexPositionColor. El constructor sería el siguiente: 
public VertexPositionColor (Vector3 position, Color color) 
Tabla 1‐1 
Propiedad  Descripción 
position  Es un Vector3, por lo que representa la posición del vértice en coordeanas x, y ,z. 
color  Es el color del vértice representado por los colores R,G,B. 
 
private readonly VertexPositionColor[] vertices = 
{ 
 new VertexPositionColor(new Vector3(0.0F, 1.0F, 0.0F), Color.White), 
 new VertexPositionColor(new Vector3(1.0F, -1.0F, 0.0F), Color. White), 
 new VertexPositionColor(new Vector3(-1.0F, -1.0F, 0.0F), Color. White) 
}; 
En  el  constructor,  de  la  clase Game1,  se  inicializa  el  dispositivo  gráfico  y  algunas  propiedades  de  la 
ventana en donde se mostrará  todo el mundo que se creé, en  la Tabla 1‐2 se muestran algunas de estas 
propiedades5. 
public Game1() 
{ 
 graphics = new GraphicsDeviceManager(this); 
 this.IsMouseVisible = true; 
 this.Window.Title = "xintalalai Tutorial 00"; 
 this.Window.AllowUserResizing = true; 
                                                                 
5
 Para mayor información de los miebros de la clase Game consulte la siguiente dirección: http://msdn.microsoft.com/en‐
us/library/microsoft.xna.framework.game_members.aspx15 
 
} 
Tabla 1‐2 
Propiedad  Descripción 
IsMouseVisible 
Muestra  u  oculta  el  puntero  del  mouse  sobre  la  venta,  por  default  está 
oculto. 
Window.Title 
Es el título de la ventana, por default el título es el nombre que se le dió a la 
solución en el momento de crearla. 
Window.AllowUserResizing  Permite máximizar o redimensionar el tamaño de la venta. 
En  el método  Initialize  es  donde  se  inicializa  toda  lógica  o  cualquier  recurso  no  gráfico.  Por  default 
dentro del método se  tiene  la  inicialización base de  la clase Game, así que hay que agregar unas cuantas 
líneas para crear la declaración del vértice, el efecto así como el búfer de vértices. 
protected override void Initialize() 
{ 
 base.Initialize(); 
} 
La declaración de VertexDeclaration necesita de dos parámetros; el primero es el dispositivo gráfico en 
el  que  se  asocian  los  vértices,  el  segundo  es  un  arreglo  de  elementos  de  vértices,  que  ya  contiene  la 
estructura de VertexPositionColor. 
protected override void Initialize() 
{ 
 vertexDeclaration = new VertexDeclaration(GraphicsDevice, 
 VertexPositionColor.VertexElements); 
 vertexBuffer = new VertexBuffer(GraphicsDevice, 3 * VertexPositionColor.SizeInBytes, 
 BufferUsage.WriteOnly); 
 
 effect = new BasicEffect(GraphicsDevice, null); 
 effect.VertexColorEnabled = true; 
 
 vertexBuffer.SetData<VertexPositionColor>(vertices, 0, vertices.Length); 
 
 base.Initialize(); 
} 
El  constructor  del VertexBuffer  está  sobrecargado,  el que  se  tomó  en  cuenta  es  el  que  específica  el 
tamaño y su uso. 
VertexBuffer (GraphicsDevice, Int32, BufferUsage) 
Tabla 1‐3 
Parámetros  Descripción 
graphicsDevice  Es el dispositivo gráfico asociado con el vertex buffer. 
sizeInBytes  Es el número de bytes alojados en el vertex buffer. 
16 
 
Usage  Es la opción que identifica el comportamiento del vertex buffer. 
Para inicializar el efecto básico que proporciona XNA se utiliza: 
public BasicEffect (GraphicsDevice device, EffectPool effectPool) 
Tabla 1‐4 
Parámetros  Descripción 
device  Es el dispositivo gráfico que creará el efecto. 
effectPool  Especifica un conjunto de recursos para compartir entre los efectos. 
BasicEffect.VertexColorEnabled es una propiedad que habilita el uso de vertices con colores. 
public void SetData<T> (T[] data, int startIndex, int elementCount) 
El método SetData de VertexBuffer adquiere  los datos a copiar en el búfer de vértices, donde T es un 
tipo de dato en el búfer. 
Tabla 1‐5 
Parámetros  Descripción 
data  Es un arreglo que será copiado al vertex buffer. 
starIndex  Indica el índice a partir del cual se copiarán los datos. 
elementCount  Es el número de elementos máximos a copiar. 
Siguiendo con el código generado automáticamente, por Visual Studio, tenemos los siguientes métodos: 
protected override void LoadContent() 
{ 
} 
 
protected override void UnloadContent() 
{ 
} 
 
protected override void Update(GameTime gameTime) 
{ 
base.Update(gameTime); 
} 
 LoadContent es llamado cuando los recursos gráficos necesitan ser cargados. 
 UnloadContent es llamado cuando los recursos gráficos necesitan ser liberados. 
 Update actualiza el estado de la sesión de multiplayer, como actualizar o supervisar el estado de los 
dispositivos de entrada, como el gamepad. 
Como parte final del archivo Game1.cs se tiene el método que dibujará las geometrías, y otras cosas más 
en pantalla, que por el momento será un triángulo. 
protected override void Draw(GameTime gameTime) 
{ 
 GraphicsDevice.Clear(Color.Black); 
 
 
 Sin
 eff
 eff
 
 
 eff
 
 Gra
 Gra
 Gra
 
 eff
 
 
 
 eff
 
 bas
} 
La p
matriz 
posició
y direcc
fondo e
Proj
comput
Fillm
las geom
En  e
Ilustrac
En e
véase Il
ngle apecto =
fect.World = 
fect.View = M
 Vector3.Zer
 Vector3.Up)
fect.Projecti
aphicsDevice.
aphicsDevice.
aphicsDevice.
fect.Begin();
 effect.Curr
 GraphicsDev
 effect.Curr
fect.End(); 
se.Draw(gameT
primera  línea  l
de mundo de
n del modelo. 
ción de la cám
estos términos
jection:  es  la 
tadora; hay dif
mode: es un nu
metrías, los cu
el modo  de  re
ción 1‐3. 
el modo de re
lustración 1‐4. 
= GraphicsDe
Matrix.Iden
Matrix.Creat
ro, 
); 
ion = Matrix
.RenderState
.VertexDecla
.Vertices[0]
; 
rentTechniqu
vice.DrawPri
rentTechniqu
Time); 
impia el viewp
l efecto, en es
Así también se
mara, por medio
, pues se verá 
matriz  para 
ferentes forma
umerador que 
ales pueden se
elleno  Point  s
lleno WireFram
vice.Viewpor
tity; 
eLookAt(new
.CreatePersp
.FillMode = 
ration = ver
.SetSource(v
e.Passes[0].
mitives(Prim
e.Passes[0].
port especifica
ste caso con  la
e le asigna un v
o del método 
en los siguient
cambiar  la  im
as de proyeccio
especifica cóm
er punto, malla
se  dibujan  los 
Ilustrac
me, sólo se di
rt.AspectRati
Vector3(0, 0
pectiveFieldO
FillMode.Wir
rtexDeclarati
vertexBuffer,
Begin(); 
mitiveType.Tr
End(); 
ando un color,
a matriz  ident
valor a la matr
estático Creat
tes ejemplos, p
magen  3D  a  2
ones que se ve
mo se rellena e
a o sólido. 
vértices  de  la
ión 1‐3 Fillmode
bujan  los  lado
io; 
0, 5), 
OfView(1, ape
reFrame; 
ion; 
 0, VertexPo
riangleList, 
, en este caso 
tidad, esta ma
riz de vista, que
teLookAt. Por 
por ahora sólo 
2D  que  será  d
rán posteriorm
el triángulo; ex
a  geometría  s
e.Point 
os que conecta
ecto, 1, 10);
ositionColor.
0, 1); 
 negro. Se asig
triz  sirve para
e sirve para ca
el momento n
escríbalos. 
dibujada  en  l
mente. 
xisten tres mod
sin  conectarlos
an  los vértices 
; 
.SizeInBytes)
gnan valores a
a hacer cabios 
mbiar la posic
no se explicara
a  pantalla  de
dos de relleno 
s  entre  sí,  véa
de  la geomet
17 
); 
a  la 
de 
ión 
n a 
e  la 
 de 
ase 
 
ría, 
 
En e
Ilustrac
A  G
Graphic
publi
verte
Tabl
Paráme
el modo de  re
ción 1‐5. 
GraphicsDevice
csDevice.Verti
c void Set
xStride) 
la 1‐6 
etro 
elleno  Solid,  se
e.VertexDeclar
ices[0].SetSou
tSource (V
Ilustración
e dibujan  los 
Ilustrac
ration  se  le  a
rce se le asigna
VertexBuffe
 1‐4 Fillmode.W
lados que  con
ción 1‐5 Fillmode
asigna  la  decla
a el contenido 
er vb, int 
Descripc
WireFrame 
nectan  los  vért
e.Solid 
aración  del  vé
del búfer de v
 offsetInB
ción 
tices  y  los  rell
értice  al  dispo
vértices. 
Bytes,int 
lena,  como en
ositivo  gráfico
18 
 
n  la 
 
.  A 
19 
 
vb  El verttex buffer de donde se tomaran los datos. 
offsetInBytes  Es el byte a partir del cual serán copiados los datos. 
vertexStride 
Es el tamaño en bytes de los elementos en el vertex 
buffer. 
Para dibujar la geometría se utilizan los métodos del efecto, así que se envuelve entre un Begin, método 
que comienza el efecto; y un End, método que finaliza el efecto, al método GraphicsDevice.DrawPrimitives. 
También  se debe envolver entre  las  técnicas que  contiene el efecto  y  sus pasadas, en este  caso  solo 
tienen una y también comienza con un Begin y termina con un End. 
public void DrawPrimitives(PrimitiveType primitiveType, int startVertex, 
int primitiveCount) 
DrawPrimitives dibuja una secuencia no indexada de la geometría, especificando el tipo de primitiva. En 
el siguiente capítulo se verán los distintos tipos de primitivas que ofrece XNA. 
Tabla 1‐7 
Parámetro  Descripción 
primitiveType  Describe el tipo de primitiva a dibujar. 
startVertex 
Indica el primer vértice a partir del cual comenzará a 
dibujar. 
primitiveCount  Es el número de primitivas a dibujar. 
Para  concluir este  capítulo, en el archivo Program.cs, que  crea Visual Studio,  se encuentra el método 
Main, el cual corresponde al punto de inicio del programa. 
static void Main(string[] args) 
{ 
 using (Game1 game = new Game1()) 
 { 
 game.Run(); 
 } 
} 
El método Run de la clase Game es para inicializar el juego, para mantener en un bucle el dibujo y para 
comenzarel procesamiento de eventos de la aplicación. 
Genere el proyecto en el menú Generar y corrija cualquier excepción de compilación que haya ocurrido. 
Si  todo  salió bien  corra  la aplicación  con F5 o vaya al menú Depurar para  iniciar el programa, y verá un 
triángulo como el que se muestra en la Ilustración 1‐6. 
 
En e
Códi
1. 
2. 
3. 
4. 
5. 
6. 
7. 
8. 
9. 
10. 
11. 
12. 
13. 
14. 
15. 
16. 
17. 
18. 
19. 
20. 
21. 
22. 
23. 
24. 
25. 
26. 
27. 
28. 
29. 
30. 
31. 
32. 
33. 
34. 
35. 
36. 
37. 
38. 
39. 
40. 
41. 
42. 
el Código 1‐1 se
igo 1‐1 
using Syste
using Micro
using Micro
 
namespace T
{ 
 public 
 { 
 Gra
 Ver
 Bas
 Ver
 
 pri
 { 
 
 
 
 }; 
 
 
 pub
 { 
 
 
 
 
 
 } 
 
 pro
 { 
 
 
 
 
 
 
 
 
 
 
e muestra el e
em; 
osoft.Xna.Fra
osoft.Xna.Fra
TutorialX01 
class Game1 
aphicsDeviceM
rtexDeclarati
sicEffect eff
rtexBuffer ve
ivate readonl
 new VertexP
 new VertexP
 new VertexP
blic Game1() 
 graphics = 
 this.IsMous
 this.Window
 this.Window
 Content.Roo
otected overr
 vertexDecla
 VertexP
 vertexBuffe
 VertexP
 effect = ne
 effect.Vert
 vertexBuffe
Ilustr
nlistado comp
amework; 
amework.Graph
: Microsoft.
Manager graph
ion vertexDec
fect; 
ertexBuffer;
ly VertexPosi
PositionColor
PositionColor
PositionColor
new Graphics
seVisible = t
w.Title = "xi
w.AllowUserRe
otDirectory =
ride void Ini
aration = new
PositionColor
er = new Vert
PositionColor
ew BasicEffec
texColorEnabl
er.SetData<Ve
ración 1‐6 Triáng
leto que deber
hics; 
.Xna.Framewor
hics; 
claration; 
itionColor[] 
r(new Vector3
r(new Vector3
r(new Vector3
sDeviceManage
true; 
intalalai Tut
esizing = tru
= "Content";
itialize() 
w VertexDecla
r.VertexEleme
texBuffer(Gra
r.SizeInBytes
ct(GraphicsDe
led = true; 
ertexPosition
gulo 
ría tener Game
rk.Game 
vertices = 
3(0.0F, 1.0F,
3(1.0F, -1.0F
3(-1.0F, -1.0
er(this); 
torial 00"; 
ue; 
aration(Graph
ents); 
aphicsDevice,
s, BufferUsag
evice, null);
nColor>(verti
 
e1.cs. 
, 0.0F), Colo
F, 0.0F), Col
0F, 0.0F), Co
hicsDevice, 
, 3 * 
ge.WriteOnly)
; 
ices, 0, vert
or.White), 
lor.White), 
olor.White) 
); 
tices.Length)
20 
); 
21 
 
43. base.Initialize(); 
44. } 
45. 
46. protected override void LoadContent() 
47. { 
48. } 
49. 
50. protected override void UnloadContent() 
51. { 
52. } 
53. 
54. protected override void Update(GameTime gameTime) 
55. { 
56. base.Update(gameTime); 
57. } 
58. 
59. protected override void Draw(GameTime gameTime) 
60. { 
61. GraphicsDevice.Clear(Color.Black); 
62. 
63. Single apecto = GraphicsDevice.Viewport.AspectRatio; 
64. effect.World = Matrix.Identity; 
65. effect.View = Matrix.CreateLookAt(new Vector3(0, 0, 5), 
66. Vector3.Zero, 
67. Vector3.Up); 
68. effect.Projection = Matrix.CreatePerspectiveFieldOfView(1, 
69. apecto, 1, 10); 
70. 
71. GraphicsDevice.RenderState.FillMode = FillMode.WireFrame; 
72. GraphicsDevice.VertexDeclaration = vertexDeclaration; 
73. GraphicsDevice.Vertices[0].SetSource(vertexBuffer, 0, 
74. VertexPositionColor.SizeInBytes); 
75. 
76. effect.Begin(); 
77. effect.CurrentTechnique.Passes[0].Begin(); 
78. GraphicsDevice.DrawPrimitives(PrimitiveType.TriangleList, 0, 1); 
79. effect.CurrentTechnique.Passes[0].End(); 
80. effect.End(); 
81. 
82. base.Draw(gameTime); 
83. } 
84. } 
85. } 
 
   
22 
 
1.2 DynamicVertexBuffer 
Al  igual  que  la  clase  VertexBuffer,  la  clase  DynamicVertexBuffer  sirve  para  almacenar  una  lista  de 
vértices, sin embargo, esta clase funciona para un arreglo dinámico de vértices, mientras que el otro es para 
un arreglo no dinámico. Así mismo lo recomiendan para el uso de aplicaciones sobre el Xbox360, en vez del 
VetertexBuffer; porque se puede sobre pasar el tamaño de la memoria de 10MB del EDRAM de la consola. 
VertexBuffer.SetData no será necesario para escribir los datos en el búfer de vértices. Para lo anterior se 
cuentan con otros métodos de entrada de datos, pero que por ahora sólo se mostrara el adecuado para el 
triángulo. 
public void DrawUserPrimitives<T> (PrimitiveType primitiveType, T[] 
vertexData, int vertexOffset, int primitiveCount) 
Tabla 1‐8 
Parámetro  Descripción 
primitiveType  Describe el tipo de primitiva a dibujar 
vertexData  Es el arreglo de vértices 
vertexOffset 
Es el  índice del vértice a partir del cual se copiaran 
los datos al vertex buffer. 
primitiveCount  
Es  el  número  de  primitivas  máximo  que  se 
dibujaran. 
En  la  línea 65 del Código 1‐2  se muestra el  fácil uso de DrawUserPrimitive. El  resto del  código es el 
mismo que en el ejemplo anterior. 
Código 1‐2 
1. public class Game1 : Microsoft.Xna.Framework.Game 
2. { 
3. GraphicsDeviceManager graphics; 
4. 
5. VertexDeclaration vertexDeclaration; 
6. BasicEffect effect; 
7. private readonly VertexPositionColor[] vertices = 
8. { 
9. new VertexPositionColor(new Vector3(0.0F, 1.0F, 0.0F), Color.Blue), 
10. new VertexPositionColor(new Vector3(1.0F, -1.0F, 0.0F), Color.Green), 
11. new VertexPositionColor(new Vector3(-1.0F, -1.0F, 0.0F), Color.Red) 
12. }; 
13. 
14. public Game1() 
15. { 
16. graphics = new GraphicsDeviceManager(this); 
17. Content.RootDirectory = "Content"; 
18. this.IsMouseVisible = true; 
19. this.Window.Title = "xintalalai Tutorial 01"; 
20. this.Window.AllowUserResizing = true; 
21. } 
22. 
23. protected override void Initialize() 
24. { 
25. vertexDeclaration = new VertexDeclaration(GraphicsDevice, 
26. VertexPositionColor.VertexElements); 
27. 
28. effect = new BasicEffect(GraphicsDevice, null); 
29. effect.VertexColorEnabled = true; 
30. 
23 
 
31. base.Initialize(); 
32. } 
33. 
34. protected override void LoadContent() 
35. { 
36. } 
37. 
38. protected override void UnloadContent() 
39. { 
40. } 
41. 
42. protected override void Update(GameTime gameTime) 
43. { 
44. base.Update(gameTime); 
45. } 
46. 
47. protected override void Draw(GameTime gameTime) 
48. { 
49. GraphicsDevice.Clear(Color.Black); 
50. 
51. Single apecto = GraphicsDevice.Viewport.AspectRatio; 
52. effect.World = Matrix.Identity; 
53. effect.View = Matrix.CreateLookAt(new Vector3(0, 0, 5), 
54. Vector3.Zero, 
55. Vector3.Up); 
56. effect.Projection = Matrix.CreatePerspectiveFieldOfView(1, apecto, 1, 10); 
57. 
58. GraphicsDevice.RenderState.FillMode = FillMode.WireFrame; 
59. 
60. GraphicsDevice.VertexDeclaration = vertexDeclaration; 
61. 
62. effect.Begin(); 
63. effect.CurrentTechnique.Passes[0].Begin(); 
64. GraphicsDevice.DrawUserPrimitives<VertexPositionColor>( 
65. PrimitiveType.TriangleList, vertices, 0, 1); 
66. effect.CurrentTechnique.Passes[0].End(); 
67. effect.End(); 
68. 
69. base.Draw(gameTime); 
70. } 
71. } 
   
24 
 
2 Primitivas 
Las primitivas son elementos básicos para dibujar cualquier geometría en el espacio tridimensional. XNA 
ofrece un conjunto de éstas, y cada una se explicará a continuación. 
Así  como  en  el  capítulo  anterior,  se  seguirá  usando  el  VertexBuffer  y  el  DynamicBuffer  para  los 
ejemplos.  
Abra  Visual  Studio  y  cree  un  nuevo  proyecto  de  XNA  Game  Studio  3.1,  seleccionandola  plantilla 
Windows Game (3.1). Escriba la declaración del búfer de vértices y las variables de instancia de los vértices, 
en el archivo que Game1.cs; recuerde que se está trabajando en los archivos que se crean por default. 
VertexDeclaration vertexDeclaration; 
BasicEffect effect; 
VertexBuffer vertexBuffer; 
 
VertexPositionColor[] vertices ={ 
 new VertexPositionColor(new Vector3(-2.0F, 0.0F, 2.0F), Color.White), 
 new VertexPositionColor(new Vector3(-1.0F, 2.0F, 2.0F), Color.White), 
 new VertexPositionColor(new Vector3(0.0F, 0.0F, 2.0F), Color.White), 
 new VertexPositionColor(new Vector3(1.0F, 1.5F, 2.0F), Color.White), 
 new VertexPositionColor(new Vector3(1.5F, 0.0F, 2.0F), Color.White), 
 new VertexPositionColor(new Vector3(2.2F, 1.0F, 2.0F), Color.White), 
 new VertexPositionColor(new Vector3(2.5F, 0.0F, 2.0F), Color.White)}; 
VertexPositionColor[] abanico = { 
 new VertexPositionColor(new Vector3(0.0F, 1.0F, 2.0F), Color.White), 
 new VertexPositionColor(new Vector3(1.0F, 1.0F, 2.0F), Color.White), 
 new VertexPositionColor(new Vector3(1.0F, 0.0F, 2.0F), Color.White), 
 new VertexPositionColor(new Vector3(0.5F, -0.5F, 2.0F), Color.White), 
 new VertexPositionColor(new Vector3(-0.5F, -1.0F, 2.0F), Color.White)}; 
En este caso se declararon dos arreglos de vértices, el arreglo vertice es para mostrar cinco de  las seis 
primitivas de XNA, y el arreglo abanico es para mostrar la primitiva de abanico. 
Dentro del constructor escriba las siguientes líneas para modificar algunas propiedades de la ventana en 
que se mostraran las geometrías, son las mismas propiedades que se explicaron en el capítulo anterior. 
this.IsMouseVisible = true; 
this.Window.AllowUserResizing = true; 
this.Window.Title = "xintalalai Tutorial 02a"; 
En el método Initialize se crean las nuevas instancias del búfer de vértices y el efecto. 
vertexDeclaration = new VertexDeclaration(GraphicsDevice, 
VertexPositionColor.VertexElements); 
vertexBuffer = new VertexBuffer(GraphicsDevice, 7 * VertexPositionColor.SizeInBytes, 
BufferUsage.WriteOnly); 
vertexBuffer.SetData<VertexPositionColor>(vertices, 0, vertices.Length); 
effect = new BasicEffect(GraphicsDevice, null); 
effect.VertexColorEnabled = true; 
Lo único que cambia en esta declaración es el número de elementos que contendrá el búfer de vértices, 
así  que  se  multiplica  el  número  de  elementos  del  arreglo  por  el  tamaño  en  bytes  de  la  estructura 
VertexPositionColor, es decir: 
vertexBuffer = new VertexBuffer(GraphicsDevice, vertices.Length * 
 VertexPositionColor.SizeInBytes, BufferUsage.WriteOnly); 
En el llenado del búfer de vértices se utiliza el primer arreglo para mostrar las siguientes primitivas: 
 
 
 
 
 
 
2.1 
La p
que se 
Códi
1. 
2. 
3. 
4. 
5. 
6. 
7. 
8. 
9. 
10. 
11. 
12. 
13. 
14. 
15. 
16. 
17. 
18. 
El C
que en
máximo
arreglo 
Inic
 
PointList 
LineList 
LineStrip 
TriangleList 
TriangleStrip 
PointList 
primitiva PoinL
encuentran en
igo 2‐1 
GraphicsDev
Single aspe
effect.Worl
effect.View
 Vector3
 Vector3
effect.Proj
 aspecto
GraphicsDev
GraphicsDev
GraphicsDev
 VertexP
 
effect.Begi
effect.Curr
GraphicsDev
effect.Curr
effect.End(
Código 2‐1 se d
 el  capítulo an
o de elemento
vertices. 
ie la aplicación
List toma una l
n el búfer de vé
vice.Clear(Co
ecto = Graphi
ld = Matrix.I
w = Matrix.Cr
3.Zero, 
3.Up); 
jection = Mat
o, 1.0F, 10.0
vice.RenderSt
vice.VertexDe
vice.Vertices
PositionColor
in(); 
rentTechnique
vice.DrawPrim
rentTechnique
(); 
deberá escribir
nterior, except
os que se dibu
n y verá siete p
ista de vértice
értices. 
olor.Black);
icsDevice.Vie
Identity; 
reateLookAt(n
trix.CreatePe
0F); 
tate.FillMode
eclaration = 
s[0].SetSourc
r.SizeInBytes
e.Passes[0].B
mitives(Primi
e.Passes[0].E
r dentro del m
to  la  línea 16 
ujarán serán 7;
untos como en
Ilustr
 
es y los muestr
ewport.Aspect
new Vector3(0
erspectiveFie
e = FillMode.
vertexDeclar
ce(vertexBuff
s); 
Begin(); 
itiveType.Poi
End(); 
método Draw, 
en donde el  t
; por  lo que p
n la Ilustración
ración 2‐1 Point
ra como punto
tRatio; 
0.0F, 0.0F, 
eldOfView(1.
.WireFrame;
ration; 
fer, 0, 
intList, 0, 
note que  la m
tipo de primit
podrá cambiarl
n 2‐1. 
tList 
os en el espacio
6.0F), 
0F, 
7); 
mayoría del cód
iva  será Point
lo por  la prop
 
o, en el orden 
digo es el mis
tList y el núme
iedad Lenght
25 
en 
mo 
ero 
del 
 
2.2 
Line
ejemplo
Mod
Primitiv
Graphic
Opr
2 al 3 y 
2.3 
LinS
segund
El n
Mod
elemen
Graphic
Opr
LineList 
eList es una pri
o se tienen siet
difique  el  m
veType.PointL
csDevice.Draw
rima F5 y verá 
del 4 al 5. 
LineStrip 
Strip es la prim
o punto de la l
úmero de rect
difique  el  tipo
ntos a dibujar p
csDevice.Draw
rima F5 y vera u
imitiva que dib
te vértices con
método  Draw
ist por Primitiv
wPrimitives(
algo similar a l
 
mitiva que une 
línea anterior, 
as que se pued
ú
o  de  primitiva 
por seis, o por 
wPrimitives(
una imagen sim
buja líneas rect
n lo que se dibu
wPimitives  de
veType.LineLis
PrimitiveTyp
la Ilustración 2
Ilust
dos puntos pa
excepto la prim
den dibujar da
	 	
ú
del  Código  2
el número de e
PrimitiveTyp
milar a la Ilustr
tas a partir de 
ujarán tres líne
el  Código  2‐
st y el número 
pe.LineList, 
2‐2. Como se p
tración 2‐2 LineL
ara crear una l
mera línea que
do un número
ú
	 	 é
‐1,  línea  16,  p
elementos del 
pe.LineStrip,
ración 2‐3. 
un par de vért
eas, el último n
‐1,  línea  16
de elementos
0, 3); 
puede ver, las l
List 
línea recta, tom
e no le anteced
o de vértices se
	 	 é
2 
por  PrimitiveT
arreglo vértice
 0, 6); 
tices del búfer 
no se ocupa. 
6,  cambiando
s a tres. 
íneas van del v
 
mando como p
de otra. 
erá igual a: 
1 
Type.LineStrip 
e menos uno. 
de vértices. En
o  el  paráme
vertice 0 al 1, 
punto de inicio
y  el  número 
26 
n el 
etro 
del 
o el 
de 
 
2.4 M
El  c
geomet
manera
perpen
Por 
por ord
verá un
orden s
para dib
Escr
Graphic
Una
para el 
2.5 T
Tria
qué núm
El n
mayor a
Mod
Primitiv
Modos de 
culling  es  un  a
tría que se alca
a  de  conocer 
dicular al plan
default XNA  t
den en el búfer
n ejemplo. El m
semejante al s
bujar todas las
riba dentro del
csDevice.Rend
a manera senci
caso de CullCo
TriangleLi
angleList es  la 
mero de eleme
úmero de elem
a cero. 
difique  el  m
ve.TriangleList
 Culling 
algoritmo  que
anza a ver, por
qué  caras  se 
o y la dirección
tiene el modo 
r de vértices se
modo CullCloc
entido de las m
s caras. 
l método Draw
derState.Cul
illa de conocer
ounterClockwi
ist 
primitiva que 
entos se puede
ú
mentos será ig
étodo  Draw 
t y el tercer pa
Ilust
e  determina  la
r ejemplo, en u
dibujarán  es  p
n de éste depe
CullCounterC
e asemejan al s
ckwiseFace, oc
manecillas del 
w en el Código 
lMode = Cull
r qué caras no 
seFace y la reg
toma triadas 
en dibujar dad
	 	
ú 	
ú 	
ual a la parte e
en  el  Códig
rámetro por 2
ración 2‐3LineSt
a  visibildad  de
un cubo a lo m
por medio  de 
enderá del sent
lockwiseFace 
sentido contra
culta aquellas 
reloj. El modo
2‐1, línea 13, e
Mode.None; 
son dibujadas,
gla de la mano 
de vértices pa
o un número d
	
ú
	
	
entera del resu
go  2‐1,  línea 
. 
trip 
e  las  caras,  s
más que podem
la  normal  de
tido en que se 
activado, es d
rio a las mane
caras que en 
o None hace ca
el modo de cul
, es por medio 
 izquierda para
ara dibujar un 
de vértices es l
	 	 é
3
	 1 
∈  
ultado de la div
16;  el  prim
 
irve  para  dibu
mos ver son tre
e  ésta.  La  norm
vayan dibujan
decir, oculta aq
cillas del reloj,
el búfer de v
aso omiso del 
ling None. 
de la regla de 
a el caso CullC
triángulo. La 
a siguiente: 
 
visión, además
mer  parámetro
ujar  sólo  aque
s de sus caras.
mal  es  un  vec
ndo las primitiv
quellas caras q
, más adelante
értices  tengan
modo de culli
la mano derec
lockwiseFace.
manera de sab
s de que debeo  cámbielo  p
27 
ella 
. La 
ctor 
vas. 
que 
e se 
n el 
ng, 
cha 
ber 
ser 
por 
 
Graphic
Opr
Com
posterio
toma e
Aho
primitiv
Graphic
Des
se dibuj
csDevice.Draw
rima F5 para in
mo  puede  ver,
ormente toma
l último vértice
ora modifique 
va se dibuje en
csDevice.Rend
pués cambie e
je en el sentido
wPrimitives(
iciar la aplicac
,  la  primitiva  t
a  los siguientes
e. 
la  línea  13  de
n el sentido de 
derState.Cul
el modo del cu
o contrario a la
PrimitiveTyp
ión y verá una 
Ilustraci
toma  los  tres 
s tres vértices 
el Código  2‐1
la manecillas d
lMode = Cull
Ilustración 2‐5
lling a CullCou
as manecillas d
pe.TriangleLi
imagen simila
ón 2‐4 CullMod
primeros  vért
para dibujar e
por CullClockw
del reloj. 
Mode.CullClo
CullMode.CullC
unterClockwise
del reloj. 
ist, 0, 2); 
ar a la Ilustració
e.None 
rtices  para  cre
el triángulo de
wiseFace, para
ockwiseFace;
ClockwiseFace 
eFace para ocu
ón 2‐4. 
 
ear  el  triángulo
e  la  izquierda, 
a  que oculte 
 
ultar el triángu
o  de  la  derec
por  lo que no
el  triángulo  cu
ulo cuya primit
28 
ha, 
o se 
uya 
tiva 
 
2.6 T
Tria
vértices
búfer d
4; el ter
Cam
Graphic
Inic
Para
vértices
TriangleSt
angleStrip es la
s del triángulo
e vértices. Es 
rcer triángulo t
mbie el método
csDevice.Draw
ie la aplicación
a conocer la ca
s se resta el nú
Ilus
trip 
a primitiva que
 anterior más 
decir, el prime
toma los vértic
o DrawPrimitiv
wPrimitives(
n con la tecla F5
antidad máxim
úmero de vértic
ú 	
stración 2‐6 Cull
e permite dibu
un nuevo vért
er triángulo tom
ces 3, 4 y 5.has
ves en el Códig
PrimitiveTyp
5, y verá algo s
Ilustrac
ma de TriangleS
ces menos dos
	
Mode.CullCoun
ujar con eficien
tice para crear
ma los vértices
sta concluir con
go 2‐1, línea 16
pe.TriangleSt
similar a la Ilus
ción 2‐7 Triangle
Strip que se pu
s. 
ú
nterClockwiseFa
ncia triángulos
rlo, excepto  la
s 1, 2 y 3; el se
n la lista conte
6, en el primer 
trip, 0, 5);
stración 2‐7. 
eStrip 
ueden dibujar 
	 	 é
 
ace 
s, pues toma d
a primera triad
egundo toma l
enida en el búfe
y último parám
 
a partir de un 
2 
os de los últim
da de vertices
los vértices 2,
er de vértices.
metro. 
número dado 
29 
mos 
del 
3 y 
 de 
 
2.7 T
Esta
y el vér
por los 
De n
Graphic
El n
dos, al 
 
TriangleF
a última primit
rtice siguiente. 
vértices 1, 3 y 
nueva cuenta, 
csDevice.Draw
úmero de Tria
número de vér
an 
iva utiliza el pr
Es decir, el pri
4; el tercer tri
cambie los par
wPrimitives(
angleFan máxi
rtices del búfer
ú 	
rimer vértice d
imer triángulo 
ángulo está co
rámetros uno y
PrimitiveTyp
Ilustra
mos que se p
r, con lo cual s
	
 
del búfer de vé
está formado 
onstituido por l
y tres del méto
pe.TriangleFa
ación 2‐8 Triangl
ueden extraer
e obtiene la sig
ú
értices, el últim
por los vértice
los vértices 1, 4
odo DrawPimit
an, 0, 3); 
leFan 
r de una  lista d
guiente fórmu
	 	 é
mo vértice del t
es 1, 2 y 3; el s
4 y 5. 
tives, del Códi
 
de vértices, se
la: 
2 
triángulo anter
egundo triáng
go 2‐1, línea 1
e calcula al res
30 
rior 
ulo 
6. 
star 
31 
 
3 Creando objeto 3D 
En este capítulo se dibujará un cubo a partir de un arreglo de vértices y un índice que indica que número 
de vértice debe conformar el triángulo. 
Un cubo se conforma de seis caras, ocho vértices y doce triángulos, sin embargo, no se declararan treinta 
y seis vértices, pues habría redundancia en los datos haciéndolo ineficaz para este ejemplo. Así que el índice 
llevará el orden en que se deben dibujar los triángulos. 
Comience por abrir Visual Studio y cree una nueva solución para XNA. Declare en el archivo Game1.cs 
como variables de instancia los vértices, el efecto, el vertexbuffer, el indexbuffer y un arreglo de enteros que 
servirá como índice. 
Código 3‐1 
1. VertexDeclaration vertexDeclaration; 
2. BasicEffect effect; 
3. VertexBuffer vertexBuffer; 
4. IndexBuffer indexBuffer; 
5. Color color = new Color(new Vector3(0.05859375F, 0.12890625F, 0.1484375F)); 
6. 
7. VertexPositionColor[] vertices ={ 
8. new VertexPositionColor(new Vector3(-1.0F, -1.0F, 1.0F), Color.White), 
9. new VertexPositionColor(new Vector3(-1.0F, 1.0F, 1.0F), Color.White), 
10. new VertexPositionColor(new Vector3(1.0F, 1.0F, 1.0F), Color.White), 
11. new VertexPositionColor(new Vector3(1.0F, -1.0F, 1.0F), Color.White), 
12. new VertexPositionColor(new Vector3(-1.0F, -1.0F, -1.0F), Color.White), 
13. new VertexPositionColor(new Vector3(-1.0F, 1.0F, -1.0F), Color.White), 
14. new VertexPositionColor(new Vector3(1.0F, 1.0F, -1.0F), Color.White), 
15. new VertexPositionColor(new Vector3(1.0F, -1.0F, -1.0F), Color.White) 
16. }; 
17. 
18. Int32[] indices ={0, 1, 2, // Frente 
19. 0, 2, 3, 
20. 4, 6, 5, // Posterior 
21. 4, 7, 6, 
22. 4, 5, 1, // Izquierda 
23. 4, 1, 0, 
24. 3, 2, 6, // Derecha 
25. 3, 6, 7, 
26. 1, 5, 6, // Tapa 
27. 1, 6, 2, 
28. 4, 0, 3, // Base 
29. 4, 3, 7}; 
Las línea 4 del Código 3‐1 representa: el búfer de índices, que describe el orden de dibujo de los vértices 
en el búfer de vértices.  
Se pueden generar nuevos colores con el constructor Color que tiene ocho sobrecargas, línea 5, en este 
caso se utilizó la sobrecarga que recibe como parámetro una estructura Vector3, cuyas coordenadas (x, y, z) 
representan el rojo, el verde y el azul respectivamente. El rango que puede contener cada coordenada (x, y, 
z) es de 0.0F a 1.0F. 
En el método Initialize de la clase Game1, inicialice el búfer de vértices, el búfer de índices y el efecto. 
Código 3‐2 
1. protected override void Initialize() 
2. { 
3. vertexDeclaration = new VertexDeclaration(GraphicsDevice, 
4. VertexPositionColor.VertexElements); 
5. vertexBuffer = new VertexBuffer(GraphicsDevice, vertices.Length * 
6. VertexPositionColor.SizeInBytes, BufferUsage.WriteOnly); 
7. // inicialización del index buffer 
8. indexBuffer = new IndexBuffer(GraphicsDevice, typeof(Int32), indices.Length, 
9. BufferUsage.WriteOnly); 
10. 
32 
 
11. effect = new BasicEffect(GraphicsDevice, null); 
12. effect.VertexColorEnabled = true; 
13. vertexBuffer.SetData<VertexPositionColor>(vertices, 0, vertices.Length); 
14. indexBuffer.SetData<Int32>(indices, 0, indices.Length); 
15. 
16. base.Initialize(); 
17. } 
El constructor de IndexBuffer que se ocupó tiene la siguiente forma: 
public IndexBuffer(GraphicsDevice graphicsDevice, Type indexType, int 
elementCount, BufferUsage usage) 
En la Tabla 3‐1 se muestra el significado de cada parámetro que toma el constructor. 
Tabla 3‐1 
Parámetro  Descripción 
graphicsDevice 
Es  el  dispositivo  gráfico  asociado  con  el  búfer  de 
índice.  
indexType  Es el tipo usado por los valores del índice. 
elementCount  Es el número de valores en el búfer. 
Usage 
Es  un  conjunto  de  opciones  que  identifican  el 
comportamiento de los recursos del búfer de índice. 
En  la  línea 14 del Código 3‐2,  la asignación de  los datos de un arreglo al búfer de  índice  se utilizó el 
siguiente método. 
public void SetData<T>(T[] data, int startIndex, int elementCount) 
Donde T es el tipo de dato de los elementos del arreglo a copiar en el búfer. 
Tabla 3‐2 
Parámetro  Descripción 
data  Es el arreglo de datos a copiar. 
startIndex  Es el índice a partir del cual comenzará a copiar. 
elementCount  Es el número de elementos a copiar. 
Ya  sólo  falta mandar  a dibujar el  cubo, así que en el método Draw escriba  las  siguientes  líneas para 
poder ver el cubo en modo WireFrame. 
Código 3‐3 
1. protected override void Draw(GameTime gameTime) 
2. { 
3. GraphicsDevice.Clear(color); 
4. 
5. Single aspecto = GraphicsDevice.Viewport.AspectRatio; 
6. effect.World = Matrix.Identity; 
7. effect.View = Matrix.CreateLookAt(new Vector3(0.0F, 0.0F, -4.0F), 
8. Vector3.Zero, 
9. Vector3.Up);33 
 
10. effect.Projection = Matrix.CreatePerspectiveFieldOfView(1, aspecto, 1, 1000); 
11. 
12. GraphicsDevice.RenderState.FillMode = FillMode.WireFrame; 
13. GraphicsDevice.VertexDeclaration = vertexDeclaration; 
14. GraphicsDevice.Vertices[0].SetSource(vertexBuffer, 0, 
15. VertexPositionColor.SizeInBytes); 
16. GraphicsDevice.Indices = indexBuffer; 
17. 
18. effect.Begin(); 
19. effect.CurrentTechnique.Passes[0].Begin(); 
20. GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 
21. 0, indices.Length, 0, 12); 
22. effect.CurrentTechnique.Passes[0].End(); 
23. effect.End(); 
24. base.Draw(gameTime); 
25. } 
GraphicsDevice.Indices es una propiedad del dispositivo gráfico para establecer el búfer de  índices al 
dispositivo gráfico. 
El método de dibujo, ahora toma un arreglo de enteros que  indica el orden en que serán dibujados los 
triángulos. 
public void DrawIndexedPrimitives(PrimitiveType primitiveType, int 
baseVertex, int minVertexIndex, int numVertices, int startIndex, int 
primitiveCount) 
En la Tabla 3‐3 se muestra el significado de cada uno de los parámetros. 
Tabla 3‐3 
Parámetro  Descripción 
primitiveType  Es el tipo de primitiva a dibujar. 
baseVertex  Es el índice a partir del cual se tomará en cuenta. 
minVertexIndex  Es el índice del vértice usado durante la llamada. 
numVertices  Es el número de vértices usados durante la llamada.  
startIndex  Índice a partir del cual se dibujará. 
primitiveCount  Es el número de primitivas a dibujar. 
Inicie el programa con F5 y podrá ver algo parecido a la Ilustración 3‐1; si tuvo problemas de compilación 
resuélvalas y vuelva a intentarlo. 
 
Aun
la posic
de la cá
3.1 
Para
paráme
dónde e
En e
comien
Vector3
Vector3
Vector3
nque a primera
ción de la cáma
ámara, sólo pa
Posiciona
a  posicionar  l
etros que  indic
es hacia arriba
este ejemplo s
nce por declara
3 posicion = 
3 vista = Vec
3 arriba = Ve
a vista lo que a
ara que se enc
ra darnos una 
ndo cáma
la  cámara  ha
can:  la posición
, véase Ilustrac
Ilust
sólo se cambia
ar los vectores 
new Vector3
ctor3.Zero; 
ector3.Up; 
Ilus
aparece en el v
centra frente a
idea de que en
ra 
remos  uso  de
n de  la cámara
ción 3‐2. 
tración 3‐2 Pará
ará  la posición
de la cámara c
(0.0F, 0.0F,
stración 3‐1 Cub
viewport no se
 un lado del cu
n realidad se h
el  método  Cr
a, el punto de
ámetros del mét
n de  la cámara
como variables
 -4.0F); 
bo 
e parezca a un 
ubo. Así que ah
a dibujado una
eateLookAt  q
e observación y
todo CreateLook
a sin cambiar  l
s de instancia d
 
cubo, no es as
hora modificar
a figura tridime
que  tiene  tres
y un vector un
kAt 
los otros dos v
de la clase Gam
sí, esto se deb
remos la posic
ensional. 
s  vectores  có
nitario que  ind
 
vectores. Así q
me1. 
34 
e a 
ión 
mo 
dica 
que 
35 
 
Ahora asígnelas en los parámetros de CreateLookAt, líneas 7 – 9, Código 3‐3. 
effect.View = Matrix.CreateLookAt(posicion, vista, arriba); 
Para cambiar  la posición de  la cámara se utilizará el  teclado, y sabiendo que XNA se creó para que  la 
creación de videojuegos fuera sencilla, pues sí, también se utilizará el control 360 para cambiar la cámara. 
3.2 Teclado 
Comencemos  con  el  teclado  pues  es  el  dispositivo  de  entrada  de  datos más  antiguo.  Pero  primero 
definamos con qué teclas se harán los cambios. 
Tecla  Movimiento 
Flecha Izquierda  Disminuye la coordenada X 
Flecha Derecha  Incrementa la coordenada X 
Flecha Arriba  Incrementa la coordenada Y 
Flecha Abajo  Disminuye coordenada Y 
Avanza página  Incrementa coordenada Z 
Retrocede página  Disminuye coordenada Z 
Ahora hay que escribir las siguientes líneas de código dentro del método Update de la clase Game1. 
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Left)) 
 posicion.X -= 0.1F; 
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Right)) 
 posicion.X += 0.1F; 
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Up)) 
 posicion.Y += 0.1F; 
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Down)) 
 posicion.Y -= 0.1F; 
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.PageUp)) 
 posicion.Z += 0.1F; 
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.PageDown)) 
 posicion.Z -= 0.1F; 
La  clase  Keyboard  del  namespace Microsoft.Xna.Framework.Input,  es  la  encargada  de  verificar  qué 
tecla se oprimió o dejó de oprimirse. El método static GetState tiene dos sobrecargas, la primera no obtiene 
ningún parámetro, y la segunda toma el jugador asociado al control. 
IsKeyDown  regresa  un  valor  booleano  si  se  ha  presionado  la  tecla  que  se  pasó  como  parámetro;  el 
parámetro debe ser un elemento de la numeración Keys. 
3.3 Control 360 
Antes de continuar con el manejo del control 360, es importante que se verifique que este dispositivo se 
encuentre  funcionando  correctamente;  por  default  Windows  Vista  y  Windows  7  tiene  el  controlador 
instalado,  sin  embargo,  en  versiones  anteriores  se  tiene  que  descargar  el  controlador  del  control,  en  la 
siguiente liga pueden descargarlo. 
http://www.microsoft.com/hardware/download/download.aspx?category=Gaming 
 
En l
GameP
Aho
debajo 
if (Gam
 pos
if (Gam
 pos
if (Gam
 pos
if (Gam
 pos
if (Gam
 pos
if (Gam
 pos
Al  ig
uno de 
Get
segund
uso de 
Los 
Circular
una me
muerta
None re
propia z
Los 
valor de
cámara
Ya p
teclado
a Ilustración 3
Pad. 
ora sí, coloque
de las líneas q
mePad.GetStat
sicion.X += 0
mePad.GetStat
sicion.X -= 0
mePad.GetStat
sicion.Y += 0
mePad.GetStat
sicion.Y -= 0
mePad.GetStat
sicion.Z += 0
mePad.GetStat
sicion.Z -= 0
gual que con e
los componen
State  tiene do
a sobrecarga r
la zona muerta
valores  que  p
r combina los 
ejor práctica, q
 independient
egresa los valo
zona muerta. 
sticks regresan
e punto flotant
a. 
puede oprimir 
o y el control de
‐3 se muestra 
  las siguientes
ue manejan el
te(PlayerInd
0.1F * GameP
te(PlayerInd
0.1F * -Game
te(PlayerInd
0.1F * GameP
te(PlayerInd
0.1F * -Game
te(PlayerInd
0.1F * GameP
te(PlayerInd
0.1F * GameP
el teclado, la c
ntes del contro
os sobrecargas
recibe el núme
a (GamePadDe
puede  tomar G
posiciones x y
que utilizar  los
temente, y es e
ores sin proces
n un Vector2 c
te entre 0.0F y
F5 para ejecut
el Xbox 360; en
el control del 
Ilustra
s  líneas de cód
 teclado. 
dex.One).Thum
ad.GetState(
dex.One).Thum
Pad.GetState
dex.One).Thum
ad.GetState(
dex.One).Thum
Pad.GetState
dex.One).Trig
ad.GetState(
dex.One).Trig
ad.GetState(
clase GamePad
l 360.  
s, en  la primer
ero del jugador
eadZone). 
GamePadDead
y y de cada uno
 ejes  independ
el valor que se
sar de cada stic
con valores de
y 1.0F. Éstos últ
tar la aplicació
n caso de tene
Xbox 360 con 
ación 3‐3 Contro
digo dentro de
mbSticks.Righ
PlayerIndex.
mbSticks.Righ
(PlayerIndex
mbSticks.Righ
PlayerIndex.
mbSticks.Righ
(PlayerIndex
ggers.Right >
PlayerIndex.
ggers.Left > 
PlayerIndex.
d tiene método
ra  recibe el nú
r (PlayerIndex)
dZone  es:  Circ
o de los sticks 
dientes. Indep
e da por defau
ck como un arr
 punto flotant
timos se utiliza
n y verificar qu
r un error de c
 los nombres d
ol 360 
el método Upd
ht.X > 0) 
One).ThumbSt
ht.X < 0) 
x.One).ThumbS
ht.Y > 0) 
One).ThumbSt
ht.Y < 0) 
x.One).ThumbS
> 0) 
One).Trigger
0) 
One).Trigger
os estáticos qu
úmero del  juga
) y el valor de l
cular,  Indepen
y es compara
pendentAxes c
ult en el métod
reglo; esto es c
te entre ‐1.0F y
aran para camb
ue puede mov
compilación co
de los compon
date de  la cla
ticks.Right.X
Sticks.Right.
ticks.Right.Y
Sticks.Right.
rs.Right; 
rs.Left; 
ue muestran e
ador asociado
la numeración 
ndentAxes  y N
do con la zona
ompara a cad
do GetState co
cuando intenta
y 1.0F. Los trig
biar el valor de
ver la cámara d
orríjalo y vuélva
nentes de la cla
 
se Game1, y p
X; 
.X; 
Y; 
.Y; 
el estado de ca
 al control; en
 que especifica
None.El  valor 
a muerta; esto
a eje con  la zo
on un parámet
a implementar
ggers regresan 
e la posición de
de posición con
alo a intentar.
36 
ase 
por 
ada 
n  la 
a el 
de 
o es 
ona 
tro. 
r su 
un 
e la 
n el 
 
3.4 T
Para
siguient
Vector3
Single 
Single 
Single 
Single 
La t
de la sig
effect.
Rec
asignac
El m
todas  c
Vector3
vector t
menos 
Al ig
para tra
Tabl
Traslación
a comenzar co
tes variables d
3 traslacion 
escala = 1.0
rotacionX = 
rotacionY = 
rotacionZ = 
raslación cons
guiente declar
.World = Matr
uerde  que  la 
ción se le hace 
método static C
comparten  la 
3D. Sus coorde
tiene como coo
dos unidades s
gual que para m
asladar el mod
la 3‐4 
n 
on los tipos de 
e instancia a la
= Vector3.Z
0F; 
0.0F; 
0.0F; 
0.0F; 
siste en mover
ación: 
rix.CreateTr
matriz World 
a la propiedad
CreateTranslat
idea  de  acept
enadas se tom
ordenadas (1.0
sobre el eje y, 
mover la posic
elo 3D. 
Tecla 
D 
A 
Ilustración
transformacio
a clase Game1
ero; 
r los vértices d
anslation(tr
sirve  para  rea
d del efecto, en
ion crea una m
tar  coordenad
maran como  la 
0, ‐2.0, 0.0) los
y cero unidade
ión de la cáma
n 3‐4 Cambio de
ones que pued
. 
el modelo a u
raslacion); 
alizar  las  trans
n el método Dr
matriz de trans
as  x,  y  y  z,  d
translación re
s vértices tendr
es sobre el eje 
ara, la siguiente
Movimi
Disminu
Increme
e posición 
de realizarle a 
una nueva posi
sformaciones 
raw de la clase
slación, la cual 
de  una manera
especto al eje q
rán que traslad
z. 
e tabla muestr
ento 
uye la coordena
enta la coorden
 
un modelo grá
ición y esto se
sobre  la  geom
e Game1. 
tiene cuatro s
a  u  otra,  en  e
que represent
darse una unid
ra qué teclas d
ada X 
nada X 
áfico, agregue 
e logra por me
metría,  así que
sobrecargas, pe
este  caso  fue 
an. Es decir, s
dad sobre el eje
eberán oprimi
37 
las 
dio 
e  la 
ero 
un 
i el 
e x, 
rse 
 
Agre
método
if (Key
 tra
if (Key
 tra
if (Key
 tra
if (Key
 tra
if (Key
 tra
if (Key
 tra
Inic
3.5 
Para
aceptar
CreateS
Matri
Matri
Matri
egue las siguie
o Update de la
yboard.GetSta
aslacion.X -=
yboard.GetSta
aslacion.X +=
yboard.GetSta
aslacion.Y +=
yboard.GetSta
aslacion.Y -=
yboard.GetSta
aslacion.Z +=
yboard.GetSta
aslacion.Z -=
ie la solución o
Escala 
a cambiar el ta
r valores de tip
Scale, se usará
x.CreateSc
x.CreateSc
x.CreateSc
W 
S 
Z 
X 
entes líneas de
 clase Game1. 
ate(PlayerIn
= 0.1F; 
ate(PlayerIn
= 0.1F; 
ate(PlayerIn
= 0.1F; 
ate(PlayerIn
= 0.1F; 
ate(PlayerIn
= 0.1F; 
ate(PlayerIn
= 0.1F; 
oprimiendo F5,
amaño de los m
po flotante o e
 para cambiar 
cale (Sing
cale (Sing
cale (Vect
e código para t
dex.One).IsK
dex.One).IsK
dex.One).IsK
dex.One).IsK
dex.One).IsK
dex.One).IsK
, si hay algún e
Ilustr
modelos se cre
estructuras de
el tamaño del 
le) 
le, Single
or3) 
Increme
Disminu
Increme
Disminu
rasladar el cub
KeyDown(Keys.
KeyDown(Keys.
KeyDown(Keys.
KeyDown(Keys.
KeyDown(Keys.
KeyDown(Keys.
error que comp
ación 3‐5 Trasla
ea una matriz 
 tipo Vector3.
modelo. Algun
e, Single)
enta la coorden
uye la coordena
enta la coorden
uye la coordena
bo, recuerde q
D)) 
A)) 
W)) 
S)) 
Z)) 
X)) 
pilación resuélv
ación 
de escala, la c
 El valor que s
nas de las sobr
 
nada Y 
ada Y 
nada Z 
ada Z 
que deben escr
valo y vuelva a
 
cual tiene seis 
se  le asigne al 
recargas son: 
ribirse dentro 
a intentar. 
sobrecargas p
método estát
38 
del 
ara 
tico 
39 
 
La primera sobrecarga escala  las coordenadas de  los vértices por el valor del parámetro. En  la segunda 
sobrecarga  cada  parámetro  representa  la  escala  sobre  el  eje  x,  y  y  z,  respectivamente.  Y  por  último,  el 
parámetro que toma un Vector3 toma los valores de sus coordenadas para cambiar el tamaño del modelo, 
muy parecido a la sobrecarga anterior. 
En este caso se usó un solo valor para cambiar en x, y y z el tamaño del cubo. Las siguientes teclas son 
para cambiar el tamaño de la geometría. 
Tecla  Acción 
E  Incrementa el tamaño. 
R  Disminuye el tamaño 
Escriba  el  código  siguiente  en  el  método  Update  de  la  clase  Game1,  después  del  que  traslada  la 
geometría. 
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.E)) 
 escala += 0.1F; 
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.R)) 
{ 
 escala -= 0.1F; 
 if (escala < 0.1F) 
 escala = 0.1F; 
} 
Se  coloca  un  condicional  if  en  la  disminución  de  la  escala,  pues  si  llega  a  ser  cero  el  modelo 
desaparecería, y si llegará a ser menor que cero se llegaría a cambiar el culling del modelo, lo que haría sería 
mostrarnos las paredes internas del cubo. 
Ahora hay que generar la matriz y multiplicarla por los valores anteriores, en el método Draw de la clase 
Game1. 
effect.World = Matrix.Identity * Matrix.CreateTranslation(traslacion) * 
Matrix.CreateScale(escala); 
Oprima F5 y pruebe  los cambios que puede hacer  con el  teclado;  si hay un problema de compilación 
resuélvalo y trate de nuevo. 
 
3.6 
Com
traslada
otra co
el que 
tambié
La  r
Matrix.
un pará
eje coo
En l
Tabl
Escr
cubo. 
if (Key
Rotación 
mo en cualquie
a sobre un mu
sa que les pida
se ha estado 
n puede aplica
rotación  se  ha
.CreateRotatio
ámetro en pun
rdenado. 
a Tabla 3‐5 se 
la 3‐5 
riba las líneas c
yboard.GetSta
er otro  juego e
undo y tambié
a cambiar de r
trabajando,  y 
arse a la cámar
ace  alrededor 
onX, Matrix.Cr
nto flotante qu
muestra las te
Tecla 
J 
L 
I 
K 
U 
O 
código dentro 
ate(PlayerIn
Ilus
en tercera per
n rota para po
rumbo. La rota
que éstas,  las
ra. 
de  un  eje,  y 
reateRotationY
ue representa 
eclas con las qu
del método U
dex.One).IsK
stración 3‐6 Esca
rsona, en el qu
oder cambiar d
ación es la últim
s  transformaci
para  eso  se  c
Y y Matrix.Cre
el ángulo en r
ue manejará el 
Acción
Disminu
Increme
Increme
Disminu
Increme
Disminu
pdate y despu
KeyDown(Keys.
ala 
ue se observa 
de dirección m
ma transforma
iones, no  son 
crea  una matr
eateRotationZ.
radianes que s
 cambio de ori
uye el ángulo d
enta el ángulo 
enta el ángulo 
uye el ángulo d
enta el ángulo 
uye el ángulo d
és de las línea
J)) 
 
al personaje; 
mientras corren
ación que se h
exclusivas de 
riz  por medio 
. Esta terna de
será rotado alr
ientación del c
de rotación en Y
de rotación en
de rotación en
de rotación en 
de rotación en
de rotación en 
as que manipul
el modelo 3D
n por sus vida
hará al cubito c
los modelos 3
de  los métod
e métodos rec
rededor de alg
cubo. 
Y. 
n Y. 
n X. 
X. 
n Z. 
Z. 
lan el tamaño 
40 
D se 
s u 
con 
3D, 
dos 
cibe 
gún 
del 
 
 rot
if (Key
 rot
if (Key
 rot
if (Key
 rot
if (Key
 rot
if (Key
 rot
Aho
tener c
la mult
de rota
effect.
 Mat
 Mat
 Mat
Así q
y luego
Se o
hubiera
conserv
Cam
cambio
tacionY -= 0.
yboard.GetSta
tacionY += 0.
yboard.GetSta
tacionX += 0.
yboard.GetSta
tacionX -= 0.
yboard.GetSta
tacionZ += 0.
yboard.GetSta
tacionZ -= 0.
ora hay que mu
uidado al colo
iplicación de la
ción y después
.World = Matr
trix.CreateRo
trix.CreateRo
trix.CreateTr
que la siguient
 la de traslació
oprimió una de
a movido los ej
vando la misma
mbiando el ord
o importante en
.1F; 
ate(PlayerIn
.1F; 
ate(PlayerIn
.1F; 
ate(PlayerIn
.1F; 
ate(PlayerIn
.1F; 
ate(PlayerIn
.1F; 
ultiplicar la ma
car el ordene 
as matrices no
s la de traslació
rix.Identity
otationX(rot
otationZ(rot
ranslation(t
te ilustración s
ón. 
e las teclas que
jes coordenad
a distancia con
en de las matr
n la ilustración
dex.One).IsK
dex.One).IsK
dex.One).IsK
dex.One).IsK
dex.One).IsK
atriz generada 
de las matrice
o es conmutati
ón. 
 * Matrix.Cr
acionX) * Ma
acionZ) * 
raslacion);
se muestra lo q
Ilustració
e rota el cubo 
os, es decir, se
n el viewport.
rices, primero l
n siguiente. 
KeyDown(Keys.
KeyDown(Keys.
KeyDown(Keys.
KeyDown(Keys.
KeyDown(Keys.
por la matriz