How to remove black bars/borders on different screen ratios in Cocos Creator 3.x?

Cocos Creator
1

Hi everyone,

I am developing a vertical 2D game (Design Resolution: 720x1280) using Cocos Creator v3.8.x. I am struggling with an issue where black bars (borders) appear on the sides or top/bottom when previewing on different devices (like iPhone X or iPad).

What I have tried:

  1. Project Settings: I’ve experimented with “Fit Width” and “Fit Height” but it only solves the issue for one dimension; the black bars still appear on the other.
  2. Widget Component: I added a Widget to my Background Sprite and set Top, Bottom, Left, and Right to 0, but the background still doesn’t seem to fill the entire screen on some resolutions.

I want my Background Sprite to always fill the entire screen (bleed out) regardless of the device’s aspect ratio

Any help or a sample hierarchy structure would be greatly appreciated!

2

Hi,
As I checked on my site. If you check only the “Fit Width” or “Fit Height” options (don’t check both Fit Width and Fit Height). The sprite will automatically fill the entire screen if have widget component all Top, Bottom, Left and Right set to 0.