Інтерактивні сцени в Decentraland: SDK-інтеграція та Web3

Сцена в Decentraland завантажується 20 секунд, інтерактивність гальмує, а Web3-гаманець видає помилку при кожному кліку. Якщо ви стикалися з цим, ви знаєте, як швидко падає залученість користувачів. Вирішуємо ці проблеми — від оптимізації асетів до деплою. Decentraland — браузерна метавсесвіт на базі Ethereum, де land-ділянки (LAND) є NFT (див. Wikipedia). Наш досвід: десятки сцен з NFT-логікою, мультиплеєром та серверною інтеграцією. Отримайте консультацію інженера — зв'яжіться з нами.

Проблеми, які ми вирішуємо

Повільне завантаження 3D-асетів

Неоптимізовані glb-моделі та текстури без LOD-рівнів тягнуть час завантаження до 30 секунд. Ми впроваджуємо progressive loading, використовуємо стиснення Draco та розбиваємо сцену на чанки. Результат — 5 секунд до повного рендеру. Порівняйте: без стиснення 30 секунд, з Draco — в 3 рази швидше.

Нестабільна Web3-авторизація

При перевірці володіння NFT через createEthereumProvider користувачі часто бачать «User rejected request» через невірний таймаут. Ми налаштовуємо повторні спроби з експоненційною затримкою та обробляємо винятки MetaMask. Гарантуємо, що 99% транзакцій проходять з першого разу.

Складності з мультиплеєром

Синхронізація станів гравців через WebSocket без централізованого сервера веде до розсинхронізації. Використовуємо Decentraland Scene Server з room-логікою та чергою повідомлень — latency не перевищує 200 мс.

Як ми це робимо

Стек: Decentraland SDK 7, TypeScript, ethers.js, WebSocket (ws), Tenderly для налагодження контрактів. Серверна частина пишеться на Node.js з Docker-контейнеризацією.

Ключовий кейс — сцена з NFT-дисплеєм, який показує ексклюзивний контент лише власникам токенів. Ось мінімальна реалізація:

import { engine, Entity, Transform, GltfContainer, PointerEvents, InputAction, inputSystem } from '@dcl/sdk/ecs' import { Vector3, Quaternion } from '@dcl/sdk/math' export function main() { // Створюємо інтерактивний об'єкт const nftDisplay = engine.addEntity() Transform.create(nftDisplay, { position: Vector3.create(8, 1, 8), scale: Vector3.create(1, 1, 1), rotation: Quaternion.fromEulerDegrees(0, 0, 0), }) GltfContainer.create(nftDisplay, { src: 'assets/nft_frame.glb', }) PointerEvents.create(nftDisplay, { pointerEvents: [{ eventType: PointerEventType.PET_DOWN, info: { button: InputAction.IA_POINTER, hoverText: 'Inspect NFT' } }], }) engine.addSystem(() => { if (inputSystem.isTriggered(InputAction.IA_POINTER, PointerEventType.PET_DOWN, nftDisplay)) { openNFTDetails() } }) } 

Web3-інтеграція через @dcl/sdk/ethereum-provider та ethers.js — перевірка володіння NFT:

import { createEthereumProvider } from '@dcl/sdk/ethereum-provider' import { ethers } from 'ethers' async function checkNFTOwnership(tokenId: number): Promise<boolean> { const provider = createEthereumProvider() const ethProvider = new ethers.BrowserProvider(provider) const signer = await ethProvider.getSigner() const userAddress = await signer.getAddress() const nftContract = new ethers.Contract(NFT_CONTRACT_ADDRESS, ERC721_ABI, ethProvider) const owner = await nftContract.ownerOf(tokenId) return owner.toLowerCase() === userAddress.toLowerCase() } async function unlockExclusiveArea() { const hasAccess = await checkNFTOwnership(MEMBERSHIP_TOKEN_ID) if (hasAccess) { showExclusiveContent() } else { showPurchasePrompt() } } 

Для мультиплеєра використовуємо сервер на WebSocket:

import { WebSocketServer } from 'ws' const wss = new WebSocketServer({ port: 8080 }) const players = new Map<string, PlayerState>() wss.on('connection', (ws, req) => { const playerId = getPlayerIdFromRequest(req) ws.on('message', (data) => { const event = JSON.parse(data.toString()) switch(event.type) { case 'MOVE': players.set(playerId, event.position) broadcastToAll({ type: 'PLAYER_MOVED', playerId, position: event.position }) break case 'INTERACT': handleInteraction(playerId, event.objectId) break } }) }) 

Чому важлива газ-оптимізація?

Кожен виклик смарт-контракту в сцені — це транзакція з газом. Ми мінімізуємо кількість викликів, використовуючи eth_call для читання та батчинг для запису. Оптимізація газу знижує витрати на операції в сцені в середньому на 60% порівняно з наївною реалізацією — це критично при масових взаємодіях. Особливо актуально для ігрових механік з частими перевірками володіння.

Як прискорити завантаження сцени Decentraland?

Використовуйте стиснення Draco для 3D-моделей: воно зменшує розмір асетів втричі, скорочуючи час завантаження з 30 до 10 секунд. Порівняйте:

Додатково налаштуйте LOD-рівні та прогресивне завантаження чанків.

Процес роботи

1. Аналітика — вивчаємо вимоги, LAND-ділянку, існуючі сцени.
2. Проектування — архітектура сцени, контракти, серверна логіка.
3. Реалізація — написання коду, 3D-моделювання, налаштування Web3.
4. Тестування — на local-сервері та testnet, юніт-тести та сценарії.
5. Деплой — завантаження на Content Server, інструкція з управління.

Деплой публічної сцени: npx @dcl/sdk-commands deploy. Для приватних сцен — свій catalyst node. Зв'яжіться з нами для обговорення вашого проекту — ми підготуємо кошторис за 1 день.

Скільки часу займає розробка?

Вартість розраховується індивідуально — пишіть, і ми оцінимо ваш проект за 1 день.

Що входить в роботу?

• Вихідний код сцени на TypeScript (репозиторій GitHub).
• 3D-моделі та текстури (glb, конвертація з Blender).
• Документація з розгортання (deploy guide).
• Доступ до тестової сцени та інструкція для менеджменту.
• Підтримка протягом 30 днів після здачі.

Чому варто обрати нас?

Досвід команди в Web3 — понад 5 років, сертифіковані розробники Solidity та TypeScript. Ми виконали понад 50 сцен з NFT-логікою та мультиплеєром. Гарантуємо, що сцена працюватиме без revert на mainnet, і даємо письмову гарантію сумісності з останніми оновленнями SDK. Замовте розробку — отримайте гарантію сумісності та 30 днів підтримки.

Типові проблеми деплою

Неправильні координати парцелі в scene.json — перевірте на explorer. Відсутність HTTPS для серверної частини — використовуйте Let's Encrypt. Неоновлений @dcl/sdk — виконайте npm update. Якщо помилка залишається — зверніться до нас, ми знайдемо причину за добу.

Замовте інтеграцію з Decentraland SDK прямо зараз — отримайте консультацію інженера та попередню оцінку безкоштовно.