Laumark

Wrong animation technique?

Recommended Posts

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";
			}
		}
	}

 

Share this post


Link to post
Share on other sites

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;
}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.