Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

RahiTuber

A lightweight yet highly customisable pngtuber app · By rahisaurus

Tutorials Sticky Locked

A topic by rahisaurus created Jul 31, 2024 Views: 428 Replies: 4
This topic was locked by rahisaurus 51 days ago
Viewing posts 1 to 5
Developer(+2)

I will be posting tutorials in this thread!

Developer (2 edits)

Setting up RahiTuber under WINE on Linux - Thanks to @theflib for the tips!

RahiTuber works under WINE on Linux.

Notes on Hotkeys (may be fixed now that I'm no longer using keyboard hooks to detect them):

The only problem is that hotkeys don't work while the window is out of focus, but this is due to a limitation in Wine.
In case any other Linux users come across this, It's possible to work around the problem by using a simplified version of the solution described here: https://www.howtogeek.com/125664/how-to-bind-global-hotkeys-to-a-wine-program-un...
Instead of creating separate script files, it works to just assign commands directly to the keyboard shortcuts in the Plasma system settings menu. Screenshot for reference: https://imgur.com/a/VJNefOO

Additional note for SAMMI users:

There was also the inverse issue of simulated button presses in SAMMI not being picked up. To work around that, put the xdotool command into a shell script and have SAMMI run that with a command: start /unix /bin/bash /home/foo/bar.sh




Developer

Setting up a complex avatar using multiple layers, physics, and states

Developer (1 edit) (+2)

Tutorial 1: Basic setup

Part 1: The sprites

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.

Part 2: The audio

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!

Developer (3 edits) (+2)

Tutorial 2: Animations and Layers

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.

Note - if you don't know how to create sprite sheets, there are a few methods. If you have all the still frames as separate images, you can stitch them together in an image manipulation software, or you can use a tool like this one: https://www.finalparsec.com/tools/sprite_sheet_maker (this is actually linked from within RahiTuber as well, in the Sprite Sheet menu).

If you want to convert a GIF into a spritesheet, you can use https://ezgif.com/gif-to-sprite. Try to keep the width, and preferably the height as well, to powers of 2 (e.g. 1024, 2048, 4096 ...). This will be the most efficient in your graphics memory.

Part 1: Sprite sheets

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!

Part 2: 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!