CAOS 2015 Summer: Introducing Hayabusa

Transcript

1. 2015 SUMMER #caos2015

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

3. Data Binding Fastest Design Flow ImageHayabusa

4. Designer Developer

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

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

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

8. Advantages

9. Advantages Working becomes easier

10. None

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

12. Input files /images/image.psd

13. Output REST API

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

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

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

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

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

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

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/

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

    CRN.GZ

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

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

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

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

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

27. Distributing • Amazon CloudFront / Akamai / Others • HTTP/SPDY/HTTP

    2.0 support • As middleware • As Mac App, As Local Server

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

    / Android static assets

29. File generation time • Convert with the 1st request •

    After the 1st request, cache it

30. CSS Output Info • Layer Mask • Clipping Mask •

    Layer Mask • Gradients • Layer Comp • Adjustment Layer • Linked & Smart Objects • Alpha Channel Mask

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

32. http://hayabusa.io ImageHayabusa