WP7 HUB_XNA

Windows Phone 7 XNA A different kind of phone, designed for a life in motion

XNA OVerviewA frameworktocreategameapplications

XNA XNA is a framework for writing gamesIt includes a set of professional tools for game production and resource managementWindows Phone uses version 4.0 of the frameworkThis is included as part of the Windows Phone SDK

2D and 3D gamesXNA provides full support for 3D gamesIt allows a game program to make full use of the underlying hardware acceleration provided by the graphics hardwareFor the purpose of this course we are going to focus on 2D gamingWindows Phone games be either 2D or 3D4

XNA and SilverlightXNA is completely different from SilverlightThe way that programs are constructed and execute in XNA is quite differentXNA has been optimised for game creationIt does not have any elements for user interface or data bindingInstead it has support for 3D rendering and game content management5

XNA and ProgramsXNA provides a set of classes which allow you to create gameplayThe classes represent game information and XNA resourcesXNA is also a very good example of how you construct and deploy a set of software resources in a Framework

Creating a GameThe Windows Phone SDK provides a Windows Phone game project type

The Game ProjectThe solution explorer shows the items that make up our game projectThe solution will also contain any content that we add to the game project

Empty Game DisplayAt the moment all our game does is display a blue screenThis is because the behaviour of the Draw method in a brand new project is to clear the screen to blue

What a Game Does When it RunsInitialise all the resources at the startfetch all textures, models, scripts etcRepeatedly run the game:Update the game worldread the user input, update the state and position of game elementsDraw the game worldrender the game elements on the viewing device

XNA Game Class MethodspartialclassPongGame : Microsoft.Xna.Framework.Game{protectedoverridevoidLoadContent (boolloadAllContent) { }protectedoverridevoid Update(GameTimegameTime) { }protectedoverridevoid Draw(GameTimegameTime) { }}

XNA Methods and gamesNote that our program never calls the LoadContent, Draw and Update methodsThey are called by the XNA Framework LoadContent is called when the game startsDraw is called as often as possibleUpdate is called 30 times a secondNote that this is not the same as an XNA game on Windows PC or Xbox, where Update is called 60 times a second13

Loading Game ContentprotectedoverridevoidLoadContent(){// Create a new SpriteBatch, which can be used to // draw textures.spriteBatch = newSpriteBatch(GraphicsDevice);}LoadContent is called when our game startsIt is where we put the code that loads the content into our gameContent includes images, sounds, models etc.

Game ContentGames are not just programs, they also contain other content:Images for textures and backgroundsSound Effects3D Object MeshesWe need to add this content to our projectThe XNA framework provides a content management system which is integrated into Visual Studio

Image ResourcesThis is a Ball imageI have saved it as a PNG fileThis allows the image to use transparencyYou can use any image resource you like The resources are added to the Visual Studio projectThey are held in the Content directory as part of your project

Using the Content PipelineEach resource is given an asset name The Load method of Content Manager provides access to the resource using the Asset Name that we gave itballTexture = Content.Load<Texture2D>("WhiteDot");

Storing the Ball Texture in the game// Game WorldTexture2D ballTexture;XNA provides a Texture2Dtype which holds a 2D (flat) texture to be drawn on the displayThe game class needs to contain a member variable to hold the ball texture that is to be drawn when the game runsThis variable will be shared by all the methods in the game

Loading Content into the Ball TextureprotectedoverridevoidLoadContent(){// Create a new SpriteBatch, which can be used to // draw textures.spriteBatch = newSpriteBatch(GraphicsDevice);ballTexture = Content.Load<Texture2D>("WhiteDot");}LoadContentis called when a game startsIt loads an image into the ball textureThe content manager fetches the images which are automatically sent to the target device

Making a “sprite”A sprite is an object on the screen of a gameIt has both a texture and a position on the screen We are creating a sprite object for the ball in our gameWe now have the texture for the objectThe next thing to do is position it on the screen20

Coordinates and PixelsWhen drawing in XNA the position of an object on the screen is given using coordinates based on pixelsA standard Windows Phone screen is 800 pixels wide and 480 pixels highThis gives the range of possible values for display coordinatesIf you draw things off the screen this does not cause XNA problems, but nothing is drawn21

X and Y in XNAThe coordinate system used by XNA sprite drawing puts the origin (0,0) in the top left hand corner of the screenIncreasing X moves an object across the screen towards the rightIncreasing Y moves an object down the screen towards the bottomIt is important that you remember this22

Positioning the Ball using a Rectangle// Game WorldTexture2DballTexture;RectangleballRectangle;We can add a rectangle value to the game to manage the position of the ball on the screenWe will initialise it in the LoadContent method

The Rectangle structureRectangle ballRectangle = newRectangle( 0, 0,ballTexture.Width, ballTexture.Height),Color.White);Rectangle is a struct type which contains a position and a sizeThe code above creates a rectangle positioned at 0,0 (top left hand corner) the same size as ballTextureWe could move our ball by changing the content of the rectangle

Drawing a SpriteIn game programming terms a “sprite” is a texture that can be positioned on the screenWe now have a ball spriteWe have the texture that contains an image of the ballWe have a rectangle that gives the position and size of the sprite itself25

XNA Game Draw Methodprotectedoverridevoid Draw(GameTimegameTime){GraphicsDevice.Clear(Color.CornflowerBlue);base.Draw(gameTime);}The Draw method is called repeatedly when an XNA game is runningIt has the job of drawing the display on the screenA brand new XNA game project contains a Draw method that clears the screen to CornflowerBlueWe must add our own code to the method to draw the ball

Sprite Batching2D Graphics drawing is handled by a set of “sprite” drawing methods provided by XNAThese create commands that are passed to the graphics deviceThe graphics device will not want to draw everything on a piecemeal basisIdeally all the drawing information, textures and transformations should be provided as a single itemThe SpriteBatch class looks after this for us

SpriteBatch Begin and Endprotectedoverridevoid Draw(GameTimegameTime){GraphicsDevice.Clear(Color.CornflowerBlue);spriteBatch.Begin(); // Code that uses spriteBatch to draw the displayspriteBatch.End();base.Draw(gameTime);}The call to the Begin method tells SpriteBatch to begin a assembling a new set of drawing operationsThe call to the End method tells SpriteBatch that the there are no more operations and causes the rendering to take place

Using SpriteBatch.DrawspriteBatch.Draw(ballTexture, ballRectangle, Color.White);The SpriteBatch class provides a Draw method to do the sprite drawingIt is given parameters to tell it what to do:Texture to drawPosition (expressed as a Rectangle)Draw color

Rectangle Funnew Rectangle( 0, 0,ballTexture.Width, ballTexture.Height)new Rectangle( 0, 0, // position 200,100) // sizenew Rectangle( 50, 50, // position 60, 60) // size

Screen Size and ScalingWe need to make our game images fit the size of the screenWe can find out the size of the screen from the GraphicsDevice used to draw itGraphicsDevice.Viewport.WidthGraphicsDevice.Viewport.HeightWe can use this information to scale the images on the screen

Creating the ballRectangle variableballRectangle = newRectangle( 0, 0,GraphicsDevice.Viewport.Width / 20,GraphicsDevice.Viewport.Width/ 20);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 screenWe can then set the position parts of the rectangle to move the ball around the screen

Moving the ball around the screenAt the moment the ball is drawn in the same position each time Draw runsTo move the ball around we need to make this position change over timeWe need to give the game an update behaviourWe must add code to the Update method in the gameThe Update method is where we manage the state of the “game world”

The Update Methodprotectedoverridevoid Update(GameTimegameTime){// TODO: Add your update logic herebase.Update(gameTime);}The Update method is automatically called 30 times a second when a game is runningIt 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

Simple Update Methodprotectedoverridevoid Update(GameTimegameTime){ballRectangle.X++;ballRectangle.Y++;base.Update(gameTime);}Each time the game updates the X and Y position of the ball rectangle is increasedThis will cause it to move across and down the screenNote that I call the base method to allow my parent object to update too

GameTimeAt the moment the Update method is called sixty time a second or once every 16.66 millisecondsWe 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 distanceThis is what the GameTime parameter is for, it gives the time at which the method was called

SummaryXNA is a Framework of methods that are used to write gamesYou create the games using Visual Studio Games have initialise, update and draw behavioursGame objects are held as textures objects and their position and dimensions as rectangle structures

WP7 HUB_XNA

Related slideshows

More Related Content

WP7 HUB_XNA

Editor's Notes