Flutter × 2dimensions Flutter Meetup Tokyo #2 2018/05/31

About me Tazawa Kenji (@tazakeeeeeeee) Recruit Marketing Partners Co., Ltd. Data Analyst

2dimensions? https:/ /developers.googleblog.com/2018/05/ready-for-production-apps-flutter-beta-3.html

2D character animation tool vector animation tools for app and game designers alike released Coming soon as a free beta 2dimensions? %JNFOTJPOTP⒎FSTQPXFSGVMSFBMUJNFBOJNBUJPOUPPMT https:/ /www.2dimensions.com/

NIMA Supported Assets Nima supports most popular image formats, image sequences, and PSD files (8-bit mode). Be sure to flatten any PSD layer effects before importing into Nima. PSD Imported PSDs appear as a single top-level asset (with a PSD icon), which can be expanded to reveal all the layers included in it. Image Sequences Import an image sequence into Nima by dragging and dropping multiple images that are named sequentially (e.g. image_000.png, image_0001.png, image_0002.png, etc). https:/ /www.2dimensions.com/learn/manual/assets

NIMA Supported Assets Nima supports most popular image formats, image sequences, and PSD files (8-bit mode). Be sure to flatten any PSD layer effects before importing into Nima. PSD Imported PSDs appear as a single top-level asset (with a PSD icon), which can be expanded to reveal all the layers included in it. Image Sequences Import an image sequence into Nima by dragging and dropping multiple images that are named sequentially (e.g. image_000.png, image_0001.png, image_0002.png, etc). https:/ /www.2dimensions.com/learn/manual/assets

NIMA ·ͣ͸ը૾ͷΠϯϙʔτɺΞχϝʔγϣϯ࡞੒ɺΞχϝʔ γϣϯϑΝΠϧͷΤΫεϙʔτͷ࿩

NIMA https:/ /www.2dimensions.com/learn/manual/assets example) import PSD

NIMA import Image Sequences

NIMA

NIMA

NIMA export ϑΝΠϧ໊͸/*."Ͱͷ ϓϩδΣΫτ໊͕࢖ΘΕ Δɻ

NIMA #PZ3VOQOH㱺֤ύʔπ ͕QOHϑΝΠϧʹऩΊͯ ͍ΔɻQOHϑΝΠϧʹ· ͱΊͯಡΈࠐΈෛՙ௿ݮɻ #PZ3VOOJNB㱺Ξχϝʔ γϣϯͷ಺༰ͱQOHͷ࢖ ༻ΤϦΞΛอ࣋

NIMA example) export PSD 14%ΛΠϯϙʔτͯ͠Ξ χϝʔγϣϯΛੜ੒ͨ͠ ΄͏͕ϑΝΠϧ༰ྔͷ࡟ ݮʹͭͳ͕Δɻ

NIMA ࣍͸ɺ࣮૷ํ๏ʹ͍ͭͯ

Flutter Code dependencies: flutter: sdk: flutter nima: ^1.0.0 flutter: uses-material-design: true assets: - assets/BoyRun.nima - assets/BoyRun.png pubspec.yaml

Flutter Code import 'package:nima/nima_actor.dart'; return new Scaffold( … body: new NimaActor("assets/BoyRun", alignment: Alignment.center, fit: BoxFit.contain, animation: ‘run’, mixSeconds: 0.5, completed: (String animationName) {//do something}); ); main.dart BOJNBUJPOʹ͸/*."Ͱ࡞੒ͨ͠Ξχϝʔγϣϯͷ໊લΛࢦఆ͢Δɻ

NIMA ͜Ε͚ͩͰऴྃʂ ͍Ζ͍Ζ૊Έ߹ΘͤͨαϯϓϧΛޚཡ͍ͩ͘͞ɻ

NIMA *NBHF4FRVFODFTͰ &YQPSUͨ͠ϑΝΠϧͰ࣮ ߦ͢Δͱ(FOFSJDTͰ &YDFQUJPO͕ൃੜ͠· ͢ɻ 13Λग़ͯ͠ରԠࡁΈɻ

Sample ෳ਺ͷ/JNB"DUPSʢΞόλʔͱഎܠͭʣ Λ4UBDLͤͨ͞αϯϓϧͰ͢ʢ"OESPJE ΤϛϡϨʔλʣ˞ελσΟαϓϦӳ୯ޠ ͷ࠶ݱ ΞόλʔͷΞχϝʔγϣϯ͸૸Δεϐʔ υΛஈ֊෼༻ҙ͠ɺϘλϯΛԡ͢ͱΞ χϝʔγϣϯΛ੾Γସ͑ΔΑ͏ʹ࣮૷͠ ͍ͯ·͢ɻ ೥͙Β͍લͷ"OESPJE୺຤Ͱىಈ͞ ͤͨͱ͜ΖಡΈࠐΈ࣌ʹগ͠ΧΫ͍ͭͨɻ

NIMA OJNBQBDLBHFͷඳը࣮૷ʹ͍ͭͯ

nima Impelement class NimaActor extends LeafRenderObjectWidget /// A superclass for RenderObjectWidgets that configure RenderObject subclasses /// that have no children. abstract class LeafRenderObjectWidget extends RenderObjectWidget { … @override LeafRenderObjectElement createElement() => new LeafRenderObjectElement(this); } /// An [Element] that uses a [LeafRenderObjectWidget] as its configuration. class LeafRenderObjectElement extends RenderObjectElement { /// Creates an element that uses the given widget as its configuration. LeafRenderObjectElement(LeafRenderObjectWidget widget): super(widget); … }

nima Impelement class NimaActor extends LeafRenderObjectWidget LeafRenderObjectWidget͸ࢠΛ࣋ͨͳ͍RenderObjectWidgetɻLeafRenderObjectElement͸ͦͷઃఆɻ RenderObjectWidget͸ @protected RenderObject createRenderObject(BuildContext context); @protected void updateRenderObject(BuildContext context, covariant RenderObject renderObject) { } createRenderObjectϝιουͰRenderObjectΛੜ੒ɺupdateRenderObjectϝιου Ͱߋ৽Λͯ͠ඳըΛ੾Γସ͍͑ͯΔײ͡ɻ ࣮ࡍͷඳըॲཧ͸RenderObject಺ͷpaintϝιουͰPaintingContext͕อ͍࣋ͯ͠Δ canvasΦϒδΣΫτ࢖༻͍ͯ͠Δɻ

nima Impelement class NimaActorRenderObject extends RenderBox{ … @override void paint(PaintingContext context, Offset offset){ final Canvas canvas = context.canvas; … } } nima_actiorͰ͸RenderObjectΛܧঝͨ͠RenderBoxΛܧঝͯ͠NimaActorRenderObject Λ࡞੒͍ͯ͠Δɻ ※paintϝιου಺ͷcanvas΁ͷॲཧίʔυΛ࡟ͬͨΒԿ΋ඳը͞Εͳ͘ͳͬͨ ࢀর RenderObject | https://docs.flutter.io/flutter/rendering/RenderObject-class.html RenderBox | https://docs.flutter.io/flutter/rendering/RenderBox-class.html

nima Impelement class NimaActor extends LeafRenderObjectWidget{ @override RenderObject createRenderObject(BuildContext context){ return new NimaActorRenderObject() } @override void updateRenderObject(BuildContext context, covariant NimaActorRenderObject renderObject){ } } class NimaActorRenderObject extends RenderBox{ @override void paint(PaintingContext context, Offset offset){ final Canvas canvas = context.canvas; … //ඳըॲཧ } }

nima Impelement ;ͱͨ͠ॠؒؾʹͳͬͨͷͰࢼ͠ʹRaisedButtonͷ࣮૷Λ௥ͬͯΈͨͱ ͜Ζɺͪ͜Β͸SingleChildRenderObjectWidgetʹͨͲΓண͍ͨɻ NimaActor΋RaisedButton΋ݩ͸RenderObjectWidgetɻࢠΛڐ͢ ͔ͱ͔ͷϓϩύςΟɺ੍໿͕ҟͳΔ͚ͩɻ ͳͷͰجຊී௨ͷwidgetͱͯ͠NimaActor͸ѻ͑Δɻ͸ͣɻɻɻ ઌఔͷαϯϓϧͰ͸࣮ࡍʹTransformΛ࢖༻ͯ͠NimaActorͷॖখΛ͠ ͍ͯΔ͠ɺGestureDetectorͰϥοϓ͢Δ͜ͱͰΫϦοΫΠϕϯτ΋औ ಘͰ͖ͨɻ

Impressions ͪΐͬͱͨ͠ΞχϝʔγϣϯΛ࡞࣮ͬͯ૷͢Δʹ͸ָɻࣗྗͰ࣮૷͢ Δʹͯ͠΋RenderObjectWidgetͷαϒΫϥεୡΛ࢖͏࣮૷ʹͳΔؾ ͕͢ΔͷͰ޻਺Λߟ͑Δͱ࢖ͬͯଛ͸ͳ͍ ͍͏ͯwidgetͰ͢ ࠓճ͸ૉࡐͷ౎߹΋͋ΓImageSequencesͰ࣮૷͕ͨ͠ɺ࣮ࡍʹ࢖༻ ͢Δ৔߹͸PSDϑΝΠϧͰΞχϝʔγϣϯΛ࡞੒ͨ͠΄͏༰ྔ࡟ݮͷ ؍఺͔Β͸ྑͦ͞͏ NIMAͷτϥΠΞϧظ͕ؒ7೔ؒͳͷͰݕূɾ࣮૷͔ΒεϥΠυ࡞੒ͷ ؒʹτϥΠΞϧظ͕ؒऴྃͯ͠εΫγϣͱΕͳ͘ͳͬͯࠔͬͨ ݒ೦ ୭͕Ξχϝʔγϣϯ࡞ΔͶΜ໰୊͸͋Γͦ͏ ෳ਺ղ૾౓΁ͷରԠ→export࣌ʹը૾αΠζࢦఆͰ͖Δ͔ΒରԠͰ͖ ͦ͏͔ͳʢը࣭͸Ͳ͏ͳΔ͔

thank you.