Jump to content

screen coordinates vs. world coordinates


Recommended Posts


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?

Link to comment
Share on other sites

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);

//new coords for tile in world units
tile.position.x = 5;
tile.position.y = 4;
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 ;-)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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