SDL_Chomik: Our First Animation

In this installment of the SDL_Chomik series, we are going to create our first animation! We'll make a "blue monkey" move horizontally across the window, using some of the concepts we introduced in the last two Chomik articles: adding integers and comparing them.

---

What We'll Learn

1. How to use built-in integer variable the sdl window width.

2. How to move an image smoothly across the window.

3. How to reset the position when it reaches the edge of the window.

⚠️ Note: We won’t need the sdl window height in this example, as our animation is purely horizontal.

---

Step 1: Loading Images

We start by creating the images we'll use in our animation:
<create new image "chomik.png">;
let chomik image index = <the created image index>;

<create new image "background.png">;
let background image index = <the created image index>;

<create new image "blue_monkey.png">;
let blue monkey image index = <the created image index>;

We now have three images: a background, a "chomik" image, and our moving blue monkey. Each image creation gives us an index, which we store in a variable for later use.

---

Step 2: Positioning the Blue Monkey

Next, we define the starting x position of the blue monkey:

let blue monkey x = value integer -64;

We use -64 so that the monkey begins off the left side of the window, creating a nice entrance effect.

---

Step 3: Resetting the Monkey

We want the monkey to wrap around once it reaches the window width:

let reset blue monkey on greater = value code
{
let blue monkey x = value integer -64;
};

let reset blue monkey if needed = value code
{
<compare "integer" <blue monkey x> <the sdl window width>>;
<reset blue monkey on <the compare result>>;
};

Here’s what happens:

1. We compare blue monkey x value with the sdl window width value.

2. If the monkey is beyond the window width, we reset it to -64.

✅ This is our first time using the sdl window width, a built-in integer that reflects the current width of the SDL window.

---

Step 4: Moving the Blue Monkey

Now we define how the blue monkey moves:

let move blue monkey = value code
{
<add "integer" <blue monkey x> 3>;
let blue monkey x = <the add result "integer">;
<reset blue monkey if needed>;
};

Each time this code runs:

1. We add 3 to the x position.

2. We store the new value in blue monkey x.

3. We check if the monkey needs resetting.

This creates smooth, continuous motion.

---

Step 5: The SDL Loop

Finally, we show all the images and move the monkey inside the SDL loop:

let sdl loop body = value code
{
<show image <background image index> 0 0 >;
<show image <chomik image index> 0 0 >;
<show image <blue monkey image index> <blue monkey x> 100>;
<move blue monkey>;
};
<sdl loop>;

The background and chomik images are drawn first.

• Then the blue monkey is drawn at X = <blue monkey x> and Y = 100.

• <sdl loop> repeatedly executes this code, creating our animation.

---

✅ Summary

In this article, we learned how to:

• Load images and store their indices.

• Use built-in integer variable the sdl window width.

• Move an image and reset its position when it leaves the window.