Learning creating target board using Target Shooter
One of the most important things in a shooting game is the target board. Players need something clear, colorful, and easy to understand. A good target board helps players focus better and makes every hit feel satisfying. In Target Shooter, the board becomes the center of the gameplay experience because the entire game depends on timing and accuracy.
When beginners start making games in Flutter using Flame Engine, they usually focus only on movement or score systems. But creating a proper target board teaches many useful skills. You learn how to draw shapes, place components on screen, handle collisions, organize layers, and build reusable game objects.
In this tutorial you will learn how to create a complete target board system inspired by Target Shooter. The target board will contain multiple circles with different colors and scoring zones. We will also make the board reusable so you can spawn many targets later inside your game.
This tutorial uses simple Flame Engine concepts and beginner friendly Dart code. Everything is explained in human language so even new developers can follow comfortably.
Understanding the idea behind a target board
Before writing code, you should first understand how a target board actually works inside a game. Most target boards are made using circles placed one inside another. The outer ring usually gives low points while the center gives maximum score.
In Target Shooter, the center area is the most important part because players try to hit it for the highest points. That means our target board should visually guide the player toward the middle area. Bright colors help a lot here.
We will create a board using five circular layers.
- Outer white ring
- Black ring
- Blue ring
- Red ring
- Yellow center
This style is easy to recognize and looks professional even though the code is simple.
Creating the TargetBoard component
In Flame Engine, every visual object usually becomes a component. Since the target board is a reusable object, we should create a separate component class for it.
Create a new Dart file called target_board.dart.
import 'package:flame/components.dart';
import 'package:flutter/material.dart';
class TargetBoard extends PositionComponent {
final double radius;
TargetBoard({
required this.radius,
required Vector2 position,
}) {
this.position = position;
size = Vector2.all(radius * 2);
anchor = Anchor.center;
}
}
Let us understand this code slowly.
We imported Flame components and Flutter material package because we need colors and drawing tools.
The TargetBoard class extends PositionComponent. This means the board can be placed anywhere on the screen.
We created a radius variable because different target boards may have different sizes.
We also set the anchor to center. This makes positioning much easier because the board rotates and scales correctly from its middle point.
Drawing the target board
Right now the component exists but nothing is visible. To show graphics on screen we need to override the render method.
@override
void render(Canvas canvas) {
super.render(canvas);
final center = Offset(radius, radius);
final outerPaint = Paint()
..color = Colors.white;
final blackPaint = Paint()
..color = Colors.black;
final bluePaint = Paint()
..color = Colors.blue;
final redPaint = Paint()
..color = Colors.red;
final yellowPaint = Paint()
..color = Colors.yellow;
canvas.drawCircle(center, radius, outerPaint);
canvas.drawCircle(
center,
radius * 0.8,
blackPaint,
);
canvas.drawCircle(
center,
radius * 0.6,
bluePaint,
);
canvas.drawCircle(
center,
radius * 0.4,
redPaint,
);
canvas.drawCircle(
center,
radius * 0.15,
yellowPaint,
);
}
This is the main part of the target board system.
We first create a center point. Since our board size is based on radius, the middle point becomes radius and radius.
After that we create multiple paint objects with different colors.
Then we use canvas.drawCircle several times. Every new circle becomes smaller than the previous one. This creates the layered target design.
The yellow center acts as the bullseye area. This is usually the highest scoring zone in arcade shooting games.
Adding the target board into the game
Now we need to place the board inside the actual game screen.
Open your main game file.
import 'package:flame/game.dart';
import 'package:flutter/material.dart';
import 'target_board.dart';
class TargetShooterGame extends FlameGame {
@override
Future<void> onLoad() async {
final target = TargetBoard(
radius: 100,
position: Vector2(
size.x / 2,
size.y / 2,
),
);
add(target);
}
}
Here we create one target board and place it at the center of the screen.
The size.x and size.y values come from Flame Engine. They represent the screen width and height.
By dividing them by two we place the board exactly at the middle.
Why layered circles work so well
Many beginner developers ask why target boards use circles instead of rectangles or random shapes.
Circles naturally guide the eye toward the center. This creates focus. Players instantly understand that the middle area is important.
Another advantage is fairness. Circular layers create equal distance from all directions. This makes scoring feel balanced and predictable.
Games like archery simulators, dart games, and carnival shooters use this design because players already understand it without needing tutorials.
Adding shadows for better depth
Flat graphics work fine, but adding a shadow gives the board more life. Small visual improvements can make your game feel much more polished.
Update your render method.
final shadowPaint = Paint()
..color = Colors.black.withOpacity(0.25);
canvas.drawCircle(
Offset(radius + 6, radius + 6),
radius,
shadowPaint,
);
Add this before drawing the outer white circle.
The shadow appears slightly below the board which creates a floating effect.
Creating scoring zones
A target board becomes much more useful when it can calculate score values.
We can create a simple function that checks how close the hit position is to the center.
int calculateScore(Vector2 hitPosition) {
final center = Vector2(radius, radius);
final distance =
hitPosition.distanceTo(center);
if (distance < radius * 0.15) {
return 100;
}
if (distance < radius * 0.4) {
return 75;
}
if (distance < radius * 0.6) {
return 50;
}
if (distance < radius * 0.8) {
return 25;
}
return 10;
}
This function checks the distance between the player hit and the center point.
Smaller distance means better accuracy.
The yellow center gives 100 points while outer rings give lower points.
Understanding hit detection
Hit detection is very important in shooting games. Players should feel that every click or tap is accurate.
In Flame Engine, touch positions usually come from tap events. Once the player taps the screen, you can compare that position with the target board.
If the tap falls inside the target area, you award points.
This simple system is enough for arcade games and casual browser shooters.
Making the board move
Target Shooter becomes exciting because targets move across the screen. Static boards are good for testing, but moving targets create real challenge.
Add an update method inside the TargetBoard class.
double speed = 150;
@override
void update(double dt) {
super.update(dt);
position.x += speed * dt;
if (position.x > 900) {
position.x = -200;
}
}
Here dt means delta time. It keeps movement smooth across all devices.
The board moves toward the right side continuously.
Once it leaves the screen, it goes back to the left side.
This creates endless moving targets similar to classic shooting games.
Improving performance
Many beginners worry about performance while drawing circles repeatedly. The good news is that simple shapes are extremely lightweight in Flutter and Flame.
Even low end phones can handle many target boards without issues.
Still, you should avoid unnecessary calculations inside the render method.
Keep your drawing code simple and organized.
Creating multiple targets
One target board is not enough for a full game. Usually games spawn many targets with different speeds and positions.
Here is a simple loop example.
for (int i = 0; i < 5; i++) {
final target = TargetBoard(
radius: 70,
position: Vector2(
-200.0 * i,
150 + (i * 100),
),
);
add(target);
}
This creates five moving target boards.
Each board starts from a different position which makes gameplay more dynamic.
Using bright colors correctly
Bright colors are useful in arcade games because they immediately catch player attention.
But using too many strong colors everywhere can hurt the visual quality.
The target board works well because only the center areas are bright. The player focus naturally goes there.
Good game design is not only about coding. Color balance and visual clarity are equally important.
Adding animation effects
Small animations can make your target board feel alive.
For example you can slightly scale the board when it gets hit.
This gives visual feedback and makes the game more satisfying.
Even simple arcade games feel much more professional when objects react to player actions.
Common mistakes beginners make
One common mistake is using huge target sizes. Oversized boards remove the challenge from the game.
Another mistake is making the center zone too large. The bullseye should feel rewarding because it is difficult to hit.
Some beginners also use too many shadows and effects. This can make the board look messy.
Simple and clean designs usually work best in browser games.
Making the game more addictive
Good target boards create tension. Players want to try again because they know they were very close to the perfect hit.
This is why timing games become addictive. Small improvements feel meaningful.
When your board design is clear and your scoring system feels fair, players naturally continue practicing.
That is the secret behind many successful arcade games.
Final thoughts
Creating a target board may look simple at first, but it teaches many important Flame Engine concepts. You learn rendering, positioning, movement, scoring, reusable components, and visual hierarchy all in one project.
Target Shooter style games are excellent practice projects for Flutter web game development because they are easy to understand yet still fun to build.
Once your target board system is complete, you can continue improving the game by adding sound effects, particle explosions, combo systems, moving backgrounds, difficulty levels, and leaderboards.
The best part is that the same target board system can later be reused in archery games, carnival shooters, sniper games, or training simulators.
Keep experimenting with colors, movement speed, and scoring zones. Every small improvement teaches you more about real game development.
