top of page

Mobile Notch

The Mobile Notch plugin is designed to detect mobile device notches and retrieves the offset size it covers.


The Mobile Notch plugin detects and measures notches and cutouts in your mobile device. It adaptively retrieves the offset size of the notch where it covers the application based on the device orientation and application size, in pixels.


The Mobile Notch plugin retrieves notch measurements either through the Web API (browser) or native Android or iOS SDKs (native).


Note: This plugin is different from the official Platform Info object in Construct 3 which only measures using the Web API. The Mobile Notch plugin has an option to measure notch values through the platform's native API which avoids the Webview bug that prevents notch detection.

PlayFab API v2.png

Introduction

Step 1.png

The Construct Master Collection supports the full and easy integration of native mobile Android SDKs and iOS SDKs for both Construct 3 and Construct 2.


Please click here to learn more about Mobile.

Features


The Mobile Notch plugin is designed to detect mobile device notches and retrieves the offset size it covers.


The Mobile Notch plugin detects and measures notches and cutouts in your mobile device. It adaptively retrieves the offset size of the notch where it covers the application based on the device orientation and application size, in pixels.


The Mobile Notch plugin retrieves notch measurements either through the Web API (browser) or native Android or iOS SDKs (native).


Note: This plugin is different from the official Platform Info object in Construct 3 which only measures using the Web API. The Mobile Notch plugin has an option to measure notch values through the platform's native API which avoids the Webview bug that prevents notch detection.


Here are some of the native features of the mobile plugin:

  • Android notch detection

  • iOS notch detection

  • Web API

  • Native API

  • Measure notch size in pixels

  • Safe area inset, in pixels.

    • Top

    • Bottom

    • Left

    • Right


  • Auto-adjust on screen orientation change.

  • Auto-adjust on application resize.

  • Display measurements

  • Screen measurements

  • Info update event listeners

  • Debugger

    • Chrome

    • Safari

    • Android Studio

    • Xcode


For more information about native mobile or Android and iOS features, please click here to learn the introductory lessons to Mobile.


Platform Integration


Here are some of the platforms that are natively supported:

  • Android

  • iOS

  • Native Android

  • Native iOS

  • Web Android

  • Web iOS


Build Support


Here are some of the supported build options:


Editor Features


Here are some of the features in the Construct editor:

  • Construct 3

Introduction
Features

How to use?

It is easy to use the Mobile Notch plugin, you will only need to follow the steps below.

1. The first step is to add the Mobile Notch object into the project.


2. Check the debug mode property to log errors in the console. This is used for mobile debugging.



3. The Mobile Notch object has two (2) detection sources.

  • Browser - uses the Web API to detect, measure and retrieve notch values. For example, using the Webview.

  • Native - uses the native platform's SDK to detect, measure and retrieve notch values. For example, using the Android SDK and iOS SDK.

Instructions
Documentation

Documentation

There is currently nothing to show, we will add more in the future.

ACEs

Actions, Conditions & Expressions

Actions


Conditions

The following condition groups:

  • General

General

  • Compare detection source - Check how the notches are detected.


  • Compare platform - Check the current platform.

    • Platform - If running on a native mobile device, either "Android" or "iOS". Otherwise, if on any other platform, including browsers, then "other platform".


  • On info update - Trigger fires when display and notch information have been updated.

Expressions

The following expression groups:

  • General

  • Display

General

  • GetInsetTop - Returns the top inset, in pixels, of safe rectangular area on non-rectangular screens.

  • GetInsetBottom - Returns the bottom inset, in pixels, of safe rectangular area on non-rectangular screens.

  • GetInsetLeft - Returns the left inset, in pixels, of safe rectangular area on non-rectangular screens.

  • GetInsetRight - Returns the right inset, in pixels, of safe rectangular area on non-rectangular screens.


Display

  • GetWindowOuterWidth - The width of the entire window area in pixels.

  • GetWindowOuterHeight - The height of the entire window area in pixels.

  • GetScreenWidth - The width of the screen in pixels.

  • GetScreenHeight - The height of the screen in pixels.

Object   Properties

Plugin Properties

The following property groups:

  • Configuration

  • System

Configuration - The configuration section for the mobile notch plugin.

  • Debug - Check to log errors on the console.


System - The configuration section for the plugin implementations.

  • Source - If source is set to 'browser', notch values will be retrieved from the Web API. If source is set to 'native', notch values will be retrieved from the native platform SDK.

    • Browser

    • Native

Properties
Showcase

Showcase

The Mobile Notch plugin detects mobile device notches and retrieves the offset size it covers, in web mobile, native Android and native iOS.



Measured in Samsung Galaxy S22 Ultra



A sample event sheet that implements most features.

Game Projects

Game Projects 

Instructions Kit

Specifications

  • Instructions - The game project contains instructions and steps on how to use the addon and its features.

  • Action, Conditions and Expressions - It covers the implementation of each action, condition and expression.

  • Tips and Tricks - It provides some tips and tricks on the recommended ways of using the addon.

Supporters

Only

bottom of page