Setting up PNG Puppeteer
Basic instructions for setting up PNG Puppeteer with OBS.
Image Setup
The setup for PNG Puppeteer [alt Git respository] is a little more involved than other PNG Tuber apps but is still flexible.
Download: Puppeteer v 0.0.3.zip (mediafire)
To set up PNG Puppeteer make sure to have at least four source images, typically;
- Eyes open; mouth open.
- Eyes closed; mouth open.
- Eyes open; mouth closed.
- Eyes closed; mouth closed.
Each image needs to be specifically (re)named as follows (either PNG or JPG files);
- Eyes open; mouth open - "1_EO_MO.png"
- Eyes open; mouth closed - "2_EO_MC.png"
- Eyes close; mouth open - "3_EC_MO.png"
- Eyes close; mouth closed - "4_EC_MC.png"
In Windows/MacOS file explorer, right-click and Rename, or slow-double-click and type the corresponding label above.
Note: images need to have transparent backgrounds or the background needs to be a solid colour, primary green for example, if they are to be used as an overlay - transparency excludes the background, a solid colour allows for 'chromakey' removal.
The four faces of PNGTubing. Each image is a state that is swapped in response to audio input.PNG Puppeteer Setup
In the installation directory/folder for PNG Puppeteer (where the app was installed/extracted) create a new folder, e.g. "Avatars" [1]. If several avatars are to be swapped out, create additional folders for each tuber avatar inside the parent folder ("Avatars"), e.g. "beenz", "tankie", "tubz" and so on, for example;
- D:\Program Files\PNG Puppeteer (default installation)
- D:\Program Files\PNG Puppeteer\avatars (main avatar folder)
- D:\Program Files\PNG Puppeteer\avatars\beenz (avatar folder)
- D:\Program Files\PNG Puppeteer\avatars\tankie (additional avatar folder)
Inside each 'avatar' folder should be another folder labelled "Normal", and a file called "myavatar.ava" [2] - to create "myavatar.ava" add a standard 'Text Document' and rename it "myavatar.ava". Only the name matters so the file should be blank if opened;
- D:\Program Files\PNG Puppeteer\avatars\[avatar name]\Normal
- D:\Program Files\PNG Puppeteer\avatars\[avatar name]\myavatar.ava
Once this structure is in place the png avatar images can be dropped or copied into the "Normal" folder ready to be loaded into the app.
For Puppeteer to work correctly a folder and file needs to be created inside the installation directory [1] that stores files relating to the png avatar [2].Loading Avatar into PNG Puppeteer
Providing images are correctly named, per the above, they should load automatically into PNG Puppeteer, in the correct order, and into their respective slots. To do that, click in the Load Avatar button upper-left [3], browse to the "myavatar.ava" file [4] that corresponds to the avatar image-set to be loaded and click "Open" bottom-right [5] of the file browser. PNG Puppeteer will load the images and place them in the appropriate slots based on their file names.
Once the avatar files are set in the correct location, they can be loaded [3] selecting the corresponding myavatar.ava file [4] and clicking Open [5] to load the avatar.Puppeteer Audio Settings
Once the images have been loaded, to use set the microphone input in Microphones [6], click the Start button [7] and then slide the Mouth Open Threshold option [8] until the mouth opens and closes appropriately in response to audio/mic input.
With avatar png files loaded make sure to select an audio input [6], click Start [7] and the adjust the sensitivity [7] to the responsiveness of the avatar.PNG Puppeteer & OBS
Once everything is set up in Puppeteer, to use the loaded avatar with OBS; create a new capture instance in Sources by clicking the + button [9] lower-left corner or the panel. Select Browser [10] from the list. In the overlay that opens set the URL to http://localhost:65000/viewer, this is the local, system, resource address for previewer in Puppeteer. Set Width and Height to match the dimensions of the png avatar images e.g., Width: 640, Height: 640. Click OK to confirm.
To use the avatar in OBS create a new Source [9] that set as a Browser [10] instance.The avatar should then appear in the Preview window. If the overlay cannot be moved (no red adjustment lines appear/shown) make sure Preview is unlocked, right-click and select Lock Preview from the menu (Lock Preview locks and unlocks). And then click-drag the overlay to move it and/or click-drag or Shift-click drag a corner or edge marker to change the overlays dimensions. The avatar should then be ready for use.
For the overlay to work correctly it has to reference a URL [11], which then displays as an adjustable layer [12] in the Preview window ready for broadcast or recording.
