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

Skia Features

The Brains Behind Skia4Delphi

Skia for Delphi

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

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

App Rendering Benchm

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

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
  • lottiefiles.com
  • lordicon.com
  • useanimations.com
  • icons8.com/animated-icons
  • iconscout.com/free-lotties

Why Vector Graphics?

SVG Source is XML (Which easily compress via Zip)

PNG and JPEG are Binary (Already 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.

FOLLOW THE PROJECT

• github.com/skia4delphi/skia4delphi
• t.me/skia4delphi
• skia4delphi.org
• blogs.embarcadero.com/?p=140459

More Links

• Skia4Delphi – github.com/skia4delphi/skia4delphi
• Webinar – blogs.embarcadero.com/?p=140459

• Skia Documentation
  • skia.org/docs/
  • api.skia.org/

• More on Shaders
  • shaders.skia.org/
  • thebookofshaders.com/
  • blog.grijjy.com/2021/01/14/shader-programming/

• More Samples
  • github.com/jimmckeeth/SkiaSimpleShaderViewer
  • github.com/jimmckeeth/TelegramStickerBrowser
  • github.com/jimmckeeth/Lorenz_fmx
  • github.com/checkdigits/spacecomputer

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.