collinhover / impactplusplus

Impact++ is a collection of additions to ImpactJS with full featured physics, dynamic lighting, UI, abilities, and more.
http://collinhover.github.com/impactplusplus
MIT License
276 stars 59 forks source link

Tween Question #181

Open breitenbach128 opened 9 years ago

breitenbach128 commented 9 years ago

Could someone shed some light on how to use tween to move entities around? I used a tween plugin in a previous impact game I did and it worked well, but after seeing impact++, I was very excited about using it. At this point, I am really lost in the depths and trying to figure everything out. A tween seems like it should be a simple thing, but I can't get it to work for moving position at all. Other properties work fine, and I can even modify custom properties, so I am under the assuming it has something to do with the movement physics.

What restrictions are there on tween for moving things around? The end goal is to have some text bounce down with the title. Thanks.

Pattentrick commented 9 years ago

Hi @breitenbach128,

to be honest the whole tween thing in ++ is not very well explained and I don't used it a lot until now. Also there are no examples which I am aware of. But @collinhover knows about that issue and commented on this topic a while ago. You can see his answer here:

https://github.com/collinhover/impactplusplus/issues/174

Basically ++ uses the TWEEN.JS library ( https://github.com/sole/tween.js/ ) and there are some built in tweening functions available as @collinhover mentioned it in the issue I posted above.

I hope you will figure things out with the JSDoc comments of that functions, and maybe with some information from the TWEEN.JS documentation.

breitenbach128 commented 9 years ago

Here is some basic idea of what I am running into. Everything seems to flow ok with the alpha fades, but with position changes, it is like it does not get the x/y subproperties of pos. I get a NaN error.

        this.TitleImage = ig.game.spawnEntity(EntityEyecandy, 100, 220, {
            size: { x: 16, y: 32 },
            animSheet: new ig.AnimationSheet('media/min_scienctist.png', 16, 32),
            zIndex: 100,
            tileSeries: [0]
        });

        this.TitleImage.tween({
            pos: { x: 100, y:100 }
            //alpha: .01
            }, {
            name: "TestTween",
            duration: 500,
            noComplete: false,
            stopped: false,
            onComplete: function () {
                //console.log("move completed " + JSON.stringify(this.TitleImage.pos))
                console.log("move completed ");
            },
        });

Some console logging output: Property in Tween Array: pos tweens.js:356 Updating Tween Start: Property: pos : TimeValue: 0.8828440000070259 deltaValue: NaN : ObjPropValue : NaN

breitenbach128 commented 9 years ago

Alright, looking at everything is as much as I can understand and doing a ton of log output, It definitely seems like it does not do any recursive breakdown of property objects passed to it. It goes NULL when it try to convert it to a number because the object Pos is being passed. I don't see a spot for it to then open up the object and pass first the X and then the Y. I am looking at another tween.js plugin to see if I can come up with something to make it work. I am still really amateur as far as programming goes, so I will do the best I can, but I might need help. CONSOLE LOG OF START METHOD Property in Tween Array: pos tweens.js:204 START CALL VALUES START BEFORE OBJ SET:{} tweens.js:206 START CALL VALUES START AFTER OBJ SET:{"pos":{"x":100,"y":220}} tweens.js:210 START CALL VALUES START INTERAL ARRAY SET BEFORE:{"pos":{"x":100,"y":220}} tweens.js:212 START CALL VALUES START INTERNAL ARRAY SET AFTER:{"pos":null} tweens.js:216 START CALL VALUES START AFTER ARRAY SET:{"pos":null}