Spine - certain edges are cropped OR has greyish border

Spine - certain edges are cropped OR has greyish border


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)

Please, note:

  • 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?

Meta Info:

  • 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!

@Big_Bear, @pandamicro, may you have any hint on this? Or may you know someone how expert in Spine-in-cocos rendering?

Please send the Spine resource used in the test to my email:337031709@qq.com. I will help you see the problem.

Thank you very much @zzf520! Please, download the Spine resource from here (linked in the description):

Please, let me know what do you think, we are eager to get any hint why the edges look cropped or have a greyish border, and what to do to avoid this.

Hi @zzf520, may I ask, do you need something more for your investigation from us? Let us know if we can provide and further details, export, source files, etc…