We've been working on Mashooo's new features for the last couple of months and the truth is that it has made us fall deeper in love with Silverlight. We have implemented plenty of new controls, beginning with the High Score Service, passing through the new Featured Games section, the Top Ten Users list and many more that you can discover by visiting Mashooo.com.

We have added interesting activities for players such as Achievements and Contests, and invented Mashooo's own currency to reward users for their actions, effort and proficiency.

This version of the website is in Beta stage so it will only get better!

Mashooo's latest project is a sweet high score service that saves Silverlight game developers a lot of work.

Having a high score system in a casual web game is a very valuable feature. It attracts players to come back to a game and be able to compete against themselves or others, thus increasing its replay value.

I created the UI in Blend 3 and got the chance to esperiment with its cool new features like the animations transitions and effects. It was a great pleasure as well to take advantage of Silverlight 3's merged dictionaries.

For more details visit the official announcement post about Mashooo's high scores and achievement service.

The deadline for submitting entries to the Mashooo S Prize has been reached. The total number of entries is 37 with the last one luckily making it within 4 minutes of the end!

At Mashooo we are extremely pleased with the quality of the games and their adventurous and bright developers. They have proved that the Silverlight games industry sees a promising future.

Congratulations to all you Silverlight game developers who obviously put their hearts and efforts into creating virtual joy.

Now the rating period continues all week until Sunday June 21st:
We invite the Silverlight community in general to support the Silverlight game developers by playing their games and rating them with an objective, fair and sincere eye.

The top 10 games will go on to be presented to our panel of judges.

Well, I'm off to have fun playing the 37 games all over again to decide on my ratings. You only get to rate each game once and once only so do it carefully! The link to do so is:

http://www.mashooo.com/SPrize_Silverlight_Games.aspx

I have been getting questions about the highscore control of games that are submitted to be hosted on Mashooo and how to manage to show it inside the application from a different server.

I thought I might as well show it as a post for others to benefit from this useful piece of information. I'm just pasting what I explained to the last game developer who asked:

Since your high score system is hosted on your server and the Silverlight application would be hosted on our server the Silverlight application needs to make what is referred to as "cross domain calls".

For a Silverlight application to be able to access files on a different server than the one it is hosted on (cross domain calls) you have to add a special file in the root directory of your server.

Here's the explanation of what you need to do:

"To enable a Silverlight control to access a service in another domain, the service must explicitly opt-in to allow cross-domain access. By opting-in, a service states that the operations it exposes can safely be invoked by a Silverlight control, without potentially damaging consequences to the data the service stores.

Silverlight 2 supports two different mechanisms for services to opt-in to cross-domain access:

 -Place a clientaccesspolicy.xml file at the root of the domain where the service is hosted to configure the service to allow cross-domain-access.

 -Place a valid crossdomain.xml file at the root of the domain where the service is hosted. The file must mark the entire domain public. Silverlight supports a subset of the crossdomain.xml schema."

For more information visit the following links:

http://msdn.microsoft.com/en-us/library/cc197955(VS.95).aspx

http://msdn.microsoft.com/en-us/library/cc645032(VS.95).aspx

As we speak, at Mashooo.com we are working on a highscore keeping system that allows game developers to use it instead of having to create one themselves. I'll keep you posted on this.

Update 2009 Oct 6: Mashooo highscores and achievements service is ready!

I checked my automatic Microsoft updates today and one of them was Internet Explorer 8. This update is good news because IE 8 includes Silverlight. It means a lot more people will be able to experience SL applications. Very good move from Microsoft.

Here's the proof that I'm not making this up:

The close-up:

Important!!!: Reads the comments below.

A Silverlight game development competition open to the world is no longer a dream. The contest entry period for the Mashooo S Prize ends on June 14, 2009 so you still have time to concoct a cool casual web game based on Silverlight.

The prizes add up to more than $10,000 USD in cash and software products, what makes it worth to give it a try.

To this day we already have 2 entries that you can rate, comment on, give advice to the authors and just enjoy playing them. Visit Mashooo's Silverlight Games page and choose the S Prize contest tab.

The body was too wide. Now it fits screen resolutions starting at 1024px width. It's centered. All Silverlight applications have been modified accordingly. I fixed some layout issues with Firefox and Chrome. Mashooo looking good.

Besides this I'm working on a cool layout for the games section. Don't know when I'll be finished though. Hopefully by the end of the week.

Finally a little great addition: Users are now able to choose to register either through a Mashooo account or OpenID.

This post is a complement to Create shadow effect in Blend, where I am going to explain how to achieve a better, smoother looking shadow by modifying the gradients of the Fills and the OpacityMasks.

Starting from where we left the last project:

. In the main menu choose: Tools/Options/Artboard and check the option: Show snap grid if it's not already.

. Select the Object (white rectangle) and set its Horizontal and VerticalAlignments to: Stretch.

. Create 4 ColumnDefinition guides as follows:
 at 10px from the Right side
 at 10px from the Bottom
 at 30px from the Left side
 at 30px from the Top

I have chosen 10 and 30px because my Grid line spacing is set to 10px but if yours is set at 8px you can use 8 and 24px as I want the ColumnDefinition guides to snap to the snap grid. (See image 1)

Image 1:  

. Select ShadowBottomRight and then select the Brush Transform Tool. You should see the vertical arrow from the Fill gradient. If not select the Fill gradient Brush.

. Click on the tip of the arrow and while pressing the Shift key down drag it up until the back of the tip is aligned with our bottom ColumnDefinition guide. You may want to zoom a lot on the area to be more precise. I zoomed to 3200% and up. It would be classic if the ends of the gradient arrow snapped to the guides. I didn't manage to find a way to do that so if someone knows something please enlighten me. (See image 2)

Image 2:  

. Now drag the back end of the arrow down towards the bottom edge of the Object. (See image 3)

Image 3:  

. Select ShadowBottomLeft and repeat the exact steps as for ShadowBottomRight. (See image 4)

Image 4:

. Select ShadowTopRight and modify the Fill gradient Brush as follows:
     drag the tip of the arrow (for the rest of this tutorial you should always do this with the Shift key down) and align it with the top guide.
     drag the back end of the arrow until the middle (marked by a tiny circle) reaches the top edge of the Object. (See image 5)

Image 5: 

. Repeat the exact same steps with ShadowTopLeft. (See image 6)

Image 6: 

Note: for this precise project the center of the Fill gradient is at this point aligned with the top edge of the Object, therefore we could very well drag the tip of the arrow while pressing the shift and the Alt keys down. This way the gradient size is modified in relation to its central axis.

We finished modifying the Fill gradients for the four parts of the shadow. Now let's modify their OpacityMasks.

. Select ShadowBottomRight and in the Brushes panel click on the OpacityMask brush. Drag the ends of the gradient brush (the arrow) to align the tip to the right guide and the back end to the right edge of the Object. Always zoom a lot when doing this to be more precise. (See image 7)

Image 7: 

. Repeat the same steps with ShadowTopRight. (See image 8)

Image 8: 

. Select ShadowBottomLeft and modify the ends of the gradient to align the transparent end (the tip) with the Left guide. Now by dragging the opaque end (back end of the arrow) as to coincide the middle of the gradient with the Left edge of the Object. (See image 9)

Image 9: 

. Select ShadowTopRight and repeat the same steps. (See image 10)

Image 10: 

Now the shadow effect looks more like the one obtained from a focused source of light. In this case the source is located somewhere NW.

Let's make the effect look even nicer:

. Select ShadowBottomRight then its Fill brush in the Brushes panel. Select the dark end of the gradient and on the color Editor choose a shade of gray  that is somewhere in the middle from white to black. (See image 11)

Image 11:
 

. Perform the same color change to the remaining 3 parts of the shadow. (See image 12)

Image 12: 

This type of shadow effect simulation suits only rectangular and square shapes, and with rounded corners only to a certain extent. To prove this select the Object then the Rectangle Tool and round the corners a little bit moving the Upper Left Handle. (See image 13)

Image 13: 

If the corners are too round the shadow won't fit the shape of the Object anymore (See image 14) but you can play with the Opacitymasks to make the shadow look rounder (See image 14a)

Image 14: 
Image 14a:

Now you can play around modifying gradients and colors to suit your design. One more thing, lighter shades suit shadows best to achieve a smoother look and this shadow can turn into a glow effect by altering the opaque color. Here is the final product after touch ups:

In a future post I will explain how to link this to a template and perform data bindings in a Silverlight control to achieve something like the main menu on Mashooo.com's new interface.

I would suggest to reproduce the exact same demo in this tutorial for you to understand better how this works. Later you will be able to play with it.

We will use 5 Rectangle shapes in total: One will be our object and the other four will form the shadow.

. Create a Grid, 300px Width by 200px Height. All our elements will be created inside this Grid. Double click it to select it (A yellow border indicates that). This helps to easily select (simple left-click) the objects inside our grid.

. Create a Rectangle, 200px Width by 100px Height. Leave its Fill color to the default White and set the Stroke to: No brush. This will be the object to which we will "apply" the shadow. Let's Name it "Object". Set its Horizontal and VerticalAlignment to: Center in the Layout properties panel. (See image 1)

Image 1:

. Create a Rectangle, 150px Width by 100px Height, which is exactly 1/4 of the Grid's area. Leave its Fill color to the default White and set the Stroke to: No Brush. In the Layout properties set the HorizontalAlignment to: Right and VerticalAlignment to: Bottom. This will be the bottom-right corner of the shadow. Let's Name it "ShadowBottomRight".
Set its Fill to: Linear Gradient Brush. Select the Brush Transform Tool (See image 2).

Image 2:

Notice the Black to White default Gradient Fill. Leave it as it is.

. Now select the OpacityMask Brush and set it to Gradient brush. It's normal that nothing seems to change. Select the Brush Transform Tool if it's not still selected and Rotate the dark end of the brush (Back end of the arrow) towards the left while pressing the Shift key until the arrow is perfectly horizontal. (See image 3)

Image 3:

The Shift key causes the arrow to snap so it is indispensable for this project to achieve a smooth looking gradient.

.  Select the White end of the OpacityMask gradient on the Brushes Property panel and set its Alpha transparency to 0%. (See image 4)

Image 4:  

Cool, ha?

. Select our "Object" and modify its Order to: Bring to Front. (See image 5)

Image 5:

At this point you could already be altering the gradients position and length but if this is new to you you should leave it as it is and continue with the next steps.

. Select the ShadowBottomRight rectangle, copy and paste it. Name it "ShadowTopRight" and set its verticalAlignment to: Top. (See image 6)

Image 6:

. In the Transform properties panel select the Flip tab and click on: Flip y axis. (See image 7)

Image 7:

. Now modify its Order to: Send to Back. (See image 8)

Image 8:

. Select both ShadowBottomRight and ShadowTopRight (with the Shift or the Ctrl keys), copy and paste and with both shapes still selected set the HorizontalAlignment to: Left. (See image 9)

Image 9:

. Set the Flip Transform property to: Flip x axis. (See image 10)

Image 10:

. Finally modify the selection's Order to: Send to Back. (See image 11)

Image 11: 

. You can now name them (you guessed it): "ShadowBottomLeft" and "ShadowTopLeft".

We have finished creating all the elements necessary to the shadow effect. Here is the outcome for now (See image 12) which doesn't look perfectly smooth because we haven't modified the gradients: Notice the 2 peaks of vertical dark shadow towards the center of the Object.

Image 12:

I will explain later a trickier part that consists of adjusting the Fills and OpacityMasks gradients to achieve a better looking shadow drop, like the one I used in the Mashooo.com main menu in the header area.

This is my first attempt ever to putting together a tutorial so questions, criticism, complaints, corrections, kudos (they all start with the sound "k"!), etc are all very welcome. Enjoy!

>>Create shadow effect in Expression Blend part 2