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? You’ve come to the right place.
Table of Contents
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:
- Direct access to hardware
- Separate code for each platform
- Better user experience at the cost of developer productivity
- Mostly shared code
- Detached from hardware
- Better developer productivity at the cost of user experience
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.
- All the most popular platforms in the world, such as:
- iOS (including simulator)
- Android (including simulator)
- Linux (main distributions)
The Brains Behind Skia4Delphi
Skia for Delphi
- ECONOMY – Open-source project, completely free
- EASY TO USE – Easy to install, simple code
- 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
Drawing quality is improved, in some scenarios, significantly
- 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
Lottie is a JSON based animation format.
|dev_coding.tgs||tgs (zipped json)||55,834||–|
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
FOLLOW THE PROJECT
- More Samples
- For Mac platform, when
GlobalUseMetalis true together with
GlobalUseSkia, the performance with classic FMX is similar.
- On iOS there is no shared link (shared libraries: dll, .so, .dylib), only static (in this case .a). In this .a (equivalent to .lib on Windows), it has all the obj files generated, however, despite having 60 MB, the size of the resulting app is much smaller, because it is only compiled together with the functions used. In other words, it is common for static libraries to be larger than shared libraries, but the resulting output is much smaller, and is no more than the normal size that a shared library would be.