diff --git a/spine-flutter/example/lib/main.dart b/spine-flutter/example/lib/main.dart index ab41f4d0e..42c50a764 100644 --- a/spine-flutter/example/lib/main.dart +++ b/spine-flutter/example/lib/main.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; import 'package:spine_flutter/spine_flutter.dart'; class ExampleSelector extends StatelessWidget { @@ -46,6 +47,18 @@ class ExampleSelector extends StatelessWidget { ); }, ), + spacer, + ElevatedButton( + child: const Text('Skins'), + onPressed: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => const Skins(), + ), + ); + }, + ), spacer ] ) @@ -66,7 +79,7 @@ class SimpleAnimation extends StatelessWidget { }); return Scaffold( - appBar: AppBar(title: const Text('Spineboy')), + appBar: AppBar(title: const Text('Simple Animation')), body: SpineWidget.asset("assets/spineboy-pro.skel", "assets/spineboy.atlas", controller), // body: SpineWidget.file("/Users/badlogic/workspaces/spine-runtimes/examples/spineboy/export/spineboy-pro.skel", "/Users/badlogic/workspaces/spine-runtimes/examples/spineboy/export/spineboy.atlas", controller), // body: const SpineWidget.http("https://marioslab.io/dump/spineboy/spineboy-pro.json", "https://marioslab.io/dump/spineboy/spineboy.atlas"), @@ -103,7 +116,7 @@ class PlayPauseAnimationState extends State { reportLeaks(); return Scaffold( - appBar: AppBar(title: const Text('Spineboy')), + appBar: AppBar(title: const Text('Play/Pause')), body: SpineWidget.asset("assets/spineboy-pro.skel", "assets/spineboy.atlas", _controller), floatingActionButton: FloatingActionButton( onPressed: _togglePlaystate, @@ -113,6 +126,90 @@ class PlayPauseAnimationState extends State { } } +class Skins extends StatefulWidget { + const Skins({Key? key}) : super(key: key); + + @override + SkinsState createState() => SkinsState(); +} + +class SkinsState extends State { + Atlas? _atlas; + SkeletonData? _skeletonData; + final Map _availableSkins = {}; + Skin? _customSkin; + late SpineWidgetController _controller; + + @override + void initState() { + super.initState(); + + Atlas.fromAsset(rootBundle, "assets/mix-and-match.atlas").then((atlas) async { + _skeletonData = await SkeletonData.fromAsset(atlas, rootBundle, "assets/mix-and-match-pro.skel"); + _atlas = atlas; + for (var skin in _skeletonData?.getSkins() ?? []) { + _availableSkins[skin.getName()] = false; + } + + _controller = SpineWidgetController((controller) { + controller.animationState?.setAnimationByName(0, "walk", true); + }); + + setState(() => _toggleSkin("full-skins/girl")); + }); + } + + void _toggleSkin(String skinName) { + _availableSkins[skinName] = !_availableSkins[skinName]!; + + if (_customSkin != null) { + _customSkin?.dispose(); + _customSkin = null; + } + + _customSkin = Skin("custom-skin"); + for (var skinName in _availableSkins.keys) { + if (_availableSkins[skinName] == true) { + var skin = _controller.skeletonData?.findSkin(skinName); + if (skin != null) + _customSkin?.addSkin(skin); + } + } + _controller.skeleton?.setSkin(_customSkin!); + _controller.skeleton?.setToSetupPose(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: const Text('Skins')), + body: _skeletonData == null + ? SizedBox() + : Row( + children: [ + Expanded( + child:ListView( + children: _availableSkins.keys.map((skinName) { + return CheckboxListTile( + title: Text(skinName), + value: _availableSkins[skinName], + onChanged: (bool? value) { + _toggleSkin(skinName); + setState(() => {}); + }, + ); + }).toList() + ) + ), + Expanded( + child: SpineWidget.raw(_skeletonData, _atlas, _controller, boundsProvider: SkinAndAnimationBounds(["full-skins/girl"])) + ) + ] + ) + ); + } +} + class AnimationStateEvents extends StatelessWidget { const AnimationStateEvents({Key? key}) : super(key: key); diff --git a/spine-flutter/lib/spine_flutter.dart b/spine-flutter/lib/spine_flutter.dart index 9acc4528c..852928f3d 100644 --- a/spine-flutter/lib/spine_flutter.dart +++ b/spine-flutter/lib/spine_flutter.dart @@ -143,6 +143,14 @@ class SkeletonData { return SkeletonData._(result.skeletonData); } + static Future fromAsset(Atlas atlas, AssetBundle assetBundle, String skeletonFileName) async { + if (skeletonFileName.endsWith(".json")) { + return fromJson(atlas, await assetBundle.loadString(skeletonFileName)); + } else { + return fromBinary(atlas, (await assetBundle.load(skeletonFileName)).buffer.asUint8List()); + } + } + /// Finds a bone by comparing each bone's name. It is more efficient to cache the results of this method than to call it multiple times. BoneData? findBone(String name) { final nativeName = name.toNativeUtf8(); @@ -1559,11 +1567,23 @@ class SkinEntry { SkinEntry(this.slotIndex, this.name, this.attachment); } -// FIXME add a way to create a new skin class Skin { - final spine_skin _skin; + late final bool _isCustomSkin; + late final spine_skin _skin; - Skin._(this._skin); + Skin._(this._skin) : _isCustomSkin = false; + + Skin.new(String name) { + final nativeName = name.toNativeUtf8(); + _skin = _bindings.spine_skin_create(nativeName.cast()); + malloc.free(nativeName); + _isCustomSkin = true; + } + + void dispose() { + if (!_isCustomSkin) return; + _bindings.spine_skin_dispose(_skin); + } void setAttachment(int slotIndex, String name, Attachment? attachment) { final nativeName = name.toNativeUtf8(); @@ -2283,12 +2303,16 @@ class Skeleton { /// Also, often AnimationState::apply(Skeleton&) is called before the next time the /// skeleton is rendered to allow any attachment keys in the current animation(s) to hide or show attachments from the new skin. /// @param skinName May be NULL. - void setSkin(String skinName) { + void setSkinByName(String skinName) { final nameNative = skinName.toNativeUtf8(); - _bindings.spine_skeleton_set_skin(_skeleton, nameNative.cast()); + _bindings.spine_skeleton_set_skin_by_name(_skeleton, nameNative.cast()); malloc.free(nameNative); } + void setSkin(Skin skin) { + _bindings.spine_skeleton_set_skin(_skeleton, skin._skin); + } + Attachment? getAttachmentByName(String slotName, String attachmentName) { final slotNameNative = slotName.toNativeUtf8(); final attachmentNameNative = attachmentName.toNativeUtf8(); diff --git a/spine-flutter/lib/spine_widget.dart b/spine-flutter/lib/spine_widget.dart index eb268cda1..0975ce374 100644 --- a/spine-flutter/lib/spine_widget.dart +++ b/spine-flutter/lib/spine_widget.dart @@ -52,22 +52,6 @@ class SpineWidgetController { } bool get isPlaying => _drawable?.animationState.getTimeScale() != 0; - - List get animationNames { - List names = []; - for (var anim in _drawable?.skeletonData.getAnimations() ?? []) { - names.add(anim.getName()); - } - return names; - } - - List get skinNames { - List names = []; - for (var skin in _drawable?.skeletonData.getSkins() ?? []) { - names.add(skin.getName()); - } - return names; - } } enum AssetType { Asset, File, Http, Raw } @@ -81,6 +65,7 @@ abstract class BoundsProvider { class SetupPoseBounds extends BoundsProvider { const SetupPoseBounds(); + @override Bounds computeBounds(SkeletonDrawable drawable) { return drawable.skeleton.getBounds(); } @@ -91,12 +76,45 @@ class RawBounds extends BoundsProvider { RawBounds(this.x, this.y, this.width, this.height); + @override Bounds computeBounds(SkeletonDrawable drawable) { return Bounds(x, y, width, height); } } +class SkinAndAnimationBounds extends BoundsProvider { + final List _skins; + final String? _animation; + + SkinAndAnimationBounds(this._skins, [this._animation]); + + @override + Bounds computeBounds(SkeletonDrawable drawable) { + var data = drawable.skeletonData; + var oldSkin = drawable.skeleton.getSkin(); + var customSkin = Skin("custom-skin"); + for (var skinName in _skins) { + var skin = data.findSkin(skinName); + if (skin == null) continue; + customSkin.addSkin(skin); + } + drawable.skeleton.setSkin(customSkin); + drawable.skeleton.setToSetupPose(); + var bounds = drawable.skeleton.getBounds(); + customSkin.dispose(); + + if (oldSkin == null) { + drawable.skeleton.setSkinByName(""); + } else { + drawable.skeleton.setSkin(oldSkin); + } + drawable.skeleton.setToSetupPose(); + return bounds; + } +} + class ComputedBounds extends BoundsProvider { + @override Bounds computeBounds(SkeletonDrawable drawable) { return Bounds(0, 0, 0, 0); } @@ -169,7 +187,9 @@ class _SpineWidgetState extends State { void loadRaw(SkeletonData skeletonData, Atlas atlas) { skeletonDrawable = SkeletonDrawable(atlas, skeletonData, false); + widget.controller._initialize(atlas, skeletonData, skeletonDrawable!); skeletonDrawable?.update(0); + setState(() {}); } void loadFromAsset(String skeletonFile, String atlasFile, AssetType assetType) async { @@ -199,10 +219,7 @@ class _SpineWidgetState extends State { throw Exception("Raw assets can not be loaded via loadFromAsset()."); } - skeletonDrawable = SkeletonDrawable(atlas, skeletonData, true); - widget.controller._initialize(atlas, skeletonData, skeletonDrawable!); - skeletonDrawable?.update(0); - setState(() {}); + loadRaw(skeletonData, atlas); } @override