Activity 1.2

Your First Window

Key Concepts

A Raylib program repeatedly draws a picture. Coordinates place each shape, and color makes the result visible.

What You Are Building

Two Templates, Not One

Console

Runs top to bottom, then ends.

Game

Opens a window and repeats until it closes.

The Game Template Has Three Regions

1
using Raylib_cs;
2

3
int screenWidth = 800;
4
int screenHeight = 600;
5

6
Raylib.InitWindow(screenWidth, screenHeight, "Hello, Raylib!");
7
Raylib.SetTargetFPS(60);
8

9
while (!Raylib.WindowShouldClose())
10
{
11
    Raylib.BeginDrawing();
12
    Raylib.ClearBackground(Color.Black);
13
    Raylib.DrawText("Hello, World!", 320, 285, 24, Color.SkyBlue);
14
    Raylib.EndDrawing();
15
}
16

17
Raylib.CloseWindow();

The Game Template Has Three Regions

1
using Raylib_cs;
2

3
int screenWidth = 800;
4
int screenHeight = 600;
5

6
Raylib.InitWindow(screenWidth, screenHeight, "Hello, Raylib!");
7
Raylib.SetTargetFPS(60);
8

9
while (!Raylib.WindowShouldClose())
10
{
11
    Raylib.BeginDrawing();
12
    Raylib.ClearBackground(Color.Black);
13
    Raylib.DrawText("Hello, World!", 320, 285, 24, Color.SkyBlue);
14
    Raylib.EndDrawing();
15
}
16

17
Raylib.CloseWindow();

The Game Template Has Three Regions

1
using Raylib_cs;
2

3
int screenWidth = 800;
4
int screenHeight = 600;
5

6
Raylib.InitWindow(screenWidth, screenHeight, "Hello, Raylib!");
7
Raylib.SetTargetFPS(60);
8

9
while (!Raylib.WindowShouldClose())
10
{
11
    Raylib.BeginDrawing();
12
    Raylib.ClearBackground(Color.Black);
13
    Raylib.DrawText("Hello, World!", 320, 285, 24, Color.SkyBlue);
14
    Raylib.EndDrawing();
15
}
16

17
Raylib.CloseWindow();

You Edit Inside the Repeated Region

The while line makes the drawing region repeat. You will learn exactly how it works later.

Today, keep the region intact and replace only the drawing instructions inside it.

Where Is (0, 0)?

Make a prediction.

Where Is (0, 0)?

Bigger y Means Lower

Screen coordinates measure distance from the top-left corner. Increasing x moves right. Increasing y moves down.

Drawing a Rectangle

Raylib.DrawRectangle(350, 130, 100, 340, Color.Gray);

1. 350 — x of the left edge
2. 130 — y of the top edge
3. 100 — width
4. 340 — height
5. Color.Gray — color

A Circle Is Measured Differently

Raylib.DrawCircle(400, 190, 35, Color.Red);

1. 400 — x of the center
2. 190 — y of the center
3. 35 — radius
4. Color.Red — color

Raylib Has Named Colors

Color.Red, Color.Yellow, and Color.Green are ready to use.

A custom color uses red, green, blue, and opacity values from 0 to 255.

Raylib.DrawCircle(400, 190, 35, new Color(230, 50, 50, 255));

Today's Objectives

• Copy and run the Raylib game template.
• Identify setup, repeated drawing, and cleanup.
• Place rectangles and circles with coordinates.
• Use named and custom colors.

Key Terms

Coordinate

A number that identifies a position along an axis.

Origin

The point (0, 0), located at the top left of a Raylib window.

Pixel

One small colored square in a digital image or display.

Game loop

The repeated part of a game program that updates and draws each frame.

'F' → Fullscreen

Build

Create a Raylib program named 1-02-signal.

Task 1: Open a Window

1. Copy template-game.
2. Rename the copy 1-02-signal.
3. Open its Program.cs and run it.
4. Confirm that the blue message appears.
5. Press Escape to close the window.

1
using Raylib_cs;
2

3
int screenWidth = 800;
4
int screenHeight = 600;
5

6
Raylib.InitWindow(screenWidth, screenHeight, "Hello, Raylib!");
7
Raylib.SetTargetFPS(60);
8

9
while (!Raylib.WindowShouldClose())
10
{
11
    Raylib.BeginDrawing();
12
    Raylib.ClearBackground(Color.Black);
13
    Raylib.DrawText("Hello, World!", 320, 285, 24, Color.SkyBlue);
14
    Raylib.EndDrawing();
15
}
16

17
Raylib.CloseWindow();

Task 2: One Rectangle

1. Change the window title to Traffic Signal.
2. Delete the Raylib.DrawText line.
3. Add the rectangle drawing line after the background is cleared.
4. Run the program.
5. Change one number at a time. Record what 350, 130, 100, and 340 control, then restore the number.

1
using Raylib_cs;
2

3
int screenWidth = 800;
4
int screenHeight = 600;
5

6
Raylib.InitWindow(screenWidth, screenHeight, "Traffic Signal");
7
Raylib.SetTargetFPS(60);
8

9
while (!Raylib.WindowShouldClose())
10
{
11
    Raylib.BeginDrawing();
12
    Raylib.ClearBackground(Color.Black);
13

14
    Raylib.DrawRectangle(350, 130, 100, 340, Color.Gray);
15
    Raylib.EndDrawing();
16
}
17

18
Raylib.CloseWindow();

Task 3: Three Lights

1. Add three circle instructions under the rectangle.
2. Run after adding each circle.
3. Confirm that red is at the top, yellow is in the middle, and green is at the bottom.
4. Explain why changing only each circle's y coordinate keeps them in one vertical column.

1
using Raylib_cs;
2

3
int screenWidth = 800;
4
int screenHeight = 600;
5

6
Raylib.InitWindow(screenWidth, screenHeight, "Traffic Signal");
7
Raylib.SetTargetFPS(60);
8

9
while (!Raylib.WindowShouldClose())
10
{
11
    Raylib.BeginDrawing();
12
    Raylib.ClearBackground(Color.Black);
13

14
    Raylib.DrawRectangle(350, 130, 100, 340, Color.Gray);
15
    Raylib.DrawCircle(400, 190, 35, Color.Red);
16
    Raylib.DrawCircle(400, 300, 35, Color.Yellow);
17
    Raylib.DrawCircle(400, 410, 35, Color.Green);
18

19
    Raylib.EndDrawing();
20
}
21

22
Raylib.CloseWindow();

Challenge (Optional): Make the Colors Yours

1. Replace one named color with a new Color(red, green, blue, opacity) value.
2. Keep every number between 0 and 255.
3. Change one channel at a time and observe what it controls.

Raylib.DrawCircle(400, 190, 35, new Color(230, 50, 50, 255));

Challenge (Optional): Make a Scene

Make a copy named 1-02-scene. Draw a recognizable picture with at least six shapes and three colors. Use only drawing calls already shown on this page.

Checkpoint

Your program should produce this picture:

• The window is 800 by 600 pixels.
• The signal contains one rectangle and three circles.
• The window remains open until Escape is pressed or it is closed.
• The terminal contains no error.

Reflection

Answer the following questions before submitting your work.

1. Why does increasing a shape's y coordinate move it down instead of up in a Raylib window?
2. A rectangle is positioned by its top-left corner, but a circle is positioned by its center. How would you place a circle at the center of a rectangle?
3. Which part of the template repeats, and why must drawing instructions stay inside that part?

Submit

Submit your completed activity sheet. Keep 1-02-signal in your workspace.

Activity Complete