Skia is a modern and fast 2d rendering library. As usual, we stand upon the shoulders of giants when making this functionality available to you: the core Skia technology and the .Net binding “SkiaSharp”. The VL.Skia package aims to make all of this functionality available within VL in an easy-to-use high-level node set.

You now can have the first glimpse on it. From the start, it comes with a nice stack of tutorials and example patches. This package is done for vvvvbeta37.

Here is a rough overview of what the key concepts are:

Layers and Renderers

Just like known from vvvv the main idea is that layers can be grouped and can be connected to a renderer to draw them. Most Layers come with a Boundspin input OR Positionpin and Sizepin and Anchorpin.

We offer different renderers:

• Renderer: this one comes with a window
• Renderer (OffScreen): outputs an image that can be drawn with DrawImage or converted to an IImage via ToImage. Here is what you can do with an IImage.
• SVGWriter, PDFWriter: they take a Layerpin and write an SVG or PDF file to disk

---

Paint

Every layer comes with a Paintpin input. It describes how to draw the layer. This is very comparable to the render states in DX9/DX11.

You can stack the Paint-modifying nodes. Nodes like SetColor would take everything from the incoming paint and only adjust the color.

---

Shaders, Filters, and PathEffects are all properties of Paint. 1000 words wouldn’t be enough to describe what you can do with them. You probably just need to play with them a bit.

---

Text

Text nodes are also just Layers. You can think of them as text boxes.

Within that rectangular region you now can adjust horizontal and vertical alignment. This is done via properties of Paint. The FontAndParagraph node allows to conveniently adjust several text related paint properties in one go.

(See the examples\3_Text for how to do word wrapping etc.)

---

Transforms

Layers can be transformed. This allows you to patch a Camera. You would then connect your scene to the Camera and the camera to the renderer.

---

Spaces

We designed the library in a way that it works for different scenarios. Sometimes you would like to think in a normalized space, like known from DX9/DX11. In other scenarios, you want to think pixel- or device-independent-pixel-based. You can choose the space on the renderer. But you can also combine spaces: With the WithinCommonSpace node you can adjust the space for everything upstream. By that, you could have a game that adjusts its content depending on the size of the renderer and still draw some text top-left with a constant text size no matter how big the renderer is. (See examples\1_Basics\08_Spaces-Overview for more details)

---

Interaction

Layers in Skia can be interactive. The main idea here is: “What you see is what you want to interact with”. So if the layer is interactive, connecting it to the renderer in one way or the other means that it will be drawn AND that you can interact with it. (See examples\5_Interaction)

---

How to install

In order to use this library with VL, you have to install the NuGet that is available via nuget.org. For information on how to use NuGets with VL, see Managing NuGets in the VL documentation. In short, navigate via document menu to Dependencies -> Manage NuGets -> Commandline and then type:

As long as we don’t have an example browser here is how to get them via windows explorer:Drag & drop an example patch onto vvvv or VL. For closing the example use the X on the renderer or hit Ctrl-F4 on the VL patch.

Happy exploring!

Yours, Devvvvs