You had me at "Hello World!" : Games

Exposed: 5 methods to create game loop: which is the best?

nikola — Wed, 19 Aug 2009 18:57:00 GMT

Edit: fixed broken links

What is the best method to create a game loop?

I created a small experiment comparing 5 different animation methods.

The results, along with code samples and test screenshots are summarized in this document:

5 Game Loops in Silverlight: Which is the best? (PDF)

5 Game Loops in Silverlight: Which is the best? (DOCX)

Sample test app (requires reading the document above to understand the setup): http://nokola.com/gamelooptest

This is part of the test app startup screen before measurements begin:

Contents of the doc:
Welcome
What Are Some Things Important For A Game?
Why Are We Discussing Game Loops?
Methods
Test Setup
Test Results
MaxFrameRate Unset (Defaults to 60):
Analysis of the 60 FPS default case:
MaxFrameRate=300:
Analysis of the 300 FPS case:
Additional Tips
Quick Comparison Chart
Summary & Conclusion

I hope this will shed some light on Silverlight game loop that several people on this blog asked so far!

Please let me know what you think!

Large Star Field - Take 2, how to make it look "deep" and more reallistic

nikola — Tue, 11 Aug 2009 07:29:00 GMT

Check out the new starfield and compare it with the old one.

Edit: thanks to fashai for pointing out an issue, I updated the code again - now the stars no longer form straight lines if the Silverlight control was invisible for some time. Also updated the speed algorithm, to be more close-to-nature :)

Source and demo below show the latest changes.

Some notes on how it is made below the stars :)

Source code: http://nokola.com/sources/StarField.zip

Do you like the new one or the old one better? Please comment

I made 4 improvements to the star field:

· First I fixed the star brightness to actually be from 0 to 1 (initially it was in the range 0..256).

· If you think about it, the further you look, the more stars you see. In the previous example, the further you look, the same number of stars you see. This takes a away a lot of the realism and feeling of "depth" to the field.

To fix this, I chose a 60 degrees viewing angle, then divided my "3d" space into 8 planes parallel to the screen (near to far plane).

Then, I compute the number of stars in each plane, based on the previous plane. The first plane contains 4 stars (chosen arbitrarily).

· The other fix is star speed – the further back stars are, the slower they appear to move. Fixed it – nice J

· Next one is star brightness – stars get dimmer based on the square of the distance from the viewer, not linearly

I also fixed a few bugs, and added some “magic” constants here and there. For example, the dimmest star is has alpha of 0.3…because I don’t want to waste resources on stars that are not noticeable on screen.

Large Star Field in Silverlight - Taste of Game, Part 2

nikola — Mon, 10 Aug 2009 18:54:00 GMT

Edit2: After posting this, I made a significant improvement on the star field... will post it tonight. In the new version there's more sense of depth not just "dots" like the one below. The star speed and brightness now is calculated better (based on square of the distance and correct view angles). See the next update tonight...will look a lot better :)

A good space game can't go without stars :)

Source code: http://nokola.com/sources/StarFieldOld.zip (the new one is in newer post)

Check out the Silverlight star field below, its intentionally large-size so that I can finally appreciate the night sky :)

Edit: I'm stupid...Brightness should be in a range 0..1 (or 0..2 or something like that)...please add / 100.0 to the Brightness (star.Brightness = Globals.Random.Next(256) / 100.0;) when you download the source. I'll update the effect when I get back home tonight.

It looks 1000 times cooler with the correct opacity...

Notice the dimmer, slow moving stars in the background. Notice the CPU usage. It's 2-3% 1080P here , if it is higher on your side, please ping me!

Also, since I made the background, you are free to use it for your purposes (credit me or not - I don't care)!

Below the Star field read a few notes on how its built.

this is the Old version of the star field.

Stars are represented with Ellipses on a Canvas. Each star has a X, Y, and Z (distance) position.

The X and Y are just normal screen coords (e.g. 0..1024 for X), depending on the control/screen size. The Z is in the range 0...1.

1 means "farthest". Z determines how fast the star moves and the size of the Ellipse.

Each star has a Brightness as well - approx 0..2. You can probably see why I chose Z to be from 0..1 now - because Z * Brightness = Star control's Opacity. It just makes things easier...

On every frame I move the ellipses - see the code.

A Taste of What's To Come - My New Game Concept Art

nikola — Fri, 17 Jul 2009 09:42:00 GMT

Here...a quick bite from the new game coming out...

Silverlight 3, full screen,

Got an idea for a name?

Silverlight 3 Speed Optimizations - The Ultimate Game Loop!

nikola — Mon, 13 Jul 2009 05:28:00 GMT

Edit: this post is now replaced by the more in-depth view here: http://blogs.msdn.com/nikola/archive/2009/08/19/exposed-5-methods-to-create-game-loop-which-is-the-best.aspx

Nice!

I just ported my Shock game to Silverlight 3.

Getting the graphics to work as before (and better), took me about an hour reading through docs. But the changes took about 5 minutes.

I'll just list them here for you in case you're building one of the next generation Silvelight games:

1. In your Silverlight Control's .HTML or .aspx file set EnableGPUAcceleration="true". This allows Silverilght to use the GPU for controls that you tell it to (see below).

Also set MaxFrameRate="1000". I’ll explain why we set the frame rate to such a high value in a bit.

Here’s how Shock’s Silverlight control looks after the change:

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/Shock.xap" MinimumVersion="3.0" Width="640px" Height="480px" EnableGPUAcceleration="true" MaxFrameRate="1000"/>

2. Find elements in your application that move, scale, rotate or blend (use transparency).

For each of these elements turn on hardware acceleration from XAML by setting CacheMode="BitmapCache" like this example:

<Image x:Name="imgBolt" CacheMode="BitmapCache"

VerticalAlignment="Bottom"

HorizontalAlignment="Left"

Opacity="0"

Source="Shock/Images/Explosions/bolt.png"

Height="304"

Stretch="Uniform"

Width="590"

Margin="0,0,0,64"

IsHitTestVisible="False">

<Image.Clip>

<RectangleGeometry x:Name="boltClipRect"

Rect="0,0,590,10000"></RectangleGeometry>

</Image.Clip>

</Image>

This really helps (in my case CPU down from 10% to < 3%)! J I enabled hardware acceleration for the balls and for the lightning bolt in Shock. Now the animations and redraws look smoother.

3. If your game loop uses a timer, storyboard, or thread, change it to use CompositionTarget.Rendering instead. The reason is that Silverlight 3 can render animations more smoothly than Silverlight 2.

Also, your timer will typically be called every 15 msec now (60 FPS). In Shock, the balls move through Storyboard-s. I used to hit-test the balls with bricks, paddle, and screen 60 times per second. Now I see that sometimes animations will be drawn faster than this, and in some cases I could notice balls being drawn on top of bricks, or the paddle. With faster animations and better runtime, the effect is easier to notice.

This is the reason why I wanted to recalculate the hit testing and update animations faster. The easiest way to do this in Silverlight today is by using CompositionTarget.Rendering and setting MaxFrameRate to a high number (1000 is pretty good, although 200 generates almost the same results already). I used MaxFrameRate=”1000” in conjuction with CompositionTarget.Rendering to achieve smoother animations in Shock.

That’s for today! Hope you liked it!

I’m trying to stay away from posting yet-another-“Silverlight 3 is released”-post and listing all the benefits to get a temporary boost in reads. Instead I hope my own findings will bring you unique value and enjoyment developing Silverlight applications!

If you’re still interested in what’s new in SL 3, this is the official list

Silverlight Game Competition - $5000 prize

nikola — Mon, 23 Feb 2009 07:15:00 GMT

Submission deadline is April 30, 2009

Check it out:

http://www.serverquestcontest.com/

Too bad I can't participate (I'm not eligible because I'm Microsoft employee)

Whoever reads this, please do your best! Thank you! :)

I'll still be doing my own game thingie in the meantime, even without a chance to win $5000

Anatomy of a Silverlight Game: Avoid Common Mistakes When Building Online Games

nikola — Thu, 05 Feb 2009 11:04:00 GMT

Last week I created a document that incorporates my experiences developing the Shock Silverlight online game so far.

The document discusses the basics of online games in Silverlight and has a lot of practical examples (code) and a working project that you can use to build your own game.

Don't make the mistakes I did! Happy coding!

Open Document: Anatomy of a Silverlight Game.docx

Download Source Code Project

Play Sample Game

Here are the abstract and contents of the doc:

Abstract:

Typical online games have a start screen, levels, storyline, transitions, high scores, chat, and other features that can take significant amount of time to develop.

There are challenges when building online games, such as full screen support and scaling; speed optimization; animations; real-time calculations.

Learn how to develop compelling Silverlight games faster, by using a base framework for the common game elements outlined above.

Contents:

1. Introduction: Why Care About the “Details”?

2. Components of an Online Game

3. Screen Layout