Jump to content

problems using renderTexture for car burnout


milkAwhat
 Share

Recommended Posts

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>

post-15426-0-53193200-1447875894_thumb.p

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...