CAOS 2015 Summer: Introducing Hayabusa

Hayabusa
http://hayabusa.io

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