Flixel Forums

development => help => Topic started by: Berzee on Wed, Jun 6, 2012

Title: [SOLVED] Magnifying Glass effect?
Post by: Berzee on Wed, Jun 6, 2012
So, I made the tiniest RTS (http://www.kongregate.com/games/Berzee/it-takes-a-village-summer-of-bandits), and people have been asking for a zoom-in feature. I don't really want to introduce scrolling (I think it's fun to have a little RTS where you can see the whole map at once). So I thought that an optional magnifying glass effect around the cursor might be cool.

I've googled up some generic Flash approaches to that kind of thing, but I wondered if there's any fancy Flixel / camera stuff I don't know about, which would make an easier time of it? (I'm imagining a circle of zooom around the cursor, but a square would also be sufficient, I suppose). Any thoughts? =)
Title: Re: Magnifying Glass effect?
Post by: yadurajiv on Wed, Jun 6, 2012
Well.. there is a FlxG.camera.zoom which is 1 by default and as the comment says // The zoom level of this camera. 1 = 1:1, 2 = 2x zoom, etc. And fractions should work too. This scales the entire area of the game, but it could be a start.
Title: Re: Magnifying Glass effect?
Post by: wg/funstorm on Wed, Jun 6, 2012
Building on yadurajiv's suggestion, you can actually have multiple cameras at the same time. So you could have a 2nd camera at a different zoom level and then ... somehow mask it (not sure what the best way to mask it would be though. You could take a look at the flixel power tool's FlxDisplay class for inspiration, it does masking.
Title: Re: Magnifying Glass effect?
Post by: yadurajiv on Wed, Jun 6, 2012
I'm sorry ~_~ I'm not letting you discover these things for yourself but.. I had to try and it was darn simple :P

Code: [Select]
// in create
cam2 = new FlxCamera(0, 0, 100, 100, 2); // 100*2 = 200!!
cam2.bgColor = 0xffffffff;
FlxG.addCamera(cam2);

Code: [Select]
// and in update
cam2.x = FlxG.mouse.x - cam2.width; // this is not width/2 because we zoomed 2x
cam2.y = FlxG.mouse.y - cam2.height; // and its a constant you can just put 100 here :D
cam2.focusOn(FlxG.mouse.getWorldPosition());


random test on top of some other random test - http://yadurajiv.com/games/amp

now you can do the masking :D and tell us how you did it :D

You know what, if you just keep the camera at one corner and decrease the zoom level.. it looks like a mini map XD
Title: Re: Magnifying Glass effect?
Post by: auriplane on Thu, Jun 7, 2012
How about using a displacement map?

http://www.auriplane.net/magnifying2.swf

Code (quick and dirty) http://www.auriplane.net/magnifying.zip
Title: Re: Magnifying Glass effect?
Post by: Berzee on Thu, Jun 7, 2012
Thanks everyone! You are gentlemen/women AND scholars, AND I bet you smell like bacon and fresh coffee all the time not just at breakfast.

Auri, I hope you don't mind if I took the path of least resistance and stole your nifty solution? =P It's pretty cool!

I don't know if I could ever actually finish a round of my game using the magnifying glass, but it might help my mother to be able to play it, as she was complaining that everything was miniscule. ;)

(you can see how it looks (http://www.kongregate.com/games/Berzee/it-takes-a-village-summer-of-bandits) if you want, just start a skirmish game and press the " key)

Although...at the end of the day, it might just need to be fullscreenable with 2x zoom. =P
Title: Re: [SOLVED] Magnifying Glass effect?
Post by: auriplane on Thu, Jun 7, 2012
Woo hoo!  Of course I don't mind :-)

Actually, I'm just glad I took the time to learn how to apply filters.  I'm thinking it might be fun to have a couple filters available in options in my game :-D
Title: Re: [SOLVED] Magnifying Glass effect?
Post by: yadurajiv on Thu, Jun 7, 2012
well, if you ever want to do it with masks..

Code: [Select]
// in create
cam2Mask = new Shape();
cam2Mask.graphics.lineStyle();
cam2Mask.graphics.beginFill(0xffffff, 1);
cam2Mask.graphics.drawCircle(0, 0, 80);
cam2Mask.graphics.endFill();
FlxG.stage.addChild(cam2Mask); // needs to be added

cam2 = new FlxCamera(0, 0, 100, 100, 2); // 100*2 = 200!!
cam2.getContainerSprite().mask = cam2Mask; // set the mask :)
FlxG.addCamera(cam2);

and

Code: [Select]
// and in update
cam2.x = FlxG.mouse.x - cam2.width; // this is not width/2 because we zoomed 2x
cam2.y = FlxG.mouse.y - cam2.height; // and its a constant you can just put 100 here :D
cam2.focusOn(FlxG.mouse.getWorldPosition());

cam2Mask.x = FlxG.mouse.x; // needs to be at the same place where our cam is
cam2Mask.y = FlxG.mouse.y;