Jump to content

I need help setting alpha according to the y coordinate of sprite


angryMonkey
 Share

Recommended Posts

I have been trying to find a way to set the game's main sprite to increase transparency as it rises to the top of the game canvas. I'm honestly rather lost on this. any help would be super appreciated. :D

<!DOCTYPE html><title>flying cat </title><canvas width="1190" height="238" style="border: 1px dashed black"></canvas><script src="requestAnimationFramePolyfill.js"></script><script>var spriteObject =   {  	sourceX: 0, 	sourceY: 0,	sourceWidth: 64,	sourceHeight: 64,	  x: 0,	  y: 0,	  width: 64,	  	height: 64,	  	vx: 0,	 	vy: 0, 	 	alpha : 1,  	};// Main program//The canvas drawing surface	var canvas = document.querySelector("canvas");	var drawingSurface = canvas.getContext("2d");//An array to store the sprites	var sprites = [];//the distantBackground sprite	var distantBackground = Object.create(spriteObject);	distantBackground.sourceY = 64;	distantBackground.sourceWidth = 1190;distantBackground.sourceHeight = 238;	distantBackground.width = 1190;	distantBackground.height = 238;	distantBackground.x = 0;	distantBackground.y = 0;	sprites.push(distantBackground);//the foreground spritevar foreground = Object.create(spriteObject);	foreground.sourceY = 302;foreground.sourceWidth = 1190;	foreground.sourceHeight = 238;	foreground.width = 1190;	foreground.height = 238;	foreground.x = 0;foreground.y = 0;	sprites.push(foreground);function getScreenCoordinates(sprite) {    /* We can determine the X and Y position on the screen without having to modify the sprite's actual X and Y positions */    var screenX;    var screenY;    // The following formula is used to find the screen position of the object    // 1. Get the position on the screen by subtracting the camera's position from it    screenX = cat.x - camera.x;    screenY = cat.y - camera.y;    // 2. Multiply by the depth coefficient for parallax    screenX *= spriteObject.depth;    screenY *= spriteObject.depth;    // 3. Make sure the camera is pointing at the center of the canvas instead of the top    // left corner by adding half the canvas width and height    screenX += canvas.width * 0.5;    screenY += canvas.height * 0.5;    // 4. The sprite is currently positioned by its top left corner, let's make it based    // on the center of the sprite:    screenX -= cat.width * 0.5;    screenY -= cat.height * 0.5;    return {        x : screenX,        y : screenY    }}//GameWorld and camera objects	var gameWorld =	 { 	 x: 0, 	 y: 0,  width: foreground.width,  height: foreground.height	};//The camera has 2 new properties: "vx" and "previousX"var camera =	{ 	 x: 0,	 	 y: 0,	  width: canvas.width,	  height: canvas.height,	  vx: 0,  previousX: 0,    //The camera's inner scroll boundaries 	 rightInnerBoundary: function()  {  	 return this.x + (this.width * 0.75);  },  leftInnerBoundary: function()  {    return this.x + (this.width * 0.25);  }};//Center the camera over the gameWorldcamera.x = (gameWorld.x + gameWorld.width / 2) - camera.width / 2;	camera.y = (gameWorld.y + gameWorld.height / 2) - camera.height / 2;//Create the cat sprite and center it	var cat = Object.create(spriteObject);cat.x = (gameWorld.x + gameWorld.width / 2) - cat.width / 2;cat.y = 174;sprites.push(cat);var screen = getScreenCoordinates(cat);if(screen.y < canvas.height * 0.5) {    sprite.alpha = 1;}//Load the image	var image = new Image();	image.addEventListener("load", loadHandler, false);	image.src = "parallaxScrollingTileSheet.png";canvas.addEventListener("mousedown", mousedownHandler, false);window.addEventListener("mouseup", mouseupHandler, false);function mousedownHandler(event){	var mouseX = event.pageX - canvas.offsetLeft;	var mouseY = event.pageY - canvas.offsetTop;			var left = cat.x;	var right = cat.x + cat.width;	var top = cat.y;	var bottom = cat.y + cat.height;			if(mouseX < left)	{		cat.vx -= 5;	}		if(mouseX > right)	{		cat.vx += 5;	}		if(mouseY < top)	{		cat.vy -= 5;	}		if(mouseY > bottom)	{		cat.vy += 5;	}	}function mouseupHandler(event){	cat.vx = 0;	cat.vy = 0;}//Arrow key codesfunction loadHandler(){	update();}	function update(){  //The animation loopcat.x += cat.vx;cat.y += cat.vy; requestAnimationFrame(update, canvas); if (cat.x < 0)  {    cat.x = 0;  }  if (cat.y < 0)  {    cat.y = 0;  }  if (cat.x + cat.width > canvas.width)  {    cat.x = canvas.width - cat.width;  }  if (cat.y + cat.height > canvas.height)  {    cat.y = canvas.height - cat.height;  }// here is the if statement and formula I was trying to handle this with.   if (cat.y < canvas.height * 0.5)  {  	cat.alpha -= 0.1;  }  	        //Alternative way to set the cat's world boundaries using 2 if statements  /*  if(cat.x < gameWorld.x)  {    cat.x = gameWorld.x;  }   if(cat.x + cat.width > gameWorld.x + gameWorld.width)  {    cat.x = gameWorld.x + gameWorld.width - cat.width;  }  */    //Scroll the cameracat.x = Math.max(0, Math.min(cat.x + cat.vx, gameWorld.width - cat.width));  if(cat.x < camera.leftInnerBoundary())  {    camera.x = Math.floor(cat.x - (camera.width * 0.25));  }  if(cat.x + cat.width > camera.rightInnerBoundary())  {    camera.x = Math.floor(cat.x + cat.width - (camera.width * 0.75));  }    //The camera's world boundaries  if(camera.x < gameWorld.x)  {    camera.x = gameWorld.x;  }  if(camera.x + camera.width > gameWorld.x + gameWorld.width)  {    camera.x = gameWorld.x + gameWorld.width - camera.width;  }    //Figure out the camera's velocity by subtracting its position in the  //previous frame from its position in this frame  camera.vx = camera.x - camera.previousX;    //Move the distantBackground at half the speed of the camera  distantBackground.x += camera.vx / 2;    //Capture the camera's current x position so we can use it as the  //previousX value in the next frame  camera.previousX = camera.x;  render();}function render(event){   drawingSurface.clearRect(0, 0, canvas.width, canvas.height);    drawingSurface.save();    //Move the drawing surface so that it's positioned relative to the camera  drawingSurface.translate(-camera.x, -camera.y);  if(spriteObject.visible)  	  {  	    //Save the current state of the drawing surface before it's rotated  	    drawingSurface.save();  	    //Rotate the canvas  	   var screen = getScreenCoordinates(sprite);  	   drawingSurface.globalAlpha = sprite/alpha; drawingSurface.translate(-camera.x, -camera.y);(    spriteObject.image,    spriteObject.sourceX, spriteObject.sourceY,    spriteObject.width, spriteObject.height,    screen.x, screen.y,    spriteObject.width, spriteObject.height);  	   }  //Loop through all the sprites and use their properties to display them   if(sprites.length !== 0)  {    for(var i = 0; i < sprites.length; i++)    {      var sprite = sprites[i];      drawingSurface.drawImage      (image, sprite.sourceX, sprite.sourceY, sprite.sourceWidth, sprite.sourceHeight, Math.floor(sprite.x), Math.floor(sprite.y), sprite.width, sprite.height);     }  }    drawingSurface.restore();}</script>
Link to comment
Share on other sites

Your going to want to change the alpha value to a decimal.

 

Okay, so I've used phaser and it looks like your using pure javascript (which is fine) but I will do my best here.

 

I can't really run your code with a large snippet like that with images but I will try to tell you what I would do. You would want to do a quick test like: spriteObject.alpha = .5; If that works and the sprite is halfway transparent you will then want to add in your render loop (or whatever time loop your using) to set the transparency divided by the canvas height. In this case, 238. The idea being it goes from 100% visible downwards to invisible the higher it gets on the canvas until your comfortable with the look of it. Might need to use math.round or other function - just make sure its in decimal..

 

If you need more help, could be more specific on where your having trouble? Have you been able to set any transparency working?

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...