angryMonkey Posted January 19, 2015 Share Posted January 19, 2015 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. <!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> Quote Link to comment Share on other sites More sharing options...
kahootbird Posted January 20, 2015 Share Posted January 20, 2015 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? 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.