Rendering Background when Character is Always Centered

[arlev]

Hi!

 

I just stumbled upon pixi.js and was impressed with the smoothness of the demos.  I'm looking to take it up for my current game project, but I'm looking for some advice on how to approach background rendering.

 

I'm using the tileset from BrowserQuest, but I am remaking the engine with a different camera system.

 

Their engine has a fixed viewport, so background data fitting the viewport is read and rendered once.  When the character reaches the edge of the 'screen', the viewport now renders a fresh screen worth of data.  I'm sure you guys know what I'm talking about, I just have no idea how what this sort of system is called

 

For my engine, I want the character to always be in the center of the screen, so that when the character 'moves', it's actually just the background getting shifted.  For example, the camera system in Zelda LTTP, or Diablo 2.

 

I've only used a fixed viewport system before, so I don't really know how to approach a dynamic one.  Since my character will be making precise movements (instead of whole-tile movements like in BrowserQuest), every pixel worth of moving has to offset the background accordingly.

 

I read this post on tiled backgrounds, but I'm not sure I fully understand it.

 

Is he saying to take the map data, convert it into a single sprite, and then use the huge sprite as the background?  So the viewport would only show the small relevant portion of the huge sprite? 

 

If this is the case, shouldn't you just save background as a single .png image beforehand, and then just upload that? 

 

What would be the best way to only show the relevant part of the background sprite?  If this was native canvas code, and my viewport was on the middle of a huge background sprite, the sprite's top-left origin would have to have largely negative x and y coordinates. 

 

Thanks for your time!

[xerver]

The way I accomplish this is by creating each tile that s visible on the screen and display them, as you move the background around I recalculate what the texture of the tiles should be.

 

Phaser takes a different approach, drawing to a canvas each frame the parts of the tilelayer that should be visible on the screen and using that as a single texture.

 

You can checkout my tilemap and camera implementations here: https://github.com/grapefruitjs/grapefruit

[arlev]

Thanks xerver.

 

So if I understood your approach correctly, if your viewport is 3x3 tiles, you have a total of 9 tile "entities", with the textures inside each entity constantly changing?  Sounds interesting -  what would be the advantages of doing so?

 

I'll take a further look at your source code and try to figure things out.

 

And for Phaser's approach, when you say 'drawing parts of the tilelayer', does that mean parsing the raw map data, and clipping each tile from the tilesheet, for each frame?  Or drawing part of a single pre-rendered, complete background image?  In otherwords, what exactly is a tilelayer?

 

Thanks for your time, your engine is looking pretty damn good .  If I hadn't invested so much time into my current project, I'd probably say hell with it, and use your engine.

 

*Edit*  Also, please check IRC when you see this.  I stumbled upon your LTTP project, and it runs amazingly.

[xerver]

Thanks xerver.

 

So if I understood your approach correctly, if your viewport is 3x3 tiles, you have a total of 9 tile "entities", with the textures inside each entity constantly changing?  Sounds interesting -  what would be the advantages of doing so?

 

The benefit is I never have to create new entities, and only what is in the viewport is rendered. I only change the texture of tile son the edge and recycle them to the other edge.

 

 

 

And for Phaser's approach, when you say 'drawing parts of the tilelayer', does that mean parsing the raw map data, and clipping each tile from the tilesheet, for each frame?  Or drawing part of a single pre-rendered, complete background image?  In otherwords, what exactly is a tilelayer? 

 

I assumed you were talking about tilemaps, a tilelayer is 1 layer of the tilemap.