Jump to content

Zoom & Pan pattern?


spotnyk
 Share

Recommended Posts

Some friends & I are working on a small indie dCCG (digital Collectible Card Game). We're wanting to roll this in pure web tech (sans-Flash/SL), but (obviously) we do not wish to roll it from absolute scratch.

 

Phaser looks great, except I cannot find native support for camera zoom & panning. I've read other threads on this forum about this, but never grokked a real clear answer about Phaser's ability in this area.

 

Consider please:

 

We have a "table" with cards on it. There is a possibility that the amount of cards will exceed what can viably fit inside a static camera setup. Allowing the user to zoom out, and pan around the table is critical.

 

I know you can scale the entire world, or groups of objects. Is this a viable pattern for emulating zoom levels? If not, is there a viable pattern which should be used? If not, are there any plans to provide a way to achieve such a mechanic?

 

Thanks in advance.

Link to comment
Share on other sites

I would absolutely emulate the effect you need by carefully scaling groups of objects, not the camera (because that would scale EVERYTHING, game UI included, which is almost certainly not what you need). It's not trivial writing a smooth and fluid zoom effect, but it's well with the capabilities of Pixi/Phaser given the nature of the display list.

Link to comment
Share on other sites

I assume that smooth-zooming is a significant performance hit (using group object scaling that is).

 

As a stop-gap, I'm considering implementing several zoom "distances", and snap to them. This would work in the interim.

 

Thanks for your quick response.

Link to comment
Share on other sites

In a GPU accelerated environment (Canvas or WebGL) scaling is a trivial cost these days. On older devices (think iPad1 era) then yes it used to be pretty expensive, but not any more. So I wouldn't worry about that. You can apply the scale at the Group/container level and that will be passed down to all children. I would build your game using the proper zoom in/out motion first and just see how it performs. Obviously the more pixels that have to be drawn, the more work the device has to do, but I'd still try it out.

Link to comment
Share on other sites

  • 4 months later...

Phaser is awesome, simplest API I've seen for such a powerful engine.

 

For this one case in particular, if you want to be performant in iPads, because they don't support WebGL (because Apple is afraid it takes over their native market) I'd choose a solution based off CSS transforms and/or DOM for scaling, because as rick pointed the number of pixels matter. Have you seen Famo.us? It's still very early stage tho

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...