Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Segmented boss tween editor


drhayes
 Share

Recommended Posts

So I have this boss that's a Big Guy made up of separate pieces that all move independently. He's going to have six or seven complicated, scripted movements. He doesn't need to have physics attached so I figured I'd move all the pieces using pre-calculated tweens. My game is a 320x240 canvas game so I can't use a skeletal animation system like Creature, either.

 

Here's a screenshot of the guy with some temporary art.

 

To facilitate this I'm using dat.gui to create a temporary, in-game tween editor. I make a dat.gui folder that points at each piece. I input enable each image, then enableDrag. That lets me drag each piece around with the mouse and gives me a way to test a single tween while doing fine adjustments using dat.gui. Once I'm done, I push a dat.gui button and serialize the new positions of the pieces into JSON. I can save that, load it into Phaser's cache, then replay the tweens by iterating over each field like this:

    for (let key in position) {      let tweenData = position[key];      let piece = this[key];      let properties = {        x: tweenData.x,        y: tweenData.y,        angle: tweenData.angle      };      // If no change from current, don't make a tween.      if (tweenData.x === piece.x && tweenData.y === piece.y && tweenData.angle === piece.angle) {        continue;      }      let easing = EASING_MAP[tweenData.easingFunc];      this.game.add.tween(piece).to(properties, tweenData.duration, easing, true, tweenData.delay);    }

BUT! It only works for a single tween. There are a couple of movements where I need to chain tweens together and it would be nice if I didn't have to hardcode that or hand-edit the JSON before I saved it. For example, the big guy punches the ground and there are two tweens: the tween of the fist hitting the ground, then the second tween of the fist bouncing off the ground.

 

With that kind of incomplete description, anyone have any ideas how I could do that? I'm thinking of having two or more separate tween data structures but it doesn't look like dat.gui lets you re-target it after you make it the first time. And I didn't have a lot of luck keeping everything in sync.

Link to comment
Share on other sites

Hi, I think you can spend lot of time and code if you connect the pieces with bones, make bone animation with keyframes and in the code you just play it... Few days ago I posted to this forum link to my blog where I published Spriter player for Phaser. Spriter is tool for bone/skeletal animations and even free version is capable to do lot of things. Here is link to that blog pos, where you can see it in actiont: http://sbcgamesdev.blogspot.cz/2015/09/phaser-tutorial-phaser-and-spriter.html and here is link to Spriter page: www.brashmonkey.com

 

 What the player does is, that it creates Phaser.Group with animated character. So, you can put it into your scene tree without problems and you can play all the animations you defined in Spriter. Currently it can load and play .scml (.xml) files from Spriter.

 

Link to comment
Share on other sites

Spriter! I backed them on Kickstarter and had forgotten I had a copy. I played around with it for a while but I think the runtime was a little much for what I planned to do. That, and I needed some easings that weren't just linear.

 

I got my stuff worked out. Took some hacky/clever coding but it's working now. Thanks for the suggestions!

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...