Wrong animation technique?

[Laumark]

I'm doing a small animation test, and even the simplest animation seems to stutter?
What am I doing wrong?

Have a look here:

http://christianlaumark.dk/Portfolio3/test2.html

 

	//Avatars
	var Container = PIXI.Container,
		loader = PIXI.loader,
		Rectangle = PIXI.Rectangle,
		Graphics = PIXI.Graphics,
		Sprite = PIXI.Sprite,
		resources = PIXI.loader.resources;

	//Setting the stage
	var stage = new Container();
	var myView = document.getElementById('main');
	var renderer = PIXI.autoDetectRenderer(window.innerWidth,window.innerHeight,myView);
	renderer.view.className = "rendererView";
	document.body.appendChild(renderer.view);

	var wW = window.innerWidth;
	var wH = window.innerHeight;

	loader
	.add([
		"images/portfoliozepper.png",
		"images/bg.png"
	])
	.load(setup);

	var dir = "right";
	var bob = "up";

	function setup() {

		console.log("starting setup");

		bg = new Sprite(resources["images/bg.png"].texture);
		zep = new Sprite(resources["images/portfoliozepper.png"].texture);

		bg.position.set(wW/2,wH/2);
		bg.anchor.set(0.5,0.5);
		bg.scale.set(2,2);
		zep.position.set(100,wH/2);
		zep.anchor.set(0.5,0.5);
		zep.scale.set(-0.5,0.5);

		stage.addChild(bg,zep);

		state = idle;

		gameLoop();

	}

	function gameLoop() {

		requestAnimationFrame(gameLoop);

		state();

		renderer.render(stage);

	}

	function idle() {
		if (dir == "right") {
			if (zep.x < wW) {
				zep.x += 1.5;
			} else {
				dir = "left";
				zep.scale.set(0.5,0.5);
			}
		} else if (dir == "left") {
			if (zep.x > 0) {
				zep.x -= 1.5;
			} else {
				zep.scale.set(-0.5,0.5);
				dir = "right";
			}
		}
		if (bob == "up") {
			if (zep.y > wH/4) {
				zep.y -= 0.5;
			} else {
				bob = "down";
			}
		} else if (bob == "down") {
			if (zep.y < (wH/2 + wH/4)) {
				zep.y += 0.5;
			} else {
				bob = "up";
			}
		}
	}

 

[ecv]

It looks smooth to me

[catafest]

This is your problem ...your image is render from left to right and right to end !???

Then just set one scale not "- scale"  not both ...

Take a look at:

zep.scale.set

[ivan.popelyshev]

Your code is ok. But its better to use texture rotation. 

var texRight = resources["images/portfoliozepper.png"].texture;
// clone the texture
var texLeft = new PIXI.texture(tex1.baseTexture, tex1.frame);
// flip it!
texLeft.rotate = 12;

//look at velocity, change the texture
if (vx>=0) {
   zep.texture = texRight;
} else {
   zep.texture = texLeft;
}

 

[ivan.popelyshev]

Also, its better to use deltaTime and not just += 1.5

var ticker = new PIXI.ticker.Ticker(); // or you can use PIXI.ticker.shared - already existing instance
ticker.autoStart = false; // we want it to start in setup() and not here
ticker.add(function(deltaTime) {
    var dt = deltaTime / (1000.0/60.0); //your original code is for 60 ticks per second, right?
    state(dt);
    renderer.render(stage);
});

function idle(dt){ 
 //...
   zep.x += 1.5 * dt;
}

function setup() {
   //...
   ticker.start();
}

That will take care of smoothing if you have some lags.