Add water background
This commit is contained in:
parent
07221aeaf4
commit
804c9c2e77
6 changed files with 84 additions and 21 deletions
BIN
assets/tiles/water.png
Normal file
BIN
assets/tiles/water.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 404 B |
BIN
assets/tiles/waterback.png
Normal file
BIN
assets/tiles/waterback.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 177 B |
|
@ -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: {
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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
15
other/ScrollPlane.js
Normal 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;
|
||||
};
|
Loading…
Add table
Reference in a new issue