Mobile ❤️ Game = True

Pirate Sea Jam has now officially been made mobile friendly! 

Making the game playable in mobile browsers on Itch.io and accessible to a broader audience at this stage of development means that more people will be able test the Pirate Sea Jam prototype and hopefully come with relevant and valuable feedback as the game continues to evolve.

Supporting different  platforms

Adding support for different hardware platforms mainly boils down to two things. 

1. Adjusting the layout of the scene depending on screen size and aspect ratio
2. Adding support for different input devices

Adjusting the Layout

For complex layouts with emphasis on text (think social media app), adjusting to arbitrary screen sizes might require independent scaling of  things like image resolutions, text sizes and column widths. 

Accommodating for different screen sizes for a graphic-focused video game typically means that the game scene (shown as a yellow field in the illustrations below) is scaled as a whole together with its content to either fit the screen or to fill the screen. 

Pirate Sea Jam is a visually open ended 3D game, and the scale to fill mode is the most suitable. Peripheral elements at the edges of the game scene, which might be obscured for some aspect ratios, are typically not crucial. As an alternative, the scale to fit mode can be employed if the whole game scene needs to be visible in the viewport all the time. The latter having the downside that blank bars might show up on the edges of the screen for some aspect ratios.

Note that user interface element such as buttons can be overlaid and positioned in relation to the physical screen's width and height. For example a "close tab" button could be placed at 16 units below the top of the screen and 24 units left of the right edge of the screen, regardless of the scale mode.

Different Input Devices

Games can obviously be played using different input devices such as keyboard and mouse, touch screen, or gamepad. 

When making Pirate Sea Jam mobile friendly measures have to be takes so that the player can control the pirate ship without having a connected keyboard or mouse.  

A virtual gamepad has now  been added to the screen in Pirate Sea Jam. There is a virtual joystick to steer the ship, which shows up as a gray square with a trail when dragging a finger across the screen, and there are two buttons in the lower right corner to fire the cannons and boost the ship speed.

Detect input device

In order to know if the virtual gamepad should be displayed in Pirate Sea Jam, we need to do some smart checks. There are several approaches to detecting what type of platform a game is run on. 

One straight forward way is to simply create different versions of the game for different platforms and ask the player to pick the preferred one. The downside is that this could lead to a more cumbersome development process setup and there might be some ambiguity for the player. For example what version to choose when using a tablet with a physical keyboard connected?

In most scenarios a more automated approach is desirable. Checking what operating system the game is running under, such as Android, iOS, OSX, Windows, or Linux could be another way to see if the game is running on a desktop PC with mouse and keyboard or on a mobile device with a touch screen. But that also presents the problem of ambiguity. 

The real question is not necessarily what operating system the game is run on or if the player's device is mobile or not. After all, you can carry most desktop computers around, right? 😉

The relevant question is "what input device is the player using?" in order to know if the virtual gamepad should be presented or not.  

This check has been implemented in Pirate Sea Jam using the "start game" button on the splash screen. We can assume that keyboard and mouse is used for input, if the player clicks on the button using a mouse. Likewise, we can assume that touch screen is used for input and display the virtual gamepad if the player taps the button on a touch screen. 

This type of check can be labeled "feature detection" and has less of an ambiguity problem, compared to relying on what operating system and platform the game is running on to adjust input support.

Voila, and we're good to go on mobile! 

Next up

Coming up is making the camera in the game dynamic so the ship doesn't sail off screen. 

Ship ahoy!