What is X?

This seems a really supid question, but as I dont know the answer, pretty much all my code produces unpredictable and largely incorrect results I when I resize the browser window using crop full screen mode and layer scaling.

I this mode, the actual browser window may be larger or smaller than the projects window size, which may be larger or smaller than the layout, and there may be scaling.

There are a number of entities, presumably some of which have their own coordinate system:

1) projects window size.

2) viewport (no idea what this is - not in manual)

3) canvas (no idea what this - not in manual)

4) layer

5) the browser window

6) the layout scale

7) the browsers pixel dencidty (retina display)

8) other?

object-> Compare X

What is x relative to? Which of the above coordinate systems? If some of the above coordinate systems are different, how do you map between them?

What is the difference between:

Object.X

Object.XAt

Object.ImagePointX

Touch.X

Touch.AbsoluteX

Touch.AbsoluteXAt

for example?

Thanks for any help or tips.

Object.X/Y refers to the object's hotspot, or origin.

Object.ImagePointX/Y refers to the object's image point.

Both are set in the image editor, and you can make as many image points as you need.

X/Y refers to the position relative to the layout; 0,0 is the top left of the layout.

Absolute X/Y refers to the position relative to the canvas; 0,0 is the top left of the canvas.

Viewport refers to whatever is on the canvas based on Scroll X/Y, for example Viewport.left (or however it's written) refers to the left side of the canvas regardless of the current scroll position.

Canvas refers to the "game window" or resolution. The size can be adjusted in the project properties via the window size parameters.

People often find this confusing, but it's quite straightforward once you get your head round it.

Most things happen in layout co-ordinates. These are the co-ordinates shown in the status bar when moving the mouse in the layout view: (0,0) at the top-left of the layout constantly increasing as you travel down to the bottom-right corner of the layout. Think of it like the "game world", happening independently of the screen. (This is "model" and "view" separation, where the layout is the model and the screen is the view, which is how it is actually designed internally as well.)

Canvas co-ordinates (or sometimes 'screen co-ordinates') are the physical pixels on your screen. So 0,0 is always the top left pixel of the canvas, regardless of where you've scrolled to.

The viewport is simply where the edges of the screen are in layout co-ordinates.

Everything is in layout co-ordinates, except for 'AbsoluteX' and 'AbsoluteY' which refer to canvas co-ordinates.

I think the main source of confusion is layout co-ordinates by default line up with canvas co-ordinates, so it's easy to get mixed up. Imagine a football pitch and some people playing a game. Then if you place a camera above the pitch looking down, as you move the camera around you see the pitch differently: bigger, smaller, or rotated. The players and the pitch itself aren't changing size or rotating! They're playing exactly the same game at the same size, but the view is changing, so they appear at different sizes and angles depending on where the camera is. Changing the scale or angle of a layout or layer effectively moves the camera. (Mathematically, it is changing how layout co-ordinates are translated in to canvas co-ordinates.)

I think some people assume that increasing the layout scale makes all the objects get bigger. This is like saying on TV it zooms in by making all the players and the entire stadium grow really huge! Instead think about the layout scale like the camera moving closer, and all the objects in the layout are still the same size and using the same co-ordinates.

You can go on to talk about browser and monitor co-ordinates, but it's pretty confusing really - generally you only need to think about layout co-ordinates and canvas co-ordinates.