search

davidfig / pixi-viewport

A highly configurable viewport/2D camera designed to work with pixi.js
https://davidfig.github.io/pixi-viewport/
MIT License
1.04k stars 174 forks source link

Camera position and size questions #447

Open edev2020 opened 1 year ago

edev2020 commented 1 year ago

Hello,

This is the first time i am trying this plugin and there are not a lot of examples around especially game related ones and the documentation is not that clear either so i am having some problems trying to integrate it.

First of all the canvas starts with an offset viewport even though its coordinates say x: 0 and y: 0 When i change screenWidth and screenHeight in viewport the offset goes however when the player that the viewport follows moves, there is no distance in camera anymore. Per my understanding the screenWidth and screenHeight is supposed to be the camera size however i can still see the whole map even out of the configured size. And even though there is a world limit, the player still can go off world and viewport keeps following him even out of it. I am using the latest versions for both pixi and pixi viewport. I have previous experience with gamemaker view and but cant figure out how to replicate it with this plugin.

Codepen example of what i am talking about: https://codepen.io/pen?template=eYQOGEr

So in short what i am trying to configure the camera size,start position similar to this: https://prnt.sc/TNl6HN_Lp4gI

So if you can provide any advice regarding this it would be really helpful.

Regards!

davidfig commented 1 year ago

screenWidth/screenHeight is in pixel size, not world size. the camera thinks in world size. look at the fit commands, or the worldScreenWidth. play with zoom as well. the camera can be moved with center or topLeft. you can try the demo to see how it all works together

edev2020 commented 1 year ago

screenWidth/screenHeight is in pixel size, not world size. the camera thinks in world size. look at the fit commands, or the worldScreenWidth. play with zoom as well. the camera can be moved with center or topLeft. you can try the demo to see how it all works together

Thank you i figured out how it mostly works, i am currently using clamp to keep the camera inside world bounds and zoom clamp to limit the view to the camera size however the background image gets really blurry: https://codepen.io/pen?template=LYXYpbV

davidfig commented 1 year ago

Try a higher resolution image or clamp it to a higher level zoom. As you zoom into a bitmap, it will get pixelated.

jasonsturges commented 7 months ago

@edev2020 I have a code sandbox that helped me understand this: https://codesandbox.io/p/sandbox/pixi-viewport-coordinate-system-xzcdh

pixi-viewport

In addition to @davidfig's point regarding higher resolution, you could set the scaleMode of the texture to prevent aliasing.

sprite.texture.baseTexture.scaleMode = SCALE_MODES.NEAREST;

For me, I have a few projects where I didn't need high resolution, just clear pixels of low-res assets.

scale-mode

Probably not relevant, but just mentioning if that edge case meets your needs.