How to make web game suitable for both mobile and PC Poki

Questions
1

Hello, somewhat new to Defold. I’m trying to make a Poki web game which supports both mobile and PC, and I’m at a loss on how do I go about it.
I am using the Poki HTML5 template, but not sure how I would handle the changes in resolutions or orientation. Should I stick with the base resolution of 1920x1080 in the template? How do I make the game fullscreen when it’s played on mobile? How do I detect when I’m on mobile or PC?
I would appreciate a nudge in the right direction, thank you.

2

There’s no need to handle orientation changes manually, because in HTML5 the orientation is always the same - only the canvas width and height change (you can get them using window.get_size()).

You can use a base resolution like 1920×1080, 1280×720, or 960×540, or 540x960 etc - it’s really up to what’s most convenient for you. This setting only affects the initial window size when running the game on desktop (non-HTML5) and determines the base layout in your GUI. That’s it! You can always scale your graphics as needed.

In the game itself, your best friend is the camera component, which you can use to adjust the zoom level for any screen size.

You don’t need to make the game fullscreen on mobile manually - the Poki site layout takes care of that automatically.

To detect whether the player is on mobile or desktop, you can simply check for the touch_multi input event in on_input. If it’s received, you can assume it’s a mobile device and show touch controls instead of keyboard/mouse controls.

For an initial desktop/mobile check, you can also use this helper module:
https://gist.github.com/aglitchman/fca1d6c4f5bad3e16033798cffea9ae1

5 Likes
3

The type of resolution you choose depends on the game you’re making. Say a portrait or landscape game.

The game will be rendered as per the resolution you set when played or mobile. Mobile platforms often render the app in its own window, there is no fullscreen or windowed logic similar to desktop platforms. It’s best to consider view projection modes given how mobile displays come in all manners of Resolutions, aspect ratios and form factors. You can learn more here: Adapting graphics to different screen sizes (and also ask question here :smiley: )

To detect when the game is running on mobile or PC is easy. You use the sys functions.

For instance, I have a link in my game to direct the user to the Play Store or my itch io page, I simply do this:

local sysInfo = sys.get_sys_info()
local osName = sysInfo.system_name

local function moreApps(self)
if osName == “Linux” or osName == “Windows” or osName == “Darwin” then
self.ui.buttonPressed(self, gui.get_node(“more-games-button”))
sys.open_url(“https://oneredeyedev.itch.io”, {target = “_blank”})
elseif osName == “Android” or osName == “iPhone OS” then
self.ui.buttonPressed(self, gui.get_node(“more-games-button”))
sys.open_url(“https://play.google.com/store/apps/developer?id=One+Red+Eye+Dev”, {target = “_blank”})
end
end

Basically, I get the OS Name and when the user presses the button “More Games“ they are taken to the itch page if they are on Windows, Linux or Mac OS (Darwin) if they are on mobile; Android or iOS, they are redirected to the play store (The iOS part is simply for users playing on their iPhones on the web, when it gets published to the App Store, they’ll be redirected there)

2 Likes
4

Thank you