Fast Tile Brush in Silverlight, And Easiest Way to Shader Effects

Dec 22, 2009

Here is one monster, tiled as 6 monsters down here:

This is actually 1 monster, tiled twice horizontally and 3 times vertically using a Silverlght Tile brush shader effect.

Download source code

I'm not 100% sure if this is the fastest way, but it's definitely worth it (fast). There are 2 other possible ways to do fast tiling:

  1. Do it manually or "hardcoded" - if your tile will never change, just do it in any image editor and then display the tiled result using an Image tag
  2. Display several images next to each other - relatively harder, but might end up being faster than the pixel shader (this is just a speculation on my side since I haven't tested it yet, but it is worth a try). Image-s can be rendered on the GPU, if you enable BitmapCache and GPU acceleration in Silverlight, while the pixel shaders are currently (in Silverlight 3) calculated on the CPU.

The pixel shader code:

// Amount of tiling in the X and Y direction
float2 TileCount : register(C0);
sampler2D implicitInput : register(s0);

float4 main(float2 uv : TEXCOORD) : COLOR
{
 return tex2D(implicitInput, frac(uv.xy * TileCount.xy));
}

Sample usage:

<Image Source="http://nokola.com/clientbin/images/icons/games.png">
  <Image.Effect>     
    <local:TileEffect TileCount="2,3" />   
  </Image.Effect> 
</Image>

And I also mentioned the easiest way to shader effects.

Currently I believe you can start almost immediately with Shazzam: http://shazzam-tool.com/.

It's a tool you can use to test out your shader effects, and will create the required Silverlight or WPF code-behind for you.

I know there are other Tile brushes for Silverlight out there, but I haven't found a simple pixel shader (with one instruction and frac()). The pixel shaders I found usually use 2 variables - one for x-tiling, one for y-tiling. Since Pixel shaders, even on the CPU, supposedly favour SIMD (single instruction, multiple data), less instructions should mean faster performance (depends on the shader compiler too).

What can you use it for?

In a side-scroller or many other types of games, tiling textures is crucial - e.g. brick wall, metal, and other things.

  

Appeal for Donations - Keep Games Going, Not Ads!

Dec 20, 2009

Please take some time to read this appeal completely and eventually donate.

I don't like ads, and there's high possibility that you don't too!

At the same time having an ad-sponsored web site means that ad programs "share" some of people's time (and time is money) spent on my site.

Should I force anyone of the thousands people who view this site to pay for ads? No, I shouldn't and that's one reason to make today's appeal.

The main reason is that I found some very cool music, graphics and so on but they are paid. I want to make 2 more games (space shooter and jump-and-run - you'll see the "drafts" soon), but I "lack the monetary commitment" :)

You can see seemingly random parts of the games and level editors here, here, here (to be expanded in level editor) and here. You can also see, and download concept graphics here and here.

Or, you can see a complete game that topped the community charts on silverlight.net for weeks in 2008 (sans music, since I have to buy it now), here: http://nokola.com/shock/

$2 buys an image, and $15 is the price of a typical soundtrack.

Please click here to read the full appeal and donate today!.

Thanks!

  

Glass Command Prompt in Windows 7

Dec 18, 2009

Everybody needs some glass in their life (or was it love? Smile) Anyway, here's a small project I did today out of love for glassy things.

This one is in pure C++, a completely glassy command prompt:

Source code: Glassy.zip (34.05 kb)

Usage

  1. Download the source Glassy.zip (34.05 kb) and run Glassy\Debug\Glassy.exe, or compile and run. Run it as Administrator (right-click the .exe, Run as Administrator)
  2. Open command prompt and enjoy the glass! 

Important Notes

  • The source code requires Visual Studio 2010 Beta2 - free download. Or, you can port it back manually to Visual Studio 2008
  • This project works on 32-bit executables only. If you're running on a 64-bit system, make sure to start C:\Windows\SysWOW64\cmd.exe, instead of your "other" cmd.exe 
  • The project will show only in task manager (no visible window). If you want to close it, open Task Manager, and end the Glassy.exe process

How is it made?

The application hooks into the shell and monitors all processed being created. Once it sees "cmd.exe", it enables the glass. It takes only 5 MB or RAM.

  1. Hook shell messages using RegisterWindowMessage(L"SHELLHOOK");
  2. Register your window with RegisterShellHookWindow(hWnd)
  3. Process the HSHELL_WINDOWCREATED message
  4. If you find the process being created to be "cmd.exe" (the command prompt), enable blur and extend it into the client area using DwmEnableBlurBehindWindow and DwmExtendFrameIntoClientArea

You're done! Also, you may try enabling transparent background for other applications as well, but I found it works best for cmd.exe

Just a little rest from WPF/Silverlight :)

Hope you like it! After all, what is life without love glass? Please comment!

  

Adorners in Silverlight - Move, Size, Rotate, Custom Mouse Cursor

Dec 13, 2009

This adorner took me few days to get right!

Edit Dec, 15: Andrej Tozon created an updated source supporting Behaviours (and drag-drop without code in Blend). Here's a link to his version. Thanks Andrej!

This is work in progress, but the base functionality is there and stable!

Download source code

View Sample

 

The adorner currently has the following features:

  • Shows custom mouse cursors that get rotated and aligned to the object being rotated/sized in realtime. The cursors are Path elements, so this makes the cursor rotation possible. To see the effect in action, try rotating a window and then sizing: the size cursor is always perpendicular to the sizing edges.
  • Move. It also does click detection on activation - so that you can click a non-adorned object and immediately start dragging.
  • Two resize modes: center-preserving and edge-preserving (currently set via private bool property).
  • Rotate: hover outside any corner with the mouse to see the rotating adorner
  • Extension panel: allows to add additional adorner controls (e.g. "send backwards" icon on top of adorner). This is currently private, but will become properly exposed in later versions
  • The element being adorned can choose any algorithm to rotate/move itself (e.g. use TranslateTransform vs Canvas.Left and Canvas.Top). The functionality with the element being adorned is loosely coupled with the adorner through a simple IAdornedOject interface.
  • Nice glass border (from http://www.sixin.nl/antoni-dol-blog/09-11-15/Silverlight_Style_GlassBorderStyle.aspx)

Turns out, properly doing rotation, translation and all those adorner-specific things, wasn't easy for me...in fact it took me quite a bit of time! I'm glad it's done for now! :)

Here is a quick extract of the source and how to use the interfaces:

     public interface IAdornedObject
    {
        double Angle { get; set; }
        double X { get; set; }
        double Y { get; set; }
        double Width { get; set; }
        double Height { get; set; }
    }

Usage is straight-forward:

Adorner adorner = new Adorner();
AdornedObject item = new AdornedObject(testImage);
adorner.SetAdornedObject(item);
panelDisplay.Children.Add(adorner);

To avoid hassles with Thumbs moving around, the core of the move/size/rotate code is in thumb_MouseMove() - giving it nice absolute mouse coordinates!

What do you think this adorner?

  

Super Cool Silverlight Game (Not Mine) + Source

Dec 10, 2009

This is mind blowing!!

A desktop-like RPG Chinese game in Silverlight: http://silverfuture.cn/ 

It's 10.7 MB but worth the wait! It's in Chinese.

I'm sure in future versions it can be much less (e.g. Shock is 17 MB, but 680KB in order to play with the rest being downloaded as you play)

And!! The source code is here: http://code.msdn.microsoft.com/QXGameEngine

Some notable things (other than the graphics, implementation and overall coolness):

1. The map is made of PNG's sized 400x300, it is pre-drawn. The big level, looks quite nice and takes 144 PNGs. Size is 1.75MB! Not bad... This approach looks quite feasible :)

2. Effects and animation are done with separate images. You could also do it with one image and clipping regions..I think it might be faster with one image if BitmapCache is enabled

Edit: last but not least, this game is moderately light on the CPU. Even better, from the source code it doesn't seem to be using BitmapCache!!! Which is great news - it can probably be even lighter!

Overall pretty cool!!!

  

Realtime Bump Mapping in Silverlight

Dec 6, 2009

Ah yes! Bump mapping is an effect that makes "plain" textures - such as stone wall, appear bumpy under a light.

Even for a 2D game, bump mapping has a lot of uses. For example, if you're building a space shooter, it would be 10000 times cooler if lights from explosions illuminate the ship, showing it's ridged surfaces.

I've seen the effect used in games in the main menu as well, where the light of the cursor illuminated a rough surface. This is what we're doing today:

Download Source Code

Notice how the light reflects properly off the bumpy surface as you move the mouse around.

I haven't optimized the effect (just a tiny bit Embarassed), but it still runs at 1024x768, with 3 lights on 1 CPU thread. You can add more (e.g with images of lightbugs) if you'd like or take it full screen - I think it can handle it!

I found a really good old tutorial on bump mapping while digging through my files today. It's from a person named Sqrt(-1) and unfortunately I didn't find his current website to point you there.

Anyway, here's another website that shows how to do this effect: http://tfpsly.free.fr/Docs/TomHammersley/bumpmap.htm

In my implementation the effect of the lights is limited to twice their radius, which pretty much gives the same effect as if you don't limit it. This reduces the effect's complexity to O(L1+L2+...LN) where Lx is the surface area of each light.

That's why you can scale large, especially with smaller lights. 

Edit: One possible optimization is to pre-calculate the normals for each x,y - this doubles the memory size for the bitmap but saves a lot of computations!

Hope you like it! Please comment!

  

OpenID Login for ASP.NET

Dec 2, 2009

And, eventually, Silverlight :)

Here is the "hello world" OpenID login using DotNetOpenAuth.

If you don't know what's OpenID, it's a way to use your existing Google, Yahoo, AOL, Blogger and many more credentials (eventually Live too), to login to an OpenID website.

The source code allows you to login using Google, Yahoo, MyOpenID, or other provider and returns a state containing a friendly name and database unique ID of the user that is authenticated!

Download source code

Screenshot of above login sample:

I like very much StackOverflow's login interface, so decided to implement something that looks like it (a bit cleaner)

 

    

Keep Track Of Links Using RSS

Nov 30, 2009

Imagine having all your links whenever you go available on your browser bar, without having to install any custom software like a toolbar.

Imagine having a way for people that share your interests to access your links with the same ease and edit them in-place.

Imagine going to a new pc and populating your links at your browser with 2 or 3 clicks, without installing software.

Is it possible? Yes it is! Read on, and then subscribe to my links if you wish!

I spent lot of time in the past trying to find a place to put my links into. The problems are:

  • keeping favourites around is hard (OS reinstall, work vs home machines, etc)
  • People with similar interests as mine, cannot contribute to "my" links...then I can miss quite a bit

So I decided to keep my links online. But keeping them online means I have to go to a site, then click the link...it's too much

Then it came to me: RSS link syndication! It allows a nice drop-down-like menu that keeps track of changes and so on automatically.

Please subscribe to my links which point to resources and such. 

These are the steps for Internet Explorer 8:

 

  •  Enjoy your new drop-down, auto-updateable, relevant (hopefully, if you have similar interests to me) links!

 

The links are categorized and also show if they are Free (F), Paid ($), for Commercial (©) or Personal (P) use.

Please make sure to contribute your own links at http://nokola.com/links!

So if you want to remind yourself of that free-for-commercial-use graphics site you browsed last month, you can!

Please comment and leave feedback!

 

Silverlight 4 Improvements for Gaming

Nov 18, 2009

Yes! Silverlight 4 Beta is here! And it comes with quite a few improvements, mostly LOB, but there are some cool things for game developers as well!

The full list of Silverlight 4 features is here. Also check http://video.microsoftpdc.com/ - the keynote at 1:47:09, showing a cool Facebook app (1:47:56).

Here is a quick overview of some of the new features that I think will improve gaming in Silverlght 4:

Faster

Silverlight 4 has better performance than Silverlight 3. I think that says it all :) The keynote at PDC says "2 times faster".

Full Keyboard Access in Full Screen

Yes! Finally we can have a fullscreen Silverlight game have all cool controls, potions, and whatever else you may want to use the keyboard for.

This feature requires trusted application, so the user will get a security prompt when you try to activate it from within your code.

Right-Click Mouse Events

Another great feature for games that are mostly mouse controlled. For example, right-click and drag can be used to rotate the screen (like in Heroes in Might and Magic 5) or fire a missile.

Video and Sample Code: Right-click Mouse Events

Mouse Wheel Events

Good for supercharding a car engine, or just plain navigating an interface :) You could do this with some code behind in Silverlight 3, but it's much nicer now. Also you'll notice that scrolling controls like list boxes can now be scrolled with the wheel by default.

Video and Sample Code: Handling MouseWheel Events

COM Interoperability

I'm still investigating here - what COM objects are available? How to use DirectX effects, etc. For example, using DXImageTransform...

This feature requires trusted app, so your fellow gamer will get a security prompt.

Video and Sample Code: COM Object Access in Trusted Applications

Bi-directional and complext text, Right-to-left support in controls

This feature can help you make your game read better for more people, if needed.

Video and Sample Code: BiDi and Right-to-left Support

Fluid user interface support

What this means is that instead of having to do weird "hacks" in code to transition between your images (like I did in Shock's backgrounds), you can now hook up to more events that will make your life easier and your game look more "fluid" (think "cooler" :)). Those are BeforeLoaded, Loaded and Unloaded states for ItemsControl

There are many more features coming up in Silverlight 4 (http://timheuer.com/blog/archive/2009/11/18/whats-new-in-silverlight-4-complete-guide-new-features.aspx), but I believe the ones above are more important for gaming scenarios.

What is your opinion and/or favourite feature?

Please comment

 

  

4 Sites With Free Graphics For Commercial Use and Other Resources

Nov 18, 2009

Here is the new, categorized links view: http://www.nokola.com/links/. It contains a small but soon-to-be-expanded list of graphics, sound, icons, coding, etc resources.
I took a first stab at the content, adding few of the sites I use most often.
Please feel free to submit your own links! And I would love it if you use this for your personal link storage as well! (just add it to your favourites bar)

You can filter by use (Commercial, Free, Paid, etc) and browse by category. The left-hand side is Silverlight (easy to code for all browsers and high performance) and the right-side is HTML in order to allow easier copy-paste and middle-click to open in new tab.

Feedback is strongly appreciated!

I was tired of losing my links every time I reinstall the OS, move to a different pc, etc.
If you're like me, you probably have a lot of links or visited a lot of sites but don't have them categorized very well. More importantly, for people who develop projects for themselves or for money, having a quick view of "free for commerial use", "free for personal use", etc resources is very beneficial.

I can feel the pain :) http://www.nokola.com/links/ is the solution (hopefully)

Please add your links and send me your feedback!

 

  

nokola.com | Terms | Log in

Recent

About the author

Happy & enjoying life. Software enthusiast.
The opinions I express here and on nokola.com are mine and not my employeer's (Microsoft).
This is the official blog of nokola.com. You can find Silverlight samples, coding stuff, and hopefully other interesting things here.