-
-
Notifications
You must be signed in to change notification settings - Fork 908
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Adding component snapshot to Dev tools (#3261)
Adds a component render snapshot to the dev tools. https://github.com/user-attachments/assets/07dcdc10-f8c8-4607-a87d-ab832aa8bab5
- Loading branch information
1 parent
4af00c1
commit 1a57491
Showing
5 changed files
with
201 additions
and
24 deletions.
There are no files selected for viewing
71 changes: 71 additions & 0 deletions
71
packages/flame/lib/src/devtools/connectors/component_snapshot_connector.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import 'dart:convert'; | ||
| import 'dart:developer'; | ||
| import 'dart:ui'; | ||
|
|
||
| import 'package:flame/components.dart'; | ||
| import 'package:flame/src/devtools/dev_tools_connector.dart'; | ||
|
|
||
| class ComponentSnapshotConnector extends DevToolsConnector { | ||
| @override | ||
| void init() { | ||
| registerExtension( | ||
| 'ext.flame_devtools.getComponentSnapshot', | ||
| (method, parameters) async { | ||
| Image? image; | ||
| final id = int.tryParse(parameters['id'] ?? ''); | ||
| game.propagateToChildren<Component>( | ||
| (c) { | ||
| if (c.hashCode == id) { | ||
| final pictureRecorder = PictureRecorder(); | ||
|
|
||
| final canvas = Canvas(pictureRecorder); | ||
|
|
||
| // I am not sure how we could calculate the size of a component | ||
| // that isn't a PositionComponent, so for now we will just use | ||
| // an arbitrary size. | ||
| var width = 100; | ||
| var height = 100; | ||
|
|
||
| if (c is PositionComponent) { | ||
| width = c.width.toInt(); | ||
| height = c.height.toInt(); | ||
|
|
||
| // Translate the canvas so that the component is | ||
| // drawn at the 0,0 | ||
| canvas.translate(-c.x, -c.y); | ||
| } | ||
|
|
||
| c.renderTree(canvas); | ||
|
|
||
| final picture = pictureRecorder.endRecording(); | ||
|
|
||
| image = picture.toImageSync(width, height); | ||
|
|
||
| return false; | ||
| } | ||
| return true; | ||
| }, | ||
| ); | ||
|
|
||
| if (image != null) { | ||
| final byteData = await image!.toByteData(format: ImageByteFormat.png); | ||
| final buffer = byteData!.buffer.asUint8List(); | ||
| final snapshot = base64Encode(buffer); | ||
| return ServiceExtensionResponse.result( | ||
| json.encode({ | ||
| 'id': id, | ||
| 'snapshot': snapshot, | ||
| }), | ||
| ); | ||
| } | ||
|
|
||
| return ServiceExtensionResponse.result( | ||
| json.encode({ | ||
| 'id': id, | ||
| 'snapshot': '', | ||
| }), | ||
| ); | ||
| }, | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
89 changes: 89 additions & 0 deletions
89
packages/flame_devtools/lib/widgets/component_snapshot.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import 'package:flame/flame.dart'; | ||
| import 'package:flame/widgets.dart'; | ||
| import 'package:flame_devtools/repository.dart'; | ||
| import 'package:flutter/material.dart' hide Image; | ||
|
|
||
| class ComponentSnapshot extends StatefulWidget { | ||
| const ComponentSnapshot({ | ||
| required this.id, | ||
| super.key, | ||
| }); | ||
|
|
||
| final String id; | ||
|
|
||
| @override | ||
| State<ComponentSnapshot> createState() => _ComponentSnapshotState(); | ||
| } | ||
|
|
||
| class _ComponentSnapshotState extends State<ComponentSnapshot> { | ||
| late Future<String?> _snapshot; | ||
|
|
||
| @override | ||
| void initState() { | ||
| super.initState(); | ||
|
|
||
| _snapshot = Repository.snapshot(id: widget.id); | ||
| } | ||
|
|
||
| @override | ||
| void didUpdateWidget(ComponentSnapshot oldWidget) { | ||
| super.didUpdateWidget(oldWidget); | ||
|
|
||
| if (oldWidget.id != widget.id) { | ||
| _snapshot = Repository.snapshot(id: widget.id); | ||
| } | ||
| } | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return FutureBuilder<String?>( | ||
| future: _snapshot, | ||
| builder: (context, snapshot) { | ||
| if (snapshot.connectionState == ConnectionState.done && | ||
| snapshot.hasData) { | ||
| return Base64Image( | ||
| base64: snapshot.data!, | ||
| imageId: widget.id, | ||
| ); | ||
| } | ||
| return const Text('Loading snapshot...'); | ||
| }, | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class Base64Image extends StatelessWidget { | ||
| const Base64Image({ | ||
| required this.base64, | ||
| required this.imageId, | ||
| super.key, | ||
| }); | ||
|
|
||
| final String base64; | ||
| final String imageId; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| final imageFuture = Flame.images.fromBase64( | ||
| imageId, | ||
| base64, | ||
| ); | ||
| return FutureBuilder( | ||
| future: imageFuture, | ||
| builder: (context, snapshot) { | ||
| if (snapshot.connectionState == ConnectionState.done) { | ||
| return SizedBox( | ||
| width: 200, | ||
| height: 200, | ||
| child: SpriteWidget( | ||
| sprite: Sprite( | ||
| snapshot.data!, | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
| return const Text('Loading image...'); | ||
| }, | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters