We are working on an online slot game using Spine animations as the reel symbols. I’m writing here, because certain symbol white circle background edges tend to be cropped OR have a greyish border.
To make sure we do not have any cropping while positioning/managing the reel symbols, we did a small test: We get the symbol background animation and drag’n drop it into a scene of our game, and started the animations to see how the edges look like.
Here is the screen recording about the test (short version, it is only 01:46 long to present how can this be replicated): https://www.dropbox.com/s/y7ubxyi2qcpc50i/edges_cut.mov?dl=0
from 00:00 to 00:46 -> test settings - add the white circles to the loading screen
from 00:47 to 01:46 -> zoom in and out to take a close look at the edges.
at 01:13 -> example of visible greyish border right next to the edge
at 01:29 -> example of cropped edges (left, right, maybe top)
It seems the cropped/greyish edges (like on the screenshot above) are randomly presented in several browsers and devices (we tested on iOS, Android, Mac, PC).
Here is the symbol background atlas package exported from Spine (can be drag’n drop to Cocos Creator for testing):
symBackground_spine_anim.zip (26.2 KB)
- the symbol has semitransparent edge
- the symbols are added to the scene with premultiplied alpha turned off.
Can anyone give us some hint why the edges look cropped or have a greyish border, and what to do to avoid this?
- Creator version: 2.1.3
- Target platform: Web Mobile
- Phone model: reproducible on several iPhone, Android phones as well as on PC
- Browsers: reproducible on several browsers like Chrome, Safari, Firefox
- Editor Operating System: Mac OSX
Thank you for your support!