Flipping between Animations?

Questions
, , , ,
1

So using the wonderful Sprite Mixer created by @felixmariotto ( which I HIGHLY recommend EVERYONE creating 2D games use in their project{s} ), I am trying to flip between certain animation sequences & turn all the others off while it plays such as jumping then back to idle in whichever way you’re facing, then switching back to the old animation. How would I do this? I can already do this, problem is I have to manually hide each older animation that I want hidden until the ( in this case, Jump Animation Sequence ) completes.

Here’s the particular Source Code to control the Animation{s} :

view-source:http://babylontesting.epizy.com/Three.js/Temple%20of%20Doom%20-%202.5D/js/SprController.js

Line{s} : '166 - 219'

Here’s the demo :

Press Space & face Left or Right to do a Jump Animation in that direction, hide the Walk Animation / Idle Animation Sequence manually, then return back to idle frame in the direction Link is currently facing.

To move, use the Arrow Key{s}.

http://babylontesting.epizy.com/Three.js/Temple%20of%20Doom%20-%202.5D/

2

So first thing, nobody want to look at a page of JavaScript without coloring or indentation, so either you copy here the relevant part of your code inside a preformated markup, either you host your code on Github.
Secondly, about your problem, if all your Action sequences are on the same ActionSprite, you don’t need to do anything but call .playOnce() or .playLoop() on the Action to switch between the previous and the new sequence within the ActionSprite. I urge you to setup your character controls with a simple project instead of trying to modify what I did in the Temple of Doom… the fox character example I provide with the library is a much simpler playground for your own experiments.

2 Likes
3

@felixmariotto : Apologies. I didn’t realize it wasn’t indenting. Here is the code :

switch( name ) {
	case 'walkLeft' : 
		if (currentAction) currentAction.stop();
		link_walkLeft.playLoop();
		currentAction = link_walkLeft;
		this.currentMovement = 'walkLeft';
	break;
	case 'walkRight' : 
		if (currentAction) currentAction.stop();
		link_walkRight.playLoop();
		currentAction = link_walkRight;
		this.currentMovement = 'walkRight';
	break;
	case 'idleLeft' : 
		if (currentAction) currentAction.stop();
		link_walk.setFrame( 4 );
		this.currentMovement = 'idleLeft';
	break;
	case 'idleRight' : 
		if (currentAction) currentAction.stop();
		link_walk.setFrame( 6 );
		this.currentMovement = 'idleRight';
	break;
	case 'jumpLeft' :
		if (currentAction) currentAction.stop();
		link_walk.visible = false;
		link_jumpLeft.playOnce ( );
		spriteMixer.addEventListener('finished', function(event) {
			link_jump.visible = false;
			link_walk.visible = true;
		});
		this.currentMovement = 'jumpLeft';
	break;
	case 'jumpRight' :
		if (currentAction) currentAction.stop();
		link_walk.visible = false;
		link_jumpRight.playOnce ( );
		spriteMixer.addEventListener('finished', function(event) {
			link_jump.visible = false;
			link_walk.visible = true;
		});
		this.currentMovement = 'jumpRight';
	break;
	case 'faceBack' :
		if (currentAction) currentAction.stop();
		link_walk.setFrame( 16 );
		this.currentMovement = 'faceBack';
	break;
	case 'faceFront' :
		if (currentAction) currentAction.stop();
		link_walk.setFrame( 17 );
		this.currentMovement = 'faceFront';
	break;
};
4

Everything is explained clearly in the readme on Github, just try to do as in the example. And if you cannot use it, don’t use it, or at least stop spamming the forum about this.

2 Likes
5

ok, thanks for the tip on the readme. :slight_smile: