Build the foundations of a board of a digital game, part 1 of a videogame development diary

Build a game board employing SwiftUI for an iOS video game that is able to move by dragging, zoom and identify any tapped point in the map

SOFTWARE DEVELOPMENTIOS DEVELOPMENTWARGAMESWIFTUICOMBAT SIMULATION

Eduardo Domínguez Menéndez

3/18/20256 min read

Welcome to the first entry in this development diary, where I document the process of creating an interactive digital board for iOS. The video game will follow the mechanics of a hex and counter game. The final goal is create a combat simulation focused on supply and command and control (C2).

At technical level, the game is targeted for iOS and it will be developed employing SwiftUI.

This diary will cover technical, logic, mechanics as well as documentation and research for the game. Today entrance is technical.

The first step, prototype of the map

What is described in this first entrance is a prototype of map that allows users to pan and zoom across a map while enabling precise tap detection for interaction. This initial version sets the foundation for a complete system that will later incorporate a hexagonal grid overlay for more structured interactions.

In this article, I’ll break down the implementation, highlighting design decisions such as:

Using GeometryReader for layout control.
Implementing gestures for movement and zooming.
Handling tap interactions and rendering elements dynamically.
Ensuring render in right position any element on the map when scaling or moving / panning the board.

Watch the video of this prototype before dive into the details:

The board displayed in this prototype is from The Battle for Normandy, a historical wargame published by GMT Games. The specific region shown represents the Utah Beach landings and the Cotentin Peninsula, the map art was made by Mark Simonitch.

Understanding the Layout and Logic

At the core of this implementation is SwiftUI’s GeometryReader, which allows us to determine the precise location of taps and dynamically adjust the layout of elements. The main components of our board include:

The Map Image: A resizable Image view that users can zoom and pan / move.
Gesture Support: DragGesture for movement and MagnificationGesture for zooming.
Tap Detection: A mechanism to identify the exact coordinates tapped on the image.
Visual Feedback: A rectangle is drawn at the tap location to validate correct coordinate mapping.

Code Walkthrough

Implementing the Board with GeometryReader

The board is wrapped in a GeometryReader, which provides access to the parent view’s dimensions. This ensures accurate placement of UI elements, regardless of screen size.

The board is represented by an Image view.

Adding Zoom and Drag Gestures

I apply a simultaneous gesture (SimultaneousGesture) to the Image view. It combines two different gestures:

Drag Gesture (DragGesture): Adjusts the offset, allowing the user to move the image.
Magnification Gesture (MagnificationGesture): Adjusts the scale, enabling zooming.

Handling Tap Interactions and Mapping Coordinates

To accurately detect tap positions on map, I compute the adjusted coordinates using the following logic taking into account the scaled and offset image. This logic is a key architectural component, it allows identify when the user taps the board and the position in the map without scale neither offset. The formula is for the x coordinate, the y coordinate will be the same changing width by height.

Lx is the raw x value of the tapped position in screen.
W is the width of the screen, we know it from the GeometryReader
Ox is the offset on X axis, we store it in a property wrapper that handles the drag gesture.
S is the scale, we store it in a property wrapper that handles the magnification gesture.

Render at right place

To verify tap accuracy, I overlay a small green rectangle at the computed tap location. This rectangle updates dynamically and scales appropriately when the map is moved or resized. This logic is other key architectural component. It will be used to render anything on the board on the right position. The formula is for the x coordinate, the y coordinate will be the same changing width by height.

Px is the position of the element on the without scales neither offsets. In this proof of concept it has been stored in a a basic property wrapper of type CGPoint. It's what we calculated in previous topic
W is the width of the screen, we know it from the GeometryReader
Ox is the offset on X axis, we store it in a property wrapper that handles the drag gesture.
S is the scale, we store it in a property wrapper that handles the magnification gesture.

Next Steps: Implementing a Hex Grid System

With the basic interaction system in place, the next step in this project is to overlay a hexagonal grid system onto the board. This will enable structured movement and interactions within a game framework. The hex grid will be dynamically generated and must adjust based on the zoom level and board position.

Future improvements include:

Hex coordinate mapping to determine which hexagon a user taps.
Game logic integration for unit placement and movement.
Hex grid rendering using SwiftUI’s Path and Canvas

Conclusion

This prototype demonstrates a scalable approach to handling panning, zooming, and tap interactions on an interactive game board in SwiftUI. With GeometryReader, simultaneous gestures, and coordinate transformations, I ensure a smooth and responsive user experience as well as a solid foundation to create the game mechanics and interactions of the player.

In the next entry, I will expand on this foundation by incorporating hex-based grid. If you're interested in digital board game development, be sure to follow along as I bring this system to life!

Identify tapped position taking scale and offset

Formula to render on image with scale and offset

Suggested Software Applications to improve your developer workflows

Prompt Creator

Generate the best prompts forgetting prompt engineering techniques and their extra verbose while you are drafting prompt. You focus in define the details of the task and Prompt Creator creates the best prompts following a template approach which seamlessly generates the extra verbose to query the best prompts to your Chat AI or chatbot.

GIS for Developers

A tool to collect locations on a map and transform them on entities of MapKit framework to import in Xcode ready to use in your projects. Boost your productivity on GIS projects. App has two two versions: native macOS and iOS for iPad.

See on App Store

The best Mac trade off price versus performance and cutting edge features

Suggested stuff for a developer

The following items are a list of stuff that really help us in our daily workflows as developers as well as for your free time. Buying through these Amazon links support this site.