Drawing & Animation III

Drawing & Animation

Using the Win32 GDI #3

Backgrounds

So far we have looked into the techniques of drawing bitmaps and sprites which serve as the foundation of our game programming efforts. Now we''''ll take a look at some of the actual game programming techniques, which we''''ll use to build our game. The first thing we''''ll explore is the subject of backgrounds. Backgrounds aid in creation of a realistic or entertaining gaming experience and are an extremely important part of most sprite-based games.

There are several possible ways to work with backgrounds. In this section we will discuss the use of what we''''ll identify as static backgrounds. This distinction is somewhat artificial in that you may eventually combine different background techniques, but the distinction is useful here as we are just starting out. Static means that they do not form an interactive part of the game. This doesn''''t mean that they can''''t simulate motion, rather that they don''''t actively interact with the sprite. Their main purpose is to provide an appealing backdrop for the sprite or the playing field. We''''ll discuss techniques for using backgrounds that play an active role in a game, by interacting with the sprite, later in this book.

Side scrolling backgrounds

One of the most often seen background effects, is side scrolling. The technique is very simple, and is based on wrapping techniques. The basis of side scrolling, is that you have a bitmap, which is longer than the actual play area, as illustrated on the following illustrations:

This is the total length of the background image. Below you can see the size of the display window, which will be shown to the user:

This window continuously moves, making it appear that it is the actual background, which is passing by. This technique is as if we were wrapping the background image around itself. We''''ll call this the soup can effect. Picture the background above taped around a large soup can. If you could join the edges of the picture perfectly and spin the can it would seem as if the scene was continuously passing by.

Since we cannot blit to the right end of the image and wrap the blit around to the beginning again, we have to Blit twice to achieve the wrapping effect. To use another simplified example we basically we are basically going to copy the area of the picture that has passed out of our viewing window and paste it on the backend of the picture still remaining to be viewed.

The sample project, which is found in SIDESCROLL1.ZIP, demonstrates this background scrolling. From this point on we''''ll refrain from using picture boxes to store images, because of the extra overhead they present, and instead load them directly into memory device contexts created with our GenerateDC function.

We create the window, which will function as our main display area, in the Form_Load event assigning it a width of 250 pixels (1/3 of the actual size of the background image). The height is the same as the background image.

In this simple example we''''ll place all the animation code in the TimerScroll_Timer event:

Private Sub TimerScroll_Timer()

Static X As Long
Dim GlueWidth As Long, EndScroll As Long

If X + ScrollWidth > BackLength Then ''''We need to glue at the beginning again
    ''''Calculate the remaining width
    GlueWidth = X + ScrollWidth - BackLength
    EndScroll = ScrollWidth - GlueWidth
   
    ''''Blit the first part
    BitBlt Me.hdc, 0, 0, EndScroll, BackHeight, BackDC, X, 0, vbSrcCopy
    ''''Now draw from the beginning again
    BitBlt Me.hdc, EndScroll, 0, GlueWidth, BackHeight, BackDC, 0, 0, vbSrcCopy
Else
    BitBlt Me.hdc, 0, 0, ScrollWidth, BackHeight, BackDC, X, 0, vbSrcCopy
End If

Me.Refresh

X = (X Mod BackLength) + 10

End Sub

We have a static X variable, which keeps track on the actual position on the background image. The first thing we''''ll do is test whether the window has moved enough to the right that it has to be wrapped around. If it has, we calculate the two lengths that are needed to perform the two blits.

The first (GlueWidth) is the length of the window that has moved past the right most edge of the image. This is logically also the width of the part which we want blitted from the start of the image again. The second variable holds the remaining length, the length from the X position to the right most edge of the background image. To better illustrate what is actually going on have a look at this illustration:

From the above illustration it is apparent that we actually 慻lue?the two separate parts into one, and thus makes it appear as though we keep moving around the background image.

If the X position + the length of the display window is still inside the bounds of the background image, an ordinary Blit is used, starting from the X position, with a width of the display window.

Multiple side scrolling backgrounds

One background might suffice in many situations, but what if you want your sprite to be able to walk behind certain objects and in front of others? Asked another way, how can we create the illusion of depth for our 2D side-scroller? We do this by creating several layers, in fact we could call this type of game approach a ''''Multi-Layer Side-Scroller''''. This is one method of giving a 2D game a little bit of a 3D look.

Study this illustration:

The drawing order must be very specific when it comes to drawing in a multiple background situation. You must start with the Absolute background, then all the secondary background layers. Then the sprite layer, which can cover the entire background layer (but does not have to) and lastly the foreground layer, is drawn.

The sample project in MULTIBACK.ZIP, demonstrates this kind of scenario.

The sample project has four layers, as illustrated above. The drawing technique is the same as with single scrolling backgrounds, the X position in the map is moved on each timer event, and the background is wrapped if necessary. The next background to draw is the secondary background layer. The technique is the same, but since this layer must be transparent so that we can see the background, we have to draw both the mask and the sprite. The Y position of the background is also changed so that the layer is drawn towards the bottom of the display. The sprite is drawn statically to the same position (why should it move when everything else is moving?). Lastly the foreground is drawn, using the same method as with the secondary background layer.

The whole drawing event looks like this:

Private Sub TimerScroll_Timer()

Static X As Long, XBack1 As Long, XFore As Long
Dim GlueWidth As Long, EndScroll As Long

''''Draw the absolute background
If X + ScrollWidth > ABBAckWidth Then ''''We ned to glue at the beginnig again
    ''''Calculate the remaining width
    GlueWidth = X + ScrollWidth - ABBAckWidth
    EndScroll = ScrollWidth - GlueWidth
   
    ''''Blit the first part
    BitBlt picBack.hdc, 0, 0, EndScroll, ABBackHeight, DCABBAck, X, 0, vbSrcCopy
 &nbs

[1] [2] [3] [4] [5] [6]  下一页

[Sql Server]Sql精妙语句--各种求值函数  [网页制作]网页表格之---多个表格纵向排列
[网页制作]JavaScript另类用法--读取和写入cookie  [网页制作]号称非常安全的上网工具---360安全浏览器介绍
[办公软件]信息技术教学篇---Word工具栏的显示、隐藏及四种菜…  [操作系统]开始菜单---运行命令大总结
[操作系统]网络转载---64位操作系统与32位的区别  [操作系统]ldap:///(没有响应)Windows无法访问指定设备、路径…
[网络技术]安全篇---交换机设置方法介绍  [聊天工具]Real10 & Xpdf installation on Linux Box

Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18