Modular sprite?

Questions
1

Hi there,

Modular sprite is a popular way to animate characters in 2.5D game.
Is there anyone that have implemented modular sprite in Babylon?

Also if someone knows a good authoring tool for modular sprite…

2

I think by modular you mean having sprites for characters, for weapons, for clothing, etc and combine them?

If so, I think you can simply display the character sprite, then the cloth, then the weapon at the same location. They will add up visually.

3

I mean a sort of bone animation, but for 2D sprites!

Example of game doing that:

It seems to be a very popular in 2.5D games and have a lot of advantages.

Instead of animating the sprite traditionally, you have one sprite for each body-part (in fact at least 2: the front and back of that body part)

It has tons of advantages :

  • It’s possible to customize every part of the body
  • For weapons and stuffs, only one or two images are required
  • It is possible to create a new animation that will be available for every characters at once (you do it once and it works for all for free)

It has all the advantage of 3D models, while keeping a 2D look-and-feel.

4

Thanks for the explanation.

So, we don’t have this support in Babylon.js, but if someone is willing to contribute, we will happily review any PR!

2 Likes
5

I would think that the main missing part would be a way to group the sprites in order to move/manage all of them together ?

6

Hi,

Sorry to dig up this subject, but it seems to me that the question has not been explored further.

I also consider this method interesting and was wondering if to handle this : “move/manage all of them together” in this way :
—> use TransformNodes to group sprites. Would this allow you to move, rotate or scale all the sprites of an avatar in a single operation ?

A bit like this:

const avatarGroup = new BABYLON.TransformNode("avatarGroup", scene);

const headSprite = new BABYLON.Sprite("head", spriteManager);
headSprite.parent = avatarGroup; 

const torsoSprite = new BABYLON.Sprite("torso", spriteManager);
torsoSprite.parent = avatarGroup;

const leftArmSprite = new BABYLON.Sprite("leftArm", spriteManager);
leftArmSprite.parent = avatarGroup;

const rightArmSprite = new BABYLON.Sprite("rightArm", spriteManager);
rightArmSprite.parent = avatarGroup;

headSprite.position.y = 1;
torsoSprite.position.y = 0;
leftArmSprite.position.x = -0.5;
rightArmSprite.position.x = 0.5;

Do you think this would work ? It’s just an idea at the moment. But I like the idea of ​​creating 2D avatars (by sprites) which give the illusion of 3D.
Why would this method not be supported by Babylon as sebavan says?

7

This is a start. But consider that there is two ways (*thereis probably more) to do it:

  • Classical: you layer sprite sheets on top of each other.

  • 2D skeletal animations. You use actual 2D bones over images. These bones deform the images.

You can use tools like Spriter which either produces sprite sheets or provides their own runtime in order to use the 2D skeletal animations.

Correct me if I am wrong but I do not see how you can use Babylon (3d) skeletal animations on (2d) images. You need to somehow translate how the change in your TransformNode changes the underlying image.

8

For my part, I don’t see the point of using bones with sprites to manage animations. The idea of ​​sprites to make an avatar is precisely not to use bones which are made to deform a 3d mesh, not an image.