Skip to content
dill pixel

Platform Utilities

Overview

Platform utilities provide a set of functions for detecting device capabilities, screen properties, and platform-specific features. These utilities are essential for creating responsive and platform-optimized games.

Display Detection

Retina Display

Detect high-DPI (Retina) displays:

import { isRetina } from 'dill-pixel';


if (isRetina) {
  // Load high-resolution textures
  // Adjust rendering resolution
}

Input Detection

Touch Support

Check if the device supports touch input:

import { isTouch } from 'dill-pixel';


if (isTouch) {
  // Enable touch controls
  // Adjust UI for touch interaction
}

Device Detection

Mobile Devices

Check if the user is on a mobile device:

import { isMobile } from 'dill-pixel';


if (isMobile) {
  // Optimize for mobile performance
  // Adjust UI layout for smaller screens
}

Specific Platforms

Detect specific mobile platforms:

import { isAndroid, isIos } from 'dill-pixel';


if (isAndroid) {
  // Android-specific optimizations
}


if (isIos) {
  // iOS-specific optimizations
}

Common Use Cases

Responsive Game Design

import { isMobile, isRetina } from 'dill-pixel';


function configureGameResolution() {
  const config = {
    resolution: 1,
    textureQuality: 'medium',
    particleCount: 1000,
  };


  if (isMobile) {
    // Reduce quality for mobile
    config.textureQuality = 'low';
    config.particleCount = 500;
  }


  if (isRetina) {
    // Increase resolution for retina displays
    config.resolution = 2;
  }


  return config;
}

Input Management

import { isTouch, isMobile } from 'dill-pixel';


function setupControls() {
  if (isTouch) {
    // Setup touch controls
    return {
      type: 'touch',
      joystickEnabled: true,
      buttonSize: isMobile ? 'large' : 'medium',
    };
  }


  // Setup keyboard/mouse controls
  return {
    type: 'keyboard',
    keyboardMap: defaultKeyboardMap,
    mouseEnabled: true,
  };
}

Platform-Specific Features

import { isAndroid, isIos } from 'dill-pixel';


function setupPlatformFeatures() {
  const features = {
    hapticFeedback: false,
    shareEnabled: true,
    adProvider: 'default',
  };


  if (isIos) {
    features.hapticFeedback = true;
    features.adProvider = 'ios';
  }


  if (isAndroid) {
    features.hapticFeedback = true;
    features.adProvider = 'android';
  }


  return features;
}

Best Practices

  1. Use platform detection for initial setup rather than continuous checks
  2. Cache detection results rather than checking repeatedly
  3. Combine multiple checks for comprehensive device profiling
  4. Consider progressive enhancement based on device capabilities
  5. Test on various devices and platforms to ensure proper detection

Performance Considerations

When using platform detection:

  1. Cache detection results at startup:
const deviceProfile = {
  isMobile: isMobile,
  isTouch: isTouch,
  isRetina: isRetina,
  isAndroid: isAndroid,
  isIos: isIos,
};
  1. Use the cached values throughout your game:
function updateGameSettings() {
  if (deviceProfile.isMobile) {
    // Mobile optimizations
  }
  if (deviceProfile.isRetina) {
    // Retina optimizations
  }
}