Spine Animation JS Template (Spine-TS webgl runtime, with mesh deforms) WIP

Post reply
2 favourites
From the Asset Store
Fruit items and Fruit game template - Template and Graphics
$6 USD
50% off
Fruit Slicer Template & Quality fruit and slice graphics (c3p,png,illustrator files)
Antidote Studios's avatar
Antidote Studios

  • Awesome work so far. When do you guys think it will be ready for use?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Good question. I guess it's more of an user opinion.

    Right now it basically loads a skeleton and allows you to play an animation and mirror the direction. I think it needs at least one more trigger On Animation Finished or Looped, and then it will have at least basic functionality.

    However, what else would you need, looking at the flyover C2 plugin there's some more ACEs (in particular Events.)

    I suggest trying it out now and give feedback on the plugin github site (e.g. as an issue)

  • It's strange if I do export when there is "Spine" in the scene, then nothing is downloaded to the android except the background of the game. When I delete a file "Spine" from the project, then after export all objects begin to be displayed on the scene.

  • Is this export to apk? What is your process, using C3 to build apk or another process? Have you tried remote preview with your android device, does that work? Can you see the console output from your android device (e.g. on iOS I can see console via connecting USB to a Mac and using Safari Develop mode on Mac to view console. I think there is a similar method for Android.)

  • What settings do you use for exporting your spine 2d project?

    I have been using the default settings but started to notice recently that the animations are slightly blurry in game. I tried out a lot of different settings and the animations still look slightly blurry in game but the animation doesn't look blurry in spine. I am now testing with increased length of black outlines on the art and different resolutions but the same thing happens. I checked spine 2d forums but only person who sounded like they had the same problem was using unity.

  • This may be due to default resolution that we are rendering the Spine texture, I think right now it's set to around the Spine bounds in pixels. I will take a look at the resolution of rendering and reply back to this thread.

    One other thing you can also look at is the output of the Spine texture atlas png and make sure the resolution of the output of the textures from Spine are at the correct resolution you want to use.

  • Using Pixel art with spine in C3 isn't pixelated. I put the settings to nearest when exporting and the images look pixelated but the spine animation on C3 isn't. Maybe there is something I could be missing.

    Example Capx with spine exported file, a png exported from spine, and C3 spine.

    https://drive.google.com/open?id=1pfkXRFgKMTf42pVntIIZNqaM3O6_TS9R

    Is there anyway to fix this or should I export to png or is the difference not as noticeable?

  • You can try adding the pixellate effect to the Spine object. Also perhaps try low quality upscaling.

    Also - when you export, what is the resolution used for the Spine render? It's an interesting issue, thanks for the sample project, I will take a look.

    I also just checked, in the example project, the spine render is being done into a width: 214, height: 353 texture and the rendering from the atlas into the texture is being done using nearest.

    Try scaling the Spine object to 214, 353 it will match the original character in terms of size. There are still some differences, still not as sharp, but looks pretty close.

  • Is this export to apk? What is your process, using C3 to build apk or another process? Have you tried remote preview with your android device, does that work? Can you see the console output from your android device (e.g. on iOS I can see console via connecting USB to a Mac and using Safari Develop mode on Mac to view console. I think there is a similar method for Android.)

    Sorry, I use Google translator, it can translate sentences poorly. :)

    1) What is your process, using C3 to build apk or another process? - I used c3

    2) Can you see the console output from your android device (e.g. on iOS I can see console via connecting USB to a Mac and using Safari Develop mode on Mac to view console. I think there is a similar method for Android.) - I do not know how to do that.

    I attached the project file .c3p and the Debug Androyd file from this project. - cloud.mail.ru/public/3PEA/sSg7uhxPu

    I downloaded an example SpinePluginTest.c3p from this link - gritsenko.github.io/c3_spine_plugin , but he did not work. I took ONLY a spine-file from this example and inserted it into a new empty project, but the problem did not disappear.

    If someone has the time, please download my archive and try installing the DebugAndroyd version of the project, will there be a problem on your device? ...

    Have you tried remote preview with your android device, does that work? - Yes, remote viewing works. On the first launch in the browser, a common mistake is when I see ONLY the background color, but if I click the refresh site button, then the problem disappears.

    Link image - https://ibb.co/YbgzQLn

    Thx!

  • Mikal,I think I found a bug in plugin Spine, maybe it is with him that some of my problems arise .... In the browser or when exporting NW.js, my spine animation plays well (I can throw off a new example), when exporting to DebugAndroid spine animation just does not appear on the screen , maybe something is not drawn on the canvas? ... And now a bug - if after starting the layout you restart the layout, spine animations do not appear. I attached the Record - gifyu.com/image/m67I

    my .c3p - cloud.mail.ru/public/4i6v/bXxcEDNam

    thx!

  • sTARKi

    As seen in the how do I FAQ :

    Debug your APK - LINK

  • When you have an error restarting the layout, open up the developer console (F12 on PC) and post any errors you see.

    One quick idea to try, add a 'wait 0.1 seconds' after the skeleton is loaded before enabling animations. I have seen a 'race' condition where one skeleton is loaded, but others are not loaded yet and using their animations cause an error.

  • I see one error in your project, you have a Spine character with an incorrect animation-name at the bottom of your layout. When I removed that, restart layout worked.

    Zoom out in the C3 editor you will see at the bottom, it has an animation name of 'Tutorial2toidle'.

    The error shows up in the Chrome developer console (press F12). Please learn how to use the developer console, it is very useful for debugging errors.

  • People, Someone released a successful project on google play or steam with a spine plugin?

    A simple Yellow sprite is visible, good, but there is no spine animation ... Perhaps the problem is in my "galaxy tab A" or in the method of outputting the image from the spine plugin in Android .....

    .c3p - cloud.mail.ru/public/4Y4x/247dupZ68

  • I am debugging another simple project on Android, it looks like there's some looping on initialization. I will report back what I can debug around this issue.

    I am using USB and Mac to do the debug, it's very helpful to enable this. See the post above about how to do this.

    Also, I wanted to check that my other comment about the bug in your project with the wrong animation name helped fix your 'restart layout' problem on the PC.

Post reply
Return to board index
Jump to:
Active Users
There are 4 visitors browsing this topic (0 users and 4 guests)