How would we add support for touch screens, allowing both flag placement and cell clearing with touch gestures?

Question

Ryan McCombe · Accepted Answer

Adding touch screen support to our Minesweeper game is an excellent way to make it more accessible on mobile devices and tablets.

We'll need to modify our existing code to interpret touch gestures for both clearing cells and placing flags. Let's explore how we can implement this feature.

Touch Gestures

For our touch-enabled Minesweeper, we'll use the following gestures:

Single tap: Clear a cell (equivalent to left-click)
Long press: Place/remove a flag (equivalent to right-click)

Implementation

We'll need to modify our MinesweeperCell class to handle touch events. SDL2 provides touch event handling through its event system. Here's how we might implement this:

1#include <SDL2/SDL.h>
2#include <iostream>
3
4class MinesweeperCell : public Engine::Button {
5public:
6  MinesweeperCell(int x, int y, int w, int h)
7    : Button{ x, y, w, h }
8      , longPressStartTime{ 0 } {}
9
10  void HandleEvent(
11    const SDL_Event& e) override {
12    switch (e.type) {
13      case SDL_FINGERDOWN:
14        HandleFingerDown(e.tfinger);
15        break;
16      case SDL_FINGERUP:
17        HandleFingerUp(e.tfinger);
18        break;
19      default:
20        Button::HandleEvent(e);
21        break;
22    }
23  }
24
25private:
26  Uint32 longPressStartTime;
27  static constexpr Uint32 LONG_PRESS_DURATION =
28    500; // 500ms
29
30  void HandleFingerDown(
31    const SDL_TouchFingerEvent& e) {
32    if (IsPointInside(e.x * SCREEN_WIDTH,
33      e.y * SCREEN_HEIGHT)) {
34      longPressStartTime = SDL_GetTicks();
35    }
36  }
37
38  void HandleFingerUp(
39    const SDL_TouchFingerEvent& e) {
40    if (IsPointInside(e.x * SCREEN_WIDTH,
41      e.y * SCREEN_HEIGHT)) {
42      Uint32 pressDuration =
43        SDL_GetTicks() - longPressStartTime;
44      if (pressDuration
45        >= LONG_PRESS_DURATION) {
46        HandleLongPress();
47      } else { HandleTap(); }
48    }
49    longPressStartTime = 0;
50  }
51
52  void HandleTap() {
53    std::cout << "Cell tapped (clear cell)\n";
54    ClearCell();
55  }
56
57  void HandleLongPress() {
58    std::cout
59      << "Cell long-pressed (toggle flag)\n";
60    ToggleFlag();
61  }
62
63  void ClearCell() {
64    // Existing cell clearing logic
65  }
66
67  void ToggleFlag() {
68    // Existing flag toggling logic
69  }
70
71  bool IsPointInside(float x, float y) const {
72    return x >= GetX()
73      && x < GetX() + GetWidth() && y >= GetY()
74      && y < GetY() + GetHeight();
75  }
76};
77
78int main() {
79  // SDL initialization code...
80
81  MinesweeperCell cell{ 100, 100, 50, 50 };
82
83  SDL_Event e;
84  bool quit = false;
85
86  while (!quit) {
87    while (SDL_PollEvent(&e) != 0) {
88      if (e.type == SDL_QUIT) { quit = true; }
89      cell.HandleEvent(e);
90    }
91
92    // Rendering code...
93  }
94
95  // SDL cleanup code...
96  return 0;
97}

Let's break down the key components of this implementation:

We've added SDL_FINGERDOWN and SDL_FINGERUP event handling to our HandleEvent() method.
HandleFingerDown() records the start time of a touch.
HandleFingerUp() calculates the duration of the touch and determines whether it was a tap or a long press.
We use SDL_GetTicks() to measure the duration of a touch.
The IsPointInside() method checks if a touch point is within the cell's boundaries.
We've defined LONG_PRESS_DURATION as 500ms, but you can adjust this value based on user testing.
The HandleTap() and HandleLongPress() methods can be implemented to clear the cell or toggle the flag, respectively.

Considerations

Screen Size: Note that touch coordinates are normalized (0.0 to 1.0), so we multiply by SCREEN_WIDTH and SCREEN_HEIGHT to get pixel coordinates.
Multi-touch: This implementation doesn't handle multi-touch scenarios. You might want to add logic to track multiple touches if that's a requirement.
Accessibility: Consider adding visual or haptic feedback for long presses to help users understand when they've held long enough to place a flag.
Testing: Thoroughly test on various devices to ensure the touch timings feel natural across different hardware.

By implementing touch support, we make our Minesweeper game more accessible to a wider range of devices and users. This implementation maintains the core gameplay while adapting it to touch interfaces, allowing players to enjoy the game on tablets and smartphones just as they would on desktop computers.

Placing Flags

Touch Support in Minesweeper

Touch Gestures

Implementation

Considerations

Placing Flags

Game Development with SDL2

Questions & Answers