diff --git a/creator/SUMMARY.md b/creator/SUMMARY.md index d019510e..cbb2d93a 100644 --- a/creator/SUMMARY.md +++ b/creator/SUMMARY.md @@ -125,15 +125,6 @@ * [Make Discoverable](sdk7/publishing/make-discoverable.md) * [Publishing Options](sdk7/publishing/publishing-options.md) * [Publishing](sdk7/publishing/publishing.md) -* [Building for Mobile](sdk7/building-for-mobile/) - * [Overview](sdk7/building-for-mobile/README.md) - * [Detect the platform](sdk7/building-for-mobile/detect-platform.md) - * [Preview on mobile](sdk7/building-for-mobile/preview-on-mobile.md) - * [Mobile safe area](sdk7/building-for-mobile/safe-area.md) - * [UI best practices](sdk7/building-for-mobile/ui-best-practices.md) - * [Input on mobile](sdk7/building-for-mobile/input-on-mobile.md) - * [Get featured](sdk7/building-for-mobile/get-featured.md) - * [iOS curation](sdk7/building-for-mobile/ios-curation.md) * [Interactivity](sdk7/interactivity/) * [Button Events](sdk7/interactivity/button-events/) * [Click Events](sdk7/interactivity/button-events/click-events.md) @@ -186,6 +177,24 @@ * [Scene Analytics](sdk7/other/scene-analytics.md) * [Migrate Legacy SDK6 Scenes](sdk7/other/migrate-legacy-sdk6-scenes.md) +## Build for Mobile + +* [Mobile Client](build-for-mobile/mobile-client/) + * [Overview](build-for-mobile/mobile-client/overview.md) + * [Sample Scenes](build-for-mobile/mobile-client/sample-scenes.md) + * [Missing Features](build-for-mobile/mobile-client/missing-features.md) + * [Hardware Requirements](build-for-mobile/mobile-client/hardware-requirements.md) +* [Develop](build-for-mobile/develop/) + * [Detect the platform](build-for-mobile/develop/detect-platform.md) + * [Preview on Mobile](build-for-mobile/develop/preview-on-mobile.md) + * [Mobile Safe Area](build-for-mobile/develop/safe-area.md) + * [UI Best Practices](build-for-mobile/develop/ui-best-practices.md) + * [Input on Mobile](build-for-mobile/develop/input-on-mobile.md) + * [Performance](build-for-mobile/develop/optimize-performance.md) +* [Publish](build-for-mobile/publish/) + * [Get Featured](build-for-mobile/publish/get-featured.md) + * [iOS Curation](build-for-mobile/publish/ios-curation.md) + ## 3D Modeling and Animations * [3D Models](3d-modeling/3d-models.md) diff --git a/creator/build-for-mobile/develop/README.md b/creator/build-for-mobile/develop/README.md new file mode 100644 index 00000000..6f38b524 --- /dev/null +++ b/creator/build-for-mobile/develop/README.md @@ -0,0 +1,8 @@ +# Develop + +- [Detect the platform](detect-platform.md): Detect whether your scene is running on mobile, desktop, or web. +- [Preview on mobile](preview-on-mobile.md): Preview your scene on a real mobile device from the Creator Hub or the CLI. +- [Mobile safe area](safe-area.md): Where scene UI can safely live on mobile — clear of the system HUD and the device's hardware-reserved margins. +- [UI best practices](ui-best-practices.md): DOs and DON'Ts for designing scene UIs that work well on mobile. +- [Input on mobile](input-on-mobile.md): How input actions map to touch on the Decentraland mobile client. +- [Performance](optimize-performance.md): Mobile scene limits, how to preview them in Creator Hub, and how to hit performance targets. diff --git a/creator/build-for-mobile/develop/detect-platform.md b/creator/build-for-mobile/develop/detect-platform.md new file mode 100644 index 00000000..3d8fa7b8 --- /dev/null +++ b/creator/build-for-mobile/develop/detect-platform.md @@ -0,0 +1,90 @@ +--- +description: Detect whether your scene is running on mobile, desktop, or web. +--- + +# Detect the Platform from Code + +Use the `isMobile()` function to adapt your UI, controls, and gameplay specifically for mobile. This is the recommended way to deliver a great experience across all clients without forking your scene logic entirely. + +## Available functions + +```ts +import { getPlatform, isMobile, isDesktop, isWeb } from '@dcl/sdk/platform' +``` + +* **`getPlatform()`** — returns the current platform as `'mobile' | 'desktop' | 'web' | null`. Returns `null` until the explorer has reported its platform back to the scene (this happens shortly after the scene starts). +* **`isMobile()`** — returns `true` if the player is on the mobile client. +* **`isDesktop()`** — returns `true` if the player is on the desktop client. +* **`isWeb()`** — returns `true` if the player is on the web client. + +{% hint style="warning" %} +**📔 Note**: These functions read a value that is populated asynchronously when the scene starts, and nothing guarantees it's already available by the time `main()` runs. If you call them too early, they may still return `null` / `false`. To be safe, defer any platform-dependent setup until `getPlatform()` returns something other than `null`, for example by checking inside a system: + +```ts +import { engine } from '@dcl/sdk/ecs' +import { getPlatform } from '@dcl/sdk/platform' + +function platformCheckSystem() { + if (getPlatform() === null) return + engine.removeSystem(platformCheckSystem) + setupUI() +} + +engine.addSystem(platformCheckSystem) +``` +{% endhint %} + +## Branch your UI by platform + +A common pattern is to set up a different UI for mobile and desktop players: + +```ts +import { isMobile, isDesktop } from '@dcl/sdk/platform' + +function setupUI() { + if (isMobile()) { + // Larger buttons, simpler layout for touch + createMobileUI() + } else if (isDesktop()) { + // Denser layout tuned for keyboard and mouse + createDesktopUI() + } +} +``` + +You can also use the same pattern to: + +* Show or hide on-screen instructions tailored to each input method. +* Replace small clickable elements with larger touch targets on mobile. +* Disable input bindings that are not easily available on mobile (see [Input on mobile](input-on-mobile.md)). + +## Checking the raw platform value + +If you need to handle multiple platforms in a single switch, use `getPlatform()`: + +```ts +import { getPlatform } from '@dcl/sdk/platform' + +const platform = getPlatform() + +switch (platform) { + case 'mobile': + // mobile-specific behavior + break + case 'desktop': + // desktop-specific behavior + break + case 'web': + // web-specific behavior + break + case null: + // platform not yet known + break +} +``` + +## Related + +* [Mobile safe area](safe-area.md) +* [UI best practices for mobile](ui-best-practices.md) +* [On-screen UI](../../sdk7/2d-ui/onscreen-ui.md) diff --git a/creator/build-for-mobile/develop/input-on-mobile.md b/creator/build-for-mobile/develop/input-on-mobile.md new file mode 100644 index 00000000..710b607b --- /dev/null +++ b/creator/build-for-mobile/develop/input-on-mobile.md @@ -0,0 +1,53 @@ +--- +description: How input actions map to touch on the Decentraland mobile client. +--- + +# Input on Mobile + +Decentraland's input system is designed to be device-agnostic. The same `InputAction` enum that the SDK exposes on desktop is also routed from the on-screen controls on mobile, so most scenes work without any changes. There are, however, a few rules and gotchas worth knowing when you're building for touch. + +For the full input model, see [Click events](../../sdk7/interactivity/button-events/click-events.md). This page focuses on what is mobile-specific. + +## What touch maps to + +Every `InputAction` that exists on desktop is also available on the mobile client — the on-screen controls simply route touch to the same SDK inputs. This means any scene that relies on the standard `InputAction` values will work on mobile out of the box. + +The on-screen controls map as follows: + +* **On-screen joystick** — drives `IA_FORWARD` / `IA_BACKWARD` / `IA_LEFT` / `IA_RIGHT` and avatar movement. +* **Interaction button (bottom right)** — fires `IA_POINTER` (the left mouse button on desktop) against whatever the player is aiming at. +* **E button** — fires `IA_PRIMARY` (the `E` key on desktop). +* **F button** — fires `IA_SECONDARY` (the `F` key on desktop). +* **Jump button** — fires `IA_JUMP` (the `Space` key on desktop). This is the largest button on the HUD and is always easy to reach. +* **1 / 2 / 3 / 4 buttons** — fire `IA_ACTION_3` / `IA_ACTION_4` / `IA_ACTION_5` / `IA_ACTION_6` respectively. These live behind a secondary menu (see below). +* **Camera drag** — rotates the camera; not exposed as an `InputAction`. + +## Inputs to avoid for key actions on mobile + +All `InputAction` values are reachable on mobile, but `IA_ACTION_3`–`IA_ACTION_6` (the `1`/`2`/`3`/`4` buttons) are tucked away behind a secondary menu and are **not easily reachable during gameplay**. If your scene uses them as primary actions, mobile players will not be able to trigger them comfortably. + +Avoid binding key actions to: + +* `IA_ACTION_3` — the `1` key on desktop / `1` button on mobile +* `IA_ACTION_4` — the `2` key on desktop / `2` button on mobile +* `IA_ACTION_5` — the `3` key on desktop / `3` button on mobile +* `IA_ACTION_6` — the `4` key on desktop / `4` button on mobile + +Prefer instead: + +* `IA_POINTER` for the main tap / interaction button +* `IA_PRIMARY` for the E button action +* `IA_SECONDARY` for the F button action +* `IA_JUMP` when an action maps naturally to jumping (it's the largest and most reachable button on the mobile HUD) +* Proximity-based triggers (see [Proximity Events](../../sdk7/interactivity/button-events/proximity-events.md)) when an action should fire automatically as the player approaches an entity + +## Cursor lock + +The [`PointerLock` component](../../sdk7/interactivity/button-events/click-events.md#lock-or-unlock-the-cursor) is a desktop-client concept (locked vs. unlocked mouse cursor). It does not apply to touch on mobile and is safe to leave in your scene — it has no effect there. + +## Related + +* [Click events](../../sdk7/interactivity/button-events/click-events.md) +* [Proximity Events](../../sdk7/interactivity/button-events/proximity-events.md) +* [Detect the platform from code](detect-platform.md) +* [UI best practices for mobile](ui-best-practices.md) diff --git a/creator/build-for-mobile/develop/optimize-performance.md b/creator/build-for-mobile/develop/optimize-performance.md new file mode 100644 index 00000000..fd4468a3 --- /dev/null +++ b/creator/build-for-mobile/develop/optimize-performance.md @@ -0,0 +1,42 @@ +# Optimize Performance + +Mobile devices have tighter resource constraints than desktop or web. Understanding the mobile scene limits and how to preview them helps you ship a scene that runs smoothly for the widest audience. + +## Mobile Scene Limits + +The table below shows the limits enforced when running on mobile. Reaching a **soft limit** triggers a warning in the performance panel; reaching a **hard limit** blocks the scene from loading. + +| Metric | Soft Limit | Hard Limit | +| --- | --- | --- | +| Triangles | 1,000,000 | 1,200,000 | +| Entities | 4,800 | 6,000 | +| Meshes (bodies) | 2,400 | 3,000 | +| Geometries | 1,000 | 2,000 | +| Materials | 400 | 500 | +| Textures | 400 | 500 | +| Colliders | 1,200 | 1,500 | +| Content size | 120 MB | 150 MB | +| External content | 40 MB | 50 MB | +| Memory (process RSS) | 1,638 MB | 2,048 MB | +| Draw calls | 1,000 | 2,000 | +| Performance (higher is better) | 90% | 85% | + +## Preview Mobile Performance + +You can check your scene’s mobile performance directly from **Creator Hub** without deploying to a physical device. + +1. Open your scene in **Creator Hub**. +2. Select Preview > Show QR Code for Mobile +3. Open the **Scene Limits Preview** from the top right icon in your phone (monitor with statistics in red). + +![Mobile scene limits panel in Creator Hub](../../../mobile_scene_limits.png) + +{% hint style="warning" %} +**Keep Performance above 90% on High Graphics** + +The **Performance** value is a percentage of the FPS budget set by the active graphic profile. A score of **100%** means the scene is hitting the full FPS target. + +Always test on a mid-spec device like the **Samsung Galaxy A54** and aim for a **Performance score above 90% on the High graphic profile**. This ensures a smooth experience for the majority of mobile players. See [Hardware Requirements](../mobile-client/hardware-requirements.md) for reference devices. + +You can change the graphic profile from **In-Game Menu → Settings → Graphics → set Dynamic Graphics to Off → switch Profiles**. +{% endhint %} diff --git a/creator/build-for-mobile/develop/preview-on-mobile.md b/creator/build-for-mobile/develop/preview-on-mobile.md new file mode 100644 index 00000000..815b04e5 --- /dev/null +++ b/creator/build-for-mobile/develop/preview-on-mobile.md @@ -0,0 +1,52 @@ +--- +description: Preview your scene on a real mobile device from the Creator Hub or the CLI. +--- + +# Preview Your Scene on Mobile + +You can preview your scene directly on the Decentraland mobile app from the Creator Hub or from the command line. This is the only reliable way to confirm that your UI, input handling, and performance hold up on a real device. + +## Prerequisites + +* The Decentraland mobile app installed on your phone — see the [download links](../mobile-client/overview.md#get-the-mobile-app). +* The phone and your development machine must be on the **same local network** (Wi-Fi). The preview is served from your computer; the QR code links to a LAN URL. + +## Option A — From the Creator Hub + +1. Open your scene in the Creator Hub. +2. Click the dropdown next to the **Preview** button and choose **Show QR Code for Mobile**. +3. Scan the displayed QR code with your phone's camera. The link opens the Decentraland mobile app and loads your scene preview. + +
Creator Hub preview dropdown with the Show QR Code for Mobile option

The "Show QR Code for Mobile" option in the Creator Hub preview dropdown.

+ +## Option B — From the command line + +From the root of your scene project, run: + +```bash +npm run start -- --mobile +``` + +The CLI prints a QR code in the terminal that points to your scene's LAN URL. Scan it with your phone to load the scene in the Decentraland mobile app. + +
QR code printed by the Decentraland CLI for mobile preview

A QR code printed by npm run start -- --mobile. Scan it with your phone to open the scene in the Decentraland mobile app.

+ +{% hint style="info" %} +**💡 Tip**: When you pass `--mobile`, the desktop explorer is not also launched. If you want to test on both at once, run `npm run start` in one terminal for desktop and `npm run start -- --mobile` in another for mobile. +{% endhint %} + +## Hot reload + +Just like with desktop preview, the mobile preview reloads automatically when you change scene files. You don't need to re-scan the QR code after every edit. + +## Troubleshooting + +* **QR code doesn't open the app** — make sure the Decentraland app is installed and that you've opened it at least once on the device. +* **Phone can't reach the preview server** — confirm the phone and the dev machine are on the same Wi-Fi network. Some corporate networks isolate clients; use a personal hotspot or a different network if so. +* **Scene loads on the phone but looks different from desktop** — that is expected. Use this as the moment to validate your [safe area](safe-area.md), [UI sizing](ui-best-practices.md#sizing), and [input bindings](input-on-mobile.md). + +## Related + +* [Preview Your Scene](../../sdk7/getting-started/preview-scene.md) +* [Using the CLI](../../sdk7/getting-started/using-the-cli.md) +* [Get featured on mobile Discover](../publish/get-featured.md) diff --git a/creator/build-for-mobile/develop/safe-area.md b/creator/build-for-mobile/develop/safe-area.md new file mode 100644 index 00000000..a7aa35c1 --- /dev/null +++ b/creator/build-for-mobile/develop/safe-area.md @@ -0,0 +1,123 @@ +--- +description: Where scene UI can safely live on mobile — clear of the system HUD and the device's hardware-reserved margins. +--- + +# Mobile Safe Area + +On a phone, two things eat into the screen space your UI can safely use: + +* **The Decentraland system HUD** — the app overlays its own controls (joystick, chat, profile, camera controls, the interaction button). Scene UI placed under them clashes visually and competes for taps. These regions are mapped out in [Reserved margins](#reserved-margins) below. +* **The device's hardware-reserved margins** — the notch or camera cutout, status bar, home indicator, and rounded corners. The SDK keeps UI clear of these automatically with the [`ScreenInsetArea` component](#device-hardware-insets-screeninsetarea). + +The **mobile safe area** is what's left over — where scene UI can live without clashing with either. + +{% hint style="info" %} +All values below use normalized coordinates `[0.0 – 1.0]` based on a **1600 × 720 px landscape** reference resolution. Always use normalized values so your layout adapts to any screen size. Always verify on a real device using the [preview QR code](preview-on-mobile.md). +{% endhint %} + +## Reserved margins + +The system HUD occupies the outer edges on all four sides. Do not place scene UI inside these regions: + +| Edge | Reserved for | Size | +|---|---|---| +| **Left** | Chat, joystick, emotes | 480 px — 30% of width | +| **Right** | Profile, action buttons | 400 px — 25% of width | +| **Top** | System bar | 58 px — 8% of height | +| **Bottom** | System bar | 58 px — 8% of height | + +``` +// Minimum safe insets (normalized) +margin: { left: 0.30, right: 0.25, top: 0.08, bottom: 0.08 } +``` + +
Mobile screen with the reserved regions highlighted

Reserved regions on the mobile client: left side, top-right, and bottom-right are owned by system controls.

+ +## Center safe zone + +The recommended area for all scene UI is the center band of the screen. It gives you **720 × 605 px** of usable space: + +| | Pixels | Normalized | +|---|---|---| +| **x start** | 480 px | 0.30 | +| **x end** | 1200 px | 0.75 | +| **y start** | 58 px | 0.08 | +| **y end** | 662 px | 0.92 | + +``` +// Center safe zone (normalized) +safeArea: { + x: [ 0.30, 0.75 ], // 480 – 1200 px → 45% of screen width + y: [ 0.08, 0.92 ] // 58 – 662 px → 84% of screen height +} +``` + +
Mobile screen with the safe area highlighted

The center safe zone: 720 × 605 px, from x 30%–75% and y 8%–92%.

+ +## Right-side gap (small elements only) + +Between the Profile avatar (top-right) and the action button cluster (bottom-right) there is a narrow gap where small UI elements — icons, counters, status indicators — can live. Keep elements here to a maximum of **48 × 48 px** to avoid crowding the controls. + +| | Pixels | Normalized | +|---|---|---| +| **x range** | 1200 – 1600 px | 0.75 – 1.0 | +| **y range** | 158 – 360 px | 0.22 – 0.50 | + +``` +// Right-side gap (normalized) +rightGap: { + x: [ 0.75, 1.0 ], // 1200 – 1600 px + y: [ 0.22, 0.50 ] // 158 – 360 px +} +``` + +## Where to put scene UI + +* **Center of screen** — actionable dialogs, anything the player needs to read and respond to. +* **Top-center** — non-actionable messages, status, and notifications. +* **Center-bottom (above the interaction button)** — context-sensitive hints. +* **Right-side gap** — small icons or counters only (max 48 × 48 px). + +## Why it matters + +Scene UI that overlaps the reserved regions will: + +* Be partially hidden behind the joystick, interaction button, or camera controls. +* Compete for taps with the system controls — players will accidentally trigger one or the other. +* Make your scene feel broken on mobile, which hurts featuring and retention. + +## Device hardware insets (`ScreenInsetArea`) + +The reserved margins above belong to the Decentraland **system HUD**. Separately, the **device hardware** reserves screen space for the notch or camera cutout, the status bar, the home indicator, and rounded corners. UI drawn underneath these is partly hidden or hard to tap. + +The `ScreenInsetArea` component keeps your UI clear of these hardware margins automatically, reading the current insets the device reports. Import it from `@dcl/sdk/react-ecs` and wrap the UI you want to protect: + +```tsx +import ReactEcs, { ReactEcsRenderer, UiEntity, ScreenInsetArea } from '@dcl/sdk/react-ecs' +import { Color4 } from '@dcl/sdk/math' + +export function setupUi() { + ReactEcsRenderer.setUiRenderer(() => ( + + {/* A child sized 100% × 100% fills the safe inset area exactly */} + + + )) +} +``` + +`ScreenInsetArea` positions itself absolutely using the inset values the device reports, so the `positionType` and `position` fields of its `uiTransform` are reserved — any value you set for them is ignored. All other `uiTransform` properties (`padding`, `flexDirection`, `alignItems`, …) and UI components (`uiBackground`, `onMouseDown`, …) work as usual. The component reacts automatically when the insets change, for example on rotation or when system bars appear or hide. + +{% hint style="info" %} +**📱 Mobile only:** `ScreenInsetArea` only changes anything on the **mobile client**, where the device reports real inset values. On the **desktop client** the insets are `(0, 0, 0, 0)`, so the component has no effect and your UI renders exactly as it would without it. It's safe to leave in cross-platform UI code. +{% endhint %} + +## Related + +* [UI best practices for mobile](ui-best-practices.md) +* [Detect the platform from code](detect-platform.md) — use `isMobile()` to swap layouts. +* [On-screen UI](../../sdk7/2d-ui/onscreen-ui.md) +* [UX & UI Guide](../../sdk7/design-experience/ux-ui-guide.md) diff --git a/creator/build-for-mobile/develop/ui-best-practices.md b/creator/build-for-mobile/develop/ui-best-practices.md new file mode 100644 index 00000000..56f5f177 --- /dev/null +++ b/creator/build-for-mobile/develop/ui-best-practices.md @@ -0,0 +1,45 @@ +--- +description: DOs and DON'Ts for designing scene UIs that work well on mobile. +--- + +# UI Best Practices for Mobile + +There is no single proven recipe for Decentraland mobile UI yet — the platform is new and we are still iterating. The recommendations on this page are the current best practices, distilled from work on real scenes. Treat them as a starting point and test on a real device. + +## DOs + +* **Design mobile-specific UIs**, or vary your UI by screen size and platform. Use [`isMobile()`](detect-platform.md) to branch. +* **Keep critical UI inside the [safe area](safe-area.md)**, and wrap it in [`ScreenInsetArea`](safe-area.md#device-hardware-insets-screeninsetarea) to clear the device's hardware margins (notch, status bar, home indicator). +* **Minimize options.** Show only what the player needs right now and progressively disclose the rest. +* **Place actionable dialogs at the center of the screen** — anywhere a player needs to read and respond. +* **Place non-actionable messages at the top-center** — status, notifications, and ambient information. + +## DON'Ts + +* **Don't size UI elements purely in pixels.** Pixel-only layouts will look different on every device. Use the `virtualWidth` / `virtualHeight` mechanism described in [On-screen UI](../../sdk7/2d-ui/onscreen-ui.md#screen-virtual-scale) and pair it with platform-aware sizing. +* **Don't place elements outside the safe area.** They will clash with the system controls. +* **Don't rely on small buttons.** Small targets are unreliable to tap on a touch screen. +* **Don't bind key actions to `IA_ACTION_3`–`IA_ACTION_6`** (the `1`/`2`/`3`/`4` keys on a keyboard). They are not easily reachable on mobile. See [Input on mobile](input-on-mobile.md). + +## Sizing + +The single most useful recommendation when adapting an existing desktop UI to mobile: + +> **Design and test the UI on desktop first, then scale UI sizes by 3× for mobile.** + +Combined with the SDK's `virtualWidth` / `virtualHeight` setup, this gives you readable text, comfortably tappable buttons, and a layout that holds up across devices. Always confirm the result on a real phone — see [Preview on mobile](preview-on-mobile.md). + +## Current limitations + +These limitations apply to scene UI on the current mobile client. They are tracked and expected to be lifted over time. + +* **`borderRadius` is not supported on mobile yet.** Rounded corners, set via the `borderRadius` property of `uiTransform`, will render as squared on the mobile client. Plan your visual design accordingly, or branch the styling on `isMobile()`. + +If you hit a limitation that is not listed here, please [report it](../../sdk7/debugging/report-bug.md) so we can document and prioritize it. + +## Related + +* [Mobile safe area](safe-area.md) +* [Detect the platform from code](detect-platform.md) +* [On-screen UI](../../sdk7/2d-ui/onscreen-ui.md) +* [UX & UI Guide](../../sdk7/design-experience/ux-ui-guide.md) diff --git a/creator/build-for-mobile/mobile-client/README.md b/creator/build-for-mobile/mobile-client/README.md new file mode 100644 index 00000000..1c9461d9 --- /dev/null +++ b/creator/build-for-mobile/mobile-client/README.md @@ -0,0 +1,6 @@ +# Mobile Client + +- [Overview](overview.md): Overview of the Decentraland mobile app, download links, and a quick checklist before publishing. +- [Sample Scenes](sample-scenes.md): Open-source scenes built by the Decentraland team and optimized for mobile play. +- [Missing Features](missing-features.md): Features available on the desktop client that are not yet supported in the mobile app. +- [Hardware Requirements](hardware-requirements.md): Minimum and recommended hardware specs for running Decentraland on mobile. diff --git a/creator/build-for-mobile/mobile-client/hardware-requirements.md b/creator/build-for-mobile/mobile-client/hardware-requirements.md new file mode 100644 index 00000000..f472e2f7 --- /dev/null +++ b/creator/build-for-mobile/mobile-client/hardware-requirements.md @@ -0,0 +1,28 @@ +--- +description: Minimum and recommended hardware specs for running Decentraland on mobile devices. +--- + +# Hardware Requirements + +The following specs apply to the Decentraland mobile app on Android and iOS. For desktop requirements, see [Decentraland 101](../../../player/faqs/decentraland-101.md). + +{% hint style="info" %} +Mobile hardware targets below are accurate as of April 2026 and may shift as the app evolves. +{% endhint %} + +## Android + +| | Minimum Required | Recommended Settings | +| ------ | -------------------------------- | ---------------------------- | +| OS | Android 12 | Android 13 or newer | +| Device | Samsung Galaxy A53 or equivalent | Samsung Galaxy A54 or better | +| RAM | 4 GB | 6 GB or more | + +## iOS + +| | Minimum Required | Recommended Settings | +| ------ | ------------------------ | -------------------- | +| OS | iOS 18 | iOS 18 or newer | +| Device | iPhone 13 / SE (3rd Gen) | iPhone 14 or newer | + +Get the mobile app from the [App Store (iOS)](https://apps.apple.com/app/decentraland/id6478403840?utm_source=docs&utm_medium=internal&utm_content=ios) or [Google Play (Android)](https://play.google.com/store/apps/details?id=org.decentraland.godotexplorer&pcampaignid=web_share&utm_source=docs&utm_medium=internal&utm_content=android). diff --git a/creator/build-for-mobile/mobile-client/missing-features.md b/creator/build-for-mobile/mobile-client/missing-features.md new file mode 100644 index 00000000..ae235bc9 --- /dev/null +++ b/creator/build-for-mobile/mobile-client/missing-features.md @@ -0,0 +1,54 @@ +--- +description: Features available on the Decentraland desktop client that are not yet supported in the mobile app, and known cross-platform inconsistencies. +--- + +# Missing Features + +{% hint style="info" %} +This page tracks the feature gap between the Decentraland desktop (Unity) client and the mobile app. It is sourced from the [godot-explorer feature parity tracker](https://github.com/decentraland/godot-explorer/issues/2402) and updated regularly. ETAs are estimates and subject to change. +{% endhint %} + +## SDK Features Missing on Mobile + +- [SDK Particle System Support](https://github.com/decentraland/godot-explorer/issues/1538) — arriving July–August 2026 +- [PBPrimaryPointerInfo (worldRayDirection) not being populated](https://github.com/decentraland/godot-explorer/issues/2411) — July 20th +- [Implement AssetLoad (pre-load resources) SDK component on mobile](https://github.com/decentraland/godot-explorer/issues/2496) — July 20th +- [Scene Dynamic Lights](https://github.com/decentraland/godot-explorer/issues/616) — PBPointLight protocol exists but not implemented on mobile +- [SDK7 UiBackground nine-slice tiles instead of stretching](https://github.com/decentraland/godot-explorer/issues/2060) — No ETA +- [Audio Event Component](https://github.com/decentraland/godot-explorer/issues/861) — No ETA +- [Audio Analysis Component](https://github.com/decentraland/godot-explorer/issues/1184) — No ETA +- [Access Password Protected Worlds Modal on Pre-Load](https://github.com/decentraland/godot-explorer/issues/2502) — No ETA +- Smart Items — Support not yet fully confirmed on mobile; ETA August 2026 + +## Desktop Client Features Not in Mobile + +- [Camera — See Through Walls](https://github.com/decentraland/godot-explorer/issues/1814) — August 2026 +- [Proximity Voice Chat](https://github.com/decentraland/godot-explorer/issues/888) — No ETA +- [Point-At In World](https://github.com/decentraland/godot-explorer/issues/1736) — No ETA +- [Nameplate Color Change](https://github.com/decentraland/godot-explorer/issues/1684) — No ETA +- [Communities](https://github.com/decentraland/godot-explorer/issues/656) — No ETA +- [Photo Gallery](https://github.com/decentraland/godot-explorer/issues/680) — No ETA +- [Community Streams](https://github.com/decentraland/godot-explorer/issues/676) — No ETA +- [Profile Badges](https://github.com/decentraland/godot-explorer/issues/678) — No ETA +- [Daily Quests](https://github.com/decentraland/godot-explorer/issues/682) — No ETA +- Marketplace Credits — No ETA +- [Chat Reactions](https://github.com/decentraland/godot-explorer/issues/1824) — No ETA +- [Chat Auto-Translation](https://github.com/decentraland/godot-explorer/issues/2260) — No ETA +- [Chat: Direct Messages](https://github.com/decentraland/godot-explorer/issues/1120) — No ETA +- [DCL Cast Support on mobile](https://github.com/decentraland/godot-explorer/issues/1881) — No ETA +- [Allow Minted Names Swapping in Profile](https://github.com/decentraland/godot-explorer/issues/1857) — No ETA +- [YouTube / Google Drive Video URLs unsupported](https://github.com/decentraland/godot-explorer/issues/2081) — Restricted in mobile for store compliance +- [Outfit Slots in Backpack](https://github.com/decentraland/godot-explorer/issues/1625) — No ETA + +## Cross-Platform Inconsistencies + +- [Unity client avatars not visible on mobile app](https://github.com/decentraland/godot-explorer/issues/1815) — July 2026 +- [Colliders Shape Consistency Review vs Unity](https://github.com/decentraland/godot-explorer/issues/905) — August 2026 +- [UI/TextShape elements positioned at different heights on mobile vs Unity](https://github.com/decentraland/godot-explorer/issues/2371) — August 2026 +- [Avatar teeth render dark/gray instead of white](https://github.com/decentraland/godot-explorer/issues/1994) — No ETA + +## Input/Platform Constraints + +- **Static HUD Controls defined by Mobile Client** — ability to remove/modify them arriving July/August. [See issues](https://github.com/orgs/decentraland/projects/43/views/29). +- **Touch-only input** — no mouse hover states, keyboard shortcuts, or right-click. +- **No gesture support** — not currently planned. diff --git a/creator/build-for-mobile/mobile-client/overview.md b/creator/build-for-mobile/mobile-client/overview.md new file mode 100644 index 00000000..6d07009f --- /dev/null +++ b/creator/build-for-mobile/mobile-client/overview.md @@ -0,0 +1,44 @@ +# Overview + +Decentraland is now available on mobile. Players can explore your scenes from iOS and Android devices, in addition to the desktop client and the web. As a creator, you can adapt your scenes so they look great and play well on touch-based devices. + +This section covers how to detect mobile clients from your scene code, how to preview and test your scene on a real device from the Creator Hub or the CLI, the safe-area rules for placing UI on small screens, and how to get your scene featured in the mobile Discover section. + +![Decentraland mobile app — Genesis City](../../../mobile-app-screenshot.png) + +## Get the mobile app + +* [Download for iOS (App Store)](https://apps.apple.com/app/decentraland/id6478403840?utm_source=docs&utm_medium=internal&utm_content=ios) +* [Download for Android (Google Play)](https://play.google.com/store/apps/details?id=org.decentraland.godotexplorer&pcampaignid=web_share&utm_source=docs&utm_medium=internal&utm_content=android) + +## Building for Mobile + +### Reference + +* [Sample Scenes](sample-scenes.md) — open-source scenes built by the Decentraland team and optimized for mobile play. +* [Missing Features](missing-features.md) — features available on the desktop client that are not yet supported in the mobile app. +* [Hardware Requirements](hardware-requirements.md) — minimum and recommended hardware specs for running Decentraland on mobile. + +### Develop + +* [Detect the platform from code](../develop/detect-platform.md) — use `isMobile()` to branch your scene's logic and UI per platform. +* [Preview your scene on mobile](../develop/preview-on-mobile.md) — preview directly on a phone via the Creator Hub or the CLI. +* [Mobile safe area](../develop/safe-area.md) — the screen regions reserved for system controls and the device's hardware margins (notch, home indicator); keep scene UI clear of them, with the `ScreenInsetArea` component or by hand. +* [UI best practices for mobile](../develop/ui-best-practices.md) — DOs and DON'Ts, sizing recommendations, and current limitations. +* [Input on mobile](../develop/input-on-mobile.md) — touch-friendly input mappings and which `InputAction`s to avoid. +* [Optimize Performance](../develop/optimize-performance.md) — mobile scene limits, how to preview them in Creator Hub, and performance targets. + +### Publish + +* [Get featured on mobile Discover](../publish/get-featured.md) — submission requirements for the mobile Discover section. +* [iOS curation](../publish/ios-curation.md) — how iOS content curation works and how to submit your scene or world for review. + +## Quick checklist + +Before publishing a scene that should work well on mobile, make sure that: + +* [ ] You have previewed the scene on a real device — see [Preview your scene on mobile](../develop/preview-on-mobile.md). +* [ ] All critical UI elements stay inside the [mobile safe area](../develop/safe-area.md). +* [ ] Your UI is sized large enough for touch — follow the [UI best practices](../develop/ui-best-practices.md). +* [ ] Key actions are not bound to `IA_ACTION_3`–`IA_ACTION_6` (the `1`/`2`/`3`/`4` keys), which are not easily reachable on mobile — see [Input on mobile](../develop/input-on-mobile.md). +* [ ] Your scene's [Performance](../develop/optimize-performance.md) is above 90% on the High Graphics Profile on a mid-range phone — see [Hardware Requirements](hardware-requirements.md) for reference devices. diff --git a/creator/build-for-mobile/mobile-client/sample-scenes.md b/creator/build-for-mobile/mobile-client/sample-scenes.md new file mode 100644 index 00000000..12ae0a3d --- /dev/null +++ b/creator/build-for-mobile/mobile-client/sample-scenes.md @@ -0,0 +1,49 @@ +--- +description: Open-source scenes built by the Decentraland team and optimized for mobile play. +--- + +# Sample Scenes + +The following scenes are fully open-source and designed to work well on mobile. Use them as a reference for structure, input handling, and performance patterns. + +## Dead Surge + +Multiplayer zombie shooter. + +- **World:** `/deadsurge.dcl.eth` +- **Source:** [github.com/dcl-regenesislabs/dead-surge](https://github.com/dcl-regenesislabs/dead-surge) + +## Cozy Farm + +Farming simulator. + +- **World:** `/cozyfarm.dcl.eth` +- **Source:** [github.com/dcl-regenesislabs/cozy-farm](https://github.com/dcl-regenesislabs/cozy-farm) + +## Kick Off + +World Cup prediction game. + +- **World:** `/kickoff.dcl.eth` +- **Source:** [github.com/dcl-regenesislabs/kickoff-2026](https://github.com/dcl-regenesislabs/kickoff-2026) + +## Raft Game + +Single-player survival game. + +- **World:** `/raft.dcl.eth` +- **Source:** [github.com/dcl-regenesislabs/raft-game](https://github.com/dcl-regenesislabs/raft-game) + +## Venetian Hunt + +Multiplayer prop hunt. + +- **World:** `/venetianhunt.dcl.eth` +- **Source:** [github.com/dcl-regenesislabs/venetian-hunt](https://github.com/dcl-regenesislabs/venetian-hunt) + +## Tower of Madness + +Multiplayer parkour / jump-up. + +- **World:** `/towerofmadness.dcl.eth` +- **Source:** [github.com/dcl-regenesislabs/towerofmadness](https://github.com/dcl-regenesislabs/towerofmadness) diff --git a/creator/build-for-mobile/publish/README.md b/creator/build-for-mobile/publish/README.md new file mode 100644 index 00000000..3b1f0f90 --- /dev/null +++ b/creator/build-for-mobile/publish/README.md @@ -0,0 +1,10 @@ +# Publish + +Publishing a scene for mobile follows the **same process as any other scene** — deploy via the Creator Hub or the CLI as described in the [Publishing](../../sdk7/publishing/publishing.md) guide. The pages in this section cover what’s specific to mobile on top of that standard flow. + +{% hint style="info" %} +If you haven’t published your scene yet, start with [Publishing](../../sdk7/publishing/publishing.md) under Scenes (SDK7). The steps below apply once your scene is already live. +{% endhint %} + +- [Get featured](get-featured.md): How to get your scene featured in the mobile Discover section. +- [iOS curation](ios-curation.md): How iOS content curation works and how to submit your scene or world for review. diff --git a/creator/build-for-mobile/publish/get-featured.md b/creator/build-for-mobile/publish/get-featured.md new file mode 100644 index 00000000..6d2c4a1e --- /dev/null +++ b/creator/build-for-mobile/publish/get-featured.md @@ -0,0 +1,43 @@ +--- +description: How to get your scene featured in the mobile Discover section. +--- + +# Get Featured on Mobile Discover + +The mobile Discover section is the highest-traffic surface on the Decentraland mobile app and the best way to get your scene in front of mobile players. Featured scenes are curated — there is no automatic ranking. + +
Mobile Discover featured section
+ +## How to apply + +Submit your scene through the [rl-mobile-featuring](https://discord.com/channels/417796904760639509/1471564023131537590) channel on the Decentraland Discord. + +## Requirements + +To be considered, your scene or world should: + +* **Propose an engaging or novel mechanic for mobile players** — something that feels worth opening the app for, designed with touch in mind. +* **Have UI placement that does not conflict with the mobile controls** — follow the [mobile safe area](../develop/safe-area.md). +* **Work as expected on mobile** — preview and test on a real device first; see [Preview on mobile](../develop/preview-on-mobile.md). + +## What to include in your submission + +Provide the following with your application: + +* **Scene / World title** +* **Scene / World description** +* **Gameplay description** — what the player does and why it's interesting on mobile. +* **A short gameplay video of your scene running on mobile** — this is the most important piece. Capture from a real device, ideally showing the on-screen controls in action. + +## Tips for a strong submission + +* Get the basics right first. Validate the [UI best practices](../develop/ui-best-practices.md) and [safe area](../develop/safe-area.md) before submitting — UI that clashes with controls is the most common reason a scene is held back. +* Show the mobile-specific moment. If your scene has a mechanic that is especially fun on touch (drawing, swiping, drag-to-aim, tap rhythms), make sure your video highlights it. +* Keep the video short and focused — 30–60 seconds is plenty. + +## Related + +* [Mobile safe area](../develop/safe-area.md) +* [UI best practices for mobile](../develop/ui-best-practices.md) +* [Preview on mobile](../develop/preview-on-mobile.md) +* [Make Discoverable](../../sdk7/publishing/make-discoverable.md) diff --git a/creator/build-for-mobile/publish/ios-curation.md b/creator/build-for-mobile/publish/ios-curation.md new file mode 100644 index 00000000..2df96f51 --- /dev/null +++ b/creator/build-for-mobile/publish/ios-curation.md @@ -0,0 +1,37 @@ +--- +description: How iOS content curation works and how to submit your scene or world for review. +--- + +# iOS Mobile Curation + +To comply with [Apple's App Store Review Guidelines on User Generated Content (UGC)](https://developer.apple.com/app-store/review/guidelines/#user-generated-content), Decentraland has introduced a **manual review process** for all scenes and worlds that appear in the **Discover section of the iOS app**. + +{% hint style="info" %} +This review process applies to iOS only. The Android Discover section and search continue to show all published content without restrictions. +{% endhint %} + +## How it works + +* All content must be manually reviewed before it appears in the Discover section of the iOS app. +* Scenes and Worlds that are not approved will be hidden from the iOS Discover section. +* Events tied to non-approved Scenes or Worlds will also be hidden in the iOS Discover section. +* **All scenes remain accessible** on iOS at any time via deep linking or the `/goto` and `/world` chat commands — curation only affects Discover visibility. + +## Submit your scene or world for iOS review + +To request that your scene or world be reviewed for inclusion in the iOS Discover section, submit a **Content Review Request** in the Decentraland Discord server: + +1. Join the [Decentraland Discord](https://dcl.gg/discord). +2. Navigate to the **#rl-mobile-curation** channel. +3. Post your request including: + * Scene or World name + * Coordinates or World name (e.g. `0,0` or `MyWorld.dcl.eth`) + * A brief description of the content + +Submissions are reviewed within **24 hours**. You will be notified in the channel once your content has been approved or if any follow-up is needed. + +## Related + +* [Get featured](get-featured.md) +* [UI best practices for mobile](../develop/ui-best-practices.md) +* [Preview on mobile](../develop/preview-on-mobile.md) diff --git a/creator/sdk7/2d-ui/onscreen-ui.md b/creator/sdk7/2d-ui/onscreen-ui.md index a3e5ec33..dfa6b3c8 100644 --- a/creator/sdk7/2d-ui/onscreen-ui.md +++ b/creator/sdk7/2d-ui/onscreen-ui.md @@ -23,7 +23,7 @@ The default Decentraland explorer UI includes a chat widget, a map, and other el See [UX guidelines](../design-experience/ux-ui-guide.md) for tips on how to design the look and feel of your UI. {% hint style="info" %} -**📱 Designing for mobile**: The [mobile client](../building-for-mobile/) reserves the left side, the top-right, and the bottom-right of the screen for system controls (joystick, chat, profile, camera, interaction button). Scene UI in those regions will clash with the controls. Before publishing, review the [Mobile safe area](../building-for-mobile/safe-area.md) and the [UI best practices for mobile](../building-for-mobile/ui-best-practices.md). A useful starting point is to design your UI on desktop and then **scale sizes by 3×** for mobile readability. +**📱 Designing for mobile**: The [mobile client](../building-for-mobile/) reserves the left side, the top-right, and the bottom-right of the screen for system controls (joystick, chat, profile, camera, interaction button). Scene UI in those regions will clash with the controls. Before publishing, review the [Mobile safe area](../building-for-mobile/safe-area.md) and the [UI best practices for mobile](../building-for-mobile/ui-best-practices.md). {% endhint %} {% hint style="info" %} diff --git a/creator/sdk7/building-for-mobile/README.md b/creator/sdk7/building-for-mobile/README.md index 4eefeb83..344238a3 100644 --- a/creator/sdk7/building-for-mobile/README.md +++ b/creator/sdk7/building-for-mobile/README.md @@ -8,15 +8,13 @@ Decentraland is now available on mobile. Players can explore your scenes from iO This section covers how to detect mobile clients from your scene code, how to preview and test your scene on a real device from the Creator Hub or the CLI, the safe-area rules for placing UI on small screens, and how to get your scene featured in the mobile Discover section. +![Decentraland mobile app — Genesis City](../../../.gitbook/assets/mobile-app-screenshot.png) + ## Get the mobile app * [Download for iOS (App Store)](https://apps.apple.com/app/decentraland/id6478403840?utm_source=docs&utm_medium=internal&utm_content=ios) * [Download for Android (Google Play)](https://play.google.com/store/apps/details?id=org.decentraland.godotexplorer&pcampaignid=web_share&utm_source=docs&utm_medium=internal&utm_content=android) -{% hint style="info" %} -**For beta testers:** the iOS build is also available via [TestFlight](https://testflight.apple.com/join/KF4r3jlU?utm_source=docs&utm_medium=internal&utm_content=ios) for power users who want to try unreleased changes. -{% endhint %} - ## In this section * [Detect the platform from code](detect-platform.md) — use `@dcl/sdk/platform` to branch logic for mobile, desktop, or web. diff --git a/creator/sdk7/building-for-mobile/develop/README.md b/creator/sdk7/building-for-mobile/develop/README.md new file mode 100644 index 00000000..b3b70205 --- /dev/null +++ b/creator/sdk7/building-for-mobile/develop/README.md @@ -0,0 +1,8 @@ +# Develop + +- [Detect the platform](../detect-platform.md): Detect whether your scene is running on mobile, desktop, or web. +- [Preview on mobile](../preview-on-mobile.md): Preview your scene on a real mobile device from the Creator Hub or the CLI. +- [Mobile safe area](../safe-area.md): Where scene UI can safely live on mobile — clear of the system HUD and the device's hardware-reserved margins. +- [UI best practices](../ui-best-practices.md): DOs and DON'Ts for designing scene UIs that work well on mobile. +- [Input on mobile](../input-on-mobile.md): How input actions map to touch on the Decentraland mobile client. +- [Performance](../optimize-performance.md): Mobile scene limits, how to preview them in Creator Hub, and how to hit performance targets. diff --git a/creator/sdk7/building-for-mobile/get-featured.md b/creator/sdk7/building-for-mobile/get-featured.md index 01031c16..861bc4aa 100644 --- a/creator/sdk7/building-for-mobile/get-featured.md +++ b/creator/sdk7/building-for-mobile/get-featured.md @@ -6,6 +6,8 @@ description: How to get your scene featured in the mobile Discover section. The mobile Discover section is the highest-traffic surface on the Decentraland mobile app and the best way to get your scene in front of mobile players. Featured scenes are curated — there is no automatic ranking. +![Mobile Discover featured section](../../../mobile-featured.png) + ## How to apply Submit your scene through the [rl-mobile-featuring](https://discord.com/channels/417796904760639509/1471564023131537590) channel on the Decentraland Discord. diff --git a/creator/sdk7/building-for-mobile/hardware-requirements.md b/creator/sdk7/building-for-mobile/hardware-requirements.md new file mode 100644 index 00000000..f472e2f7 --- /dev/null +++ b/creator/sdk7/building-for-mobile/hardware-requirements.md @@ -0,0 +1,28 @@ +--- +description: Minimum and recommended hardware specs for running Decentraland on mobile devices. +--- + +# Hardware Requirements + +The following specs apply to the Decentraland mobile app on Android and iOS. For desktop requirements, see [Decentraland 101](../../../player/faqs/decentraland-101.md). + +{% hint style="info" %} +Mobile hardware targets below are accurate as of April 2026 and may shift as the app evolves. +{% endhint %} + +## Android + +| | Minimum Required | Recommended Settings | +| ------ | -------------------------------- | ---------------------------- | +| OS | Android 12 | Android 13 or newer | +| Device | Samsung Galaxy A53 or equivalent | Samsung Galaxy A54 or better | +| RAM | 4 GB | 6 GB or more | + +## iOS + +| | Minimum Required | Recommended Settings | +| ------ | ------------------------ | -------------------- | +| OS | iOS 18 | iOS 18 or newer | +| Device | iPhone 13 / SE (3rd Gen) | iPhone 14 or newer | + +Get the mobile app from the [App Store (iOS)](https://apps.apple.com/app/decentraland/id6478403840?utm_source=docs&utm_medium=internal&utm_content=ios) or [Google Play (Android)](https://play.google.com/store/apps/details?id=org.decentraland.godotexplorer&pcampaignid=web_share&utm_source=docs&utm_medium=internal&utm_content=android). diff --git a/creator/sdk7/building-for-mobile/missing-features.md b/creator/sdk7/building-for-mobile/missing-features.md new file mode 100644 index 00000000..cf42f679 --- /dev/null +++ b/creator/sdk7/building-for-mobile/missing-features.md @@ -0,0 +1,54 @@ +--- +description: Features available on the Decentraland desktop client that are not yet supported in the mobile app, and known cross-platform inconsistencies. +--- + +# Missing Features + +{% hint style="info" %} +This page tracks the feature gap between the Decentraland desktop (Unity) client and the mobile app. It is sourced from the [godot-explorer feature parity tracker](https://github.com/decentraland/godot-explorer/issues/2402) and updated regularly. ETAs are estimates and subject to change. +{% endhint %} + +## SDK Features Missing on Mobile + +- [SDK Particle System Support](https://github.com/decentraland/godot-explorer/issues/1538) — arriving July–August 2026 +- [PBPrimaryPointerInfo (worldRayDirection) not being populated](https://github.com/decentraland/godot-explorer/issues/2411) — July 20th +- [Implement AssetLoad (pre-load resources) SDK component on mobile](https://github.com/decentraland/godot-explorer/issues/2496) — July 20th +- [Scene Dynamic Lights](https://github.com/decentraland/godot-explorer/issues/616) — PBPointLight protocol exists but not implemented on mobile +- [SDK7 UiBackground nine-slice tiles instead of stretching](https://github.com/decentraland/godot-explorer/issues/2060) — No ETA +- [Audio Event Component](https://github.com/decentraland/godot-explorer/issues/861) — No ETA +- [Audio Analysis Component](https://github.com/decentraland/godot-explorer/issues/1184) — No ETA +- [Access Password Protected Worlds Modal on Pre-Load](https://github.com/decentraland/godot-explorer/issues/2502) — No ETA +- **Smart Items** — Not officially supported on mobile + +## Desktop Client Features Not in Mobile + +- [Camera — See Through Walls](https://github.com/decentraland/godot-explorer/issues/1814) — August 2026 +- [Proximity Voice Chat](https://github.com/decentraland/godot-explorer/issues/888) — No ETA +- [Point-At In World](https://github.com/decentraland/godot-explorer/issues/1736) — No ETA +- [Nameplate Color Change](https://github.com/decentraland/godot-explorer/issues/1684) — No ETA +- [Communities](https://github.com/decentraland/godot-explorer/issues/656) — No ETA +- [Photo Gallery](https://github.com/decentraland/godot-explorer/issues/680) — No ETA +- [Community Streams](https://github.com/decentraland/godot-explorer/issues/676) — No ETA +- [Profile Badges](https://github.com/decentraland/godot-explorer/issues/678) — No ETA +- [Daily Quests](https://github.com/decentraland/godot-explorer/issues/682) — No ETA +- **Marketplace Credits** — No ETA +- [Chat Reactions](https://github.com/decentraland/godot-explorer/issues/1824) — No ETA +- [Chat Auto-Translation](https://github.com/decentraland/godot-explorer/issues/2260) — No ETA +- [Chat: Direct Messages](https://github.com/decentraland/godot-explorer/issues/1120) — No ETA +- [DCL Cast Support on mobile](https://github.com/decentraland/godot-explorer/issues/1881) — No ETA +- [Allow Minted Names Swapping in Profile](https://github.com/decentraland/godot-explorer/issues/1857) — No ETA +- [YouTube / Google Drive Video URLs unsupported](https://github.com/decentraland/godot-explorer/issues/2081) — Restricted in mobile for store compliance +- [Outfit Slots in Backpack](https://github.com/decentraland/godot-explorer/issues/1625) — No ETA + +## Cross-Platform Inconsistencies + +- [Unity client avatars not visible on mobile app](https://github.com/decentraland/godot-explorer/issues/1815) — July 2026 +- [Colliders Shape Consistency Review vs Unity](https://github.com/decentraland/godot-explorer/issues/905) — August 2026 +- [UI/TextShape elements positioned at different heights on mobile vs Unity](https://github.com/decentraland/godot-explorer/issues/2371) — August 2026 +- [Avatar teeth render dark/gray instead of white](https://github.com/decentraland/godot-explorer/issues/1994) — No ETA + +## Input/Platform Constraints + +- **Static HUD Controls defined by Mobile Client** — ability to remove/modify them arriving July/August. [See issues](https://github.com/orgs/decentraland/projects/43/views/29). +- **Touch-only input** — no mouse hover states, keyboard shortcuts, or right-click. +- **No gesture support** — not currently planned. diff --git a/creator/sdk7/building-for-mobile/mobile-client/README.md b/creator/sdk7/building-for-mobile/mobile-client/README.md new file mode 100644 index 00000000..41857d9c --- /dev/null +++ b/creator/sdk7/building-for-mobile/mobile-client/README.md @@ -0,0 +1,6 @@ +# Mobile Client + +- [Overview](overview.md): Overview of the Decentraland mobile app, download links, and a quick checklist before publishing. +- [Sample Scenes](../sample-scenes.md): Open-source scenes built by the Decentraland team and optimized for mobile play. +- [Missing Features](../missing-features.md): Features available on the desktop client that are not yet supported in the mobile app. +- [Hardware Requirements](../hardware-requirements.md): Minimum and recommended hardware specs for running Decentraland on mobile. diff --git a/creator/sdk7/building-for-mobile/mobile-client/overview.md b/creator/sdk7/building-for-mobile/mobile-client/overview.md new file mode 100644 index 00000000..d50e735a --- /dev/null +++ b/creator/sdk7/building-for-mobile/mobile-client/overview.md @@ -0,0 +1,44 @@ +# Overview + +Decentraland is now available on mobile. Players can explore your scenes from iOS and Android devices, in addition to the desktop client and the web. As a creator, you can adapt your scenes so they look great and play well on touch-based devices. + +This section covers how to detect mobile clients from your scene code, how to preview and test your scene on a real device from the Creator Hub or the CLI, the safe-area rules for placing UI on small screens, and how to get your scene featured in the mobile Discover section. + +![Decentraland mobile app — Genesis City](../../../../mobile-app-screenshot.png) + +## Get the mobile app + +* [Download for iOS (App Store)](https://apps.apple.com/app/decentraland/id6478403840?utm_source=docs&utm_medium=internal&utm_content=ios) +* [Download for Android (Google Play)](https://play.google.com/store/apps/details?id=org.decentraland.godotexplorer&pcampaignid=web_share&utm_source=docs&utm_medium=internal&utm_content=android) + +## Building for Mobile + +### Reference + +* [Sample Scenes](../sample-scenes.md) — open-source scenes built by the Decentraland team and optimized for mobile play. +* [Missing Features](../missing-features.md) — features available on the desktop client that are not yet supported in the mobile app. +* [Hardware Requirements](../hardware-requirements.md) — minimum and recommended hardware specs for running Decentraland on mobile. + +### Develop + +* [Detect the platform from code](../detect-platform.md) — use `@dcl/sdk/platform` to branch logic for mobile, desktop, or web. +* [Preview your scene on mobile](../preview-on-mobile.md) — preview directly on a phone via the Creator Hub or the CLI. +* [Mobile safe area](../safe-area.md) — the screen regions reserved for system controls and the device's hardware margins (notch, home indicator); keep scene UI clear of them, with the `ScreenInsetArea` component or by hand. +* [UI best practices for mobile](../ui-best-practices.md) — DOs and DON'Ts, sizing recommendations, and current limitations. +* [Input on mobile](../input-on-mobile.md) — touch-friendly input mappings and which `InputAction`s to avoid. +* [Optimize Performance](../optimize-performance.md) — mobile scene limits, how to preview them in Creator Hub, and performance targets. + +### Publish + +* [Get featured on mobile Discover](../get-featured.md) — submission requirements for the mobile Discover section. +* [iOS curation](../ios-curation.md) — how iOS content curation works and how to submit your scene or world for review. + +## Quick checklist + +Before publishing a scene that should work well on mobile, make sure that: + +* [ ] You have previewed the scene on a real device — see [Preview your scene on mobile](../preview-on-mobile.md). +* [ ] All critical UI elements stay inside the [mobile safe area](../safe-area.md). +* [ ] Your UI is sized large enough for touch — follow the [UI best practices](../ui-best-practices.md). +* [ ] Key actions are not bound to `IA_ACTION_3`–`IA_ACTION_6` (the `1`/`2`/`3`/`4` keys), which are not easily reachable on mobile — see [Input on mobile](../input-on-mobile.md). +* [ ] Your scene's [Performance](../optimize-performance.md) score is above 80% across all graphic profiles on a mid-range phone — see [Hardware Requirements](../hardware-requirements.md) for reference devices. diff --git a/creator/sdk7/building-for-mobile/optimize-performance.md b/creator/sdk7/building-for-mobile/optimize-performance.md new file mode 100644 index 00000000..e33f32d5 --- /dev/null +++ b/creator/sdk7/building-for-mobile/optimize-performance.md @@ -0,0 +1,56 @@ +# Optimize Performance + +Mobile devices have tighter resource constraints than desktop or web. Understanding the mobile scene limits and how to preview them helps you ship a scene that runs smoothly for the widest audience. + +## Mobile Scene Limits + +The table below shows the limits enforced when running on mobile. Reaching a **soft limit** triggers a warning in the performance panel; reaching a **hard limit** blocks the scene from loading. + +| Metric | Soft Limit | Hard Limit | +| --- | --- | --- | +| Triangles | 1,000,000 | 1,200,000 | +| Entities | 4,800 | 6,000 | +| Meshes (bodies) | 2,400 | 3,000 | +| Geometries | 1,000 | 2,000 | +| Materials | 400 | 500 | +| Textures | 400 | 500 | +| Colliders | 1,200 | 1,500 | +| Content size | 120 MB | 150 MB | +| External content | 40 MB | 50 MB | +| Memory (process RSS) | 1,638 MB | 2,048 MB | +| Draw calls | 1,000 | 2,000 | +| Performance (higher is better) | 50% | 30% | + +## Preview Mobile Performance + +You can check your scene's mobile performance directly from **Creator Hub** without deploying to a physical device. + +1. Open your scene in **Creator Hub**. +2. Select Preview > Show QR Code for Mobile +3. Open the **Scene Limits Preview** from the top right icon in your phone (monitor with statistics in red). + +![Mobile scene limits panel in Creator Hub](../../../mobile_scene_limits.png) + +{% hint style="info" %} +**What does the Performance metric mean?** + +The **Performance** value is a percentage of the FPS budget set by the active graphic profile. A score of **100%** means the scene is hitting the full FPS target; a score of **50%** means it is running at half the allowed frame rate. +{% endhint %} + +{% hint style="warning" %} +**Keep Performance above 80% across all Graphic Profiles** + +Always test your scene on all Graphic Profiles and aim for a **Performance score above 80%** on a mid-spec Android device such as the **Samsung Galaxy A54**. This ensures a smooth experience for the majority of mobile players. + +See [Hardware Requirements](hardware-requirements.md) for the full list of reference devices and their specifications. +{% endhint %} + +{% hint style="info" %} +**Switching Graphic Profiles** + +Players can change the graphic profile from inside the app: + +**Menu → Settings → Graphics → set Dynamic Graphics to Off → switch Profiles** + +Test your scene with each profile — Low, Medium, and High — and confirm the Performance score stays above 80% in all three before publishing. +{% endhint %} diff --git a/creator/sdk7/building-for-mobile/publish/README.md b/creator/sdk7/building-for-mobile/publish/README.md new file mode 100644 index 00000000..84793a4e --- /dev/null +++ b/creator/sdk7/building-for-mobile/publish/README.md @@ -0,0 +1,4 @@ +# Publish + +- [Get featured](../get-featured.md): How to get your scene featured in the mobile Discover section. +- [iOS curation](../ios-curation.md): How iOS content curation works and how to submit your scene or world for review. diff --git a/creator/sdk7/building-for-mobile/sample-scenes.md b/creator/sdk7/building-for-mobile/sample-scenes.md new file mode 100644 index 00000000..12ae0a3d --- /dev/null +++ b/creator/sdk7/building-for-mobile/sample-scenes.md @@ -0,0 +1,49 @@ +--- +description: Open-source scenes built by the Decentraland team and optimized for mobile play. +--- + +# Sample Scenes + +The following scenes are fully open-source and designed to work well on mobile. Use them as a reference for structure, input handling, and performance patterns. + +## Dead Surge + +Multiplayer zombie shooter. + +- **World:** `/deadsurge.dcl.eth` +- **Source:** [github.com/dcl-regenesislabs/dead-surge](https://github.com/dcl-regenesislabs/dead-surge) + +## Cozy Farm + +Farming simulator. + +- **World:** `/cozyfarm.dcl.eth` +- **Source:** [github.com/dcl-regenesislabs/cozy-farm](https://github.com/dcl-regenesislabs/cozy-farm) + +## Kick Off + +World Cup prediction game. + +- **World:** `/kickoff.dcl.eth` +- **Source:** [github.com/dcl-regenesislabs/kickoff-2026](https://github.com/dcl-regenesislabs/kickoff-2026) + +## Raft Game + +Single-player survival game. + +- **World:** `/raft.dcl.eth` +- **Source:** [github.com/dcl-regenesislabs/raft-game](https://github.com/dcl-regenesislabs/raft-game) + +## Venetian Hunt + +Multiplayer prop hunt. + +- **World:** `/venetianhunt.dcl.eth` +- **Source:** [github.com/dcl-regenesislabs/venetian-hunt](https://github.com/dcl-regenesislabs/venetian-hunt) + +## Tower of Madness + +Multiplayer parkour / jump-up. + +- **World:** `/towerofmadness.dcl.eth` +- **Source:** [github.com/dcl-regenesislabs/towerofmadness](https://github.com/dcl-regenesislabs/towerofmadness) diff --git a/mobile-app-screenshot.png b/mobile-app-screenshot.png new file mode 100644 index 00000000..1254140f Binary files /dev/null and b/mobile-app-screenshot.png differ diff --git a/mobile-featured.png b/mobile-featured.png new file mode 100644 index 00000000..719c7b33 Binary files /dev/null and b/mobile-featured.png differ diff --git a/mobile_scene_limits.png b/mobile_scene_limits.png new file mode 100644 index 00000000..65a2ca6f Binary files /dev/null and b/mobile_scene_limits.png differ diff --git a/player/mobile-app/README.md b/player/mobile-app/README.md index 7501d478..747b68e6 100644 --- a/player/mobile-app/README.md +++ b/player/mobile-app/README.md @@ -6,6 +6,8 @@ description: Decentraland on iOS and Android. Decentraland is now available on mobile. You can hang out, attend events, explore Genesis City, and visit Worlds from your phone — wherever you are. +![Decentraland mobile app — Genesis City](../../mobile-app-screenshot.png) + ## Get the app * [Download for iOS (App Store)](https://apps.apple.com/app/decentraland/id6478403840?utm_source=docs&utm_medium=internal&utm_content=ios) @@ -15,10 +17,6 @@ Decentraland is now available on mobile. You can hang out, attend events, explor **UK users:** the iOS and Android apps are not currently available in the United Kingdom due to [Crypto Gaming Regulations](https://www.fca.org.uk/firms/cryptoassets-information). {% endhint %} -{% hint style="info" %} -**Beta testing:** the iOS build is also available via [TestFlight](https://testflight.apple.com/join/KF4r3jlU?utm_source=docs&utm_medium=internal&utm_content=ios) for users who want early access to new changes. -{% endhint %} - ## In this section * [Getting started](getting-started.md) — first-time setup, sign-in, and finding your first place to hang out.