feat: Adding ImageExtension.resize (#2418)

Adds a helper method to ImageExtension to make it easier to resize an image.

examples/lib/main.dart

@@ -18,6 +18,7 @@ import 'package:examples/stories/components/components.dart';
 import 'package:examples/stories/effects/effects.dart';
 import 'package:examples/stories/experimental/experimental.dart';
 import 'package:examples/stories/games/games.dart';
+import 'package:examples/stories/image/image.dart';
 import 'package:examples/stories/input/input.dart';
 import 'package:examples/stories/layout/layout.dart';
 import 'package:examples/stories/parallax/parallax.dart';
@@ -77,6 +78,7 @@ void runAsDashbook() {
  addSystemStories(dashbook);
  addUtilsStories(dashbook);
  addWidgetsStories(dashbook);
+ addImageStories(dashbook);
 
  // Bridge package examples
  addForge2DStories(dashbook);

examples/lib/stories/image/image.dart

@@ -0,0 +1,23 @@
+import 'package:dashbook/dashbook.dart';
+
+import 'package:examples/commons/commons.dart';
+import 'package:examples/stories/image/resize.dart';
+import 'package:flame/game.dart';
+
+void addImageStories(Dashbook dashbook) {
+ dashbook.storiesOf('Image')
+ ..decorator(CenterDecorator())
+ ..add(
+ 'resize',
+ (context) => GameWidget(
+ game: ImageResizeExample(
+ Vector2(
+ context.numberProperty('width', 200),
+ context.numberProperty('height', 300),
+ ),
+ ),
+ ),
+ codeLink: baseLink('image/resize.dart'),
+ info: ImageResizeExample.description,
+ );
+}

examples/lib/stories/image/resize.dart

@@ -0,0 +1,29 @@
+import 'package:flame/components.dart';
+import 'package:flame/extensions.dart';
+import 'package:flame/game.dart';
+
+class ImageResizeExample extends FlameGame {
+ ImageResizeExample(this.sizeTarget);
+
+ static const String description = '''
+ Shows how a dart:ui `Image` can be resized using Flame Image extensions.
+ Use the properties on the side to change the size of the image.
+ ''';
+
+ final Vector2 sizeTarget;
+
+ @override
+ Future<void> onLoad() async {
+ final image = await images.load('flame.png');
+
+ final resized = await image.resize(sizeTarget);
+ add(
+ SpriteComponent(
+ sprite: Sprite(resized),
+ position: size / 2,
+ size: resized.size,
+ anchor: Anchor.center,
+ ),
+ );
+ }
+}

examples/pubspec.yaml

@@ -26,11 +26,12 @@ dependencies:
  padracing: ^1.0.0
  provider: ^6.0.3
  rogue_shooter: ^0.1.0
- test: ^1.23.1
  trex_game: ^0.1.0
 
 dev_dependencies:
  flame_lint: ^0.2.0
+ test: any
+
 flutter:
  uses-material-design: true
 

packages/flame/lib/src/extensions/image.dart

@@ -2,12 +2,14 @@ import 'dart:async';
 import 'dart:typed_data';
 import 'dart:ui';
 
-import 'package:flame/src/extensions/color.dart';
+import 'package:flame/palette.dart';
 import 'package:flame/src/extensions/vector2.dart';
 
 export 'dart:ui' show Image;
 
 extension ImageExtension on Image {
+ static final Paint _whitePaint = BasicPalette.white.paint();
+
  /// Converts a raw list of pixel values into an [Image] object.
  ///
  /// The pixels must be in the RGBA format, i.e. first 4 bytes encode the red,
@@ -90,4 +92,25 @@ extension ImageExtension on Image {
  }
  return fromPixels(newPixelData, width, height);
  }
+
+ /// Resizes this image to the given [newSize].
+ ///
+ /// Keep in mind that is considered an expensive operation and should be
+ /// avoided in the the game loop methods. Prefer using it
+ /// in the loading phase of the game or components.
+ Future<Image> resize(Vector2 newSize) async {
+ final recorder = PictureRecorder();
+ Canvas(recorder).drawImageRect(
+ this,
+ getBoundingRect(),
+ newSize.toRect(),
+ _whitePaint,
+ );
+ final picture = recorder.endRecording();
+ final resizedImage = await picture.toImage(
+ newSize.x.toInt(),
+ newSize.y.toInt(),
+ );
+ return resizedImage;
+ }
 }

packages/flame/test/extensions/image_extension_test.dart

@@ -1,8 +1,10 @@
 import 'dart:math';
 import 'dart:typed_data';
+import 'dart:ui';
 
 import 'package:flame/extensions.dart';
 import 'package:flame_test/flame_test.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 
 final output = List.filled(8 * 8 * 4, 255);
@@ -151,5 +153,19 @@ void main() {
  );
  expect(orignalBrightenPixelsList, expectedBrightenPixels);
  });
+
+ test('resize resizes the image', () async {
+ final recorder = PictureRecorder();
+ Canvas(recorder).drawRect(
+ const Rect.fromLTWH(0, 0, 100, 100),
+ Paint()..color = Colors.white,
+ );
+ final pic = recorder.endRecording();
+ final image = await pic.toImage(100, 100);
+
+ final resizedImage = await image.resize(Vector2(200, 400));
+ expect(resizedImage.width, equals(200));
+ expect(resizedImage.height, equals(400));
+ });
  });
 }