melonjs
    Preparing search index...

    Class Camera2d

    a 2D orthographic camera

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    alpha alwaysUpdate ancestor anchorPoint autoTransform AXIS blendMode body bounds currentTransform damping deadzone edges far floating follow_axis GUID 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

    Properties

    alpha: number

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

    • Renderable#setOpacity
    • Renderable#getOpacity
    1.0
    alwaysUpdate: boolean

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

    false
    ancestor: Container | Entity

    a reference to the parent object that contains this renderable

    undefined
    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}. 

    <0.5,0.5>
    autoTransform: boolean

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

    true

    // 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;
        ....
    }
    AXIS: { BOTH: number; HORIZONTAL: number; NONE: number; VERTICAL: number }

    Axis definition

    blendMode: string

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

    "normal"
    • CanvasRenderer#setBlendMode
    • WebGLRenderer#setBlendMode

    body

    body: Body

    the renderable physic body

    // 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

    Camera bounds

    currentTransform: Matrix2d

    the renderable default transformation matrix

    damping: number

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

    1.0
    deadzone: Rect | undefined
    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: number

    the furthest point relative to the camera.

    1000
    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.

    false
    follow_axis: number
    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)

    indices: number[]

    a list of indices for all vertices composing this polygon

    isDirty: boolean

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

    true
    isKinematic: boolean

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

    true
    isPersistent: boolean

    make the renderable object persistent over level changes

    false
    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.

    undefined

    // 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: string

    The name of the renderable

    ""
    near: number

    the closest point relative to the camera

    -1000
    offset: Vector2d
    onVisibilityChange: Function

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

    undefined

    this.onVisibilityChange = function(inViewport) {
        if (inViewport === true) {
            console.log("object has entered the in a camera viewport!");
        }
    };
    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: Vector2d

    origin point of the Polygon

    projectionMatrix: Matrix3d

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

    shader: GLShader

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

    undefined
    target: Vector2d | null
    type: string = "Rectangle"

    The shape type (used internally).

    updateWhenPaused: boolean

    Whether to update this object when the game is paused.

    false

    Accessors

    • get isFloating(): boolean

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

      Returns boolean

      Renderable#floating

    Methods

    • 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

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

    • 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

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

    • 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

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

    • 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

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

    • 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

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

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

      Returns boolean | null

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

    • 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

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

      Parameters

      • x: number

        horizontal offset

      • y: number

        vertical offset

      Returns void

      focusOn

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

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

      // 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;
      },

    • 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

    • 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

    • 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

    • 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

      follow

    • 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

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

    • 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