Hi, I’ve been working on a project with a small team to make a 2D web-based game. My current goal was to allow users to take a photo of themselves and overlay it on the character rig. I got this working, activating the webcam, taking a photo, saving it, and copying the bone weights and bind poses to allow the image to move with the rig and it’s animations.
The issue came up when we decided to have the image cropped into a circle, for some reason the sprite stopped visually attaching to the rig (still moved around with it but way off screen). I figured out two things, that it broke if the pixels were specifically set to be transparent (different colors or a very low alpha still worked fine) or if the radius of the circle I was cropping was too big.
Screenshots of the code below :
Grab the webcam image
Crop the photo into a circle
Attach the new sprite to the rig
I very specifically want to bring attention to the (distsq <= radius * radius * 0.6) as this is the upper limit for the size of the circle that will still work with transparent pixels. I really want to know why this is the case, if I’m missing a key part of the necessary code and just getting lucky, or if I’m completely misunderstanding how a function of the code is working. I want to be able to patch whatever’s wrong so it can be a solid feature and not have any hidden issues that will affect user experience.