Solar Vengeance 6 Released

http://www.siliconcommandergames.com/SVSilverlight/SV6.htm

It took a few months of part time effort to port SV5 to Silverlight, and now we have SV6. There are some decided advantages to the browser based version:

1) You don't need to to download the latest build, that's taken care of automatically.
2) The graphics performance of the Silverlight sprites outperforms the GDI+ based graphics of SV5.

A Silverlight version also poses some challenges that I still need to overcome. Biggest of these is providing a way for people to run a debug version of the app so they can develop and debug their Scenarios and Brains. Once I crack this I will publish the updated Scenario and Brain API's and promote these to developers.

One of the hallmarks of Silicon Commander Games was the extensibility, and I think we've pushed the envelope by providing robust API's so developers can build their own Scenarios (levels) and Brains (computer AI's) that integrate seamlessly into the game. This will continue with SV6!

Another challenge is to try and rebuild the SCG community and get some active players again. I'm hoping this will come naturally when I continue to build up the supporting documentation of the game with strategy guides, examples, etc. If you're reading this now you can help too by logging in and waiting a little bit in the lobby for other people to show up! I look at the logs and see someone like "Z" for example log in, and then 1 minute later log out. Then 5 minutes later someone else does the same thing. I'm guilty of this too some time, but I will try and hang out in the lobby more to catch other players and hopefully get some games logged!!

I've also begun work on converting some of the class libraries for WinWar II over to Silverlight. This includes my tile-based map logical components, and a new Silverlight based TileBasedGameBoard component that can use my MapSet class to render tiles on the map. I'm hoping to port the WinWarII logic engine I created for V5 pretty easily to Silverlight, then build a new UI, much like I did for SV6.

Say no to Verbose XAML with EasyGrid!

EasyGrid is a simple enhancement to the basic Grid layout panel in WPF/Silverlight. The sole purpose of EasyGrid is to eliminate the verbose markup that clutters your XAML when you define Grids with many rows and columns.

EasyGrid provides a "mini-language" that lets you create all of the rows and columns of the grid by simply providing a value to the EasyGrid's Data property.

Before getting into the mini-language specifics, lets look at an example. Say we want to define a Grid that contains 4 columns, the first and last a fixed width, and the middle two variable, and 12 rows. You would wind up with markup something like this:



If you're anything like me, looking at markup like this gives you a headache! The EasyGrid version looks like this:

The EasyGrid Mini-Language

The EasyGrid performs its magic via the Data property, which contains a string that represents all of the rows and columns of the grid. The Data property actually has two modes of operation, a simple mode and a verbose(?!?) mode.

Simple Mode

In the simple mode, you can create a grid with a number of rows and columns that all have the "*" sizing specifier by using this syntax:

Data="CxR"

where C represents the number of desired columns and R represents the number of desired rows.

For example:

Data="12x30"

Verbose Mode

In this mode, you use tokens to specify rows and columns. You can also use the "x" character to represent a number of rows or columns with the same sizing specification.

C - A "C" in the Data string means that the next token(s) will define grid columns.

R - A "R" in the Data string means that the next token(s) will define grid rows.

# - A number token (for example "12" defines a row or column with a fixed size.

#* - A number followed by a * (for example 4*) defines a row or column with a proportional size.

Auto - The "Auto" token defines a row or column with an automatic size.

#x(token) - When there is a #x preceding a token, it means that the row or column will be repeated the specified number of times. For example, C 5x3* creates 5 columns with sizing of 3*.

That's all there is to the EasyGrid. Use it in your projects and "say no to verbose XAML!".

Download the EasyGrid component.

Solar Vengeance 6 Lobby

I completed the multiplayer lobby interface for Solar Vengeance 6 in Silverlight. Click the link below to log into the new lobby. You can set your profile, including a Glyph image, and chat with other users in the lobby.

Implementing the lobby in the app was easy once my PrismServer components were ported to Silverlight. The PrismConnection component provides an easy way to connect a Silverlight app to a running PrismServer.

In SV6 I create the PrismConnection component in code, but you could also create it in your XAML since it descends from DependencyObject. You'd just need to be sure to place it within a ContentControl, because Silverlight panels can't take DependencyObjects directly. When defined in XAML, you can set the properties like Host, Port, and SubjectName in your XAML, as well as hook up event handlers.

In my custom application class I declare a private variable to hold the PrismConnection object, and a public property to provide access to it in other pages. In Application StartUp event, I create the instance:

_prism = new PrismConnection("1.2.3.4", 4502, false);
_prism.SubjectName = "SV6";

You'd replace "1.2.3.4" with the host name or IP address where your PrismServer is running.

To connect, call the Connect method, which will eventually fire either the ConnectSuccessful or ConnectFailed events.

In your ConnectSuccessful event handler you can call either Login (for existing users) or LoginNew (for new users). Login takes 2 parameters, a user name and a password. LoginNew takes 1 parameter, an instance of a PrismUser object that represents the user information for the new user.

These methods will eventually fire either the LoginOK or the LoginFailed events, which you can handle accordingly.

The PrismUser class has some helper methods that make it easy to store and retrieve Glyph images for users. The SV6 Lobby lets you select a local image file on your computer to represent you as your Glyph. PrismUser encodes this image into a Base64 string, and saves it in the PrismUser object, in one of the "Detail" fields. PrismUser GetDetail/SetDetail methods let you store arbitrary information with a PrismUser and have it saved on the server.

When a user logs back in, its encoded Glyph string is decoded and converted back into an ImageSource which is then displayed next to them in the Lobby.

I use the PrismUser GetDetail/SetDetail to store other game-specific information about a user, such as their rank and rating.

Handling chat in the Lobby is virtually effortless thanks to PrismConnection doing all of the dirty work. To send a line of chat to other users, simply call the SendChat method. A ChatRecieved event is triggered when an incoming chat message is received. The EventArgs class provides you the PrismUser who sent the chat as well as the line of text itself.

Now that the Lobby is completed I can move onto converting the actual game mechanics!

Solar Vengeance 6 Development Build - with Lobby!

ChatNDraw Silverlight Demo

My ChatNDraw Silverlight demo is completed. ChatNDraw is a Silverlight-based chat program that lets you create new chat rooms, chat with others who happen to be logged in, and draw in different colors using a shared blackboard.

ChatNDraw was created using my PrismServer component suite that I just converted to WPF/Silverlight from WinForms (.NET 2.0). I plan to release the source for PrismServer as soon as I can complete the documentation.

ChatNDraw Demo

Rebirth of PrismServer - for Silverlight!

I'm almost finished with the Silverlight/WPF port of PrismServer. I have a live Chat server running now on the following page. I'm still working on the "Draw" part of the "ChatNDraw" Silverlight app, but for now you can help me test the server by logging in and "Chatting"!

Note - if you create an account here, it will become the eventual account you'll use for all SCG Silverlight games.

I wanted to get this news out to allow for some early testing. I do plan on creating a post describing the new PrismServer in more detail, and possibly a revised CodeProject article. For now, my fingers are falling off of my hands so I need a break from coding ;)

http://www.siliconcommandergames.com/ChatNDraw/TestPage.html

Death of TurboSprite

Earlier I began porting my object-oriented TurboSprite framework to WPF. This was relatively easy because WPF had the OnRender event and the DrawingContext that corresponds to WinForms Paint/Graphics combo.


When I decided to target Silverlight as the next platform for Silicon Commander Games development, one of the first hurdles was the fact that it did not expose the OnRender/DrawingContext feature of WPF. This forced me to use the animation system(s) built into Silverlight/WPF and abandon further development of TurboSprite.
One of the benefits of encapsulating animation in TurboSprite was its clean, object-oriented design. I could create animatable sprite classes that were self-contained and re-usable.


In Silverlight I am following the same philosphy of design, but using the animation model(s) provided by the framework. Note the plural!


Model 1 - Property Based Animation


This model works by creating Storyboard objects, and then adding animations (like DoubleAnimation, ColorAnimation, etc.) to its Children. You call Begin() to start animating, and can handle the Complete event when the animation is finished. You provide a Duration that controls how long the animation lasts. The Storyboard can have multiple animations in its Children collection. Each animation targets a specific property of a specific object.


I use this method when I need to move an object from one cell to another on the game grid. To simplify the model, I created a base class called SquareGridGameBoard that derives from UserControl. SquareGridGameBoard allows you to set the number of cells that compose the game board, as well as the width and height of each cell. It also provides a visual cell cursor, and a selection band that facilitates selecting a range of cells. SquareGridGameBoard also contains helper methods that make it easy to position, and move, an element on the game board.


The MoveElement helper method encapsulates the plumbing of creating a Storyboard, the animations, and handling the completed event. Here's the code:



//Move an element to another cell
public void MoveElement(UIElement element, int newX, int newY, Duration duration)
{
//Create Storyboard, and remember the element it references
Storyboard sb = new Storyboard();
sb.Completed += MoveCompleted;
_storyboardTargets[sb] = element;


//Animate X coordinate
DoubleAnimation animX = new DoubleAnimation();
animX.To = newX * CellWidth + _cellWidthHalf;
animX.Duration = duration;
sb.Children.Add(animX);
Storyboard.SetTarget(animX, element);
Storyboard.SetTargetProperty(animX, new PropertyPath("(Canvas.Left)"));


//Animate Y coordinate
DoubleAnimation animY = new DoubleAnimation();
animY.To = newY * CellHeight + _cellHeightHalf;
animY.Duration = duration;
sb.Children.Add(animY);
Storyboard.SetTarget(animY, element);
Storyboard.SetTargetProperty(animY, new PropertyPath("(Canvas.Top)"));
sb.Begin();
}


//Animation finished
private void MoveCompleted(object sender, EventArgs e)
{
//what element was being moved?
Storyboard sb = sender as Storyboard;
UIElement element = _storyboardTargets[sb];
_storyboardTargets.Remove(sb);


//push values into properties after animation changes them
double x = Canvas.GetLeft(element);
double y = Canvas.GetTop(element);
sb.Stop();
Canvas.SetLeft(element, x);
Canvas.SetTop(element, y);
}


You can see this in action in the current demo as of Build 7. When you click on a cell of the game map, it creates a random StarShip, but also moves a StarSystem to that location, using the MoveElement method described above.


Model 2 - Frame-Based Animation


Another animation option that Silverlight provides is enabled by creating an event handler for the static CompositionTarget.Rendering event. When you do this, Silverlight calls your handler on each frame of animation. The default frame rate is 60 FPS, but this is adjustable by adding the "maxFramerate" parameter in your HTML.


I use this method to cycle the colors of an array of 10 SolidColorBrushes that draw the Shields around StarSystems. The Ellipse elements that compose the Shields have their Stroke properties set to one of the brushes in this static array. When the color of one of the brushes changes, it impacts all of the Shield Ellipses that used that brush in their Strokes.


You can see the Shield color cycling in action in Build 7 of the demo.


http://www.siliconcommandergames.com/SVSilverlight/TestPage.html


Sometimes it makes sense to use property-based animations, but sometimes frame-rate animations are a more logical choice. There's no need to sacrifice, use both models, and select the one that makes the most sense for each particular animation task in your Silverlight app!

Silverlight Nebula

Today I cracked the problem of how to dynamically generate a bitmap that represents the background of the game map for Solar Vengeance Silverlight. Silverlight does not provide out of the box any class or method that allows you to simply create an offscreen bitmap and render its pixels using drawing methods. In Silverlight 3, this will be addressed by the inclusion of the WriteableBitmap class, but I wanted to move forward in Silverlight 2 and wait until 3 is released before switching to that version for my development.

Fortunately I was not the only one who was having this problem, and I came upon Ian Griffith's weblog posting here (http://www.interact-sw.co.uk/iangblog/2008/11/07/silverlight-writeable-bitmap) where he describes his PngGenerator class. This class suited my needs perfectly, and it looks like I will be able to easily swap in the WriteableBitmap when Silverlight 3 is released.

Now, here's the process flow of my nice new Nebula image in Solar Vengeance Silverlight,

• I call the BuildScenario method of a Scenario-derived class (in this case Classic).


• Classic creates some random Nebula in the SVGame object.


• I create a PngGenerator of 100x100 pixels in size, representing the full number of cells in the map grid.


• For each cell that contains a Nebula, I set the pixel to a bluish color, otherwise set it to black.


• I make the image the source for an Image object and add this to the Canvas of the game board, sizing it to the full dimensions of the board (3,500 x 3,500) and setting its Stretch property to Stretch.

I was expecting to see sharp edges in the blown up image, but was surprised and happy to see the blended edges that Silverlight produced. Another hurlde overcome (this time thanks to Ian) in my quest to port Solar Vengeance to Silverlight.

See the latest demo build here:

C:\Silicon Commander\NET3.5\SV.Silverlight\SCG.SolarVengeance\Bin\Debug\TestPage.html