Flutter × 2dimensions

917a7766665d87117bf9bca07f5090af?s=47 tazake
May 31, 2018
770

Flutter × 2dimensions

use NIMA of 2dimensions on Flutter

917a7766665d87117bf9bca07f5090af?s=128

tazake

May 31, 2018
Tweet

Transcript

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

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

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

  4. 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/
  5. 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
  6. 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
  7. NIMA ·ͣ͸ը૾ͷΠϯϙʔτɺΞχϝʔγϣϯ࡞੒ɺΞχϝʔ γϣϯϑΝΠϧͷΤΫεϙʔτͷ࿩

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

  9. NIMA import Image Sequences

  10. NIMA

  11. NIMA

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

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

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

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

  16. Flutter Code dependencies: flutter: sdk: flutter nima: ^1.0.0 flutter: uses-material-design:

    true assets: - assets/BoyRun.nima - assets/BoyRun.png pubspec.yaml
  17. 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ʹ͸/*."Ͱ࡞੒ͨ͠Ξχϝʔγϣϯͷ໊લΛࢦఆ͢Δɻ
  18. NIMA ͜Ε͚ͩͰऴྃʂ ͍Ζ͍Ζ૊Έ߹ΘͤͨαϯϓϧΛޚཡ͍ͩ͘͞ɻ

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

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

    ͤͨͱ͜ΖಡΈࠐΈ࣌ʹগ͠ΧΫ͍ͭͨɻ
  21. NIMA OJNBQBDLBHFͷඳը࣮૷ʹ͍ͭͯ

  22. 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); … }
  23. 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ΦϒδΣΫτ࢖༻͍ͯ͠Δɻ
  24. 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
  25. 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; … //ඳըॲཧ } }
  26. nima Impelement ;ͱͨ͠ॠؒؾʹͳͬͨͷͰࢼ͠ʹRaisedButtonͷ࣮૷Λ௥ͬͯΈͨͱ ͜Ζɺͪ͜Β͸SingleChildRenderObjectWidgetʹͨͲΓண͍ͨɻ NimaActor΋RaisedButton΋ݩ͸RenderObjectWidgetɻࢠΛڐ͢ ͔ͱ͔ͷϓϩύςΟɺ੍໿͕ҟͳΔ͚ͩɻ ͳͷͰجຊී௨ͷwidgetͱͯ͠NimaActor͸ѻ͑Δɻ͸ͣɻɻɻ ઌఔͷαϯϓϧͰ͸࣮ࡍʹTransformΛ࢖༻ͯ͠NimaActorͷॖখΛ͠ ͍ͯΔ͠ɺGestureDetectorͰϥοϓ͢Δ͜ͱͰΫϦοΫΠϕϯτ΋औ ಘͰ͖ͨɻ

  27. Impressions ͪΐͬͱͨ͠ΞχϝʔγϣϯΛ࡞࣮ͬͯ૷͢Δʹ͸ָɻࣗྗͰ࣮૷͢ Δʹͯ͠΋RenderObjectWidgetͷαϒΫϥεୡΛ࢖͏࣮૷ʹͳΔؾ ͕͢ΔͷͰ޻਺Λߟ͑Δͱ࢖ͬͯଛ͸ͳ͍ ͍͏ͯwidgetͰ͢ ࠓճ͸ૉࡐͷ౎߹΋͋ΓImageSequencesͰ࣮૷͕ͨ͠ɺ࣮ࡍʹ࢖༻ ͢Δ৔߹͸PSDϑΝΠϧͰΞχϝʔγϣϯΛ࡞੒ͨ͠΄͏༰ྔ࡟ݮͷ ؍఺͔Β͸ྑͦ͞͏ NIMAͷτϥΠΞϧظ͕ؒ7೔ؒͳͷͰݕূɾ࣮૷͔ΒεϥΠυ࡞੒ͷ ؒʹτϥΠΞϧظ͕ؒऴྃͯ͠εΫγϣͱΕͳ͘ͳͬͯࠔͬͨ

    ݒ೦ ୭͕Ξχϝʔγϣϯ࡞ΔͶΜ໰୊͸͋Γͦ͏ ෳ਺ղ૾౓΁ͷରԠ→export࣌ʹը૾αΠζࢦఆͰ͖Δ͔ΒରԠͰ͖ ͦ͏͔ͳʢը࣭͸Ͳ͏ͳΔ͔
  28. thank you.