problems using renderTexture for car burnout

[milkAwhat]

I'm struggling how to manipulate renderTexture while blitting.

 

As of now, I have a burnout in a tilesheet, and the burnout animates when the arrow keys are pressed. My logic is to create a renderTexture of the burnout, have the renderTexture leave a copy of the burnout sprite behind the original burnout. This would mimic a car burnout.

 

The problem I'm having is that the renderTexture sprite is moving with the original burnout and not staying behind. I have a burnout circle running around the screen instead of staying stuck on the stage where it was burnt out. My problem is trying to figure out how to make the renderTexture burnout stay in one position on the stage.

 

Also I posted this in Coding and Game Design and realized it is more fitting in this forum. How can I delete the post in Coding and Game Design so there are not duplicates?

<script src="pixi.min.js"></script><script src="spriteUtilities.js"></script><script src="keyboard.js"></script><script>//Test that Pixi is working//console.log(PIXI);var renderer = PIXI.autoDetectRenderer(970, 418, {antialias: false, transparent: false, resolution: 1});document.body.appendChild(renderer.view);var stage = new PIXI.Container();renderer.backgroundColor = 0xeeeeee;renderer.render(stage);loader = PIXI.loader  .add("nasSkidtileSheetv2.png")  .load(onAssetsLoaded);var framedSkid,	renderTexture,	sprite,	state;var renderPosition = new PIXI.Point(100, 100);function onAssetsLoaded() {	// Burnout sprite	var skid = new PIXI.Sprite(PIXI.loader.resources["nasSkidtileSheetv2.png"].texture);	PIXI.utils.TextureCache["nasSkidtileSheetv2.png"];	var skid = PIXI.utils.TextureCache["nasSkidtileSheetv2.png"];	var su = new SpriteUtilities(PIXI);	var skidFrame = su.filmstrip("nasSkidtileSheetv2.png", 271, 269);	framedSkid = new PIXI.extras.MovieClip(skidFrame);	stage.addChild(framedSkid);	framedSkid.animationSpeed = 0.5;	framedSkid.x = 0;	framedSkid.y = 0;	framedSkid.vx = 0;	framedSkid.vy = 0;	// Burnout Copy	renderTexture = new PIXI.RenderTexture(renderer, renderer.width, renderer.height);	sprite = new PIXI.Sprite(renderTexture);	stage.addChild(sprite);	sprite.x = 0;	sprite.y = 0;	sprite.vx = 0;	sprite.vy = 0;	//Capture the keyboard arrow keys	var left = keyboard(37),		up = keyboard(38),		right = keyboard(39),		down = keyboard(40);		//Left arrow key `press` method	left.press = function() {	  //Change the cat's velocity when the key is pressed	  framedSkid.vx = -5;	  framedSkid.vy = 0;	  framedSkid.play();	};		//Left arrow key `release` method	left.release = function() {	  //If the left arrow has been released, and the right arrow isn't down,	  //and the cat isn't moving vertically:	  //Stop the cat	  if (!right.isDown && framedSkid.vy === 0) {		framedSkid.vx = 0;		framedSkid.stop();    }	};		//Up	up.press = function() {	  framedSkid.vy = -5;	  framedSkid.vx = 0;	  framedSkid.play();	};	up.release = function() {	  if (!down.isDown && framedSkid.vx === 0) {		framedSkid.vy = 0;		framedSkid.stop();	  }	};		//Right	right.press = function() {	  framedSkid.vx = 5;	  framedSkid.vy = 0;	  framedSkid.play();	};	right.release = function() {	  if (!left.isDown && framedSkid.vy === 0) {		  framedSkid.vx = 0;		  framedSkid.stop();	  }	};		//Down	down.press = function() {	  framedSkid.vy = 5;	  framedSkid.vx = 0;	  framedSkid.play();	};	down.release = function() {	  if (!up.isDown && framedSkid.vx === 0) {		framedSkid.vy = 0;		framedSkid.stop();	  }	};		state = play;	gameLoop();}function gameLoop() {	renderTexture.render(framedSkid);	renderTexture.render(framedSkid, renderPosition, false);    sprite.texture = renderTexture;	    // render the stage container    renderer.render(stage);    requestAnimationFrame(gameLoop);	state();}function play() {  //Apply the velocity values to the sprite’s position to make it move  framedSkid.x += framedSkid.vx;  framedSkid.y += framedSkid.vy;    sprite.x += framedSkid.vx;  sprite.y += framedSkid.vy;}</script>

[ivan.popelyshev]

Is webgl working on your comp? We just fixed issue for canvas: https://github.com/pixijs/pixi.js/issues/2197, may be you are using canvas fallback and you stumbled across the same thing.

[milkAwhat]

Thanks @ivan.popelyshev, I just ran this and it's telling me webgl

if(renderer instanceof PIXI.CanvasRenderer) {    //canvas renderer	console.log(renderer + " is canvas");} else {    //webgl renderer	console.log(renderer + " is webgl");}

I'm thinking I need to manipulate the sprite.x and sprite.y's positioning separate from frameSkid's x and y. I'm telling it to follow exactly what frameSkid's x and y are doing which is wrong.

 

Also, do you know if we can delete a post or no?

[ivan.popelyshev]

I'm thinking I need to manipulate the sprite.x and sprite.y's positioning separate from frameSkid's x and y. I'm telling it to follow exactly what frameSkid's x and y are doing which is wrong.

 

Also, do you know if we can delete a post or no?

 

Im thinking the same, you have to look at their matrices and stuff

Even if we can, why do that? Let it die.