Rendering the whole game world

[Nitay]

Hello!

I'm trying to create a live minimap of the complete game world. In order to do that I'm taking a snapshot of the whole game world (not only the part that is displayed) every 100ms or so.

The code I've used to take the snapshot is this (called every update()):

if (game.time.time < this.nextUpdate) { return; }
{
    this.stage.drawFull(game.world);

    //  Draw our black border rect
    this.thumbnail.rect(0, 0, this.thumbnail.width, this.thumbnail.width, '#000');

    //  And copy the stage capture to our Thumbnail (offset by 2px for the black border)    
    this.thumbnail.copy(this.stage, 0, 0, this.stage.width, this.stage.height, 2, 2, this.thumbnail.width - 4, this.thumbnail.width - 4);
    this.thumbnail.update();

    this.nextUpdate = game.time.time + this.updateRate;
}

The code that creates these variable is this (called in create()):

//  The Stage is a BitmapData the size of the Game window
this.stage = game.make.bitmapData(game.world.width, game.world.height);

//  Thumbnail will hold our scaled-down version (+4px padding for the black border)
this.thumbnail = game.make.bitmapData(150, 150);

//  And thumbContainer is a Sprite with the thumbnail for its texture
this.thumbContainer = game.make.sprite(game.width - 150, game.height - 150, this.thumbnail);

//  Note we add the thumbContainer to the Stage, not the World, to avoid it being captured itself
game.stage.addChild(this.thumbContainer);

This is the result:

 

As you can see in the bottom-right minimap - The bitmap is rendered but the background isn't rendered for the whole thing (I think it's only rendered properly for the first 800x600 pixels). Also, if the player goes further down to the bottom ledge the minimap messes up completely:

It seems like a render issue, or a bitmap copy issue, but I can't find the problem. Does anyone have any idea why is this happening?

Thanks!

Nitay

 

[lewster32]

If you're using them, TileMaps internally don't render the entire world, they only render the part on-screen, so your method probably isn't going to work as you planned. Phaser (and indeed any optimised game engine) will try to only render as much as is needed to show what's on-screen, as spending time drawing pixels that aren't even visible is wasteful. I'd advise you to go about this a different way; manually creating and updating the map based on the positions and sizes of the items in your world.

When creating games, one of the most likely ways you'd approach things is to have the world's objects represented abstractly in a 'model' (i.e. just as data about positions, sizes etc of objects) and then write 'views' or 'renderers' which would take that data and display it in whatever way you see fit. Doing it this way means you could have a full screen 'game' view, and then a 'map' view, or even do stuff like have split screen views, multiple cameras and so on. Unfortunately out of the box Phaser does not easily cater for this separation of concerns, but if you read up a bit more on the technique (try looking for 'MVC game programming' or similar - MVC stands for 'model-view-controller' which is a programming pattern which is often used to do this kind of thing) then you should be able to get a better grasp of the concepts involved.

[Nitay]

Hi lewster32, Thanks for your reply!

I'm familiar with MVC, and I believe you're right. I was hoping I could get it done using Phaser somehow since it's so easy and fun to do other stuff with.  I'll try manually rendering a minimap.

 

Thanks!

Nitay