Home Game Development Responsive2D Alignment Extension – Cocos Creator

Responsive2D Alignment Extension – Cocos Creator

0
Responsive2D Alignment Extension – Cocos Creator

[ad_1]

Hi, I’ve labored on an extension for a number of weeks and it’s time to share it with you.

With this plugin, you’ll be able to align 2D nodes for various display screen varieties. It is helpful particularly for ui components.

I put right here GitHub hyperlink

Hope you prefer it.

Before Start

Please rename your canvas node title as “Canvas” within the editor.

How to Install

On the menu

  • Extension → Extension Manager

  • Open Project panel from Extension Manager

  • Press + icon

  • Choose zip file

  • After set up restart editor

How to Use

This extension works in actual time. When you modify one thing on the part, you’ll be able to see adjustments immediately on the editor.

1- Width Ratio

Scales recreation object with entered worth. For instance, if the worth equals 1, so the sport object width might be equal to display screen dimension.

2- Height Ratio

Same with width ratio, on this case the sport object peak adjustments.

3- Ratio Type

Options are ‘min, max and stretch’

min

Chooses minimal worth between width and peak ratio and apply scale to recreation object.

max

Chooses most worth between width and peak ratio and apply scale to recreation object.

stretch

Scales recreation object seperately for width and peak ratios.

4- Referance Node

Initially recreation objects align self acoording to display screen dimensions. If a referance node utilized so the sport object considers referance node rework values.

5- Alignment

The all display screen is split into sections. The yellow half that you simply see on the picture is the chosen alignment (middle – middle) which suggests the sport object might be positioned on the middle of the display screen. Choose completely different sections to put recreation object completely different areas and we are going to use spacing to present offset to the sport object.

6- Follow Node

Enabling this feature disables alignment and the sport object observe chosen node place.

7- Horizontal Space

This works with Alignment and Follow Node. This spec contains 8 choices. These are:

%

Gives area to the sport object utilizing the p.c of obtainable area. For instance selecting 50% strikes the sport object proper as a lot as half of the display screen width.

8- Ratio Type

px

Gives area utilizing pixel worth

self

Gives area by calculating recreation object self width. For instance If 100% setted, so the sport object might be moved as a lot as self width

left

Gives area by calculating left referance node width. For instance If 100% setted, so the sport object might be moved as a lot as left referance node width

proper
prime
backside

Same factor goes for different referance nodes

observe

And similar factor goes for adopted node that I defined within the entry 6

9- Vertical Space

This is vertical spacing, it’s similar with Horizontal Space. The solely distinction is spacing vertically.

10- Flip X

Flips the sport object horizontally and the flip y is flips the sport object verticalls as its title explains the case.

11- Portrait Menu

Settings for portrait orientation

12- Landscape Menu

Settings for panorama orientation

13- Settings Menu

General settings

14- Rotate Screen

Rotates editor gameplay space so we are able to set issues for each portrait and panorama orientations.

15- Change Dimension

Changes gameplay space’s dimension. Currently we’ve got 3 completely different gadget. But you’ll be able to add completely different gadget dimensions within the script.

16- Enable Landscape

If this feature shouldn’t be enabled, the sport object makes use of portrait values for the panorama and whether it is enabled so you’ll be able to set panorama alignment for the sport object.

17- Paste Portrait

Quickly copy and paste portrait settings.

18- Resize Frequency

This is contains 3 choices that are:

ON_WINDOW_RESIZE

Calculation is made for every display screen dimension change occasion, like switching between portrait and panorama orientations.

ONCE

Calculation is made for under as soon as.

ALWAYS

Calculation is made within the replace technique.

19- Calculate Content Size

If you’ve mother or father node and this node has baby nodes, so place baby nodes within the editor and calculate the mother or father dimensions with this feature after which untick this feature. The major objective is getting rework values of the mother or father node so we are able to align mother or father with proper proprtions.

20- Positioning from Anchor

Normally extension positions the sport object through the use of its edge factors. If this feature is enabled, the sport object might be aligned from it’s anchor factors.

For Questions

Discord: agonima#2526

Sample Video

[ad_2]

LEAVE A REPLY

Please enter your comment!
Please enter your name here