Create viewport for map loaded from tiled Javascript

[tom_burman]

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

[rich]

I don't have time to answer this in depth, but you're welcome to look at the code I use in here as it works from Tiled data with a viewport based renderer: https://github.com/photonstorm/phaser

 

And you move the camera, not the map.

[Chris]

Hello Tom, welcome to the board

 

Let me point out a few things I think may (soon) cause many problems in your code:

 

I have no information about how experienced you are in programming and if you know what a constructor is.

 

In JavaScript a method/function is considered being a constructor, when you start the name with a capital letter.

This is more a convention, but any other programmer will be confused when he reads function names like "Level" and

in fact have some kind of object? I don't know what your real intention was by defining the method "Level". You are even assigning properties to it...

 

When you use your function as a constructor, like so:

 

var myLevel = new Level();

 

The constructor returns the variable "returned", which is at that point of the value undefined.

 

If you call your method without the new keyword, the "this" variable inside the function points to the window object,

wich will have the effect, that you create a new method "load" on the window object.

 

 

In your method "loadTileset", there is a whole block that really confuses me:

 

Level.tileset.onload = done = true;



if(done){

return data;

}

else

return 0; 

 

You are setting the property "onload" of the object "tileset" of the object "Level" (your constructor[?] function) to the value of the variable "done" which you are setting to "true".

 

In the next row, you check if "done" is "true". Sure it is, you just set it to true!

 

Again, you are making the wrong use of "this" a few lines below by accidentially defining the global function "draw_layer" with the assign of 

 

this.draw_layer = function(layer){...} 

 

Note again: when not called as a constructor with the "new" keyword, your method will create the method "draw_layer" on the window object.

 

 

 

Before you think about loading levels and rendering it through a camera, you should _really_ learn JavaScript first, or you will get stuck;

waste hours and days for finding bugs that only exist because of wrong application architecture. It will cause you great frustration and you

will most likely give up on your game not long after you started it.

 

I will publish a topic later this day where I am going to start a collection of great resources for learning (game) development with JavaScript to help beginners getting started.

 

 

greetings,

Chris