Some action cannot show normally during animation in cocos2d

amuse

I was trying to make a character using spine with cocos2d-x 3.4, one of animations is "idle", it is the desired animation output:
girl0.avi.zip
the character should have blink action during idle.

but after the spine output added to cocos2d-x 3.4, run with iPhone simulator 8.2, the actual animation seems ok but the blink animation does not show:
girl1.zip

and in the original spine input file, the preview in spine can show the blink animation:
girl.spine.zip
the image (girl.png) need to use in girl.spine:

what is the problem?

cocos2d-x version:3.4 (run in iPhone simulator with iOS 8.2)
spine version: spine essential
platform:mac os x 10.10.2

the blink action is done by setting

as background, then place the mask

on top and set opacity of the mask to emulate blink.But in run time it seems the mask does not change opacity and always stick on the head during animation:

while other action seems show correctly

I am using cocos2d-x 3.4 and spine essential, and I don't know if my step of install cocos2d-x and spine is correct, so also post my install step:

1.download cocos2d-x 3.4 from http://www.cocos2d-x.org/filedown/cocos2d-x-3.4.zip , save to home directory

2. create new cocos2d-x project using command:
cocos new SpineTest -p com.your_company.spinetest -l cpp

3.download spine runtime from https://github.com/EsotericSoftware/spi ... master.zip , save to home directory

4.in the newly created cocos2d-x project there is some default spine code file in SpineTest/cocos2d/cocos/editor-support/spine, replace the code file in the folder with code file in spine runtime:
cp spine-runtimes-master/spine-c/include/spine/* spine-runtimes-master/spine-c/src/spine/* spine-runtimes-master/spine-cocos2dx/3/src/spine/* ~/SpineTest/cocos2d/cocos/editor-support/spine

5.copy spine output and image (girl.atlas, girl.json , girl.png, see Resources.zip) to cocos2d-x project resource folder SpineTest/Resources, also add resources in Xcode
files to add:
Resources.zip

6.create a scene to test girl with animation "idle" (run in iPhone simulator):
at cocos2d-x there is a HelloWorldScene.cpp by default, replace code with following code:

#include "HelloWorldScene.h"
#include <spine/spine.h>
#include <spine/SkeletonAnimation.h>
USING_NS_CC;
Scene* HelloWorld::createScene(){
    auto scene = Scene::create();
    auto layer = HelloWorld::create();
    scene->addChild(layer);
    return scene;
}

bool HelloWorld::init(){
    if(!Layer::init()){
        return false;
    }
    auto spine = spine::SkeletonAnimation::createWithFile("girl.json", "girl.atlas",1);
    this->addChild(spine);
    spine->setPosition(Point(200,10));
    spine->setAnimation(0,"idle",true);
    return true;
}

(or for simple, add the following code file into SpineTest/Classes to test the character, also remember to add file in Xcode🙂
Classes.zip

It seems minor bug, but I was still unhappy for this problem, who can help? or at least check if the spine install method is correct?

Nate

Sorry for the delayed response.

The way you setup the Spine runtime looks fine. It's unfortunately that cocos2d-x continues to distribute the Spine Runtimes.

It looks like your images have a problem with premultiplied alpha or lack thereof. There are 2 settings involved:

PMA enabled or disabled in the texture atlas. This is done by checking or unchecking the "Premultiply alpha" output setting.
PMA enabled or disabled in cocos2d-x. This is done by setOpacityModifyRGB, which SkeletonRenderer sets to true by default.

If these settings don't match, you'll get blending like in your screenshot. From here:

Images are premultiplied by cocos2d-x, so the Spine atlas images should not use premultiplied alpha.

So, uncheck "Premultiply alpha" when packing the atlas to get proper blending. Since cocos2d-x automatically premultiplies the alpha in images that it loads, you should probably never set setOpacityModifyRGB to false.

amuse

after unchecking premultiplied alpha in spine (cocos2d-x setting use default), the blink action still cannot be shown (but this time the mask is totally opaque instead of half transparency):

the opacity of mask seems still keeps unchanged, see screen record:
screenrecord1.zip
my new output:
003.zip
also my testing code:

#include "HelloWorldScene.h"
#include <spine/spine.h>
#include <spine/SkeletonAnimation.h>
USING_NS_CC;
Scene* HelloWorld::createScene(){
    auto scene = Scene::create();
    auto layer = HelloWorld::create();
    scene->addChild(layer);
    return scene;
}

bool HelloWorld::init(){
    if(!Layer::init()){
        return false;
    }
    auto spine = spine::SkeletonAnimation::createWithFile("003.json", "003.atlas",1);
    addChild(spine);
    spine->setPosition(Point(200,10));
    spine->setAnimation(0,"atk",true);
    return true;
}

is any settings wrong?

Nate

Looks fine. Here's your JSON data played with Skeleton Viewer:

Loading Image

I slowed it down so you can see the alpha on the lightning and staff. Doesn't this look exactly like your video? Try slowing down playback in cocos2d-x so you can see the alpha transitions better: spine->setTimeScale(0.2);

amuse

I record same action played in both in spine and cocos2d-x:
the preview in spine:
003spine.zip
It has blink action
but when exported and run in cocos2d-x, it has no blink action:
003cocos2dx.zip

spine version:2.1.25
osx version:10.9.2

so I was confused why the playback in spine is different from run time

Søren

I looked through your json file and I can see you have the following key set on your idle animation

"idle": {
      "slots": {
         "eye1": {
            "color": [
               { "time": 3.3333, "color": "ffffff00" }
            ]
         },

your test code runs the animation "atk". which does not have any keys set for the eye. Have you tried running the "idle" animation ?

amuse

the 003spine.zip and 003cocos2dx.zip posted before are "idle" action, which in spine preview it has blink action but in cocos2d-x has no blink action.
(but atk also have blink action in preview, may be I will post the atk action screen recording if the blink action still not fixed in idle action)

test scene for running idle action:

#include "HelloWorldScene.h"
#include <spine/spine.h>
#include <spine/SkeletonAnimation.h>
USING_NS_CC;
Scene* HelloWorld::createScene(){
    auto scene = Scene::create();
    auto layer = HelloWorld::create();
    scene->addChild(layer);
    return scene;
}

bool HelloWorld::init(){
    if(!Layer::init()){
        return false;
    }
    auto spine = spine::SkeletonAnimation::createWithFile("003.json", "003.atlas",1);
    addChild(spine);
    spine->setPosition(Point(200,10));
    spine->setAnimation(0,"idle",true);
    return true;
}

one off topic question:what is the size limit of attachment of this forum?