बड़ी स्क्रीन के लिए डिज़ाइन करना

इस गाइड में, आपको अपने गेम को अलग-अलग Android डिवाइसों के हिसाब से अडजस्ट करने का तरीका बताया गया है.

शुरू करने से पहले, बड़ी स्क्रीन पर साइज़ बदलने की सुविधा लेख पढ़ें. Android पर उपलब्ध मॉडर्न गेम, सभी स्क्रीन साइज़ के हिसाब से अडजस्ट होने चाहिए. इसके लिए, उन्हें सिस्टम के साथ काम करने वाली लेयर पर निर्भर नहीं रहना चाहिए. इस तरह, आपके पास हमेशा यह कंट्रोल होता है कि आपका गेम कैसा दिखे. साथ ही, आपका गेम खिलाड़ियों को बेहतरीन अनुभव देता है. भले ही, वे एक्सआर जैसे डिवाइसों या ऐसे डिवाइसों का इस्तेमाल कर रहे हों जिनकी स्क्रीन को घुमाया नहीं जा सकता.

इसके लिए, ये काम करें:

1. सिस्टम की लेटरबॉक्सिंग की सुविधा बंद करें और इंजन में मौजूद लेटरबॉक्सिंग की सुविधा लागू करें.
2. लेटरबॉक्स वाले हिस्से को इस्तेमाल करने लायक और थीम के हिसाब से सही बनाएं.
3. गेम को 21:9 से 1:1 और 9:21 तक स्केल करने के लिए, डिज़ाइन से जुड़ी ज़रूरी बातों का ध्यान रखें.

जांच के लिए निर्देश

गेम बनाते और उसकी टेस्टिंग करते समय, पुष्टि करें कि आपका गेम किसी भी लेटरबॉक्स को खुद रेंडर करता है. आपको अपने गेम को पोर्ट्रेट और लैंडस्केप ओरिएंटेशन में भी दिखाना चाहिए. ऐसा इसलिए, क्योंकि टीवी और कार में मौजूद डिसप्ले जैसे डिवाइस, अपने डिफ़ॉल्ट लैंडस्केप या पोर्ट्रेट ओरिएंटेशन से नहीं घूम सकते.

यह देखने के लिए कि आपका गेम इंजन, सिस्टम लेटरबॉक्सिंग का इस्तेमाल कर रहा है या नहीं, adb shell cmd window set-letterbox-style निर्देश का इस्तेमाल करें. उदाहरण के लिए, यहां दिए गए कमांड से सिस्टम के लेटरबॉक्स चमकीले हरे रंग के हो जाते हैं. साथ ही, आपके गेम में कॉर्नर रेडियस जुड़ जाता है. इससे यह साफ़ तौर पर पता चलता है कि आपका गेम, ऑपरेटिंग सिस्टम के साथ काम करने वाले मोड पर वापस चला गया है या नहीं:

adb shell "cmd window set-letterbox-style --backgroundType solid_color --backgroundColor '#00FF00' --cornerRadius 30 --isEducationEnabled false"

टेस्टिंग के लिए, ओरिएंटेशन को ज़बरदस्ती लागू करने के लिए, adb shell cmd window user-rotation lock का इस्तेमाल करें. इससे आपको यह सिम्युलेट करने में मदद मिलती है कि आपका गेम किसी ऐसे डिवाइस पर कैसा काम करता है जो ओरिएंटेशन के लिए, ऐप्लिकेशन के ओवरराइड का पालन नहीं करता. इसके अलावा, इससे यह समझने में मदद मिलती है कि उपयोगकर्ताओं को एक्सआर या पीसी जैसे डिवाइस पर क्या दिखता है. इन डिवाइसों पर, विंडो डिवाइस के ओरिएंटेशन से अलग, पोर्ट्रेट या लैंडस्केप मोड में दिख सकती हैं.

सबसे पहले, अपने डिवाइस को ऐसी स्थिति में रखें जहां ऐप्लिकेशन के ओरिएंटेशन को बदला जा सके:

adb shell cmd window set-ignore-orientation-request true
adb shell cmd window fixed-to-user-rotation enabled

इसके बाद, अपने गेम को लैंडस्केप मोड में बदलने की जांच करें:

adb shell cmd window user-rotation lock 1

इसके बाद, अपने गेम को पोर्ट्रेट मोड में बदलकर देखें:

adb shell cmd window user-rotation lock 0

अपने डिवाइस को रीबूट करके या यहां दिए गए निर्देश चलाकर, ओईएम कॉन्फ़िगरेशन पर रीसेट करें:

adb shell cmd window reset-letterbox-style
adb shell cmd window fixed-to-user-rotation default
adb shell cmd window user-rotation free
adb shell cmd window set-ignore-orientation-request reset

सिस्टम लेटरबॉक्सिंग की सुविधा को बंद क्यों करना चाहिए?

सिस्टम हमेशा लेटरबॉक्सिंग की सुविधा को कंट्रोल करता है. स्क्रीन के साइज़ का पता लगाकर और डिसप्ले एरिया को खुद मैनेज करके, इनपुट ड्रॉप होने जैसी समस्याओं को कम किया जा सकता है. ये समस्याएं तब होती हैं, जब इनपुट आपके गेम एरिया से बाहर चले जाते हैं. गेमप्ले से जुड़े एलिमेंट को स्क्रीन के किनारे तक भी बढ़ाया जा सकता है. भले ही, आपके गेम का कॉन्टेंट स्क्रीन के बीच में ही रहे. सिस्टम के साथ काम करने वाले मोड, गेम को उपलब्ध करा सकते हैं. हालांकि, गेम डेवलपर के तौर पर यह आपकी ज़िम्मेदारी है कि आप अपने गेम को खिलाड़ियों के लिए बेहतर बनाएं.

लेटरबॉक्स को लागू करने का सैंपल

ज़्यादातर गेम इंजन आपको यह कंट्रोल देते हैं कि स्क्रीन पर कैमरा कहां रेंडर हो. लेटरबॉक्सिंग की सुविधा को खुद लागू करने के लिए, रेंडर किए गए एरिया के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को मेज़र करें. साथ ही, इस्तेमाल न किए गए एरिया के लिए, क्लिपिंग रेक्टैंगल को अडजस्ट करें. ऐसा करने पर, सिस्टम आपके गेम को लेटरबॉक्स नहीं करेगा. यहां दिए गए सैंपल में, एक कैमरे को सीमित आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में रेंडर करने के लिए सीमित किया गया है. साथ ही, यूज़र इंटरफ़ेस (यूआई) कैमरों या पास को पूरे लॉजिकल स्क्रीन साइज़ तक बड़ा करने की अनुमति दी गई है:

[SerializeField]
private float minAspectRatio = 4f / 3f;

[SerializeField]
private float maxAspectRatio = 21f / 9f;

private Camera _camera;

private void Awake()
{
    _camera = GetComponent<Camera>();
}

public void MaintainAspectRatio()
{
    int viewWidth = Screen.width;
    int viewHeight = Screen.height;

    // 1. Calculate screen aspect ratio
    float scaleScreen = viewWidth / (float)viewHeight;
    Rect rect = _camera.pixelRect;

    // 2. Scale to the fullest of the lower between width or height
    if (scaleScreen > maxAspectRatio)
    {
        // use height, lock width to max at aspect scale
        rect.width = viewHeight * maxAspectRatio;
        rect.height = viewHeight;
    }
    else if (scaleScreen < minAspectRatio)
    {
        // use width, lock height to min at aspect scale
        rect.width = viewWidth;
        rect.height = viewWidth / minAspectRatio;
    }
    else
    {
        // within allowed aspect ratio range, use full screen
        rect.width = viewWidth;
        rect.height = viewHeight;
    }

    rect.x = Mathf.Floor((viewWidth - rect.width) * 0.5f);
    rect.y = Mathf.Floor((viewHeight - rect.height) * 0.5f);

    Debug.Log("camera view width = " + rect.width +
        " height = " + rect.height +
        " x = " + rect.x +
        " y = " + rect.y);

    // 3. Commit the new size to the camera so that it takes effect
    _camera.pixelRect = rect;
}

/**
 * @brief Calculates a bounded-aspect-ratio gameplay viewport and scissor
 * rectangle and records them directly into a Vulkan command buffer.
 *
 * @note Requires `VK_DYNAMIC_STATE_VIEWPORT` and `VK_DYNAMIC_STATE_SCISSOR` to
 * be enabled on the bound graphics `VkPipeline`.
 *
 * @param command_buffer   Active `VkCommandBuffer` in the recording state.
 * @param window_width     Full physical window or swapchain width in pixels.
 * @param window_height    Full physical window or swapchain height in pixels.
 * @param min_aspect_ratio Minimum allowed aspect ratio (`width / height`).
 * @param max_aspect_ratio Maximum allowed aspect ratio (`width / height`).
 */
void MaintainAspectRatio(VkCommandBuffer command_buffer, uint32_t window_width,
                         uint32_t window_height, float min_aspect_ratio,
                         float max_aspect_ratio) {
  if (command_buffer == VK_NULL_HANDLE || window_width == 0 ||
      window_height == 0 || min_aspect_ratio <= 0.0f ||
      max_aspect_ratio < min_aspect_ratio) {
    return;
  }

  // 1. Calculate screen aspect ratio.
  const float view_width = static_cast<float>(window_width);
  const float view_height = static_cast<float>(window_height);
  const float scale_screen = view_width / view_height;

  // 2. Scale to the fullest of the lower between width or height.
  float rect_width = view_width;
  float rect_height = view_height;
  if (scale_screen > max_aspect_ratio) {
    // Use height, lock width to max at aspect scale (pillarbox).
    rect_width = std::floor(view_height * max_aspect_ratio);
    rect_height = view_height;
  } else if (scale_screen < min_aspect_ratio) {
    // Use width, lock height to min at aspect scale (letterbox).
    rect_width = view_width;
    rect_height = std::floor(view_width / min_aspect_ratio);
  } else {
    // Within allowed aspect ratio range, use full screen.
    rect_width = view_width;
    rect_height = view_height;
  }

  const float rect_x = std::floor((view_width - rect_width) * 0.5f);
  const float rect_y = std::floor((view_height - rect_height) * 0.5f);

  // 3. Commit the new viewport and scissor to the command buffer so that
  // subsequent gameplay draw calls are transformed and clipped to this region.
  const VkViewport viewport = {
      .x = rect_x,
      .y = rect_y,
      .width = rect_width,
      .height = rect_height,
      .minDepth = 0.0f,
      .maxDepth = 1.0f,
  };
  const VkRect2D scissor = {
      .offset =
          {
              .x = static_cast<int32_t>(rect_x),
              .y = static_cast<int32_t>(rect_y),
          },
      .extent =
          {
              .width = static_cast<uint32_t>(rect_width),
              .height = static_cast<uint32_t>(rect_height),
          },
  };

  vkCmdSetViewport(command_buffer, 0, 1, &viewport);
  vkCmdSetScissor(command_buffer, 0, 1, &scissor);
}

Unity में सिलसिलेवार तरीके से जानकारी पाने के लिए, बड़ी स्क्रीन और फ़ोल्ड किए जा सकने वाले डिवाइसों के लिए, Unity गेम को ऑप्टिमाइज़ करना कोडलैब देखें.

बड़ी और छोटी स्क्रीन के साइज़ को मैनेज करना

फ़ोन और फ़ोल्ड किए जा सकने वाले डिवाइसों के बाहरी डिसप्ले जैसी छोटी स्क्रीन पर, पोर्ट्रेट या लैंडस्केप मोड में लॉक किया गया गेम, उपयोगकर्ता को सबसे अच्छा अनुभव दे सकता है. टैबलेट, Chromebook, कार में मौजूद डिसप्ले या फ़ोल्ड किए जा सकने वाले डिवाइसों के अंदरूनी डिसप्ले जैसी बड़ी स्क्रीन पर, डिवाइस को घुमाना मुश्किल या नामुमकिन हो जाता है. हालांकि, बड़े फ़िज़िकल डिसप्ले की वजह से, गेम को ऑफ़-ऐक्सिस आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में खेला जा सकता है.

खिलाड़ियों को बेहतरीन अनुभव देने के लिए, रनटाइम के दौरान स्क्रीन का साइज़ पता करें. साथ ही, ज़रूरत पड़ने पर स्क्रीन के रोटेशन को सीमित करें. हालांकि, स्क्रीन का साइज़ बढ़ने पर, खिलाड़ियों को ज़्यादा सुविधाएं दें. Android, आइडियल कटऑफ़ को sw600dp मानता है. यह 600 डेंसिटी-इंडिपेंडेंट पिक्सल (600dp) की सबसे छोटी चौड़ाई है. यह WindowSizeClass.WIDTH_DP_MEDIUM_LOWER_BOUND से मेल खाता है. मल्टी-डिसप्ले कॉन्फ़िगरेशन में उपलब्ध स्क्रीन साइज़ की पुष्टि करने के लिए, computeMaximumWindowMetrics का इस्तेमाल करें.

अपने गेम में इस सुविधा को चालू करने के लिए, मेनिफ़ेस्ट में सभी ओरिएंटेशन के लिए सहायता चालू करें. इसके बाद, onCreate() और onConfigurationChanged(), दोनों में सबसे कम चौड़ाई का आकलन करें और ओरिएंटेशन लॉक को सही तरीके से सेट करें:

1. अपने मेनिफ़ेस्ट में स्टैटिक ओरिएंटेशन लॉक हटाएं और कॉन्फ़िगरेशन में बदलाव को मैनेज करने का एलान करें:

   <activity
       android:name=".MainActivity"
       android:resizeableActivity="true"
       android:configChanges="orientation|screenSize|smallestScreenSize|screenLayout|density|keyboard|keyboardHidden" />
   

2. ज़रूरी इंपोर्ट जोड़ें:

   import android.content.pm.ActivityInfo
   import android.content.res.Configuration
   import android.os.Bundle
   import androidx.activity.enableEdgeToEdge
   import androidx.window.core.layout.WindowSizeClass
   import androidx.window.layout.WindowMetricsCalculator
   import kotlin.math.min
   

3. onCreate और onConfigurationChanged, दोनों को मैनेज करें:

   override fun onCreate(savedInstanceState: Bundle?) {
       enableEdgeToEdge()
       super.onCreate(savedInstanceState)
       applyAdaptiveOrientationPolicy()
       // ...
   }
   
   override fun onConfigurationChanged(newConfig: Configuration) {
       super.onConfigurationChanged(newConfig)
       applyAdaptiveOrientationPolicy()
       // ...
   }
   

4. स्क्रीन की सबसे कम चौड़ाई के आधार पर, अनुरोध किए गए ओरिएंटेशन को अपडेट करें. साथ ही, छोटी स्क्रीन को अपने गेम के पसंदीदा डिज़ाइन ओरिएंटेशन पर लॉक करें:

   private fun applyAdaptiveOrientationPolicy() {
       // compute the smallest screen bound in dp
       val maxMetrics = WindowMetricsCalculator.getOrCreate().computeMaximumWindowMetrics(this)
       val minDimensionPx = min(maxMetrics.bounds.width(), maxMetrics.bounds.height())
       val displaySmallestWidthDp = minDimensionPx / maxMetrics.density
   
       val targetOrientation = if (displaySmallestWidthDp >= WindowSizeClass.WIDTH_DP_MEDIUM_LOWER_BOUND) {
           // Large display (>= 600dp): allow free rotation in any orientation
           ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED
       } else {
           // Compact display (< 600dp): lock to your game's preferred orientation
           // (use SCREEN_ORIENTATION_SENSOR_LANDSCAPE for landscape-first games)
           ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
       }
   
       // Guard against redundant setter calls to avoid configuration change loops
       if (requestedOrientation != targetOrientation) {
           requestedOrientation = targetOrientation
       }
   }
   

सामान्य समस्याओं को ध्यान में रखकर डिज़ाइन करना

अलग-अलग आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) और ओरिएंटेशन के साथ गेम उपलब्ध कराने से, खिलाड़ियों को बेहतरीन अनुभव मिलता है. फ़ोन के उलट, बड़ी स्क्रीन वाले डिवाइसों का ओरिएंटेशन अक्सर लैंडस्केप या पोर्ट्रेट मोड में सेट होता है. कुछ मामलों में, स्क्रीन का ओरिएंटेशन स्क्वेयर होता है. इन बड़ी स्क्रीन वाले डिवाइसों पर, खिलाड़ी अक्सर आपका गेम खेलते समय मल्टीटास्किंग करते हैं. स्क्रीन स्पेस का ज़्यादा से ज़्यादा इस्तेमाल करके, ज़्यादा खिलाड़ियों को ज़्यादा बार और लंबे समय तक गेम खेलने के लिए जोड़ा जा सकता है.

यहां दिए गए सेक्शन में ऐसे समाधान दिए गए हैं जिनसे आपके गेम को अलग-अलग डिवाइस के साइज़, डाइमेंशन या कॉन्फ़िगरेशन पर खेलने का अनुभव, फ़ोन पर खेलने के अनुभव से बेहतर हो जाता है.

आसपेक्ट-अवेयर कैमरे

3D गेम में, अगर स्क्रीन बहुत लंबी है, तो खिलाड़ियों को ऐसा लग सकता है कि वे गेम को एक संकरी स्लिट से देख रहे हैं. अगर स्क्रीन बहुत चौड़ी है, तो हो सकता है कि खिलाड़ी डिज़ाइन किए गए इंटरैक्शन को न देख पाएं. 2D गेम की तरह, "सुरक्षित जगह" को हमेशा देखा जा सकता है. यहां दिया गया कोड, कैमरे को हॉरिज़ॉन्टल फ़ील्ड ऑफ़ व्यू (कैमरे से दिख रहा व्यू) और वर्टिकल फ़ील्ड ऑफ़ व्यू के बीच स्विच करता है. यह स्विच, ऐक्टिव आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) और 1920x1080 के रेफ़रंस आसपेक्ट रेशियो के बीच की तुलना के आधार पर होता है. इस तरह, डिज़ाइनर 1080 पिक्सल डिसप्ले के लिए गेम बना सकता है. साथ ही, यह जान सकता है कि उस रेफ़रंस फ़्रेम में डिज़ाइन किया गया हर एलिमेंट दिखता रहे:

[SerializeField]
private Camera _camera;

[SerializeField]
private float _referenceWidth = 1920f;

[SerializeField]
private float _referenceHeight = 1080f;

[SerializeField]
private float _referenceVerticalFov = 60f;

public float ReferenceAspectRatio => _referenceWidth / Mathf.Max(0.0001f, _referenceHeight);

private void Awake()
{
    if (_camera == null)
    {
        _camera = GetComponent<Camera>();
    }
}

// Built-in Render Pipeline callback. In URP, subscribe to
// RenderPipelineManager.beginCameraRendering or call UpdateFov() on resize.
private void OnPreCull()
{
    UpdateFov();
}

public void UpdateFov()
{
    if (_camera == null || _camera.orthographic)
    {
        return;
    }

    float referenceAspect = ReferenceAspectRatio;
    float currentAspect = _camera.aspect;
    if (currentAspect <= 0.0001f)
    {
        return;
    }

    float targetVerticalFov;

    if (currentAspect >= referenceAspect)
    {
        // Viewport is wider than (or equal to) the reference safe area
        targetVerticalFov = _referenceVerticalFov;
    }
    else
    {
        // Viewport is skinnier than the reference safe area
        float referenceHorizontalFov = Camera.VerticalToHorizontalFieldOfView(_referenceVerticalFov, referenceAspect);
        targetVerticalFov = Camera.HorizontalToVerticalFieldOfView(referenceHorizontalFov, currentAspect);
        targetVerticalFov = Mathf.Clamp(targetVerticalFov, 1f, 179f);
    }

    if (!Mathf.Approximately(_camera.fieldOfView, targetVerticalFov))
    {
        _camera.fieldOfView = targetVerticalFov;
    }
}

/**
 * @brief Calculates an aspect-aware Vulkan perspective projection matrix using
 * GLM that keeps a reference safe area (e.g., 1920x1080) visible across
 * aspect ratios.
 *
 * @note Uses `glm::perspectiveZO` for Vulkan's `[0, 1]` depth range and
 * inverts `projection[1][1]` for Vulkan's top-left (`+Y` down) clip space.
 *
 * @param viewport_width         Active gameplay viewport width in pixels.
 * @param viewport_height        Active gameplay viewport height in pixels.
 * @param reference_width        Authored safe-area reference width in pixels.
 * @param reference_height       Authored safe-area reference height in pixels.
 * @param reference_vertical_fov Authored vertical FOV in degrees (e.g., 60.0f).
 * @param near_plane             Near clipping plane distance (`zNear > 0.0f`).
 * @param far_plane              Far clipping plane distance (`zFar > zNear`).
 * @return Aspect-aware `glm::mat4` perspective projection matrix for Vulkan.
 */
glm::mat4 CalculateAspectAwareProjectionMatrix(
    float viewport_width, float viewport_height, float reference_width = 1920.0f,
    float reference_height = 1080.0f, float reference_vertical_fov = 60.0f,
    float near_plane = 0.1f, float far_plane = 100.0f) {
  if (viewport_width <= 0.0001f || viewport_height <= 0.0001f) {
    return glm::mat4(1.0f);
  }

  // 1. Compare the active viewport aspect ratio against the reference safe
  // area.
  const float reference_aspect =
      reference_width / std::max(0.0001f, reference_height);
  const float current_aspect = viewport_width / viewport_height;

  float target_vertical_fov_rad = glm::radians(reference_vertical_fov);

  if (current_aspect >= reference_aspect) {
    // Viewport is wider than (or equal to) the reference safe area (Hor+).
    target_vertical_fov_rad = glm::radians(reference_vertical_fov);
  } else {
    // Viewport is skinnier than the reference safe area (Vert+):
    // Convert reference vertical FOV -> reference horizontal FOV -> new
    // vertical FOV at current_aspect so the safe area is never cropped.
    const float tan_half_horiz =
        std::tan(target_vertical_fov_rad * 0.5f) * reference_aspect;
    target_vertical_fov_rad = 2.0f * std::atan(tan_half_horiz / current_aspect);
    target_vertical_fov_rad = std::clamp(
        target_vertical_fov_rad, glm::radians(1.0f), glm::radians(179.0f));
  }

  // 2. Build the Vulkan [0, 1] depth perspective matrix and flip +Y clip space.
  glm::mat4 projection = glm::perspectiveZO(
      target_vertical_fov_rad, current_aspect, near_plane, far_plane);
  projection[1][1] *= -1.0f;
  return projection;
}

पूरी तरह से इंटरैक्टिव लेटरबॉक्स

कुछ गेम में, डिज़ाइन के हिसाब से खेलने के लिए तय जगह होती है. यह जगह अक्सर शैली के हिसाब से डिज़ाइन की जाती है. जैसे, वर्टिकल शूट-'एम-अप के लिए तय फ़ील्ड या रेट्रो एस्थेटिक के लिए इस्तेमाल की जाने वाली फ़्लिप-स्क्रीन स्क्रोलिंग.

इन गेम के लिए, गेमप्ले एरिया को इस तरह से स्केल करें कि गेम का एक ऐक्सिस हमेशा गेमप्ले एरिया को भरने के लिए बड़ा हो. आपके गेम के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) और डिसप्ले की सीमाओं के हिसाब से, यह तय होता है कि किस ऐक्सिस को बड़ा किया जाएगा.

HUD और यूज़र इंटरफ़ेस (यूआई) के एलिमेंट को स्क्रीन के सुरक्षित किनारे पर ऐंकर करें: कटआउट से बचें. हालांकि, वर्चुअल कंट्रोल, हेल्थ बार, और मिनीमैप जैसे इंटरैक्टिव एलिमेंट को गेमप्ले एरिया से जितना हो सके उतना दूर रखें. इस तरह, गेम का इंटरैक्टिव हिस्सा पूरी स्क्रीन का इस्तेमाल करता है. साथ ही, टैबलेट और फ़ोल्ड किए जा सकने वाले डिवाइसों जैसे फ़ॉर्म फ़ैक्टर पर गेम खेलने वाले लोग, उंगलियों को ज़्यादा खींचे बिना आराम से आपका गेम खेल सकते हैं.

आखिर में, लेटरबॉक्स एरिया को सही थीम या डाइजेटिक बनाएं. ऐसे बॉर्डर इस्तेमाल करें जो ऑन-स्क्रीन पैलेट या टाइल सेट से मैच करते हों. बोर्ड या रेट्रो गेम के लिए, वर्चुअल टेबल या स्क्रीन का इस्तेमाल करें. इसके अलावा, बड़े किए गए मिनीमैप और सजावटी विज़ुअल का इस्तेमाल करें.

यहां दिए गए उदाहरण में, गेम ज़्यादातर आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के लिए फ़ुल साइज़ में रेंडर होता है. जब आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) 4:3 से कम होता है, तो यह थीम के हिसाब से रंगीन स्काईबॉक्स रेंडर करता है. साथ ही, स्क्रीन के किनारे पर कंट्रोल जैसे यूज़र इंटरफ़ेस (यूआई) एलिमेंट को दिखाता है:

फ़ॉग ऑफ़ वॉर

गेम डेवलपर को चिंता है कि खिलाड़ी, बहुत ज़्यादा वर्टिकल या हॉरिज़ॉन्टल आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) का इस्तेमाल करके, गलत तरीके से फ़ायदा उठा सकते हैं. उदाहरण के लिए, कई खिलाड़ियों वाले ऑनलाइन बैटल अरीना (एमओबीए) जैसे प्रतिस्पर्धी गेम में, कोई खिलाड़ी वर्टिकल स्क्रीन का इस्तेमाल कर सकता है, ताकि वह विरोधी खिलाड़ी की लेन को गहराई से देख सके.

टॉप-डाउन स्ट्रेटजी और सिम्युलेशन गेम के लिए, फ़ॉग ऑफ़ वॉर रेंडर करें:

• जब तक खिलाड़ी ज्यामिति को देख न सके, तब तक उसे रेंडर न करें.
• ज्यामिति को इस तरह रेंडर करें कि प्लेयर का किरदार, बिना किसी डाइनैमिक एलिमेंट के, धुंधली चीज़ों को न देख पाए.
• सिर्फ़ विरोधियों, इकट्ठा किए जा सकने वाले आइटम, और अन्य डाइनैमिक ऑब्जेक्ट को रेंडर करें. ये ऐसे ऑब्जेक्ट होते हैं जिन्हें प्लेयर का किरदार, गेम की दुनिया में सक्रिय रूप से देख सकता है.

अगर इस तकनीक को पूरी तरह से इंटरैक्टिव लेटरबॉक्स के साथ इस्तेमाल किया जाए और यूज़र इंटरफ़ेस (यूआई) को स्क्रीन के किनारे तक रेंडर किया जाए, तो खिलाड़ी को एक बेहतरीन और शानदार अनुभव मिलता है. इसके लिए, आपको लेवल स्ट्रक्चर या टीम बैलेंस को फिर से डिज़ाइन करने की ज़रूरत नहीं पड़ती.

इस गेम को बड़ी स्क्रीन पर फ़ुल स्क्रीन मोड में खेलने पर, मैप के वे हिस्से भी दिखते हैं जो खिलाड़ी को नहीं दिखने चाहिए. ऐसा इसलिए होता है, क्योंकि बड़ी स्क्रीन पर फ़ॉग ऑफ़ वॉर की सुविधा काम नहीं करती:

फ़ॉग ऑफ़ वॉर को रेंडर करके और दुश्मनों और आइटम जैसे डाइनैमिक एलिमेंट को छिपाकर, गेम में निष्पक्षता बनाए रखी जा सकती है. साथ ही, गेम के लिए उपलब्ध पूरे फ़्रेम का इस्तेमाल किया जा सकता है:

ज्यामिति को फ़ेड आउट करना

कई गेम, खास तौर पर टर्न-बेस्ड रणनीति वाले गेम, पिछले सेक्शन में बताए गए फ़ॉग ऑफ़ वॉर जैसी तकनीक का इस्तेमाल करते हैं. साथ ही, वे ऐसी ज्यामिति को रेंडर नहीं करते हैं जिसे खिलाड़ी ने नहीं खोजा है या जिसके साथ खिलाड़ी किसी खास सेटपीस के दौरान इंटरैक्ट नहीं कर सकता.

अगर फ़ील्ड ऑफ़ व्यू (कैमरे से दिख रहा व्यू) को बड़ा करने से, आपके सेट या सिनेमैटिक के वे हिस्से दिखते हैं जो खिलाड़ी को नहीं दिखने चाहिए, तो सीन के कुछ हिस्सों को साफ़ तौर पर मास्क करने से, लेटरबॉक्स जैसा ही असर पड़ता है. हालांकि, इसमें कोई तय बॉर्डर नहीं दिखता.

यहां दिए गए उदाहरण में, गेम को बड़े आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में बड़ा करने पर, महल की दीवारों के बाहर ज़ॉम्बी का झुंड दिखता है:

इसके बजाय, मौजूदा प्ले एरिया की सीमाओं से बाहर, लेवल की ज्यामिति को रेंडर करने से बचा जा सकता है:

ज़्यादा आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) वाले डिवाइसों पर, गेम के मौजूदा प्ले एरिया से बाहर लेवल ज्योमेट्री रेंडर नहीं होती.

डाइजेक्टिक बाउंड्री

इमर्सिव 3D गेम में, फ़ील्ड ऑफ़ व्यू (कैमरे से दिख रहा व्यू) को बड़ा करने से, फ़र्स्ट-पर्सन या थर्ड-पर्सन मल्टीप्लेयर गेम में प्रतिस्पर्धी फ़ायदा मिल सकता है. इसके अलावा, फ़िक्स्ड सेट-आधारित गेम के उन हिस्सों को भी देखा जा सकता है जिन्हें देखने की अनुमति नहीं है. ऐसे में, फ़ील्ड ऑफ़ व्यू को सीमित करने के लिए, गेम में डाइजेटिक एलिमेंट बनाने पर विचार करें. इसके लिए, रेक्टैंगल लेटरबॉक्स पर भरोसा न करें. उदाहरण के लिए:

• कार या हवाई जहाज़ जैसे किसी वाहन का कॉकपिट
• हेलमेट का अंदरूनी हिस्सा
• विनेट, जो खिलाड़ी की दृष्टि के किनारे को दिखाता है

यूज़र इंटरफ़ेस (यूआई) और HUD एलिमेंट, स्क्रीन के किनारे तक दिखने चाहिए या उन्हें डाइएजेटिक बाउंड्री में शामिल किया जाना चाहिए. साथ ही, उन्हें डाइनैमिक बनाना सबसे सही रहता है. ये डाइजेटिक एलिमेंट, उन खिलाड़ियों की भी मदद कर सकते हैं जिन्हें मोशन सिकनेस की समस्या होती है. खास तौर पर, एक्सआर वाले डिवाइस के साइज़, डाइमेंशन या कॉन्फ़िगरेशन पर. इससे उन्हें ऐक्सेस करने में मदद मिलती है. साथ ही, नए आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) की जटिलता को कम करने में भी मदद मिलती है.

गेम को किसी नॉन-इंटरैक्टिव स्टैटिक सीन के अंदर रेंडर करने से बचें. हालांकि, यह तरीका लेटरबॉक्स और पिलरबॉक्स के लिए ब्लैक बार रेंडर करने से बेहतर है. फिर भी, खिलाड़ियों को स्टैटिक बॉर्डर तुरंत दिख जाते हैं. साथ ही, अगर उनके पसंदीदा गेम, फ़ोन के अलावा अन्य डिवाइसों पर फ़ोन के साइज़ के पैच में रेंडर होते हैं, तो उन्हें निराशा हो सकती है.

इस उदाहरण में, स्टैंडर्ड फ़ोन स्क्रीन के लिए डिज़ाइन किया गया गेम, सिम्युलेट किए गए टेलीविज़न में रेंडर किया गया है. इसमें एक स्क्यूमॉर्फ़िक गेमपैड है, ताकि फ़ोल्ड किए जा सकने वाले डिवाइसों के इनर डिसप्ले पर आम तौर पर इस्तेमाल होने वाले स्क्वेयर आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को अडजस्ट किया जा सके:

कुछ 3D गेम में, फ़ील्ड ऑफ़ व्यू (कैमरे से दिख रहा व्यू) को सीमित करना पड़ सकता है. ऐसा, गेम को डिज़ाइन करने के दौरान या सभी खिलाड़ियों को बराबर मौका देने के लिए किया जा सकता है. फ़ील्ड ऑफ़ व्यू को सीमित करने के लिए, कॉकपिट, हेलमेट या अन्य डाइजेटिक मेटाफ़र का इस्तेमाल करना, ब्लैक बार के इस्तेमाल से बेहतर है:

अन्य संसाधन

• Unity गेम को हर साइज़, डाइमेंशन या कॉन्फ़िगरेशन वाले डिवाइस के लिए बेहतर बनाना
• अपने गेम को हर साइज़, डाइमेंशन या कॉन्फ़िगरेशन वाले डिवाइस के साथ काम करने लायक बनाना
• सभी डिवाइसों के साइज़, डाइमेंशन या कॉन्फ़िगरेशन पर नैचुरल इनपुट की सुविधा चालू करना
• Vulkan प्री-रोटेशन की मदद से, डिवाइस ओरिएंटेशन को मैनेज करना