VS Model Creator Basics

[Balduranne]

Done by request, please note that I'll only be covering functions I'm familiar with (Ie, no animation).

For the moment, the model creator only allows working with cubes, which you can create by clicking the Red/Green/Blue icon below the selection window

.

Once you have something selected, you can get to the modeling proper - Voxel Size determines the shape and size of the object, Position moves it around the grid, while Origin is from where the model is supposed to 'start' from. This mostly comes into play when rotating the object

When adding more cubes, it's important to keep in mind what you have selected - In this case, Cube2 is docked under Cube1, so if we move the latter, Cube2 will end up moving along with Cube1. Cube 3 in this example is sitting on its own, and is unaffected by the other two.

After a little fiddling, we have our model. In this case it's a candle holder with a candle. Once we have it, we can slap some textures on.

Let's look at this interface - Textures are assigned separately for each side of the model, which we need to apply manually. We can speed it up by clicking Copy and then Paste for every side. If a side is not going to be visible ingame, you can unclick "Enabled", which will make that side invisible.

But first we need to click Image and import a texture we want to use. To make life easier, you can set the default texture path to take textures from. This is useful if you're going to use vanilla textures. Once a texture is imported - Click on it and select Apply. Please note that if your texture is outside of the game folder when Imported, you will need to tweak the model's shape (.json) file to reflect its location for the game. You will have to do this most of the time.

If we want to fine tune our UV Mapping (Aka how the texture is lined up on the model), we can use the Face UV controls to change the shape of the face. In this case, we stretch it out so that all the rivets are visible. One should also drag and move around the individual faces in the leftmost menu for best effect. 

Once we're satisfied with the effect, you can save the model and use it in your mod

Very often you'll want to duplicate an element and move it around to speed up the modelling process. It's less time consuming than making a fresh object and moving it in the correct place and shape.

I'm sure very often you'll find yourself just applying the same texture to the entire object. This is where the Entity Texturing Mode comes into play. 

Once clicked, the entire model will be assigned one texture. It's handy, but we still need to tweak it by hand. While the mode is on, you can only move an entire object around in the UV map editor (Left), that's hardly ideal in some cases. That's why we want to disable the Entity Texturing Mode (Don't worry, the texture will stay on), and go back to the Face menu and manually move the texture around.

This is especially important in cases where we want to use a single texture for a model, as is the case with my Loom model, or the NPC models (Including the player one).

Furthermore, if you're using one texture, you can tweak the texture size for larger objects.

Another useful trick is exporting the UV map of your model. Once you have it unwrapped (That is, spread around your texture sheet), you can export the UV map to make a proper texture for it, or in the case of the player model - Make your own skin for it.

That should about cover the basics. One important thing to keep in mind is that one block is 16x16x16 (The size of the grid) in the editor.

Model Editor controls, for reference - They're in the Help submenu.

It really helps to memorize those. It takes me longer to model because I keep forgetting about these

 

Once you have the hang of it, you can use Render Passes. In laymans terms, they determine how a block will behave visually (Think - Glass, Ice, etc). Here's an explanation of the different modes.

 

Edited May 10, 2018 by Balduranne

[Balduranne]

And now, an animation tutorial from Luke: (The example bunny model is attached at the end of the post for download)

Okay, so here’s some basic info on the animation editor and animation in general.

Here’s a premade model for us to work with, since it’s easier than starting from scratch. 

After loading it in, go ahead and click the “Keyframe” tab to open up the animator.

So now what are we looking at? It’s not that different from the model creator. Animation can be thought of as time + position.  So we have our time values on the left, and our positional values on the right. 
We’ll start with the right, because it’s very similar to the model creator. So at the top right you have the hierarchy (or object selector). As you already know, you click on the various objects here to choose which one you want to edit. 

Next below the hierarchy we have the object editor. This is what we use to adjust position or rotation, just like in the model creator. The only difference is that by default these values are turned off. I’ll explain this later, but for now just know that this is where you manipulate the shapes. And also Stretch doesn’t do anything. Sorry.

Now for the left side, we have at the top left the Animation Selector. This is where you pick which animation to work on. It’s also where you make new animations.

Below that is the Timeline. You use this to fast forward, rewind, pause, etc.. Basically like a remote control for your TV. 

And finally we have the Keyframe Editor. Okay, so this is where I have to get a little technical to explain what keyframes are.. Bear with me. 

 So every animation is made up of frames. These are still images that, when the animation is playing, we view one after the other in quick succession. When the frames succeed each other fast enough (usually measured as Frame Rate or Frames per Second), it creates the illusion of motion. This is the basis of all cinema and animation.

So what is a Key Frame?? These are basically the important frames that are used as a reference for the other frames. You can also think of them as the beginning and end of a given motion. The idea is, you make these particular frames look nice and detailed, and then the rest of the frames don’t have to be as detailed because they work as transitions (or inbetweens) for the keyframes. This way, you only have to work on 4 frames instead of 30, for example. If that doesn’t make sense, don’t worry about the theory. It should be clear at least in practice soon enough.
 

Okay! Now that that’s out of the way, let’s actually animate something. Mouse over to the Animation Selector in the top left and click the +- looking button right next to the drop down menu. 
This will open up your List of Animations. From here, we’re going to make a new one by pressing the giant New button at the bottom. Let’s call it “Jump”. Those are the values on the side are your animation settings. Code is the information that VS looks for. Generally, you probably want to make it the same as the animation name, except lowercase. “On Activity stopped” refers to what happens after the object in game stops their action. For example, when a sheep stops running, you can tell it to stop its animation immediately, ease out of the animation in a transition, complete the animation despite no longer running, or play the animation backward. You’ll figure out which one to use for each situation, but for now we don’t need to worry about it.
“On Animation ended” refers to the animation itself instead of the object it’s attached to. So this would mean when you’ve played through all the frames. You can set it to loop, hold on the last frame, or just stop (so that it only plays the animation once). Again, we don’t need it worry about this right now, but it’s good to know. We can close out of this menu now, after making sure you have your new “Jump” animation selected.

Okaay, so now we have a fresh animation to work on. Let’s make it jump. The timeline should be set to 0, and you shouldn’t have any keyframes in sight. Now we make some keyframes. To start with, select “Body” in the hierarchy, and activate Position. It will automatically set to 0, 0, 0. Which is good, because we want this to be the starting point. This also automatically creates a keyframe for “Body” at frame #0. 

Next, go to the timeline and drag the scrollbar to 15 (which is frame #15).

Once you’ve done that, activate Position again for “Body” so that the editor knows to make a keyframe here as well. Now let’s change the Y value to 4. You’ll notice the model going up in the display.

Now if hit the Play button on the timeline, you can watch your work in action. It should look like this:

You’ve managed to make the Body move up and down, but now it’s time to add some rotation. Let’s give its legs some motion. It’s a pretty similar process, so you should be able to just follow along with this image:

 

And that’s the gist of it. Now, you can use the animation selector in the top left to view the “Run” animation. It’s basically what our rabbit would look like if we kept working on it. You can look around this animation to get an idea for how to utilize position, rotation, and keyframes. I hope this has been helpful!

 

 

Rabbt.json

Edited May 16, 2018 by Balduranne

[Balduranne]

Reserved; Let me know if I missed anything important.

Edited May 10, 2018 by Balduranne

[redram]

Maybe mention that you can't change the order of the blocks in the list, or change their parent/child relationship.  So it's worthwhile to consider that organization carefully so you get it right the first time.

[Stroam]

rendering options

http://apidocs.vintagestory.at/api/Vintagestory.API.Client.EnumChunkRenderPass.html

@redram It can be done outside of the program in a text editor.

Edited May 10, 2018 by Stroam

[Balduranne]

I added an animation tutorial written by Luke

[Luk]

Okay, so by request, I've typed out some more tutorial information for animation. This will be an intermediate level tutorial done mostly in the form of techniques and ideas to keep in mind when animating. In particular, we'll be working with a WIP walk cycle for Balduranne's panther model. Here's the file if you want to follow along:  male(Original).json

Okay, so we’re working on a walk cycle. For this example, let’s focus on quadruped walking. Also, if you see any weird stuttering in the gifs, that's a result of recording them, not the animation itself. (Edit: gifs aren't working. Need a tutorial on how to use the internet.)

Here's the original walk cycle: 

 

Step 1: Keyframes

When making a walk animation, I’d suggest starting with two keyframes.

More generally speaking: when making an animation, I’d suggest starting with keyframes that show the extremes of motion. For a walk cycle, this is the moment when the animal reaches its front foot to step forward and the moment when the animal pushes its hind foot off the ground behind it. So a reach and a push. And this happens with both legs. Now, I know what you’re thinking, “That sounds like four keyframes instead of two”. Well, you’re right, but that’s harder to do at the beginning.

For now, I’d say synchronize the reach and push to be at the same time and then make one keyframe for the right legs and one for the left legs. That might be a little confusing. What I’m saying is, make one keyframe where the left front leg and left hind leg are reaching forward, and then make another keyframe where the right front leg and the right hind leg are reaching forward.

Result of changes:

 

Step 2: Frame Distances

Now, look at how jerky the motion is. Walk cycles don’t have to be perfectly smooth, but the very nature of walking is generally stable and repetitive. If your keyframes are too far apart from each other, the animation will have slow moments and fast moments. This can be good later on (particularly if you want a limping cycle), but for now we want stability. Stability also helps us see what else we can do to improve the animation, since jerkiness can be harder to read.

So generally what I do is, I’ll place one keyframe at frame #0, and then the other keyframe at the middle of the animation. So since this animation has 35 frames total, I’ll put it at frame #17. This ensures that the frames are an even distance from each other, which gives us ideal stability. You don’t have to use #0 and #17 if you don’t want to. So long as the keyframes are equidistant from each other, you can place them anywhere and it will work fine, but using the beginning and middle of the animation just makes it a lot simpler and cleaner, if you ask me.

Result:

 

Step 3: Patterns

Okay, this can be tricky because a lot of animals will vary their walking patterns depending on their speed. Some of them have like eight different patterns.

In this particular case, the panther is actually made with the wrong pattern for this speed.

Notice how the legs are paired diagonally (meaning the right front leg and the left hind leg have the same motion)? This is a trot, and it’s something they tend to do more when they’re sneaking as opposed to walking.

Their walking pattern is actually more of a pace (I think it’s a stepping pace, if we’re being specific), where their legs are paired laterally, meaning the right front leg and the right hind leg have the same motion.

Look up horse or dog gaits for a better understanding of walk/run patterns. It makes it a lot easier. They even include how many feet are touching the ground at one time. Apparently equestrian people love this stuff, idk.

https://en.wikipedia.org/wiki/Horse_gait

Result: 

 

Step 4: Body Connections

 

Acting out animations is probably the best thing you can do. Take note of how your body moves. It moves A LOT. If you don’t know how an animal moves, just watch footage of it.

If you get stuck and you’re not sure how to improve it, consider the principles of animation: https://en.wikipedia.org/wiki/12_basic_principles_of_animation

As is mentioned in the article, squash and stretch are very important. Even though the ah, stretch tool doesn’t work in the editor, you can still simulate stretch through rotation and positioning.

 

Consider the panther: When he’s reaching his front left paw forward, what do you think his shoulder is doing?

Spoiler

It’s pushing the arm forward, right? To do that, the torso itself is rotating towards the arm. Specifically, it’s rotating down and to the left, and this can be conveyed through all three axes.

 

Try reaching forward with your own arm and watch how your torso rotates. It probably does the same thing as the panther.

A helpful mindset is to think that every piece of the animal is connected. If you move one, it should invariably affect the rest of the pieces. Oftentimes the causality isn’t that simple, but maybe that’s getting too complicated.

 

Consider the panther again: You can follow along with this video to see what I’m talking about: https://www.youtube.com/watch?v=gThIDTb9k6w

 

I’ll break down the motions and connections step by step:

- Starting the motion from the rear, the panther contracts its right hind leg, pushes into the ground, and uses that force to propel itself forward.

- This causes the right hind leg to extend as the body is pushed forward.

- The panther’s hips are attached to the right hind leg, so they’re pulled towards that leg. Pulled down and to the right.

- Now we have the left hind leg, which is attached to the hips. Since the hips are rotating down and to the right, the left hind leg is now lifted up and to the right. This places it closer to the center of the body, so it acts as a vertical pillar to hold the panther’s weight after it finishes its right hind leg push.

- Okay, now what else is attached to the hips? The torso. Since the lower half of the body is reaching down and to the right, the torso has to counterbalance or the panther will fall over. So the torso rotates up and to the left.

- The front left arm, having been pushed forward by the rotating torso, is now in a perfect position to reach forward for another step.

- The front right arm has been pulled back into a central position like the left hind leg. It also acts as a pillar to hold the panther’s weight while the front left arm is reaching.

- What else is connected to the torso? The neck. As the torso rotates, it pushes and pulls the neck with it. Pull to the right, push to the left. Since the panther wants to look straight ahead, the neck has to compensate for the torso, so it rotates in the opposing direction.

- This keeps the head fairly stable, but it will compensate a bit depending on how much the torso affects the neck. The direction it rotates in is generally just towards the front.

- B-but what about the ears and the tail?? Eh, they’re kind of autonomous. Sometimes they don’t rotate at all, sometimes they do. You’ll have to experiment to see what you like. Generally, I’ll animate them to show emotion, as a lot of animals will use them when attacking or fleeing.

Ah, text is a poor medium for this.

 

A good understanding of newtonian physics is also very useful here in that it can help you determine where to simulate force (every action has an equal and opposite reaction) and that can translate into a sense of weightiness in the animation. Yeah, anatomy and physics are super useful. Also music.

Results: ( I was going to do a core body rotation gif first, but I messed it up and didn’t notice until after, so RIP)

 

Okay, that’s looking better. The body movements are still a little awkward, but it’s good enough for now. Sometimes you just have to look at it again the next day to see what needs fixing.

 

Step 5: Adding Keyframes

Okay, remember what I said at the beginning about how this walk cycle should actually have at least 4 keyframes? The panther’s legs may move laterally, but they don’t move simultaneously. When the right front leg is reaching into the air, the right hind leg is already touching the ground to support it. They’re on the same rhythm, but not the same beat, if that makes sense. Ah, I can’t remember the proper musical term.

So what we want to do is, add more keyframes so that each leg can touch the ground at its own pace, creating a more natural walk for the panther. You might want to look around for more information about the Stepping Pace to figure out exactly how the feet are supposed to act.

If you don’t want to do that, here’s a summary:

Spoiler

It walks in a 1-2—3-4 pattern, with a larger gap between 2 and 3. And it usually has three feet down and one foot in the air at any given time. The hind legs always land before the front legs, so we can say the pattern is hind-front—hind-front. And just to make that more visual, let’s just say it’s Right Hind-Right Front—Left Hind-Left Front.  

Implementing this might be a little complicated if you’ve never tried it before. It’s kind of done by adding keyframes just for one leg, duplicating the original values for the leg’s rotation and position, and then removing their original keyframe. The idea is just that you’re transposing the whole animation cycle for one leg onto a different part of the rhythm. And also making sure the leg appears to stay in place on the ground when it’s not being lifted. Definitely make sure you have a backup file saved at this point, if you’re not used to it. Alright uhhh this is getting a little too complicated to explain well.. Maybe I'll end it on this lesson and continue it later.

Results:

 

Ah, it’s fun working with more anatomically realistic models. And more work lol. So maybe it’s just me, but I feel like after this step it really started to come together. Notice how fluid the movements are?

I only did the left side because A) it’ll hopefully make it easier to see what I did with the keyframes, and B) it’s late.

So that’s about it for today. I can explain more if anyone has any questions. I left out a lot of the technical steps in favor of the abstract, because I feel that's more easily applied to more animations. But if you want to know precisely how I did each step, just let me know. Here's the updated json file if you wanna look it over: male_2.json

[scary.]

Is there a seraph.json file I can use to create armors? I cant seem to open Json files from the games asset files in the VS model creator.

[redram]

1 hour ago, scary. said:

Is there a seraph.json file I can use to create armors? I cant seem to open Json files from the games asset files in the VS model creator.

First you want to make sure you're getting your file from the 'shapes' directory.  There's generally 3 files of a given name - one item/block/etctype, one shape file, and a texture or two.   It has to be under shapes.

The seraph shape file will be under the 'assets/game/shapes/entity/humanoid' directory (not assets/creative or assets/survival).   It will NOT be with the various animals and such, which are under survival.

Now, when making armor, you don't want to build it on the actual seraph model. You want the armor to have it's own file, and you will set the seraph model as your 'backdrop' (under the 'project' menu), which puts a sort of ghosted version in the file.  You can then make actual shapes, and 'stepparent' them to a shape from the seraph file.  This probably is not a great explanation, but I don't have time to go more in-depth right now.

 

[scary.]

On 2/29/2020 at 9:29 PM, redram said:

First you want to make sure you're getting your file from the 'shapes' directory.  There's generally 3 files of a given name - one item/block/etctype, one shape file, and a texture or two.   It has to be under shapes.

The seraph shape file will be under the 'assets/game/shapes/entity/humanoid' directory (not assets/creative or assets/survival).   It will NOT be with the various animals and such, which are under survival.

Now, when making armor, you don't want to build it on the actual seraph model. You want the armor to have it's own file, and you will set the seraph model as your 'backdrop' (under the 'project' menu), which puts a sort of ghosted version in the file.  You can then make actual shapes, and 'stepparent' them to a shape from the seraph file.  This probably is not a great explanation, but I don't have time to go more in-depth right now.

 

Thank you for this info and the quick response!

Edit: Is there a way to set a backdrop texture? just needed to edit in a quick question.

Edited March 2, 2020 by scary.

[redram]

6 hours ago, scary. said:

Edit: Is there a way to set a backdrop texture?

Currently no, unfortunately.  You'd have to replace the seraph texture in the game files, so it'll show up in the backdrop.  There is also unfortunately no way to test for clipping issues with the animations of the backdrop, which would also be useful.  VSMC will get an update at some point, so cross your fingers.

[l33tmaan]

I didn't see this mentioned in the tutorial, but how do frames correspond to in-game time? Is a 60 frame long animation equivalent to exactly 1 second? 

[Balduranne]

Just now, l33tmaan said:

I didn't see this mentioned in the tutorial, but how do frames correspond to in-game time? Is a 60 frame long animation equivalent to exactly 1 second? 

I'm not certain, actually. But the animation playback speed can be changed in the .json once you use the model for something so you don't have to worry about it too much.

[l33tmaan]

I'm trying to do something silly and have a basic animation play very slowly over 4 hours, so precision is needed.
I guess I can do some tests and report back for future lurkers.

[6nop6nop]

so i added  cubes to the seraph model, however when in game it causes the player model to spin instead of animating properly. none of the player model files seem to have any sort of keyframe animations, the entity file lists a bunch of things called element weights and i think it has something to with these, however its not intuitive and i can't seem to find any documentation for this. 

[6nop6nop]

12 hours ago, 6nop6nop said:

so i added  cubes to the seraph model, however when in game it causes the player model to spin instead of animating properly. none of the player model files seem to have any sort of keyframe animations, the entity file lists a bunch of things called element weights and i think it has something to with these, however its not intuitive and i can't seem to find any documentation for this. 

nvm i screwed up with seraph-faceless.json

[Minnigin]

we need info on attachment points, I must learn 

edit: like do I just line up the green spheres? I'm doing testing but going in blind is gonna make noticing things way more difficult 

edit 2 : K so I've linked them all together with what I wrote above, I have no clue if it'll do anything but it feels right, idk though lol

Edited February 8, 2022 by Minnigin