Hi all

I have a question about implementing a viewport/camera, I am playing around with the HTML5 canvas and have started to implement a tile engine. At the moment it is massively inefficient, I have a 2d array 100x100 and each frame my code is looping through the whole thing (very bad i know). I would like to use a viewport/camera to determine which area of the area in being view and reduce the rendering loop.

here is an example, I haven’t added the camera offset yet because I’m not sure how

here is a link to it

http://code-creative.net/game_test/map.html

if anyone could give me some advice or point me in right direction that would be great.

Thanks

Ian

Hi Palo

thanks I have never heard of lint before will try it out, I will play around with the camera x,y offset values, I am just unsure how exactly I should reduce the map loop.

I have looked into different canvas libs like kinetic limejs and other, but I want to build one so I could understand what was happening under the hood.

currently my lib supports images, sprites animations and simple events

have a look here give it a second or 2 I have added a preloading indicator (click around)

http://code-creative.net/game1/

Thanks again

Ian

well got it working if anyone is have the same trouble, here is a solution it not perfect yet but it may help someone with the same problem

y_offset = Math.round(state.camera_y / state.tile_height);
height_offset = Math.round((self.setup.height / state.tile_height) + y_offset) + 1;

x_offset = Math.round(state.camera_x / state.tile_width);
width_offset = Math.round((self.setup.width / state.tile_width) + x_offset) + 1;					

if(height_offset > state.map_height)
	height_offset = state.map_height
if(width_offset > state.map_width)
	width_offset = state.map_width


for (var y = y_offset; y < height_offset; y++) {
	col = state.map_data[y];
	for (var x = x_offset; x < width_offset; x++) {
		color = (state.map_data[y][x]==1)?'#fff':'#000';			
		self._draw({
			type:'rec',
			x: x * state.tile_width - state.camera_x,
			y: y * state.tile_height - state.camera_y,
			width: state.tile_width,
			height: state.tile_height,
			fill: color,
			visible: true
		},self.ctx);
	};
};