Possibility to put animated sprite as material for box(mesh)

Questions
1

I’m new in BabylonJS community so first i want to say hello all, nice to e-meet you :slight_smile:

I’m started playing with BabylonJS couple days ago as my company is gonna switch from 2d games to mix 2d+3d and we would like to use BabylonJS in our future projects:) However, as Babylon is focued on 3d i faced a problem how to display sprite animations combined with 3d elements.

So let’s say i have box, i move this box from point A to B and once movement is done i would like to display animation on once of the face of box. What’s the best way to achive it?

I think that would be nice to have such possiblity in material, for example:

cont material = new StandardMaterial(“animatedMat”, scene);
const textures = [
Texture.fromFrame(“url_to_texturePacker_atlas.json”,“frame_name_1”),
Texture.fromFrame(“url_to_texturePacker_atlas.json”, “frame_name_2”),
Texture.fromFrame(“url_to_texturePacker_atlas.json”, “frame_name_3”)
];
material.animatedSprite = new AnimatedSprite(textures)
myBox.material = material;
material.animatedSprite.play();

Or maybe there is other way/solution how to achive it in 3d? I’m fairly new in 3d concepts(worked only with 2d before) so if i misunderstand something do not hesitate to tell me :slight_smile:

2

Hi,
Welcome to this forum.

The best way to get help is to put your code in a PlayGround (PG) https://playground.babylonjs.com/
so we could understand better how it looks for now and what you want to achieve : is the problem the fact to display the texture only on one box face ? or to trigger the animation at some moment ? or to correctly animate the sprite ? or all at once ?

3

Hey, problem is that i wondering how to display animation based on sprites on box’s faces.

https://playground.babylonjs.com/#UYKBWI

In general i’m wondering how to combine 2d and 3d. Thought that this is the way but maybe i’m wrong?

4

Hello,@jerome did you have chance to look at PG i’ve posted? If something is still unclear i can explain it asap

5

Ping @Deltakosh as I am pretty sure I have seen this somewhere but can not remember where… too old :wink:

6

I can’t remember either but I know there’s an already PG showing your need somewhere.
That said, how to apply a texture on a single face is explained here : Apply Material to Individual Faces - Babylon.js Documentation

7

Hey, thanks for response, hope @Deltakosh would remember :slight_smile:

Let me give more background on what i want to achive cause maybe there is a better way. So, in my game I have 2 layers, first one is pure 2D and consists of some elements - to simplify let’s assume that they are cells with some witdth, height and image on it. Cells move based on user action and after each movement static images animates(i wanted to use sprite animation here). I figured that i can use box/plane mesh(cause i can use animation engine, transfrom node, etc) with StandarMaterial during movement. But no idea how to play sprite animations later ;/

8

A sprite is a plane so it should be all good and maybe you could also rely directly on babylon GUI for that ?

About sprite on box, I guess either you do six planes :wink: you could even merge five of them or you would have to manually play with u/vScale and u/vOffset to animate them on the box.

9

This PG may help https://www.babylonjs-playground.com/#1V3CAT#171

It is from this topic in the old forum Animated texture quesion - Questions & Answers - HTML5 Game Devs Forum

Unfortunately the links of @nasimiasl in other PGs and related topic no longer work

10

Inspired but poste above and GitHub - fenomas/babylon-atlas: A texture atlas manager for Babylon.js i’m started working on some solution but i have 2 questions:

  1. if code below and updating vertices won’t affect performance?
  2. how to handle situation when sprite is trimmed on atlas?

EDIT: i’ve changed approach a bit and create SpriteMaterial and update only texture, but still have problems with trimmed sprites

setFrame(frameName:string){

    const json = this._json as any;
    const frameData = json.frames[frameName]
    const tex = this._texture;
    //set mesh UVs
    var sw = json.meta.size.w;
    var sh = json.meta.size.h;
    var x = frameData.frame.x / sw;
    var y = frameData.frame.y / sh;
    var w = frameData.frame.w / sw;
    var h = frameData.frame.h / sh;

    tex.uScale = w / sw
    tex.vScale = h / sh
    tex.uOffset = x / sw
    tex.vOffset = (sh - y - h) / sh
}