![spine2d spine2d](https://i.ytimg.com/vi/adZHgZ3zRFA/maxresdefault.jpg)
Change the position of the eyeball in the local coordinate systemĬontrolEyeXTarget = pageX - (basePos.x + eyeBasePos.x)ĬontrolEyeYTarget = -(pageY - (basePos.y + eyeBasePos.y)) // y The axis turnsįunction ② First in spine Create a keyframe animation in, And then through setAnimation Method to play, If there are multiple animations, you can set up BlendMode And control the motion of each animation track alpha To mix, I will write a new one in the future demo Special introduction. Record the relative position of the eyeballĬontrolEyeX = controlEyeXTarget = controlEye.xĬontrolEyeY = controlEyeYTarget = controlEye.y
![spine2d spine2d](https://blog.deepmotion.com/content/images/2018/01/creature-v-spine-blog.png)
ĬontrolEye = skeleton.findBone( 'eye') // Get the skeleton of eye controlĬontrolHead = skeleton.findBone( 'head') // head yes eye The father of ,eye stay head Moving in the local coordinate system of //. There are three main functions :① The eyeball moves according to the mouse position ② Click on the character to open his mouth ③ Beat to the rhythm of the music įunction ① The implementation of is mainly dependent on spine The animation ik constraint, See this blog post of the official forum for specific implementation : Eye distance limit settings, I'll take it and sell it now, And then just go through the program findBone Method to find the bone of the constraint, Then move the position. Program implementation mainly uses two libraries, pixi.js and pixi-spine, It's all current () The latest edition, Because of my spine The version is 3.8,pixi-spine Only the latest version supports, therefore pixi.js It must also be the latest version (v5)Īlthough spine The government also provided webgl Version of the runtime, But since the last time I used it pixi It feels pretty good ,pixi Plug ins are also available, Decisiveness is used. I will Spine The project is also shared in the source code, If you have doubts, I, a novice, may be able to answer some of them ~ The next step is to spine Binding bones inside, Brush weights ,key Frame all this tedious work, I can't finish a few words, There are many online tutorials, This paper focuses on program implementation.
#SPINE2D CODE#
(psd I will put the original in the source code at the end of the article ) I found a relatively simple one 、 Less textured “ figure ”, And then use the official ps plug-in unit PhotoshopToSpine.jsx Export layers, And then use Spine Open the exported project. įirst of all, I went to the Internet to find a person who has already divided the roles PSD Model, in order to demo It's easy to make.
#SPINE2D SKIN#
I don't know if there is a professional title for the animation used by the virtual anchor, I'll call for a moment “live2D Animation ” Well ~live2D The core of animation is bone binding and skin animation, The principle of skin animation is the same as I used to use canvas2D The effect of image deformation is similar to : Canvas2D Realize the grid transformation of the picture.
![spine2d spine2d](https://64.media.tumblr.com/d8a091e8315ea809e94edd883e56add3/7b022803e996a9e8-71/s1280x1920/a19bdcc5c7fb809d396af41535eb3291e9465946.jpg)
In desperation, Lonicera japonica 299 I bought a knife Spine.(T_T)
#SPINE2D SOFTWARE#
Why not use free domestic software ? In the beginning, it was really a trial period of time, The basic functions of the software should meet my needs, But the program documentation is simple, And it seems to have stopped maintenance, Very regrettable. Why don't I live2D? After all, it's Japanese Software, I don't know if the localization of English translation is reliable, And Spine The price difference is not too much, Read some tutorials, The operation is also complicated, It's more likely to be used by designers who are not familiar with programming. VTuber The industry is getting hotter and hotter, Looking at all kinds of leather cases, I can't help the impulse to realize it, Speaking of 2D Bone animation software ,Spine2D Be the first to bear the brunt.