Network Status Indicator Data Binding to update scores Multiple players in one game LINQ to simplify coding Storyboard controlled animation Async socket code Picture Hunt Silverlight Socket Demo Automatic connection retry About the game

Running the Picture Hunt game demo Simplest way: start the “RunDemo.bat” file It starts the three components of the demo: – the Silverlight Policy Server Go to directory (cd) “SilverlightPolicyServer” Start “Run.bat” – Start the Picture Hunt Game Server Go to directory (cd) “PictureHunt\PictureHuntServer” Start PictureHuntServer.exe – Start the Silverlight game Go to directory (cd) PictureHunt\PictureHunt\Bin\Debug Start PictureHuntTestPage.html

Overall Architecture The server computer has more pieces: 1.The game HTML file served up by a running web server 2.The running game server program 3.A bunch of marked-up images in the right directory 4.The running socket policy server program On the client computers: A running Web browser with the Silverlight game

Programming hint: Common files for clients and servers The Silverlight IDE (Microsoft Visual Web Developers 2010 Express) will copy files into the project directory when you “add existing item” to your Silverlight project That’s not what I wanted! I wanted a single file in both the Server and Game projects. In the end, I edited the.csproj file by hand to reference files in the server project.

Policy Server details Like many web-facing technologies, Silverlight imposed some security restrictions on Sockets. You need to run a Silverlight Policy Server on port 943 (or other ports). The System.Net team has a simple policy server as a code snippet at

Multiple Players Multiplayer games are ideal for sockets: Anyone can click at any time The server can update anyone at any time Http style “request/response” doesn’t work well for these types of problems. It’s the server that has most multiplayer code; each client of course only handles itself

Async Socket Code Connect Read and Write Closing

Connecting var s = new Socket (AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp); var e = new SocketAsyncEventArgs(); e.RemoteEndPoint = new DnsEndPoint(serverName, 4529); e.Completed += OnConnected; s.ConnectAsync(e); Async Socket Code

Writing Picture Hunt makes a list of ArraySegments, and then writes them out with “SendAsync”. The WriteCompleted doesn’t actually do anything for this application var senddata = new List >(); senddata.Add(new ArraySegment (header)); if (data != null) senddata.Add(new ArraySegment (data)); var writeEventArgs = new SocketAsyncEventArgs(); writeEventArgs.Completed += WriteCompleted; writeEventArgs.BufferList = senddata; socket.SendAsync(writeEventArgs); Async Socket Code

Handling message boundaries TCP/IP is a stream protocol: it doesn’t respect your game message boundaries. For example: the game server sends three messages: But the game might get these messages: Why? TCP/IP data doesn’t preserve message boundaries: it’s a stream of data (like a file: you can write 10 bytes and 10 bytes and 10 bytes, and then read 8 bytes and 15 bytes and 7 bytes) Solution: Your program has to track the message boundaries Async Socket Code

Serializing Data over a Network Different people have different styles for serializing data. Picture Hunt has hand-made code for serialization. Each Command that has extra header fields has to implement “InitHeader()” to write them out into a BinaryWriter. Data is read in with the CommandReader class (which also handles message boundaries). CommandReader has to know about every class and every opcode; this is written by hand ‘htonl’ converts host to native format (this lets my program work on any system) Async Socket Code

Closing Close your socket when you’re done: closingSocket.Shutdown(SocketShutdown.Both); closingSocket.Close(); closingSocket = null; Async Socket Code

Network Status Style: Discrete Network Status Picture Hunt uses a Discrete Network Status: a little icon of the network conditions with no text and absolutely no dialog boxes Network Status Indicator The Discrete style is often a good choice. Other choices are Per-task dialog: show multiple activities related to a task (e.g., downloading) User-selected dialog: similar, but is shown only when user asks. Is appropriate when networking isn’t a primary part of the user’s work UI replacement: when offline, switch interface. Is appropriate when the app has no off-line capabilities (which is rare)

Network Status States Unstarted Goes to “Started” when the user clicks “Connected”; program is told to StartNetworkConnection() Started Goes to “OK” if a connection can be made Goes to “FailNl” if a connection cannot be made Ok Goes to “Fail” if a socket read fails to read Fail Sets a timer to switch to “Retry” Retry The program is told to StartNeworkConnection() Goes to “Ok” if the connection works and “Fail” if it does not FailNl Sets a timer to switch into “RetryNl” RetryNl The program is told to StartNetworkConnection() Goes to “Ok” if the connection works and “FailNl” if it does not

Automatic Connection Retry People move their laptop computers a lot more than they used to. Your program has to handle Network Transitions smoothly: Always retry on failures Use the network status (and not an emergency dialog) Transitions are common: the user doesn’t need a big reminder

Adjust the retry times when there’s no connection At start: retry every 2 seconds Then every 15 seconds Later, retry every hour Why? The game doesn’t want to overuse the network. There’s a validation routine to make sure the table of adjustments is reasonable. All this is in NetworkStatus.cs – the GetRetryTime() and the associated RetryTime list and DelayTime class. There is also a validation routine.

And one more thing: Network Transitions You should also detect NetworkAddressChanged and pro- actively set up a new socket. New socket usable? Use it and drop to the old one New socket not usable? Drop it and keep the old one. Just be careful when you’ve got two sockets open at once. The NetworkAddressChanged event is pretty chatty; you’ll need to “de-bounce” it with a small timer. With a discrete network status style, you don’t tell the user that you’re even trying it.

Hints: debugging new connections Quick test (laptop): start with Wi-Fi and no Ethernet and run the game. Then plug in Ethernet, wait five seconds, and turn off your WiFi. The game should already be connected to Ethernet. I made life easier for myself by adding in a “New Network” button for debugging. Every time I clicked it, it would try a new network. I also added a server command to reject all new players – this helps validate that the code is robust. The game should accept the new connection failure and keep on using the old one. Not all new connections work!

LINQ to simplify coding The game demo uses LINQ in several places to make the code easier to write and understand. For example, when the user can asks for a hint for an area to click; the following game server code finds an area to show: Area a = (from area in areas where area.HitBy == null && area.Name == CurrLookFor select area).DefaultIfEmpty(null).FirstOrDefault(); The resulting single Area is now either a good candidate to return, or is null. Reading a LINQ book really helped me get started.

Data Binding to Update Score Data Binding is a way to automatically link your data to a UI element When you update your data, the UI is updated, too! Can work the other way as well (UI  Data)

Data Binding Code public class PlayerScore { public int index { get; set; } public string name { get; set; } public int score { get; set; } } public ObservableCollection playerScores { get; set; }

Data Binding Code (part 2) About that code… 1.Everything needs to be public 2.Everything needs to be a property 3.PlayerScore does not implement INotifyPropertyChange, so only clear+replace will show up (e.g., can’t take an existing score and change it; have to remove all and add back in) I couldn’t have done it without Petzold’s Windows Phone book (free download; got to )

XAML (UI) part of Data Binding

Storyboard Controlled Animation Adding animation was easy and made a big improvement in the game Add items in the XAML; set the TargetName to the thing to animate and the TargetProperty to the property to animate (usually opacity or position) In the game code, call ___Storyboard.Begin() to trigger the animation

Storyboard Controlled Animation Animations include: The title The instructions The player list The “look for” (both new words and when there’s a winner) The winner text MSDN was enough to make it work