Introducing onion skinning for the Godot game engine

You may already know about the great open source Godot game engine. I've been contributing to it since two years ago or so. Today I'm writing here to announce a feature I developed for the upcoming 3.0 version, and of which I'm pretty proud of: onion skinning.

So what's onion skinning?

It's a technique used in animation from its early days consisting in the ability to draw frames of animation on a semitransparent paper (onion paper) so you can see the previous frame through it. That provides the artist with a good reference to base his new drawing in.

Of course, this concept once brought to computers gets much more flexible: arbitrary number of see-through layers, ability to see the past and/or the future, etc. Every decent software package with an animation editor features it nowadays. And some people was requesting it for Godot.

This picture from the Adobe Animate CC documentation [CC-NC-SA] is fairly telling about the concept:

How it looks like in Godot?

This images are from the pull request I made and based on the main character from the 3D platformer example. (By the way, this works for both 2D & 3D.)

With the default past/present colors (that you can change in the editor settings), seeing one frame to the past and to the future.

Scroll to item-of-interest in Angular

Imagine you have a list of elements of some kind (by means of *ngFor). You'd like to make that Component aware of the fragment in the URL so it can scroll to the element identified by it.

For instance, you let the user create a new element in a form in one page and you want that on return, the list scrolls automatically to the item just added. You are using Angular routing facilities.

For more background, you can check the discussion on the issue on the Angular project.

There, some users have provided their approaches. On the basis of some solutions suggested there, I've built my own and it seems to work fine:

[...]

private fragment: string;

constructor(private route: ActivatedRoute { }

ngOnInit() {
this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
}

ngAfterViewChecked(): void {
try {
document.querySelector('#' + this.fragment).scrollIntoView();
} catch (e) { }
}

[...]

I think this adds very little bloat and it handles these situations:

• No fragment present in the route.
• Fragment present but invalid (querySelector() throws).
• Fragment present and valid, but the element is not present.

Actually, the try block is masking these situations rather than handling them. Nevertheless, usually you won't find yourself needing to do anything about them.

Fail: LinkedIn internationalization

Let's let LinkedIn open my public collection of technologic fails!

It looks as they had missed the translation to Spanish of a string during an update and what we are seeing is its key.

By the way, a few minutes later it rendered properly:

A 'shooting' fail. Maybe I should make a wish…

Self-containment challenge in Angular

I didn't plan on writing too much about web development here, but for the past months I've been learning modern web frameworks/techonologies and I've found something worthy writing about regarding Angular.

In Angular, as in other well designed framework you are expected to separate concerns as much as possible. For instance, Components should be as reusable as possible. One feature for such reusability is self-containment. That is, while sometimes you need their host component to interact with them beyond their APIs (Inputs, Outputs, etc.), you need to move in a slightly lower layer for things like adding/removing CSS classes. But you can take measures so everything is under control.

Nonetheless, you can see yourself in trouble with the markup. Due to the rigidity of HTML, certain elements must be direct children of their 'semantic ancestors' if you don't want the browser to make a mess out of your markup. For instance, a <tr> must be a direct child of a <table>, or at least of a <thead>, <tbody> or <tfoot> —among a few others that don't alleviate the issue—. The same holds for lists; for instance an <ul> must contain <li>s.

Let's look at the problem with a concrete example.

Visual Studio 2017 high contrast hack

Visual Studio 2017, as it happens with earlier versions, forces its high contrast theme if Windows is under a high contrast theme as well. Microsoft seems not to be interested in fixing it so people have to use certain registry hacks to use Visual Studio's dark theme. Before the 2017 release, settings were right in the registry and you could do the hack by hand more or less easily.

A first problem with that is that under some circumstances (for instance, after updates) the theme setting switches back to high contrast and you have to re-apply the hack. Another problem is that from the 2017 release the registry settings have been moved to a hive file so you have first to load it into the global registry, do the hack and unload it again.

Given this situation, I've leveraged my old-fashioned batch scripting abilities to write a little program that does it automatically for Visual Studio 2017. It makes a backup of the key containing the high contrast theme to a new key with .backup appended to its name and copies the dark theme key recursively over that of the high contrast one. It first checks if the backup is already present to avoid overwriting it with the already-tampered data.

As another great feature, this program applies the hack on every installation of Visual Studio 2017 present in the system.

You can get the script from its GitHub repository.

As you may guess, you are using it at your own risk. Of course, let me know if you have any problems with it and I'll try to help.

Credits to Chris Shrigley for his post on this.

Talk about Godot in Paris

The video of my talk about the Godot Game Engine is just published!

It's called Node Nuggets and you can enjoy it (or not) here:

Maybe you've come here precisely from there so this is nothing new for you. Please keep tuned for fresh content!

Warming up

I'm still setting things up to start blogging about what you and me care about: Godot game engine, C++, game design, etc.

Please let me take a few more days before posting some actual content.

Thank you for coming here!