pixi-viewport examples

[leboard]

Hi all,

I'm embarking on making a simple game that involves having a map. I want the player to be able to zoom in and out and drag around the map and select things. I after a quick look at various frameworks it seemed Pixi was a good fit so I went with that.

When looking at how to handle the zoom and drag I found pixi-viewport. I have managed to get my map to display, identify what was clicked (and the map - co-ordinates).

There are two things I can't get working but I am struggling to find examples of working code or indepth writeups/instructions that I can use to work out what I am doing wrong.

What I am trying to do

Good enough result: when the game starts the viewport center is the player. The zoom is set to fill the application window. If zoomed out you can't move the map out of the application window.

Perfect result: when the user drags around the map it stops at the edge of the visible area so you can't drag the map out of the viewport. When the user zooms out the zoom stops when it will be smaller than the application window and, if close to the edge recenters so that you never see the application backgrounr. When the browser window resizes everything adjusts.

 

The two issues I am having to get there are:

Bounce

When I add ".bounce" to my viewport it does not do what I expect which is to keep the map in the viewport. I have tried various sizes for the application and viewport settings but can't seem to get it right.

moveCenter

When I try to use moveCenter my map end up with the 'center' point somewhere near the bottom right of my application window. fitWorld() works but fitWidth makes my map disappear entirely and I can't even work out where it went.

 

I think both issues relate to my limited understanding of what these variables actually mean and how they interact with the PIXI application size. I've looked at the pixi-viewport api but I can't work it out.

• screenHeight
• screenWidth
• screenWorldHeight
• screenWorldWidth
• worldHeight
• worldWidth
• worldScreenHeight
• worldScreenWidth

I'd really appreciate it if someone can point me in the right direction.

Thanks!

 

[ivan.popelyshev]

Hello and welcome to the forums!

The best way to figure it out is to understand what lies underneath: "app.screen"  aka "renderer.screen", transforms, position/pivot (position global is pivot local) and other basic things in pixi. People who cant get what they want with viewport, has to get lower and debug it. Sometimes you even have to write and draw something on paper! Experience with working on rectangles and transforms helps a lot. At the least, that's what you can do while waiting for concrete answer about pixi-viewport model from someone who used it