wp7 hub_xna
DESCRIPTION
Fase 2.3 Descripción de las características de XNA.TRANSCRIPT
![Page 1: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/1.jpg)
Windows Phone 7 XNA A different kind of phone, designed for a life in motion
![Page 2: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/2.jpg)
XNA OVERVIEWA framework to create game applications
![Page 3: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/3.jpg)
XNA XNA is a framework for writing games It includes a set of professional tools for game
production and resource management Windows Phone uses version 4.0 of the framework This is included as part of the Windows Phone SDK
![Page 4: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/4.jpg)
2D and 3D games XNA provides full support for 3D games It allows a game program to make full use of the
underlying hardware acceleration provided by the graphics hardware
For the purpose of this course we are going to focus on 2D gaming
Windows Phone games be either 2D or 3D
4
![Page 5: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/5.jpg)
XNA and Silverlight XNA is completely different from Silverlight The way that programs are constructed and
execute in XNA is quite different XNA has been optimised for game creation
It does not have any elements for user interface or data binding
Instead it has support for 3D rendering and game content management
5
![Page 6: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/6.jpg)
XNA and Programs XNA provides a set of classes which allow you to
create gameplay The classes represent game information and XNA
resources XNA is also a very good example of how you
construct and deploy a set of software resources in a Framework
![Page 7: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/7.jpg)
Creating a Game
The Windows Phone SDK provides a Windows Phone game project type
![Page 8: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/8.jpg)
The Game Project
The solution explorer shows the items that make up our game project
The solution will also contain any content that we add to the game project
![Page 9: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/9.jpg)
Empty Game Display At the moment all our
game does is display a blue screen
This is because the behaviour of the Draw method in a brand new project is to clear the screen to blue
![Page 10: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/10.jpg)
10
Demo 1: New Game
Demo
![Page 11: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/11.jpg)
What a Game Does When it Runs1. Initialise all the resources at the start
fetch all textures, models, scripts etc2. Repeatedly run the game:
1. Update the game world read the user input, update the state and position of game
elements
2. Draw the game world render the game elements on the viewing device
![Page 12: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/12.jpg)
XNA Game Class Methods
partial class PongGame : Microsoft.Xna.Framework.Game
{
protected override void LoadContent
(bool loadAllContent)
{
}
protected override void Update(GameTime gameTime)
{
}
protected override void Draw(GameTime gameTime)
{
}
}
![Page 13: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/13.jpg)
XNA Methods and games Note that our program never calls the LoadContent, Draw and Update methods
They are called by the XNA Framework LoadContent is called when the game starts Draw is called as often as possible Update is called 30 times a second
Note that this is not the same as an XNA game on Windows PC or Xbox, where Update is called 60 times a second
13
![Page 14: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/14.jpg)
Loading Game Content
LoadContent is called when our game starts
It is where we put the code that loads the content into our game
Content includes images, sounds, models etc.
protected override void LoadContent()
{
// Create a new SpriteBatch, which can be used to
// draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);
}
![Page 15: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/15.jpg)
Game Content Games are not just programs, they also contain
other content: Images for textures and backgrounds Sound Effects 3D Object Meshes
We need to add this content to our project The XNA framework provides a content
management system which is integrated into Visual Studio
![Page 16: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/16.jpg)
Image Resources
This is a Ball image I have saved it as a PNG file
This allows the image to use transparency
You can use any image resource you like
The resources are added to the Visual Studio project
They are held in the Content directory as part of your project
![Page 17: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/17.jpg)
Using the Content Pipeline Each resource is given an
asset name The Load method of
Content Manager provides access to the resource using the Asset Name that we gave it
ballTexture = Content.Load<Texture2D>("WhiteDot");
![Page 18: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/18.jpg)
Storing the Ball Texture in the game
XNA provides a Texture2D type which holds a 2D (flat) texture to be drawn on the display
The game class needs to contain a member variable to hold the ball texture that is to be drawn when the game runs
This variable will be shared by all the methods in the game
// Game World
Texture2D ballTexture;
![Page 19: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/19.jpg)
Loading Content into the Ball Texture
LoadContent is called when a game starts
It loads an image into the ball texture The content manager fetches the
images which are automatically sent to the target device
protected override void LoadContent()
{
// Create a new SpriteBatch, which can be used to
// draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);
ballTexture = Content.Load<Texture2D>("WhiteDot");
}
![Page 20: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/20.jpg)
Making a “sprite” A sprite is an object on the screen of a game It has both a texture and a position on the screen We are creating a sprite object for the ball in our
game We now have the texture for the object The next thing to do is position it on the screen
20
![Page 21: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/21.jpg)
Coordinates and Pixels When drawing in XNA the position of an object on
the screen is given using coordinates based on pixels A standard Windows Phone screen is 800 pixels
wide and 480 pixels high This gives the range of possible values for
display coordinates If you draw things off the screen this does not cause
XNA problems, but nothing is drawn
21
![Page 22: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/22.jpg)
X and Y in XNA The coordinate system used by XNA sprite drawing
puts the origin (0,0) in the top left hand corner of the screen Increasing X moves an object across the screen
towards the right Increasing Y moves an object down the screen
towards the bottom It is important that you remember this
22
![Page 23: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/23.jpg)
Positioning the Ball using a Rectangle
We can add a rectangle value to the game to manage the position of the ball on the screen
We will initialise it in the LoadContent method
// Game World
Texture2D ballTexture;
Rectangle ballRectangle;
![Page 24: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/24.jpg)
The Rectangle structure
Rectangle is a struct type which contains a position and a size
The code above creates a rectangle positioned at 0,0 (top left hand corner) the same size as ballTexture
We could move our ball by changing the content of the rectangle
Rectangle ballRectangle = new Rectangle(
0, 0,
ballTexture.Width, ballTexture.Height),
Color.White);
![Page 25: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/25.jpg)
Drawing a Sprite In game programming terms a “sprite” is a texture
that can be positioned on the screen We now have a ball sprite
We have the texture that contains an image of the ball
We have a rectangle that gives the position and size of the sprite itself
25
![Page 26: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/26.jpg)
XNA Game Draw Method
The Draw method is called repeatedly when an XNA game is running It has the job of drawing the display on the
screen A brand new XNA game project contains a Draw
method that clears the screen to CornflowerBlue We must add our own code to the method to draw
the ball
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
base.Draw(gameTime);
}
![Page 27: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/27.jpg)
Sprite Batching
2D Graphics drawing is handled by a set of “sprite” drawing methods provided by XNA
These create commands that are passed to the graphics device
The graphics device will not want to draw everything on a piecemeal basis
Ideally all the drawing information, textures and transformations should be provided as a single item
The SpriteBatch class looks after this for us
![Page 28: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/28.jpg)
SpriteBatch Begin and End
The call to the Begin method tells SpriteBatch to begin a assembling a new set of drawing operations
The call to the End method tells SpriteBatch that the there are no more operations and causes the rendering to take place
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
// Code that uses spriteBatch to draw the display
spriteBatch.End();
base.Draw(gameTime);
}
![Page 29: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/29.jpg)
Using SpriteBatch.Draw
The SpriteBatch class provides a Draw method to do the sprite drawing
It is given parameters to tell it what to do: Texture to draw Position (expressed as a Rectangle) Draw color
spriteBatch.Draw(ballTexture, ballRectangle, Color.White);
![Page 30: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/30.jpg)
Rectangle Funnew Rectangle(
0, 0,
ballTexture.Width,
ballTexture.Height)
new Rectangle(
0, 0, // position
200,100) // size
new Rectangle(
50, 50, // position
60, 60) // size
![Page 31: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/31.jpg)
31
Demo 2: Dot Sizes
Demo
![Page 32: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/32.jpg)
Screen Size and Scaling
We need to make our game images fit the size of the screen
We can find out the size of the screen from the GraphicsDevice used to draw it
GraphicsDevice.Viewport.WidthGraphicsDevice.Viewport.Height
We can use this information to scale the images on the screen
![Page 33: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/33.jpg)
Creating the ballRectangle variable
If we use this rectangle to draw our ball texture it will be drawn as a square which is a twentieth of the width of the screen
We can then set the position parts of the rectangle to move the ball around the screen
ballRectangle = new Rectangle(
0, 0,
GraphicsDevice.Viewport.Width / 20,
GraphicsDevice.Viewport.Width / 20);
![Page 34: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/34.jpg)
Moving the ball around the screen At the moment the ball is drawn in the
same position each time Draw runs To move the ball around we need to
make this position change over time We need to give the game an update
behaviour We must add code to the Update
method in the game The Update method is where we
manage the state of the “game world”
![Page 35: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/35.jpg)
The Update Method
The Update method is automatically called 30 times a second when a game is running
It is in charge of managing the “game world” In a pong game this means updating the
bat and the ball positions and checking for collisions
protected override void Update(GameTime gameTime)
{
// TODO: Add your update logic here
base.Update(gameTime);
}
![Page 36: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/36.jpg)
Simple Update Method
Each time the game updates the X and Y position of the ball rectangle is increased
This will cause it to move across and down the screen
Note that I call the base method to allow my parent object to update too
protected override void Update(GameTime gameTime)
{
ballRectangle.X++;
ballRectangle.Y++;
base.Update(gameTime);
}
![Page 37: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/37.jpg)
GameTime At the moment the Update method is
called sixty time a second or once every 16.66 milliseconds
We can also let the update "free run", in which case we need to know the time since the last call so we can move objects the right distance
This is what the GameTime parameter is for, it gives the time at which the method was called
![Page 38: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/38.jpg)
38
Demo 2: Moving Dot
Demo
![Page 39: WP7 HUB_XNA](https://reader038.vdocuments.site/reader038/viewer/2022102711/5560b709d8b42aef3b8b4a53/html5/thumbnails/39.jpg)
Summary XNA is a Framework of methods that are used to
write games You create the games using Visual Studio Games have initialise, update and draw behaviours Game objects are held as textures objects and their
position and dimensions as rectangle structures