— TLDR;

Built a card VFX studio in Godot4, code is available on Gitlab [0]*, here's how it looks.

* links at the bottom

Video quality goes up to 1080p but may be set to lower by default, please adjust this setting using the player's "gear" menu.

Sleeves will react when pressed or clicked, however sleeve #3 is also rigged to how far the trigger is pressed.

— This studio

… was originally built as a tool to design 3D card sleeves - inspired by the recent KS campaign of Cyberpunk TCG [1] and the mobile game Pokemon TCG Pocket [2].

The project supports both controller and kb/mouse, features a multi-cam scene, solo shot scene, as well as some UI to adjust colors, fx, motion and camera at runtime.

Motion is created using a mix of signals and tweens written in GDscript. Parallax layers, masks and overlays were created with Figma and Krita, however materials (gold, carbon..) were downloaded from FreePBR [3].

— LAB 1

The very first iteration had me exploring different materials for the sleeve's front and back surfaces. While doing so, I added camera, stage controls, then card FX onto a separate 2D UI layer which appears in the viewport at runtime.
At this point, the rotating stage and camera were rigged to the UI, and the sleeves rigged to my controller - I was able to compose basic key frames for future animations from this template.

Not highlighted in this video, but the UI allows sub-decimal tuning of rotation speed, bounce and angle with the xbox directional and joystick inputs.

— LAB 2

This second iteration focuses on animating the parameters isolated in the previous scene. I was looking for a snappy-yet-fluid sort of motion, and was satisfied with card 2 and 3 here, which we can see in the first video of this page. The original idea was to open and close the sleeve's cover to allow gameplay interactions such as disabling a visual effect which could hinder readability, when a player hovers or picks up a card.

Powder-coated metal is good at filling surfaces, whereas scratched gold coating is better with highlights.

— LAB 3

The third iteration puts everything together to create unique digital sleeves which can easily fit and mix any background, art, surface, overlay, masks, navigation, text and state. Sleeves now move as a collection in the 3D world: left, right, back and forth, in ordered and parallel sequences of tweened properties and methods applied on the 3D Mesh instances.

The code for tweening this collection actually fits on one page - if you'll excuse the one-line "for" loops - and is roughly the same for both sides: push or pull all cards at once and move them in sequence, all that using a fixed distance unit.
This specific implementation also pushes/pulls cards further according to their index in the collection - which means large collections will eventually have cards moving past the camera or the background and disappear.

— LAB 4

This lab puts some colliders, signals, and 3d GPU particles together to create a fun FX playground. These effects can be used to accentuate a peculiar in-game effect or interaction with the card, its overlay or content - but for now, explosions will do.

It also features a hollow ring set-up with lights sources which will follow the cursor's altitude in real-time, and slowly rotate on itself to create a medical atmosphere.

— Research & misc

This Figma board was the starting point of the whole project, it mostly contains reference material - product package shots for scale, a few illustrations from the KS campaign and other social medias for artistic reference, and a few vector overlays I exported for vfx holo layers.

Zooming-in on the HUD and overlays, I reworked a few layout details to improve readability.

In the top-right corner, I replaced the small circled digits by a gauge - which makes it easier to read from afar.

Border art with variations.

Camera swap sequenced with AnimationPlayer and triggered by pressing the shoulder buttons on the game controller.

Thank you for reading!

— Links

[0] https://gitlab.com/DrDyne/gd-card-lab
[1] https://www.kickstarter.com/projects/cyberpunktcg/the-official-cyberpunk-trading-card-game
[2] https://youtu.be/2rNXBt4go_g?si=5nKQX2PmgnJuxapQ
[3] https://freepbr.com/product/scuffed-gold-pbr-metal-material/

[ ] https://kenney.nl/assets
[ ] https://nojoule.itch.io/energy-shield