Layout

How big something is and where it is: the size and rectangle of what is drawn flat, how a text is set and where its lines break, and points carried between an object and the world.

13 símbolos

boundsOffunctionnacatamalon

boundsOf(thing: TMeasurable) => { x, y, width, height }

Where it sits and how big it is: the rectangle it covers, x and y its top-left corner, with its anchor, its pivot and its own scale taken into account.

In the same place its transform is written, the box it hangs from, and not the world: two things of one box line up with it whatever the box is doing, which is what laying out a HUD or a menu needs. Unturned: a turned thing gives the rectangle it would cover straight.

Parámetros

thingTMeasurable: A sprite, a text or a panel.

Ejemplo

declare const score: TText;
declare const coin: TSprite;

// The coin just after the score, however long the score has grown.
const at = boundsOf(score);
coin.transform.x = at.x + at.width + 4;

Ver el código · layout/size_of.ts:89

letterAtfunctionnacatamalon

letterAt(text: TText, at: { screenX, screenY }) => TTextLetter | null

The letter of a text under a point of the screen: which one was touched, of a word to spell, a line of dialogue with words to pick, a field with a caret to place.

Seen as it is drawn: through its scene's camera, a text on the screen's own layer included, turned, grown and placed by its pivot and everything it hangs under. A letter is its whole step along its line and the line's height, so an o is touched above and below its ink, and two letters touch. null on a space, in the spacing between two letters or two lines, outside the text, or for one destroyed or with nothing drawn yet.

Parámetros

textTText: The text.
at{ screenX, screenY }: A point of the screen: what the pointer gives, info itself.

Ejemplo

const word = createText({ text: 'NACATAMAL', transform: { x: 40, y: 80 } });

listen(word, {
    onClick: (info) => {
        const letter = letterAt(word, info);
        if (letter !== null) console.log(letter.char, letter.index);   // 'T', 4
    },
});

Ver el código · layout/letter_at.ts:59

localToWorldfunctionnacatamalon

localToWorld(object: TSprite | TBox | TText | TNineSlice, point: TPoint2d) => TPoint2d

Where a point of an object is in the world: the way back from worldToLocal.

For anything that leaves an object from a spot on it: the muzzle of a gun that turns, the hand that throws, the place on a ship where the flame comes out. Written once in the object's own numbers, it stays right however the object and everything above it move, turn and grow.

Parámetros

objectTSprite | TBox | TText | TNineSlice: The object the point belongs to, or a sprite, text or panel it draws.
pointTPoint2d: A point measured on the object, from its own origin.

Ejemplo

declare const turret: TGameObject;
declare const spawnShot: (x: number, y: number) => void;

// A shot leaves from the end of the barrel, wherever the turret is facing.
const muzzle = localToWorld(turret, { x: 24, y: 0 });
spawnShot(muzzle.x, muzzle.y);

Ver el código · layout/world_to_local.ts:99

localToWorld3dfunctionnacatamalon

localToWorld3d(object: TBox | TMesh, point: TPoint3d) => TPoint3d

localToWorld for a world with depth: where a point of a model is in space.

Parámetros

objectTBox | TMesh: The object the point belongs to, or a model it draws.
pointTPoint3d: A point measured on the object, from its own origin.

Ejemplo

declare const sword: TMesh;

// The tip of the sword, one unit along the blade, wherever the hand has swung it.
const tip = localToWorld3d(sword, { x: 0, y: 1, z: 0 });

Ver el código · layout/world_to_local.ts:167

measureTextfunctionnacatamalon

measureText(text: TText) => TTextMeasure

measureText(text: string, options?: TMeasureTextOptions) => TTextMeasure

How a text on screen is set: the size of its block and the lines it is in, with its own font and style. The same block sizeOf measures, before the text's scale.

Parámetros

textTText: A text from createText.

Ejemplo

const description = createText({ text: 'A rusty key. It opens the door of the old mill.', style: { maxWidth: 160 } });
// A panel as tall as the lines the description took.
const { lines } = measureText(description);
createSprite({ width: 176, height: lines.length * 10 + 8, tint: '#1a2a5a' });

Ver el código · layout/measure_text.ts:106

pointOffunctionnacatamalon

pointOf(sprite: TSprite, name: string) => { x, y } | null

Where a named point of the frame a sprite is showing is in the world: the hand a sword hangs from, the feet dust rises at, the muzzle a shot leaves. Its sheet says where each one is in each frame, so what follows it stays right when the art changes, with no table of offsets to keep in step.

Everything that moves the picture counts: its anchor and pivot, flipX and flipY, its size, its scale and its turn, and every object above it. The camera does not, as in localToWorld, and so neither does parallax: this is where it is placed, not where it is seen. In useScreenSpace the answer is in screen pixels, as its placement is. With tile the frame is taken as stretched over the whole sprite, not as each copy.

A point is a place and not a pixel, measured as anchor is: { x: 14, y: 10 } is the top-left corner of that pixel, and flipped it lands where that corner lands, so write 14.5 for its middle.

Ask it where it is used, each frame: the answer is for the frame showing now.

Parámetros

spriteTSprite: A sprite from a sheet with points: an .atlas with points, or createSpriteAtlas({ points }).
namestring: The point's name.

Ejemplo

declare const hero: TSprite;
declare const sword: TSprite;

useUpdate(() => {
    const hand = pointOf(hero, 'hand');
    sword.visible = hand !== null;
    if (hand !== null) {
        sword.transform.x = hand.x;
        sword.transform.y = hand.y;
    }
});

Ver el código · layout/point_of.ts:75

sizeOffunctionnacatamalon

sizeOf(thing: TMeasurable) => { width, height }

How big it is, in game pixels, with its own scale: a text of 64 by 8 with scaleX: 2 is 128 wide.

What it was given (width, height), or else what makes it that size: a sprite's picture or the frame of its sheet, a text's letters. The text is measured as it is now, with the font it has, so it can be read the moment it is made: a box behind a label, a coin after a score. Not yet loaded, a picture or a font measures 0.

Its own scale and not the boxes' above it, and not its turn: the size of what it says it is, in the same place its transform is written. Where it sits as well is boundsOf.

Parámetros

thingTMeasurable: A sprite, a text or a panel.

Ejemplo

const label = createText({ text: 'PLAY' });
const { width, height } = sizeOf(label);

Ver el código · layout/size_of.ts:59

worldToLocalfunctionnacatamalon

worldToLocal(object: TSprite | TBox | TText | TNineSlice, point: TPoint2d) => TPoint2d

Where a point of the world falls on an object: measured from the object's own origin, along its own turned and resized axes, which are the numbers its pictures are placed in.

What a hit needs once it has landed: where on the membrane the bite was, to dent it there; which end of a paddle the ball touched; where on an on-screen button the finger is. The object's placement is taken whole, with everything it hangs under, and the camera is not part of it: the worldX/worldY the pointer gives are the world this means.

Parámetros

objectTSprite | TBox | TText | TNineSlice: The object to measure from, or a sprite, text or panel it draws.
pointTPoint2d: A point of the world.

Ejemplo

declare const paddle: TGameObject;
declare const ball: TSprite;
declare const PADDLE_WIDTH: number;

// Where on the paddle the ball hit: -1 at its left end, 1 at its right one.
const at = worldToLocal(paddle, ball.transform);
const english = at.x / (PADDLE_WIDTH / 2);

Ver el código · layout/world_to_local.ts:61

worldToLocal3dfunctionnacatamalon

worldToLocal3d(object: TBox | TMesh, point: TPoint3d) => TPoint3d

worldToLocal for a world with depth: where a point in space falls on a model, along its own turned and resized axes.

Parámetros

objectTBox | TMesh: The object to measure from, or a model it draws.
pointTPoint3d: A point in space.

Ejemplo

declare const cell: TGameObject;
declare const food: TMesh;
declare const dentAt: (x: number, y: number, z: number) => void;

// Which side of the cell the food touched, to dent the membrane there.
const at = worldToLocal3d(cell, food.transform);
dentAt(at.x, at.y, at.z);

Ver el código · layout/world_to_local.ts:134

TMeasurabletypenacatamalon

TMeasurable: TSprite | TText | TNineSlice

Something drawn flat that sizeOf and boundsOf measure: a sprite, a text or a panel.

Ver el código · layout/size_of.ts:14

TMeasureTextOptionstypenacatamalon

TMeasureTextOptions: TTextStyle & { font }

What measureText is asked to measure with: a font, and the same size, spacing and width a text on screen takes.

Propiedades

fontopcionalTBitmapFont | TFont | string

A font from useLoadFont or useLoadBitmapFont, or the key one was loaded under. A key is looked up in the scene body, where createText looks up its own. Left out, the font the engine carries, which needs no game and no loading.

fontSizeopcionalnumber

How big the letters are, in pixels.

For a vector font (useLoadFont), the size of the font as anywhere else type is set: one em is this many pixels, and the line is as tall as the font says. Default 16. Any size is sharp.

For a bitmap font, how tall one line is. Default: the font's own height, so the font as drawn. A pixel font looks crisp at whole multiples of its height (16 or 24 for an 8 pixel font) and uneven in between.

alignopcional'left' | 'center' | 'right'

Where each line sits: inside maxWidth when there is one, inside the width of the longest line when not. Default 'left'.

maxWidthopcionalnumber

How wide a line can be, in pixels, before its words go on to the next one: a dialogue box, a panel's description. The text's block is this wide, so align and anchor place the lines in the box rather than around the words. Measured before the text's scale, like the other sizes here.

Lines break at spaces; a word wider than the whole width breaks between two letters. \n still starts a line wherever it is. Changing the text or the size breaks it again on the next frame. Left out or 0, lines are only broken by \n.

letterSpacingopcionalnumber

Extra pixels between two characters. Default 0.

lineSpacingopcionalnumber

Extra pixels between two lines. Default 0.

Ver el código · layout/measure_text.ts:21

TTextLettertypenacatamalon

A letter of a text, as letterAt finds it under a point.

Propiedades

indexnumber: Where it is in the text: text.text[index] is the letter, the first half of it for a character that takes two (an emoji).
charstring: The letter itself, whole.
linenumber: The line it is on, from 0: one per \n, and more where maxWidth broke one.

Ver el código · layout/letter_at.ts:13

TTextMeasuretypenacatamalon

How big a text measured by measureText is, and the lines it is set in.

Propiedades

widthnumber: How wide the block is: its longest line, or maxWidth when there is one.
heightnumber: How tall the block is: its lines and the spacing between them.
linesstring[]: What each line says: one per \n, and more where maxWidth broke one, without the spaces it broke at.

Ver el código · layout/measure_text.ts:37

Layout

#boundsOffunctionnacatamalon

Parámetros

Ejemplo

#letterAtfunctionnacatamalon

Parámetros

Ejemplo

#localToWorldfunctionnacatamalon

Parámetros

Ejemplo

#localToWorld3dfunctionnacatamalon

Parámetros

Ejemplo

#measureTextfunctionnacatamalon

Parámetros

Ejemplo

#pointOffunctionnacatamalon

Parámetros

Ejemplo

#sizeOffunctionnacatamalon

Parámetros

Ejemplo

#worldToLocalfunctionnacatamalon

Parámetros

Ejemplo

#worldToLocal3dfunctionnacatamalon

Parámetros

Ejemplo

#TMeasurabletypenacatamalon

#TMeasureTextOptionstypenacatamalon

Propiedades

#TTextLettertypenacatamalon

Propiedades

#TTextMeasuretypenacatamalon

Propiedades

boundsOffunctionnacatamalon

letterAtfunctionnacatamalon

localToWorldfunctionnacatamalon

localToWorld3dfunctionnacatamalon

measureTextfunctionnacatamalon

pointOffunctionnacatamalon

sizeOffunctionnacatamalon

worldToLocalfunctionnacatamalon

worldToLocal3dfunctionnacatamalon

TMeasurabletypenacatamalon

TMeasureTextOptionstypenacatamalon

TTextLettertypenacatamalon

TTextMeasuretypenacatamalon