<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Xna tutorial &#187; sprite</title>
	<atom:link href="http://www.xna-tutorial.com/tag/sprite/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.xna-tutorial.com</link>
	<description>Otro blog más de WordPress</description>
	<lastBuildDate>Tue, 26 Apr 2011 20:35:53 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Tutorial [Entrega 2]: Moviendo un sprite por la pantalla</title>
		<link>http://www.xna-tutorial.com/moviendo-un-sprite-por-la-pantalla/</link>
		<comments>http://www.xna-tutorial.com/moviendo-un-sprite-por-la-pantalla/#comments</comments>
		<pubDate>Mon, 14 Dec 2009 19:08:46 +0000</pubDate>
		<dc:creator>rantamplan</dc:creator>
				<category><![CDATA[2D]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[space invaders]]></category>
		<category><![CDATA[sprite]]></category>

		<guid isPermaLink="false">http://www.xna-tutorial.com/moviendo-un-sprite-por-la-pantalla/</guid>
		<description><![CDATA[&#160;
Parece que ha habido un error y la 2º parte del tutorial se ha borrado, asi que vuelvo a subirlo: Un saludo y perdonar las molestias

&#160;
&#160;
Continuamos la serie de tutoriales con lo más básico de XNA: crear el proyecto y mover un sprite por la pantalla.
En esta entrega crearemos un proyecto de XNA 3.1 y [...]]]></description>
			<content:encoded><![CDATA[<p>&#160;</p>
<blockquote><p>Parece que ha habido un error y la 2º parte del tutorial se ha borrado, asi que vuelvo a subirlo: Un saludo y perdonar las molestias</p>
</blockquote>
<p>&#160;</p>
<p>&#160;</p>
<p>Continuamos la serie de tutoriales con lo más básico de XNA: crear el proyecto y mover un sprite por la pantalla.</p>
<p>En esta entrega crearemos un proyecto de XNA 3.1 y dibujaremos por la pantalla un sprite (nuestra nave) y haremos que se mueva por la pantalla. Vamos a empezar por cosas fáciles y ya iremos subiendo poco a poco el nivel de dificultad.</p>
<p>Encontrarás el tutorial completo después del salto.</p>
</p>
<p> <span id="more-273"></span>
</p>
<h2><u>Creando el proyecto</u></h2>
<p>Lo primero que tenemos que hacer es crear un nuevo proyecto de XNA. Para ello, abrimos el VS2008 (o el Visual C# Studio si tienes la versión gratuita) y le damos a <strong>“Archivo/Nuevo/Proyecto”.</strong></p>
<p><strong></strong></p>
<p><img style="border-right-width: 0px;float: none;border-top-width: 0px;border-bottom-width: 0px;margin-left: auto;border-left-width: 0px;margin-right: auto" border="0" alt="image" src="http://www.xna-tutorial.com/wp-content/uploads/2009/12/image1.png" width="561" height="369" /></p>
<p>&#160;</p>
<p>&#160;</p>
<p>Nos saldrá una nueva ventana donde debemos elegir como tipo de proyecto “<strong>XNA Game Studio 3.1</strong>” y como plantilla “<strong>Windows Game</strong>”.</p>
<p>&#160;</p>
<p><img style="border-right-width: 0px;float: none;border-top-width: 0px;border-bottom-width: 0px;margin-left: auto;border-left-width: 0px;margin-right: auto" border="0" alt="image" src="http://www.xna-tutorial.com/wp-content/uploads/2009/12/image12.png" width="805" height="540" /></p>
<p>&#160;</p>
<p>&#160;</p>
<p>También le debemos <strong>dar un nombre al proyecto</strong>. Como hoy estoy poco ingenioso, lo llamaré simplemente “Space Invaders”. Vosotros podéis darle el nombre que queráis.</p>
<p>Si le damos a aceptar, veremos que se creará un proyecto nuevo, con varios ficheros (Game1.cs, Program.cs). Vemos que ya hay código escrito, y si le damos a F5 nos saldrá una pantalla azul. Esa pantalla es nuestro&#160; futuro juego.&#160; El fichero <em>Program.cs</em> no debemos tocarlo.</p>
<h3></h3>
<h3></h3>
<h2><span style="text-decoration: underline"></span></h2>
<h2><span style="text-decoration: underline">Creando la nave</span></h2>
<p>Ahora vamos a crear nuestra nave y pintarla en la pantalla esa azul que nos ha salido antes.</p>
<p>Para ello, en el archivo <strong>Game1.cs</strong> nos creamos una variable llamada nave de tipo ‘Texture2D’ que representará nuestra nave para combatir la invasión alienígena y un nuevo tipo de dato que trae XNA llamado ‘Vector2’ para almacenar la posición de la nave.</p>
<blockquote><div style="font-family: courier new"><span style="color: blue">private</span> Texture2D nave;       <br /><span style="color: blue">private</span> Vector2 pos;</div>
</blockquote>
<p>&#160;</p>
<p>&#160;</p>
<p>Ahora vamos al método Initialize(). En este método iniciamos la posición inicial de la nave. El resultado del método os quedará así:</p>
<blockquote><div style="font-family: courier new"><span style="color: blue">protected</span> <span style="color: blue">override</span> <span style="color: blue">void</span> Initialize()       <br />{       <br /><span style="color: green">// TODO: Add your initialization logic here</span>       <br />pos = <span style="color: blue">new</span> Vector2(<span style="color: maroon">400</span>,<span style="color: maroon">550</span>);<span style="color: blue">base</span>.Initialize();       <br />}</div>
</blockquote>
<p>&#160;</p>
<p>&#160;</p>
<p>Ya tenemos la posición de la nave. Ahora le tenemos que indicar al programa que sprite queremos usar como nave. Así que os dejo yo aquí uno muy chulo hecho por mi con gran destreza haciendo uso de mis años usando el Paint, XD.</p>
<p><a href="http://www.xna-tutorial.com/wp-content/uploads/2009/12/nave.png"><img style="border-right-width: 0px;float: none;border-top-width: 0px;border-bottom-width: 0px;margin-left: auto;border-left-width: 0px;margin-right: auto" border="0" alt="nave" src="http://www.xna-tutorial.com/wp-content/uploads/2009/12/nave_thumb.png" width="32" height="22" /></a></p>
<p>&#160;</p>
<p>Bien, para cargar la imagen primero tenemos que agregarla al directorio <strong>“Content”</strong> del juego. Para ello, le damos a <strong>“Botón Derecho”</strong> sobre “Content” y seleccionamos <strong>“Agregar/Elemento Existente”.</strong> Buscamos el sprite y le damos a aceptar. También podemos arrastrar directamente una imagen al directorio.</p>
<p>&#160;</p>
<p><img style="border-right-width: 0px;float: none;border-top-width: 0px;border-bottom-width: 0px;margin-left: auto;border-left-width: 0px;margin-right: auto" border="0" alt="image" src="http://www.xna-tutorial.com/wp-content/uploads/2009/12/image37.png" width="461" height="445" /></p>
<p>&#160;</p>
<p>&#160;</p>
<p>Ahora en nuestro proyecto tenemos un sprite llamado “nave”. Para cargarlo, usaremos el método <strong><em>‘Load()’</em></strong> dentro de nuestro método LoadContent(). Nos quedará algo así:</p>
<blockquote><div style="font-family: courier new"><span style="color: blue">protected</span> <span style="color: blue">override</span> <span style="color: blue">void</span> LoadContent()       <br />{       <br /><span style="color: green">// Create a new SpriteBatch, which can be used to draw textures.</span>       <br />spriteBatch = <span style="color: blue">new</span> SpriteBatch(GraphicsDevice);       <br />nave = Content.Load&lt;Texture2D&gt;(<span style="color: maroon">&quot;nave&quot;</span>);<span style="color: green">// TODO: use this.Content to load your game content here</span>       <br />}</div>
</blockquote>
<p>&#160;</p>
<p>&#160;</p>
<p>Ahora ya falta dibujarlo por la pantalla. Así que en el método Draw() escribimos el siguiente código para pintarlo.</p>
<blockquote><div style="font-family: courier new"><span style="color: blue">protected</span> <span style="color: blue">override</span> <span style="color: blue">void</span> Draw(GameTime gameTime)       <br />{       <br />GraphicsDevice.Clear(Color.CornflowerBlue);<span style="color: green">// TODO: Add your drawing code here</span>       <br />spriteBatch.Begin();       <br />spriteBatch.Draw(nave, pos, Color.White);       <br />spriteBatch.End();</div>
<div style="font-family: courier new"><span style="color: blue">base</span>.Draw(gameTime);       <br />}</div>
</blockquote>
<p>&#160;</p>
<p>&#160;</p>
<p>Si le damos ahora a F5 nos mostrará por la pantalla un fondo azul y nuestra nave. Igual que esta imagen:</p>
<p>&#160;</p>
<p><img style="border-right-width: 0px;float: none;border-top-width: 0px;border-bottom-width: 0px;margin-left: auto;border-left-width: 0px;margin-right: auto" border="0" alt="image" src="http://www.xna-tutorial.com/wp-content/uploads/2009/12/image18.png" width="813" height="636" /></p>
<p>&#160;</p>
<p>&#160;</p>
<p>Muy bonito, si, pero todavía no podemos hacer nada con ella, así que vamos a ver como moverla por la pantalla.</p>
<p>&#160;</p>
<p>Para ello, volvemos al método “update()” y escribimos dos instrucciones if: una para mover a la izquierda y otra para mover a la derecha.</p>
<blockquote><p style="font-family: courier new"><span style="color: blue">protected</span> <span style="color: blue">override</span> <span style="color: blue">void</span> Update(GameTime gameTime)       <br />{       <br /><span style="color: green">// Allows the game to exit</span>       <br /><span style="color: blue">if</span> (Keyboard.GetState().IsKeyDown(Keys.Escape))       <br /><span style="color: blue">this</span>.Exit();</p>
<p><span style="color: green">// TODO: Add your update logic here</span>       <br /><span style="color: blue">if</span> (Keyboard.GetState().IsKeyDown(Keys.Left))       <br />pos.X -= <span style="color: maroon">5</span>;       <br /><span style="color: blue">if</span> (Keyboard.GetState().IsKeyDown(Keys.Right))       <br />pos.X += <span style="color: maroon">5</span>;       <br /><span style="color: blue">base</span>.Update(gameTime);       <br />}</p>
</blockquote>
<p>&#160;</p>
<p>&#160;</p>
<p>Ahora, si le damos a F5, con las teclas de dirección podremos mover nuestra nave hacia izquierda y derecha. Fácil, verdad?</p>
<p>En la próxima entrega crearemos una clase para nuestra nave para poder controlarla mejor y haremos que pueda disparar.</p>
<p>&#160;</p>
<p><a href="http://www.xna-tutorial.com/wp-content/uploads/2009/11/Tutorial2.zip"><img style="border-right-width: 0px;border-top-width: 0px;border-bottom-width: 0px;margin-left: 0px;border-left-width: 0px;margin-right: 0px" border="0" alt="down" align="left" src="http://www.xna-tutorial.com/wp-content/uploads/2009/11/down.png" width="61" height="63" /></a> <a href="http://www.xna-tutorial.com/wp-content/uploads/2009/11/Tutorial2.zip"><strong><span style="text-decoration: underline">Descargar Código Fuente</span></strong></a></p>
<p>&#160;</p>
<p>Hasta la próxima entrega!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.xna-tutorial.com/moviendo-un-sprite-por-la-pantalla/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

