pixijs / pixi-projection

MIT License
191 stars 34 forks source link

Bone3d for spine-projection #55

Open jonlepage opened 5 years ago

jonlepage commented 5 years ago

Hum, i do not know if your engine and spine engine can allows it, but it would be great if we could convert a Bone to 3d? Knowing that all spine childs elements have 3d containers. example usage:

                const bone = this.s.skeleton.findBone('hitBone').convert3d();
                bone.euler.y = 1;
                bone.position3d.z = 400;

image

the idea can be propagation a hackUpdate from 3dBone to 3dChild ? It work for individual part but too hard to manage with complexe Spine. acg3gt

ivanpopelyshev commented 5 years ago

With my current understanding of Bone transforms - its not possible:

https://github.com/pixijs/pixi-spine/blob/master/src/core/Bone.ts#L94 https://github.com/pixijs/pixi-spine/blob/master/src/core/IkConstraint.ts#L83 https://github.com/pixijs/pixi-spine/blob/master/src/core/PathConstraint.ts#L70

Compare that to pixi transform: https://github.com/pixijs/pixi.js/blob/dev/packages/math/src/Transform.js#L189

jonlepage commented 5 years ago

ha i see, thanks. I thought there might be hope in this area instead ! https://github.com/pixijs/pixi-spine/blob/2522be16a342749320a3e7a7455bf1fe15f16777/src/Spine.ts#L280 I tried tests but it was a bit of a mess because I do not use the typescript version. image

ivanpopelyshev commented 5 years ago

Oh.. then maybe its possible. I will think about it.

jonlepage commented 5 years ago

otherwise it is not serious, if you see that these really too hacky or very bad for performance!, I have a slightly less attractive alternative, I could simply use the spine3d container, perform a rotation change with eulerY and play on the 2Dplane. These are less effective than playing with the 3dBones, but the result is interesting.

jonlepage commented 5 years ago

hum, this is the alternative am talking about without 3d bone. I have some difficulty quantifying automatic camera angles and environment z-index for now but the result seem interesting. 3dbone3eat_optimize The user case is allow some static creature to hit a target with her hitBone from spine2d. this is the code used from the gif, but have some bug in some context :(

                const dist = $camera.getDistanceFrom(this.p, target.p);
                const hitBone = this.s.skeleton.findBone('hitBone');
                const zeroX = hitBone.x; // just a temp backup

                this.s.state.setAnimation(3,'atk0',false,0);
                this.s.state.addEmptyAnimation(3,0.2,0);
                const tl = new TimelineMax();
                tl.to($camera, 1, {_ang:dist.a/Math.PI,_perspective:-0.28, _zoom:0.6, ease:Power4.easeOut },0);
                tl.to(this.s.euler, 1, { y:dist.a, ease: Power4.easeOut},0);
                tl.to(hitBone, 0.1, {x:zeroX-(dist.d/this.s.scale3d._x), ease:Back.easeIn.config(1.2) },1.1);
                tl.call(() => {
                    target.s.state.setAnimation(3,'hit0',false,0);
                } ,null,null,'+=0.1');