Quick reminder of the progress at this point: the game has two functional views of the environment outside the submarine: one from standing on the bridge, and the other from the attack periscope. Both can simulate the world to a decent degree of detail, including daytime, twilight, and nighttime, wind force (reflected on sea activity and clouds drifting), and a few types of cloud coverage. 

The next logical step was to add surface ships. In this log I’ll attempt to explain the process and illustrate the goal with Photoshop mock-ups. Get ready for a hefty read, which explores many moving pieces and dependencies. Where to even start? Well, hold on to something.

Building a Flotilla

First, one basic question: which types of ships to feature in the game, among the dozens that roamed the oceans during WW2? And how to trim down the list to a manageable number? Four factors governed the selection (assuming that this is the final cut): 

1. Historical accuracy: as much as I would love having the battleship Yamato, she only ever sailed the Pacific theater. The vast majority of warships in the Atlantic, at least early on, belonged to the Royal Navy, while the merchant ships primarily sailed US flags, bringing resources to the European conflict. There might be the occasional Soviet or French boats, and a handful of German ships for rescue missions.

Fletcher class destroyer USS Harrison

2. Frequency: the ships that U-boats were the most likely to encounter.

C2 class cargo ship

3. Fame: the most iconic ships. Those interested in the Battle of the Atlantic will hope to see the battleship Bismarck, or the aircraft carrier HMS Ark Royal, among others. A good historical simulation should respond to these expectations.

HMS Ark Royal, moments before sinking

4. Variety: ships offering the most interesting gameplay opportunities. For instance, oil tankers make perfect slow, high tonnage targets. Corvettes are scary U-boats hunters. Fleet destroyers, as high tonnage warships, score big, but their shallow draught make them hard to hit. Civilian ocean liners pose interesting ethical dilemma.

RMS Empress of Britain

With this in mind, I drew a tentative list. Warships include:

1. Aircraft carriers
2. Battlecruisers (and battleships)
3. Escort carriers
4. Fleet destroyers
5. Destroyer escorts
6. Light cruisers
7. Corvettes
8. Sloops

Civilian ships are constituted of:

1. Oil tankers
2. Ocean liners and troop transports
3. Cargo ships

Targets are either generic or unique (high scoring ships of military or historical significance, which I’ll let the players discover themselves). The majority of types of ships are reduced to their most iconic or most common class. I may have a few different classes of cargo ships for variety. Even then, the draft is likely too ambitious. I may end up cutting or combining ships sharing a similar look or function.

Cyclopean Scale

At this point I must redirect the conversation on game design, because it informs the graphics. I began to think about in-game scale, relating to both space and time, and discovered that when it comes to 20th century naval warfare, everything was huge and slow.

T2 class tanker

A few examples: a 16”/50 caliber Mark 7 gun on a Iowa class battleship could fire a one ton (2,200 pounds) shell at distances up to 38 km. It’s like launching a car 24 miles away. They had nine of them per ship. 

Follow the arrow. There's my wife, during our visit of the Battleship Missouri in Hawaii

A G7a steam torpedo was over seven meters (23 feet) long, and carried 280 kg (over 600 pounds) of explosives as far as 12 km (7.5 miles) away. A typical destroyer like the Fletcher class had an operational range of over 10,000 km (6,000 miles). The Battleship Yamato had 410 mm (16 in) of solid steel armor around the waterline.

A torpedo being loaded aboard a U-boat

As for time, anything took forever. In his book “Iron Coffins”, Herbert A. Werner refers to “chases” going at the neck breaking speed of 12 knots (that’s under 14 mph). He speaks about how positioning the U-boat for an attack could take several hours. WW2 naval warfare was a battle of giants happening in slow motion.

The British sloop HMS Chanticleer, at 86 m long, is considered a small warship

In a video game, particularly played on a portable console, this poses a serious problem. Many simulations choose the time stretching option; the player has the ability to speed up or slow down time at will. I don’t like this for two reasons:

First, there’s something intrinsically weird about manipulating time. For a genre that is all about realism, it’s a strange concession. 30,000 ton ships zooming around on a chart at x12 time speed have a devastating impact on immersion. Time speed up also diminishes tension, as the build up to a climactic confrontation can be skipped. It removes the long quiet phases so defining of naval warfare.

Second, I only want the player to think about the game, not the system behind the game. Managing time becomes a chore that draws the focus away from making tactical and strategic decisions. The player is constantly worried about picking the right time multiplication factor; too slow and nothing happens. Too fast and they could miss the window for an important decision. It breaks the natural flow and pace of the game.

The  British light cruiser HMS Newfoundland

For Atlantic ‘41 I want to try the turn based approach, in which the amount of time passing and the actions available each turn change contextually. For instance, while traveling between sectors, a turn may represent two hours, with actions ranging from making repairs, to trimming the boat, to taking a celestial navigation fix. During encounters with enemy ships, turns may shrink down to 20 minutes, with actions like firing torpedoes, changing course and speed, or diving… I’m still figuring this out but I imagine a system in which actions would be worth a number of time points, corresponding to how long they take. The excellent Valkyria Chronicles had a great twist on the classic turn based approach.

With this system the player doesn’t have to juggle the time and can focus on the game. Even though the world is frozen between turns, each turn advances the time at a constant rate. There’s a lot of unknowns at this early stage, but my gut feeling is that it’s a more elegant solution. It establishes clear and logic rules and frees the player from clunky time management. 

Backstage Preparations

That long sidetracking was meant to give essential context about the graphics in the exterior views. The Playdate limited resolution and palette make difficult, if not impossible, any real time scaling or rotation; small sprites turn into a confusing jumble of pixels. Not to mention the disastrous impact on performance turning the game into a slideshow.

But the turn based system gets rid of this real time burden; because even though the environment feels alive (the ocean flows, clouds drift in the sky, sea birds come and go, life goes on aboard the U-boat), from a game perspective, time is frozen. When the player hits the next turn button then time jumps ahead and actions are resolved. In consequence there’s no need to scale, move, or rotate the ships in real time. The game skips to an updated situation. And this is huge.

Angle on bow calculation

But there’s more; the periscope and bridge views in Atlantic ’41 fill one basic function, which is visual acquisition of targets in preparation for launching torpedos, firing the gun, or taking evasive maneuvers. Other than that they merely fuel the player’s imagination. These views don’t need to reflect with precision either the target’s range or angle on bow (angle at which a ship is seen from the U-boat), since this information will appear on the dedicated Torpedo data computer (TDC) and chart screens. More on this next time.

Atlantic '41 will feature a much simplified version of the torpedo data computer

Now considering all these facts, all I need is an approximate representation of the angle on bow and the distance of ships, to look somewhat in line with the precise data communicated both through the navigation chart and TDC. 

The chart table aboard U-995

The best way to ensure that ships keep their visual integrity is to pre draw them at various sizes and angles, but since I don’t need real time updating or precision, three sizes and three angles should be enough. Sizes correspond to short, medium, and long range. Pre drawn angles on bow correspond to 0° to 30°, 30° to 60°, and 60° to 90°. Then 90° to 180° are identical because in most cases distances are such that it’s impossible to tell if a ship is moving toward or away from you.

One pre drawn angle on bow sprite per 30 degrees arc 

So each type of ship has its own array of 36 pre drawn Bitmap images: 6 angles (3 covering port angles on bow and 3 for starboard) x 3 sizes (1 for every range) x 2 (day or night). Every turn, calculations determine the image to be drawn for each ship which best reflects its actual distance and angle on bow at the corresponding time.

How Small is Too Small?

Various historical and technical readings place at 8 km the maximal sighting range in daylight and good weather. It’s roughly the distance to the horizon from an observation point equivalent to a person standing on the bridge. However, 4 km is realistically about as far as a torpedo has any reasonable chance of hitting.

Based on this, I set short range between 300 m and 1 km (the captain won’t bring the U-boat closer than 300 m from any ship to prevent collisions, and because it’s the minimal range to arm a torpedo). Medium range goes from 1 km to 4 km, and long, from 4 km to 8 km. Beyond 8 km ships sink below the horizon (one of the most easily observable phenomenon proving that the earth is round). Technically, from the bridge of the U-boat and with goggles, a crew member could spot the mast or the funnel of a large ship beyond 8 km, but I need a simple scale system that combines visual and torpedo ranges. Past the 8 km range, the player will have to resort to the hydrophone, which I’ll cover in the future. 

Flower class corvette

At this point the only missing factor is the screen scale; that is the pixel to meter ratio at which the largest ship at close range doesn’t look out of proportions, while the smallest ship at long range remains visible. An important distinction here: far away ships just need to be visible, not identifiable. The identification will happen in the TDC. 

Liberty class cargo ship

I picked the smallest, the biggest, and one average sized ship. When referring to ship size in the game, assume length, more than tonnage, since that’s what drives the visuals.
The smallest ship is the corvette (Flower class), at 64 m (209 feet).
The largest ship is likely to be the battlecruiser HMS Hood, at 262 m (859 feet).
The most common ship, by far, is the Liberty class cargo ship, at 134 m (439 feet). These workhorses of the US merchant fleet ferried millions of tons of goods to support Britain in its fight. More than 2,700 ships were built between 1941 and 1945, at a peak rate of three ships every two days. 

Battlecruiser HMS Hood

I calculated the rough average length of all ships somewhere between 100 m (328 feet) and 150 m (492 feet). With these values in mind, here’s what I came up with: at close range (300 m to 1 km), the scale is 1.5 pixels per meter. At medium range (1 km to 4 km), it’s 1 pixel per meter. And the far range scale (4 km to 8 km) is 0.66 pixels per meter.
This puts the Hood at close range at an impressive 393 pixels long (262 m x 1.5), and the corvette at long range at a worrying 42 pixels (64 m x 0.66)

All the pre drawn sprites according to angle on bow and distance for the Liberty ship

I realize that these are arbitrary conventions which don’t follow the physical reality. It doesn’t make sense that a ship becomes 50% smaller just because it crosses the 1 km range, or that it looks the same at 4 km and 8 km, to suddenly vanish at 8.1 km. But I think that it’s preferable to the pixelated mess of real time proportional resampling. Besides, turn based system will make it impossible to see ships pop larger or bigger as they cross a range threshold.

It would take to long to detail how I drew the ships at various scales and angles, but it involved a significant amount of research and a good bit of improvisation. At this size, I have to focus on the large characteristic shapes and merely suggest the details. It comes down to making sure that hull proportions are correct, and that masts, funnels, turrets and bridges are faithfully represented. Everything else is irrelevant. 

As black silhouettes, difficult to understand the relative sizes of the ships and their distance to camera

The method I described should work in theory. But as usual, before diving into code, I put together a few examples in Photoshop. I drew a corvette (smallest ship), a cargo ship (average ship), and the HMS Hood (largest ship), and placed them around in a Photoshop mock-up. Close range ships were placed 10 pixels lower than the horizon line, medium range a few pixels above the close ones, and the far away ships sat on the horizon, to help with perspective. 

Two Perspectives Are Better Than One

The first ships worked well in context, if not for one essential flaw, which as usual turned into a much bigger issue than I had anticipated.

When we picture how objects change with distance, we naturally think about size: in short, the further away stuff is, the smaller it gets. And that’s what the three pre drawn images corresponding to short, medium, and long range are for. Objects shrinking with distance is part of what artists call linear perspective. 

Specific dithering techniques per range 

In my mock-up I drew the ships as black silhouettes, outlined for separation from the background and one another. That's the obvious thing to do. But that test exposed the lack of another indispensable visual feature: atmospheric perspective (sometimes called aerial perspective). It’s a fancy term describing how artists simulate depth and distance by painting far away objects with less contrast, as seen through layers of atmosphere and dust particles. Remember how Bob Ross painted mountains as mere blue silhouettes? That’s atmospheric perspective.

Dark red areas show the pixels manually preserved from the dithering

My solid black ships didn’t sit properly in the environment. Without atmospheric perspective, and even drawn at the proper scale, there’s no way of telling if one ship is closer than another, or if it’s larger. With a few more colors available, that wouldn’t be an issue. Let’s dither then. The problem is that dithering messes up small images. It worked well enough on land masses and clouds, but imagine the effect that it can have on the minuscule 42 pixels corvette. At this size, a mast is one pixel wide. So dithering will slice it up. A turret is 3 x 2 pixels, so dithering messes up its shape.

Translating the dithering even by one pixel can have a positive impact on tiny sprites. I know what you think, but I can't help it.

There’s no magic fix for that. No clever automated shortcut that I could come up with, other than careful pixel by pixel touch up of every sprite; the goal being to keep enough dithering to maintain the illusion of a lighter value, while protecting the integrity of the outline and other defining features, like masts and turrets. Small, far away ships suffered the most. But I’m not too concerned. It’s only logical that ships at the outer edge of visual range would be barely legible. And in the same way as the TDC will provide detailed and accurate information about distance and angle on bow, it will also show the targeted ship as a full screen profile picture.

Same ships as above. Now with dithering, which helps to conveying size and distance

Once I figured the best dithering method I went over every sprite, pixel by pixel. More than a few won’t be perfect. But sometimes the best you can hope for is to avoid the worst. A few kinks remain, which I’ll iron out in code. For instance I may need a double blinking outline to emphasize the selected ship when several of them overlap. Not pretty, but likely unavoidable. I will also need to adapt the maximal visual range to reflect visibility conditions, like overcast or nighttime.

The majestic Hood enters frame, while a Liberty ship sails in the distance 

Based on the images shown here, I feel comfortable enough to move away from Photoshop and to start implementing ships in the game. I’ll cover this the in next log. Even though we now know that my predictions are a joke, I’ll try to show the torpedo data computer mock-up, and explain how exterior views, TDC and navigation chart all combine into a comprehensive system.

More soon.

Now the Hood falls back in the distance, while an unsuspecting Liberty ship sails toward her doom

Target rich environment