# Scrolling a WriteableBitmap

I need to simulate my background scrolling but I want to avoid moving my actual image control. Instead, I'd like to use a WriteableBitmap and use a blitting method. What would be the way to simulate an image scrolling upwards? I've tried various things buy I can't seem to get my head around the logic:

 //X pos, Y pos, width, height
Rect src = new Rect(0, scrollSpeed , 480, height);
Rect dest = new Rect(0, 700 - scrollSpeed , 480, height);

//destination rect, source WriteableBitmap, source Rect, blend mode
wb.Blit(destRect, wbSource, srcRect, BlendMode.None);
scrollSpeed += 5;

if (scrollSpeed > 700) scrollSpeed  = 0;


If height is 10, the image is quite fuzzy and moreso if the height is 1. If the height is a taller, the image is clearer, but it only seems to do a one to one copy. How can I 'scroll' the image so that it looks like it's moving up in a continuous loop? (The height of the screen is 700).

• I really don't get why you'd want to do this, what is wrong about moving the background image(s)? – aaaaaaaaaaaa Jun 28 '11 at 20:52
• @eBusiness - I'm trying to create multiple scrolling textures. Some fit the screen, others are smaller. I might be going about it the wrong way, but how would you create a scrolling texture on a surface in Silverlight? – Skoder Jun 29 '11 at 10:58
• We are talking about a background right? I'd just position the images where they need to be in order to create the desired background. You specifically state that you don't want to do it that way, but you give no reason. – aaaaaaaaaaaa Jun 29 '11 at 11:54
• @eBusiness - To create a scrolling background, I would need two image controls. I'd move one upwards and when it came off screen, I'd reset it to be below (whilst the other is doing the same). This gives a scrolling effect. If I do this with a non-background scroller, then the image control would just vanish in front of the user's eyes. I asked for a background in the question just because that was what I was working on, but the principle would be the same for other scrolling textures. – Skoder Jun 29 '11 at 17:02
• Well, tell us what you want, not what you don't want. In a 3D environment you could change the UV coordinates to get a scrolling effect. I don't know exactly how Silverlight works, but in any sensible 2D environment you can draw a fraction of an image to the screen with no need to go through texture buffers. – aaaaaaaaaaaa Jun 29 '11 at 17:20

You can't "scroll" a buffer without somewhere to store the bit that's shoved off the end, so it looks like you'll need to either have a separate store for the swapping blit, or separate source bitmap. I would choose the latter for simplicity's sake, then you can store a scroll position and generate your rects using that.

You'll need to generate two rects, one for the top and one for the bottom, the one for the top will need to start at zero height, and increase until it reaches the bottom, the source rect that pairs with it will also start at zero height, but will start from the bottom of the source image:

Rect src = new Rect(0, 700-scrollPos, 480, 700);
Rect dest = new Rect(0, 0, 480, scrollPos);


Your bottom rect will be the one you see to start with, and will take up the entire screen at the beginning, reduce in size while moving down the screen out of the way of the top rect, the source rect for that would be doing the same, but instead of moving down, it just shrinks.

Rect src = new Rect(0, 0, 480, 700-scrollPos);
Rect dest = new Rect(0, scrollPos, 480, 700);


And using those two blits, you have a scroller.

• @Richard Fabian. Poke. See discussion above, maybe you could clear out the confusion. Would you consider using an intermediate texture to be the ordinary way of achieving a scrolling effect? – aaaaaaaaaaaa Jul 1 '11 at 15:00
• For almost all situations, there is a source texture and a destination buffer. I guess in silverlight, the writable texture is the destination buffer, and the source is whatever can be blitted onto it. I've only come across better implementations when the destination buffer is the screen (in which case a shader was used to scroll a texture), or using palette animation. – Richard Fabian Jul 1 '11 at 16:14
• When I blit stuff in pygame, I would use the same type of rectangles to generate an internally scrolling icon/sprite, but wouldn't write to an intermediary buffer unless it was going to be used multiple times (like if the scrolled icon was the icon for one member of an army of scrolling icon entities) – Richard Fabian Jul 1 '11 at 16:16
• Blitting, if it's your only solution to the problem of scrolling, is normally just optimised by reducing the number of times you copy over a frame, if you can directly blit to the screen in silverlight, then you're better off doing that. In fact, if you can adjust the clipping edge of the writable buffer that is being used, then you could render it twice with different rectangles to produce the same result as I describe in my answer. however, I don't know if you can do that, so couldn't assume it in my answer. – Richard Fabian Jul 1 '11 at 16:18
• Thanks, I used the blitting method. There doesn't seem to be much of a performance hit, and the game is quite simple, so it should suffice. – Skoder Jul 1 '11 at 22:36