screen coordinates vs. world coordinates

[waechtertroll]

Hello,

I'm quite new to pixi, so I'm wondering about the following: how can I specify the game world size independent of the screen container size?

E. g. I want to transform my 20x16 tiles game from manual canvas drawing and scaling to pixi, for ultimate awesomeness ;-) and of course the screen container should be bigger than 20x16 pixels. How can I specify this?

And, in addition, how can I specify sprite size in world units, not pixels?

[ivan.popelyshev]

That's not the best idea. When I was making canvas2d game, I started with that kind of coordinates, but in the end i changed everything that way world unit became pixel unit.

Anyway, in pixi you whave to scale both the stage and sprites to achieve that:

var stage = new PIXI.Container();
stage.scale.set(renderer.width / 20, renderer.height/16);

var tile = new PIXI.Sprite(tileTexture);
tile.scale.set(1.0 / stage.scale.x, 1.0 / stage.scale.y);
stage.addChild(tile);

//new coords for tile in world units
tile.position.x = 5;
tile.position.y = 4;

[waechtertroll]

Thanks for your reply and the code example. Can you tell me why that is a bad idea? I feel that if I don't do so, my whole world, view, and game experience depend on screen resolution.

I admit, I have mostly developed for desktop and web browsers, not thinking much about mobile users.

[ivan.popelyshev]

Ok, the thing is that you already have sizes for your sprites, and they are in pixels, Thus, your world unit must be the same as sprite pixel. For different resolutions you can scale all stage that way it either fits either covers either stretches your game field. To do that you have to implement some logic that changes "stage.scale" the way you want. 

What I said is that choosing world unit "1 per tile" is not a good idea, because you'll have to scale all the sprites too  If tile size is 32x32 then all sprites will have to be scaled 32x.

If your tile has size 32x32 and tile coords (i,j) , then its center coords on the screen are (i*32 + 16, j*32 + 16). I recommend to use coordinates of tile center in your calculations, it will save you a lot of time.

[waechtertroll]

Ah, now I see what you mean.

It's just that I don't think in pixels at all.

I often apply some degrees of physics, and with that I have to calculate on standard units; when my measurements become dependent on screen pixels, there are vast gameplay differences between screen sizes. So no matter what I do, I have to work in "world coordinates" all the time, until I output graphics. In pure webGL I can adjust the matrices, so it will always fill the view with a world of given size and forget about scaling. On the other hand, using pixi saves so much low-level-code (and nerves...) because people more clever than I have already written it, so I wondered if I can have that behavior here, too.

I just can't imagine another way to stay consistant with animations, velocities etc. without converting between world- and screen-coordinates. Am I missing something?

Btw, when you said "then all sprites will have to be scaled 32x", I hope you don't want to say I have to to 32 scaling operations?

[ivan.popelyshev]

no, just create a "new PIXI.Point(32,32)" and set is as a scale to every sprite you create. 

For effect like in webgl, use "stage.scale". I do not know how you want that : stretch, fit or cover. For example, stretch is simple:

var w = renderer.width/renderer.resolution, h = renderer.height/renderer.resolution;

//(0,0,w,h) is our current viewport.

stage.position.set(w/2, h/2); //some point on screen that we want stage to be attached to. It can be (0,0), it can be center, it depends on you

stage.scale.set(w / SCREEN_WIDTH, h / SCREEN_HEIGHT); //adjust the scale

stage.pivot.set(4.0, 5.0); // position on screen will be mapped to pivot on stage. In that case, world coords (4.0,5.0) will be shown in the center of screen.

UPD. Buck the language selection of that forum

[waechtertroll]

Ah ok, I simply misread your answer :-)

It's also enough to simply set stage.scale (I'm doing so on the window.resize event) and use positions/image sizes in world coordinates. You're probably right that I should use my images's pixel sizes (just think of all those screen resolution issues I'd get otherwise), but physics on the one hand and focus on learning pixi instead of drawing assets allow me to develop/test faster this way ;-)

[ivan.popelyshev]

I have an option to scale the textures and not sprites, that way all sprites will be scaled too, but there's nothing like that in PIXI, you'll have to adjust scale of every sprite