Flutter × 2dimensions

use NIMA of 2dimensions on Flutter

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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/
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

9. NIMA
   import Image Sequences
   

   View Slide

10. NIMA
    

    View Slide

11. NIMA
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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ʹ͸/*."Ͱ࡞੒ͨ͠Ξχϝʔγϣϯͷ໊લΛࢦఆ͢Δɻ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. NIMA
    OJNBQBDLBHFͷඳը࣮૷ʹ͍ͭͯ
    

    View Slide

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);
    …
    }
    

    View Slide

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ΦϒδΣΫτ࢖༻͍ͯ͠Δɻ
    

    View Slide

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
    

    View Slide

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;
    … //ඳըॲཧ
    }
    }
    

    View Slide

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

    View Slide

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

    View Slide

28. thank you.
    

    View Slide