Topic: UFE and 2D sprites

Here's a writeup on how I use 2D sprites in UFE. Hopefully this can help get you started.

Tools used:
They're probably all optional; just posting what I used.

Anima2D - I use this for the bone structure. Probably not even necessary but it's free and helps visually so whatever.
Sprite Illuminator - I use this to create normal maps for our sprites. We're using digitized actors so helps them look less flat.
Texture Packer - Works with Sprite Illuminator and packs everything into spritesheets and materials. Also has a Unity import plugin.
Double Sided shader - I have one that came with a weather plugin, but looks like there's some free ones on the Asset Store. I don't use this since we don't mirror sprites in our game but generally that's how it's done so you'll want to grab this.


1. Start the prefab
Create an empty object and give it your character name. The UFE prefabs are set to -2, 0, 0 postion and 0, 90, 0 rotation, so go with that.
Create a child object and name it 'Render'. Add the Sprite Renderer component to it. Drag your first idle sprite into the Sprite section. You'll want to align the bottom of your character with the grid line at y=0. You can always adjust this during animation, but if your sprites all line up the same you won't have to.
Step01

2. Create the bones
If you have Anima2D, right click on your main object, 2d, and select Bone. Drag the handle point of the new object up to your characters chest, and rename it Torso. Keep in mind the hitboxes are spawned at at the handle point; you can ignore the other end, it's really just there to help you visualize the bone structure. If you don't have Anima, you can just create empty objects and place them where you want, but having the bones to grab during animation is pretty handy.

Keep right clicking and adding bones, positioning them wherever you want hitboxes. The obvious ones are the chest and head, and for the rest I tend to place them in the middle of each body part. You'll see here I have them in the middle of the bicep, forearm, thigh, shin, and then directly on the hands and feet. You can fix the parenting of the bones in case they don't link the way you want. Rename each one appropriately so you can find it later on.

Keep in mind, the UFE charactes are massive in size. You may want to scale up your prefab/render accordingly, otherwise they'll look tiny against UFE characters.
Step02

3. Add the Hitboxes script to your main object, create your character file, and assign the hitboxes like you normally would. At this point, you can load your character into the game but we don't have any animations yet.
Step03

4. Animate
Create an animation for your character. In the Animation window, Add Property, Sprite Renderer, scroll all the way to the bottom and select Sprite. Drag all of your sprites into the timeline and make sure it animates properly. Once your animation plays how you want, make sure the record button is enabled and start lining up your hitboxes according to the animation. Move the highest hitbox in the hierarchy first, otherwise you'll be constantly fixing the lower level boxes. You can try to use the interpolation to your advantage, but I've had some weird results in the past so be prepared to animate each frame if necessary. If you're using materials, you can add them on the first frame; it's called Material Reference under Sprite Renderer.
Step04

5. Go for it
This should be enough to get you started. Blending is not your friend with 2d sprites, so make sure it's always set to 0 or off. Adjust your material settings properly to get the best lighting. It's been a while since I set all this up, so may have forgotten something. Any questions just ask and I'll try to help. Good luck.
Step05

Share

Thumbs up +5 Thumbs down

Re: UFE and 2D sprites

Is Dark Presence your game?

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

kokakee wrote:

Is Dark Presence your game?

It's technically Doc's game but I work on it.

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

Hopefully a gameplay video will be available soon

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

kokakee wrote:

Hopefully a gameplay video will be available soon

We had it at the arcade a while ago and streamed it. I don't think the archive got saved, though hmm

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

completely lost cant actually use the animations

Eternal Rift Studios
    Current Projects:
         Destined Soels
Always happy to help when possible. If its something pretty minor ill just help you out. But i do commissions as well. Hit me up if you need a commission.

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

xFTLxKingPhoenix wrote:

completely lost cant actually use the animations

If you can be a little more specific I will do what I can to help you out. Didn't really want to make a vid but I could if I have to.

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

welll I made the sprite sheet.

I'm bascially on #4 how do you make the animation

Eternal Rift Studios
    Current Projects:
         Destined Soels
Always happy to help when possible. If its something pretty minor ill just help you out. But i do commissions as well. Hit me up if you need a commission.

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

xFTLxKingPhoenix wrote:

welll I made the sprite sheet.

I'm bascially on #4 how do you make the animation

OK, when I get back to a computer I'll work on something a little more detailed.

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

Let me know if this doesn't answer your question.

1. Create an animation file, drag it to your prefab, and in the Animation window click the dropdown and choose your animation (or it'll already be selected if you haven't done this yet).
01

2. Click Add Property, twirl down Render, Sprite Renderer, all the way at the bottom hit the plus sign next to Sprite.
02

3. Select all of the sprites in your spritesheet for this particular animation and drag them into the Render:Sprite section of your animation. Delete the last keyframe and adjust your Samples to an appropriate number (hit the Play button on the Animator and adjust until it looks right; we use 30 but we have a ton of frames).
03

4. If you have a material, add it using Render, Sprite Renderer, Material Reference, and drag the material to the first frame of your animation like you did with the sprites.
04

5. Your animation works now in the game, you just need to animate the hitboxes. Make sure you hit the record button, and on each frame of animation adjust the hitboxes to match your character.

Share

Thumbs up +1 Thumbs down

Re: UFE and 2D sprites

xFTLxKingPhoenix wrote:

welll I made the sprite sheet.

I'm bascially on #4 how do you make the animation

Did the second writeup help you, or are you still stuck?

Share

Thumbs up +1 Thumbs down

Re: UFE and 2D sprites

soonk wrote:
xFTLxKingPhoenix wrote:

welll I made the sprite sheet.

I'm bascially on #4 how do you make the animation

Did the second writeup help you, or are you still stuck?

I'm curious if we can do this easily for 3D models... I'd like it if the animation file controlled the size and offset of the hitboxes. Is that possible?

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

I tested this with the included UFE characters. Under each bone I created an Empty Object and assigned the hitboxes to that instead of the actual bone. I then went back to an included animation and moved that object around. This way, the animation looks the same but your hitbox is moving around the screen where you like. Worked in game, so should work just fine for you. As for the animation file controlling the size of the hitbox, I don't know. UFE usually handles that in the character config or the active frame section for the attacks, and haven't messed with them outside of that. Could try scaling the object and see how that goes.

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

Hi, wink.I'm doing a 2d Fighting game with UFE by following this tutorial and because when I click "Play", hit boxes disappear and preview animation is no longer accessible. I do not understand :'(

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

Could be a ufe update or something else I'm not really sure.  I'll take a look in the next couple days.

Share

Thumbs up Thumbs down

16 (edited by 0massimo0 2018-05-20 08:06:12)

Re: UFE and 2D sprites

Meanwhile I upload this image to make me understand better smile
Error during test game is "NullReferenceException: Object reference not set to an instance of an object
http://i66.tinypic.com/2j1poat.png

soonk wrote:

Could be a ufe update or something else I'm not really sure.  I'll take a look in the next couple days.

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

That could be so many things, and I don't really have the time to play guess that bug, but I would love to help. If you pack up your project and PM me a link to download it, I will be more than happy to take a look.

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

Stickied this post so other users can see easily.

Good work smile

Share

Thumbs up +2 Thumbs down

19

Re: UFE and 2D sprites

Hello, thank you for this.

I've got everything working, but now I am at a loss for how to get the sprites mirroring. I know you mentioned a double sided shader, but how exactly would I use it?

Share

Thumbs up Thumbs down

20

Re: UFE and 2D sprites

I got it. In ForceMirror()

There is a check for legacy animations to flip the scale, but not for mecanim. So you have to add the scale flip code to the other check and it seems to work just fine so far.

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

What software did you make the 2D sprite examples with?

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

Hi, I'm sorry to relive this post, I'd like to know how you did to put shadow on a 2d sprite. I was able to do what you did there, but I could not place that shadow.

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

soonk wrote:

Here's a writeup on how I use 2D sprites in UFE. Hopefully this can help get you started.

Tools used:
They're probably all optional; just posting what I used.

Anima2D - I use this for the bone structure. Probably not even necessary but it's free and helps visually so whatever.
Sprite Illuminator - I use this to create normal maps for our sprites. We're using digitized actors so helps them look less flat.
Texture Packer - Works with Sprite Illuminator and packs everything into spritesheets and materials. Also has a Unity import plugin.
Double Sided shader - I have one that came with a weather plugin, but looks like there's some free ones on the Asset Store. I don't use this since we don't mirror sprites in our game but generally that's how it's done so you'll want to grab this.


1. Start the prefab
Create an empty object and give it your character name. The UFE prefabs are set to -2, 0, 0 postion and 0, 90, 0 rotation, so go with that.
Create a child object and name it 'Render'. Add the Sprite Renderer component to it. Drag your first idle sprite into the Sprite section. You'll want to align the bottom of your character with the grid line at y=0. You can always adjust this during animation, but if your sprites all line up the same you won't have to.
Step01

2. Create the bones
If you have Anima2D, right click on your main object, 2d, and select Bone. Drag the handle point of the new object up to your characters chest, and rename it Torso. Keep in mind the hitboxes are spawned at at the handle point; you can ignore the other end, it's really just there to help you visualize the bone structure. If you don't have Anima, you can just create empty objects and place them where you want, but having the bones to grab during animation is pretty handy.

Keep right clicking and adding bones, positioning them wherever you want hitboxes. The obvious ones are the chest and head, and for the rest I tend to place them in the middle of each body part. You'll see here I have them in the middle of the bicep, forearm, thigh, shin, and then directly on the hands and feet. You can fix the parenting of the bones in case they don't link the way you want. Rename each one appropriately so you can find it later on.

Keep in mind, the UFE charactes are massive in size. You may want to scale up your prefab/render accordingly, otherwise they'll look tiny against UFE characters.
Step02

3. Add the Hitboxes script to your main object, create your character file, and assign the hitboxes like you normally would. At this point, you can load your character into the game but we don't have any animations yet.
Step03

4. Animate
Create an animation for your character. In the Animation window, Add Property, Sprite Renderer, scroll all the way to the bottom and select Sprite. Drag all of your sprites into the timeline and make sure it animates properly. Once your animation plays how you want, make sure the record button is enabled and start lining up your hitboxes according to the animation. Move the highest hitbox in the hierarchy first, otherwise you'll be constantly fixing the lower level boxes. You can try to use the interpolation to your advantage, but I've had some weird results in the past so be prepared to animate each frame if necessary. If you're using materials, you can add them on the first frame; it's called Material Reference under Sprite Renderer.
Step04

5. Go for it
This should be enough to get you started. Blending is not your friend with 2d sprites, so make sure it's always set to 0 or off. Adjust your material settings properly to get the best lighting. It's been a while since I set all this up, so may have forgotten something. Any questions just ask and I'll try to help. Good luck.
Step05


Very informative. Please check PM, thanks smile

Share

Thumbs up Thumbs down

Re: UFE and 2D sprites

camtheman wrote:

What software did you make the 2D sprite examples with?

Well, it was filmed, green screened in premier I think, touched up in photoshop, and sprite sheets were created with texturepacker.

mizael86 wrote:

Hi, I'm sorry to relive this post, I'd like to know how you did to put shadow on a 2d sprite. I was able to do what you did there, but I could not place that shadow.

Hm, not sure what I did differently. I think they just work from the directional light in my scene

Sorry for the late replies. Not on here too often these days.

Share

Thumbs up +1 Thumbs down

Re: UFE and 2D sprites

Remake The Post please, it would help everyone like me struggle with the animation

Share

Thumbs up Thumbs down