Silverlight Games - Test 1

Above is Smalltalk/DLR running in a browser with Silverlight 1.1.

• Download Silverlight 1.1 runtime
• Open “Virtual Desktop” test in your browser

Above is a simple game created in a few minutes using the Designer. To run it, open a Designer window and select:

• Server->Load->game1.des
• Prev->Engine->Run
• Press the space bar to release “bombs”

At the bottom is a target sprite which has been given a timeline that starts at the left then moves to the right and which also is set to automatically reverse direction.

At the top is the attacker sprite which has been given a timeline that starts at the right then moves to the left and which also automatically reverses direction. This sprite is also designated as a “shooter” which means that it will release objects when a key is pressed.

There are still several details to be worked out:

• collisions for compound objects aren’t defined yet, so the “bombs” pass right through the car
• when “bombs” reach the floor, they should probably disappear or explode - for now, they bounce
• there is no way yet of keeping score

The positive aspects of this game are:

• it was totally created in the browser with no outside tools
• instant deployment - as soon as it is saved on the server, anyone in the world with a Silverlight 1.1 enabled browser can play it

All of the game parameters are stored on the server in a JSON dictionary.

The next release of Silverlight 1.1 will likely support sockets, which means that browser-to-browser communcations will become possible. Then, by exchanging JSON-encoded data in a similar manner, we should be able to build realtime user-driven games or other types of applications.

Online Silverlight Application Development

Silverlight is a powerful new technology whose market is yet to be defined.

The development model promoted by Microsoft centers around the use of desktop tools - Visual Studio and Expression Designer. These are good tools and are ideal for teams of professional developers. However, they are far too complex for people who want to quickly create and deploy simple applications - in the same way that MS Word is not the best tool (for most people) for writing email or Usenet posts.

Making Silverlight development simple and accessible will be a major factor in its widespread acceptance. My guess is that most Silverlight applications will be developed online in an environment similar to Wikis or blogs:

• libraries of “pre-built” components
• very simple editing tools
• very simple scripting
• “instant” publication

 I will continue to focus on browser-based tools for the creation of games and shared applications using a visual scripting capability similar to MIT’s “Scratch”.

Animation Timelines and Physics Engine

Above is Smalltalk/DLR running in a browser with Silverlight 1.1.

• Download Silverlight 1.1 runtime
• Open “Virtual Desktop” test in your browser

There is now a “Physics Engine” included in the Smalltalk/DLR libraries. It has support for:

• gravity
• collision resolution with transfer of momentum
• elastic connections
• friction
• rotational transfer of momentum
• “fixed” or movable components

I am in the process of adding physics engine support to the Designer. The image at the top of the post shows a circle sprite bouncing on top of a “fixed” rectangle when the gravity field is turned on.

Another kind of animation involves “timelines” in which elements change properties such as location, color, size, rotation, or opacity over a fixed period of time - without regards to physical constraints.

Animations in Microsoft’s Expression design tool are built around the concept of timelines. The Smalltalk/DLR Designer supports both physical and timeline animation.

Creating Animation Objects

Above is Smalltalk/DLR running in a browser with Silverlight 1.1.

• Download Silverlight 1.1 runtime
• Open “Virtual Desktop” test in your browser

The Designer is now able to create animation objects.

In the Designer “Animation” tab:

• select the element to be animated
• drag it to the start position and press “Begin”
• drag it to the end position and press “End”
• press “Run” to test
• selected elements will jump to their start and end positions by pressing ctrl-Begin and ctrl-End

Animated objects can be stored on the server by selecting “Save” on the “Server” tab.

When I add the StoryBoard editor, these objects will be keyed to time frames to build a cohesive animation narrative.

Silverlight Scaling and Rotation

Above is Smalltalk/DLR running in a browser with Silverlight 1.1.

• Download Silverlight 1.1 runtime
• Open “Virtual Desktop” test in your browser

Here are some of the latest graphics tests. The Designer now supports scaling and rotation of elements and groups of elements.

These drawings were created in a Firefox browser and are stored in JSON format on a standard PHP/MySQL/Unix server.

Upcoming releases will include:

• color selection
• animation timelines
• gravity and collisions
• multi-user shared desktops

And, of course, some games very soon…

Designer Sizing Handles

Above is Smalltalk/DLR running in a browser with Silverlight 1.1.

• Download Silverlight 1.1 runtime
• Open “Virtual Desktop” test in your browser

The Designer now provides sizing handles for changing the width and height of drawings. It is possible to create some very basic game elements and store them on the server.

Tomorrow, I will start adding transforms to the drawings:

• Translate tranforms for changing position
• Rotate transforms for rotation
• Scaling transforms for changing size

Transforms can be animated and, once transform support has been added to the Designer, I will be able to build basic “timelines” for animated games.

Storing Drawings on a Server

Above is Smalltalk/DLR running in a browser with Silverlight 1.1.

• Download Silverlight 1.1 runtime
• Open “Virtual Desktop” test in your browser

Server storage for Designer drawings is now functional:

• Save - opens a prompt window for a name and then stores the contents of the Designer to the server
• Load - queries the server and then opens a selection list of available drawings to be loaded

Over the next couple of days, my focus will be on improving the Designer.

JSON Serialization in Silverlight

Above is Smalltalk/DLR running in a browser with Silverlight 1.1.

• Download Silverlight 1.1 runtime
• Open “Virtual Desktop” test in your browser

Two more buttons have been added to the Designer menu:

• Save - serializes the designer contents to a JSON formatted string, stores the string internally, and writes it to the Transcript window.
• Load - recreates the designer contents from an internally stored JSON string.

You can test this by using the Designer to create a drawing and then clicking the “Save” button. Delete the drawing (or open another Designer window) and click “Load” to restore the drawing.

For the moment, this is set up as an internal test. Tomorrow, I will add the server components as well and, by next week, there should be a test library of pre-built diagrams that can be loaded from the main site at http://vistascript.net.

Silverlight contains a XamlReader class but not XamlWriter; so, while you can read Xaml (produced by Expression or Visual Studio), you cannot create Xaml.

However, Silverlight does have a good JSON serializer (JavaScriptSerializer) which can both serialize and deserialize to JSON format. I have built JSON support into all Smalltalk/DLR graphical objects.

An advantage of using JSON format is that other data can easily be stored along with the graphical object. For example, a game avatar could store lists of powers, friends, or strategies.

Silverlight is going to be an excellent gaming platform.

Silverlight on Linux

A sample screenshot from the Mono project.

Miguel de Icaza and the Mono team are doing a fantastic job of implementing Silverlight on Linux and will be showing their latest work today at ReMix07 in Paris.

Here is how Miguel describes their “Moonlight” project:

The past 21 days have been some of the most intense hacking days that I have ever had and the same goes for my team that worked 12 to 16 hours per day every single day –including weekends– to implement Silverlight for Linux in record time. We call this effort Moonlight.

Needless to say, we believe that Silverlight is a fantastic development platform, and its .NET-based version is incredibly interesting and as Linux/Unix users we wanted to both get access to content produced with it and to use Linux as our developer platform for Silverlight-powered web sites.

It is less than eight weeks since Silverlight was released. The fact that it has already been (mostly) implemented on Linux is incredible.

Designer Animation Support

Above is Smalltalk/DLR running in a browser with Silverlight 1.1.

• Download Silverlight 1.1 runtime
• Open “Virtual Desktop” test in your browser

There is now simple animated rotation  support in the Designer.

Selecting the “Rotate” button will cause any selected elements to start rotating. They will continue to rotate until the “Stop” button is selected.

The Designer will soon have support for all of the following animation types.:

• position
• size
• scale
• opacity
• color
• rotation

Animations can also be nested - an animated object can contain other animated objects within it.

For the next couple of days, I will be concentrating on storing Designer structures on a website.