Search the Community

I have created a loader for tiled in the JSON format for my JavaScript game. The game is based on a 2048 x 1280 map and my canvas size is 704 x 608. So my predicament is how would i create a viewport/camera when the player approaches the edge of the canvas ,so that the map will move? In my situation, it is a little more difficult, because im not using a standard 2D array like most of the tutorials, so it is confusing me very much. The code for loading my map is like so: function Level (){var data;this.tileset = null;var returned;var t = this;this.load = function(name){$.ajax({type:"POST",url: "maps/" + name + ".json",dataType: 'JSON',async: false,success: function(success){returned = loadTileset(success);}});return returned;};function loadTileset(json){data = json;Level.tileset = $("<img />", { src: json.tilesets[0].image })[0]Level.tileset.onload = done = true;if(done){return data;}elsereturn 0;}this.draw_layer = function(layer){if (layer.type !== "tilelayer" || !layer.opacity) { return; }// if (layer.properties && layer.properties.collision) {// return;// }var size = data.tilewidth;layer.data.forEach(function(tile_idx, i) {if (!tile_idx) { return; }var img_x, img_y, s_x, s_y,tile = data.tilesets[0];tile_idx--;img_x = (tile_idx % (tile.imagewidth / size)) * size;img_y = ~~(tile_idx / (tile.imagewidth / size)) * size;s_x = (i % layer.width) * size;s_y = ~~(i / layer.width) * size;ctx.drawImage(Level.tileset, img_x, img_y, size, size,s_x, s_y, size, size);});};this.collisionLayer = function(layer){var row = [];t.solids = [];layer.data.forEach(function(idx, i) {var s_x,s_y,size = 32;s_x = (i % layer.width) * size;s_y = ~~(i / layer.width) * size;if (i % layer.width === 0 && i) {t.solids.push(row);row = [];}row.push([idx,s_x,s_y]);});t.solids.push(row);};return t.solids;} And this Level class is called from my main javascript file like this: layer = scene.load("level_"+level);layer = $.isArray(layer) ? layer : layer.layers;layer.forEach(function(layer){if(layer.name == "v.bottom" && layer.type == "tilelayer"){b_layer = layer;}else if(layer.type == "tilelayer" && !layer.properties){t_layer.push(layer);}else if (layer.type == "objectgroup"){$.each(layer.objects, function(i, value){coll_layer.push([value.x,value.y,value.width,value.height,"dialogue"]);});}}); And then scene.draw_layer() is called from my update function lower in my main javascript function. My map holds different layers and you can see in the code above there is and if statement determining where the layer is the bottom layer, top layer or and object layer and storing it in the specific array. This is just so the player is shown between layers. So to clarify, for my game, how would i create a view port/camera according to my map loader? Also do i move the map or the player? And should i keep the player centered? if the player is centered then what happens when the edge of the map is visible? Here is a live version of the game so you can see how it works etc: http://upbeatevents.co.uk/dis Use guest as the username and password Thankyou very much