Learning rotation from Escape Karim
Rotation is one of the most important topics in game development. In Escape Karim almost everything moves in a circular way. The player rotates around the center. Karim moves around the circle. The danger increases because the movement never stops. This makes the game feel alive even though the controls are simple.
Many beginner developers understand movement from left to right or top to bottom. But circular movement feels confusing at first because objects move around a center point instead of moving in a straight line. Once you understand rotation you can create much better games with planets, wheels, enemies, racing games, spinning attacks, orbit systems and smooth animations.
Rotation is used in almost every popular game. Even simple mobile games use rotation to create natural movement. Escape Karim is a very good example because the whole gameplay depends on rotating motion and timing.
In this tutorial you will learn how rotation works in Flutter and Flame Engine using simple language. You will understand angles, radians, circular movement, rotating lines and how to create smooth motion around a center point.
Understanding the center point
Every rotation starts from a center point. Think about a wall clock. The hands rotate around the center screw. The hands do not move randomly across the screen. They always stay connected to the middle point.
In Escape Karim the center of the circle is the most important position. The rotating diameter spins around this center. The player stays attached to the diameter while Karim moves along the outer circle.
Before creating rotation we first need a center position.
Vector2 center = Vector2(
size.x / 2,
size.y / 2,
);
Here we create the middle point of the screen. The X value is half of the screen width and the Y value is half of the screen height.
This becomes the anchor point for all circular movement.
Understanding angles
Rotation works using angles. When an object rotates its angle changes continuously.
A full circle is three hundred sixty degrees. If you rotate halfway that becomes one hundred eighty degrees. A quarter rotation becomes ninety degrees.
But in programming most game engines use radians instead of degrees.
Beginners usually fear radians because the numbers look strange. But the idea is simple. One full rotation equals about six point two eight radians.
You do not need to memorize everything immediately. You only need to understand that changing the angle changes the direction.
double angle = 0;
This variable stores the current rotation angle.
Every frame we increase the angle slightly to create movement.
angle += 0.02;
This creates smooth continuous rotation.
Using sine and cosine
Circular movement depends on sine and cosine. These functions help us calculate positions around a circle.
This may sound difficult at first but the actual code is very small.
Cosine controls horizontal movement and sine controls vertical movement.
Together they create perfect circular motion.
double x = center.x + radius * cos(angle);
double y = center.y + radius * sin(angle);
The center position is the middle of the circle. The radius controls how far the object stays from the center.
As the angle changes the X and Y positions also change. This creates circular movement automatically.
Creating a rotating object
Now let us create a simple rotating ball around the center of the screen.
class RotatingBall extends PositionComponent {
double angle = 0;
double radius = 120;
@override
void update(double dt) {
super.update(dt);
angle += 1 * dt;
position = Vector2(
400 + radius * cos(angle),
300 + radius * sin(angle),
);
}
}
Here the object rotates around the point four hundred and three hundred.
The update method runs continuously every frame. The angle increases slowly and the position changes using cosine and sine.
This creates smooth circular motion similar to Karim moving around the arena.
Understanding delta time
In Flame Engine the update method gives a value called dt. This means delta time.
Delta time helps movement stay smooth on all devices. Some phones run faster and some run slower. Without delta time movement speed becomes inconsistent.
That is why we multiply speed using dt.
angle += speed * dt;
This keeps rotation smooth and balanced everywhere.
Creating the rotating diameter
The most important visual in Escape Karim is the rotating diameter line.
The player stands on one side while the opposite side remains empty. As the line rotates both ends move together.
To create this we calculate two opposite positions.
Vector2 pointOne = Vector2(
center.x + radius * cos(angle),
center.y + radius * sin(angle),
);
Vector2 pointTwo = Vector2(
center.x - radius * cos(angle),
center.y - radius * sin(angle),
);
The second point uses minus values which places it exactly opposite the first point.
This creates a perfect diameter.
Drawing the rotating line
Now we can draw the line between both points.
canvas.drawLine(
Offset(pointOne.x, pointOne.y),
Offset(pointTwo.x, pointTwo.y),
Paint()
..color = Colors.white
..strokeWidth = 4,
);
As the angle changes the line rotates smoothly around the center.
This is the same idea used inside Escape Karim.
Placing the player on the diameter
The player stands on one end of the rotating line.
This means the player position should always match one endpoint.
player.position = pointOne;
When the player taps the screen we switch to the opposite side.
bool switched = false;
void switchSide() {
switched = !switched;
}
Then during updates we decide which endpoint to use.
if (switched) {
player.position = pointTwo;
} else {
player.position = pointOne;
}
This creates the gameplay mechanic where the player jumps between both ends of the rotating diameter.
Creating Karim movement
Karim moves around the outer edge of the circle continuously.
This uses the same circular movement system but with a different speed.
double karimAngle = 0;
@override
void update(double dt) {
super.update(dt);
karimAngle += 2 * dt;
karim.position = Vector2(
center.x + radius * cos(karimAngle),
center.y + radius * sin(karimAngle),
);
}
Karim now rotates endlessly around the circle.
Increasing the speed value makes the game harder.
Making the speed increase over time
One reason Escape Karim feels intense is because the speed slowly increases.
This creates pressure and forces the player to react faster.
double karimSpeed = 1;
@override
void update(double dt) {
super.update(dt);
karimSpeed += 0.02 * dt;
karimAngle += karimSpeed * dt;
}
The longer the game runs the faster Karim moves.
Small changes in speed create a huge difference after some time.
Checking collision
Collision detection decides when the player gets caught.
We compare the distance between Karim and the player.
double distance = karim.position.distanceTo(player.position);
if (distance < 20) {
gameOver();
}
If the distance becomes very small the game ends.
This simple check creates the entire danger system.
Why rotation feels smooth
Circular movement feels natural because the motion never suddenly stops.
Straight movement often looks robotic if not animated properly. Rotation creates flow and rhythm. This is why many arcade games use spinning systems.
Escape Karim uses this idea perfectly. Even though the controls are simple the rotating movement keeps players focused.
Common mistakes beginners make
Many beginners forget to use radians correctly. Some developers also forget to multiply by delta time which causes inconsistent speed.
Another common mistake is using the wrong center point. If the center is incorrect the rotation looks broken and unstable.
Some developers also increase the angle too quickly which makes the movement impossible to control.
Rotation should feel smooth and readable especially in reaction based games.
Why learning rotation is important
Rotation is not only useful for Escape Karim style games. It is used in action games, racing games, platform games, puzzle games and even user interface animations.
Once you understand circular motion you can build advanced gameplay systems much more easily.
Many popular mobile games are built using only movement tricks like rotation, scaling and timing.
Game development is not always about huge graphics or complicated systems. Sometimes one strong mechanic can create a very addictive experience.
Escape Karim proves this idea very clearly. A rotating line, one enemy and one tap mechanic are enough to create tension and excitement.
Final thoughts
Learning rotation is one of the best skills for beginner game developers. At first the math may feel confusing but after some practice it becomes natural.
Start with simple circles and rotating objects. Then slowly build more advanced systems like enemy movement, orbit attacks and rotating platforms.
The most important thing is experimentation. Change the radius. Change the speed. Reverse the direction. Watch how small changes completely affect gameplay feeling.
Escape Karim is a perfect example of how simple rotation mechanics can create a challenging and enjoyable arcade game. Once you master rotation you will start seeing game ideas everywhere around you.
