title: Rendering a 2D Map in a Game - Cropping and Scrolling
body: <p>OK.
  I'm in essense trying to make my own interpretation of the NES hardware, so I can make a game that ideally would resemble what a NES game would look like.  I'm currently stuck with how to adjust how to draw the playfield to the video memory (back buffer).</p>
  
  <p><strong>BACKBUFFER</strong></p>
  
  <p>The NES had restrictions on the nametable, or backbuffer.  For my example, the backbuffer is 256x240pixels big, or the size of one screen.  If I drew this to the TV, it would fill up the screen perfectly.  Now, if I drew this to the screen with an offset of X=5, the entire image would be shifted and would wrap around the screen.</p>
  
  <p>For example.....</p>
  
  <pre><code>ORIGINAL, NO OFFSET:                      DRAWN WITH OFFSET OF X=5:
  ABCDEFGHIJK                               GHIJKABCDEF
  
  DRAWN WITH OFFSET OF X=-5:
  FGHIJKABCDE
  </code></pre>
  
  <p>The screen is split up into squares 8x8 pixels each, totalling 32x30 rows and columns.  (256x240 pixels).  The offset is represented in pixels - not columns; so in theory, I could offset the screen by 5 pixels and every column would be shifted to the right by five pixels.</p>
  
  <p><strong>LEVEL DESIGN</strong></p>
  
  <p>My stages are made up of screens, containing data that is represented in 16x15 rows and columns, each by 16x16 pixels.  This is to emulate how many NES games stored level data - each tile holds info about what should be in each 8x8 block.</p>
  
  <p>E.g.:</p>
  
  <pre><code>AA
  BC     with A,B,C,D representing what 8x8 graphic should go where
  </code></pre>
  
  <p>Level design is represented by this as well, with each number being a different screen and - meaning nothing, null.</p>
  
  <pre><code>-----
  -123-
  ---4-
  --54-
  -----
  </code></pre>
  
  <p><strong>CHARACTER PLACEMENT</strong>
  This is easy.  I already know how I can determine which table, row, and column my characters are on based on their absolute positioning.  I can also determine the relative positioning within the screen.</p>
  
  <p>With this info, I can easily figure out which columns are to the left and right of the character, if any (if the character is at the left side of screen 1, thered be no more level left)</p>
  
  <p><strong>SO HERE'S THE QUESTION DUN DUN DUN</strong>
  How do I draw my levels to the screen, so that they scroll from one to the next.
  It would be relatively easy to draw one full screen at a time, and when the character gets to the edge just flip to another screen.</p>
  
  <p>However, the problem I'm conceptually having is that I need to 'stream' the level data onto the screen.  That, lets say the character moves 24 pixels to the right.  The BG needs to move as well.</p>
  
  <p>So, I need to adjust the scrolling of the backbuffer by 24 pixels.  However, just scrolling alone will cause the screen to wrap over, diplsaying old portion of the level.  So, while scrolling I need to make sure to draw new pieces of the level to the back buffer.  But before I can do that, I need to figure out which tiles need to get drawn first.  And if the person goes 24 pixels to the left, I need to redraw tiles onto the backbuffer and change the offset accordingly as well.</p>
  
  <p>And let's not forget that if the character moves right and there's no more level data to be drawn, there should be no offset but instead the character gets closer to the side of the screen (instead of being centered in the middle of the screen via the X axis).</p>
  
  <p>Basically, I just have a lot of different numbers and values stuck in my mind right now - trying to wrap my head around many concepts and they caused my brain to turn into goo.  Anyone have any perspective on how I can approach this?</p>
  
  <p>EDIT:  Using VB.Net.  C# is applicable as well ( I program in both)</p>