some questions

[vibrant]

Hello,

is there a builtin way to resize the canvas to the browser size?

And any code for viewport management so that all entity coordinates are offset by the user's position in order to render a part of the whole game map on screen?

Thanks!

[Chris McCormick]

Hello!

Sorry for the slow reply, things are a bit busy around here. :)

On Fri, Aug 26, 2011 at 11:16:18PM -0700, vibrant wrote:
> is there a builtin way to resize the canvas to the browser size?

If you mean when you initially start the game, that is very easy to do. Just create a <div> element that is 100% height and 100% width, and pass that div element to jsGameSoup like this:

In your HTML:
<div id='surface'></div>

In your stylesheet:
#surface {
width: 100%;
height: 100%;
}

In your initialisation function (onload):
var gs = new JSGameSoup("surface", 30);
gs.addEntity(new MyEntity(gs));
gs.launch();

One thing I still need to add is a "resize" event that will be received by all entities when the browser window is resized. I hope to get to that soon.

> And any code for viewport management so that all entity coordinates are
> offset by the user's position in order to render a part of the whole game
> map on screen?

I guess what you want is a Camera() class/singleton. I often do this by making either a Camera() or World() class which has it's own set of world coordinates, and then all other entities reference this when they are drawing. Something like this:

function World() {
this.x = 0;
this.y = 0;
}

function MyEntity(world) {
this.x = 12;
this.y = 42;

this.draw = function(c) {
c.drawsomething(this.x - world.x, this.y - world.y);
}
}

var w = new World();
gs.addEntity(w);
gs.addEntity(new MyEntity(w));

Hope this helps.

Do you think it would be worth my adding a generic camera class to the base library to handle this kind of thing?

Cheers,

Chris.

-------------------
http://mccormick.cx

[Chris McCormick]

Hi,

On Mon, Aug 29, 2011 at 10:43:52AM +0800, Chris McCormick wrote:
> var gs = new JSGameSoup("surface", 30);

Whoops, this ability to pass the id of the div is only just being comitted. Make sure you update to the latest version if you do it like this. Otherwise you should do:

var gs = new JSGameSoup(document.getElementById("surface"), 30);

[vibrant]

Thanks a lot for the detailed answers Chris!  Great job on the lib, it's really a pleasure to use.  I paused working on my game for a couple days because I'm launching another project but soon I will resume and publish some very-alpha thingie :)

As for the camera class - I think it's a useful one, I implemented a canvas passthrough which adds the appropriate values to coordinates and all my entities use it to draw.

Wojtek

[Chris McCormick]

Hi Wojtek,

On Sat, Sep 03, 2011 at 12:04:24PM -0700, vibrant wrote:
> As for the camera class - I think it's a useful one, I implemented a canvas
> passthrough which adds the appropriate values to coordinates and all my
> entities use it to draw.

That sounds like a really interesting approach. I will have a think about doing it that "canvas passthrough" way instead of what I normally do, requiring the user to handle coordinate stuff manually. Thanks for the tip!