What You're Building

By the end of Task 2 you will have a stoplight, built from four shapes whose numbers put every one of them exactly where it lands.

Task 3 is not shown. The pole and the street sign are yours to work out.

Raylib.InitWindow(screenWidth, screenHeight, "Stoplight");
Raylib.SetTargetFPS(60);

while (!Raylib.WindowShouldClose())
{
    Raylib.BeginDrawing();
    Raylib.ClearBackground(Color.DarkGray);
    Raylib.EndDrawing();
}

Raylib.CloseWindow();

(0, 0)                (400, 0)
   +-----------------+
   |                 |
   |                 |
   |                 |
   |   the window    |
   |                 |
   |                 |
   |                 |
   +-----------------+
(0, 600)            (400, 600)

Raylib.DrawRectangle(140, 60, 120, 320, Color.Black);

Raylib.DrawCircle(200, 120, 40, Color.Red);

Raylib.DrawCircle(200, 120, 40, Color.Red);
Raylib.DrawCircle(200, 220, 40, Color.Yellow);
Raylib.DrawCircle(200, 320, 40, Color.Green);

Raylib.DrawRectangle(100, 100, 150, 150, Color.Red);
Raylib.DrawRectangle(160, 160, 150, 150, Color.Blue);

'F' → Fullscreen

Build

Make your own copy of the game template, named 1-7-stoplight. Never edit a template directly.

Everything you draw today goes between BeginDrawing and EndDrawing. Nothing moves, so nothing needs to change between one frame and the next.

Task 1: An Empty Window

• Delete the template's DrawText line and make your file match the code below.
• Run it. A plain dark gray window is the whole result, and it is correct.
• Change Color.DarkGray to Color.Black and run again. Change screenHeight to 300 and run again. Then set both back.

1
#:package Raylib-cs@8.0.0
2

3
using Raylib_cs;
4

5
int screenWidth = 400;
6
int screenHeight = 600;
7

8
Raylib.InitWindow(screenWidth, screenHeight, "Stoplight");
9
Raylib.SetTargetFPS(60);
10

11
while (!Raylib.WindowShouldClose())
12
{
13
    Raylib.BeginDrawing();
14
    Raylib.ClearBackground(Color.DarkGray);
15
    Raylib.EndDrawing();
16
}
17

18
Raylib.CloseWindow();

Task 2: The Housing and Three Lamps

• Before you type anything, predict where each shape will land. Sketch the window on paper if it helps.
• Then add the four lines and run it.
• Check your prediction against the result. The rectangle and the circles use their numbers differently, and you should be able to see that.
• Note: the green lines marked with a + sign are new. Do not type the + sign.

1
#:package Raylib-cs@8.0.0
2

3
using Raylib_cs;
4

5
int screenWidth = 400;
6
int screenHeight = 600;
7

8
Raylib.InitWindow(screenWidth, screenHeight, "Stoplight");
9
Raylib.SetTargetFPS(60);
10

11
while (!Raylib.WindowShouldClose())
12
{
13
    Raylib.BeginDrawing();
14
    Raylib.ClearBackground(Color.DarkGray);
15

16
    Raylib.DrawRectangle(140, 60, 120, 320, Color.Black);
17
    Raylib.DrawCircle(200, 120, 40, Color.Red);
18
    Raylib.DrawCircle(200, 220, 40, Color.Yellow);
19
    Raylib.DrawCircle(200, 320, 40, Color.Green);
20

21
    Raylib.EndDrawing();
22
}
23

24
Raylib.CloseWindow();

The housing has to be drawn first. Move it below the three circles and run it again to see why, then put it back.

Task 3: Plan, Then Add the Pole

• The comments are a plan. Write the drawing code under them.
• Everything must sit below the housing, which ends at y = 380. Every y you use should be larger than that.
• The sign board is a rectangle and the street name is DrawText. Watch your order — if the name vanishes, you drew the board on top of it.
• DrawText takes x, y, a size, and a color, and its x and y are its top left corner.

1
    Raylib.BeginDrawing();
2
    Raylib.ClearBackground(Color.DarkGray);
3

4
    Raylib.DrawRectangle(140, 60, 120, 320, Color.Black);
5
    Raylib.DrawCircle(200, 120, 40, Color.Red);
6
    Raylib.DrawCircle(200, 220, 40, Color.Yellow);
7
    Raylib.DrawCircle(200, 320, 40, Color.Green);
8

9
    // Add a pole and a street sign below the light:
10
    //   a narrow gray rectangle running down from the housing
11
    //   a wider sign board below the pole
12
    //   the street name, drawn on top of the sign
13

14
    Raylib.EndDrawing();

Challenge (Optional): A Fourth Lamp

• Add a fourth lamp below the green one, evenly spaced with the rest, and make the housing taller so it fits.
• Work out every number by hand. Count how many you had to change to move one lamp.
• Remember that number. Lab 2 is about getting rid of it.

Checkpoint

• Your window is 400 by 600 with a dark gray background.
• Three lamps sit inside the housing, none of them overlapping it.
• The pole and the sign are entirely below y = 380.
• The street name is readable, which means it was drawn after the board.
• You can point at any number in your program and say what it does.

Reflection

Answer the following questions before submitting your work.

1. The three lamps differ in exactly one number. Which one, and what would happen to the picture if you made all three the same?
2. A rectangle is placed by its corner and a circle by its center. Describe a mistake that difference would cause, and how you would recognize it on screen.
3. You did not write the while loop and did not change it. What do you think would happen if you deleted it and left only the drawing lines?

Submit

Submit three things to the dropbox:

1. Your 1-7-stoplight program file.
2. A screenshot of your finished window.
3. Your three reflection answers.

Activity Complete