Options
All
  • Public
  • Public/Protected
  • All
Menu

Class View

View represents the game window.
It's main task include:

  • Apply the design resolution policy to the UI Canvas
  • Provide interaction with the window, like resize event on web, retina display support, etc...
  • Manage the scale and translation of canvas related to the frame on Web

    With {{view}} as its singleton initialized by the engine, you don't need to call any constructor or create functions,
    the standard way to use it is by calling:
  • view.methodName();

Hierarchy

Index

Constructors

constructor

Properties

Private _antiAliasEnabled

_antiAliasEnabled: boolean

Private _autoFullScreen

_autoFullScreen: boolean

_designResolutionSize

_designResolutionSize: Size

Private _devicePixelRatio

_devicePixelRatio: number

Private _frameSize

_frameSize: Size

Private _isAdjustViewport

_isAdjustViewport: boolean

Private _isRotated

_isRotated: boolean

Private _maxPixelRatio

_maxPixelRatio: number

Private _orientation

_orientation: any

Private _orientationChanging

_orientationChanging: boolean

_originalDesignResolutionSize

_originalDesignResolutionSize: Size

Private _resizeCallback

_resizeCallback: Function | null

_resizeWithBrowserSize

_resizeWithBrowserSize: boolean

Private _resizing

_resizing: boolean

Private _resolutionPolicy

_resolutionPolicy: ResolutionPolicy

Private _retinaEnabled

_retinaEnabled: boolean

Private _rpExactFit

_rpExactFit: ResolutionPolicy

Private _rpFixedHeight

_rpFixedHeight: ResolutionPolicy

Private _rpFixedWidth

_rpFixedWidth: ResolutionPolicy

Private _rpNoBorder

_rpNoBorder: ResolutionPolicy

Private _rpShowAll

_rpShowAll: ResolutionPolicy

Private _scaleX

_scaleX: number

Private _scaleY

_scaleY: number

Private _viewportRect

_viewportRect: Rect

Private _visibleRect

_visibleRect: Rect

Static instance

instance: View

Methods

Private adjustSizeKeepCanvasSize

  • _adjustSizeKeepCanvasSize(): void

Private adjustViewportMeta

  • _adjustViewportMeta(): void

Private convertMouseToLocation

  • convertMouseToLocation(in_out_point: any, relatedPos: any): void

Private convertPointWithScale

  • convertPointWithScale(point: any): void

Private convertTouchWidthScale

  • convertTouchWidthScale(selTouch: any): void

Private convertTouchesWithScale

  • convertTouchesWithScale(touches: any): void

Private initFrameSize

  • _initFrameSize(): void

Private orientationChange

  • _orientationChange(): void

Private resizeEvent

  • _resizeEvent(): void

Private setViewportMeta

  • setViewportMeta(metas: any, overwrite: any): void

adjustViewportMeta

  • adjustViewportMeta(enabled: boolean): void
  • Sets whether the engine modify the "viewport" meta in your web page.
    It's enabled by default, we strongly suggest you not to disable it.
    And even when it's enabled, you can still set your own "viewport" meta, it won't be overridden
    Only useful on web

    Parameters

    • enabled: boolean

      Enable automatic modification to "viewport" meta

    Returns void

convertToLocationInView

  • convertToLocationInView(tx: number, ty: number, relatedPos: any, out: Vec2): Vec2
  • Returns the real location in view for a translation based on a related position

    Parameters

    • tx: number

      The X axis translation

    • ty: number

      The Y axis translation

    • relatedPos: any

      The related position object including "left", "top", "width", "height" informations

    • out: Vec2

      The out object to save the conversion result

    Returns Vec2

emit

  • emit(type: EventType, arg0?: any, arg1?: any, arg2?: any, arg3?: any, arg4?: any): void
  • Trigger an event directly with the event name and necessary arguments.

    Parameters

    • type: EventType

      event type

    • Optional arg0: any
    • Optional arg1: any
    • Optional arg2: any
    • Optional arg3: any
    • Optional arg4: any

    Returns void

enableAntiAlias

  • enableAntiAlias(enabled: boolean): void

enableAutoFullScreen

  • enableAutoFullScreen(enabled: boolean): void
  • If enabled, the application will try automatically to enter full screen mode on mobile devices
    You can pass true as parameter to enable it and disable it by passing false.
    Only useful on web

    Parameters

    • enabled: boolean

      Enable or disable auto full screen on mobile devices

    Returns void

enableRetina

  • enableRetina(enabled: boolean): void
  • Retina support is enabled by default for Apple device but disabled for other devices,
    it takes effect only when you called setDesignResolutionPolicy
    Only useful on web

    Parameters

    • enabled: boolean

      Enable or disable retina display

    Returns void

getCanvasSize

  • getCanvasSize(): Size
  • Returns the canvas size of the view.
    On native platforms, it returns the screen size since the view is a fullscreen view.
    On web, it returns the size of the canvas element.

    Returns Size

getDesignResolutionSize

  • getDesignResolutionSize(): Size

getDevicePixelRatio

  • getDevicePixelRatio(): number

getFrameSize

  • getFrameSize(): Size
  • Returns the frame size of the view.
    On native platforms, it returns the screen size since the view is a fullscreen view.
    On web, it returns the size of the canvas's outer DOM element.

    Returns Size

getResolutionPolicy

getScaleX

  • getScaleX(): number

getScaleY

  • getScaleY(): number

getViewportRect

  • getViewportRect(): Rect

getVisibleOrigin

  • getVisibleOrigin(): Vec2

getVisibleOriginInPixel

  • getVisibleOriginInPixel(): Vec2

getVisibleSize

  • getVisibleSize(): Size

getVisibleSizeInPixel

  • getVisibleSizeInPixel(): Size

hasEventListener

  • hasEventListener(type: string, callback?: Function, target?: undefined | object): boolean
  • Checks whether there is correspond event listener registered on the given event.

    Parameters

    • type: string

      Event type.

    • Optional callback: Function

      Callback function when event triggered.

    • Optional target: undefined | object

      Callback callee.

    Returns boolean

init

  • init(): void

isAntiAliasEnabled

  • isAntiAliasEnabled(): boolean

isAutoFullScreenEnabled

  • isAutoFullScreenEnabled(): boolean

isRetinaEnabled

  • isRetinaEnabled(): boolean

off

  • Removes the listeners previously registered with the same type, callback, target and or useCapture, if only type is passed as parameter, all listeners registered with that type will be removed.

    example

    import { log } from 'cc'; // register fire eventListener var callback = eventTarget.on('fire', function () { log("fire in the hole"); }, target); // remove fire event listener eventTarget.off('fire', callback, target); // remove all fire event listeners eventTarget.off('fire');

    Type parameters

    • TFunction: Function

    Parameters

    • type: EventType

      A string representing the event type being removed.

    • Optional callback: TFunction

      The callback to remove.

    • Optional thisArg: any

    Returns void

on

  • on<TFunction>(type: EventType, callback: TFunction, thisArg?: any, once?: undefined | false | true): typeof callback
  • Register an callback of a specific event type on the EventTarget. This type of event should be triggered via emit.

    example

    import { log } from 'cc'; eventTarget.on('fire', function () { log("fire in the hole"); }, node);

    Type parameters

    • TFunction: Function

    Parameters

    • type: EventType

      A string representing the event type to listen for.

    • callback: TFunction

      The callback that will be invoked when the event is dispatched. The callback is ignored if it is a duplicate (the callbacks are unique).

    • Optional thisArg: any

      The target (this object) to invoke the callback, can be null

    • Optional once: undefined | false | true

    Returns typeof callback

    • Just returns the incoming callback so you can save the anonymous function easier.

once

  • once<TFunction>(type: EventType, callback: TFunction, thisArg?: any): typeof callback
  • Register an callback of a specific event type on the EventTarget, the callback will remove itself after the first time it is triggered.

    example

    import { log } from 'cc'; eventTarget.once('fire', function () { log("this is the callback and will be invoked only once"); }, node);

    Type parameters

    • TFunction: Function

    Parameters

    • type: EventType

      A string representing the event type to listen for.

    • callback: TFunction

      The callback that will be invoked when the event is dispatched. The callback is ignored if it is a duplicate (the callbacks are unique).

    • Optional thisArg: any

    Returns typeof callback

removeAll

  • removeAll(typeOrTarget: string | object): void
  • Removes all callbacks registered in a certain event type or all callbacks registered with a certain target

    Parameters

    • typeOrTarget: string | object

      The event type or target with which the listeners will be removed

    Returns void

resizeWithBrowserSize

  • resizeWithBrowserSize(enabled: boolean): void
  • Sets whether resize canvas automatically when browser's size changed.
    Useful only on web.

    Parameters

    • enabled: boolean

      Whether enable automatic resize with browser's resize event

    Returns void

setCanvasSize

  • setCanvasSize(width: number, height: number): void

setDesignResolutionSize

  • setDesignResolutionSize(width: number, height: number, resolutionPolicy: ResolutionPolicy | number): void
  • Sets the resolution policy with designed view size in points.
    The resolution policy include:
    [1] ResolutionExactFit Fill screen by stretch-to-fit: if the design resolution ratio of width to height is different from the screen resolution ratio, your game view will be stretched.
    [2] ResolutionNoBorder Full screen without black border: if the design resolution ratio of width to height is different from the screen resolution ratio, two areas of your game view will be cut.
    [3] ResolutionShowAll Full screen with black border: if the design resolution ratio of width to height is different from the screen resolution ratio, two black borders will be shown.
    [4] ResolutionFixedHeight Scale the content's height to screen's height and proportionally scale its width
    [5] ResolutionFixedWidth Scale the content's width to screen's width and proportionally scale its height
    [ResolutionPolicy] [Web only feature] Custom resolution policy, constructed by ResolutionPolicy

    Parameters

    • width: number

      Design resolution width.

    • height: number

      Design resolution height.

    • resolutionPolicy: ResolutionPolicy | number

      The resolution policy desired

    Returns void

setFrameSize

  • setFrameSize(width: number, height: number): void
  • On native, it sets the frame size of view.
    On web, it sets the size of the canvas's outer DOM element.

    Parameters

    • width: number
    • height: number

    Returns void

setOrientation

  • setOrientation(orientation: number): void
  • Sets the orientation of the game, it can be landscape, portrait or auto. When set it to landscape or portrait, and screen w/h ratio doesn't fit, view will automatically rotate the game canvas using CSS. Note that this function doesn't have any effect in native, in native, you need to set the application orientation in native project settings

    Parameters

    • orientation: number

      Possible values: macro.ORIENTATION_LANDSCAPE | macro.ORIENTATION_PORTRAIT | macro.ORIENTATION_AUTO

    Returns void

setRealPixelResolution

  • setRealPixelResolution(width: number, height: number, resolutionPolicy: ResolutionPolicy | number): void
  • Sets the container to desired pixel resolution and fit the game content to it. This function is very useful for adaptation in mobile browsers. In some HD android devices, the resolution is very high, but its browser performance may not be very good. In this case, enabling retina display is very costy and not suggested, and if retina is disabled, the image may be blurry. But this API can be helpful to set a desired pixel resolution which is in between. This API will do the following: 1. Set viewport's width to the desired width in pixel 2. Set body width to the exact pixel resolution 3. The resolution policy will be reset with designed view size in points.

    Parameters

    • width: number

      Design resolution width.

    • height: number

      Design resolution height.

    • resolutionPolicy: ResolutionPolicy | number

      The resolution policy desired

    Returns void

setResizeCallback

  • setResizeCallback(callback: Function | null): void
  • Sets the callback function for view's resize action,
    this callback will be invoked before applying resolution policy,
    so you can do any additional modifications within the callback.
    Useful only on web.

    Parameters

    • callback: Function | null

      The callback function

    Returns void

setResolutionPolicy

targetOff

  • targetOff(typeOrTarget: string | object): void
  • Removes all callbacks previously registered with the same target (passed as parameter). This is not for removing all listeners in the current event target, and this is not for removing all listeners the target parameter have registered. It's only for removing all listeners (callback and target couple) registered on the current event target by the target parameter.

    Parameters

    • typeOrTarget: string | object

      The target to be searched for all related listeners

    Returns void

Generated using TypeDoc