Tilemap and camera issues

164 views
Skip to first unread message

Sam Bellman

unread,
Nov 25, 2014, 7:16:38 PM11/25/14
to haxef...@googlegroups.com
I'm trying to build a top down level using tilemap then render it on an additional camera trying to get the effect that it's a masked area in the center of my screen with the ui sitting around it. I then want to be able to zoom in/out on the tilemap with it still only taking up the same space on my screen. This sounds straightforward so my inability to get it working correctly shows that I'm clearly not understanding FlxTilemap/FlxCamera correctly particularly FlxCamera and also how flixel is rendering the game. I'm hoping someone can give me some pointers.

My first attempt was to create the tilemap, assign it to a new camera which is 600x600 (my screen is larger) then zoom in using the camera's zoom to change the scale of the tilemap, I found that when I increased the zoom that camera filled the whole screen. I couldn't work out how to change the order of the cameras to put the UI below it but I assume that's possible? I tried re-setting the width/height of the new camera after changing the zoom but it didn't seem to have any effect.

I then tried to simply change the scale of the tilemap and not change the camera except for scrolling it but I found that in this case when I zoomed out I was getting holes in the tilemap when I scrolled like it wasn't rendering correctly. I assume this is to do with the camera having trouble rendering a tilemap with a size that's not what it thinks it should be?

I can get round this problem by simply putting the level at the bottom the slapping the ui on top of it but I'd love to find a better way and to get a better handle on how flixel works.

I couldn't find any really good explanations for flxcamera, even going to to the old flixel site - all the tutorials things I've found simply take up the whole area and just move around a level following something. Is there a way to get the masked effect I was looking for - so the display size stays the same even when the zoom changes? You can set what camera a sprite renders on, but can you set which sprites a camera renders without setting the camera of every element added to your state?

I hope this all makes sense and I don't sound like too much of a noob.

Ohmnivore

unread,
Nov 25, 2014, 8:13:57 PM11/25/14
to haxef...@googlegroups.com
Which target are you building for? For making the UI render in front of everything else, this is what i use:
FlxG.cameras.remove(FlxG.camera);
var cam:FlxCamera = new FlxCamera(0, 0, FlxG.width, FlxG.height);
cam.bgColor = 0x00000000;
FlxG.cameras.add(cam);
FlxG.camera = cam;

Then, for all my UI elements I write cameras = [FlxG.camera];
Good luck!

AG-w

unread,
Nov 25, 2014, 11:06:53 PM11/25/14
to
If you want a UI only camera
like Ohmnivore said, set all UI element to only using one camera

If you want to change Camera order after you already added it to Camera list
you need use FlxG.cameras.remove() to remove camera and add them back
(remember set second parameter "destroy" to false since you only want to change camera order :P)

and this is how zoom or setScale work
it's like scaling FlxSprite
when you scale camera, it will scale entire camera sprite(i.e: width and height are also scaled)
after you scale camera, remember use setSize to resize Camera

Sam Bellman

unread,
Nov 26, 2014, 6:05:11 AM11/26/14
to haxef...@googlegroups.com
Thanks, I'll give it a try putting the ui on top using the method you describe when I get home from work.

In terms of setting the size of the camera after changing the zoom, setSize doesn't seem to do anything - from skimming the code it looks like there's a lot of stuff set up when you create the camera that would need changing too. Is there a setDirty type thing to force them to change too? I may try just creating a new camera every time the zoom changes - that might work.

Oh, I'm doing the usual testing on flash, hoping to create android for the finished version.

Thanks!


On Wednesday, 26 November 2014 04:06:53 UTC, AG-w wrote:
If you want a UI only camera
like Ohmnivore said, set all UI element to only using one camera

If you want to change Camera order after you already added it to Camera list
you need use FlxG.cameras.remove() to remove camera and add them back
(remember set second parameter "destroy" to false since you only want to change camera order :P)

and this is how zoom or setScale work
it's like scaling FlxSprite
when you scale camera, it will scale entire camera sprite(i.e: width and height are also scaled)
after you scale camera, remember use setSize to resize Camera

On Wednesday, November 26, 2014 8:16:38 AM UTC+8, Sam Bellman wrote:

AG-w

unread,
Apr 5, 2015, 8:51:51 AM4/5/15
to haxef...@googlegroups.com
sorry for replying old thread, but I think people need to know this 

in Tilemap, there's a function called "updateBuffer()"
you need to call this everytime after you changed camera's size


> I found that in this case when I zoomed out I was getting holes in the tilemap when I scrolled like it wasn't rendering correctly
the reason why tilemap full of holes is because Tilemap is using old buffer data, which don't fit current camera size 
Reply all
Reply to author
Forward
0 new messages