From 804c9c2e77935427fbb9f626366e966d2cac0cde Mon Sep 17 00:00:00 2001 From: RedEnchilada Date: Sun, 8 May 2016 18:26:36 -0500 Subject: [PATCH] Add water background --- assets/tiles/water.png | Bin 0 -> 404 bytes assets/tiles/waterback.png | Bin 0 -> 177 bytes data/LevelDatabase.js | 35 ++++++++++++++-------------- level/Level.js | 46 ++++++++++++++++++++++++++++++++++--- main/Renderer.js | 9 +++++++- other/ScrollPlane.js | 15 ++++++++++++ 6 files changed, 84 insertions(+), 21 deletions(-) create mode 100644 assets/tiles/water.png create mode 100644 assets/tiles/waterback.png create mode 100644 other/ScrollPlane.js diff --git a/assets/tiles/water.png b/assets/tiles/water.png new file mode 100644 index 0000000000000000000000000000000000000000..d43bae22c3893a72a9b351e55e9a7ad76bd58134 GIT binary patch literal 404 zcmeAS@N?(olHy`uVBq!ia0vp^%0R5a!VDza4B}P-DgFST5Z6@QjLwPw*KGWM{__9t z-~X@R3p^r=85p>QL70(Y)*K0-AbW|Y zuPgflRt_;s^^}Jn*8zoOGeaUuobz*YQ}arITm}Z`qSVBa)D(sC%#sWRcTeAd6une- zp!ii!7sn8d^Jgzz>^*G2!Im(=iosr3rlK+U4Wm-)-*l^jNnyUL?Bb`me0nbbp}BLP zZGVTh>yfJE-tPp>e>(`?mUu4~{l4}}N5!?T?@~S6kG^=9`nqx!k8XGLEw8JEZQ|vZ z&-@L#{q13`VR6b^{?rn6e+HA4r?y);OuD7gy8WKp`LLU^4FUi5nCfe`a7nH@81rno zJD2H+kkVU@k|8M*XYPG*gW-*9*{#WCD-Z7z*J|M3Tky8j|8Mjn&!(!MDvCmiY}_+i qv*%wHYPBq%oK<>H zYGO%hib8p2Nrr;Er*A-tUMf3KT-4LWF@)oK@|v7q=MI3u5uiJi4l#ba?C8h=(&_2y K=d#Wzp$P!0o-FYI literal 0 HcmV?d00001 diff --git a/data/LevelDatabase.js b/data/LevelDatabase.js index 282ab03..ce949cd 100644 --- a/data/LevelDatabase.js +++ b/data/LevelDatabase.js @@ -56,27 +56,28 @@ LevelDatabase = { ], rocks: [ - {x: 768, y: 798, z: 0, type: "small"}, - {x: 738, y: 768, z: 0, type: "large"}, - {x: 768, y: 738, z: 0, type: "small"}, - {x: 798, y: 768, z: 0, type: "large"}, + {x: 768, y: 798, z: 80, type: "small"}, + {x: 738, y: 768, z: 80, type: "large"}, + {x: 768, y: 738, z: 80, type: "small"}, + {x: 798, y: 768, z: 80, type: "large"}, - {x: 1536, y: 798, z: 0, type: "small"}, - {x: 1506, y: 768, z: 0, type: "large"}, - {x: 1536, y: 738, z: 0, type: "small"}, - {x: 1566, y: 768, z: 0, type: "large"}, + {x: 1536, y: 798, z: 80, type: "small"}, + {x: 1506, y: 768, z: 80, type: "large"}, + {x: 1536, y: 738, z: 80, type: "small"}, + {x: 1566, y: 768, z: 80, type: "large"}, - {x: 768, y: 1298, z: 0, type: "small"}, - {x: 738, y: 1268, z: 0, type: "large"}, - {x: 768, y: 1238, z: 0, type: "small"}, - {x: 798, y: 1268, z: 0, type: "large"}, + {x: 768, y: 1298, z: 80, type: "small"}, + {x: 738, y: 1268, z: 80, type: "large"}, + {x: 768, y: 1238, z: 80, type: "small"}, + {x: 798, y: 1268, z: 80, type: "large"}, - {x: 1536, y: 1298, z: 0, type: "small"}, - {x: 1506, y: 1268, z: 0, type: "large"}, - {x: 1536, y: 1238, z: 0, type: "small"}, - {x: 1566, y: 1268, z: 0, type: "large"}, + {x: 1536, y: 1298, z: 80, type: "small"}, + {x: 1506, y: 1268, z: 80, type: "large"}, + {x: 1536, y: 1238, z: 80, type: "small"}, + {x: 1566, y: 1268, z: 80, type: "large"}, - {x: 1024, y: 1024, z: 0, type: "large"} + {x: 1024, y: 1024, z: -50, type: "large"}, + {x: 1024, y: 1024, z: 50, type: "large"} ], spawn: { diff --git a/level/Level.js b/level/Level.js index 145a7e5..b823749 100644 --- a/level/Level.js +++ b/level/Level.js @@ -7,11 +7,24 @@ Level = function(levelName) { z: 0, angle: 0, fwdX: 0, - fwdY: 0 + fwdY: 0, + momx: 0, + momy: 0, + oldangle: 0 }; level.map = LevelDatabase[levelName]; + // Scroll planes + var waterBack = ScrollPlane(0, 20, 1, 1, 0, 0, "waterback", 130); + var waves = []; + + for (var i = 1024; i > 150; i *= 0.85) { + waves.push(ScrollPlane( + i, -3000/i, 40, 250/i, (i-420)/2, (Math.random()*300-150)/i, "water", Math.round(i/8) + )); + } + // A set of blocks that entities are contained in. // Blocks two grid spaces away (in a square, corners excluded) from the camera // are thunk and rendered in a frame. @@ -25,6 +38,11 @@ Level = function(levelName) { var dolphin; level.init = function() { + level.stage.addChild(waterBack.plane); + waves.forEach(function(p) { + level.stage.addChild(p.plane); + }); + dolphin = Dolphin(level, level.map.spawn.axis, level.map.spawn.position, level.map.spawn.z); placeEntityInGrid(dolphin); @@ -54,8 +72,8 @@ Level = function(levelName) { targetX = dolphin.position.x - 250*Math.cos(dolphin.angle); targetY = dolphin.position.y - 250*Math.sin(dolphin.angle); - camera.x += (targetX - camera.x) / 4; - camera.y += (targetY - camera.y) / 4; + camera.x += camera.momx = (targetX - camera.x) / 4; + camera.y += camera.momy = (targetY - camera.y) / 4; camera.z = dolphin.position.z + camera.fwdY; camera.angle = Math.atan2(dolphin.position.y - camera.y, dolphin.position.x - camera.x) + camera.fwdX; @@ -84,6 +102,11 @@ Level = function(levelName) { return; } + if ((entity.position.z > 0) != (camera.z > 0) && Math.abs(camera.z) > 120) { + // On the wrong side of the water. + return; + } + // In the viewport. sprite.visible = true; sprite.alpha = Math.min(4 - (distance/256), 1); @@ -114,6 +137,23 @@ Level = function(levelName) { } catch (e) {} level.stage.setChildIndex(sprite, index); }); + + // Scroll planes + var xScroll = Math.sqrt(camera.momx*camera.momx + camera.momy*camera.momy) + * Math.sin(Math.atan2(camera.momy, camera.momx)-camera.angle); + + var turn = camera.angle - camera.oldangle; + camera.oldangle = camera.angle; + turn = (turn + Math.PI * 3) % (2 * Math.PI) - Math.PI; + + waves.forEach(function(p) { + p.plane.tilePosition.x -= (xScroll*p.moveFactor) + (turn*p.turnFactor) - p.driftFactor; + + p.plane.position.y = 150 - camera.z*p.moveFactor + p.z; + }); + + waterBack.plane.position.y = Math.max(0, Math.min(150-(camera.z/4), 170-(camera.z*1.5))); + waterBack.plane.scale.y = 280 - waterBack.plane.position.y; } level.end = function() { diff --git a/main/Renderer.js b/main/Renderer.js index 588fbe1..ddee39a 100644 --- a/main/Renderer.js +++ b/main/Renderer.js @@ -14,7 +14,14 @@ Renderer = (function() { document.body.appendChild(renderer.view); - PIXI.loader.add("assets/sprites.json").load(next); + PIXI.loader.add([ + "assets/sprites.json", + + "assets/tiles/water.png", + "assets/tiles/waterback.png", + + "assets/type.fnt" + ]).load(next); } Renderer.sprite = function(name) { diff --git a/other/ScrollPlane.js b/other/ScrollPlane.js new file mode 100644 index 0000000..61bbe84 --- /dev/null +++ b/other/ScrollPlane.js @@ -0,0 +1,15 @@ +ScrollPlane = function(x, z, height, moveFactor, turnFactor, driftFactor, graphic, zIndex) { + var scrollPlane = {}; + + scrollPlane.plane = PIXI.extras.TilingSprite.fromImage("assets/tiles/"+graphic+".png", + 500/moveFactor, height); + scrollPlane.z = z; + scrollPlane.moveFactor = moveFactor; + scrollPlane.turnFactor = turnFactor; + scrollPlane.driftFactor = driftFactor; + scrollPlane.plane.tilePosition.x = x; + scrollPlane.plane.ZINDEX = zIndex; + scrollPlane.plane.scale.set(moveFactor, moveFactor); + + return scrollPlane; +}; \ No newline at end of file