Punk.fx - zooming game independently from HUD

(azrafe7) #1

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 add all the game entites (ship & background), and a hudLayer - that will contain our HUD (including scores and what not).

After adding them to the world, changing the scale of the gameLayer is as easy as modifying the scale property of an Image (that’s because it actually IS an Image). All you have to do is

    gameLayer.scale = 2.0;

and all the entities contained in it will be rendered at twice the size.

The code is commented, but assumes the reader to be familiar with FlashPunk and AS3 in general.

[code](https://dl.dropboxusercontent.com/u/32864004/dev/FPDemo/HUDZoomPixelate.zip) | [demo](https://dl.dropboxusercontent.com/u/32864004/dev/FPDemo/HUDZoomPixelate.swf)

graphics credits go to the awesome art of Daniel Cook (there’s more on the site)

HUD, display over zooming map?
(no-jo) #2

Wow very quick,

I’ll have a look at the code when i get minute but the demo seems to do exactly what i’m after.

Thank you so much.

(no-jo) #3

Definitely going to add this feature in to my project.

Thanks again @azrafe7 .

(Abel Toy) #4

It doesn’t work for zooming out (less than scale = 1), right?

(Tareq) #5

Ooh, this looks very interesting…

(azrafe7) #6

Ha… never tried that before but… yes, it also works with scale < 1 (just because FXLayer inherits from Image, which can be downscaled right away).

Obviously you’ll have to take into account screen size and camera position to make it work as intended. So you’ll probably need to create an FXLayer twice the size of the screen (new FXLayer(FP.width * 2, FP.height * 2)) and then apply a scale of .5 if you wish to correctly render it and fit the window.

@nojo: You’re very welcome!

(Abel Toy) #7

Oh, I see! I thought FXLayer was dependent of FlashPunk’s screen size. Sounds coolio then, might use it for introducing bosses!

(0) #8

…hello… I’ve been working in a metroidvania thing…and I thought it would be great to use zoom. I was able to implement it… and it worked fine…but when I was adding the whole shooting stuff problems start to appear. when I add many(actually two…or more than one) of the same entity the zoom only work for the first one.

to make another test using the “demo”…I added two players and it happens the same the zoom only work for one.

what I wanted to know is how to make the zoom work to all entities…

(ps: I’m a horrible programmer)

(azrafe7) #9

You’re probably forgetting to add the second entity to the FXLayer's entities list.

Using the demo code:

...

// player's ship
player = new Player(FP.halfWidth, FP.halfHeight);
add(player);
		
var player2:Player = new Player(FP.halfWidth - 40, FP.halfHeight - 40);
add(player2);

...

gameLayer.entities.add([spaceEntity, player, player2]);   // <-- add also player2
(0) #10

hummm…it worked that way…although for bullets that you add and remove every time(will not work)… I guess I can solve the bullets using masks…and not creating and removing entities all the time.

still…if I repeat an entity I would have to create a new var for each of them?

(thank you)

(azrafe7) #11

Not sure what you mean by that… mind to post your code explaning what you’re trying to achieve?

By the way adding a new Entity to both the World and the FXLayer can easily be automatized (just create an helper function that does the work for you). And if you’re using a bunch of bullets I’d recommend you to look into recycle() and create() methods.