diff --git a/spine-flutter/example/lib/dress_up.dart b/spine-flutter/example/lib/dress_up.dart index a96d3ac38..d55750774 100644 --- a/spine-flutter/example/lib/dress_up.dart +++ b/spine-flutter/example/lib/dress_up.dart @@ -2,6 +2,7 @@ import 'dart:ui' as ui; import 'package:flutter/material.dart'; import 'package:spine_flutter/spine_flutter.dart'; +import 'package:flutter/rendering.dart' as rendering; class DressUp extends StatefulWidget { const DressUp({Key? key}) : super(key: key); @@ -20,12 +21,25 @@ class DressUpState extends State { super.initState(); SkeletonDrawable.fromAsset("assets/mix-and-match-pro.skel", "assets/mix-and-match.atlas").then((drawable) async { for (var skin in drawable.skeletonData.getSkins()) { + //if (skin.getName() == "default") continue; + + var skeleton = drawable.skeleton; + skeleton.setSkin(skin); + skeleton.setToSetupPose(); + skeleton.updateWorldTransform(); + var bounds = skeleton.getBounds(); + var scale = 1 / (bounds.width > bounds.height ? bounds.width / thumbnailSize * 1.1 : bounds.height / thumbnailSize * 1.1); + var recorder = ui.PictureRecorder(); var canvas = Canvas(recorder, const Rect.fromLTWH(0, 0, thumbnailSize, thumbnailSize)); var paint = Paint() - ..color = ui.Color(0xff995588) + ..color = const ui.Color(0xffff00ff) ..style = PaintingStyle.fill; - canvas.drawRect(Rect.fromLTWH(0, 0, 200, 200), paint); + canvas.drawRect(const Rect.fromLTWH(0, 0, thumbnailSize, thumbnailSize), paint); + canvas.scale(scale, scale); + canvas.translate(-bounds.x, -bounds.y); + drawable.renderToCanvas(canvas); + var imageData = await (await recorder.endRecording().toImage(thumbnailSize.toInt(), thumbnailSize.toInt())).toByteData(format: ui.ImageByteFormat.png); _skinImages.add(Image.memory(imageData!.buffer.asUint8List(), fit: BoxFit.none)); } @@ -37,14 +51,16 @@ class DressUpState extends State { @override Widget build(BuildContext context) { return Scaffold( - appBar: AppBar(title: const Text('Skins')), + appBar: AppBar(title: const Text('Dress Up')), body: _skinImages.isEmpty ? const SizedBox() : Row( children: [ Expanded( child:ListView( - children: _skinImages + children: _skinImages.map((image) { + return SizedBox(width: 100, height: 100, child: image); + }).toList() ) ), ] diff --git a/spine-flutter/lib/spine_flutter.dart b/spine-flutter/lib/spine_flutter.dart index f5617c6a7..a3f317943 100644 --- a/spine-flutter/lib/spine_flutter.dart +++ b/spine-flutter/lib/spine_flutter.dart @@ -5,7 +5,7 @@ import 'dart:typed_data'; import 'dart:ui'; import 'package:ffi/ffi.dart'; -import 'package:flutter/rendering.dart'; +import 'package:flutter/rendering.dart' as rendering; import 'package:flutter/services.dart'; import 'package:http/http.dart' as http; import 'package:path/path.dart' as path; @@ -3219,6 +3219,14 @@ class SkeletonDrawable { return commands; } + void renderToCanvas(Canvas canvas) { + var commands = render(); + for (final cmd in commands) { + canvas.drawVertices( + cmd.vertices, rendering.BlendMode.modulate, atlas.atlasPagePaints[cmd.atlasPageIndex]); + } + } + void dispose() { if (_disposed) return; _disposed = true; @@ -3238,6 +3246,7 @@ class RenderCommand { atlasPageIndex = nativeCmd.ref.atlasPage; int numVertices = nativeCmd.ref.numVertices; int numIndices = nativeCmd.ref.numIndices; + final positions = nativeCmd.ref.positions.asTypedList(numVertices * 2); final uvs = nativeCmd.ref.uvs.asTypedList(numVertices * 2); for (int i = 0; i < numVertices * 2; i += 2) { uvs[i] *= pageWidth; @@ -3247,7 +3256,7 @@ class RenderCommand { // is copied, so it doesn't matter that we free up the underlying memory on the next // render call. See the implementation of Vertices.raw() here: // https://github.com/flutter/engine/blob/5c60785b802ad2c8b8899608d949342d5c624952/lib/ui/painting/vertices.cc#L21 - vertices = Vertices.raw(VertexMode.triangles, nativeCmd.ref.positions.asTypedList(numVertices * 2), + vertices = Vertices.raw(VertexMode.triangles, positions, textureCoordinates: uvs, colors: nativeCmd.ref.colors.asTypedList(numVertices), indices: nativeCmd.ref.indices.asTypedList(numIndices)); diff --git a/spine-flutter/lib/spine_widget.dart b/spine-flutter/lib/spine_widget.dart index 68692392e..3e0236fad 100644 --- a/spine-flutter/lib/spine_widget.dart +++ b/spine-flutter/lib/spine_widget.dart @@ -1,12 +1,8 @@ -import 'dart:convert'; -import 'dart:io'; import 'dart:math'; import 'package:flutter/rendering.dart' as rendering; import 'package:flutter/scheduler.dart'; -import 'package:flutter/services.dart'; import 'package:flutter/widgets.dart'; -import 'package:http/http.dart' as http; import 'spine_flutter.dart'; @@ -424,11 +420,7 @@ class _SpineRenderObject extends RenderBox { canvas.save(); _setCanvasTransform(canvas, offset); - final commands = _skeletonDrawable.render(); - for (final cmd in commands) { - canvas.drawVertices( - cmd.vertices, rendering.BlendMode.modulate, _skeletonDrawable.atlas.atlasPagePaints[cmd.atlasPageIndex]); - } + _skeletonDrawable.renderToCanvas(canvas); canvas.restore(); SchedulerBinding.instance.scheduleFrameCallback(_beginFrame);