Add water background

This commit is contained in:
RedEnchilada 2016-05-08 18:26:36 -05:00
parent 07221aeaf4
commit 804c9c2e77
6 changed files with 84 additions and 21 deletions

BIN
assets/tiles/water.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 404 B

BIN
assets/tiles/waterback.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 B

View file

@ -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: {

View file

@ -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() {

View file

@ -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) {

15
other/ScrollPlane.js Normal file
View file

@ -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;
};