What it does
Each function takes a progress value from 0 to 1 and returns numbers to write onto a sprite, a mesh or a page
element. glide gives a card's position on its way from one point to another, with a lift that is zero at each end
and peaks at the middle, and a tilt. flip gives the horizontal scale through zero at the halfway pinch and says when
the face changes, so a turn looks right with no 3D at all. flex says how far a 3D card should bow in flight, and
dropShadow gives a shadow's alpha, scale and offset at a height.
Dealing a whole table is where hand-rolled code usually looks wrong: cards leave the deck by cutting down through it,
or fly through each other in a shared corridor. The deal styles handle this. dealSchedule says when each card leaves
and lands, dealPose returns a card's full pose under a style (travel, arc, sideways bow, spin, flex, a hold at
deck height as it leaves, and a separate altitude for cards in the air together), and dealOrder gives the order to
deal a table of columns by rows or by columns.
Nothing here holds a clock. Your presenter drives the progress at whatever pace it likes, so a deal can be sped up, paused or skipped, and a test can check the final layout instantly.
Features
- Glides —
glidelifts a card on an arc of your height, with four easing curves fromeaseCard. - Flips —
flipnarrows the card to its edge and swaps the face at that moment. - Paper flex —
flexgives the bend for a 3D card's vertex deform. - Soft shadows —
dropShadowmakes a shadow fainter and wider as the card rises. - Nine deal styles —
arc,slide,flick,cascade,swirl,snap,pyramid,scatterandexplode. - Rally formations — cards can gather into a pyramid, a ring or a block before dropping into their seats.
- Schedules —
dealSchedule,dealProgress,dealDurationandflipAftertime each card's flight and turn. - Deterministic scatter — a style's per-card jitter comes from the card's index, so the same deal looks the same twice.
Good for
- Patience games, whose opening deal of a full layout is the first thing a player sees.
- Blackjack and poker tables, with cards slid across the felt and turned over.
- Card battlers and deck-builders, where cards fly from a deck to a hand and flip to reveal.
- 3D card tables, where flex and shadows make cards read as paper rather than tiles.
- Replays and tests, which can jump to any moment of a deal.
Make it yours
Pick a style by name, or write a DealStyleDef of your own with the same knobs: flight duration, stagger, arc height,
easing, spin, sideways sway, flex, the hold at deck height, the lanes that keep cards apart, the rally's gather, dwell
and shake, jitter, the landing ease and the formation.
Two very different deals: a casino slide, flat and fast across the felt with no lift, for a blackjack shoe; and an
explode, where the whole deck leaves as one slab, hangs there shuddering, then every card slams into its seat at
once, for the opening of a patience game.
A quick look
A staggered cascade deal of 28 cards, driven by the game's clock:
const slots = game.cardMotion.dealSchedule(28, 'cascade');
step(dt => {
clock += dt;
slots.forEach((slot, i) => {
const pose = game.cardMotion.glide(deckAt, seats[i], game.cardMotion.dealProgress(slot, clock), { arc: 40 });
sprites[i].x = pose.x; sprites[i].y = pose.y - pose.lift;
});
});Works with
cards— the deck and piles the cards come from.card-art— the faces and backs to put on the cards.tween— for the rest of a game's movement, where a clocked tween suits better than pose maths.
Good to know
- The poses are maths, not animation: you drive the progress and write the numbers onto your objects.
flexsays how much a card bends; the bend itself is the engine's vertex deform on a 3D card.- It knows nothing of the rules: which card goes where is your game's or a rules pack's decision.
