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
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:
    • iOS (including simulator)
    • Android (including simulator)
    • Linux (main distributions)

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
  • Focus on Quality & Performance

The Brains Behind Skia4Delphi

sk06-9811271
  • 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
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
  • 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
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

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

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