Supercharge Your User Interface with Skia4Delphi
What do Google Chrome, Mozilla Firefox, Chrome OS, Android, Flutter, and Delphi all have in common? They have accelerated graphics thanks to Skia. This high-performance, cross-platform 2D graphics library is taking the development world by storm. It works with VCL and FireMonkey on every platform Delphi supports. One line of code can make your existing FireMonkey applications faster, or take it further and unlock new features for breathtaking user interfaces.
Skia4Delphi is an open source project by Spirit of Delphi Award winners and brothers, Paulo César Botelho Barbosa & Vinícius Felipe Botelho Barbosa. So how do you use Skia4Delphi and take your application development to the next level? Register now and join Jim McKeeth and Ian Barker in this webinar to find out!
Come back after the webinar for details on the contest, more links, and the replay.
Here are a few shorter videos while we work on getting the full replay.
What is Skia, You Want to Ask?
Imagine you are a software developer who needs to reach all the major platforms today. Your traditional choices are:
- Native
- Direct access to hardware
- Separate code for each platform
- Web/Cloud
- Mostly shared code
- Detached from hardware
But Now We Have… FireMonkey
- Native Compiled – direct access to the platform hardware
- Multi-Platform – one code base for all platforms
- Component Based Visual Designer – maximize developer productivity
How Does Skia Fit in Here? Introducing… Google Skia
- Google Skia is the open source graphics engine for Google Chrome, Android, Flutter, Xamarin, Firefox, and many others.
- It provides common 2D APIs that work on a variety of platforms, abstracting complexities in implementing low-level libraries it uses behind it, such as Vulkan, DirectX, Metal and others, implementing many optimizations and new features.
Skia Platforms:
- All the most popular platforms in the world, such as:
- iOS (including simulator)
- Android (including simulator)
- Linux (main distributions)
Skia Features
About Skia4Delphi
- OpenSource
- Uses a modified fork of Google’s Skia
- Cross-Platform & Multi-Framework
- 2D graphics library for Delphi
- Drawing
- Focus on Quality & Performance
The Brains Behind Skia4Delphi
- Two brothers from Brazil
- 2021 Spirit of Delphi Winners
- Paulo César Botelho Barbosa
- Vinícius Felipe Botelho Barbosa
- With the encouragement and suggestions of Ian and Jim
Skia for Delphi
- ECONOMY – Open-source project, completely free
- EASY TO USE – Easy to install, simple code
Compatibility
- Delphi 11+: All platforms
- Delphi 10.3+: Windows & Android
- Delphi XE7+: Windows
Available via…
Skia4Delphi Library
- The library conceptually exists in 3 parts:
- Skia API (Console, VCL, FMX)
- Access to the pure Google Skia library, through a single unit: Skia.pas
- Controls (VCL, FMX)
- TSkAnimatedImage: Play Lottie, Telegram stickers, animated GIF and animated WebP
- TSkLabel: Multiple styles in text, font weight, justify alignment, limit max lines, background color on parts of the text, auto size width and height, advanced decorations and more
- TSkPaintBox: use OnDraw event to draw with Skia API directly on control
- TSkSvg: load icons svgs, change colors and wrap mode
- App rendering (FMX)
- Optional feature that when enabled, the FMX graphics engine will be replaced by Skia4Delphi’s graphics engine, that is, the entire app, all the controls on the screen, will be painted internally by the Skia-based canvas.
- That is, by adding just 1 line of code to enable it, your entire app will automatically:
- Improve the quality of drawings; smoothing of jagged edges
- Gain up to 50% increase in graphics performance
- Increase drawing fidelity
- Adds support for right-to-left languages
- FMX Canvas
- Skia API (Console, VCL, FMX)
App Rendering Benchm
- Uses custom version of Skia library
- You can view and modify the source yourself
- Deployed via Deployment Manager
- Just right click “Enable Skia” to add to deployment manager.
- Native libraries for all platforms
- OSXARM64, Win32, Win64, Android, Android64, iOSDevice64, Linux64, and OSX64
- Delphi Components and Libraries
- The components installed on Tool Palette for VCL and FMX, with the library added to the search path
Redistributables
Platform | Library | Size |
---|---|---|
Win32 | sk4d.dll | 18 mb |
Win64 | sk4d.dll | 18 mb |
Android | libsk4d.so | 19 mb |
Android64 | libsk4d.so | 24 mb |
iOSDevice64 | sk4d.a | 60 mb |
Ubuntu64 | libsk4d.so | 22 mb |
RedHat64 | libsk4d.so | 22 mb |
OSX64 | sk4d.dylib | 20 mb |
OSXARM64 | sk4d.dylib | 19 mb |
Render Quality
Drawing quality is improved, in some scenarios, significantly
SVG Benefits
- Resolution independent and scalable
- Styling (can easily change color)
- Much smaller file
- For icons, always prefer SVG over static images like PNG
- Thousands of free icons and images available on web
Lottie Animation Benefits
- Resolution independent and scalable vector format
- Lightweight, 600% smaller when compared to GIF
- Extraordinary performance with smooth animation
- Thousands of free Lottie (JSON) animations available on web
Why Vector Formats?
- Much smaller file sizes
- Infinitely resizable and scalable
- Smoother animations
- Easier editing and customization
Why Vector Graphics?
SVG Source is XML (Which easily compress via Zip)
PNG and JPEG are Binary (Already compressed)
- Both JPEG & PNG are raster/bitmap image formats
- PNG is lossless, with 100% accurate reproduction of the image
- JPEG is lossy, losing some image fidelity each time it is edited or compressed
Image File Size Comparisons
Vector Animations?
Lottie is a JSON based animation format.
Name | Type | Size | Relative |
---|---|---|---|
dev_coding.tgs | tgs (zipped json) | 55,834 | – |
dev_coding.mp4 | mpeg4 (lossy) | 373,642 | 7x |
dev_coding.json | lottie (json) | 583,485 | 10x |
dev_coding.gif | gif (lossless) | 5,020,259 | 90x |
User Interface Design
- SVG & Lottie make it easy for designer to create smooth and high resolution user interface templates. Then with Skia4Delphi you can make the UI match perfectly.
- Make motion part of your UI/UX
- Other uses:
- About screens, splash screens, installers, user onboarding, wizards, etc.
- Build a project with Skia4Delphi + Delphi 11
- Make a beautiful application with VCL or FMX
- Post it on GitHub
- Include video & screenshots, and then share it on social media.
- Win Prizes and Acclaim
- Grand Prize is an Apple M1 Mac Mini so you can take advantage of the great new support for Apple Silicon in Delphi 11 Alexandria
More details to come: blogs.embarcadero.com/?p=140459