Make browser games that play great on phones

Share a game link in a group chat and almost everyone opens it on a phone. If the game needs a keyboard, they close it in five seconds. Every arcadegnt game is built to work on phones as well as computers: your assistant adds touch controls, fits the HUD to a wide phone screen, and plays the game on a phone-sized screen in a real browser before it hands you the link. This guide covers what makes a game feel good on a phone and what to ask for.

What you get

• Touch controls out of the box. The starter project has an on-screen joystick and an action button that drive the same controls as the keyboard and gamepad.
• One game for every screen. The same link works on a laptop, a tablet and a phone, with no app to install.
• Phone testing on every check. check_game plays your game on a desktop screen and on a phone held sideways, and sends back screenshots from both.
• Home-screen ready. Give the game an icon, and players can add it to their home screen like an app.

How phone play works

Controls

The touch controls only appear when the device has a touchscreen, so desktop players never see them. They follow each finger on its own, so you can steer with one thumb and jump with the other. Your assistant can change them to suit the game:

• A joystick and one button for platformers, shooters and racers.
• Tap anywhere for one-button games like flappy or rhythm games.
• Drag for aiming, slingshots and puzzle games.
• Swipe for lanes, dodges and card games.

Buttons should be big (the guide asks for about 90 pixels on the 1280x720 canvas) and sit in the bottom corners, where thumbs rest.

The screen

Phones held sideways are wider than a laptop screen. The starter stretches the game to fill the width and pins the score, health and buttons to the edges, so nothing is cut off. Keep important things away from the bottom corners, because that's where the thumbs and the touch controls go.

Orientation

Most action, racing and 3D games want the phone sideways. Ask your assistant to set the game to landscape, and players holding their phone upright see a "turn your phone sideways" screen. Puzzle, card and endless-runner games often work better upright, and that works too.

Sound

Browsers only play sound after the first tap. A good game starts its music on the first tap or on the title screen's Play button, so players never miss it.

Size and speed

A small game starts fast on a phone network. Keep textures at 2048 pixels or smaller, use OGG for audio, and keep the whole project well under the 150 MB limit. Under 60 MB is a good target. Simple shapes with good lighting run smoothly on older phones, where heavy models and huge textures don't.

Your first phone-first game

Paste a prompt like this one:

Make a one-thumb endless runner with arcadegnt that plays best on a phone held
upright. Tap to jump, hold to jump higher, swipe down to slide. Big readable score at
the top, nothing important near the bottom. Start the music on the first tap. Build it
and check it on desktop, phone and phone-portrait.

Your assistant will:

1. Write the game with touch controls that fit how it plays.
2. Build it, fixing any errors arcadegnt reports with file and line.
3. Play it with check_game on a desktop, a phone held sideways and a phone held upright, look at the screenshots, and fix anything clipped, covered or too small.

You get a link like https://thumb-run.arcadegnt-play.com/. Open it on your own phone, and send it to a friend.

Tips for better results

• Name the controls. "Joystick bottom left, jump button bottom right" or "tap anywhere to flap" gets you there faster than "add phone controls".
• Check portrait too. Ask for the phone-portrait view in check_game to see what someone holding their phone upright sees.
• Ask the assistant to read the screenshots like a player. Is the text big enough? Are the buttons covering the action? Can you tell where to tap?
• Make menus tappable. Every menu, pause and game-over screen should work with a tap, not only Enter or Escape.
• Add an icon. With set_game_images, your game gets an icon for the browser tab and the phone home screen, and a splash while it loads.
• Try it yourself. Screenshots catch most things, but only your thumbs can tell whether the jump feels right.

Game ideas to try

• A one-thumb endless runner with lanes and coins.
• A slingshot puzzle game where you drag back and let go.
• A two-thumb top-down shooter with a joystick and a fire button.
• A tap-to-the-beat rhythm game with a high score table.

When the game is ready, ask your assistant to submit it to the arcadegnt gallery, where most people will play it on their phones.

Want the game to look as good as it plays? Read Make good-looking games without asset generators or Use free asset packs from Kenney and Poly Haven.