====== Step 2.1: Designing the screen ======

Let's do the easy part first, that is drawing the screen. Let's enlist what need to be visible on the screen:

  * A falling piece, that can be of 7 kinds of shapes, called //Tetrominoes//, each can be rotated 90 degrees. 
  * A playfield where the pieces are falling down. We will use one character as a block and we will draw a frame around the playfield to mark its boundaries.
  * We'll display the current level. This is a number between 1 and 10 that affects the game speed and the bonus added on clearing rows.
  * A score counter and a variable that holds the highest score within the program's lifecycle.
  * An area on screen where we display what the next shape will be. This is called the preview window.

For drawing screen prototypes you can use Krissz's online [[http://petscii.krissz.hu/|PETSCII Editor]], or you can use the C64 itself or just the good old checkered paper. I opted for the first and here's what I've come up with:

{{ :tutorial1-tetris:designing_the_screen.png?nolink |}}

I know it looks very primitive but currently this is all we need. Now let's start writing our program. Let's create a new file called //tetris.bas// and write a simple program that displays the game screen:

  REM -- TETRIS
  REM -- An XC=BASIC tutorial game
  
  CONST SCREENRAM = $0400
  CONST COLORRAM = $d800
  
  REM -- Clear the screen
  MEMSET SCREENRAM, 1000, 32
  REM -- Clear color RAM
  MEMSET COLORRAM, 1000, 0
  
  REM -- Set border and background color
  POKE 53280, 13 : POKE 53281, 1
  
  REM -- Switch to upper case
  POKE 53272, 21
  
  REM -- Disable SHIFT + Commodore key
  POKE 657,128 
  
  REM -- Draw the playfield using a series of PRINT statements
  PRINT "{GRAY}"
  CURPOS 14, 3
  PRINT "{REV_ON}{176}{195}{195}{195}{195}{195}{195}{195}{195}{195}{195}{174}{REV_OFF}"
  FOR i! = 4 TO 23
    CURPOS 14, i!
    PRINT "{REV_ON}{194}{REV_OFF}          {REV_ON}{194}{REV_OFF}" : REM 10 spaces in the middle
  NEXT
  CURPOS 14, 24
  PRINT "{REV_ON}{173}{195}{195}{195}{195}{195}{195}{195}{195}{195}{195}{189}{REV_OFF}";
  CURPOS 0,0
  
  REM -- Write texts
  TEXTAT 27, 10, "level:"
  TEXTAT 27, 13, "score:"
  TEXTAT 27, 16, "hi:"
  TEXTAT 27, 19, "next:"
  
  REM -- Set color to green where numbers will be displayed
  MEMSET COLORRAM + 467, 2, 5 : REM row 11, col 27, 2 chars
  MEMSET COLORRAM + 587, 6, 5 : REM row 14, col 27, 6 chars
  MEMSET COLORRAM + 707, 6, 5 : REM row 17, col 27, 6 chars

If you only programmed in CBM BASIC before, you'll notice some commands that you may not be familiar with (click on the links to learn more):

  * [[:const|CONST]] is used to define a constant. A constant is not a variable but a value assigned to an identifier. The compiler will replace all matched identifiers in the program with the value. We have defined constants to refer to the Screen RAM and Color RAM later in a convenient way. Also notice that we're using hexadecimal numeric literals, starting with the ''$'' sign.
  * [[:memset|MEMSET]] is used to fill up a certain memory range with a single value. We use it to clear the screen by filling up all the screen RAM (1024-2023) with the byte 32, that is, a PETSCII space.
  * [[:curpos]] is used to position the cursor somewhere on the screen.
  * The variable ''i!'' looks strange in the ''FOR'' statement. It is appended with an exclamation mark to flag to the compiler that it is a byte type, a single 8-bit unsigned integer. [[:variables|You can learn more about variables and types here.]]
  * Notice the PETSCII codes in curly braces ''{}'' within the string literals in ''PRINT'' statements. Apart from any numeric code, you can use [[:petscii_escape_sequences|these escape sequences]], too.
  * [[:textat|TEXTAT]] that is used to write a string anywhere on the screen without affecting the cursor position.

So far all the rest are the same as in good old CBM BASIC.

Note that keywords in XC=BASIC are case-insensitive which means you can write them in UPPERCASE, lowercase or even in Capitalized depending on your style. In this tutorial I will use UPPERCASE. 

//**Warning**: unlike keywords, identifiers like variable names, procedure names, etc. are case-sensitive!//

Now compile and run the program to see how far we got:

{{ :tutorial1-tetris:screen1.png?nolink |}}

Not a big deal, but we've done the easy part. Click on "next page" to go on and read how we will encode and store the shapes.

<- step2|Previous page ^ start|Tetris tutorial  ^ step2.2|Next page ->