Welcome back to the second sneak peek into our adventures with xenko. Together with MLF we've been busy patching the first project done entirely with vl and xenko: Ocean of Air. So far the combination works superbé, and you can experience that for yourself until the 20th of January, if you are in the London area. Alongside the project we explored the xenko code base and now that it's live, we can give you some more insights into our research.

In the last blog post we used predefined entities to set up a little scene graph. This time we will dig a little bit deeper.

Having primitive objects like Box, Sphere, Plane etc. is nice for casual patching and quickly visualizing something. But you will need more sophisticated objects for the final output of your project. What you want to do is designing your own objects that are specific to your use case.

Luckily, game engines have quite similar requirements and came up with a good solution, and they call it entity/component/system, short ECS, which is also the latest hype in Unity. Xenko has a good documentation page if you want to go into detail. But for now let's stay on topic and keep two things in mind:

• Entities are the nodes in the scene graph
• Components are the features/properties of an entity

We found two appealing ways to create custom entities that can also be combined with each other in any way that suits you. You can either patch them or design them in xenko's game studio using their prefab workflow. Here is a simple example for both cases:

1. Patching Entities

Let's look inside the BoxEntity from the last blog post:

As you can see, it adds a BoxComponent to the entity on Create (white) and exposes parameters like Color, Transformation, Enabled etc. as input pins on Update (gray). This is more or less an arbitrary choice of how the BoxEntity is designed and it will probably change a bit before it becomes official. The patch is also an example of how vl's process nodes work nicely together with the entity component model. Each instance of an entity or a component can be represented by a process node and connected with each other in an understandable way.

In the patch we saw the EmptyEntity node, which is a general entity object that contains nothing more than a TransformComponent, hence the transform input pin. To make something useful with it, we add more components (e.g. model, material, audio, physics etc.) to it. There are many of them and you can combine them as it suits your use case. The big advantage here is, that the components are able to interact with each other via the common parent entity and that the scene graph system automatically processes them in an optimized way. This is where it gets interesting!

Let's say we want the box from the patch above to emit a sound from its current position. In order to do that we only have to add a SpatialAudioComponent to the same entity as the box component:

Since the SpatialAudioComponent and the BoxComponent have a common parent entity they will share the same transformation. Also, if an entity has child entities, the children get transformed by the parent. We could use that feature to add an AxisEntity to our custom entity:

Again, there is no need to connect the input transformation to the AxisEntity since it gets added as a child to the main entity and gets transformed automatically.
Here is what a little scene could look like:

Let's add a second one and let them rotate in the scene to hear the spatial audio effect. Aaaaaand action! (works best with headphones):

2. Prefabs

There is also a super easy way to design custom entities in xenko's game studio and use them in your patch. Suppose we have a 3d model with animation and skinning imported and edited in game studio. All we have to do now is to create a prefab from it and give it a meaningful name:

Learn more about xenko's prefab workflow here. Once we have that it's as simple as this to use it in your scene:

Ridiculous!
And finally we will start the walk animation:

Starting the animation is also patched in this case, but let's save that one for another post.

Conclusion

The entity component model of xenko works very well together with vl's process node feature. VL's automatic recompile and instant stateful hot reload allows to dynamically combine and configure entities and the scene graph in real-time while the application is running. You can combine different workflows with each other, simple primitives, custom patched entities or imported prefabs. There is no right or wrong, just build up the scene in a way that suits your way of thinking and the requirements of your project.

We still have only scratched the surface here, there is much more to come.

Yours,
devvvvs

previously on vvvv: vvvvhat happened in October 2018

dezember!

one week to go for the opening of We live in an Ocean of Air which you normally wouldn't have to care about but in this special case, how this connects to you through this blogpost is, that this is the first fully vl + Xenko project we've helped to realized. if you're in london between December 7th and January 20th, go see it, it is good, promised! if not, let's hope that everything goes well, because then the thing should go on tour and maybe come a bit closer to you.. here is a little teaser:

but that is not all:

• we also found time to prepare this update for vl's 2d drawing library Skia.
• and if you're into history, checkout our newly built roadmap.

next up: we're going to evaluate where we are with vl-standalone and xenko after this above mentioned project and we should have an update for you by the end of this year. and everybody yayy.

Jobs

looking for a job at where it all once started? here are two opportunities athttp://meso.design

• Senior vvvv developer for media software
• Senior vvvv patcher for creative coding and design

Contributions

one new: Opticalflow3d by timpernagel
one updated: VAudio by tonfilm

several works in progress announced:

a tease:
kinect-pipet-direct-mode depth-pipet

and something in chinese:
watch

Gallery

and remember you can always find much more fancy new stuff appearing on vimeo and sadly even here.

that was it for november. anything to add? please do so in the comments!

Hello,

welcome the first update to our beloved 2D graphics library.
Since this summer's release quite a few things have happened.
The main focus was on covering every single aspect of the Skia's Paint (defines how everything looks like when rendered) and cleaning it up.
We would say it is now complete.

We've also introduced some special gems like Masks, Precompositions, Ellipsis and some more examples.

Never heard of Skia before? Check Skia on Wikipedia.

Read on.

Masking

You already were able to clip layers by rectangles or paths (ClipRect, ClipPath), now you can use any layer as a mask (as you know it from Photoshop), be it an image or very complicated layer pipeline. Welcome the Mask. It comes in two flavors: one uses a layer as a mask, another one just an image. The node has useful helpers which allow you to see how the mask looks like and where it is applied.

Precomposing

While researching for the masks we've stumbled upon Skia's superpower: we call it precomposing. Layers can be precomposed (leaving canvas unchanged) and then applied (grouped) with other layers. It's like having an extra render pass that works like a layer.

So now you've got two options: you can blur every single particle alone (by setting SetMaskFilter > Blur) or prepare all of them (precompose) and then blur the whole scene at once (by setting SetImageFilter > Blur).

In the screeshot above:
Left - every single circle is blurred alone, the background comes into play.
Right - the whole precomposition is blurred.

Ellipsis

Then we have these boring Ellipsis nod... nodes. They clip your text (left, right or center) by the number of letters or the width in units. Like this:

Paint completeness & cleanup

We've cleaned up the Paint a lot and now you can set or get any of its properties. Don't forget to turn on the "Advanced" filter of the NodeBrowser (like in the screenshot or just press TAB-key) to get the full power. SetFakeBoldText anyone?

In the Paint category:

• Processnodes (having an icon with two dots) are for setting properties (they start with Set)
• nodes with an empty box are for getting properties
• Processnodes without Set (like Stroke, Fill or FontAndParagraph) are convenient nodes setting several properties at once.

Examples and Demos

Don't forget to check the /examples folder of the package (your-vvvv-folder/lib/packs/VL.Skia.xxxx/).
There are also some updates to the /examples/demos, like the Slideshow.vl which let's you click through your-very-big-images asynchronously preloading them in the background.

Some more features:

• ImageEncoder
• ImageWriter
• SubpixelText property is on by default
• Pipet (Experimental)

How to Install

1. Install the latest vvvv_50beta38.1 (older versions are not supported)
2. In vvvv, middleclick > Show VL
3. In VL, go to: Dependencies > Manage Nugets > Commandline and type:

Versions

• This latest version works best with beta38.1.
• Using beta38 or older? make sure to install an older skia version. Type 'nuget install VL.Skia -version 0.93.26-g6c67991fa4' to get a compatible version. You'll miss some of the advertised features though.

Surprise!

Another release just out of the gray only 2.5 months after the previous. How come?

The last beta37 release proofed to be quite stable, hardly any too concerning bug reports, but we have a breaking change to introduce and think this is a good moment. Hear us out:

If you're a vvvv-only user, you're safe. This release only has minor changes compared to beta37, so there shouldn't be any reason for you not to upgrade. Horray!

If you're also using VL, we're afraid, but swallow this:

Since there are hardly any other changes, we recommend you also switch as soon as possible and never look back...

So why the breaking change?

It's about how values get stored in IO boxes and pins. They now use the same serialization technique we already introduced as a node set for beta37. This means that we can store any data inside patches for which a serializer is registered - be it a spread of values, a dictionary or even a custom record:

And as a second example a dictionary from string to value

It might not look as much yet but it is a first step to get proper IO boxes back.

So apart from that another worth mentioning improvement is a new short cut called Ctrl+K which creates pins for the selected pads and puts them on the Create and Split operations of the containing patch

All other changes can be found the as usual in the Changelog.

Yours,
devvvvs.