CAOS 2015 Summer: Introducing Hayabusa

Hayabusa
http://hayabusa.io

Transcript

1. 2015 SUMMER
   #caos2015
   

   View Slide

2. Günther Brunner
   @gunta85
   Hayabusa
   2015 SUMMER
   #caos2015
   Morino Kohei
   @kohei_april20
   

   View Slide

3. Data Binding
   Fastest Design Flow
   ImageHayabusa
   

   View Slide

4. Designer Developer
   

   View Slide

5. Current Workflow
   New Workflow
   PSD
   AI
   Designer Developer
   Export
   PNG? JPG?
   Frontend
   ImageAlpha?
   ImageOptim?
   Grunt?
   WebP?
   SpriteSheet?
   SVN
   image320.jpg
   PSD
   AI
   Hayabusa
   /image.jpg?w=320
   or
   

   View Slide

6. Current Workflow
   New Workflow
   PSD
   AI
   Export
   PNG? JPG?
   Frontend
   ImageAlpha?
   ImageOptim?
   Grunt?
   WebP?
   SpriteSheet?
   SVN
   image320.jpg
   PSD
   AI
   Hayabusa
   /image.jpg?w=320
   or
   10 min
   10 ~ 30 min
   1 hour ~ 1 day
   Designer Developer
   

   View Slide

7. Advantages
   • Workflow becomes much faster
   • Uses the most suitable format in any platform
   • Creates the best size for any device
   • Checking design is instantly
   

   View Slide

8. Advantages
   

   View Slide

9. Advantages Working becomes easier
   

   View Slide

10. View Slide

11. Input files
    PSD, AI, PNG
    /images/image.psd
    

    View Slide

12. Input files
    /images/image.psd
    

    View Slide

13. Output REST API
    

    View Slide

14. JPEG - Resize Width
    /images/image.jpg?w=480
    

    View Slide

15. PNG32 - Retina / ImageOptim
    /images/image.w480.x2.png
    

    View Slide

16. PNG 7 bit - ImageAlpha
    /images/image.png?colors=128
    PSD
    

    View Slide

17. JPEG - Black & white
    /images/image.jpg?grayscale=true
    PSD
    

    View Slide

18. PNG - Blur
    /images/image.png?blur=10
    

    View Slide

19. WebP - Android / iOS Native
    /images/image.webp
    PSD WEBP
    

    View Slide

20. Formats for Web (Picture Quality)
    BPG (HEVC) > H.264 I-Frame >
    WebP > JPEG 2000 > JPEG XR > JPEG
    http://xooyoozoo.github.io/yolo-octo-bugfixes/
    

    View Slide

21. GPU Texture Formats
    ASTC
    ETC
    PVRTC
    PVRTC.GZ
    DXT5
    DDS
    CRN
    CRN.GZ
    

    View Slide

22. ETC - Android / WebGL
    /images/image.etc
    

    View Slide

23. PVRTC - Unity / Cocos2D / iOS
    /images/image.pvr?format=rgba4444
    

    View Slide

24. PVR GZIP - iOS Native
    /images/image.pvr.gz
    

    View Slide

25. Sprite Sheet / Atlas Auto Generation
    {
    images: [
    image1: "image1.png",
    image2: "image2.psd",
    image3: "image3.jpg",
    image4: "image4.png",
    image5: "image5.png?w=200",
    ],
    max: {
    w: 2048,
    h: 2048
    }
    }
    Input /images/sprite.json
    Output /images/sprite.sheet.jpg
    /images/sprite.sheet.json
    PSD
    

    View Slide

26. JPEG - PSD Layer Export
    /images/image.jpg?layer=Name
    

    View Slide

27. Distributing
    • Amazon CloudFront / Akamai / Others
    • HTTP/SPDY/HTTP 2.0 support
    • As middleware
    • As Mac App, As Local Server
    

    View Slide

28. As Local Server
    /assets/image.w480.x2.png
    • Unity’s asset bundle
    • iOS / Android static assets
    

    View Slide

29. File generation time
    • Convert with the 1st request
    • After the 1st request, cache it
    

    View Slide

30. CSS Output Info
    • Layer Mask
    • Clipping Mask
    • Layer Mask
    • Gradients
    • Layer Comp
    • Adjustment Layer
    • Linked & Smart Objects
    • Alpha Channel Mask
    

    View Slide

31. CSS Output
    /images/image.css?layer=name
    .name {
    font-family: "Source Sans Pro";
    color: rgba(69, 69, 69, 0.7);
    font-size: 36px;
    font-weight: 700;
    line-height: 36px;
    width: 253px;
    height: 69px;
    }
    

    View Slide

32. http://hayabusa.io
    ImageHayabusa
    

    View Slide