Use Vector2 in ParallaxComponent

This commit is contained in:
Lukas Klingsbo
2020-09-10 21:22:50 +02:00
parent 12bb0ac19d
commit 8a8a6a7437
2 changed files with 29 additions and 25 deletions

View File

@ -40,8 +40,8 @@ class ParallaxLayer {
Image _image;
Vector2 _screenSize;
Rect _paintArea;
Offset _scroll;
Offset _imageSize;
Vector2 _scroll;
Vector2 _imageSize;
double _scale = 1.0;
ParallaxLayer(this.parallaxImage) {
@ -50,7 +50,7 @@ class ParallaxLayer {
bool loaded() => _image != null;
Offset currentOffset() => _scroll;
Vector2 currentOffset() => _scroll;
void resize(Vector2 size) {
if (!loaded()) {
@ -72,52 +72,53 @@ class ParallaxLayer {
_scale = scale(parallaxImage.fill);
// The image size so that it fulfills the LayerFill parameter
_imageSize = Offset(_image.width / _scale, _image.height / _scale);
_imageSize =
Vector2(_image.width.toDouble(), _image.height.toDouble()) / _scale;
// Number of images that can fit on the canvas plus one
// to have something to scroll to without leaving canvas empty
final countX = 1 + size.x / _imageSize.dx;
final countY = 1 + size.y / _imageSize.dy;
final countX = 1 + size.x / _imageSize.x;
final countY = 1 + size.y / _imageSize.y;
// Percentage of the image size that will overflow
final overflowX = (_imageSize.dx * countX - size.x) / _imageSize.dx;
final overflowY = (_imageSize.dy * countY - size.y) / _imageSize.dy;
final overflowX = (_imageSize.x * countX - size.x) / _imageSize.x;
final overflowY = (_imageSize.y * countY - size.y) / _imageSize.y;
// Align image to correct side of the screen
final alignment = parallaxImage.alignment;
final marginX = alignment.x == 0 ? overflowX / 2 : alignment.x;
final marginY = alignment.y == 0 ? overflowY / 2 : alignment.y;
_scroll ??= Offset(marginX, marginY);
_scroll ??= Vector2(marginX, marginY);
// Size of the area to paint the images in
final rectWidth = countX * _imageSize.dx;
final rectHeight = countY * _imageSize.dy;
final rectWidth = countX * _imageSize.x;
final rectHeight = countY * _imageSize.y;
_paintArea = Rect.fromLTWH(0, 0, rectWidth, rectHeight);
}
void update(Offset delta) {
void update(Vector2 delta) {
if (!loaded()) {
return;
}
// Scale the delta so that images that are larger don't scroll faster
_scroll += delta.scale(1 / _imageSize.dx, 1 / _imageSize.dy);
_scroll += delta..divide(_imageSize);
switch (parallaxImage.repeat) {
case ImageRepeat.repeat:
_scroll = _scroll % 1;
_scroll = Vector2(_scroll.x % 1, _scroll.y % 1);
break;
case ImageRepeat.repeatX:
_scroll = Offset(_scroll.dx % 1, _scroll.dy);
_scroll = Vector2(_scroll.x % 1, _scroll.y);
break;
case ImageRepeat.repeatY:
_scroll = Offset(_scroll.dx, _scroll.dy % 1);
_scroll = Vector2(_scroll.x, _scroll.y % 1);
break;
case ImageRepeat.noRepeat:
break;
}
final dx = _scroll.dx * _imageSize.dx;
final dy = _scroll.dy * _imageSize.dy;
final dx = _scroll.x * _imageSize.x;
final dy = _scroll.y * _imageSize.y;
_paintArea = Rect.fromLTWH(-dx, -dy, _paintArea.width, _paintArea.height);
}
@ -154,22 +155,24 @@ enum LayerFill { height, width, none }
/// A full parallax, several layers of images drawn out on the screen and each
/// layer moves with different speeds to give an effect of depth.
class ParallaxComponent extends PositionComponent {
Offset baseSpeed;
Offset layerDelta;
Vector2 baseSpeed;
Vector2 layerDelta;
List<ParallaxLayer> _layers;
bool _loaded = false;
ParallaxComponent(
List<ParallaxImage> images, {
this.baseSpeed = Offset.zero,
this.layerDelta = Offset.zero,
this.baseSpeed,
this.layerDelta,
}) {
baseSpeed ??= Vector2.zero();
layerDelta ??= Vector2.zero();
_load(images);
}
/// The base offset of the parallax, can be used in an outer update loop
/// if you want to transition the parallax to a certain position.
Offset currentOffset() => _layers[0].currentOffset();
Vector2 currentOffset() => _layers[0].currentOffset();
@override
bool loaded() => _loaded;