Permalink
Browse files

panning and zoom works. 1 background layer is displaying

  • Loading branch information...
1 parent af21be2 commit 1f5afd46431542c9de147459b52cd44a406526bb @zachwe zachwe committed Jun 21, 2011
View
9 app.js
@@ -33,5 +33,14 @@ app.get('/', function(req, res){
res.render('index');
});
+/*app.get('/images/BLUE_GRASS_FG_1.png', function(req, res){
+ path = '/images/BLUE_GRASS_FG_1.png';
+ fs.readFile(path, function(err, data){
+ res.writeHead(200);
+ res.write(data);
+ res.end();
+ });
+});*/
+
app.listen(3000);
console.log("Express server listening on port %d", app.address().port);
View
@@ -1,34 +0,0 @@
-$(document).ready(function() {
- var fgContext = $('#foreground').getContext();
- var bgContext0 = $('#bg0').getContext();
-
- var viewport = {
- height: 600,
- width: 800,
- zoom: 0,
- x0: -400,
- x1: 400,
- y0: -300,
- y1: 300,
-
- };
-
- //adjust viewport to reflect new zoom level
- function zoom(level) {
-
- }
-
- function drawMap() {
- dimensions = getViewportDimensions();
- }
-
- function getViewportDimensions() {
- var zoom = viewport.zoom;
- var x1 = viewport.x;
-
- var x2 = x1 + 600 - zoom * 200;
-
- var y1
-
- }
-});
View
@@ -0,0 +1,3 @@
+viewport
+ zoom
+ global x
View
@@ -0,0 +1,229 @@
+$(document).ready(function() {
+ var canvas = document.getElementById('foreground');
+ var fgContext = canvas.getContext('2d');
+ var canvas = document.getElementById('bg0');
+ var bgContext = canvas.getContext('2d');
+
+//initial values for viewport
+ var viewport = {
+ height: 600,
+ width: 800,
+ zoom: .5,
+ x0: 0,
+ x1: 800,
+ y0: 0,
+ y1: 600,
+ //ground level
+ groundY: 200,
+ //zoomed out
+ currView: 0,
+ };
+
+//default zoomed in left-hand position
+ var defaultLeft = {
+ zoom: 1.0,
+ x0: 0,
+ viewCode: 1,
+ };
+
+//default zoomed in right-hand position
+ var defaultRight = {
+ zoom: 1.0,
+ x0: 400,
+ viewCode: 2,
+ }
+
+//stores images for tiling
+ var bgTiles = {};
+//stores bg static images;
+ var bgImages = {}
+//stores images that live on the foreground
+ var fgImages = {};
+
+//speed that viewport is moved
+ var incr;
+ //whether or not we are in motion;
+ var moving = false;
+
+//load all the images and store them, then call redraw()
+ function init() {
+ var bg1TileSrcs = {'BLUE_GRASS_FG_1.png': {height: 187, width: 332, defaultY: viewport.height - viewport.groundY, index: 1},
+ 'BLUE_GRASS_FG_2.png': {height: 33, width: 332, defaultY: viewport.height - viewport.groundY - 33, index: 2},
+ };
+ var bg1ImgSrcs = {'SLINGSHOT_01_BACK.png': {height: 199, width: 38, defaultY: viewport.height - viewport.groundY - 124, defaultX: 40},
+ 'SLINGSHOT_01_FRONT.png': {height: 124, width: 43, defaultY: viewport.height - viewport.groundY - 124, defaultX: 40},
+ };
+ var fgImgSrcs = {
+ 'INGAME_BIRDS_PIGS.png': {height: 920, width: 859},
+ 'SLINGSHOT_RUBBERBAND.png': {height: 16, width: 14},
+ };
+ var loaded = 0;
+ var tileKeys = Object.keys(bg1TileSrcs);
+ var bgKeys = Object.keys(bg1ImgSrcs);
+ var fgKeys = Object.keys(fgImgSrcs);
+
+ var totalImages = tileKeys.length + bgKeys.length + fgKeys.length;
+
+ //load tile images
+ var key;
+ for(var i = 0, ll = tileKeys.length; i < ll; i++) {
+ key = tileKeys[i];
+ data = bg1TileSrcs[key];
+
+ var img = new Image();
+ img.src = '/images/' + key;
+ img.height = data.height;
+ img.width = data.width;
+ img.defaultY= data.defaultY;
+ img.index = data.index;
+
+ bgTiles[key] = img;
+ //when all images are loaded, draw.
+ img.onload = function() {
+ loaded++;
+ if(loaded == totalImages) {
+ redraw();
+ }
+ }
+ };
+
+ //load non-tile bg images
+ for(var i = 0, ll = bgKeys.length; i < ll; i++) {
+ key = bgKeys[i];
+ data = bg1ImgSrcs[key];
+
+ var img = new Image();
+ img.src = '/images/' + key;
+ img.height = data.height;
+ img.defaultY = data.defaultY;
+ img.defaultX = data.defaultX;
+
+ bgImages[key] = img;
+ //when all images are loaded, draw;
+ img.onload = function() {
+ loaded++;
+ if(loaded == totalImages) {
+ redraw();
+ }
+ }
+ }
+
+ //load foreground images
+ for(var i = 0, ll = fgKeys.length; i < ll; i++) {
+ key = fgKeys[i];
+ data = fgImgSrcs[key];
+
+ var img = new Image();
+ img.src = '/images/' + key;
+ img.height = data.height;
+
+ img.defaultY = data.defaultY;
+ img.defaultX = data.defaultX;
+
+ fgImages[key] = img;
+ //when all images are loaded, draw;
+ img.onload = function() {
+ loaded++;
+ if(loaded == totalImages) {
+ redraw();
+ }
+ }
+ }
+ }
+
+//called whenever some change to the viewport is occurring.
+ function modifyViewport(zoom, x) {
+ moving = true;
+ if(x > viewport.x0) {
+ incr = 4;
+ } else {
+ incr = -4
+ }
+ if(zoom != viewport.zoom) {
+ if(viewport.x0 != x) {
+ var zoomDiff = ((zoom - viewport.zoom) / Math.abs((viewport.x0 - x))) * incr;
+ } else {
+ var zoomDiff = (2.0 / 400);
+ }
+ }
+ //set the redraw interval
+ var interval = setInterval(function() {
+ if(! transitionView(x, zoom, zoomDiff)) {
+ clearInterval(interval);
+ }
+ }, 10);
+ }
+
+//handles a single frame of animation by adjusting image size and position and redrawing the canvas.
+ function transitionView(goalX, goalZoom, zoomDiff) {
+ if(Math.abs(viewport.x0 - goalX) < 2 && (zoomDiff == undefined || Math.abs(viewport.zoom - goalZoom) < .01)) {
+ return false;
+ } else {
+
+ viewport.x0 += incr;
+ viewport.x1 += incr;
+ if(goalZoom != undefined) {
+ viewport.zoom += zoomDiff;
+ }
+ redraw();
+ return true;
+ }
+ }
+
+ //redraw the entire canvas with updated positions.
+ function redraw() {
+ bgContext.clearRect(0, 0, viewport.width, viewport.height);
+
+ //tile images
+ for(var i in bgTiles) {
+ var img = bgTiles[i]
+ //scaled dimensions of the image to account for zoom
+ adjustedWidth = img.width * viewport.zoom;
+ adjustedHeight = img.height * viewport.zoom;
+
+ //initial width of the image, adjusted for the viewport position
+ var initialWidth = (img.width - viewport.x0) * viewport.zoom;
+ while(initialWidth < 0) {
+ initialWidth += adjustedWidth;
+ }
+ initialWidth = Math.ceil(initialWidth);
+
+ //offset of the first image, in terms of the images original size.
+ var initialOffset = img.width - (initialWidth / viewport.zoom);
+ var horzPos = 0;
+
+ var y;
+ switch(img.index){
+ case 1: y = viewport.height - viewport.groundY;
+ break;
+ case 2: y = viewport.height - viewport.groundY - img.height * viewport.zoom;
+ }
+
+ //first tile
+ bgContext.drawImage(img, initialOffset, 0, initialWidth / viewport.zoom, img.height, 0, y, initialWidth, adjustedHeight);
+
+ horzPos += initialWidth;
+
+ //filler tiles
+ adjustedWidth = Math.ceil(adjustedWidth);
+ while(horzPos + adjustedWidth <= viewport.x1 - viewport.x0) {
+ bgContext.drawImage(img, horzPos, y, adjustedWidth, adjustedHeight);
+ horzPos += adjustedWidth;
+ }
+
+ //last tile
+ var finalWidth = (viewport.x1 - viewport.x0) - horzPos;
+ bgContext.drawImage(img, 0, 0, finalWidth / viewport.zoom, img.height, horzPos, y, finalWidth, adjustedHeight);
+ }
+ }
+
+ $('canvas').click(function() {
+ if(!moving) {
+ modifyViewport(defaultRight.zoom, defaultRight.x0);
+ }
+ });
+
+
+
+ init();
+});
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit 1f5afd4

Please sign in to comment.