Cocos Creator API

1.0.0

Cocos Creator is a highly customizable game development tool that utilizes the power of cocos2d-x.

View

Module: cc

cc.view is the singleton object which represents the game window.
It's main task include:

  • Apply the design resolution policy
  • Provide interaction with the window, like resize event on web, retina display support, etc...
  • Manage the game view port which can be different with the window
  • Manage the content scale and translation

    Since the cc.view is a singleton, you don't need to call any constructor or create functions,
    the standard way to use it is by calling:
  • cc.view.methodName();

Methods

setTargetDensityDPI
(
  • densityDPI
)

Sets view's target-densitydpi for android mobile browser. it can be set to:

  1. cc.macro.DENSITYDPI_DEVICE, value is "device-dpi"
  2. cc.macro.DENSITYDPI_HIGH, value is "high-dpi" (default value)
  3. cc.macro.DENSITYDPI_MEDIUM, value is "medium-dpi" (browser's default value)
  4. cc.macro.DENSITYDPI_LOW, value is "low-dpi"
  5. Custom value, e.g: "480"

name type description
densityDPI String

getTargetDensityDPI ( ) String

Returns the current target-densitydpi value of cc.view.

returns:

type: String

resizeWithBrowserSize
(
  • enabled
)

Sets whether resize canvas automatically when browser's size changed.
Useful only on web.

name type description
enabled Boolean

Whether enable automatic resize with browser's resize event

setResizeCallback
(
  • callback
)

Sets the callback function for cc.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.

name type description
callback Function | Null

The callback function

adjustViewPort
(
  • enabled
)

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

name type description
enabled Boolean

Enable automatic modification to "viewport" meta

enableRetina
(
  • enabled
)

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

name type description
enabled Boolean

Enable or disable retina display

isRetinaEnabled ( ) Boolean

Check whether retina display is enabled.
Only useful on web

returns:

type: Boolean

enableAutoFullScreen
(
  • enabled
)

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

name type description
enabled Boolean

Enable or disable auto full screen on mobile devices

isAutoFullScreenEnabled ( ) Boolean

Check whether auto full screen is enabled.
Only useful on web

returns:

type: Boolean

Auto full screen enabled or not

isOpenGLReady ( ) Boolean

Get whether render system is ready(no matter opengl or canvas),
this name is for the compatibility with cocos2d-x, subclass must implement this method.

returns:

type: Boolean

setIMEKeyboardState
(
  • isOpen
)

Open or close IME keyboard , subclass must implement this method.

name type description
isOpen Boolean

setContentTranslateLeftTop
(
  • offsetLeft
  • offsetTop
)

Sets the resolution translate on View.

name type description
offsetLeft Number
offsetTop Number

getContentTranslateLeftTop ( ) Size | Object

Returns the resolution translate on View

returns:

type: Size | Object

setCanvasSize
(
  • width
  • height
)

Not support on native.
On web, it sets the size of the canvas.

name type description
width Number
height Number

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:

type: Size

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:

type: Size

setFrameSize
(
  • width
  • height
)

On native, it sets the frame size of view.
On web, it sets the size of the canvas's outer DOM element.

name type description
width Number
height Number

getVisibleSize ( ) Size

Returns the visible area size of the view port.

returns:

type: Size

getVisibleSizeInPixel ( ) Size

Returns the visible area size of the view port.

returns:

type: Size

getVisibleOrigin ( ) Vec2

Returns the visible origin of the view port.

returns:

type: Vec2

getVisibleOriginInPixel ( ) Vec2

Returns the visible origin of the view port.

returns:

type: Vec2

canSetContentScaleFactor ( ) Boolean

Returns whether developer can set content's scale factor.

returns:

type: Boolean

getResolutionPolicy ( ) ResolutionPolicy

Returns the current resolution policy

returns:

setResolutionPolicy
(
  • resolutionPolicy
)

Sets the current resolution policy

name type description
resolutionPolicy ResolutionPolicy | Number

setDesignResolutionSize
(
  • width
  • height
  • resolutionPolicy
)

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
[cc.ResolutionPolicy] [Web only feature] Custom resolution policy, constructed by cc.ResolutionPolicy

name type description
width Number

Design resolution width.

height Number

Design resolution height.

resolutionPolicy ResolutionPolicy | Number

The resolution policy desired

getDesignResolutionSize ( ) Size

Returns the designed size for the view. Default resolution size is the same as 'getFrameSize'.

returns:

type: Size

setRealPixelResolution
(
  • width
  • height
  • resolutionPolicy
)

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.

name type description
width Number

Design resolution width.

height Number

Design resolution height.

resolutionPolicy ResolutionPolicy | Number

The resolution policy desired

setViewPortInPoints
(
  • x
  • y
  • w
  • h
)

Sets view port rectangle with points.

name type description
x Number
y Number
w Number

width

h Number

height

setScissorInPoints
(
  • x
  • y
  • w
  • h
)

Sets Scissor rectangle with points.

name type description
x Number
y Number
w Number
h Number

isScissorEnabled ( ) Boolean

Returns whether GL_SCISSOR_TEST is enable

returns:

type: Boolean

getScissorRect ( ) Rect

Returns the current scissor rectangle

returns:

type: Rect

setViewName
(
  • viewName
)

Sets the name of the view

name type description
viewName String

getViewName ( ) String

Returns the name of the view

returns:

type: String

getViewPortRect ( ) Rect

Returns the view port rectangle.

returns:

type: Rect

getScaleX ( ) Number

Returns scale factor of the horizontal direction (X axis).

returns:

type: Number

getScaleY ( ) Number

Returns scale factor of the vertical direction (Y axis).

returns:

type: Number

getDevicePixelRatio ( ) Number

Returns device pixel ratio for retina display.

returns:

type: Number

convertToLocationInView
(
  • tx
  • ty
  • relatedPos
)
Vec2

Returns the real location in view for a translation based on a related position

name type description
tx Number

The X axis translation

ty Number

The Y axis translation

relatedPos Object

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

returns:

type: Vec2

_getInstance ( ) View private

returns:

type: View

There are no methods that match your current filter settings. You can change your filter settings in the index section on this page. index