Commits

uzudil committed 22e8db1

map transitions

  • Participants
  • Parent commits 204f6da

Comments (0)

Files changed (7)

File zzoxx/css/zzoxx.css

 	position: absolute;
 	top: 0;
 	left: 0;
-	opacity: 0.9;
-	background: #fff;
+/*	opacity: 0.9;
+	background: #fff;*/
 	margin: 0;
 	padding: 0;
 	color: #000;
 	font-size: 14px;
 	text-align: center;
-	z-index: 10000;
+	z-index: 12000;
 	font-weight: 900;
 	text-transform: uppercase;
 }
 .droppable_hover {
     border-color: orange;
 }
+
+#canvas_cover {
+    display: none;
+    position: absolute;
+    background: #000;
+    z-index: 10000;
+}

File zzoxx/index.html

 		</div>
 		<div id="debug"></div>
 		<div id="loading"><div><img src="img/loading.gif"> Loading...</div></div>
+		<div id="canvas_cover"><div>
 		<script>
 			$(document).ready(function() {
 				new Main().start();

File zzoxx/js/event_handler.js

 	if(this.main.conversationDialog.isShowing()) {
 		return this.main.conversationDialog.keyup(event);
 	} else {
+		// console.log(event.which);
 		switch(event.which) {
 			case 27: // esc
 				this.main.showMenu(); break;

File zzoxx/js/main.js

 
 function Main() {
 	Main.instance = this;
-	this.loading = false;
 	this.gameStarted = false;
 	this.eventHandler = new EventHandler(this);
 	$(document).keydown(bind(this.eventHandler, this.eventHandler.keydown));
 	}
 };
 
-Main.prototype.generateMap = function(x, y, mapPosition) {
-	var map = null;
-	if(mapPosition.feature && mapPosition.feature.map) {
-		// save the current map
-		var currentMap = this.mapRenderer.getCurrentMap();
-		this.saveMapToStorage(currentMap);
+Main.prototype.generateMap = function(x, y, mapPosition, onMapLoaded) {
+	$("#loading").show();
+	this.mapRenderer.zoom = true;
+	this.mapRenderer.afterZoom = bind(this, function() {
+		var map = null;
+		if(mapPosition.feature && mapPosition.feature.map) {
+			// save the current map
+			var currentMap = this.mapRenderer.getCurrentMap();
+			this.saveMapToStorage(currentMap);
 
-		// back up to the previous map
-		if(mapPosition.feature.map == "up") {
-			var lastMapId = this.mapPath.pop();
-			var mapIdObj = MapId.createFromString(lastMapId);
-			map = this.enterLastMap();
-			// the last map id contains the map's location, use this to position the player
-			map.setStartLocation(mapIdObj.x, mapIdObj.y);
-		} else {
-			// create new map
-			var mapIdObj = new MapId(currentMap.getId(), x, y, mapPosition.feature.map, mapPosition.locationData);
-			map = this.createMap(mapIdObj);
-			if(map) this.mapPath.push(map.getId());
+			// back up to the previous map
+			if(mapPosition.feature.map == "up") {
+				var lastMapId = this.mapPath.pop();
+				var mapIdObj = MapId.createFromString(lastMapId);
+				map = this.enterLastMap();
+				// the last map id contains the map's location, use this to position the player
+				map.setStartLocation(mapIdObj.x, mapIdObj.y);
+				this.finishLoadingMap(map, onMapLoaded);
+			} else {
+				// create new map
+				var mapIdObj = new MapId(currentMap.getId(), x, y, mapPosition.feature.map, mapPosition.locationData);
+				map = this.createMap(mapIdObj);
+				if(map) this.mapPath.push(map.getId());
+				this.finishLoadingMap(map, onMapLoaded);
+			}
 		}
-	}
+	});
+};
+
+Main.prototype.finishLoadingMap = function(map, onMapLoaded) {
+	setTimeout(function() {
+		$("#loading").fadeOut();
+	}, 1000);
 	if(map) {
 		window.localStorage.setItem("map_path", JSON.stringify(this.mapPath));
 		this.updateMapFromStorage(map);
 		this.mapRenderer.setCurrentMap(map);
-		return true;
-	} else {
-		return false;
-	}
+		if(onMapLoaded) onMapLoaded();
+	}		
 };
 
 Main.prototype.enterLastMap = function() {
 	this.storyDialog.show(true);
 };
 
-Main.prototype.showLoading = function() {
-	if(this.loading) $("#loading").fadeIn(400, bind(this, function() {
-		this.windowResized();
-	}));
-
-};
-
-Main.prototype.hideLoading = function() {
-	$("#loading").fadeOut();
-	this.loading = false;
-};
-
 Main.prototype.createMap = function(mapIdObj) {
-	this.loading = true;
-	setTimeout(bind(this, this.showLoading), 1000);
 	console.log("Creating map: mapId=" + mapIdObj.toString());
 
 	var map;
 			if(tries < 2) console.warn("Trying again... (try " + tries + " out of 3.)");
 		}
 	}
-	this.hideLoading();
 	if(!map) alert("Unable to create map. :-(");
 	return map;
 };

File zzoxx/js/player.js

 		}
 	}
 //	$("#debug").text("pos=" + this.x + "," + this.y + " map=" + this.mapRenderer.getCurrentMap().getId());
+	this.drawPlayer();
+	return false;
+};
+
+Player.prototype.drawPlayer = function(isAction) {
 	var mapPosition = this.mapRenderer.getCurrentMap().getMapPosition(this.x, this.y);
 	if(mapPosition) {
 		mapPosition.showTravelMessage();
 	}
 
 	Main.instance.minimap.center();
-	return false;
 };
 
 Player.prototype.handleMove = function(isAction) {
 		} else if(mapPosition.boat) {
 			this.boatIndex = mapPosition.boat;
 		} else if(mapPosition.feature && mapPosition.feature.map) {
-			if(this.main.generateMap(this.x, this.y, mapPosition)) {
+			this.main.generateMap(this.x, this.y, mapPosition, bind(this, function() {
 				var pos = this.mapRenderer.getCurrentMap().getStartLocation();
 				this.x = pos[0];
 				this.y = pos[1];
-			}
+				this.drawPlayer();
+			}));
 		} else {
 			// look around for someone to talk to
 			for(var i = 0; i < Player.AROUND.length; i++) {

File zzoxx/js/render/canvas_renderer.js

 //	this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 };
 
+CanvasRenderer.prototype.clear = function() {
+	this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+};
+
 CanvasRenderer.prototype.endRender = function() {
 };
 
 			$("#effect-" + effect.id).remove();
 		}));
 	}
-};
+};

File zzoxx/js/render/map_renderer.js

 
 function MapRenderer(images) {
 	this.currentMap = null;
+	this.zoom = false;
+	this.zoomStep = 0;
+	this.stepClock = 0;
+	this.afterZoom = null;
 	this.images = images;
 	this.ship = Terrain.SHIP;
 	this.lastPlayerMove = 0;
 		$("#fps").empty().append(s);
 	}
 
+	if(this.zoom) {
+		if(this.zoomStep <= 10) {
+			var now = new Date().getTime();
+			if(now - this.stepClock > 30) {
+				var d = this.zoomStep * 1.0 / 10;
+				$("#canvas_cover").css({
+					left: ($(window).width() / 2 - $(window).width() / 2.0 * d) | 0 + "px",
+					top: ($(window).height() / 2 - $(window).height() / 2.0 * d) | 0 + "px",
+					width: ($(window).width() * d) | 0 + "px",
+					height: ($(window).height() * d) | 0 + "px",
+					display: "block"
+				});
+				console.log("left=" + $("#canvas_cover").css("left") + 
+					" top=" + $("#canvas_cover").css("top") + 
+					" width=" + $("#canvas_cover").css("width") + 
+					" height=" + $("#canvas_cover").css("height"));
+				this.stepClock = now;
+				this.zoomStep++;
+			}
+		} else {
+			MapRenderer.renderer.clear();
+			$("#canvas_cover").hide();
+			this.zoom = false;
+			this.stepClock = 0;
+			this.zoomStep = 0;
+			this.afterZoom();
+		}
+	} else {
+		// regular map render
+		var m = Main.instance;
+		if(this.currentMap && m.player) {
+			if(m.player) {
+				// move the player
+				if(this.now - this.lastPlayerMove > 100) {
+					this.lastPlayerMove = this.now;
+					m.player.movePlayerDir();
 
-	var m = Main.instance;
-	if(this.currentMap && m.player) {
-		if(m.player) {
-			// move the player
-			if(this.now - this.lastPlayerMove > 100) {
-				this.lastPlayerMove = this.now;
-				m.player.movePlayerDir();
-
-				// which map quad are we in?
-				var qx = (m.player.x / MapRenderer.CANVAS_TILE_WIDTH) | 0;
-				var qy = (m.player.y / MapRenderer.CANVAS_TILE_HEIGHT) | 0;
-				if(qx != MapRenderer.quadX || qy != MapRenderer.quadY) {
-					MapRenderer.quadX = qx;
-					MapRenderer.quadY = qy;
-					this.currentMap.painted = false;
+					// which map quad are we in?
+					var qx = (m.player.x / MapRenderer.CANVAS_TILE_WIDTH) | 0;
+					var qy = (m.player.y / MapRenderer.CANVAS_TILE_HEIGHT) | 0;
+					if(qx != MapRenderer.quadX || qy != MapRenderer.quadY) {
+						MapRenderer.quadX = qx;
+						MapRenderer.quadY = qy;
+						this.currentMap.painted = false;
+					}
 				}
+				this.render(m.player.x, m.player.y);
+			} else if(this.currentMap.startLocation) {
+				this.render(
+						this.currentMap.startLocation[0],
+						this.currentMap.startLocation[1]);
 			}
-			this.render(m.player.x, m.player.y);
-		} else if(this.currentMap.startLocation) {
-			this.render(
-					this.currentMap.startLocation[0],
-					this.currentMap.startLocation[1]);
 		}
 	}
 };