feat: Added AlignComponent layout component #2350

st-pasha · 2023-02-19T07:36:49Z

Description

This PR adds first layout component: AlignComponent, an equivalent of Align widget in Flutter.
AlignComponent sizes itself to its parent, and then keeps its child aligned to the specified anchor within its own bounding box.
Also adding onParentResize() lifecycle method, which is similar to onGameResize, but fires whenever the parent of the current component changes its size for any reason. (FlameGame is assumed to have the size canvasSize, and will invoke onParentResize whenever the canvas size changes).
Additional layout components are planned to be added in future PRs.

Checklist

I have followed the Contributor Guide when preparing my PR.
I have updated/added tests for ALL new/updated/fixed functionality.
I have updated/added relevant documentation in docs and added dartdoc comments with ///.
I have updated/added relevant examples in examples or docs.

Breaking Change?

No, this PR is not a breaking change.

Related Issues

Closes #2302
Closes #1421

spydon

Very well written docs!

examples/lib/stories/layout/align_component.dart

spydon · 2023-02-19T15:35:05Z

packages/flame/lib/src/components/position_component.dart

+  @override
+  set size(Vector2 size) {
+    _size.setFrom(size);
+    if (hasChildren) {


Does this check optimize anything? The foreach should also just do a check if it is empty right?

hasChildren avoids instantiating a ComponentSet object in case it is null.

could we do that check inside the .children getter instead?
that way we avoid duplicating this all over & everyone gets the performance boost (even end users)

(can be a separate PR of course)

The .children property returns a ComponentSet right now, which means it must create a component set in case it is currently missing. We could change it to return a ComponentSet? instead, but that would be a major breaking change I'm afraid -- so perhaps we could add that to our 2.0 todo list.

Haha I think 3 people commented about this on this PR, maybe it would be better as nullable indeed, let's discuss that for V2 at least. :)

I added a note about this in #1938

packages/flame/lib/src/camera/viewport.dart

packages/flame/lib/src/layout/align_component.dart

erickzanardo

This is great! Left a couple of comments but already think this will be a cool addition!

examples/lib/stories/layout/align_component.dart

erickzanardo · 2023-02-26T00:15:47Z

packages/flame/lib/src/layout/align_component.dart

+  AlignComponent({
+    required this.child,
+    required Anchor alignment,
+    this.widthFactor,
+    this.heightFactor,
+    this.keepChildAnchor = false,
+  }) {
+    this.alignment = alignment;
+    add(child);
+  }


Suggested change

AlignComponent({

required this.child,

required Anchor alignment,

this.widthFactor,

this.heightFactor,

this.keepChildAnchor = false,

}) {

this.alignment = alignment;

add(child);

}

AlignComponent({

required this.child,

required Anchor alignment,

this.widthFactor,

this.heightFactor,

this.keepChildAnchor = false,

}) : _alignment = alignment,

super(children: [child]);

this.alignment = alignment ensures that the setter for the property is called.

packages/flame/lib/src/layout/align_component.dart

examples/lib/stories/components/game_in_game_example.dart

packages/flame/lib/src/game/flame_game.dart

packages/flame/lib/src/layout/align_component.dart

luanpotter

LGTM, nice addition!

) Clarify required flutter channel on CONTRIBUTING guidelines

…ctor_test.dart (#2379) This is a cleanup identified on this issue: #2308 Using an amazing unused-code tooling Now, since Flame is a public API, unused code might not be trivial - it might just mean untested code. This one was a no-brainer -- the variable was clearly replaced by specific counters during the writing of the test and forgotten there: int nOnTapDown = 0; int nOnLongTapDown = 0; int nOnTapUp = 0; int nOnTap = 0; int nOnTapCancel = 0; It wasn't even increment and the taps are already thoroughly tested more granularly

This is a cleanup identified on this issue: #2308 Using an amazing unused-code tooling Now, since Flame is a public API, unused code might not be trivial - it might just mean untested code. In this case, we have a test helper, which is a public function we expose to help people write better tests. Which means that the function could be useful, it was just lacking a test -- so I added it. That being said, if this method is deemed unnecessary for users, I can just remove it instead - lmk.

This is a cleanup identified on this issue: #2308 Using an amazing unused-code tooling Now, since Flame is a public API, unused code might not be trivial - it might just mean untested code. In this case, the unused code is in the tests, which likely means it is indeed necessary. I tried to infer the intent of the author here, and even considered adding the names of the components to the events, but the events are already always per component, so that was meaningless. I also thought it might be a missing toString, that they would wish to show the component name for debugging purposes, but I didn't see any asserts/logs on the component objects themselves (just the events). So I concluded there is no reason to keep this field, but lmk if anyone disagrees and I can bring it back and add some function to it.

…ample (#2380) # Description This is a cleanup identified on this issue: #2308 Using an amazing unused-code tooling Now, since Flame is a public API, unused code might not be trivial - it might just mean untested code. Since this an example package, it definitely should never have unused code. In this case, the constructor wasn't being used, but upon deeper investigation, that was because this particular event wasn't ever fired at all. So I removed it entirely. If this was supposed to be fired somewhere by the example, please lmk and I can add the missing firing. But as far as I can see, the event serves no purpose in this example. ## Checklist - [x] I have followed the [Contributor Guide] when preparing my PR. - [x] I have updated/added tests for ALL new/updated/fixed functionality. - [x] I have updated/added relevant documentation in `docs` and added dartdoc comments with `///`. - [x] I have updated/added relevant examples in `examples` or `docs`. ## Breaking Change? - [ ] Yes, this PR is a breaking change. - [x] No, this PR is not a breaking change.  [Contributor Guide]: https://github.com/flame-engine/flame/blob/main/CONTRIBUTING.md [Conventional Commit]: https://conventionalcommits.org/ [CHANGELOG]: https://github.com/flame-engine/flame/blob/main/CHANGELOG.md Co-authored-by: Lukas Klingsbo <me@lukas.fyi>

# Description This does two things: ## Use double quotes for SDK constraints Standardize the usage of single or double quotes to specify sdk constraints across pubspecs I see no reason this should not be kept consistent I also see no reason to prefer one over the other, so I searched the code base and there are 7 instances of single quote vs 32 of double quotes, so I favored the later ## Update all SDK constraints to 2.18 Let me know if there are any issues with it, but I believe we should keep this consistent across all packages. Also there is a pubspec on root which imply all should be on 2.18 anyway. ## Checklist - [x] I have followed the [Contributor Guide] when preparing my PR. - [x] I have updated/added tests for ALL new/updated/fixed functionality. - [x] I have updated/added relevant documentation in `docs` and added dartdoc comments with `///`. - [x] I have updated/added relevant examples in `examples` or `docs`. ## Breaking Change? - [ ] Yes, this PR is a breaking change. - [x] No, this PR is not a breaking change.  [Contributor Guide]: https://github.com/flame-engine/flame/blob/main/CONTRIBUTING.md [Conventional Commit]: https://conventionalcommits.org/ [CHANGELOG]: https://github.com/flame-engine/flame/blob/main/CHANGELOG.md Co-authored-by: Lukas Klingsbo <me@lukas.fyi>

This list was wildly outdated. I could updated it but after consideration I thought there was no value to list the directory structure that was already represented in the github view. Happy to pivot to just updating it though if there are preferences.

…rovider_test.dart (#2381) This is a cleanup identified on this issue: #2308 Using an amazing unused-code tooling Now, since Flame is a public API, unused code might not be trivial - it might just mean untested code. In this case, it is a test file, so there should definitely be no unused code. However analyzing the unused code revealed to me some intent of testing multiple subsequent state changes (dead -> raise from dead). I believe such test was missing entirely, so I added it. I think it holds value, but lmk if you disagree I can just delete the test and the method.

The docs for overlays were a bit hard to find so I broke them out to its own section. They could need some some updating too with more examples and instructions.

rivella50 · 2023-07-15T05:30:43Z

Are there plans to implement additional layout components (mainly for row and column support)?
As you probably remember i did some work on this topic last year and perhaps it could be used here.

spydon · 2023-07-15T09:47:15Z

@rivella50 There is definitely some stuff in there that could be re-used, the main difference now is that the Row and Column components should be based on the AlignComponent. If you want to have a go at this I can assign you to the issue? :)

rivella50 · 2023-07-16T18:59:08Z

@spydon I pass this time, thanks. When i worked on it the last time it was quite frustrating and seemed to turn into a neverending story since all the time another guy appeared on the stage and suggested new things and changes.
This just took me too much time and there was no end foreseeable.

spydon · 2023-07-16T20:43:18Z

@rivella50 makes sense, must have been frustrating!

st-pasha added 6 commits February 18, 2023 20:59

AlignComponent

53f4356

expand example

3aa006f

docs

890d05a

added tests

9714ceb

Merge branch 'main' into ps.layout-components

94c2d2d

format

73c15b1

spydon reviewed Feb 19, 2023

View reviewed changes

spydon requested a review from a team February 19, 2023 15:40

st-pasha added 4 commits February 19, 2023 10:35

use children in the example

fa19f88

a

1805cb2

Merge branch 'main' into ps.layout-components

d2e2e23

capitalize Flutter

560dd4c

spydon approved these changes Feb 19, 2023

View reviewed changes

Merge branch 'main' into ps.layout-components

a624018

spydon requested a review from a team February 22, 2023 09:29

erickzanardo reviewed Feb 26, 2023

View reviewed changes

luanpotter reviewed Mar 1, 2023

View reviewed changes

examples/lib/stories/components/game_in_game_example.dart Outdated Show resolved Hide resolved

luanpotter reviewed Mar 1, 2023

View reviewed changes

packages/flame/lib/src/game/flame_game.dart Outdated Show resolved Hide resolved

luanpotter reviewed Mar 1, 2023

View reviewed changes

packages/flame/lib/src/layout/align_component.dart Show resolved Hide resolved

luanpotter reviewed Mar 1, 2023

View reviewed changes

packages/flame/lib/src/layout/align_component.dart Show resolved Hide resolved

st-pasha added 5 commits March 1, 2023 01:07

Merge branch 'main' into ps.layout-components

4037bcb

game-in-game example

2e92194

trailing commas

d838f52

Added ReadonlySizeProvider interface

d7aa2c1

fix mounting

6fe90f7

spydon approved these changes Mar 2, 2023

View reviewed changes

luanpotter approved these changes Mar 2, 2023

View reviewed changes

Pasha Stetsenko and others added 3 commits March 2, 2023 10:56

melos bs

b62481c

docs: Clarify required flutter channel on CONTRIBUTING guidelines (#2376

f4a6963

) Clarify required flutter channel on CONTRIBUTING guidelines

luanpotter and others added 8 commits March 2, 2023 10:56

docs: Break out overlays docs (#2384)

b4b8b7c

The docs for overlays were a bit hard to find so I broke them out to its own section. They could need some some updating too with more examples and instructions.

Merge branch 'main' into ps.layout-components

1690d0c

spydon merged commit 4f5e56f into main Mar 2, 2023

spydon deleted the ps.layout-components branch March 2, 2023 21:51

spydon mentioned this pull request May 2, 2023

docs: Adding darkness and brightness examples #2460

Open

6 tasks

rivella50 mentioned this pull request Jul 15, 2023

Row and Column for Flame Components #1944

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Added AlignComponent layout component #2350

feat: Added AlignComponent layout component #2350

st-pasha commented Feb 19, 2023 •

edited

spydon left a comment

spydon Feb 19, 2023

st-pasha Feb 19, 2023

luanpotter Mar 1, 2023

luanpotter Mar 2, 2023

st-pasha Mar 2, 2023

spydon Mar 2, 2023

st-pasha Mar 2, 2023

erickzanardo left a comment

erickzanardo Feb 26, 2023

st-pasha Mar 1, 2023

luanpotter left a comment

rivella50 commented Jul 15, 2023

spydon commented Jul 15, 2023

rivella50 commented Jul 16, 2023

spydon commented Jul 16, 2023

feat: Added AlignComponent layout component #2350

feat: Added AlignComponent layout component #2350

Conversation

st-pasha commented Feb 19, 2023 • edited

Description

Checklist

Breaking Change?

Related Issues

spydon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

erickzanardo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

luanpotter left a comment

Choose a reason for hiding this comment

rivella50 commented Jul 15, 2023

spydon commented Jul 15, 2023

rivella50 commented Jul 16, 2023

spydon commented Jul 16, 2023

st-pasha commented Feb 19, 2023 •

edited