Jump to content

  • Log In with Google      Sign In   
  • Create Account

Banner advertising on our site currently available from just $5!


1. Learn about the promo. 2. Sign up for GDNet+. 3. Set up your advert!


HTML5 tile enigne


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
3 replies to this topic

#1 imac2000   Members   -  Reputation: 126

Like
0Likes
Like

Posted 06 March 2013 - 02:32 PM

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


 


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

 


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



Sponsor:

#2 PaloDeQueso   Members   -  Reputation: 317

Like
0Likes
Like

Posted 06 March 2013 - 03:55 PM

A good start for anyone getting into js coding is to use a lint tool. It will help you keep your code tidy and professional, as well as use good practices. You need to be heading in a good direction though. As far as cameras go, you can either define a simple x, y position in the world, and just offset your tiles by this. You can also give it a width and height to know how many tiles fit in a camera's frustum. There are many approaches but starting there might be easiest.

 

Have you considered using a HTML5 canvas rendering engine? There are many out there and will help you get started with rendering sprites and normal game things.


Douglas Eugene Reisinger II
Projects/Profile Site

#3 imac2000   Members   -  Reputation: 126

Like
0Likes
Like

Posted 06 March 2013 - 05:27 PM

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 



#4 imac2000   Members   -  Reputation: 126

Like
0Likes
Like

Posted 07 March 2013 - 01:19 PM

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);
	};
};





Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS