Zagreb, 23. rujna 2010.

Developing WP7 Apps with Silverlight

José Luis LatorreMicrosoft MVP, UX Specialist & Brainsiders CEOhttp://silverlightguy.com

Generalni sponzori:

Glavni sponzori:

Sponzori:

Organizatori:

Medijski sponzori: Strateški partneri:

Službena PR agencija:

Generalni medijski sponzor:

GAMES WITH SILVERLIGHT? WHY?

Silverlight is for games?

• Concretely, Silverlight is good for casual games that doesn’t require intensive graphic capabilities.

• We have the fact that:– Players love casual games (simple & easy to pick up

and put down).– Phone platforms are great for this– Silverlight is great for this.

Why Silverlight

• Compelling Cross-Platform User Experience• Flexible object-oriented model– Fully managed code to improve encapsulation and

centralization• Declarative presentation language (Xaml)• Role specific tools• Rapid application development • Good performance

What kind of games?

• Word games• Desk games• Turn based strategy games• Pictorial games• Platform games• Touch interaction games• If this is what you want to write there might be

no need to learn XNA..

THE GAME LOOP

Game Loop I

•The “GAME LOOP”• Executes once per frame• It handles all the game logic, animation, Collisions, manages

input, applies game logic, etc.• Optimal game loop in Silverlight is usually implemented with CompositionTarget.Rendering, which executes once per rendered frame.•Final Hardware will execute 30 Frames Per Second

•For details on deciding the Game Loop implementation, check http://nokola.com/ and its ”GameLoopsInSilverlight.docx” document.

Game Loop II

• Is the ”Heart Beat” of the game...• Typical game loop logic

1. Checks for user input2. Checks for collisions3. Updates all the game elements visuals4. Draws all game elements (Actually not needed in

Silverlight due to the Visual Tree Model)5. Applies Game logic & AI.

Game loop III

protected DateTime lastTick; public Page(){ InitializeComponent(); CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering); lastTick = DateTime.Now;}

void CompositionTarget_Rendering(object sender, EventArgs e){ DateTime now = DateTime.Now; TimeSpan elapsed = now - lastTick; lastTick = now;

//Game Logic goes here}

Sprites

• The game characters can be represented by Sprites, which are usually represented by an image and a position on the game surface.

• So they have:1. Image.2. Position.3. Vector of movement.4. Other details, depending on the game.

Animated Sprites

• An animated sprite is the natural evolution as it can show an animation instead of a still image, which is good if the player is walking, to show a walking animation.

• So they have, additionally from the Sprite:1. An animation or sequence of images, also called

Frames.2. Speed of the animation ( frames per second)3. Number of Frames.

Game character

• A game character derives from a sprite or animated sprite and represents a game element, the player, an enemy, bonus, obstacle, etc..

• It usually has its own logic and is tied to events that determine its behavior.

Sprite, Camera, Action(link to demo)

Note: This demo is derived from a sample from Andy Bealieu.

Collisions I

• If two sprites (or animated sprites) collide, for example the player and a enemy, something must happen!!

• For this, we must know if there is a collision between both sprites.

• Usually a calculation of the bounding boxes will be enough.

Collisions II

• First, we need the bounding boxes of the two elements we want to discover if they have collided:

public static Rect UserControlBounds(FrameworkElement control){Point ptTopLeft = new Point(Convert.ToDouble(control.GetValue(Canvas.LeftProperty)), Convert.ToDouble(control.GetValue(Canvas.TopProperty)));

Point ptBottomRight = new Point(Convert.ToDouble(control.GetValue(Canvas.LeftProperty)) + control.Width, Convert.ToDouble(control.GetValue(Canvas.TopProperty)) + control.Height);return new Rect(ptTopLeft, ptBottomRight);}

Collisions III

• Next we validate if both bounding boxes overlap each other:

public static bool RectIntersect(Rectangle rectangle1, Rectangle rectangle2){ return (((double)rectangle1.GetValue(Canvas.LeftProperty) <= (double)rectangle2.GetValue(Canvas.LeftProperty) + rectangle2.Width) && ((double)rectangle1.GetValue(Canvas.LeftProperty) + rectangle1.Width >= (double)rectangle2.GetValue(Canvas.LeftProperty)) && ((double)rectangle1.GetValue(Canvas.TopProperty) <= (double)rectangle2.GetValue(Canvas.TopProperty) + rectangle2.Height) && ((double)rectangle1.GetValue(Canvas.TopProperty) + rectangle1.Height >= (double)rectangle2.GetValue(Canvas.TopProperty)));}

INPUT

Input via Buttons

Back – Start – Search Only

NOT usable for Games!

Input via Touch

•UIElement Class contains Events• ManipulationStarted• ManipulationDelta• ManipulationCompleted

•Supported in Emulator• Requires Multitouch Monitor

1

Input via Accelerometer

Measures force applied on each axis over time

+Y

-Y

+X-X

+Z

-Z• Not supported by Emulator

• Can be faked using Mouse Input + Perspective Transform

All together now!! – A shooting game(link to demo)

Note: This demo is derived from a great sample from Matthew Casperson.

OTHER POINTS

Performance Statistics

• Set EnableFrameRateCounter = true

A – Render Thread FramerateB – UI Thread FramerateC – Amount of Video Memory UsedD – Total # of Textures UsedE – Total # of Intermediate Textures Used

• Set EnableCacheVisualization = true• Tinted items are NOT being cached by GPU

Automatic GPU Acceleration

• Automatically Applied to • StoryBoard Animations• Perspective 3D (PlaneProjections) – but only if they

are applied by Storyboard animations.• Uses Video Card for Transform, Rotate, Scale, Rectangular Clip

• NOT automatic for Procedural Animation!

MONETIZATION

MonetizationThe Marketplace Hub

Try and buyDetailed product descriptionScreen shotsReviews & ratingsRelated appsOptional game content ratingMore apps by developer

Monetization

Monetization70% revenue share

Trial API

Credit card & mobile operator billing

Paid, ad funded and free apps

Deployment Process

Develop & Debug

Submit& Validate

Certify & Sign

Windows Phone Application Deployment Service

Marketplace

RESOURCES

Good resources

• http://www.andybeaulieu.com• http://www.farseergames.com/blog/• http://blogs.silverarcade.com/silverlight-games-101/• http://forums.silverlight.net/• http://laumania.net/?tag=/game+development• http://expression.microsoft.com/en-us/dd835381.aspx• http://

www.bluerosegames.com/brg/silverlight_game_development.aspx

• http://Silverlightguy.com

Cool games, samples & tuts

• http://silverarcade.com/games/InnoveWare/quakelight• http://dobbschallenge2.com/• http://silverarcade.com/games/ddtmm/vsa• http://

www.mashooo.com/SilverlightGames/Tire_Storm.aspx• http://

dl.dropbox.com/u/2681028/CodeplexData/WriteableBitmapEx/BlitSample/TestPage.html

• http://www.brighthub.com/internet/web-development/articles/14494.aspx

jose@brainsiders.com - @joslat