HUD, display over zooming map?

[Calemb]

Hi again!

I try to add static hud to my game. It is simply - just move it with the camera - that’s ok.

But when I zoom then the hud is zooimin to…

I’ve read:

Punk.fx - zooming game independently from HUD

Continuing the discussion from DynaLight (alpha ver) for punk.fx: I've cleaned my code a bit and removed unnecessary parts. The code linked below shows how to use FXLayers (a class that comes with punk.fx) to separate game objects from HUD, and apply effects to them independently from one another. The FXLayer class extends Image and lets you apply effects to entities by working as an additional layer on the screen. So in this case we will have two FXLayers: a gameLayer - to which we'll…

and try to implement it, but still havent effect…

I also try do something with topic: hud ad rotate map, but it’s working only with rotate,

Someone resolve this? I want to zoom out when player go upstairs and zoom in when go down.

Maybe someone could explain again how to use this FX or have another solve?

edit: to be clear: I want have effect as we can see with FP.debug on screen

[azrafe7]

Having problems with making it work punk.fx? I can help on that if you will (but you must show some code for me to look into)?

By the way, if you want to avoid the punk.fx lib dependency and do it just with FlashPunk there are many ways to do it. General idea is to have a separated canvas to draw the HUD to, and NOT add it to the World (so it’s not affected by Screen.scale), but just update/render it at the needed time (probably World.update()/render()).

PS: FP.debug uses a flash.Sprite positioned above FP.screen to achieve that.

[Calemb]

public class SecWorld extends World
{
	// layers
	protected var gameLayer:FXLayer;
	protected var hudLayer:FXLayer;
	
	protected var hudImage:FXImage;
	protected var scoreText:FXText;
	
	// effects
	protected var textOutlineFX:GlowFX = new GlowFX(6, 0x505050, 3);
	
	protected var player:Player;
	
	public function SecWorld()
	{
		player = new Player();
		add(player);
		
		// game layer (contains the space background entity and our player)
		gameLayer = new FXLayer();
		gameLayer.entities.add([player]);
		addGraphic(gameLayer);
		
		// bottom hud
		//new FXImage();
		hudImage = new FXImage(GameConstants.HUD_BOTTOM);
		hudImage.scrollX = hudImage.scrollY = 0; // set these to 0 so it won't move around with the camera
		var hudEntity:Entity = new Entity(0, FP.height - hudImage.height, hudImage);
		
		// score text (upper right corner)
		scoreText = new FXText("SCORE: 000000", FP.width - 120, 5);
		scoreText.scrollX = scoreText.scrollY = 0; // set these to 0 so it won't move around with the camera
		scoreText.effects.add(textOutlineFX);
		var scoreEntity:Entity = new Entity(0, 0, scoreText);
	
		// hud layer (contains our unmoving hud)
		hudLayer = new FXLayer();
		hudLayer.entities.add([hudEntity, scoreEntity]);
		addGraphic(hudLayer);
	}

}

That is my SecWorld class. Above of course I have all import things. I’ve just copy - paste some importatnt lines from FX example and cut off thing which I don’t need. I still have some feeling that I miss some important render function or sth, but in FX example World.render() is just override about some text which I cut off.

What I have: everything is displaying, but in Player.update() :

if (Input.pressed(Key.Z))
		{
			FP.screen.scaleX += 0.01;
			FP.screen.scaleY += 0.01;
		}
		if (Input.pressed(Key.X))
		{
			FP.screen.scaleX -= 0.01;
			FP.screen.scaleY -= 0.01;
		}

To manualy (for now) zooming in/out.

PS: how to enter zoom on player or current screen?

[Calemb]

Guys, I have to say it: I’m the most stupid person at this community. FX works very good. I’m just scaling whole world, but not game layer…

But I still have one question: how to set zooming point / center point. Best will be to set this point as player center?

[azrafe7]

In the demo there’s this:

public function cameraFollow(obj:*, scale:Number):void 
{	
	FP.camera.x = -FP.halfWidth / scale + obj.x;
	FP.camera.y = -FP.halfHeight / scale + obj.y;
	
	FP.camera.x = FP.clamp(FP.camera.x, 0, WIDTH - FP.width / scale);
}	

(where WIDTH is the size of the world (you can comment out the last line if you don’t want horizontal clamping))

And used like this:

cameraFollow(player, gameLayer.scale);	// follow player with camera

[Calemb]

Thanks very much. Now i thing I have everything what I need. Maybe for future Readers: I left my map without LayerFX, because of low FPS.

[azrafe7]

I get it you’re not using punk.fx for your project anymore, am I right?

If so I’ll appreciate some feedback (maybe I can take a look at your code and see if I can find a way to improve the punk.fx-side of it - there are a bunch of things going on underneath in the lib that can cause performance problems if not set right (one being inadvertently rendering things twice if not taken care of)).

Not that I want to impose you to use it (most of the times coding directly for your usecase will result in better performance), but having some comments about why you’ve decided against using it can help me to improve things a bit.

[Calemb]

So here is my code:

public function SecWorld()
	{
		map = new Level2();
		mapOver = new Level2OverPlayer();
		add(map);
		add(mapOver);
		
		player = new Player();
		add(player);
		
		hudImage = new FXImage(GameConstants.HUD_BOTTOM);
		hudImage.scrollX = hudImage.scrollY = 0; // set these to 0 so it won't move around with the camera
		var hudEntity:Entity = new Entity(0, FP.camera.y + FP.screen.height - hudImage.height, hudImage);
		
		// score text (upper right corner)
		scoreText = new FXText("SCORE: 000000", hudEntity.x + 5, hudEntity.y + 3);
		scoreText.scrollX = scoreText.scrollY = 0; // set these to 0 so it won't move around with the camera
		scoreText.effects.add(textOutlineFX);
		var scoreEntity:Entity = new Entity(0, FP.camera.y, scoreText);
		
		// hud layer (contains our unmoving hud)
		hudLayer = new FXLayer();
		hudLayer.entities.add([hudEntity, scoreEntity]);
		addGraphic(hudLayer);
	
	}

Now I try to describe it: map is Entity which has graph = new Image(); size 2500x2500 px and the same size mask whith some changes, but still 2500x2500.

mapOver is a entity with graph with dynamicaly changing layer. I just need sometimes this part of map be over the player.

Player dynamically changing his layer=-y;

I’m still using hudLayer with FX. I’m not sure if I use it properly.

Finally: I try to make isometric game but I don’t use tiledMap, but use png with proper masking.

I hope I write with sense… I’m so confused about this technology and just want to start writing my game mechanics, not only thinking how tu use tools…

But thanks for help! That was for me good lesson!