Drawing a viewable area on a larger map
Drawing a viewable area on a larger map
Drawing a viewable area on a larger map
Drawing a viewable area on a larger map
Drawing a viewable area on a larger map
Drawing a viewable area on a larger map Drawing a viewable area on a larger map Drawing a viewable area on a larger map Drawing a viewable area on a larger map Drawing a viewable area on a larger map Drawing a viewable area on a larger map Drawing a viewable area on a larger map Drawing a viewable area on a larger map
Drawing a viewable area on a larger map Drawing a viewable area on a larger map
Drawing a viewable area on a larger map
Go Back  Xtreme Visual Basic Talk > > > Drawing a viewable area on a larger map


Reply
 
Thread Tools Display Modes
  #1  
Old 12-04-2004, 05:45 PM
theController theController is offline
Centurion
 
Join Date: May 2004
Posts: 120
Default Drawing a viewable area on a larger map


alright so I can create a map and lay tiles in the order I want creating a nice map.

The only problem is, when they're drawn, they are only drawn in the area of what is seen.

This is done by using the code,

Code:
Public GFX As Graphics = Graphics.FromImage(bmpCameraFront)
Then in the Draw Routine,

Code:
With Map

                    For Y = 0 To Map.tH - 1
                        For X = 0 To Map.tW - 1

                            'Set the Values for Every Co-Ordinate
                            intCarry = intMapTile(X, Y)

                            'Draw tile
                            GFX.DrawImage(bmpTilePic(intCarry), X * intTileSize, Y * intTileSize)

                        Next

                    Next

                    'Draw the Visible Area
                    e.Graphics.DrawImage(bmpCameraFront, Camera.X, Camera.Y)

                End With
this means that the tiles are being drawn to GFX which is my viewable area.

I set up the main "world" before by

Code:
Public Sub CreateWorld(ByVal iW As Long, ByVal iH As Long)

        With Map
            'Get size (Set as iW, iH)
            .W = iW
            .H = iH
        End With

        'Set the Number of Tiles (Columns and Rows[Height, Width])
        Map.tH = Map.H \ intTileSize    'Tiled Height
        Map.tW = Map.W \ intTileSize   'Tiled Width

    End Sub
then calling it when I load the game,

Code:
                'Create map
                CreateWorld(1600, 1600)
Now this means that the draw routine will set tiles along all of the co-ordinates of the whole world, but only draw them to the screen being viewed.

So my question is, do I want to make my "World" a separate bitmap that is drawn to? and then when the character is moved it shows another part of the "world"

right now, I move by,

Code:
                            'Shift the Camera
                            Camera.Y = Camera.Y + 2
^ this is in a keydown routine, "moving" the character up 2 pixels, while he stays in the centre.

thanx.
Reply With Quote
  #2  
Old 12-04-2004, 08:18 PM
theController theController is offline
Centurion
 
Join Date: May 2004
Posts: 120
Default

well it seems I have come up with a quick fix.

It works how I want but it works slowly.

I drew the viewing area large, this makes it so when i move over the area shifts and i see the next part. But, this is done very slowly.

Maybe someone could check my draw routine to see if there is something that is done there everytime that isnt needed to be?

I have attached my code for reference.

Edit by Iceplug: I had to remove an EXE from this attachment.
Attached Files
File Type: zip Final Project (Cozy).zip (762.9 KB, 25 views)

Last edited by Iceplug; 12-05-2004 at 06:53 AM.
Reply With Quote
  #3  
Old 12-08-2004, 06:48 PM
Chrono23's Avatar
Chrono23 Chrono23 is offline
Junior Contributor
 
Join Date: Sep 2002
Location: Inside your head
Posts: 242
Default

What you do is keep a DisplayXOffset ande DisplayYOffset to keep track of the 'viewable' world by tracking the character's current location. Here is a sample:

Code:
Sub DrawMap()
' this routine draws the map on the form
For X = 1 To 100 ' go through all the map
For Y = 1 To 100 ' go through all the map
If X - DisplayXOffset >= 0 And X - DisplayXOffset < NoOfXSqrCanSee Then
If Y - DisplayYOffset >= 0 And Y - DisplayYOffset < NoOfYSqrCanSee Then
Call DrawASquare(X, Y, 1, Map(X, Y, 2).icon)
End If
End If
Next Y
Next X
End Sub
This was taken from the Mark's Massive VB RPG Tutorial site, so I don't take any credit for it. You can track the x,y offset by using the top left corner of when your character is in the middle of the screen. You should read the link. It explains it more. (The code snippet is from ch. 8, so look there first. it is not in VB.Net, but if you can translate it into .Net is helps)
__________________
Why is there war, famine and poverty in the world? Here's my answer: ¯\(°_o)/¯

Yes, I made my own avatar. And no, I'm not going to make one for you.... sorry.
Reply With Quote
  #4  
Old 12-26-2004, 04:49 PM
ThePentiumGuy ThePentiumGuy is offline
Regular
 
Join Date: May 2003
Posts: 53
Default

I have plenty of information here:
http://vbprogramming.8k.com/tutorials/main.htm

I suggest you skim:
14) Tile Based Collision Detection
17) Scrolling
The tutorials above go through a lot of concept .... etc.
Then move on to
1) Programming an RPG
-Setting it up
-Scrolling and Physics
These tutorials get to the actual coding part

That'll teach you how do to this.

-The Pentium Guy
Reply With Quote
  #5  
Old 01-06-2005, 09:30 AM
theController theController is offline
Centurion
 
Join Date: May 2004
Posts: 120
Default

Hey back again, I have succesfully made a tile map, the only draw back is that when the map is larger the character moves slower.

I noticed that if I make the bitmap smaller (the one the map is drawn to), then the character moves faster, and if I walk off the map He is no man's land but the tiles are still there like they should be. Say, I have a large lake in my map, but the bitmap is only so big that it doesnt display this lake, but when I move my character to where the lake should be he cant walk any farther, but he just appears to be in the middle of no where (no map).

So my collision still works. I just cant (undraw?) and redraw the tiles depending on the position of the character.

Here is my drawing routine. I though I could just change the camera x and y variables but that just moves the whole bitmap (which is why it goes slower the larger you get).

Code:
Private Sub Draw()

                Dim X As Integer 'X Bounds of Array
                Dim Y As Integer 'Y Bounds of Array

                'A Graphics object to draw the image to the viewable area (Camera)
                gMap = FrmMap.CreateGraphics

                For Y = 0 To intGrab.GetUpperBound(1) 'The columns of the map

                    For X = 0 To intGrab.GetUpperBound(0) 'The rows of the map

                        'Set the Values for Every Co-Ordinate
                        intCarry = intGrab(X, Y)

                        'Create the pictures in rectangles
                        rTile = New Rectangle(0, 0, intTileSize, intTileSize)

                        'Draw the Visible Area
                        GFX.DrawImage(bmpTilePic(intCarry), X * intTileSize, Y * intTileSize, rTile, GraphicsUnit.Pixel)

                    Next

                Next

                'Draw the newly created set of tiles to the Camera :)
                gMap.DrawImage(bmpCameraFront, Camera.X, Camera.Y)  'Draws the map to the form, so that you can see it.

            End Sub
Reply With Quote
  #6  
Old 01-06-2005, 11:46 AM
ThePentiumGuy ThePentiumGuy is offline
Regular
 
Join Date: May 2003
Posts: 53
Default

Quote:
Say, I have a large lake in my map, but the bitmap is only so big that it doesnt display this lake, but when I move my character to where the lake should be he cant walk any farther, but he just appears to be in the middle of no where (no map).
You seem to be having a problem with the positions. The lake is supposed to be in a certain position but when you made the bitmap smaller, your position gets screwed up.

For example, let's say the lake is in position 6,6 (heh, a one tile lake ). Normally, you walk up to 6,6 and collision works, you can't go there.

But now you've made the map smaller (let's say 1/2 the size) (so that the game will run faster). The lake should now be in position 3,3. So what you should be doing is, moving him half the distance.

-The Pentium Guy
Reply With Quote
  #7  
Old 01-06-2005, 02:50 PM
theController theController is offline
Centurion
 
Join Date: May 2004
Posts: 120
Default

Quote:
Originally Posted by ThePentiumGuy
You seem to be having a problem with the positions. The lake is supposed to be in a certain position but when you made the bitmap smaller, your position gets screwed up.

For example, let's say the lake is in position 6,6 (heh, a one tile lake ). Normally, you walk up to 6,6 and collision works, you can't go there.

But now you've made the map smaller (let's say 1/2 the size) (so that the game will run faster). The lake should now be in position 3,3. So what you should be doing is, moving him half the distance.

-The Pentium Guy
Hmm well the position is working, and that is what Ive noticed. I noticed that even though its not drawn (nothing is shrunk in scale or anything, just less is drawn), but I have noticed that even though less is drawn it is still all there. So, if i did draw it i would move to where I see (say hold the right key down for 5 seconds) it and then I would stop (works great). Say I draw less (say only 100 x 100 bitmap) then I only see the tiles that are in that 100 x 100 bitmap, but if I move to that same spot (holding down the right key for 5 seconds), it still stops at the right spot.

So really there is no problem, more of an observation with a question.

Is there a way to only draw what I need (should see at that time) on the bitmap (and I would think there is) and this changes everytime you move, without drawing the whole map at once and just shifting it over?
Reply With Quote
  #8  
Old 01-06-2005, 04:54 PM
ThePentiumGuy ThePentiumGuy is offline
Regular
 
Join Date: May 2003
Posts: 53
Default

Oh. Heh. 100x100 only? Eek. Then I have no idea. See in my game, 640x480 + fullscreen, the map is bigger than the resolution. So basically draw the entire map, and only 640x480 of it is rendered.

Another way of doing this is to draw on top of a label or a picturebox (use PictureBox1_Paint event) that's small.

Edit: But, you're right - that would STILL draw the whole map. You're gonna hafta figure out an algorithm (I could do this on my program easily because my map is composed of an array of bitmaps (tiles).

On my program it would look like this:

For x = OffsetX To (OffsetX + Width) 'Width is like... the width of the viewable area

For y = offsetY To (offsetY + height) 'Height = height of viewable area

e.graphics.drawimage(Tiles(x,y), new point(x * TileWidth, y * tileheight))

Next
NExt

And when you move you shift the offsets.

-The Pentium Guy

Last edited by ThePentiumGuy; 01-06-2005 at 04:59 PM.
Reply With Quote
  #9  
Old 01-06-2005, 05:46 PM
theController theController is offline
Centurion
 
Join Date: May 2004
Posts: 120
Default

[QUOTE=
On my program it would look like this:

For x = OffsetX To (OffsetX + Width) 'Width is like... the width of the viewable area

For y = offsetY To (offsetY + height) 'Height = height of viewable area

e.graphics.drawimage(Tiles(x,y), new point(x * TileWidth, y * tileheight))

Next
NExt

And when you move you shift the offsets.

-The Pentium Guy[/QUOTE]

This intrigues me for my game is an array aswell

Code:
For Y = 0 To intGrab.GetUpperBound(1) 'The columns of the map

                    For X = 0 To intGrab.GetUpperBound(0) 'The rows of the map
This is my Y and X = loops, the rest is the same as yours. Could you explain your a little more thorough ? I think you might have something here.
Reply With Quote
  #10  
Old 01-06-2005, 06:39 PM
ThePentiumGuy ThePentiumGuy is offline
Regular
 
Join Date: May 2003
Posts: 53
Default

Yep.
Everything was taken from this tutorial (http://www.vbprogramming.8k.com/tuto...gTextFiles.htm) from my site.

I don't know how yours works (you seem to be using a one dimension array), but mine works like this:

a) Each tile is 30x30
b) A text file is read, showing where to put each tile
c) Each tile is stored into a 2d array(,) of bitmaps
d) Each tile is rendered. It's position will be the tile number (x,y), multiplied by 30. For example, tile 0,0 will be in position 0,0. Since each tile is 30x30 , tile 1,0 will be in position 30,0.

And the offset thing:
OffsetX is increased when you move right
OffsetX is decreased when you move left
OffsetY is increased when you move down
OffsetY is decreased when you move up

To render ALL The tiles (+ scroll them):

for x = 0 to MapWidth
For y = 0 to mapHeight
e.graphics.drawimage(Tiles(x/30, y/30), new point(x * 30 + offsetX * 30, y * 30 + offest * 30))
Next
Next
Pretend mapwidth is 120
The offset will simply move all the tiles as needed. For example offsetX = 1 then all the tiles would more 30 units to the right.

Now to render a PORTION of the tiles (let's say 120x120 of the map should only be seen, that's 16 tiles:

X X X X
X X X X
X X X X
X X X X

Where X represents a tile, so the size of the viewable area is 120x120, translating to 4x4 tiles (becuase 120/30 = 4).

Now to render only what needs to be seen:

For X = OffsetX * 30 To (OffsetX * 30 + ViewableAreaWidth)
For y = offsetY * 30 to (OffsetY * 30 + viewableareaHeight)
e.graphics.drwaimage(tile(x / 30, y / 30), new point(x * 30 + offsetX * 30 , y * 30 + offsetY * 30)
Next
NExt

Plug in numbers. At first you see tiles:

0,0 1,0 2,0 3,0
1,0 1,1 2,1 3,1
2,0 1,2 2,2 3,2
3,0 1,3 2,3 3,3

Right? That's 120x120 of the map visible. Now let's say you push right (increasing offset by 1). You should now see tiles:

1,0 2,0 3,0 4,0
1,1 2,1 3,1 4,1
1,2 2,2 3,2 4,2
1,3 2,3 3,3 4,3

Right? Because:
OffsetX * 30 To (OffsetX * 30 + ViewableAreaWidth)
1 * 30 To (1 * 30 + 120)
= 30 To 150
= 1 -> 4

Pick a Tile, let's say tile 2,0. Since you pushed right (increased that offset by 1) the position of tile 2,0 is now where the position of tile 3,0 used to be (without the offset) since you moved it right.

e.graphics.drwaimage(tile(x / 30, y / 30), new point(x * 30 + offsetX * 30 , y * 30 + offsetY * 30))

^ - keep that in mind.

Tile 3,0 (without offset):
e.graphics.drwaimage(tile(120 / 30, 0), new point(3 * 30 + 0 * 30 , 0 * 30 + 0 * 30))

So it's New Point(90,0)

Tile 2,0 (with offsetX of 1)
e.graphics.drwaimage(tile(60 / 30, 0), new point(2 * 30 + 1 * 30 , 0 * 30 + 0 * 30))

New Point(90,0)

See how this is working? This ensures taht only the tiles that NEED to be drawn are drawn (I understand that this code is slightly different from the code i posted earlier, I guess I made a few mistakes)

-The Pentium Guy

Last edited by ThePentiumGuy; 01-06-2005 at 06:53 PM. Reason: More bugs
Reply With Quote
  #11  
Old 01-06-2005, 06:46 PM
ThePentiumGuy ThePentiumGuy is offline
Regular
 
Join Date: May 2003
Posts: 53
Default

Oh note:
You should really make it so that offset gets increased in increments of 30 instead of 1 (Becuase we're using *30 all over the place, and using / 30 everywhere). This is so that you can loop it gradually, so it can progress from 0 to 30, to give an "animating" effect.

-The Pentium Guy

Last edited by ThePentiumGuy; 01-06-2005 at 06:54 PM.
Reply With Quote
  #12  
Old 01-06-2005, 07:05 PM
theController theController is offline
Centurion
 
Join Date: May 2004
Posts: 120
Default

Quote:
Originally Posted by ThePentiumGuy
Oh note:
You should really make it so that offset gets increased in increments of 30 instead of 1 (Becuase we're using *30 all over the place, and using / 30 everywhere). This is so that you can loop it gradually, so it can progress from 0 to 30, to give an "animating" effect.

-The Pentium Guy
This is exactly the same as how mine works, reads from a file put to a 2 dimensional array and so on.

The only difference is that I draw them all at once, no Offsets. This is a very good idea. I will try and put this together and see how it goes.

Question: does this mean, that you have to have your guy move directly to the next tile? he cant be inbetween? because as of now my character moves pixel by pixel. Can I keep this?

Also, how do the offsets work, do you just dim them as new integers? and If so when do you set them? or are they just empty used only in the for loops?

Last edited by theController; 01-06-2005 at 09:35 PM.
Reply With Quote
  #13  
Old 01-07-2005, 12:51 PM
ThePentiumGuy ThePentiumGuy is offline
Regular
 
Join Date: May 2003
Posts: 53
Default

Quote:
Originally Posted by theController

Question: does this mean, that you have to have your guy move directly to the next tile? he cant be inbetween? because as of now my character moves pixel by pixel. Can I keep this?

Also, how do the offsets work, do you just dim them as new integers? and If so when do you set them? or are they just empty used only in the for loops?
Answer:You'll ahve to check for collision when you get to the end of the tile. It's a slightly morecomplicated way ofdoing this. (yeah you can moveitpixel bypixel (spacebarisn't working on thiscomp). AsI said

Quote:
Oh note:
You should really make it so that offset gets increased in increments of 30 instead of 1 (Becuase we're using *30 all over the place, and using / 30 everywhere). This is so that you can loop it gradually, so it can progress from 0 to 30, to give an "animating" effect.

-The Pentium Guy
onceyou've done that, you can move it by 5, 10...anything you want.

Yeah they're just integers, you increment them when you move.
Reply With Quote
  #14  
Old 01-07-2005, 01:47 PM
theController theController is offline
Centurion
 
Join Date: May 2004
Posts: 120
Default

Quote:
For X = OffsetX * 30 To (OffsetX * 30 + ViewableAreaWidth)
For y = offsetY * 30 to (OffsetY * 30 + viewableareaHeight)
e.graphics.drwaimage(tile(x / 30, y / 30), new point(x * 30 + offsetX * 30 , y * 30 + offsetY * 30)
Next
NExt
ok so just so I have this straight I will go through each step and try and explain to myself what they are doing.

First off, you would,

Dim X As Integer
Dim Y As Integer
Dim OffsetX As Integer
Dim OffsetY As Integer

Now that those are done,

For X = OffsetX * 30

If I change the number that the Offset is, it will make one tile dissapear on the left.

Next,

To (OffsetX * 30 + ViewableAreaWidth)

If I change the offset it will add one to the end?

and the ViewableAreaWidth is.. Tiles or Pixels?

*Edit. I guess if you want to see, you can check out my code. My game is progressing nicely, not to much visuals, but the code is working

Edit by Iceplug: I had to remove 1 EXE and 8 DLLs from the attachment
Attached Files
File Type: zip Final Project (Cozy).zip (956.4 KB, 18 views)

Last edited by Iceplug; 01-07-2005 at 07:11 PM.
Reply With Quote
  #15  
Old 01-07-2005, 01:59 PM
ThePentiumGuy ThePentiumGuy is offline
Regular
 
Join Date: May 2003
Posts: 53
Default

"To (OffsetX * 30 + ViewableAreaWidth)

If I change the offset it will add one to the end?

and the ViewableAreaWidth is.. Tiles or Pixels?"

If you increase offsetX by +1, it'll make the thing move by 1 tile (see this is the problem, I messed up in my previous post. You should really make offset by PIXELS instead of tiles so that you can move it by (for example) 5 pixels or whatever. to do that get rid of the *30 whenever you see offset.

Viewableareawidth is pixels.

I'll check your code out soon. There's no .NET on this computer . (Comp with .net doesn't have net) So once I Get a floppy I'll have a peek.

-The Pentium Guy
Reply With Quote
  #16  
Old 01-07-2005, 05:57 PM
theController theController is offline
Centurion
 
Join Date: May 2004
Posts: 120
Default

Well, I have managed to make the map as large as I want and it goes fast BUT, it satrts out slow then gradually gets faster then reaches top speed and then runs at like light speed accross the map. Why is this happpening?
Reply With Quote
  #17  
Old 01-07-2005, 07:05 PM
ThePentiumGuy ThePentiumGuy is offline
Regular
 
Join Date: May 2003
Posts: 53
Default

I have no idea. Could you describe when/where this is happening?
-The Pentium Guy
Reply With Quote
  #18  
Old 01-07-2005, 07:12 PM
theController theController is offline
Centurion
 
Join Date: May 2004
Posts: 120
Default

I think I got it. I just added a variable to where I had 0, so
Code:
Y = Variable To integer.getupperbound(1)
and the reason why it was happening was due to whatever the variable was. If I set it to the total map size at the beginning its quick.

So I guess I found a fix

I would still like some feedback though.
Reply With Quote
  #19  
Old 01-07-2005, 07:32 PM
ThePentiumGuy ThePentiumGuy is offline
Regular
 
Join Date: May 2003
Posts: 53
Default

OH! Your project! I forgot about it. I'll check it out right now
Reply With Quote
  #20  
Old 01-08-2005, 09:04 AM
ThePentiumGuy ThePentiumGuy is offline
Regular
 
Join Date: May 2003
Posts: 53
Default

Alright. So far I've been looking at the code in Notepad. I haven't run the exe yet (I need to get this to my .NET computer).

I'm gonna have to say - it's pretty good. It's nice and organized. I don't understand how your carry method works though, and in your comments it says you can't have 2d bitmap arrays.... you can . I'm guessing your carry method works like this:

Assuming you have a 3x3 array (new bitmap(2,2)) and you want to convert it to a 1-dimensional array (new bitmap())

elements (x,y) of first array = elements(x) of 2nd array
0,0 = 0
1,0 = 1
2,0 = 2

0,1 = 3
1,1 = 4
2,1 = 5

0,2 = 6
1,2 = 7
2,2 = 8

So is this your way of converting a 2d array to a 1d array?
Again, I haven't REALLY looked at the code yet. So I could be wrong.

-TPG
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Advertisement:





Free Publications
The ASP.NET 2.0 Anthology
101 Essential Tips, Tricks & Hacks - Free 156 Page Preview. Learn the most practical features and best approaches for ASP.NET.
subscribe
Programmers Heaven C# School Book -Free 338 Page eBook
The Programmers Heaven C# School book covers the .NET framework and the C# language.
subscribe
Build Your Own ASP.NET 3.5 Web Site Using C# & VB, 3rd Edition - Free 219 Page Preview!
This comprehensive step-by-step guide will help get your database-driven ASP.NET web site up and running in no time..
subscribe
Drawing a viewable area on a larger map
Drawing a viewable area on a larger map
Drawing a viewable area on a larger map Drawing a viewable area on a larger map
Drawing a viewable area on a larger map
Drawing a viewable area on a larger map
Drawing a viewable area on a larger map Drawing a viewable area on a larger map Drawing a viewable area on a larger map Drawing a viewable area on a larger map Drawing a viewable area on a larger map Drawing a viewable area on a larger map Drawing a viewable area on a larger map
Drawing a viewable area on a larger map
Drawing a viewable area on a larger map
 
Drawing a viewable area on a larger map
Drawing a viewable area on a larger map
 
-->