I will be posting tutorials in this thread!
The most simple avatar can be created using only a single layer and two images.
Start by typing a name for your avatar in the “Layer Set” box. A Layer Set is the format in which your avatar is saved. Press the Save button to create your file. When the file exists, the “Save” button will change to say “Overwrite”, so you’ll know if you’ve already used that name before.
Now you can create a layer. You can use the pencil icon on its header bar to rename it however you like.
Now add an image for your idle sprite. This will be visible while you’re not talking. I’ll use the files in the Demo_Sprites package available as an optional download from itch.io. The idle sprite is called “static_idle.png”. First, click the “?” box, then select the file you want.
Next, add an image for your talking sprite. This one’s called “static_talk.png”.
While this is already a functional avatar, we can also add a “blink” sprite to give it a bit more life. That’s “static_blink.png”.
There are other options automatically enabled to give your character some motion. These are the “Bouncing” and “Breathing” options.
While idle, the Breathing option will move and scale your avatar to give the impression of breathing. You can click that header to show the options, and you can use the checkbox in the header to disable it.
While talking, the Bouncing option will move your sprites up and down. This can either be driven by the loudness of your voice, or a constant regular bouncing motion.
At the bottom of RahiTuber’s menu you will find the “Audio Input” section. Here you can select the microphone you want to use as input.
If you click the Audio Input title, some more options will become visible. You can use these to tweak the overall behaviour in response to your voice (below, you can see my preferred settings), but it’s best to leave these alone until you get a feel for how the avatar moves on the default settings.
On your avatar’s layer, check beneath the sprites.
You will see a “Talk Threshold” slider. When you speak into the microphone, the bar will light up to show your current speaking volume, and turn green when that volume passes the threshold set by the yellow bar. Speak normally into your microphone, and adjust the slider until the bar turns green for each syllable you speak, but goes red when you’re not talking.
Press Esc or right-click to close the menu, and talk into your microphone - the avatar will now bounce and open its mouth while you’re talking!
Don't forget to overwrite your layer set once you're happy with it!
If you want to add a bit more motion to your avatar, you can use RahiTuber’s Sprite Sheet feature. We’ll start from the end of Tutorial 1.
In the main (only) layer, click the Idle sprite and browse to select “Demo_Sprites/Advanced_sprites/body_idle.png”. This is a sprite sheet - an animation of frames laid out in a grid, from first to last. This one only has 2 frames.
Before we do anything else, it will look strange - the idle sprite now appears twice on the screen (all frames appearing at once). To set up the sprite sheet properly, we need to open the “Sprite Sheet Setup” dialog by clicking the little film-clip icon next to the sprite.
We’ll see the following popup. This is how we tell RahiTuber to read the animation from the sheet. Our “body_idle” sheet has two columns and one row, so input the correct numbers in the first two boxes.
When this is done, the “Frame Count” will automatically adjust itself to match the maximum available from a grid of that size. If your sprite sheet doesn’t fill the whole grid, you’ll have to manually adjust this number. I’ll set the FPS to 7.
We’ll leave Frame Size as (-1,-1). This will be automatically calculated from the image dimensions and the number columns/rows. If you want to specify it manually, you can do that instead. When we click Save, the sprite will go back to its expected position and will be animated.
Do the same for the talk and blink sprites, replacing them with “body_talk.png” and “body_blink.png” respectively. For body_talk, the animation sheet has 3 columns and 2 rows.
Now we’re roughly where we started, except that the avatar is animated, and appears to be missing some parts. We’ll add those with new layers!
Let’s rename the existing layer to “Body”. Then we’ll add two more layers: One called “Chest” and another called “Arms”. Chest is easiest, so we’ll start there. For the idle sprite, add “Advanced_sprites/chest.png” and set the animation settings to show 2 columns, 1 row, and 7 FPS.
Now - the chest will not be talking or blinking, so we can turn off the “Swap when Talking” and the “Blinking” options.
To make sure the chest follows the body movement, we will set the “Motion Inherit” option to follow the Body layer.
And now we come to the reason the Chest layer is separate - physics! Don’t give me that look. We all know why VTubers got popular 😛
Expanding the Motion Inherit options gives us some numbers to play with. Feel free to tweak these and see what they do. I recommend the following setup in this situation:
For the Arms layer, we’ll turn off “Swap when Talking” as before, but this time we’ll keep the “Blinking” option and repurpose it. Set the “Talk Threshold” to maximum since we don’t need it.
The idle sprite (“arms_idle.png”) is also a 2 x 1 grid at 7 FPS, so we need to set up those animation options again. Then we’ll add our Blink sprite “arms_gaming.png”, which is 3 x 2.
We’ll set up the Blinking options so that the arms will start “gaming” at random intervals - A Duration of 5 seconds, a Delay of 10 seconds, and a Variation of 5 seconds. The Delay will be randomly changed up to the limit of Variation (i.e. Delay can be between 5 and 15 seconds here).
You may notice by now that the avatar doesn’t blink while you’re talking. On the Body Layer, let’s enable the “Blink While Talking” option. A new sprite will pop up:
We can load in “body_talkblink.png” and set it up as a 3 x 2, 7 FPS sprite sheet. The difference here is that the sprites have the eyes closed and the mouth open.
We now have an animated avatar with physics and gaming hands!
