Class Camera2d

a 2D orthographic camera

Hierarchy (view full)

Constructors

constructor

Properties

AXIS GUID alpha alwaysUpdate ancestor anchorPoint autoTransform blendMode body bounds currentTransform damping deadzone edges far floating follow_axis indices isDirty isKinematic isPersistent mask name near offset onVisibilityChange points pos projectionMatrix shader target type updateWhenPaused

Accessors

bottom centerX centerY depth height inViewport isFlippedX isFlippedY isFloating left parentApp right tint top width

Methods

angleTo centerOn clone contains containsRectangle copy distanceTo equals fadeIn fadeOut flipX flipY focusOn follow getAbsolutePosition getBounds getIndices getOpacity isConvex isFinite isVisible localToWorld lookAt move moveTo onCollision onDestroyEvent overlaps postDraw preDraw recalc reset resize rotate scale scaleV setBounds setDeadzone setOpacity setShape setSize setVertices shake shift to2d toIso toPolygon transform translate unfollow union updateBounds worldToLocal

Constructors

constructor

Properties

ReadonlyAXIS

AXIS: {
    BOTH: number;
    HORIZONTAL: number;
    NONE: number;
    VERTICAL: number;
}

Axis definition

GUID

GUID: string

(G)ame (U)nique (Id)entifier"
a GUID will be allocated for any renderable object added
to an object container (including the me.game.world container)

alpha

alpha: number

Define the renderable opacity
Set to zero if you do not wish an object to be drawn

See

  • Renderable#setOpacity
  • Renderable#getOpacity

Default

1.0

alwaysUpdate

alwaysUpdate: boolean

Whether the renderable object will always update, even when outside of the viewport

Default

false

ancestor

ancestor: Container | Entity

a reference to the parent object that contains this renderable

Default

undefined

anchorPoint

anchorPoint: ObservablePoint

The anchor point is used for attachment behavior, and/or when applying transformations.
The coordinate system places the origin at the top left corner of the frame (0, 0) and (1, 1) means the bottom-right corner

a Renderable's anchor point defaults to (0.5,0.5), which corresponds to the center position.

Note: Object created through Tiled will have their anchorPoint set to (0, 0) to match Tiled Level editor implementation. To specify a value through Tiled, use a json expression like json:{"x":0.5,"y":0.5}.

Default

<0.5,0.5>

autoTransform

autoTransform: boolean

When enabled, an object container will automatically apply any defined transformation before calling the child draw method.

Default

true

Example

// enable "automatic" transformation when the object is activated
onActivateEvent: function () {
    // reset the transformation matrix
    this.currentTransform.identity();
    // ensure the anchor point is the renderable center
    this.anchorPoint.set(0.5, 0.5);
    // enable auto transform
    this.autoTransform = true;
    ....
}

blendMode

blendMode: string

the blend mode to be applied to this renderable (see renderer setBlendMode for available blend mode)

Default

"normal"

See

  • CanvasRenderer#setBlendMode
  • WebGLRenderer#setBlendMode

body

body: Body

the renderable physic body

Example

// define a new Player Class
 class PlayerEntity extends me.Sprite {
     // constructor
     constructor(x, y, settings) {
         // call the parent constructor
         super(x, y , settings);

         // define a basic walking animation
         this.addAnimation("walk",  [...]);
         // define a standing animation (using the first frame)
         this.addAnimation("stand",  [...]);
         // set the standing animation as default
         this.setCurrentAnimation("stand");

         // add a physic body
         this.body = new me.Body(this);
         // add a default collision shape
         this.body.addShape(new me.Rect(0, 0, this.width, this.height));
         // configure max speed, friction, and initial force to be applied
         this.body.setMaxVelocity(3, 15);
         this.body.setFriction(0.4, 0);
         this.body.force.set(3, 0);
         this.isKinematic = false;

         // set the display to follow our position on both axis
         me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);
     }

     ...

}

bounds

bounds: Bounds

Camera bounds

currentTransform

currentTransform: Matrix2d

the renderable default transformation matrix

damping

damping: number

Camera damping for smooth transition [0 .. 1]. 1 being the maximum value and will snap the camera to the target position

Default

1.0

deadzone

deadzone: undefined | Rect

edges

edges: Vector2d[]

The edges here are the direction of the nth edge of the polygon, relative to the nth point. If you want to draw a given edge from the edge value, you must first translate to the position of the starting point.

far

far: number

the furthest point relative to the camera.

Default

1000

floating

floating: boolean

If true, this renderable will be rendered using screen coordinates, as opposed to world coordinates. Use this, for example, to define UI elements.

Default

false

follow_axis

follow_axis: number

indices

indices: number[]

a list of indices for all vertices composing this polygon

isDirty

isDirty: boolean

when true the renderable will be redrawn during the next update cycle

Default

true

isKinematic

isKinematic: boolean

If true then physic collision and input events will not impact this renderable

Default

true

isPersistent

isPersistent: boolean

make the renderable object persistent over level changes

Default

false

mask

mask:
    | Polygon
    | Rect
    | Ellipse
    | Line
    | RoundRect

A mask limits rendering elements to the shape and position of the given mask object. So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.

Default

undefined

Example

// apply a mask in the shape of a Star
myNPCSprite.mask = new me.Polygon(myNPCSprite.width / 2, 0, [
   // draw a star
   {x: 0, y: 0},
   {x: 14, y: 30},
   {x: 47, y: 35},
   {x: 23, y: 57},
   {x: 44, y: 90},
   {x: 0, y: 62},
   {x: -44, y: 90},
   {x: -23, y: 57},
   {x: -47, y: 35},
   {x: -14, y: 30}
]);

name

name: string

The name of the renderable

Default

""

near

near: number

the closest point relative to the camera

Default

-1000

offset

offset: Vector2d

onVisibilityChange

onVisibilityChange: Function

an event handler that is called when the renderable leave or enter a camera viewport

Default

undefined

Example

this.onVisibilityChange = function(inViewport) {
    if (inViewport === true) {
        console.log("object has entered the in a camera viewport!");
    }
};

points

points: Vector2d[]

Array of points defining the Polygon
Note: If you manually change points, you must call recalcafterwards so that the changes get applied correctly.

pos

pos: Vector2d

origin point of the Polygon

projectionMatrix

projectionMatrix: Matrix3d

the default camera projection matrix (2d cameras use an orthographic projection by default).

shader

shader: GLShader

(Experimental) an optional shader, to be used instead of the default built-in one, when drawing this renderable (WebGL only)

Default

undefined

target

target: null | Vector2d

type

type: string = "Rectangle"

The shape type (used internally).

updateWhenPaused

updateWhenPaused: boolean

Whether to update this object when the game is paused.

Default

false

Accessors

bottom

centerX

centerY

depth

height

inViewport

isFlippedX

isFlippedY

isFloating

  • get isFloating(): boolean

  • Whether the renderable object is floating (i.e. used screen coordinates), or contained in a floating parent container

    Returns boolean

    See

    Renderable#floating

left

parentApp

right

tint

top

width

Methods

angleTo

centerOn

clone

contains

  • contains(x, y): boolean

  • Returns true if the polygon contains the given point.
    (Note: it is highly recommended to first do a hit test on the corresponding
    bounding rect, as the function can be highly consuming with complex shapes)

    Parameters

    • x: number

      x coordinate or a vector point to check

    • y: number

      y coordinate

    Returns boolean

    True if the polygon contain the point, otherwise false

    Example

    if (polygon.contains(10, 10)) {
      // do something
    }
    // or
    if (polygon.contains(myVector2d)) {
      // do something
    }
  • contains(vector): boolean

  • Returns true if the polygon contains the given point.
    (Note: it is highly recommended to first do a hit test on the corresponding
    bounding rect, as the function can be highly consuming with complex shapes)

    Parameters

    Returns boolean

    True if the polygon contain the point, otherwise false

    Example

    if (polygon.contains(10, 10)) {
      // do something
    }
    // or
    if (polygon.contains(myVector2d)) {
      // do something
    }

containsRectangle

copy

distanceTo

equals

fadeIn

  • fadeIn(color, duration?, onComplete?): void

  • fadeIn effect

    fade to the specified color

    Parameters

    • color: string | Color

      a CSS color value

    • Optionalduration: number = 1000

      expressed in milliseconds

    • OptionalonComplete: Function

      callback once effect is over

    Returns void

    Example

    // flash the camera to white for 75ms
    me.game.viewport.fadeIn("#FFFFFF", 75);

fadeOut

  • fadeOut(color, duration?, onComplete?): void

  • fadeOut(flash) effect

    screen is filled with the specified color and slowly goes back to normal

    Parameters

    • color: string | Color

      a CSS color value

    • Optionalduration: number = 1000

      expressed in milliseconds

    • OptionalonComplete: Function

      callback once effect is over

    Returns void

    Example

    // fade the camera to white upon dying, reload the level, and then fade out back
    me.game.viewport.fadeIn("#fff", 150, function() {
        me.audio.play("die", false);
        me.level.reload();
        me.game.viewport.fadeOut("#fff", 150);
    });

flipX

flipY

focusOn

follow

  • follow(target, axis?, damping?): void

  • set the camera to follow the specified renderable.
    (this will put the camera center around the given target)

    Parameters

    • target: Vector2d | Renderable

      renderable or position vector to follow

    • Optionalaxis: number

      Which axis to follow (see Camera2d.AXIS)

    • Optionaldamping: number

      default damping value

    Returns void

    Example

    // set the camera to follow this renderable on both axis, and enable damping
    me.game.viewport.follow(this, me.game.viewport.AXIS.BOTH, 0.1);

getAbsolutePosition

getBounds

getIndices

getOpacity

isConvex

  • isConvex(): null | boolean

  • Returns true if the vertices composing this polygon form a convex shape (vertices must be in clockwise order).

    Returns null | boolean

    true if the vertices are convex, false if not, null if not computable

isFinite

isVisible

localToWorld

  • localToWorld(x, y, v?): Vector2d

  • convert the given "local" (screen) coordinates into world coordinates

    Parameters

    • x: number

      the x coordinate of the local point to be converted

    • y: number

      the y coordinate of the local point to be converted

    • Optionalv: Vector2d

      an optional vector object where to set the converted value

    Returns Vector2d

lookAt

move

  • move(x, y): void

  • move the camera upper-left position by the specified offset.

    Parameters

    • x: number

      horizontal offset

    • y: number

      vertical offset

    Returns void

    See

    focusOn

    Example

    // Move the camera up by four pixels
    me.game.viewport.move(0, -4);

moveTo

onCollision

  • onCollision(): boolean

  • onCollision callback, triggered in case of collision, when this renderable body is colliding with another one

    Returns boolean

    true if the object should respond to the collision (its position and velocity will be corrected)

    Example

    // colision handler
    onCollision(response) {
        if (response.b.body.collisionType === me.collision.types.ENEMY_OBJECT) {
            // makes the other object solid, by substracting the overlap vector to the current position
            this.pos.sub(response.overlapV);
            this.hurt();
            // not solid
            return false;
        }
        // Make the object solid
        return true;
    },

onDestroyEvent

overlaps

postDraw

preDraw

recalc

reset

  • reset(x?, y?): void

  • reset the camera position to specified coordinates

    Parameters

    • Optionalx: number = 0

      initial position of the camera on the x axis

    • Optionaly: number = 0

      initial position of the camera on the y axis

    Returns void

resize

rotate

scale

  • scale(x, y?): Renderable

  • scale the renderable around his anchor point. Scaling actually applies changes to the currentTransform member wich is used by the renderer to scale the object when rendering. It does not scale the object itself. For example if the renderable is an image, the image.width and image.height properties are unaltered but the currentTransform member will be changed.

    Parameters

    • x: number

      a number representing the abscissa of the scaling vector.

    • Optionaly: number = x

      a number representing the ordinate of the scaling vector.

    Returns Renderable

    Reference to this object for method chaining

scaleV

setBounds

  • setBounds(x, y, w, h): void

  • set the camera boundaries (set to the world limit by default). the camera is bound to the given coordinates and cannot move/be scrolled outside of it.

    Parameters

    • x: number

      world left limit

    • y: number

      world top limit

    • w: number

      world width limit

    • h: number

      world height limit

    Returns void

setDeadzone

  • setDeadzone(w, h): void

  • change the deadzone settings. the "deadzone" defines an area within the current camera in which the followed renderable can move without scrolling the camera.

    Parameters

    • w: number

      deadzone width

    • h: number

      deadzone height

    Returns void

    See

    follow

setOpacity

setShape

setSize

setVertices

shake

  • shake(intensity, duration, axis?, onComplete?, force?): void

  • shake the camera

    Parameters

    • intensity: number

      maximum offset that the screen can be moved while shaking

    • duration: number

      expressed in milliseconds

    • Optionalaxis: number

      specify on which axis to apply the shake effect (see Camera2d.AXIS)

    • OptionalonComplete: Function

      callback once shaking effect is over

    • Optionalforce: boolean

      if true this will override the current effect

    Returns void

    Example

    // shake it baby !
    me.game.viewport.shake(10, 500, me.game.viewport.AXIS.BOTH);

shift

to2d

toIso

toPolygon

transform

translate

unfollow

union

updateBounds

worldToLocal

  • worldToLocal(x, y, v?): Vector2d

  • convert the given world coordinates into "local" (screen) coordinates

    Parameters

    • x: number
    • y: number
    • Optionalv: number

      an optional vector object where to set the converted value

    Returns Vector2d

    a vector with the converted local coordinates

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods