<?xml version="1.0" encoding="UTF-8"?>
<!--Generated by Site-Server v6.0.0-f7c6a7e017a96ad282e33de8deef039d6bd3206c-1 (http://www.squarespace.com) on Sun, 25 Aug 2024 14:29:49 GMT
--><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://www.rssboard.org/media-rss" version="2.0"><channel><title>VIC-II Articles - Dustlayer</title><link>https://dustlayer.com/vic-ii/</link><lastBuildDate>Fri, 20 Mar 2015 12:09:07 +0000</lastBuildDate><language>en-US</language><generator>Site-Server v6.0.0-f7c6a7e017a96ad282e33de8deef039d6bd3206c-1 (http://www.squarespace.com)</generator><description><![CDATA[]]></description><item><title>VIC-II for Beginners Part 5 - Bringing Sprites in good Shape</title><dc:creator>actraiser</dc:creator><pubDate>Mon, 29 Apr 2013 06:20:54 +0000</pubDate><link>https://dustlayer.com/vic-ii/2013/4/28/vic-ii-for-beginners-part-5-bringing-sprites-in-shape</link><guid isPermaLink="false">511651d6e4b0a31c035e30aa:512309eee4b08a7615973186:5174ee02e4b084de2912b980</guid><description><![CDATA[<ul>
<li><a href="https://dustlayer.com/vic-ii/2013/4/22/when-visibility-matters">VIC-II for Beginners Part 1 - When Visibility Matters</a></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/23/vic-ii-for-beginners-part-2-to-have-or-to-not-have-character">VIC-II for Beginners Part 2 - To have or not to have Character</a></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/25/vic-ii-for-beginners-beyond-the-screen-rasters-cycle">VIC-II for Beginners Part 3 - Beyond the Screen, Rasters and Cycles</a></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/26/vic-ii-for-beginners-screen-modes-cheaper-by-the-dozen">VIC-II for Beginners Part 4 - Screen Modes Cheaper by the Dozen</a></li>
<li><strong>VIC-II for Beginners Part 5 - Bringing Sprites in good Shape</strong></li>
</ul>

<hr />



  <h3>​Games Unlimited</h3><p>Hardware Sprites in addition to the Soft Scrolling capabilities were major reasons why the Commodore C64 was the ultimate gaming machine in the 80s. Sprite-based games were very popular in Arcades and converting them to the C64 often turned out not to be too difficult plus the outcome was sometimes exceptional good by home computer standards. It's no big secret that the availability of masses of games whether they were exclusive or conversions won the market for the C64 against the competition by Sinclair, Amstrad and Atari.&nbsp;</p><p>Thanks to the VIC-II &nbsp;we can officially move 8 sprites independently over the screen at any time - but when combined with Interrupt programming and a method called Sprite-Multiplexing much more action is actually possible. Many commercial games in fact move 16 or 24 sprites over the screen. <a href="http://www.mobygames.com/game/c64/armalyte/screenshots" target="_blank">Armalyte</a> even manages to display up to 30 Sprites at the same time which is an exceptional&nbsp;achievement within a game. But how do Sprites work, how are they stored and retrieved in memory, how can we flip through frames to animate our Sprites?​</p><p>That will be the topics for the final part of the VIC-II beginners series. Note that I enumerate the eight Sprites from from 0 to 7 which &nbsp;corresponds nicely with a few sprite-mapped registers where a Bit#0 corresponds to some&nbsp;configuration&nbsp;for Sprite#0, Bit#1 for Sprite#1 etc - so when I refer for example to the 5th Sprite we talk about Sprite#4.</p><p></p><h3>​Standard and Multicolor Sprites</h3><p>A Standard Sprite on the C64 is a 2D-Object drawn in a 24x21 grid. 24x21 results in 504 Bits or 63 Bytes of required memory per Sprite Shape. The term <em>Sprite Shape</em> refers in a strict sense to one single frame of a Sprite which can consists of many individual frames to generate the illusion of motion when played back consecutively. In a day by day discussion the expressions Sprite and Sprite Shape are usually&nbsp;exchangeable though. &nbsp;Finally, for calculations&nbsp;convenience&nbsp;a trailing Zero Byte is added to each Sprite Shape which increases the total required memory to 64 Bytes per shape. </p><p>Our C64 Sprites come in two flavors - Standard and Multicolor. The Standard Sprite has a 24x21 matrix with one shared Background Color and one individual Foreground Color.​ Then there is once again a Multicolor option for Sprites which follows by the same principles as seen in Multicolor Character Mode or Multicolor Bitmap Mode. The horizontal resolution is cut in half which brings us down to a 12x21 grid. As with the other Multicolor Modes two Bits are paired at a time to enable us encoding up to four different values into each of the wide pixels. Those values again represent different sources of color information. Let's enlarge upon those two modes.</p><p></p><p><strong>In Standard Mode </strong>you can choose one Foreground Color per Sprite and a shared Background Color applicable to all Sprites. The individual Foreground Color per Sprite is stored in the 8 Registers located from $D027 to $D02E - as expected by storing a value from $00 to $0F. ​The Background Color corresponds to the content of $D021. For all Registers which store color information apply that only Bit#0 to Bit#3 are taken into account while the higher Bits are ignored. For example, setting $D021 to $01 (%00000001) or to $81 (%10000001) will both set Background Color to White as $01 is the color code for White and the upper four Bits are ignored.&nbsp;</p><p><strong>Multicolor Mode</strong>&nbsp;can be turned on for each of the 8 Sprites individually so mixing Standard and Multicolor Sprites is possible. When Multicolor is activated the Sprite has as expected four different color sources encoded in the paired horizontal pixels, namely the individual color per Sprite retrieved from $D027 to $D02E, the shared Background Color from $D021 and two additional shared colors stored in $D025 and $D026. ​Each Bit in the sprite-mapped register $D01C determine wether a Sprite is configured for Standard or Multicolor Mode.</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367148221883-BAJX8TH7FSYLBINUFGMF/dustlayer.com-standard-and-multicolor-data-c64-sprites.png" data-image-dimensions="947x493" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367148221883-BAJX8TH7FSYLBINUFGMF/dustlayer.com-standard-and-multicolor-data-c64-sprites.png?format=1000w" width="947" height="493" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367148221883-BAJX8TH7FSYLBINUFGMF/dustlayer.com-standard-and-multicolor-data-c64-sprites.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367148221883-BAJX8TH7FSYLBINUFGMF/dustlayer.com-standard-and-multicolor-data-c64-sprites.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367148221883-BAJX8TH7FSYLBINUFGMF/dustlayer.com-standard-and-multicolor-data-c64-sprites.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367148221883-BAJX8TH7FSYLBINUFGMF/dustlayer.com-standard-and-multicolor-data-c64-sprites.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367148221883-BAJX8TH7FSYLBINUFGMF/dustlayer.com-standard-and-multicolor-data-c64-sprites.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367148221883-BAJX8TH7FSYLBINUFGMF/dustlayer.com-standard-and-multicolor-data-c64-sprites.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367148221883-BAJX8TH7FSYLBINUFGMF/dustlayer.com-standard-and-multicolor-data-c64-sprites.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
      
        </figure>
      

    
  






  <p>Below we have a Standard Color Sprite in the 24*21 grid from the game Thrust and next to it a Multicolor Sprite with the 12*21 Matrix from the game Wizball. When you look at the Game Screenshots you will hardly notice that one of the Sprites has only half of the horizontal resolution. It's not only that actual dimensions in Wizball have not really changed as pixels were just paired but also the additional colors make the Multicolor Sprite just look much better. That's why Multicolor Sprites are usually what you will encounter in the C64 world of games - unless it's a 1:1 conversion of a Sinclair Spectrum game.​​</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366986070294-3BWR0YVIU0N5QTLP7KLC/dustlayer.com-thrust-sprite.png" data-image-dimensions="384x336" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366986070294-3BWR0YVIU0N5QTLP7KLC/dustlayer.com-thrust-sprite.png?format=1000w" width="384" height="336" sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366986070294-3BWR0YVIU0N5QTLP7KLC/dustlayer.com-thrust-sprite.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366986070294-3BWR0YVIU0N5QTLP7KLC/dustlayer.com-thrust-sprite.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366986070294-3BWR0YVIU0N5QTLP7KLC/dustlayer.com-thrust-sprite.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366986070294-3BWR0YVIU0N5QTLP7KLC/dustlayer.com-thrust-sprite.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366986070294-3BWR0YVIU0N5QTLP7KLC/dustlayer.com-thrust-sprite.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366986070294-3BWR0YVIU0N5QTLP7KLC/dustlayer.com-thrust-sprite.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366986070294-3BWR0YVIU0N5QTLP7KLC/dustlayer.com-thrust-sprite.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>Simple 24x21 sprite in Standard Mode ripped from the game Thrust.</p>
          </figcaption>
        
      
        </figure>
      

    
  













































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987308175-SGZE1HMU1FFKRKMU8UNF/Screen+Shot+2013-04-26+at+4.41.06+PM.png" data-image-dimensions="384x338" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987308175-SGZE1HMU1FFKRKMU8UNF/Screen+Shot+2013-04-26+at+4.41.06+PM.png?format=1000w" width="384" height="338" sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987308175-SGZE1HMU1FFKRKMU8UNF/Screen+Shot+2013-04-26+at+4.41.06+PM.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987308175-SGZE1HMU1FFKRKMU8UNF/Screen+Shot+2013-04-26+at+4.41.06+PM.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987308175-SGZE1HMU1FFKRKMU8UNF/Screen+Shot+2013-04-26+at+4.41.06+PM.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987308175-SGZE1HMU1FFKRKMU8UNF/Screen+Shot+2013-04-26+at+4.41.06+PM.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987308175-SGZE1HMU1FFKRKMU8UNF/Screen+Shot+2013-04-26+at+4.41.06+PM.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987308175-SGZE1HMU1FFKRKMU8UNF/Screen+Shot+2013-04-26+at+4.41.06+PM.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987308175-SGZE1HMU1FFKRKMU8UNF/Screen+Shot+2013-04-26+at+4.41.06+PM.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​The popular Sprite Mode is the Multicolor Sprite - here used in the game Wizball.&nbsp;</p>
          </figcaption>
        
      
        </figure>
      

    
  













































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987241231-5Q82ZP7GOSZJOSED3344/dustlayer.com-thrust-game-c64.gif" data-image-dimensions="320x240" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987241231-5Q82ZP7GOSZJOSED3344/dustlayer.com-thrust-game-c64.gif?format=1000w" width="320" height="240" sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987241231-5Q82ZP7GOSZJOSED3344/dustlayer.com-thrust-game-c64.gif?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987241231-5Q82ZP7GOSZJOSED3344/dustlayer.com-thrust-game-c64.gif?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987241231-5Q82ZP7GOSZJOSED3344/dustlayer.com-thrust-game-c64.gif?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987241231-5Q82ZP7GOSZJOSED3344/dustlayer.com-thrust-game-c64.gif?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987241231-5Q82ZP7GOSZJOSED3344/dustlayer.com-thrust-game-c64.gif?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987241231-5Q82ZP7GOSZJOSED3344/dustlayer.com-thrust-game-c64.gif?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987241231-5Q82ZP7GOSZJOSED3344/dustlayer.com-thrust-game-c64.gif?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​Thrust sprite in the game</p>
          </figcaption>
        
      
        </figure>
      

    
  













































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987625325-HBEHTWHZMNSSGQDOHIB1/dustlayer.com-wizball-game-c64.png" data-image-dimensions="320x240" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987625325-HBEHTWHZMNSSGQDOHIB1/dustlayer.com-wizball-game-c64.png?format=1000w" width="320" height="240" sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987625325-HBEHTWHZMNSSGQDOHIB1/dustlayer.com-wizball-game-c64.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987625325-HBEHTWHZMNSSGQDOHIB1/dustlayer.com-wizball-game-c64.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987625325-HBEHTWHZMNSSGQDOHIB1/dustlayer.com-wizball-game-c64.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987625325-HBEHTWHZMNSSGQDOHIB1/dustlayer.com-wizball-game-c64.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987625325-HBEHTWHZMNSSGQDOHIB1/dustlayer.com-wizball-game-c64.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987625325-HBEHTWHZMNSSGQDOHIB1/dustlayer.com-wizball-game-c64.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366987625325-HBEHTWHZMNSSGQDOHIB1/dustlayer.com-wizball-game-c64.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​The animated sprite in the game</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <h3>Collision&nbsp;Detection on the Interrupt</h3><p>Of course Sprites would be kinda pointless if you can not make them hit anything in a game. Whether it is a collision with background graphics, say a tree or with other sprites in a game - you want to be able to get notified by the C64 when something happens. In <a href="https://dustlayer.com/c64-coding-tutorials/2013/4/8/episode-2-3-did-i-interrupt-you">Episode 2-3</a> of our introduction into C64 intros I explained how we ask the VIC-II to let us know when something of interest occurs, e.g. when the Raster Beam reached a certain line on the screen. Other topics of interest the VIC-II can be asked for are in fact collisions between two Sprites or the collision between a Sprite and Background graphics.&nbsp;</p><p><font color="#111111"><b>Interrupts revisited</b></font></p><p>There are two important registers, $D019 and $D01A. The Interrupt Request Register $D019 monitors four different sources of interrupts all the time. Bit#0 - Bit#3 do nothing but set Bits low and high depending on whats is going on in the system in respect to any of four different interrupt sources. The sources for Interrupts by the VIC-II are either Raster Interrupts, Lightpen interation and two Interrupts for Sprite&nbsp;Collisions. So two of those Bits monitor the Sprite activities, namely Bit#2 for Sprite-Sprite-Collisions and Bit#1 for Sprite-Background Collisions.​ Whenever Bit#2 is set high then two Sprites must have collided and if Bit#1 is set high a Sprite has collided with Background - and by Background the VIC-II is&nbsp;referring&nbsp;to anything non-Sprite on the screen plus which is not using the color stored in $D021.&nbsp;</p><p>Now that we know there is a place where activities are monitored all the time we want to ask the VIC-II to let us know when a certain event has happened. For this we need D01A, the Interrupt Mask Register, &nbsp;sometimes also called Interrupt Enable Register. Bit#0 - Bit#3 are identical to the corresponding Bits in $D019 but their job in $D01A is to command $D019 to let us know when any of the events we set to high in the Mask Register&nbsp;occur. Using $D01A we basically ask $D019 to trigger an interruption so we can react to the event.</p><p>After we have configured our desired event in $D01A we just need to wait until &nbsp;$D019 sets Bit#7 high. This is the signal that an event we asked an interruption for has indeed happened.​ If we configured more than one event in $D01A we additionally need to check which of the four Bits #0-#3 have been set high in addition to Bit#7 in $D019. &nbsp;</p><p>Finally once an Interrupt Bit has been set, it's "latched" in and must be cleared by writing a 1 to that Bit in the Interrupt Request Register as soon as you're ready to handle it. This allows selective interrupt handling.</p><p>Let's apply that knowhow by looking at two use cases.</p><p><strong>1. Sprite-Sprite Collision</strong></p><p>In the Interrupt Mask Register $D01A we need to set Bit#2 high to ask for an interruption in case of a Sprite-Sprite collision. As soon as two Sprites collide $D019 will set Bit#2 and Bit#7 high accordingly. Bit#2 will be set high because it does this anyways - remember $D019 monitors activities all the time and Bit#7 is set because we specifically asked to be notified about that event. But there is more information we get. Once the interruption happens the Register $D01E will come into play. Each Bit in $D01E corresponds to one of the 8 Sprites. The Sprite Bits which are involved in the&nbsp;collision&nbsp;will be set high. &nbsp;We now have everything in place to react to a collision: a notification when collision happens and the actual Sprites involved. Now when the interrupt is triggered we could for example playback an explosion animation for the involved Sprites or increase the Scores or what not. By the way after the interrupt was triggered. we need to clear Bit#7 again in $D019 by acknowledging the IRQ. It will not reset automatically.​</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063432803-BOGTVF1WSTB5G8OFWTZD/dustlayer.com-sprite-sprite-colission-c64.png" data-image-dimensions="919x308" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063432803-BOGTVF1WSTB5G8OFWTZD/dustlayer.com-sprite-sprite-colission-c64.png?format=1000w" width="919" height="308" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063432803-BOGTVF1WSTB5G8OFWTZD/dustlayer.com-sprite-sprite-colission-c64.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063432803-BOGTVF1WSTB5G8OFWTZD/dustlayer.com-sprite-sprite-colission-c64.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063432803-BOGTVF1WSTB5G8OFWTZD/dustlayer.com-sprite-sprite-colission-c64.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063432803-BOGTVF1WSTB5G8OFWTZD/dustlayer.com-sprite-sprite-colission-c64.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063432803-BOGTVF1WSTB5G8OFWTZD/dustlayer.com-sprite-sprite-colission-c64.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063432803-BOGTVF1WSTB5G8OFWTZD/dustlayer.com-sprite-sprite-colission-c64.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063432803-BOGTVF1WSTB5G8OFWTZD/dustlayer.com-sprite-sprite-colission-c64.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​Registers affected when two Sprites collided and notification by Interrupt was requested.</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <p><strong>2. Sprite-Background Collision</strong></p><p>When you have understood Sprite-Sprite-Collision, then this is now very easy. Again we ask for interruption for the event of collision, this time by setting Bit#1 in $D01A as we now are interested in Sprite-Background Collisions. Again $D019 will&nbsp;set Bit#7 high&nbsp;in addition to Bit#1 when the collision takes place after we registered it in $D01A. This time $D01F which is again mapping each of its Bits to one of our 8 Sprites will let us know which Sprite was involved in the collision. &nbsp;</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063716547-G9W242N8KEAWY9WJMFAL/dustlayer.com-sprite-background-colission-c64.png" data-image-dimensions="928x312" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063716547-G9W242N8KEAWY9WJMFAL/dustlayer.com-sprite-background-colission-c64.png?format=1000w" width="928" height="312" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063716547-G9W242N8KEAWY9WJMFAL/dustlayer.com-sprite-background-colission-c64.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063716547-G9W242N8KEAWY9WJMFAL/dustlayer.com-sprite-background-colission-c64.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063716547-G9W242N8KEAWY9WJMFAL/dustlayer.com-sprite-background-colission-c64.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063716547-G9W242N8KEAWY9WJMFAL/dustlayer.com-sprite-background-colission-c64.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063716547-G9W242N8KEAWY9WJMFAL/dustlayer.com-sprite-background-colission-c64.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063716547-G9W242N8KEAWY9WJMFAL/dustlayer.com-sprite-background-colission-c64.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367063716547-G9W242N8KEAWY9WJMFAL/dustlayer.com-sprite-background-colission-c64.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​Registers affected when a Sprite collides with the Background and notification by Interrupt was requested.</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <p><strong>There is one more thing</strong>​...</p><p>To keep you interested I waited to share the following. The above way of detecting&nbsp;collisions&nbsp;is not really a viable one but just coding "by the book". Some games rather implement their own detection routines for sprite/sprite collisions using bounding boxes which is much more efficient and above all make more sense for most use cases. Also Sprite/Background collisions are rather detected by scanning the character memory map and keep track how they relate to a Sprite position. </p><p>Anyways, it does not hurt when you understand how things work the official way!&nbsp;</p><h3>Output to the Screen - Ready, Set, Go!</h3><p>To display a Sprite on the Screen we need to enable it. The 8 Bits in $D015 turn on and off any of our Sprites. To move Sprites we need to position them and for this we have 17 Registers from $D000 to $D010. 8 Registers store the X-Coordinate (horizontal position) of any of the 8 Sprites, another 8 Registers the Y-Coordinates (vertical position) accordingly. Since we know already that our Canvas for Sprites is 512x256 large it is clear why we additional need a 9th Bit for each of the 8 X-Coordinates. The Register $D010 is that sprite-mapped Register helping out with that extra Bits we need to pass Position 255 horizontally. Don't confuse this Register with $D011 by the way - its Bit#0 functions as 9th Bit as well but for the Raster Line counter in collaboration with $D012.&nbsp;</p><p>Sprites can be moved freely across the screen. In fact they are not limited to the 320x200 area but their scope of activity spreads over a&nbsp;<strong>512x256&nbsp;</strong>grid - this makes it possible to position Sprites off-screen and let them move into the visible area.&nbsp;​This really needs to be remembered as it is crucial when working with the the positioning - Sprites can cover a much larger canvas than the visible area of the C64 screen.​</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367151148966-1GWQX4TAUIXJGDP2H4HJ/dustlayer.com-sprite-canvas.png" data-image-dimensions="841x542" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367151148966-1GWQX4TAUIXJGDP2H4HJ/dustlayer.com-sprite-canvas.png?format=1000w" width="841" height="542" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367151148966-1GWQX4TAUIXJGDP2H4HJ/dustlayer.com-sprite-canvas.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367151148966-1GWQX4TAUIXJGDP2H4HJ/dustlayer.com-sprite-canvas.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367151148966-1GWQX4TAUIXJGDP2H4HJ/dustlayer.com-sprite-canvas.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367151148966-1GWQX4TAUIXJGDP2H4HJ/dustlayer.com-sprite-canvas.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367151148966-1GWQX4TAUIXJGDP2H4HJ/dustlayer.com-sprite-canvas.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367151148966-1GWQX4TAUIXJGDP2H4HJ/dustlayer.com-sprite-canvas.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367151148966-1GWQX4TAUIXJGDP2H4HJ/dustlayer.com-sprite-canvas.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​The area where Sprites can be positioned is actually much larger as the visible screen area</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <p>When positioning a Sprite using X/Y coordinates, the upper left Pixel of the Shape is the determining one. In other words, when you put a Sprite at Position X=50 and Y=50 then this is exactly the position on screen where the first Bit of your Sprite is drawn to followed by the other 503 Bits across the 24x21 grid to complete the Shape. ​</p><p>Last but not least there are two additional interesting registers $D01D and $D017. Both stretch the Sprite either horizontally or vertically by the factor 2. The number of used pixels respectively the 24x21 Matrix are not affected by this stretch and also the collision zone of the sprite is not changing from a visual standpoint. Everything not Background color will still be recognized as collision zone including all stretches.&nbsp;</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367167349035-SFTF4YYKXTOZ27ZTBV2H/dustlayer.com-stretch-sprite.png" data-image-dimensions="358x273" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367167349035-SFTF4YYKXTOZ27ZTBV2H/dustlayer.com-stretch-sprite.png?format=1000w" width="358" height="273" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367167349035-SFTF4YYKXTOZ27ZTBV2H/dustlayer.com-stretch-sprite.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367167349035-SFTF4YYKXTOZ27ZTBV2H/dustlayer.com-stretch-sprite.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367167349035-SFTF4YYKXTOZ27ZTBV2H/dustlayer.com-stretch-sprite.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367167349035-SFTF4YYKXTOZ27ZTBV2H/dustlayer.com-stretch-sprite.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367167349035-SFTF4YYKXTOZ27ZTBV2H/dustlayer.com-stretch-sprite.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367167349035-SFTF4YYKXTOZ27ZTBV2H/dustlayer.com-stretch-sprite.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367167349035-SFTF4YYKXTOZ27ZTBV2H/dustlayer.com-stretch-sprite.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​Four Sprites Shapes: normal, horizontally stretched, vertically stretched and both sides stretched&nbsp;</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <h3>Storing and Fetching Sprites from Memory</h3><p>We already learned a lot about Sprites, that is the different Sprite Modes, how to get notified on the interrupt on collisions and how to activate and position a Sprite on screen. Now the final piece is to actually understand where those Sprite Shapes are located in memory and how we store and retrieve the sprite data. </p><p>At the very end of the Screen RAM block the last 8 Bytes are used as so-called Sprite Pointers. In standard configuration that would be the memory locations $07F8 to $07FF or Decimal 2040 to 2047. &nbsp;Since it's 8 Bytes and we have 8 Sprites we are obviously supposed to be able to locate a Sprite Shape by a number from 0 to 255 - anywhere in memory!  You should be curious now how this is possible because we are working with 16Bit-addresses in the C64 after all, 8 Bits are not enough to address all 64Kbyte of RAM.</p><p>Remember that the VIC-II can only look at 16Kbyte of RAM at a time. A Sprite Shape has a fixed size of 64 Bytes and since a shape must be located somewhere the VIC-II can see it there are indeed only 256 different locations available per bank as 16384 (bytes size of 16Kb bank) divided by 64 (bytes size of a shape) equals 256 possibilities.&nbsp;</p><p>That is exactly why a single byte is all we need to point to a Sprite Shape. ll we need to take care of is that our Sprite Shape is located in a memory address in the currently active 16Kb bank that is divisable by 64. Let's assume we are in the default VIC-II Bank 3 that ranges from $0000 to $3FFF and we want to store a Sprite Shape for Sprite#0 starting at memory location $1600. For that location the Sprite Pointer in $07F8 would be $58. <strong>Too fast? Here comes the math!</strong></p><p>$1600 or Decimal 5632 divided by 64 equals Decimal 88 or Hexadecimal $58. When we put $58 in location $07F8 the VIC-II will read 64 Bytes starting at $1600 to fetch our Sprite Shape. The content of the 64th Byte has no influence on the shape as it is defined by its 504 pixels (=63 Bytes).</p><h3>Sprite Priorities - who covers what</h3><p>The last thing you need to consider when working with Sprites are priorities which determine which Sprite overlays another Sprite or which Sprite overlays Background Graphics and vice-versa.</p><p>Register $D01B is again a sprite-mapped register. If a Bit is set high then the Background overlays the corresponding Sprite, if set low, the Sprite overlays the Background.</p><p>mong Sprites themselves the order of priority is already set by default and can not be changed. The higher the Sprite number, the lower is its priority. Sprite#0 has the highest priority and will overlay any other of the 7 Sprites. Sprite #3 will overlay Sprite #4 - Sprite#7 but can be covered by Sprite#0 - Sprite#2.</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367177190054-DAQUV74TWVTPH81YIT86/dustlayer.com-uridium-sprite-priorities-c64.png" data-image-dimensions="607x171" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367177190054-DAQUV74TWVTPH81YIT86/dustlayer.com-uridium-sprite-priorities-c64.png?format=1000w" width="607" height="171" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367177190054-DAQUV74TWVTPH81YIT86/dustlayer.com-uridium-sprite-priorities-c64.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367177190054-DAQUV74TWVTPH81YIT86/dustlayer.com-uridium-sprite-priorities-c64.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367177190054-DAQUV74TWVTPH81YIT86/dustlayer.com-uridium-sprite-priorities-c64.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367177190054-DAQUV74TWVTPH81YIT86/dustlayer.com-uridium-sprite-priorities-c64.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367177190054-DAQUV74TWVTPH81YIT86/dustlayer.com-uridium-sprite-priorities-c64.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367177190054-DAQUV74TWVTPH81YIT86/dustlayer.com-uridium-sprite-priorities-c64.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367177190054-DAQUV74TWVTPH81YIT86/dustlayer.com-uridium-sprite-priorities-c64.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>The C64 already defines priorities between sprites. Sprite#0 has the highest priority, Sprite#7 the lowest.</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <h3>Painting and Animating Sprites</h3><p>​To animate Sprites you draw a handful of coherent Sprite Shapes for a flip-book style animation and store all of them next to each other in memory. It actually does not matter where you put them as long as you know which Shape you want to display next in an animation. Let's assume the first frame for Sprite#0 is at $1600, next one at $1640 and a third frame at $1680. To give the illusion of animation all you need to do is to iterate the Sprite Pointer in $07F8 over the locations of the frames - in our example you would iterate over the pointer values $58, $59 and $5A. If you do this iteration once per screen refresh you achieve a slick 60 frames per second animation. How many Frames you use per Sprite Animation is only limited by memory.&nbsp;</p><p></p><p></p><p></p><p></p><p><strong>How to create Sprites Shapes and Animations</strong></p><p>You want to paint and animate Sprites, of course - this is a very simple process: just buy a block with quad-ruled paper, draw a 24x21 grid and then for each set Bit just fill the appropriate cell on the paper. Then calculate the decimal value of each row, convert to Hexadecimal equivalent and write it into C64 memory. Repeat for all frames of your animated Sprite and all other Sprites you want to use in the game. For Multicolor based Sprites you of course also want to consider putting down the Bitmask information for each pair of Bits and have some colored pencils at hand to test different color combinations.</p><p><strong>If this does not sound</strong>&nbsp;<strong>like exciting work for a few weeks I don't know what does!</strong></p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367067507652-DOYKZVFO5VZ2ZKF78SEW/dustlayer.com-sprite-draft-paper.jpg" data-image-dimensions="1920x1440" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367067507652-DOYKZVFO5VZ2ZKF78SEW/dustlayer.com-sprite-draft-paper.jpg?format=1000w" width="1920" height="1440" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367067507652-DOYKZVFO5VZ2ZKF78SEW/dustlayer.com-sprite-draft-paper.jpg?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367067507652-DOYKZVFO5VZ2ZKF78SEW/dustlayer.com-sprite-draft-paper.jpg?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367067507652-DOYKZVFO5VZ2ZKF78SEW/dustlayer.com-sprite-draft-paper.jpg?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367067507652-DOYKZVFO5VZ2ZKF78SEW/dustlayer.com-sprite-draft-paper.jpg?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367067507652-DOYKZVFO5VZ2ZKF78SEW/dustlayer.com-sprite-draft-paper.jpg?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367067507652-DOYKZVFO5VZ2ZKF78SEW/dustlayer.com-sprite-draft-paper.jpg?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367067507652-DOYKZVFO5VZ2ZKF78SEW/dustlayer.com-sprite-draft-paper.jpg?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​The old-school requirements to draw Sprites is using a piece of paper, a pen and a calculator.</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <p>​<strong>Wait!&nbsp;</strong>​I was just kidding of course - it's not 1983 anymore! There are a few Sprite Editors out there which work perfectly well with your mouse skills and offer hot-switching between Multicolor and Standard mode as well as animated timelines to see your Sprite in action. I will introduce SpritePad in one of the tutorials including how to run this Windows-Program on Mac OSX.​</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367005022020-L1DEKKRE0ASX6I18WQ54/dustlayer-spritepad-macosx.png" data-image-dimensions="704x514" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367005022020-L1DEKKRE0ASX6I18WQ54/dustlayer-spritepad-macosx.png?format=1000w" width="704" height="514" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367005022020-L1DEKKRE0ASX6I18WQ54/dustlayer-spritepad-macosx.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367005022020-L1DEKKRE0ASX6I18WQ54/dustlayer-spritepad-macosx.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367005022020-L1DEKKRE0ASX6I18WQ54/dustlayer-spritepad-macosx.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367005022020-L1DEKKRE0ASX6I18WQ54/dustlayer-spritepad-macosx.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367005022020-L1DEKKRE0ASX6I18WQ54/dustlayer-spritepad-macosx.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367005022020-L1DEKKRE0ASX6I18WQ54/dustlayer-spritepad-macosx.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1367005022020-L1DEKKRE0ASX6I18WQ54/dustlayer-spritepad-macosx.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​SpritePad is an excellent Win32-based editor to draw and animate Sprites for the C64.&nbsp;</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <p>This closes the introduction into the VIC-II - it should have helped you to get some fundamental knowhow how graphics work in the Commodore C64. We only scratched the surface though - there is much more to learn about the VIC-II. Stay tuned. ​</p><p>-act</p>]]></description></item><item><title>VIC-II for Beginners Part 4 - Screen Modes Cheaper by the Dozen</title><dc:creator>actraiser</dc:creator><pubDate>Fri, 26 Apr 2013 08:05:24 +0000</pubDate><link>https://dustlayer.com/vic-ii/2013/4/26/vic-ii-for-beginners-screen-modes-cheaper-by-the-dozen</link><guid isPermaLink="false">511651d6e4b0a31c035e30aa:512309eee4b08a7615973186:5174edb3e4b08db710756441</guid><description><![CDATA[<ul>
<li><a href="https://dustlayer.com/vic-ii/2013/4/22/when-visibility-matters">VIC-II for Beginners Part 1 - When Visibility Matters</a></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/23/vic-ii-for-beginners-part-2-to-have-or-to-not-have-character">VIC-II for Beginners Part 2 - To have or not to have Character</a></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/25/vic-ii-for-beginners-beyond-the-screen-rasters-cycle">VIC-II for Beginners Part 3 - Beyond the Screen, Rasters and Cycles</a></li>
<li><strong>VIC-II for Beginners Part 4 - Screen Modes Cheaper by the Dozen</strong></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/28/vic-ii-for-beginners-part-5-bringing-sprites-in-shape">VIC-II for Beginners Part 5 - Bringing Sprites in good Shape</a></li>
</ul>

<hr />



  <h3>Screen Modes - Spoilt for Choice</h3><p> </p><p>Thanks to the&nbsp;very versatile VIC-II the Commodore C64 has various possibilities to work with the screen. We distinguish between modes which are either Character-based or those which are Bitmap-based. Character-based means that you work in a 8x8 Bit matrix while in a Bitmap-based mode you have control over each individual Pixel on the screen. &nbsp;</p><p>Both of the those main modes can &nbsp;be used with a default Standard Color or an alternative Multicolor option. There is only one special Character-based mode called Extended Background Color Mode which can not be used with the Multicolor option. &nbsp;I will go through all combinations and discuss implications in this article. It should be a good reference for later use.</p><p> </p><p>I will explain the official modes in this beginners series - there are plenty of other modes created by developers who exploited VIC-II bugs and came up with some interesting possibilities. Any of the official modes will come with a table which summarizes where the individual data or color for the final output originates from.&nbsp;</p><p>The metrics and adresses used in this article assume that we work with the VIC-II in the standard memory configuration with VIC-II looking at Bank 3 ($0000 - $3FFF) and nothing was moved by the user, e.g. the Screen RAM location. If you switch to another bank or move anything within the 16Kb area the VIC-II is looking at you must of course consider this below.</p><p>Last but not least all modes can be mixed on the screen using interrupt programming, that is you could have a character-based mode in the lower third of the screen and Bitmap graphics in the upper part - think Graphic Text Adventures. How to do this will be subject to a tutorial.&nbsp;</p><p>Let's start!</p>


























  <h3>Character-Based Modes</h3><p>Character-Based modes work in the 40x25 screen grid with the standard 8x8 Bit Character Sets unless you modify them of course. When writing to the screen you allocate a character to one of the 1000 cells starting at $0400. Color RAM which starts at $D800 maps the 1000 cells of Screen RAM positions 1:1 so $D800 holds Color Information for $0400, $D801 for $0401 etc. &nbsp;</p><p>Don't reduce Character-Based Modes to just writing some text to the screen. In fact it is a common pattern to change the original character set of the Commodore C64 for building tiled background graphics for games and demos because it is much more efficient to for example to soft-scroll a background built from characters then doing the same with Bitmap-based graphics.<br></p>


























  <p><strong>1. Standard Character Mode</strong></p><p></p><p>When you turn on your C64 you actually see the first Character-Based Screen Mode - it's the&nbsp;<em>Standard Character Mode.&nbsp;</em>​The characters are retrieved from the Character Generator ROM. They share one common Background Color as defined in $D021 and an individual color stored in the lower 4 Bits of Color RAM at the position mapping the corresponding cell in Screen RAM.&nbsp;</p><p><strong>Characteristics:</strong></p><ul><li>8x8 Bit Matrix for each cell - supposed to be used with the Standard Character Sets from the Character Generator ROM.</li><li>A single shared background color</li><li>One individual foreground color</li></ul>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805433208-35AI9AQXLW3B48NA6JHD/dustlayer.com-c64-screen-standard-character-mode.png" data-image-dimensions="351x268" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805433208-35AI9AQXLW3B48NA6JHD/dustlayer.com-c64-screen-standard-character-mode.png?format=1000w" width="351" height="268" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805433208-35AI9AQXLW3B48NA6JHD/dustlayer.com-c64-screen-standard-character-mode.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805433208-35AI9AQXLW3B48NA6JHD/dustlayer.com-c64-screen-standard-character-mode.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805433208-35AI9AQXLW3B48NA6JHD/dustlayer.com-c64-screen-standard-character-mode.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805433208-35AI9AQXLW3B48NA6JHD/dustlayer.com-c64-screen-standard-character-mode.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805433208-35AI9AQXLW3B48NA6JHD/dustlayer.com-c64-screen-standard-character-mode.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805433208-35AI9AQXLW3B48NA6JHD/dustlayer.com-c64-screen-standard-character-mode.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805433208-35AI9AQXLW3B48NA6JHD/dustlayer.com-c64-screen-standard-character-mode.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​Sources of Data in Standard Character Mode</p>
          </figcaption>
        
      
        </figure>
      

    
  













































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805520668-3UKOT6W5LA4UEZAOLRGZ/dustlayer.com-data-source-for-standard-character-mode-c64" data-image-dimensions="350x285" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805520668-3UKOT6W5LA4UEZAOLRGZ/dustlayer.com-data-source-for-standard-character-mode-c64?format=1000w" width="350" height="285" sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805520668-3UKOT6W5LA4UEZAOLRGZ/dustlayer.com-data-source-for-standard-character-mode-c64?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805520668-3UKOT6W5LA4UEZAOLRGZ/dustlayer.com-data-source-for-standard-character-mode-c64?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805520668-3UKOT6W5LA4UEZAOLRGZ/dustlayer.com-data-source-for-standard-character-mode-c64?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805520668-3UKOT6W5LA4UEZAOLRGZ/dustlayer.com-data-source-for-standard-character-mode-c64?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805520668-3UKOT6W5LA4UEZAOLRGZ/dustlayer.com-data-source-for-standard-character-mode-c64?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805520668-3UKOT6W5LA4UEZAOLRGZ/dustlayer.com-data-source-for-standard-character-mode-c64?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805520668-3UKOT6W5LA4UEZAOLRGZ/dustlayer.com-data-source-for-standard-character-mode-c64?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​Source for data in Standard Character Mode.</p>
          </figcaption>
        
      
        </figure>
      

    
  













































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805468184-KMSAFEJ5V85ACTHLCP9Y/dustlayer.com-source--of-data-information-in-standard-character-mode" data-image-dimensions="345x283" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805468184-KMSAFEJ5V85ACTHLCP9Y/dustlayer.com-source--of-data-information-in-standard-character-mode?format=1000w" width="345" height="283" sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805468184-KMSAFEJ5V85ACTHLCP9Y/dustlayer.com-source--of-data-information-in-standard-character-mode?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805468184-KMSAFEJ5V85ACTHLCP9Y/dustlayer.com-source--of-data-information-in-standard-character-mode?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805468184-KMSAFEJ5V85ACTHLCP9Y/dustlayer.com-source--of-data-information-in-standard-character-mode?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805468184-KMSAFEJ5V85ACTHLCP9Y/dustlayer.com-source--of-data-information-in-standard-character-mode?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805468184-KMSAFEJ5V85ACTHLCP9Y/dustlayer.com-source--of-data-information-in-standard-character-mode?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805468184-KMSAFEJ5V85ACTHLCP9Y/dustlayer.com-source--of-data-information-in-standard-character-mode?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366805468184-KMSAFEJ5V85ACTHLCP9Y/dustlayer.com-source--of-data-information-in-standard-character-mode?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>Source of Data Information in Standard Character Mode</p>
          </figcaption>
        
      
        </figure>
      

    
  



<i>Writing to the Screen in Standard Character Mode</i>



  <p><strong>2. Multicolor Character Mode</strong></p><p>When we enable the multicolor option for that Character Mode by <em>setting Bit#4 in Register $D016 high </em>something very interesting happens. Instead of an 8x8 Matrix we have now a 4x8 Matrix where every two Bits are paired, so instead of a single pixel each "dot" has the length of two pixels next to each other. ​What this at first strange pattern overcomes is the limitation of only using a single foreground color! Using the 2-Bit wide Pixels we can now encode more information what color to use per each pair.</p><p>It is actually pretty clever because if you look at each double-wided pixel it becomes clear that any can hold any of four values, represented in Binary that is %00, %01, %10 and %11. With this we can now refer to one of four sources of color information as opposed to just have options between one foreground and one background color. Two of those sources are the already known Background Color Register $D021 as well as the Color RAM but additionally adds the lower four bits of the two registers $D022 and $D023. &nbsp;If we just switch to Multicolor right after turning the C64 on by setting Bit#4 of $D016 you will instantly notice the difference between the original 8x8 Matrix of Standard Character Mode and the 4x8 Matrix we transit to when adding in the Multicolor Option. &nbsp;</p><p></p><p>It looks awkward because the Standard Characters are not properly set up for Multicolor at this time and we also use the initial values of $D022 and $D023. By modifying the characters appropriately you could generate some exciting graphics but more importantly colorful tiles for the background of your game or demo. </p><p>There is one catch with setting Multicolor though. Turning it on using Bit#4 in $D016 will enable it globally for all Characters, however, you need to enable it on a character-by-character basis to have an effect. This is done by setting Bit#3 in the corresponding Color RAM location. The constraint is notable at once when you think about it. If you put a color code from 0-7 into the Color RAM location of a Character it will be displayed in Standard Mode. If you put in a value of 8-15 into that location - which simply means that Bit#3 is set high - you get a Multicolor-Character. This restricts you in the selection of colors you can actually use in a Multicolor Character. &nbsp;</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366894994506-SH2Z345KR6LNXCN3QU6N/dustlayer.com-poke-to-switch-to-multicolor-character-mode" data-image-dimensions="713x541" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366894994506-SH2Z345KR6LNXCN3QU6N/dustlayer.com-poke-to-switch-to-multicolor-character-mode?format=1000w" width="713" height="541" sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366894994506-SH2Z345KR6LNXCN3QU6N/dustlayer.com-poke-to-switch-to-multicolor-character-mode?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366894994506-SH2Z345KR6LNXCN3QU6N/dustlayer.com-poke-to-switch-to-multicolor-character-mode?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366894994506-SH2Z345KR6LNXCN3QU6N/dustlayer.com-poke-to-switch-to-multicolor-character-mode?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366894994506-SH2Z345KR6LNXCN3QU6N/dustlayer.com-poke-to-switch-to-multicolor-character-mode?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366894994506-SH2Z345KR6LNXCN3QU6N/dustlayer.com-poke-to-switch-to-multicolor-character-mode?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366894994506-SH2Z345KR6LNXCN3QU6N/dustlayer.com-poke-to-switch-to-multicolor-character-mode?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366894994506-SH2Z345KR6LNXCN3QU6N/dustlayer.com-poke-to-switch-to-multicolor-character-mode?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​This poke will switch to Multicolor Character Mode</p>
          </figcaption>
        
      
        </figure>
      

    
  













































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895011801-BWJMVSJ20IXY6JUEDSJG/dustlayer.com-multicolor-character-mode-enabled" data-image-dimensions="709x537" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895011801-BWJMVSJ20IXY6JUEDSJG/dustlayer.com-multicolor-character-mode-enabled?format=1000w" width="709" height="537" sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895011801-BWJMVSJ20IXY6JUEDSJG/dustlayer.com-multicolor-character-mode-enabled?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895011801-BWJMVSJ20IXY6JUEDSJG/dustlayer.com-multicolor-character-mode-enabled?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895011801-BWJMVSJ20IXY6JUEDSJG/dustlayer.com-multicolor-character-mode-enabled?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895011801-BWJMVSJ20IXY6JUEDSJG/dustlayer.com-multicolor-character-mode-enabled?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895011801-BWJMVSJ20IXY6JUEDSJG/dustlayer.com-multicolor-character-mode-enabled?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895011801-BWJMVSJ20IXY6JUEDSJG/dustlayer.com-multicolor-character-mode-enabled?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895011801-BWJMVSJ20IXY6JUEDSJG/dustlayer.com-multicolor-character-mode-enabled?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​Multicolor Character Mode activated</p>
          </figcaption>
        
      
        </figure>
      

    
  













































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366896990342-Y23M8LXMS1J1DF72DY25/dusterlayer.com-multicolor-mode-character-c64.png" data-image-dimensions="654x282" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366896990342-Y23M8LXMS1J1DF72DY25/dusterlayer.com-multicolor-mode-character-c64.png?format=1000w" width="654" height="282" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366896990342-Y23M8LXMS1J1DF72DY25/dusterlayer.com-multicolor-mode-character-c64.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366896990342-Y23M8LXMS1J1DF72DY25/dusterlayer.com-multicolor-mode-character-c64.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366896990342-Y23M8LXMS1J1DF72DY25/dusterlayer.com-multicolor-mode-character-c64.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366896990342-Y23M8LXMS1J1DF72DY25/dusterlayer.com-multicolor-mode-character-c64.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366896990342-Y23M8LXMS1J1DF72DY25/dusterlayer.com-multicolor-mode-character-c64.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366896990342-Y23M8LXMS1J1DF72DY25/dusterlayer.com-multicolor-mode-character-c64.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366896990342-Y23M8LXMS1J1DF72DY25/dusterlayer.com-multicolor-mode-character-c64.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>In Multicolor Mode every two bits are paired to encode one of four values pointing at the source of color information for this pair of pixels.​ The overlay is just illustrative to still recognize the letter A here.</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <p><strong>Characteristics:</strong></p><ul><li>Each character has the dimensions 4x8 Pixels where each of the horizontal Bits are paired to have double the width.</li><li>We can now choose up to four colors per character by encoding the appropriate source of color information into each double-wide pixel.</li><li>Three shared colors across all characters come from the registers $D021 - $D023</li><li>One individual Color per Character can be chosen from Color RAM but only the values 8-15 are accepted to have the Character be displayed in Multicolor Mode since Bit#3 determines if the Character is Standard or Multicolor in the first place.</li></ul>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895571629-WDVYYSPHQYNYCWPB62XI/dustlayer.com-Source+of+Color+Information+in+Multicolor+Character+Mode.png" data-image-dimensions="605x302" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895571629-WDVYYSPHQYNYCWPB62XI/dustlayer.com-Source+of+Color+Information+in+Multicolor+Character+Mode.png?format=1000w" width="605" height="302" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895571629-WDVYYSPHQYNYCWPB62XI/dustlayer.com-Source+of+Color+Information+in+Multicolor+Character+Mode.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895571629-WDVYYSPHQYNYCWPB62XI/dustlayer.com-Source+of+Color+Information+in+Multicolor+Character+Mode.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895571629-WDVYYSPHQYNYCWPB62XI/dustlayer.com-Source+of+Color+Information+in+Multicolor+Character+Mode.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895571629-WDVYYSPHQYNYCWPB62XI/dustlayer.com-Source+of+Color+Information+in+Multicolor+Character+Mode.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895571629-WDVYYSPHQYNYCWPB62XI/dustlayer.com-Source+of+Color+Information+in+Multicolor+Character+Mode.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895571629-WDVYYSPHQYNYCWPB62XI/dustlayer.com-Source+of+Color+Information+in+Multicolor+Character+Mode.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895571629-WDVYYSPHQYNYCWPB62XI/dustlayer.com-Source+of+Color+Information+in+Multicolor+Character+Mode.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>Source of Color Information in Multicolor Character Mode</p>
          </figcaption>
        
      
        </figure>
      

    
  













































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895601094-B8WGT7X3JJXKZ5MNF2XW/dustlayer.com-Source+of+Data+Information+in+Multicolor+Character+Mode.png" data-image-dimensions="353x286" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895601094-B8WGT7X3JJXKZ5MNF2XW/dustlayer.com-Source+of+Data+Information+in+Multicolor+Character+Mode.png?format=1000w" width="353" height="286" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895601094-B8WGT7X3JJXKZ5MNF2XW/dustlayer.com-Source+of+Data+Information+in+Multicolor+Character+Mode.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895601094-B8WGT7X3JJXKZ5MNF2XW/dustlayer.com-Source+of+Data+Information+in+Multicolor+Character+Mode.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895601094-B8WGT7X3JJXKZ5MNF2XW/dustlayer.com-Source+of+Data+Information+in+Multicolor+Character+Mode.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895601094-B8WGT7X3JJXKZ5MNF2XW/dustlayer.com-Source+of+Data+Information+in+Multicolor+Character+Mode.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895601094-B8WGT7X3JJXKZ5MNF2XW/dustlayer.com-Source+of+Data+Information+in+Multicolor+Character+Mode.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895601094-B8WGT7X3JJXKZ5MNF2XW/dustlayer.com-Source+of+Data+Information+in+Multicolor+Character+Mode.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366895601094-B8WGT7X3JJXKZ5MNF2XW/dustlayer.com-Source+of+Data+Information+in+Multicolor+Character+Mode.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>Source of Data Information in Multicolor Character Mode</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <p><strong>3. Extended Background Color Mode</strong></p><p>The final one of our character based modes is actually not so often seen in the wild. I read that Activisions H.E.R.O uses it though. &nbsp;The Extended Background Color Mode let's you choose one in four background colors per 8x8 Bit Character as opposed to just a single background color in Standard Character Mode. &nbsp;The difference to Multicolor Character Mode is that you keep the 8x8 Matrix and have not to cut horizontal resolution by half.&nbsp;</p><p>Using this mode comes with a cost though. Like with the Multicolor option two bits are still needed to encode the information from where some color is retrieved from. In the Extended Background Color Mode those two bits are the two highest Bits of the Screen Code of any Character and they determine the Background Colo<strong>r</strong> used for this Character across the screen while the individual Foreground Color per cell is still retrieved from Color RAM. &nbsp;</p><p>This theft of two Bits to encode a color source comes with a problem of course. Since only 6 Bits per Character can be used now &nbsp;are limited to point to only 64 different characters as opposed to 256 Characters when all Bits being available. If you do a game and want to use some of the Characters for building background graphics plus need some standard letters for text, this will get complicated. &nbsp;</p><p>The selection of background colors are defined in the Registers $D021 - $D024 and then displayed accordingly to the Bitmask of the two highest Bit in the Screen Code.​ For example, the Bit Pattern of the Screen Code for the Letter A is %00000001 . If we want the character to be displayed with the color information from $D023, the Screen Code needs to be changed to %<strong>10</strong>000001 .​​</p><p>If you turn on the Extended Background Color Mode <em>by setting Bit#6 in $D011</em>​ only the blinking cursor will actually change color. The reason is that all Standard Characters have their two high bits not set and the blinking cursor is actually a reversed character &nbsp;and as we already learned this means that in this case the highest bit IS actually set, ultimately making the used Screen Code look like this %10xxxxxx. The reversed version of the cursor therefor uses the color of $D023.</p><p>Extended Background Color Mode can not be mixed with the Multicolor Option.​</p><p></p><p><strong>Characteristics:​</strong></p><ul><li>​Characters are displayed in a 8x8 Bit Matrix like in Standard Character Mode.&nbsp;</li><li>Bit#6 and Bit#7 of the Screen Code are used to determine the desired Color source &nbsp;​</li><li>Since we lose 2 Bits in the Screen Code, only 64 different Characters can be displayed on the screen.​</li><li>Choice of one in four defined Background Colors per Character</li><li>One Individual Foreground Color per Character</li></ul>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366900613267-5M0UDLMRI8NKBL761X1Z/dustlayer.com-Source+of+Data+Information+in+Extended+Background+Character+Mode.png" data-image-dimensions="621x394" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366900613267-5M0UDLMRI8NKBL761X1Z/dustlayer.com-Source+of+Data+Information+in+Extended+Background+Character+Mode.png?format=1000w" width="621" height="394" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366900613267-5M0UDLMRI8NKBL761X1Z/dustlayer.com-Source+of+Data+Information+in+Extended+Background+Character+Mode.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366900613267-5M0UDLMRI8NKBL761X1Z/dustlayer.com-Source+of+Data+Information+in+Extended+Background+Character+Mode.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366900613267-5M0UDLMRI8NKBL761X1Z/dustlayer.com-Source+of+Data+Information+in+Extended+Background+Character+Mode.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366900613267-5M0UDLMRI8NKBL761X1Z/dustlayer.com-Source+of+Data+Information+in+Extended+Background+Character+Mode.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366900613267-5M0UDLMRI8NKBL761X1Z/dustlayer.com-Source+of+Data+Information+in+Extended+Background+Character+Mode.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366900613267-5M0UDLMRI8NKBL761X1Z/dustlayer.com-Source+of+Data+Information+in+Extended+Background+Character+Mode.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366900613267-5M0UDLMRI8NKBL761X1Z/dustlayer.com-Source+of+Data+Information+in+Extended+Background+Character+Mode.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>Source of Data Information in Extended Background Character Mode</p>
          </figcaption>
        
      
        </figure>
      

    
  













































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366899929613-2NGHB2V6196X8VD0EIJQ/dustlayer.com-Source+of+Color+Information+in+Extended+Background+Character+Mode.png" data-image-dimensions="353x286" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366899929613-2NGHB2V6196X8VD0EIJQ/dustlayer.com-Source+of+Color+Information+in+Extended+Background+Character+Mode.png?format=1000w" width="353" height="286" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366899929613-2NGHB2V6196X8VD0EIJQ/dustlayer.com-Source+of+Color+Information+in+Extended+Background+Character+Mode.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366899929613-2NGHB2V6196X8VD0EIJQ/dustlayer.com-Source+of+Color+Information+in+Extended+Background+Character+Mode.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366899929613-2NGHB2V6196X8VD0EIJQ/dustlayer.com-Source+of+Color+Information+in+Extended+Background+Character+Mode.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366899929613-2NGHB2V6196X8VD0EIJQ/dustlayer.com-Source+of+Color+Information+in+Extended+Background+Character+Mode.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366899929613-2NGHB2V6196X8VD0EIJQ/dustlayer.com-Source+of+Color+Information+in+Extended+Background+Character+Mode.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366899929613-2NGHB2V6196X8VD0EIJQ/dustlayer.com-Source+of+Color+Information+in+Extended+Background+Character+Mode.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366899929613-2NGHB2V6196X8VD0EIJQ/dustlayer.com-Source+of+Color+Information+in+Extended+Background+Character+Mode.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
      
        </figure>
      

    
  






  <p>This closes our three Character-Based modes, let's turn to Bitmap graphics.​</p><h3>Bitmap-based Modes</h3><p>In Bitmap-Mode you control every and each pixel on the screen, that are all of the 64.000 in the 320x200 area - and beyond if you use some tricks to remove the borders. ​Our 1000 Byte large Screen RAM can not be used anymore for this large amount of data as 64.000 Bits correspondent to about 8KByte memory consumption. If you now recall that the VIC-II actually can only look at 16Kb at a time, losing 8Kb for some Bitmap Graphics sounds wasteful - and it is! </p><p>Of course there are ways to overcome limitations like by bank switching but let's for now look at standard way to work with Bitmap Graphics. There are only two Bitmap modes, &nbsp;the Standard Bitmap Mode with Multicolor option turned on, the Multicolor Bitmap Mode. When you understood the difference between Standard Character and Multicolor Character Mode, than you will be familiar with the concept already. Bitmap Mode is turned on by <em>setting Bit#5 of Register $D011 high</em>.</p><p><strong>1. Standard Bitmap Mode</strong></p><p>Technically there is not so much to talk about graphics in Standard Bitmap Mode. The C64 wants us to reserve a 8Kb large area in the bank the VIC-II is pointing to. This is required to overcome the limitations of the Screen RAM which simply is not big enough to hold a full bitmapped graphics. However, the Screen RAM has now another function - its new job is to be the source for colors for the Bitmap. The Background Pixel Color is defined by Bits#0 - Bit#3 of the corresponding <strong>Byte</strong> in Screen RAM. &nbsp;The Foreground Pixel Color is defined by Bits#4 - Bits#7 - again from the corresponding Byte in Screen RAM.&nbsp;</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921092862-HKZ9KUTC297XD02Y7EX3/dustlayer.com-%E2%80%8BPoke+to+set+Bitmap+Mode1.png" data-image-dimensions="356x269" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921092862-HKZ9KUTC297XD02Y7EX3/dustlayer.com-%E2%80%8BPoke+to+set+Bitmap+Mode1.png?format=1000w" width="356" height="269" sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921092862-HKZ9KUTC297XD02Y7EX3/dustlayer.com-%E2%80%8BPoke+to+set+Bitmap+Mode1.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921092862-HKZ9KUTC297XD02Y7EX3/dustlayer.com-%E2%80%8BPoke+to+set+Bitmap+Mode1.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921092862-HKZ9KUTC297XD02Y7EX3/dustlayer.com-%E2%80%8BPoke+to+set+Bitmap+Mode1.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921092862-HKZ9KUTC297XD02Y7EX3/dustlayer.com-%E2%80%8BPoke+to+set+Bitmap+Mode1.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921092862-HKZ9KUTC297XD02Y7EX3/dustlayer.com-%E2%80%8BPoke+to+set+Bitmap+Mode1.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921092862-HKZ9KUTC297XD02Y7EX3/dustlayer.com-%E2%80%8BPoke+to+set+Bitmap+Mode1.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921092862-HKZ9KUTC297XD02Y7EX3/dustlayer.com-%E2%80%8BPoke+to+set+Bitmap+Mode1.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​Poke to set Bitmap Mode</p>
          </figcaption>
        
      
        </figure>
      

    
  













































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921137662-Z229P8874KPIK8C3G5CG/dustlayer.com-%E2%80%8BC64+in+Bitmap+Mode.png" data-image-dimensions="356x270" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921137662-Z229P8874KPIK8C3G5CG/dustlayer.com-%E2%80%8BC64+in+Bitmap+Mode.png?format=1000w" width="356" height="270" sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921137662-Z229P8874KPIK8C3G5CG/dustlayer.com-%E2%80%8BC64+in+Bitmap+Mode.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921137662-Z229P8874KPIK8C3G5CG/dustlayer.com-%E2%80%8BC64+in+Bitmap+Mode.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921137662-Z229P8874KPIK8C3G5CG/dustlayer.com-%E2%80%8BC64+in+Bitmap+Mode.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921137662-Z229P8874KPIK8C3G5CG/dustlayer.com-%E2%80%8BC64+in+Bitmap+Mode.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921137662-Z229P8874KPIK8C3G5CG/dustlayer.com-%E2%80%8BC64+in+Bitmap+Mode.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921137662-Z229P8874KPIK8C3G5CG/dustlayer.com-%E2%80%8BC64+in+Bitmap+Mode.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366921137662-Z229P8874KPIK8C3G5CG/dustlayer.com-%E2%80%8BC64+in+Bitmap+Mode.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​C64 in Bitmap Mode</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <p>So even in Bitmap mode, you define the color for a full 8x8 Matrix using a Byte in Screen RAM. You can not define a color per Pixel - which would be hard to store in the first place. Imagine that a color needs four Bits to cover all 16 combinations. If you multiply this by 64.000 individual Pixels, you would need 250Kb for color information in addition to the 8Kb for the actual Image if every pixel has it's own dedicated color code stored somewhere. Not happening!&nbsp;</p><p><strong>Characteristics:</strong></p><ul><li>​Set or unset any of the 64.000 Pixels on the screen</li><li>Change color for each 8x8 cella using information from Screen RAM</li><li>8Kb of RAM within the 16Kb area of the VIC-II needs to be reserved to store a full bitmap graphic ​​</li><li>Initial reserved RAM for Bitmap in Bank 3 is $2000 - $3FFF. This can be changed but since 8Kb is required only two possible locations in each 16Kb bank are possible.</li></ul>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366920637235-TEZ8ZHXMQ2T3GHYJ1TYI/dustlayer.com+Source+of+Data+and+Color+Information+in+Standard+Bitmap+Mode.png" data-image-dimensions="629x398" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366920637235-TEZ8ZHXMQ2T3GHYJ1TYI/dustlayer.com+Source+of+Data+and+Color+Information+in+Standard+Bitmap+Mode.png?format=1000w" width="629" height="398" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366920637235-TEZ8ZHXMQ2T3GHYJ1TYI/dustlayer.com+Source+of+Data+and+Color+Information+in+Standard+Bitmap+Mode.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366920637235-TEZ8ZHXMQ2T3GHYJ1TYI/dustlayer.com+Source+of+Data+and+Color+Information+in+Standard+Bitmap+Mode.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366920637235-TEZ8ZHXMQ2T3GHYJ1TYI/dustlayer.com+Source+of+Data+and+Color+Information+in+Standard+Bitmap+Mode.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366920637235-TEZ8ZHXMQ2T3GHYJ1TYI/dustlayer.com+Source+of+Data+and+Color+Information+in+Standard+Bitmap+Mode.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366920637235-TEZ8ZHXMQ2T3GHYJ1TYI/dustlayer.com+Source+of+Data+and+Color+Information+in+Standard+Bitmap+Mode.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366920637235-TEZ8ZHXMQ2T3GHYJ1TYI/dustlayer.com+Source+of+Data+and+Color+Information+in+Standard+Bitmap+Mode.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366920637235-TEZ8ZHXMQ2T3GHYJ1TYI/dustlayer.com+Source+of+Data+and+Color+Information+in+Standard+Bitmap+Mode.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>Source of Data and Color Information in Standard Bitmap Mode</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <p><strong>2. Multicolor Bitmap Mode</strong></p><p>The Multicolor Bitmap Mode follows the principle I explained with the Multicolor Character Mode. It pairs up every two pixel on the screen which ultimately brings us down to a resolution of &nbsp;160x200 - but with wide Pixels that is. ​The benefit is that we can now appoint again four different sources of color information within every two-wide Pixel. This makes up for losing half of the horizontal resolution. &nbsp;Where the Bitmask is %00, the Background Color Register $D021 is used. For %01 and %10 the VIC-II retrieves the information from Screen RAM in a similar fashion as in Standard Bitmap Mode. Finally we now also have the 1000 Byte large Color RAM where the lower four Bits of each Byte supply us with the fourth color.</p><p><strong><strong>Characteristics</strong></strong></p><ul><li>​Horizontal Resolution cut in half to 160x200 to pair up every two pixels and use them as container for color source information.&nbsp;</li><li>Four colors can be appointed for any of the wide Pixels. Background Color is shared from Register $D021 but Color 1 to Color 3 can be freely chosen for each 2x1 Pixel in the Bitmap. &nbsp;​</li></ul><p></p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366922624100-CKGOF8KY6R2GTZYQ4A1A/looktwice_pal_sn.png" data-image-dimensions="720x272" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366922624100-CKGOF8KY6R2GTZYQ4A1A/looktwice_pal_sn.png?format=1000w" width="720" height="272" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366922624100-CKGOF8KY6R2GTZYQ4A1A/looktwice_pal_sn.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366922624100-CKGOF8KY6R2GTZYQ4A1A/looktwice_pal_sn.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366922624100-CKGOF8KY6R2GTZYQ4A1A/looktwice_pal_sn.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366922624100-CKGOF8KY6R2GTZYQ4A1A/looktwice_pal_sn.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366922624100-CKGOF8KY6R2GTZYQ4A1A/looktwice_pal_sn.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366922624100-CKGOF8KY6R2GTZYQ4A1A/looktwice_pal_sn.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366922624100-CKGOF8KY6R2GTZYQ4A1A/looktwice_pal_sn.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>'Look Twice' by Pal / Offence</p>
          </figcaption>
        
      
        </figure>
      

    
  













































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366984316404-KUY3K4OZG0NBWBO86O0G/dustlayer.com-Source+of+Data+and+Color+Information+in+Multicolor+Bitmap+Mode.png" data-image-dimensions="748x557" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366984316404-KUY3K4OZG0NBWBO86O0G/dustlayer.com-Source+of+Data+and+Color+Information+in+Multicolor+Bitmap+Mode.png?format=1000w" width="748" height="557" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366984316404-KUY3K4OZG0NBWBO86O0G/dustlayer.com-Source+of+Data+and+Color+Information+in+Multicolor+Bitmap+Mode.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366984316404-KUY3K4OZG0NBWBO86O0G/dustlayer.com-Source+of+Data+and+Color+Information+in+Multicolor+Bitmap+Mode.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366984316404-KUY3K4OZG0NBWBO86O0G/dustlayer.com-Source+of+Data+and+Color+Information+in+Multicolor+Bitmap+Mode.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366984316404-KUY3K4OZG0NBWBO86O0G/dustlayer.com-Source+of+Data+and+Color+Information+in+Multicolor+Bitmap+Mode.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366984316404-KUY3K4OZG0NBWBO86O0G/dustlayer.com-Source+of+Data+and+Color+Information+in+Multicolor+Bitmap+Mode.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366984316404-KUY3K4OZG0NBWBO86O0G/dustlayer.com-Source+of+Data+and+Color+Information+in+Multicolor+Bitmap+Mode.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366984316404-KUY3K4OZG0NBWBO86O0G/dustlayer.com-Source+of+Data+and+Color+Information+in+Multicolor+Bitmap+Mode.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>Source of Data and Color Information in Multicolor Bitmap Mode</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <p>These were all the Screen Modes the VIC-II can officially handle. There are many more often evolved from exploiting VIC-II bugs or the clever combination of the available modes. ​We will eventually talk about those advanced screen modes at another time.</p><p>-act</p>]]></description></item><item><title>VIC-II for Beginners Part 3 - Beyond the Screen: Rasters and Cycles</title><dc:creator>actraiser</dc:creator><pubDate>Thu, 25 Apr 2013 09:34:53 +0000</pubDate><link>https://dustlayer.com/vic-ii/2013/4/25/vic-ii-for-beginners-beyond-the-screen-rasters-cycle</link><guid isPermaLink="false">511651d6e4b0a31c035e30aa:512309eee4b08a7615973186:5178d0f2e4b0743cbe986cfd</guid><description><![CDATA[<ul>
<li><a href="https://dustlayer.com/vic-ii/2013/4/22/when-visibility-matters">VIC-II for Beginners Part 1 - When Visibility Matters</a></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/23/vic-ii-for-beginners-part-2-to-have-or-to-not-have-character">VIC-II for Beginners Part 2 - To have or not to have Character</a></li>
<li><strong>VIC-II for Beginners Part 3 - Beyond the Screen: Rasters and Cycles</strong></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/26/vic-ii-for-beginners-screen-modes-cheaper-by-the-dozen">VIC-II for Beginners Part 4 - Screen Modes Cheaper by the Dozen</a></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/28/vic-ii-for-beginners-part-5-bringing-sprites-in-shape">VIC-II for Beginners Part 5 - Bringing Sprites in good Shape</a></li>
</ul>

<hr />



  <h3>Screen Dimensions from a Raster Beam perspective</h3><p>​When we talk about the screen we must first clarify what the screen actually is. When you turn on your C64 you have an (officially) accessible resolution of 320x200 surrounded by a light blue colored border. This is the same for PAL and NTSC machines. However, if we talk about the number of lines the&nbsp;raster beam&nbsp;needs to generate per each screen redraw it is not just 200 &nbsp;but in fact 262 lines for NTSC models and 312 lines on a PAL C64. ​ I will use metrics based on a PAL system for the following explanation.</p><p>With analog television you need to take the time the raster beam needs to go from the last line it drawed to the first line into account. This is called Vertical blank or VBLANK. The same applies horizontally, that is after finishing drawing the last pixel to the right, the raster beam needs to start over in the next line on the very left. This is called horizontal blank or HBLANK. ​Taking VBlank and HBlank into account the Raster beam has to travel 504 pixels horizontally and 312 lines vertically for one full screen refresh on a PAL C64. ​The actual travelling the raster beam does to get from the last line to the top or from the last pixel on the right back the left is called <strong>Screen Blanking. &nbsp;</strong>​Since timing is very crucial when working on the Commodore C64, we need to know that our screen refresh includes more than just the visible area.&nbsp;</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366878233518-25GDZBZWH8917G4IF8ML/dustlayer.com-screen-raster-cycles.png" data-image-dimensions="750x509" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366878233518-25GDZBZWH8917G4IF8ML/dustlayer.com-screen-raster-cycles.png?format=1000w" width="750" height="509" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366878233518-25GDZBZWH8917G4IF8ML/dustlayer.com-screen-raster-cycles.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366878233518-25GDZBZWH8917G4IF8ML/dustlayer.com-screen-raster-cycles.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366878233518-25GDZBZWH8917G4IF8ML/dustlayer.com-screen-raster-cycles.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366878233518-25GDZBZWH8917G4IF8ML/dustlayer.com-screen-raster-cycles.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366878233518-25GDZBZWH8917G4IF8ML/dustlayer.com-screen-raster-cycles.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366878233518-25GDZBZWH8917G4IF8ML/dustlayer.com-screen-raster-cycles.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366878233518-25GDZBZWH8917G4IF8ML/dustlayer.com-screen-raster-cycles.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​Rasters &amp; Cycles on the Screen &nbsp;- image taken from the C64 presentation by Michael Steil. Thanks!</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <p>So we care about how much time a raster beam needs to reach a specific position on the screen or how much time it takes to draw one byte of information. For this we need to learn some other common expressions.</p><p>There is&nbsp;<strong>Raster Time&nbsp;</strong>which is the duration it takes for the VIC-II to put one byte of graphic data on the screen. Raster Time is measured in&nbsp;<strong>CPU cycles. &nbsp;</strong>CPU cycles are basically the smallest unit of currency on the Commodore C64. At some point all you care about is to optimize your code to save CPU cycles per screen refresh. There is also the expression <strong>Raster Line&nbsp;</strong>​which applies to a full line of the screen and not just a single byte.&nbsp;</p><p>The Raster Time to put one byte of data on the screen is exactly 1 Cycle. As far as the Raster Beam is concerned a full horizontal line has 504 pixels which we can divide by 8 to get the time required for a Raster Line - it is 63 Cycles. To complete the math, since we have 312 lines of distance from top to the bottom of the screen, the amount of Cycles needed to draw once over the full screen is 312 lines * 63 Cycles = 19656 Cycles. &nbsp;The 6510 CPU in a PAL C64 is clocked with 985248 Hz. If we divide this number by the CPU Cycles we calculated for one screen refresh we are at 50.125 which equals ~50HZ for the final refresh rate. That sounds just about right for the PAL standard. The calculation does not consider the time we need for the screen blanking though.&nbsp;</p><h3>The Black Sheep of Raster Lines - The Bad Line</h3><p>Now with this information we would assume that we have 63 Cycles of computation time to do something cool on each line on the screen. However, there is one additional catch with timing and to understand we need to take a look at the close partnership between the CPU 6510 and the VIC-II chip.</p><p>The CPU and the VIC-II both share the same data bus which they access both once per cycle. Since they can not access the bus at the same moment they agree to take turns within a cycle. One cycle is therefor divided in two phases, a low and a high phase. The VIC-II accesses the data bus in low phase and the CPU in high phase. However, it turns out that the VIC-II sometimes needs a few more cycles for a raster line than it got reserved from its share in the low phase windows. This for example occurs when it needs to retrieve color information, or when it starts fetching characters. It also&nbsp;happens&nbsp;when the VIC-II has to deal with Sprites on the screen.</p><p>For example displaying a character takes an additional 40 cycles as the VIC-II needs that extra time to check the destination of &nbsp;a character pointer for retrieving the actual data. The additional cycles are usually needed every 8 lines because standard characters are 8 lines high and the VIC-II needs to fetch the location of the to be drawn character on every first line of the 8x8 character matrix. </p><p>So what the VIC-II actually does to get hold of those required additional cycles is to block the CPU for about 40 cycles. The raster line where this stunning of the CPU happens is called a <strong>Bad Line&nbsp;</strong>​because we have now less cycles left for computation in our actual assembler code - the VIC-II just stole it from us! Instead of 63 cycles of CPU time we only have 20something cycles on every Bad Line. This will become important when we need exact timing in our game or demo. There are various ways to exactly sync the action on the screen with the refresh rate and will talk about building so-called <em>Stable Raster Routines&nbsp;</em>​when an opportunity comes up.</p><p>This is a simplified explanation but we will come back to Bad Lines at a later point and for that you should have a basic understanding.</p><p>-act</p><p>​</p><p>​</p><p>​</p><p>​</p>]]></description></item><item><title>VIC-II for Beginners Part 2 - To have or not to have Character</title><dc:creator>actraiser</dc:creator><pubDate>Tue, 23 Apr 2013 14:23:21 +0000</pubDate><link>https://dustlayer.com/vic-ii/2013/4/23/vic-ii-for-beginners-part-2-to-have-or-to-not-have-character</link><guid isPermaLink="false">511651d6e4b0a31c035e30aa:512309eee4b08a7615973186:5174ed9ee4b0b9b09d3a62d8</guid><description><![CDATA[<ul>
<li><a href="https://dustlayer.com/vic-ii/2013/4/22/when-visibility-matters">VIC-II for Beginners Part 1 - When Visibility Matters</a></li>
<li><strong>VIC-II for Beginners Part 2 - To have or not to have Character</strong></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/25/vic-ii-for-beginners-beyond-the-screen-rasters-cycle">VIC-II for Beginners Part 3 - Beyond the Screen: Rasters and Cycles</a></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/26/vic-ii-for-beginners-screen-modes-cheaper-by-the-dozen">VIC-II for Beginners Part 4 - Screen Modes Cheaper by the Dozen</a></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/28/vic-ii-for-beginners-part-5-bringing-sprites-in-shape">VIC-II for Beginners Part 5 - Bringing Sprites in good Shape</a></li>
</ul>

<hr />



  <h3>Hide and Seek with the Character Generator ROM</h3><p>When you turn on your C64 and are welcomed with some information about the BASIC Version and the free BASIC Bytes printed on the screen you are actually looking at one of two distinct Character Sets. Check an original C64 keyboard and you will notice that there are lots of symbols and other special characters which can be used - and which by the way makes working with a standard PC keyboard in an C64 emulator so tedious.&nbsp;</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366701072534-YGSYDJ7VCL5CZV6KEP6Z/dustlayer.com-c64-keyboard.JPG" data-image-dimensions="2500x1875" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366701072534-YGSYDJ7VCL5CZV6KEP6Z/dustlayer.com-c64-keyboard.JPG?format=1000w" width="2500" height="1875" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366701072534-YGSYDJ7VCL5CZV6KEP6Z/dustlayer.com-c64-keyboard.JPG?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366701072534-YGSYDJ7VCL5CZV6KEP6Z/dustlayer.com-c64-keyboard.JPG?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366701072534-YGSYDJ7VCL5CZV6KEP6Z/dustlayer.com-c64-keyboard.JPG?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366701072534-YGSYDJ7VCL5CZV6KEP6Z/dustlayer.com-c64-keyboard.JPG?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366701072534-YGSYDJ7VCL5CZV6KEP6Z/dustlayer.com-c64-keyboard.JPG?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366701072534-YGSYDJ7VCL5CZV6KEP6Z/dustlayer.com-c64-keyboard.JPG?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366701072534-YGSYDJ7VCL5CZV6KEP6Z/dustlayer.com-c64-keyboard.JPG?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​Up to four different characters can be accessed with various short cuts per key.</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <p>All this symbols and characters are unalterable stored in the Character Generator ROM, a 4Kb large area overlapping $D000-$DFFF. f you have followed the other articles you know that this area is crowded. We have RAM under ROM, we have I/O mapped registers and now there is also the Character Generator ROM! How do we access what we need at a particular moment? To understand this, we need to look at the CPU 6510 and the VIC-II&nbsp;separately.&nbsp;</p><p>From a CPU perspective $D000 to $DFFF is I/O-mapped memory including a 1Kb block of Color RAM. The Character Generator ROM is actually not in sight of the CPU at this point. It will let the VIC-II take care of working with it as required. Since we usually want to access the Character Generator ROM at least once for the purpose of copying it to some other location in RAM we first need to switch out that I/O mapped area by changing the memory location $01. It is used to configure various memory layouts in the C64. With this done the CPU can now see the Character Generator ROM and we are able to read and copy everything to &nbsp;RAM to be able to change characters to our liking. After copying don't forget to switch the I/O mapping in again!&nbsp;</p><p>From a VIC-II perspective he Character Generator ROM is only visible in Bank 0 and Bank 2. In either bank the VIC-II &nbsp;sees it at location $1000-$1FFF. Technically the Character Generator ROM is of course located at $5000 in Bank 2 but the VIC-II does not know at which bank it is looking so it always assumes it is watching a block of 16Kb of memory starting at $0000. In the other two banks 1 and 3 &nbsp;there is no Character Generator ROM shadow image available. That means if we want to point the VIC-II to Bank 1 or 3 but still need to use some of the original Commodore characters we have to to copy it beforehand. However even when working in Bank 0 and Bank 2 we&nbsp;usually&nbsp;still want to copy Characters from ROM to the RAM underneath so we can modify it.</p><p><strong>Here is a routine to copy the complete Character Generator ROM in Bank 0 from it's ROM location at $D000 to the RAM underneath at the same address:</strong></p>


























  <h3>Looking at the Character Sets</h3><p>Each character in a set is stored in a 8x8 Bit matrix, in other words every character takes up 8 Bytes of space in memory. In our 4Kb ROM area we have therefor space for 512 Characters and this space is actually completely populated. The 512 characters are divided into two sets with 256 characters each, let's call them Set A and Set B. Each set is again split into standard and negative-imaged versions of each individual character.&nbsp;</p><p>You can only use one of the 2Kb large sets, that is 256 characters at a time. ​In BASIC interactive mode when you hit SHIFT+Commodore Key you can switch between Set A and Set B. Ultimately everything currently on the screen will change to correspond to the selected set. You can not write to the screen with say exclusive symbols from Set A1 and then continue writing with lower case characters from Set B1 without affecting the symbols entered prior. ​</p><p>That's why the possibility to copy character sets into RAM to change it to ones use-case is so important. Basically every game or demo uses a custom font often just loosely based on one of the original Character Sets.​</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722936287-1HLB5VFGC9MJ639A5K72/dustlayer-character-sets.png" data-image-dimensions="766x516" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722936287-1HLB5VFGC9MJ639A5K72/dustlayer-character-sets.png?format=1000w" width="766" height="516" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722936287-1HLB5VFGC9MJ639A5K72/dustlayer-character-sets.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722936287-1HLB5VFGC9MJ639A5K72/dustlayer-character-sets.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722936287-1HLB5VFGC9MJ639A5K72/dustlayer-character-sets.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722936287-1HLB5VFGC9MJ639A5K72/dustlayer-character-sets.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722936287-1HLB5VFGC9MJ639A5K72/dustlayer-character-sets.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722936287-1HLB5VFGC9MJ639A5K72/dustlayer-character-sets.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722936287-1HLB5VFGC9MJ639A5K72/dustlayer-character-sets.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>Four 128-Sets of Characters&nbsp;</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <h3>​Microscoping into the Character Generator ROM</h3><p>Let's examine how the characters are actually stored within the ROM. &nbsp;Every character is a consecutive series of eight Byte values to represent the 8x8 Bit matrix. When looking at the Binary representation we can see that a turned on Bit is considered to use the active foreground color and if a Bit is not set then the active background color is applied on the screen.&nbsp;</p><p>Lets confirm that the Byte values for the letter A are $18, $3C, $66, $7E, ​$66, $66, $66 and $00 as shown in the Binary representation below. We compare with a ROM dump of the Character Generator ROM.</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366724393667-T5ZKR44MPLPOEVBBKZPB/dustlayer.com-character-letter-a.png" data-image-dimensions="330x275" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366724393667-T5ZKR44MPLPOEVBBKZPB/dustlayer.com-character-letter-a.png?format=1000w" width="330" height="275" sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366724393667-T5ZKR44MPLPOEVBBKZPB/dustlayer.com-character-letter-a.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366724393667-T5ZKR44MPLPOEVBBKZPB/dustlayer.com-character-letter-a.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366724393667-T5ZKR44MPLPOEVBBKZPB/dustlayer.com-character-letter-a.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366724393667-T5ZKR44MPLPOEVBBKZPB/dustlayer.com-character-letter-a.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366724393667-T5ZKR44MPLPOEVBBKZPB/dustlayer.com-character-letter-a.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366724393667-T5ZKR44MPLPOEVBBKZPB/dustlayer.com-character-letter-a.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366724393667-T5ZKR44MPLPOEVBBKZPB/dustlayer.com-character-letter-a.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​the 'A'-character and how it is stored in memory. Each of the 8 rows are a Byte value consecutively stored in the Character Generator ROM.</p>
          </figcaption>
        
      
        </figure>
      

    
  













































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366725516402-RLYQ2DFLEA8QBRQTGUB5/dustlayer.com-chargen-rom-dump.png" data-image-dimensions="330x273" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366725516402-RLYQ2DFLEA8QBRQTGUB5/dustlayer.com-chargen-rom-dump.png?format=1000w" width="330" height="273" sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366725516402-RLYQ2DFLEA8QBRQTGUB5/dustlayer.com-chargen-rom-dump.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366725516402-RLYQ2DFLEA8QBRQTGUB5/dustlayer.com-chargen-rom-dump.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366725516402-RLYQ2DFLEA8QBRQTGUB5/dustlayer.com-chargen-rom-dump.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366725516402-RLYQ2DFLEA8QBRQTGUB5/dustlayer.com-chargen-rom-dump.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366725516402-RLYQ2DFLEA8QBRQTGUB5/dustlayer.com-chargen-rom-dump.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366725516402-RLYQ2DFLEA8QBRQTGUB5/dustlayer.com-chargen-rom-dump.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366725516402-RLYQ2DFLEA8QBRQTGUB5/dustlayer.com-chargen-rom-dump.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​Character Generator ROM Dump</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <h3>PETSCII - the Commodore way of not using ASCII</h3><p>PETSCII stands for&nbsp;<em><strong>PET</strong>&nbsp;<strong>S</strong>tandard&nbsp;<strong>C</strong>ode of&nbsp;<strong>I</strong>nformation&nbsp;<strong>I</strong>nterchange</em>&nbsp;and&nbsp;is loosely based on the ASCII standard but offers lots of symbols not available in the original ASCII set. The reason for a custom standard were the limitations of older Commodore PET machines. Their Character Set was not changeable and there was no Bitmap mode for drawing graphics as opposed to the capabilities you have with the Commodore C64. So lots of symbols were added to make drawing to the screen somewhat flexible. There are also some fun facts like there are for example card suit symbols in the PETSCII set of characters. The idea was that Card Games should be easy to be programmed on Commodore systems. PETSCII is also often referred as CBM ASCII. Besides Letters and Symbols, PETSCII also includes cursor and screen control codes to clear the screen for example. </p><p>The following two screenshots show to the left Character Set A which includes only Upper Case letters but all available symbols while to the right there is Character Set B which includes both, Upper and Lower Case letters.. To compensate for the required space Character Set B has to go without some of the symbols. Character Set A is often&nbsp;referred&nbsp;as <em>unshifted</em> and Character Set B as <em>shifted </em>set. Note, that the screens don't show cursor or screen control codes.&nbsp;</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722723946-0CS19RHXFQ7KOES0QOBA/dustlayer.com-unshifted.png" data-image-dimensions="381x270" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722723946-0CS19RHXFQ7KOES0QOBA/dustlayer.com-unshifted.png?format=1000w" width="381" height="270" sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722723946-0CS19RHXFQ7KOES0QOBA/dustlayer.com-unshifted.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722723946-0CS19RHXFQ7KOES0QOBA/dustlayer.com-unshifted.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722723946-0CS19RHXFQ7KOES0QOBA/dustlayer.com-unshifted.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722723946-0CS19RHXFQ7KOES0QOBA/dustlayer.com-unshifted.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722723946-0CS19RHXFQ7KOES0QOBA/dustlayer.com-unshifted.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722723946-0CS19RHXFQ7KOES0QOBA/dustlayer.com-unshifted.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722723946-0CS19RHXFQ7KOES0QOBA/dustlayer.com-unshifted.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​Unshifted Characters</p>
          </figcaption>
        
      
        </figure>
      

    
  













































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722734395-HH4T7PPG503SOFPLZ0ER/dustlayer.com-shifted.png" data-image-dimensions="383x270" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722734395-HH4T7PPG503SOFPLZ0ER/dustlayer.com-shifted.png?format=1000w" width="383" height="270" sizes="(max-width: 640px) 100vw, (max-width: 767px) 50vw, 50vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722734395-HH4T7PPG503SOFPLZ0ER/dustlayer.com-shifted.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722734395-HH4T7PPG503SOFPLZ0ER/dustlayer.com-shifted.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722734395-HH4T7PPG503SOFPLZ0ER/dustlayer.com-shifted.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722734395-HH4T7PPG503SOFPLZ0ER/dustlayer.com-shifted.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722734395-HH4T7PPG503SOFPLZ0ER/dustlayer.com-shifted.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722734395-HH4T7PPG503SOFPLZ0ER/dustlayer.com-shifted.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366722734395-HH4T7PPG503SOFPLZ0ER/dustlayer.com-shifted.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​Shifted characters</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <h3>Screen Codes vs PETSCII</h3><p>The final detail which often leads to confusion is the difference between Byte values we put into Screen RAM to display some text and the actual values PETSCII defines and which are used for example in BASIC. ​</p><p>When we write Bytes to Screen RAM we count up from $00 starting with the @​ sign having Screen Code 0, the letter A has Screen Code 1 etc. The reversed presentation of each character requires a simple addition of $80 or Decimal 128 since the second part of any of the two Character Sets is exactly 128 Bytes off. Since 128 is the Decimal value of the highest Bit in a Byte, the switching between standard and reversed characters is as simple as EOR'ing against %10000000 what I already explained in the <a href="https://dustlayer.com/cpu-6510-articles/2013/4/19/math-basics-part-3-bit-manipulation">Bit Manipulation article</a>.</p><p>This should do it for a start regarding the Character Generator ROM. We will revisit characters when we want to built custom fonts or use&nbsp;modified&nbsp;character sets as background graphics.<br></p><p>-act<br></p><p>​</p>























<p><a href="https://dustlayer.com/vic-ii/2013/4/23/vic-ii-for-beginners-part-2-to-have-or-to-not-have-character">Permalink</a><p>]]></description></item><item><title>VIC-II for Beginners Part 1 - When Visibility Matters</title><dc:creator>actraiser</dc:creator><pubDate>Mon, 22 Apr 2013 20:27:05 +0000</pubDate><link>https://dustlayer.com/vic-ii/2013/4/22/when-visibility-matters</link><guid isPermaLink="false">511651d6e4b0a31c035e30aa:512309eee4b08a7615973186:516fb521e4b09cc422dc3bfb</guid><description><![CDATA[<ul>
<li><strong>VIC-II for Beginners Part 1 - When Visibility Matters</strong></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/23/vic-ii-for-beginners-part-2-to-have-or-to-not-have-character">VIC-II for Beginners Part 2 - To Have or not to Have Character</a></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/25/vic-ii-for-beginners-beyond-the-screen-rasters-cycle">VIC-II for Beginners Part 3 - Beyond the Screen: Rasters and Cycles</a></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/26/vic-ii-for-beginners-screen-modes-cheaper-by-the-dozen">VIC-II for Beginners Part 4 - Screen Modes Cheaper by the Dozen</a></li>
<li><a href="https://dustlayer.com/vic-ii/2013/4/28/vic-ii-for-beginners-part-5-bringing-sprites-in-shape">VIC-II for Beginners Part 5 - Bringing Sprites in good Shape</a></li>
</ul>

<hr />



  <h3>VIC-II - the&nbsp;Power horse&nbsp;in your C64</h3><p>This is a four-part series to introduce beginners to the VIC-II. The render capabilities of the C64 are in fact truly awesome for it's time. You have plenty of screen modes which can be mixed, there are 8 sprites available, a palette of 16 colors, hardware soft scrolling - &nbsp;and that's just the official stuff. An ironic fact is, that if you look in the official Commodores Programmers Reference Manual, there is near to no information how to utilize all this great feature set of the VIC-II. Consider this topic to be one which needs your full attention because it will be overwhelming - you probably need to read through all parts several times to "get it". You need also &nbsp;to combine knowledge from different other things to understand the VIC-II and it's features - it does not hurt to revisit articles on <a href="https://dustlayer.com/memory-map/2013/4/13/ram-under-rom">Memory Layout</a>, <a href="https://dustlayer.com/cpu-6510-articles/2013/4/19/math-basics-part-3-bit-manipulation">Bit Manipulation</a> and <a href="https://dustlayer.com/c64-coding-tutorials/2013/4/8/episode-2-3-did-i-interrupt-you">Interrupt Programming</a>.</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366628152245-ROMVD6KE37B9J7QY6GJ6/vicII.JPG" data-image-dimensions="500x375" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366628152245-ROMVD6KE37B9J7QY6GJ6/vicII.JPG?format=1000w" width="500" height="375" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366628152245-ROMVD6KE37B9J7QY6GJ6/vicII.JPG?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366628152245-ROMVD6KE37B9J7QY6GJ6/vicII.JPG?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366628152245-ROMVD6KE37B9J7QY6GJ6/vicII.JPG?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366628152245-ROMVD6KE37B9J7QY6GJ6/vicII.JPG?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366628152245-ROMVD6KE37B9J7QY6GJ6/vicII.JPG?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366628152245-ROMVD6KE37B9J7QY6GJ6/vicII.JPG?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366628152245-ROMVD6KE37B9J7QY6GJ6/vicII.JPG?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​The VIC-II 8566 was the last PAL version built for the Commodore C64</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <p>Luckily smart programmers started very early to explore the VIC-II capabilities and came up guidance on how to use the VIC-II and along the way explored some interesting new features &nbsp;by exploiting various bugs in the chip, for example...</p><li>​render more than 100 Sprites on the screen at the same time</li><li>achieve interlace modes that can generate&nbsp;palettes with&nbsp;128 colors&nbsp;</li><li>open the top and side borders for extended visible screen area&nbsp;</li><p></p><p>Those examples are advanced topics but it should give you a great idea what this machine is capable to generate when you know what you are doing. For now we will stick to the official capabilities though. ​</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366619591355-BQHRFXWCOGSU8J3N164W/dustlayer.com-color-palette-c64.png" data-image-dimensions="705x510" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366619591355-BQHRFXWCOGSU8J3N164W/dustlayer.com-color-palette-c64.png?format=1000w" width="705" height="510" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366619591355-BQHRFXWCOGSU8J3N164W/dustlayer.com-color-palette-c64.png?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366619591355-BQHRFXWCOGSU8J3N164W/dustlayer.com-color-palette-c64.png?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366619591355-BQHRFXWCOGSU8J3N164W/dustlayer.com-color-palette-c64.png?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366619591355-BQHRFXWCOGSU8J3N164W/dustlayer.com-color-palette-c64.png?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366619591355-BQHRFXWCOGSU8J3N164W/dustlayer.com-color-palette-c64.png?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366619591355-BQHRFXWCOGSU8J3N164W/dustlayer.com-color-palette-c64.png?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366619591355-BQHRFXWCOGSU8J3N164W/dustlayer.com-color-palette-c64.png?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​16 Colors + exploiting some VIC-II quirks and lots of talent can lead to &nbsp;wonderful&nbsp;graphics like this one.</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <h3>The Limited Power of Sight of the VIC-II</h3><p></p><p>One limitation of the VIC-II is its only 14 Bits wide address bus which means it can address only 16384 memory locations or 16Kb at a time. Why did Commodore not use a 16-Bit bus in the first place? I don't know - but instead we are able to select which out of four 16kb large areas the VIC-II can work with. To select any of those so called <em>banks</em>&nbsp;we use two Bits of address $DD00 which is a data register belonging to the CIA-2 chip. The register is wired to the so-called PORT A of that chip.&nbsp;</p><p>In fact Bit#0 and Bit#1 of $DD00 could be interpreted as the lacking Bit#15 and Bit#16 of the VIC-II address bus, however, the VIC-II will not know at what bank it looks when we change configuration. All the VIC-II knows is that it is looking at 16Kb of memory somewhere in the C64 RAM. Finally, to&nbsp;make this awkward setup requirement even more confusing, those two Bits of PORT A are low-active, that means they are considered to be turned on when set to low and off when set to high. I don't know the reason behind this but all what needs to be remembered by the C64 coder is that the higher the value of the Bit pattern is, the lower is the selected bank in memory.</p>

































































 

  
  
    

      

      
        <figure class="
              sqs-block-image-figure
              intrinsic
            "
        >
          
        
        

        
          
            
              
              
          
            
                
                
                
                
                
                
                
                <img data-stretch="false" data-image="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366641045343-POY02ADYWE5EIBPLJLXN/dustlayer.com-vic-II-banks" data-image-dimensions="770x528" data-image-focal-point="0.5,0.5" alt="" data-load="false" elementtiming="system-image-block" src="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366641045343-POY02ADYWE5EIBPLJLXN/dustlayer.com-vic-II-banks?format=1000w" width="770" height="528" sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw" onload="this.classList.add(&quot;loaded&quot;)" srcset="https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366641045343-POY02ADYWE5EIBPLJLXN/dustlayer.com-vic-II-banks?format=100w 100w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366641045343-POY02ADYWE5EIBPLJLXN/dustlayer.com-vic-II-banks?format=300w 300w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366641045343-POY02ADYWE5EIBPLJLXN/dustlayer.com-vic-II-banks?format=500w 500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366641045343-POY02ADYWE5EIBPLJLXN/dustlayer.com-vic-II-banks?format=750w 750w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366641045343-POY02ADYWE5EIBPLJLXN/dustlayer.com-vic-II-banks?format=1000w 1000w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366641045343-POY02ADYWE5EIBPLJLXN/dustlayer.com-vic-II-banks?format=1500w 1500w, https://images.squarespace-cdn.com/content/v1/511651d6e4b0a31c035e30aa/1366641045343-POY02ADYWE5EIBPLJLXN/dustlayer.com-vic-II-banks?format=2500w 2500w" loading="lazy" decoding="async" data-loader="sqs">

            
          
        
            
          
        

        
          
          <figcaption class="image-caption-wrapper">
            <p>​Banks and their area in C64 Memory. &nbsp;Notice the "inverse" relationship between the Bit patterns and the &nbsp;VIC bank memory addresses.</p>
          </figcaption>
        
      
        </figure>
      

    
  






  <h3>The trouble with the Character Generator ROM&nbsp;</h3><p>The question will come up which of the four banks is the best to do game or demo coding. For this question &nbsp;you need to take one more Commodore design decision into consideration. In two of the 16Kb areas - namely Bank 1 and Bank 3 - the Character Generator ROM overlays the RAM. It actually only overlaps in Bank 3 at location $9000 but is additionally "shadowed" to $1000. The idea behind this design was to provide two banks were the programmer had directly access to the standard character sets. Otherwise he had to copy the Character Generator ROM content to some other memory location first. As a matter of fact you usually want to do exactly that - copy the Standard Characters somewhere into RAM and modify it to your liking - after all you want a kick-ass font or tiled background in your demo! So obviously Bank 1 or Bank 3 are no good options for us in the standard system configuration. We rather want to use Bank 0 or Bank 2, and before we switch to either bank, we copy just the portion of characters from the standard set into our banks memory where the VIC-II can see the Characters Set and then do the switch.</p><h3>​Where is the Color RAM?</h3><p></p><p></p><p></p><p>In the <a href="https://dustlayer.com/memory-map-articles/2013/4/13/ram-under-rom">Memory Map article</a> the Color RAM is somewhat stacked on top of ROM - in fact the 1Kb of Color RAM is I/O mapped starting at $D800, but the VIC-II can magically see the Color RAM in any of the banks - but how? It turns out that four of the VIC-II data pins are directly wired to the Color RAM which really is a dedicated chip on the C64 mainboard. The I/O mapped area of the 1Kb large Color RAM is always from $D800 - $DBFF, and again, no matter to which of the four banks your VIC-II is pointing to, it can always see Color RAM at $D800 - it's the law.</p><h3>Bringing everything together</h3><p>This was already a good amount of initial information and I want to recap what is actually required when working with the VIC-II for our first intros.​</p><ul><li>​We need to choose a bank the VIC-II will consider his work area. This bank will hold all our graphics, sprite definitions and character set information as well as our Screen RAM and Color RAM - it is a crowded area! That configuration is&nbsp;done via PORT A of the CIA-2 chip&nbsp;accessible&nbsp;at $DD00.</li><li>We need to configure the memory start locations for Charsets and Screen RAM. In certain graphic screen modes, the Screen RAM takes over the function of Color RAM and in this case we need to let the VIC-II know where we reserved the ca. 8Kb of RAM for graphics of 320x200 Pixel or 64.000 Bits.​ That configurations are done in VIC-IIs own register $D018 and is also affected by the screen mode we choose in $D011 and $D016. There is also register $0288 to be taken into consideration as it is used to change the Screen RAM location. Sprite Pointers at the end of Screen RAM point to our Sprite Definitions.</li></ul><p></p><p>Once you have set up everything - and I know it's a lot - &nbsp;actual work with graphics and sprites becomes relatively easy. Follow the other knowledge base entries and the tutorials to get more starting help on working with the VIC-II. For reference, I included the 47 registers of the VIC-II below. ​<strong>You will need this table ALL the time when working with anything VIC-II related - bookmark it!</strong><br></p><h3>Registers</h3><p>There are 47&nbsp;&nbsp;I/O-mapped&nbsp;registers starting at $D000. ​When we break them down you will notice that there is actually a lot of repeating responsibilities like the 16 registers alone for the X/Y coordinate of each of the 8 hardware sprites as well as another 14 registers which set various color information. There are some control registers which are very important for interrupt programming - we used them in the <a href="https://dustlayer.com/c64-coding-tutorials/2013/4/8/episode-2-3-did-i-interrupt-you">Episode 2-3 tutorial</a> before.&nbsp;</p><p>Since it is very crucial to understand the VIC-II I have included a table of all those registers below. The explanation in each row should be either self-explanatory or is described in another article. &nbsp;​</p><p>By the way, note that the way the VIC-II interprets X and Y positions on the screen might be confusing if you come from a &nbsp;traditional Math coordinate system. X-coordinates on the screen refer to rows while Y-coordinates refer to &nbsp;columns.&nbsp;</p>























    
    

    

    <table border="1" id="tfhover" class="tftable">
    <tr><th width="15%">Register</th><th width="25%">Description</th><th width="60%">Comment</th></tr>
    <tr><td>$D000 (53248)</td><td>X-Coordinate Sprite#0</td><td>Sets vertical line position of Sprite#0 considering Bit#0 in $D010</td></tr>
    <tr><td>$D001 (53249)</td><td>Y-Coordinate Sprite#0</td><td>Sets horizontal position of Sprite#0</td></tr>
    <tr><td>$D002 (53250)</td><td>X-Coordinate Sprite#1</td><td>Sets vertical line position of Sprite#1 considering Bit#1 in $D010</td></tr>
    <tr><td>$D003 (53251)</td><td>Y-Coordinate Sprite#1</td><td>Sets horizontal position of Sprite#1</td></tr>
    <tr><td>$D004 (53252)</td><td>X-Coordinate Sprite#2</td><td>Sets vertical line position of Sprite#2 considering Bit#2 in $D010</td></tr>
    <tr><td>$D005 (53253)</td><td>Y-Coordinate Sprite#2</td><td>Sets horizontal position of Sprite#2</td></tr>
    <tr><td>$D006 (53254)</td><td>X-Coordinate Sprite#3</td><td>Sets vertical line position of Sprite#3 considering Bit#3 in $D010</td></tr>
    <tr><td>$D007 (53255)</td><td>Y-Coordinate Sprite#3</td><td>Sets horizontal position of Sprite#3</td></tr>
    <tr><td>$D008 (53256)</td><td>X-Coordinate Sprite#4</td><td>Sets vertical line position of Sprite#4 considering Bit#4 in $D010</td></tr>
    <tr><td>$D009 (53257)</td><td>Y-Coordinate Sprite#4</td><td>Sets horizontal position of Sprite#4</td></tr>
    <tr><td>$D00A (5325a)</td><td>X-Coordinate Sprite#5</td><td>Sets vertical line position of Sprite#5 considering Bit#5 in $D010</td></tr>
    <tr><td>$D00B (53259)</td><td>Y-Coordinate Sprite#5</td><td>Sets horizontal position of Sprite#5</td></tr>
    <tr><td>$D00C (53260)</td><td>X-Coordinate Sprite#6</td><td>Sets vertical line position of Sprite#6 considering Bit#6 in $D010</td></tr>
    <tr><td>$D00D (53261)</td><td>Y-Coordinate Sprite#6</td><td>Sets horizontal position of Sprite#6</td></tr>
    <tr><td>$D00E (53262)</td><td>X-Coordinate Sprite#7</td><td>Sets vertical line position of Sprite#7 considering Bit#7 in $D010</td></tr>
    <tr><td>$D00F (53263)</td><td>Y-Coordinate Sprite#7</td><td>Sets horizontal position of Sprite#7</td></tr>
    <tr><td>$D010 (53264)</td><td>Bit#9 for X-Coordinates</td><td>As the C64 screen has more than 255 lines each Bit represents the required 9th Bit to get pass the number 255 for each Sprite X-Coordinate</td></tr>
    <tr><td>$D011 (53265)</td><td>Control Register #1</td><td>
    <strong>Initial Value:</strong> %10011011<br/>
    <strong>Bit responsibilities:</strong><br/>Bit#0-#2: Screen Soft Scroll Vertical
                         <br/>Bit#3:    Switch betweem 25 or 24 visible rows
                         <br/>Bit#4:    Switch VIC-II output on/off
                         <br/>Bit#5:    Turn Bitmap Mode on/off
                         <br/>Bit#6:    Turn Extended Color Mode on/off
                         <br/>Bit#7:    9th Bit for $D012 Rasterline counter 

    </td></tr>
    <tr><td>$D012 (53266)</td><td>Raster Counter</td><td>
            <strong>When Reading:</strong>Return current Rasterline
            <br/><strong>When Writing:</strong>Define Rasterline for Interrupt triggering
            <br/><i>Bit#7 of $D011 is (to be) set if line number exceeds 255</i>
    </td></tr>
    <tr><td>$D013 (53267)</td><td>Light Pen X-Coordinate</td><td>Light Pen X-Coordinate</td></tr>
    <tr><td>$D014 (53268)</td><td>Light Pen Y-Coordinate</td><td>Light Pen Y-Coordinate</td></tr>
    <tr><td>$D015 (53269)</td><td>Sprite Enable Register</td><td>Each Bit corresponds to a Sprite. If set high the corresponding Sprite is enabled on Screen</td></tr>
    <tr><td>$D016 (53270)</td><td>Control Register 2</td><td>
    <strong>Initial Value:</strong> %00001000<br/>
    <strong>Bit responsibilities:</strong>
                         <br/>Bit#0-#2: Screen Soft Scroll Horizontal
                         <br/>Bit#3:    Switch betweem 40 or 38 visible columns
                         <br/>Bit#4:    Turn Multicolor Mode on/off
                         <br/>Bit#5-#7: not used

    </td></tr>
    <tr><td>$D017 (53271)</td><td>Sprite Y Expansion</td><td>Every Bit corresponds to one Sprite. If set high, the Sprite will be stretched vertically x2</td></tr>
    <tr><td>$D018 (53272)</td><td>VIC-II base addresses</td><td>
    <strong>Initial Value:</strong> %00010100<br/>
    <strong>Bit responsibilities:</strong>
                         <br/>Bit#0:    not used
                         <br/>Bit#1-#3: Address Bits 11-13 of the Character Set (*2048)
                         <br/>Bit#4-#7: Address Bits 10-13 of the Screen RAM (*1024)
    </td></tr>
    <tr><td>$D019 (53273)</td><td>Interrupt Request Register</td><td>
    <strong>Initial Value:</strong> %00001111<br/>
    <strong>Bit responsibilities:</strong>
                         <br/>Bit#0:    Interrupt by Rasterline triggered when high
                         <br/>Bit#1:    Interrupt by Spite-Background collision triggered when high
                         <br/>Bit#2:    Interrupt by Sprite-Sprite collision triggered when high
                         <br/>Bit#3:    Interrupt by Lightpen impulse triggered when high
                         <br/>Bit#4-#6: not used
                         <br/>Bit#7:    If set high at least one of the Interrupts above were triggered
    </td></tr>
    <tr><td>$D01A (53274)</td><td>Interrupt Mask Register</td><td>
    <strong>Initial Value:</strong> %00000000<br/>
    <strong>Bit responsibilities:</strong>
                         <br/>Bit#0:    Request Interrupt by Rasterline by setting high
                         <br/>Bit#1:    Request Interrupt by Spite-Background collision by setting high
                         <br/>Bit#2:    Request Interrupt by Sprite-Sprite collision by setting high
                         <br/>Bit#3:    Request Interrupt by Lightpen impulse by setting high
                         <br/>Bit#4-#7: not used

    </td></tr>
    <tr><td>$D01B (53275)</td><td>Sprite Collision Priority</td><td>Each Bit corresponds to a Sprite. If set high, the Background overlays the Sprite, if set low, the Sprite overlays Background.</td></tr>
    <tr><td>$D01C (53276)</td><td>Sprite Multicolor</td><td>Each Bit correspondents to a Sprite. If set high, the Sprite is considered to be a Multicolor-Sprite</td></tr>
    <tr><td>$D01D (53277)</td><td>Sprite X Expansion</td><td>Each Bit corresponds to a Sprite. If set high, the Sprite will be stretched horzontally x2</td></tr>
    <tr><td>$D01E (53278)</td><td>Sprite-Sprite Collision</td><td>Each Bit corresponds to a Sprite. If two sprites collide, then corresponding Bits involved in the collision are set to high. This event will also set Bit#2 of the Interrupt Request Register high.</td></tr>
    <tr><td>$D01F (53279)</td><td>Sprite-Background Collision</td><td>Each Bit corresponds to a Sprite. If a sprite collides with the backgroud, then its Bit is set to high. This event will also set Bit#1 of the Interrupt Request Register high.</td></tr>
    <tr><td>$D020 (53280)</td><td>Border color</td><td>Set Border Color to one of the 16 Colors ($00-$0F)</td></tr>
    <tr><td>$D021 (53281)</td><td>Background Color 0</td><td>Set Background Color 0 to one of the 16 Colors ($00-$0F)</td></tr>
    <tr><td>$D022 (53282)</td><td>Background Color 1</td><td>Set Background Color 1 to one of the 16 Colors ($00-$0F)</td></tr>
    <tr><td>$D023 (53283)</td><td>Background Color 2</td><td>Set Background Color 2 to one of the 16 Colors ($00-$0F)</td></tr>
    <tr><td>$D024 (53284)</td><td>Background Color 3</td><td>Set Background Color 3 to one of the 16 Colors ($00-$0F)</td></tr>
    <tr><td>$D025 (53285)</td><td>Sprite Multicolor 0</td><td>Set Color 1 shared by Multicolor Sprites</td></tr>
    <tr><td>$D026 (53286)</td><td>Sprite Multicolor 1</td><td>Set Color 2 shared by Multiclor Sprites</td></tr>
    <tr><td>$D027 (53287)</td><td>Color Sprite#0</td><td>Set individual color for Sprite#0</td></tr>
    <tr><td>$D028 (53288)</td><td>Color Sprite#1</td><td>Set individual color for Sprite#1</td></tr>
    <tr><td>$D029 (53289)</td><td>Color Sprite#2</td><td>Set individual color for Sprite#2</td></tr>
    <tr><td>$D02A (53290)</td><td>Color Sprite#3</td><td>Set individual color for Sprite#3</td></tr>
    <tr><td>$D02B (53291)</td><td>Color Sprite#4</td><td>Set individual color for Sprite#4</td></tr>
    <tr><td>$D02C (53292)</td><td>Color Sprite#5</td><td>Set individual color for Sprite#5</td></tr>
    <tr><td>$D02D (53293)</td><td>Color Sprite#6</td><td>Set individual color for Sprite#6</td></tr>
    <tr><td>$D02E (53294)</td><td>Color Sprite#7</td><td>Set individual color for Sprite#7</td></tr>

    </table>


  <p>-act</p>]]></description></item></channel></rss>