Laumark Posted June 2, 2016 Share Posted June 2, 2016 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"; } } } Quote Link to comment Share on other sites More sharing options...
ecv Posted June 2, 2016 Share Posted June 2, 2016 It looks smooth to me Quote Link to comment Share on other sites More sharing options...
catafest Posted June 2, 2016 Share Posted June 2, 2016 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 2, 2016 Share Posted June 2, 2016 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; } Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 2, 2016 Share Posted June 2, 2016 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.