Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive layout improvements #119

Merged
merged 11 commits into from
Nov 9, 2024
Merged

Conversation

Jhonnyg
Copy link
Contributor

@Jhonnyg Jhonnyg commented Nov 8, 2024

New:

  • Rive models has a "coordinate system" mode that can be used to position things in a game world "fullscreen" or a gui world "rive"
  • When using the "rive" coordinate system, there are two more options that can be used to position things according to the rive "align" method. See the docs for how it's used.
  • There is a new script function to get a compatible projection matrix: rive.get_projection_matrix()

Fixes:

  • Positions in the game-type coordinate system should be DPI independant

Fixes #118
Fixes #115
Fixes #113

@Jhonnyg Jhonnyg marked this pull request as ready for review November 8, 2024 16:44
@@ -31,6 +64,10 @@ message RiveModelDesc
optional bool create_go_bones = 6 [default=false];
optional string artboard = 7;

optional CoordinateSystem coordinate_system = 8 [default = COORDINATE_SYSTEM_FULLSCREEN];
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a good name for the setup? Basically what I want to achieve is to be able to position things together with defold content in the same coordinate system as well as position things according to the .riv files themselves, using the alignment options that are available in the Rive API. Not sure the naming here is good thoug, should it be something like "Game" / "GUI"? "Game" / "Rive Alignment"? 🤷

@@ -1,115 +1,240 @@
-- Copyright 2020-2024 The Defold Foundation
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated to use the new render script

float normalized_x = x / g_OriginalWindowWidth;
float normalized_y = 1 - (y / g_OriginalWindowHeight);

rive::Vec2D p_local = component->m_InverseRendererTransform * rive::Vec2D(normalized_x * window_width, normalized_y * window_height);
Copy link
Contributor Author

@Jhonnyg Jhonnyg Nov 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Save the transform used in the renderer for this artboard (will this actually be a frame late?) and use the inverse to place the x,y in the same space as the artboard.

There's some hoops here because input.x and input.y are in the projects window coordinates it seems, and we want actual screen coordinates here. If we use the x,y as is, resizing the window will break the input, so we need to normalize the coordinates first.

@Jhonnyg Jhonnyg requested a review from britzl November 8, 2024 17:04
@Jhonnyg Jhonnyg merged commit cdcc1b7 into main Nov 9, 2024
13 checks passed
@Jhonnyg Jhonnyg deleted the responsive-layout-improvements branch November 9, 2024 09:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants