I’m trying to create a graphic style similar to that of Ragnarok Online. I’m currently using Quads and BillboardControl with a texture of my character applied to the quad. My problem is that I’m going to want to do animations and have not been able to find much documentation about this. If anyone could recommend a good place to start, I would be grateful. Also does this seem like the most efficient way of doing something like this?
Example of Ragnarok’s graphics:
http://mmohuts.com/wp-content/gallery/ragnarok-online/ragnarok-online-outside-combat.jpg
For 2D animations, especially characters, I can recommend Anime Studio, the small version can export animations up to 2 minutes which should be by far enough to create animations for game avatars. You’d have to have images for each animation phase, probably best on a texture atlas where you can switch them (similar to the particle emitter). There is no such example code.
@normen said:
For 2D animations, especially characters, I can recommend Anime Studio, the small version can export animations up to 2 minutes which should be by far enough to create animations for game avatars. You'd have to have images for each animation phase, probably best on a texture atlas where you can switch them (similar to the particle emitter). There is no such example code.
Do you think this would be slow? I get the feeling the engine is not optimized for changing textures every frame. Just speculating though.
Not slower than any data transfer to the GPU really. As said you use a texture atlas, so you upload each “character” only once, or even multiple in one atlas.
I’m assuming this would be the best place to start looking: jmonkeyengine3-material-system-full-explanation.
Anything else I should know about? Thank you very much by the way.
Assuming your characters will not be very big, you could do a simple texture with all directions and animation frames and just update the texture coords of the quad. I don’t think that is very expensive as I guess you wont have 10000 characters animating on the screen at the same time? For example if your char images are 64x64 pixels you can do a texture with 4 frames animation in each direction in one 256x256 pixel texture, or a 512x512 texture with 4 extra frames of action per direction.
I think the main challenge in any game like that is actually drawing all the animations. 
Am I missing something? You’ve chosen a 3D engine, so you might as well work with 3D assets; you just have to apply the same art style. For starters there’s a toon shader you could play around with.
Depending on needs i would also keep texture arrays in mind, and then just set the wanted animation frame with a shader uniform. Like have a Texturearray for each character with all frames in it. This would also circumvent the usual bleeding problems with Textureatlas. Just take a look at the test case in the examples. (You need to rewrite the material a bit tho to allow you to set the wanted frame per uniform, but no worries, thats quite easy once you understand the concept.)
@erlend_sh said:
Am I missing something? You've chosen a 3D engine, so you might as well work with 3D assets; you just have to apply the same art style. For starters there's a toon shader you could play around with.
Because I have experience with pixel art and from what I've seen, without a lot of experience modelling it's always the character who is the weakest link. I want to create a 3d environment with billboarded characters. I like the effect, the image doesn't do it justice.
@EmpirePhoenix said:
Depending on needs i would also keep texture arrays in mind, and then just set the wanted animation frame with a shader uniform. Like have a Texturearray for each character with all frames in it. This would also circumvent the usual bleeding problems with Textureatlas. Just take a look at the test case in the examples. (You need to rewrite the material a bit tho to allow you to set the wanted frame per uniform, but no worries, thats quite easy once you understand the concept.)
I'll keep this in mind, but do you think bleeding would be a problem if the border around my character is transparent?
depends on distance, mipmapping with a classic texture atlas has some problems.
Also a texturearray is far easier to use actually. It’s just alike a normal texture and behaves 100% the same, except that you have a third tetxture coordinate that selects the wanted one.
Hello!
I was making something really similar to what you’re describing early this year. The only real difference was that I was trying to make it mainly a dungeon crawler with no outside sections. I was even using Ragnarok Sprites as placeholders for the longest time. Really, the biggest holdup and the thing that made me halt for a bit was that I wanted some real assets to work with since I wasn’t doing exactly the same thing as Ragnarok.
But yeah, you’ve got the idea. There might be better solutions now with the beta being out, but at the time I was using a shader that controlled texture coordinates for the sprite which was just a PNG image with all the frames. I even had a head and a body sprite working with the camera angles. You’re probably going to want to put some restraints on the camera itself though so that the player cannot rotate it but so high or so low, just to keep the effect of sprites on 3D terrain from looking too weird.
You’re going to want all the sprites (2 : Head/Body?) to be billboard-ed quads in the transparent bucket with some alpha settings most likely. To get the head sprite to appear over the body sprite, just move the head sprite in front of the body sprite a small amount (0.01 is fine, 0.1 is safer) to ensure there’s no plane clipping.
The two issues I never got around to figuring out that may or may not have happened to you yet:
If your sprites are tall, and there are walls/geometry in your map, the sprites might clip into the wall esp. at the head. It looks really awkward but it makes sense from a 3D graphics point of view. I was planning on figuring out a way to draw the sprites on top of the geometries in this case, but I stopped working on the whole thing before I got to this.
An extendable, versatile method of handling animations of sprites. I had a mocked one working, but it was really hell to keep it in line. I couldn’t seem to wrap my head around a system that could load, say an xml file, with animations for a specific sprite (which is just frame 1 = x:64 y:64 or some such with a frame duration). Perhaps you will think of a way, or already know a way to handle this that I hadn’t. In which case I would appreciate any insight into this 
It can totally be done though. What I was able to get working looked pretty neat, but I knew I could make it look better. I was planning on rebooting it soon but “Real-Life” ™ keeps getting in my way. That and learning how to make better sprites
Cheers!
~FlaH
I don’t have too much time to devote to this project but I’m doing what I can, if I come across any of the issues you mention I’ll post here. One issue I have and can’t seem to figure out is this:
I have it set up so that the orange cube is drawn at a CharacterNode, it represents where I want the center of my ‘sprite’ to be and rotate around but when I move the camera it rotates in a wide circle because the origin of the Character’s quad is on the left side. I’ve tried to counter this by setting the local translation but it doesn’t seem to be working. Using default camera, character is stationary. Any ideas?
Hello!
Oh that. Yeah, I remember that problem. Basically you just need a quad geometry that puts it’s origin at the midpoint of the bottom edge of the quad.
I wrote a silly quad class that was just a variant of the quad.java where you could specify the quad’s origin based on some presets. I’ll post it here when I get home if you want to take a look at it.
EDIT: Although, in the meantime, what you could do is attach the quad to a node with the node positioned at the bottom midpoint of the quad and attach the billboard control to the node… I think that would work… Can’t test it where I’m at though unfortunately :<
Cheers!
~FlaH
Node trick worked like a charm! Thanks, moving on to adjusting the frustum to prevent clipping up close.
Edit: Just one thing I found odd when editing the frustum is that the Field of View is still done using degrees, this seems strange since everything else I’ve encountered with angles has been done using radians.