Windows phone and xna for fun games profit and physics
This presentation is the property of its rightful owner.
Sponsored Links
1 / 58

Windows Phone and XNA for Fun, Games, Profit and Physics PowerPoint PPT Presentation


  • 41 Views
  • Uploaded on
  • Presentation posted in: General

Windows Phone and XNA for Fun, Games, Profit and Physics. Rob Miles| Microsoft MVP | University of Hull www.robmiles.com Twitter: @robmiles. Agenda. Getting started with XNA Sorting out orientation Using the touch panel gesture support

Download Presentation

Windows Phone and XNA for Fun, Games, Profit and Physics

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Windows phone and xna for fun games profit and physics

Windows Phone and XNA for Fun, Games, Profit and Physics

Rob Miles| Microsoft MVP | University of Hullwww.robmiles.com

Twitter: @robmiles


Agenda

Agenda

  • Getting started with XNA

  • Sorting out orientation

  • Using the touch panel gesture support

  • Adding a touch of Physics with the Farseer Physics Engine

  • Using the Windows Phone accelerometer

  • The Windows Phone Marketplace


Quick overview of xna

Quick Overview of XNA

  • The XNA Framework provides everything you need to get started writing games:

  • Full Content Management (integrated into Visual Studio)

  • Support for 2D Sprite-based gameplay

  • Support for 3D games

  • Common behaviours across the Windows PC, Xbox 360 and Windows Phone

    • One game engine can run on all platforms

  • Well factored object model


How games work

How Games Work

  • Every game that has ever been written has these fundamental behaviours:

  • Initialise all the resources at the start

    • fetch all textures, models, scripts etc

  • Repeatedly run the game loop:

    • Update the game world

      • read the controllers, update the state and position of game elements

    • Draw the game world

      • render the game elements on the viewing device


Methods in an xna game

Methods in an XNA game

  • The XNA Game class contains methods that will provide these behaviours

  • Initialise all the resources at the start

    • The Initialize and LoadContent methods

  • Repeatedly run the game loop:

    • Update the game world

      • The Update method

    • Draw the game world

      • The Draw method


Getting started with xna

Getting Started with XNA

  • When you create a new XNA game project you are provided with empty versions of the game methods

  • Creating an XNA game is a matter of filling in these methods to get the game behaviours that are required

  • We are going to start by getting some cheese moving around the display

  • Then we are going to start rolling it around to score points

  • This is the latest cheese game in a long running series:

  • Behold CHEESE ROLLER!


Demo 1 drawing cheese

Demo 1: Drawing Cheese


Windows phone and orientation

Windows Phone and Orientation

  • By default a Windows Phone XNA game assumes it is running in “landscape” mode with the screen on the left of the controls

  • I want to change this, because I want to send the cheese down the long axis of the phone when it is rolled

  • I can select orientation when the game starts


Orientation and display

Orientation and display

  • // Tell XNA we can only support Portrait orientation

  • // Can support a range of orientations by ORing

  • // together orientation values

  • graphics.SupportedOrientations = DisplayOrientation.Portrait;

  • // Set up hardware scaling of the display area

  • graphics.PreferredBackBufferWidth = 480;

  • graphics.PreferredBackBufferHeight = 800;// Want a full screen display

  • graphics.IsFullScreen = true;


Orientation management

Orientation management

  • An XNA game can specify the orientations it can support

  • The game can bind a method to the event which is fired when the orientation changes

    • Games can animate the transition to the new orientation if they wish

  • When orientation changes the origin for the draw position is moved to the top left hand corner of the viewport

  • The frame of reference for accelerometer readings (of which more later) is always as for the phone held in portrait mode


Size and the scaler

Size and the Scaler

  • An XNA game can also request a specific size of back buffer for the display

  • The game will be given this resolution irrespective of the actual device

    • The Graphics Processor (GPU) performs this scaling automatically and interpolates to remove any jagged edges

  • This is a great way to get performance boost by rendering to a lower resolution than the screen itself

    • In a fast moving game the lower resolution is not noticeable


Demo 2 orientation and scale

Demo 2: Orientation and Scale


Creating a game world

Creating a Game World

  • An XNA game uses a number of variables to represent the state of the game itself

    • The Update method will update their values

    • The Draw method will produce a display that reflects their value

  • In the case of Cheese Roller the game must manage the position and movement of the cheese on the screen

  • We use a Texture2D value and a Rectangle to hold the position and a Vector2 to give the direction of movement

  • We also have a Friction value to slow the velocity over time


Using gestures

Using Gestures

  • We are going to use the touch panel to allow the player to “flick” the cheese around

  • For the ultimate in control you can get direct access to touch events from the panel

    • Up to four events can be tracked at one time

    • Each event is uniquely identified throughout its lifetime

  • However, XNA games can also use built in gesture recognition

  • Register an interest in a particular gesture type and then get notification when one has been performed


Supported gestures

Supported Gestures

  • The touch panel can detect a number of different gestures including

    • Tap

    • DoubleTap

    • Hold

    • HorizontalDrag, VerticalDrag and FreeDrag

    • Pinch

    • Flick

  • The Cheese Roller game is going to use the Flick gesture


Registering an interest in a gesture

Registering an interest in a gesture

  • The game must select those gestures that it wants to use

  • This can be done once at the start of the game

  • I do it in the XNA Initialise method

  • A game can also query the TouchPanel about the number of points it can track simultaneously

  • TouchPanel.EnabledGestures = GestureType.Flick;


Retrieving gestures

Retrieving Gestures

  • The Flick gesture returns a Delta value which gives the speed of the flick

    • The divide factor of 100 is something I came up with by playtesting

    • The smaller the value, the more powerful the effect of the flick

  • while (TouchPanel.IsGestureAvailable)

  • {

  • GestureSample gesture = TouchPanel.ReadGesture();

  • if (gesture.GestureType == GestureType.Flick)

  • cheeseSpeed = Vector2.Divide(gesture.Delta, 100);

  • }


Demo 3 rolling cheese

Demo 3: Rolling Cheese


Improving cheese roller

Improving Cheese Roller

  • The obvious improvement to Cheese Roller is to add more cheese

  • If we do this the physics becomes more complicated

  • Our simple model can no longer cope with all the collisions

  • Fortunately there are a lot of engines out there that can help

  • One of these is the Farseer engine

  • It is a 2D physics engine that is very easy to use and works well on Windows Phone


The farseer physics engine

The FarSeer Physics Engine

  • The FarSeer Physics Engine is a Codeplex based project you can download from here:

    http://farseerphysics.codeplex.com/

  • Version 3.0 has just been released but there is not a version of this that is suitable for Windows Phone just yet

  • I have used Version 2.0 for my Windows Phone “Destruction Golf” game


Farseer objects

Farseer Objects

  • Objects in the Farseer 2.n universe are made up of a Body and a Geometry

  • We create instances of these and add them to the Farseer simulator

  • When the XNA game updates we also update the simulator so that it moves the objects around

  • We create the simulator at the start of the program


The simulator

The Simulator

  • When we create the simulator we also give it a vector that indicates the direction of gravity

    • A vector is a way of expressing a direction

    • We can create it by giving it x and y direction values

  • We can change this to make gravity work in any direction we like, or with any amount of strength, which might be fun

//The physics simulator is always needed. // We supply a gravity of 250 units

PhysicsSimulator simulator = newPhysicsSimulator(newVector2(0, 250));


The shelf data

The shelf data

  • The shelf is the simplest object on the screen

  • It has a texture that is used to draw it, a Farseer body and a Farseer geometry

  • It also has an origin value, which is the “centre” of the object

///<summary>

/// Texture of the shelf the target sits on

///</summary>

Texture2DshelfTexture;

BodyshelfBody;

GeomshelfGeom;

Vector2shelfOrigin;


The shelf body

The shelf body

  • This creates a shelf body and places it in the world

  • Note that I’ve scaled the texture to fit the display world

  • I have also made the shelf static, so that it can’t move around in the world

shelfTexture = Content.Load<Texture2D>(@"images\shelf");

shelfOrigin = newVector2(shelfTexture.Width / 2.0f,

shelfTexture.Height / 2.0f);

shelfBody = BodyFactory.Instance.CreateRectangleBody(

shelfTexture.Width, shelfTexture.Height, 1);

shelfBody.IsStatic = true;

shelfBody.Position = newVector2(550, 400);

simulator.Add(shelfBody);


The shelf geometry

The shelf geometry

  • This creates a shelf geometry and places it in the world

  • This sets out how much bounce (RestitutionCoefficient) we get from the shelf and how slippery (FrictionCoefficient) we want it to be

  • Playing with these values is fun

shelfGeom = GeomFactory.Instance.CreateRectangleGeom(shelfBody,shelfTexture.Width, shelfTexture.Height);

shelfGeom.RestitutionCoefficient = 0.3f;

shelfGeom.FrictionCoefficient = 0.5f;

simulator.Add(shelfGeom);


Drawing the shelf

Drawing the shelf

  • We use a more advanced version of the Draw method that lets us specify a rotation value for the texture

    • The shelf won’t rotate, but other objects will

  • Note that we get these values out of the geometry for the shape

  • The draw operations for all the game objects look the same

spriteBatch.Draw(shelfTexture, shelfGeom.Position, null,Color.White, shelfGeom.Rotation, shelfOrigin, 1, SpriteEffects.None, 1);


The target data

The Target data

  • The target is the house we are aiming at

  • It has the same information stored about it as the shelf

  • We will place the target on the shelf when the game starts

  • The only difference between the target and the shelf is that the target is allowed to move

  • The aim of the game is to knock the target off the shelf


The target mass

The Target mass

  • Bodies in Farseer are given mass

  • The higher the mass the harder they are to get moving, and the more damage they do when they hit

  • The mass of the shelf is not an issue, since it is fixed in position

  • I’ve given the target a mass of 3

  • This is a value you might want to fine tune

targetBody = BodyFactory.Instance.CreateRectangleBody(targetTexture.Width, targetTexture.Height, 3);


Ball position

Ball Position

  • The ball geometry is based on a circle rather than a rectangle

  • When create a circle you give the radius and the number of edges

    • This is because the circle is actually an approximation

  • The more edges, the more accurate the approximation but the more work it is to calculate

ballGeom = GeomFactory.Instance.CreateCircleGeom(ballBody,ballTexture.Width/2, 50);

ballGeom.RestitutionCoefficient= 0.3f;

ballGeom.FrictionCoefficient = 0.5f;


Ball launching

Ball Launching

  • We use Windows Phone gesture support to fire the ball

  • The Flick gesture provides a Delta vector that we apply as an impulse to the ball object

while (TouchPanel.IsGestureAvailable)

{

GestureSample gesture = TouchPanel.ReadGesture();

if (gesture.GestureType == GestureType.Flick)

{

ballBody.ApplyImpulse(Vector2.Divide(gesture.Delta, 1.5f));

}

}


Detecting collisions

Detecting Collisions

  • Farseer will detect collisions for us

  • We can bind an event handler to the collision event

  • When the collision occurs the handler method is called automatically

  • The above code binds a method to the collision event

ballGeom.OnCollision += newCollisionEventHandler(ballHits);


Collision handler

Collision handler

  • Called whenever a collision is detected

  • Checks to see if the ball has hit the shelf or the target

boolballHits(Geom geometry1, Geom geometry2, ContactListcontactList)

{

if (ballSoundActive) returntrue;if (geometry1 == shelfGeom || geometry2 == shelfGeom)

returntrue;

ballSoundActive = true;

bangSound.Play();

returntrue;

}


Collision handler sound management

Collision handler sound management

  • Only plays the sound if the ball has hit the house

  • Only plays the sound once

boolballHits(Geom geometry1, Geom geometry2, ContactListcontactList)

{

if (ballSoundActive) returntrue;if (geometry1 == shelfGeom || geometry2 == shelfGeom)

returntrue;

ballSoundActive = true;

bangSound.Play();

returntrue;

}


Updating farseer

Updating Farseer

  • We need to add this method call to the Update method to keep the Farseer simulation running

  • The time factor controls the rate at which the engine updates

  • You can tune this if you have problems with items moving so fast they go inside or through each other

  • For the purpose of my program the value above works fine

simulator.Update(gameTime.ElapsedGameTime.Milliseconds * .0005f);


Scrolling background

Scrolling Background

  • We use a transformation matrix for the draw operation so that we can scroll the screen to follow the ball

  • We can get the position out of the ball geometry so our program can tell where the ball is

if (ballGeom.Position.X + scrollMargin > width)

{

// need to scroll the screen

xOffset = width - (ballGeom.Position.X + scrollMargin);

}


Transformation matrix

Transformation Matrix

  • A transformation matrix is a lump of maths that can be applied to a drawing operation to change the way it looks

    • Scaling

    • Rotation

    • Translation

  • We just want to translate our view when we draw it

  • XNA will create a translation matrix for us

Matrix transformation;transformation =

Matrix.CreateTranslation(xOffset, 0, 0);


Drawing with a transformation matrix

Drawing with a Transformation Matrix

  • We can ask SpriteBatch to use this matrix to transform the drawing operation

  • All the drawing performed will be moved according to the matrix supplied

  • We can follow this with an “untransformed” draw if we wish

spriteBatch.Begin(SpriteSortMode.Immediate,

null, null, null, null, null, transformation);

// transformed drawing

spriteBatch.End();


Demo 4 destruction golf

Demo 4: Destruction Golf


Using the phone accelerometer

Using the phone accelerometer

  • You can also use the accelerometer to control the behaviour of objects in your game

  • The Accelerometer can measure acceleration in X, Y and Z

  • You can use just the X and Y values to turn it into a replacement for a gamepad

  • The values that are returned are in the same range

    • -1 to +1 in each axis


Adding the sensors library

Adding the Sensors library

  • The reason why the accelerometer is event driven is that XNA actually uses the same sensor interface as Silverlight

  • This means that you need to include the appropriate sensor library into your program to obtain accelerometer readings

  • You need to add Microsoft.Devices.Sensors to your solution to bring in the library


Xna 4 0 accelerometer

XNA 4.0 Accelerometer

  • Unlike other XNA input devices the accelerometer in XNA 4.0 is event driven

  • The accelerometer generates events when new readings are available

  • You must bind a method to the event

  • The method can store the settings for later use


Creating an accelerometer

Creating an Accelerometer

  • The above code runs in the Initialise method to set up the accelerometer

  • It creates a new Accelerometer, binds an event handler to it and then starts it running

  • Accelerometer accel = newAccelerometer();

  • accel.ReadingChanged +=

  • newEventHandler<AccelerometerReadingEventArgs>

  • (accel_ReadingChanged);

  • accel.Start();


Reading the accelerometer

Reading The Accelerometer

  • objectaccelLock = newobject();

  • voidaccel_ReadingChanged(object sender,AccelerometerReadingEventArgs e)

  • {

  • lock (accelLock)

  • {

  • accelReading.X = (float)e.X;

  • accelReading.Y = (float)e.Y;

  • accelReading.Z = (float)e.Z;

  • }

  • }


Using the accelerometer

Using The Accelerometer

  • lock (accelLock)

  • {

  • cheeseAcceleration.X = accelReading.X * acceleratorPower;

  • cheeseAcceleration.Y = -accelReading.Y * acceleratorPower;

  • }

  • This code uses the accelerometer values stored by the event handler to manage the cheese movement

  • Note that I use a lock to stop the event handler and the Update method from fighting over the values


Tipping games

“Tipping” games

  • The accelerometer makes it very easy to create “tipping” games, which simulate gravity moving items around the screen

  • The further you tip the device the greater the force acting on the object

  • We could use the accelerometer values as forces that drive the Farseer physics engine directly


Demo 5 cheese lander

Demo 5: Cheese Lander


Games and applications

Games and Applications

  • Programs are loaded onto the phone from the Marketplace over the air (WiFi or 3G) or via the Zune application

  • This is the only way to put programs on a “locked” device

  • Registered developers can unlock a device for testing


Joining the marketplace

Joining the Marketplace

  • If you want to take your games to market you will need to join the Windows Phone Marketplace as a developer

    • This is managed via your Windows Live identity

    • It costs $99 per year

    • Students can get free membership via DreamSpark

  • Joining the Marketplace lets you publish games and unlock Windows Phone devices for testing

    • Developers can unlock up to three devices

    • Students can unlock just one


Free and trial applications

Free and Trial Applications

  • You can give away up to 100 applications each year you are member of the Marketplace

    • Any further free applications will cost $20 each for validation

  • You can also make available “trial” versions of a game or application

  • Customers can purchase an upgrade from within the application


Submitting applications

Submitting Applications

  • You are guided through the submission process for your application

  • The application itself is submitted as a single “xap” file

  • This is an archive with a manifest which is generated by Visual Studio when the game is built

  • It contains all the game content and resources


Application approval

Application Approval

  • The application process is “semi-automatic”

    • Checks for application pre-requisites and code behaviours along with a review of the program itself

  • Each developer has a dashboard that keeps them informed of the progress of each submission

    • You can submit upgrades at no cost

  • The submission guidelines give a lot of help to ensure that your submissions have the best chance of succeeding

  • You must read these before sending a game for approval


Making money

Making Money

  • Marketplace publishers get 70% of the price paid for the games

  • This is paid once you have earned at least $200

  • If you are not from the US you will have to fill in a US Tax Waiver form and fax it to the Windows Marketplace team

  • You can still submit applications for sale before you have sorted this out


What we have learnt

What we have learnt

  • The Windows Phone platform provides a mix of resources that can be used to create compelling games

  • The Touch sensor and accelerometer inputs are easy to use in XNA programs

  • By adding a physics engine we can make our XNA games even more interesting

  • Publishing is easy and cheap

  • There has never been a better time to create mobile games


What to do next

What to do next

  • Download the developer tools from:

    http://create.msdn.com

  • Download the sample code from: http://robmiles.com

  • Watch the Jumpstart videos 

  • Register as a developer

  • Download the FarSeer engine from: http://farseerphysics.codeplex.com/

  • Start making money and having fun!


Questions

Questions?

Don’t forget to fill out your eval forms!


Stay up to date with msdn belux

Stay up to date with MSDN Belux

  • Register for our newsletters and stay up to date:http://www.msdn-newsletters.be

    • Technical updates

    • Event announcements and registration

    • Top downloads

  • Follow our bloghttp://blogs.msdn.com/belux

  • Join us on Facebookhttp://www.facebook.com/msdnbehttp://www.facebook.com/msdnbelux

  • LinkedIn: http://linkd.in/msdnbelux/

  • Twitter: @msdnbelux

DownloadMSDN/TechNet Desktop Gadgethttp://bit.ly/msdntngadget


Techdays 2011 on demand

TechDays 2011 On-Demand

  • Watchthis session on-demand via Channel9http://channel9.msdn.com/belux

  • Download to your favorite MP3 or video player

  • Get access to slides and recommended resources by the speakers


Thank you

THANK YOU


  • Login