Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!
DelphiNewsWebinar

Supercharge Your User Interface with Skia4Delphi – Webinar Replay

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? You’ve come to the right place.

Here are a few shorter videos or you can watch 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
    • Better user experience at the cost of developer productivity
  • Web/Cloud
    • Mostly shared code
    • Detached from hardware
    • Better developer productivity at the cost of user experience
sk01-4322124

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

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.
sk03-6219443

Skia Platforms:

  • All the most popular platforms in the world, such as:
    • Windows
    • macOS
    • iOS (including simulator)
    • Android (including simulator)
    • Linux (main distributions)
    • FuschiaOS
    • Tizen
    • tvOS
    • watchOS

Skia Features

sk05v-6468229
iconnnn-7604419

About Skia4Delphi

  • OpenSource
    • Uses a modified fork of Google’s Skia
  • Cross-Platform & Multi-Framework
  • 2D graphics library for Delphi
  • Drawing
    • Text
    • Animations
    • Images
  • Focus on Quality & Performance

The Brains Behind Skia4Delphi

sk06-9811271

Skia for Delphi

  • ECONOMY – Open-source project, completely free
  • EASY TO USE – Easy to install, simple code
sk07-8057418

Compatibility

  • Delphi 11+: All platforms
  • Delphi 10.3+: Windows & Android
  • Delphi XE7+: Windows

Available via

Skia4Delphi Library

  • The library conceptually exists in 3 parts:
    1. Skia API (Console, VCL, FMX)
      • Access to the pure Google Skia library, through a single unit: Skia.pas
    2. 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
    3. 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
sk08-6568482

App Rendering Benchm

sk09-9846875
sk10-1524992

Architecture

  • 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

PlatformLibrarySize
Win32sk4d.dll18 mb
Win64sk4d.dll18 mb
Androidlibsk4d.so19 mb
Android64libsk4d.so24 mb
iOSDevice64sk4d.a60 mb
Ubuntu64libsk4d.so22 mb
RedHat64libsk4d.so22 mb
OSX64sk4d.dylib20 mb
OSXARM64sk4d.dylib19 mb
Sizes based on v3.4.0 for 11.1 Alexandria

Render Quality

sk13-2916659
Aliased vs. Anti-aliased

Drawing quality is improved, in some scenarios, significantly

iconnnn-9733932

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

sk01-2434964

Why Vector Formats?

  • Much smaller file sizes
  • Infinitely resizable and scalable
  • Smoother animations
  • Easier editing and customization

Why Vector Graphics?

sk02-3368680

SVG Source is XML (Which easily compress via Zip)

sk03-3074924

PNG and JPEG are Binary (Already compressed)

sk04-5467807
  • 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

sk05-9265466
sk06b-7005265
sk07-7735103

Vector Animations?

Lottie is a JSON based animation format.

NameTypeSizeRelative
dev_coding.tgstgs (zipped json)55,834
dev_coding.mp4mpeg4 (lossy)373,6427x
dev_coding.jsonlottie (json)583,48510x
dev_coding.gifgif (lossless)5,020,25990x

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.
sk08-5574565
sk09-9714613
  • 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 Links

Notes

  1. For Mac platform, when GlobalUseMetal is true together with GlobalUseSkia, the performance with classic FMX is similar.
  2. 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.

Next, learn about the advantages of implementing Developer Mode Chromebook and how you can perform the steps on your device in this article.


What's Coming in Delphi, C++Builder, and RAD Studio 11.2 Alexandria

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

About author

Chief Developer Advocate for Embarcadero Technologies.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES