0% found this document useful (0 votes)
1K views11 pages

PNGTuber Plus Written Tutorial

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
1K views11 pages

PNGTuber Plus Written Tutorial

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Updated to version: 1.2.

Introduction
I see you’ve taken interest in using PNGTuber Plus. This document is meant to
go over all of the features in PNGTuber Plus, and I’ll attempt to remember to
edit this document as the software is updated.

Setting Up
After downloading the .zip file, extract the exe file anywhere you wish on your
computer.

Depending on the version, you may need to include the .pck file as well.

Make sure to set your microphone to the correct one!


Upon opening PNGTuber Plus for the first time, your screen should look like this:

The default avatar

The only things that matter on this screen are the two sliders. The bottom slider
keeps track of the audio volume and how loud your mic volume must be to
make the character talk. The top slider is the character smoothing, basically
how long will the character stay in talk mode, even if the mic volume is not loud.

Play around with these values and see what works for you, they’ll be saved once
you’ve closed the program.

Editor Basics
Next up, hit the EDIT button in the bottom right
corner. It will take you to a different screen, and
remove the transparent background.

Click on any sprite to select it. The “Sprite edit” menu


should appear. This menu has various sliders that all
change different effects. Play around with different
sliders and see what happens.

PS: Use the arrow keys to fine tune sliders


Sprite Editor Options
Here is a list of all the sprite options and what they do:
● Position:
○ The sprites base position. This can be changed using WASD.
○ Tap WASD for fine movements, or hold WASD to move faster
● Offset:
○ This is the sprites origin. This is used for rotating sprites, as this is
the point the sprite will rotate around.
○ To change the sprites origin, hold “O” and use WASD
○ While holding “O”, tap WASD for fine movements, or hold WASD to
move faster
● Layer or Z Index:
○ This is the sprites layer. Sprites with a higher layer will be shown
above sprites with a lower layer. This can be useful for adding
objects behind your main sprite.
○ To change a sprite’s layer, hit “Q” to lower it or “E” to raise it.
● Drag
○ When the sprite moves, the actual image of the sprite will lag
behind. The speed of this lag is determined by the slider
● Directional Frequency and Amplitude
○ These 4 options all control the movement of the sprite. Frequency
controls how fast the movement is, and amplitude controls how far
the movement travels. Here’s a graph of how this motion works.
○ Both axes, the horizontal X axis, and the vertical Y axis, have
individual amplitude and frequency sliders.
● Squash
○ This squishes or squashes the sprite based on its vertical Y
movement. Play around with it to see how it works!
● Rotational Drag
○ This will rotate the sprite based on its vertical Y movement. This
value is speed dependent, so be careful with setting it too high.
● Rotation Limits:
○ This is to be used in conjunction with rotational drag. This will make
it so that sprites with rotational drag have a limited range of
movement. This is useful if you want a sprite that drags one way
but not the other.
● On Talking Button
○ These determine whether or not to show/hide the sprite when the
user is talking.
○ Option 1 (the X) will show the sprite always
○ Option 2 will only show the sprite when the user is NOT talking
○ Option 3 will only show the sprite when the user IS talking
○ Can be used in conjunction with the On Blinking button
● On Blinking Button
○ This determines whether or not to show the sprite when the avatar
is blinking.
○ Option 1 (the X) will show the sprite always
○ Option 2 will only show the sprite when NOT blinking
○ Option 3 will only show the sprite WHEN blinking
○ Can be used in conjunction with the On Talking button
● Delete Button
○ Self explanatory
● Unlink Sprite
○ Unlinks currently selected sprite from parent.
● Animation Frames:
○ Determines how many frames are in the sprite’s “sprite sheet”
○ Sprite sheets must be ordered horizontally
○ You can convert GIF to sprite sheet here:
https://ezgif.com/gif-to-sprite
● Animation Speed:
○ Determines how long it takes to loop through the sprite sheet’s
sprites.
○ NOTE: Using sprite animations will change the sprites hitbox to a
solid square. This is intentional behavior.
● Ignore Bounce Velocity
○ Enabling this will make it so that squash and rotational drag effects
are unaffected by the avatars bouncing movement

Edit Mode Options


● Add sprite
○ Adds new .png sprite from file
○ Only .png images will work
● Link sprite
○ Enter “link mode”. Used to attach selected sprite to another.
○ Only works if sprite is selected
● Replace sprite
○ Replace sprite with a different sprite.
○ Only works if sprite is selected
● Duplicate Sprite
● Save avatar
○ Saves avatar data to file.
○ Only saves the data, not the images themselves. CHANGED IN 1.2
● Load avatar
○ Loads avatar data from file.
● Open file system folder
○ Press ESC to open the data folder.
○ Data folder is located at
“C://Users/*name*/AppData/Roaming/Godot/app_userdata/PNG
TuberPlus”
● Exit Edit mode
○ Exits edit mode
● Reload sprites
○ Press “R” to reload all sprite textures
● Control + Mouse Scroll
○ Hold control and scroll with the mouse to scale your avatar up or
down
● Control + L
○ This will save images from the avatar data to your file system
○ Useful if you received a model from a commission

Making your first avatar


Now that you understand the basics of the sprite editor options, let's run
through how you can use these to make a real avatar.
For this tutorial, we are going to remake the default avatar. If this is your first
time using this program, I recommend following along with me BEFORE diving
in to using your own sprites.

Let's start by deleting the default sprite. Simply click on


the body sprite and press the trash button. Since every
sprite is a root of the body, this will delete every sprite in
the avatar.

Next up, press the “Add new sprite‘ button in the top left
menu.
Navigate to the folder “defaultAvatar” and add
“body.png”.
Repeat these steps for “head.png” and “hat.png”

Select the body and change its movement to give it a nice


sway. You might notice that the head and hat are not moving
along with the body. This is because we have not linked the
sprites together!

Select the head sprite, then select “Link Sprite”.


This will make the background become blue, and
a big flashing line point out of the head sprite. This is what
links our sprites together. Now select the body sprite, and the
head should link to it. The head should now move with the
body! Repeat this step to attach the hat to the head.

Next, we’ll had some rotational drag to the hat, to give it a bit
more life. Select the hat and set the rotational drag to -6 (or,
alternatively, whatever you’d like)

You might notice that the hat now rotates with Y axis
movement, however, the pivot point isn’t exactly accurate.
Let’s fix that. Hold the “O” key and use WASD to move the
sprite origin to a better rotational spot. I have the offset value
set to -84, 87. You can set it to whatever you’d like though.
Now, add the “hair.png” sprite. Select it and press “Q”. This will set its order back
and put it behind the other sprites. Attach it to the head, and give it a bit of
regular drag. Now our boy has nice flowin’ locks!

Click on the head again and give it a bit of drag as well. See how alive he feels
already, even without a face!

About that, let’s add a face!

Add the sprites “mouth1.png” and “mouth2.png” to the scene. Attach them both
to the head sprite.
At this point, it may be getting difficult to select your mouth sprites. You can
scroll up and down with the mouse to select any sprite without having to click on
them.

Select the closed mouth sprite, and press the


“On Talking” button. Setting it to option 2 (the closed
mouth smiley face) will make it so the sprite only
appears when not talking.
Select the open mouth sprite and similarly set the
“On Talking” button to option 3 (open mouth). This
will set it so the sprite is only visible when talking.

Press “Exit edit mode” to go back to the transparent


background. Try talking and notice the mouth changing
sprites. Invisible sprites will appear transparent in “edit
mode”, but be completely invisible in streaming mode.

Now for the eyes.


Add all three sprites, “eye1.png”, “eye2.png”, “eye3.png”
and attach each to the head sprite.

Use the previous method to set the “open eyes looking


left” to NOT TALKING, and set the “open eyes looking at
camera” to TALKING.
Now we’ll use the “On Blinking” button. Select BOTH open eyes
and set them to option 2 with the “On Blinking” button (looks like
an open eye).
Select the closed eye sprite and set it to option 3 with the “On
Blinking” button (looks like a closed eye).

Press “Exit edit mode” again. You’re now ready to make your own avatar!

Importing Custom Sprites


You can import any .png file that you’d like! Just keep a few things in mind:
● PNGTuber Plus runs at a FIXED resolution scale. Basically, images will be
displayed at their base size and will not be scaled. I personally
recommend drawing all the assets in a 720x720 sized canvas, as that is
the size of the base window when it is opened.
○ In 1.1.4 and beyond, you can do CONTROL + MOUSE SCROLL to
scale the entire avatar up or down.
○ I would still recommend making assets smaller though.
● For program simplicity, PNGTuber Plus can only draw files from its own
data folder. You can open this data folder by hitting ESCAPE in edit mode.
Create a folder inside the data folder for your avatar and add your
images to it. Creating a subfolder isn’t required, but it makes it cleaner
and more organized :]

Saving and Loading


To save your avatar, press the “Save avatar” button. As stated above, I
recommend keeping your avatar’s images and save data in a subfolder, for
organization. You can save over a previous file if you’d like.
To load an avatar, press the “Load avatar” button and select the save data
you’d like to load.

Keep in mind, PNGTuber Plus does NOT autosave. Any changes to your avatar
must be saved manually.
Sharing and Importing
Avatars
In version 1.2 and onward, you must simply send the
.save to whomever you’d like to share the avatar
with. If you’re receiving the avatar, just load the .save
file as you would normally. You can press the
CONTROL + L keys to save the avatar’s images to
your computer for editing.

Adding avatar to OBS


In OBS, add a new GAME CAPTURE and select the
PNGTuber Plus window. Make sure that you select
“Allow Transparency” in the properties menu. Position
the window however you’d like.

Note: While streaming, the window must be open, not


minimized. It does not have to be focused, you can
have a different window on top of it, but it must not be
minimized to the taskbar.

If window transparency doesn’t work for some reason, you can still get
transparency by adding a big green square (or whatever color you’d like) to
your avatar and setting it’s layer way back, then using chroma key in OBS. This
is hacky, I know, but a bit silly so it's staying that way.
Alternate Costumes
If you’re using PNGTuber Plus version 1.2 and onward, you will have access to 10
alternate costume slots for your avatar. (5 total for 1.1.4 and under)

Pressing the 1-9 (and 0) keys on your keyboard will select a costume, highlighted
by the white square. Each sprite will start out being visible on every costume
layer. Click the buttons at the bottom of the sprite edit menu to alter which
costume layers a sprite will display on.

For example, having it set like this will make the sprite appear only on costume
layers 2 and 3, and the sprite will be invisible when on layers 1, 4 and 5.

FAQ
Is PNGTuber Plus a virus?
No, it just gets false flagged by windows. Hit more info, and then “run anyways”
to get past the flag. The Steam version should not have this issue.

PNGTuber Plus isn’t picking up my microphone


PNGTuber Plus uses your computer’s default microphone. If you change the
default mic while the program is running, make sure to restart it.

Where is the “user://” folder on my computer?


On Windows, it’s located at
“C://Users/*name*/AppData/Roaming/Godot/app_userdata/PNGTuberPlus”
You can press the Escape key in the program to open this folder in the windows
file explorer.
Will you add a feature to change how the sprites are layered?
It’s already a thing! Press Q and E to change the sprites Z index, sprites with
higher numbers are shown on TOP of sprites with lower numbers!

My sprites are too big!


You can hold CONTROL and then SCROLL to zoom in or out of the whole scene!

I’m on MAC and it won’t pick up any microphone!


I don’t own a mac so this is hard for me to debug, but try this.

I downloaded an avatar from a friend, but when I try to load it it says “File
not found”
In version 1.2 and beyond, save files will save the images in the .save file itself.
Attempting to open a save prior to 1.2 though will still require valid image paths
to open. If you have an old model, make sure to save over it in 1.2 to make it
valid for sharing.

This thing eats my computer hardware!


If you open the settings.pngtp file in notepad, you can edit the options there.
The max fps is set to 144 by default, turning it down will help ease the
performance.
Note: Program must be closed to change the settings.pngtp file.

My mic is building up delay!


This is a bug in godot, and is worse depending on specific computers. The mic
resets automatically every 3 minutes, but if you're experiencing high lag, you
can turn the delay time down in the settings.pngtp file. It is measured in
seconds and is by default set to 180 (3 minutes)
Turning down the FPS to ease performance may also help with this.
Note: Program must be closed to change the settings.pngtp file.

This thing runs like shit despite having a 30/40 series rtx card !
PNGTuber Plus uses the OpenGL graphics library, however newer cards and
newer games are starting to use the Vulkan library instead. Because of this,
some new graphics cards are beginning to lose support for OpenGL ( I think ).
Using OpenGL assures png+ runs on older hardware.

You might also like