Dr. Dobb's Portal

Section 2: Silverlight Drawing

Table of Contents


2.6Build your own sprites

2.6.1Bricks

Bricks can be built by using the Rectangle button ( A ) in the left panel. In order to add more curves to the rectangle shape, go to Appearance tab in the right panel to add 5 PX radiusX and 5 PX radiusY to have more curves in your rectangle object.

Section2 6 1 Toolbar Section2 6 1 Bricks

Insert the Silverlight texture into your workspace to create a pattern for your new rectangle (bricks). You can fill the rectangle with the Silverlight texture by selecting the rectangle and the texture, going to the top menu and then choosing Object » Path » Make clipping path to paste the Silverlight texture inside the rectangle box. This will create the brick's new color pattern ( B ).

To add bevel effect for your bricks, you can either create a new rectangle box using the same steps above, or just use a copy of the previous rectangle (brick) shape by selecting it and then copy and paste it. We will use the new one to add the bevel effect on it by selecting the object and going to the Brushes panel. Set the fill color to gradient from black #000000 with opacity 0% to black #000000 with opacity 50%. Then use brush transform to rotate the gradient to give you the right bevel effect (C).

To add shadow effect to your bricks, copy and paste the same rectangle and fill it with black colors with 10% opacity. Then move it by 1 PX more for right and 1 PX for left. You can repeat pasting the new rectangle more times and moving it to the left by 1 PX and to the right 1 PX to have a smooth shadow for your bricks ( D ).

2.6.2Ball

Use the left panel to add an ellipse and then insert the Silverlight texture bitmap. Attach it to the ellipse by selecting both objects. Go to the top menu and select Object >> Path >> Make clipping path to paste the texture inside the ellipse.

S2 6 2 Button S2 6 2 Silverlight

2.6.3Ball's effect

To add shadow effect to the Silverlight game's ball, copy and paste the same ellipse object and fill it with black colors with 10% opacity. Then move it by 1 PX to the right and 1 PX to the left. You can repeat pasting the new ellipse more times and moving it to left by 1 PX and to right 1 PX to have a smooth shadow for your ball. Finally, group the ellipses with the ball.

2.6.4Background

Create a rectangle using the Rectangle button in the left toolbox, and then set the width to 800 PX and the height to 600 PX to fill your workspace.

2.6.5Paddle

Create a rectangle using the Rectangle button in the left toolbox ( A ), and set the width to 140 PX and the height to 24 PX. To add more curves to the rectangle shape, go to Appearance tab in the right side panel ( B ) to add 5 PX radiusX and 5 PX radiusY; set the rectangle object stroke to “No Brush.”

More bevel effect can be added to the game’s paddle; select the rectangle object ( C ), go to the Brushes tab in the right side panel and select Gradient Brush. Fill the gradient color with color “#FFC7C7C7” to “#FFFFFFFF” ( D ). Now select the Brush transform from the left menu, rotate the arrow 90 degrees, and move the arrow close to the rectangle object.

Section2 6 5 Toolbar Section2 6 5 Longsidebar Section2 6 5 Selectedbrick

2.6.6Paddle reflection effect

To give your paddle( A )the reflection effect, duplicate the paddle object by copying and pasting it, and then move it down the paddle object. Select each gradient-filled color from the Brushes tab and set the top color opacity to 10% and the middle to 10% and the last opacity to 0%. Finally, group it with the paddle in a new canvas.

Section2 6 6 Reflectivebric




NAVIGATION

Flipbook Advertisement