Transform

Transform is a default component. Each GameObject creates a Transform component instance by default, which is used to control the size, position, scaling, bevel, rotation and other properties of the game object.

Usage

  1. // The second parameter is the parameter of the Transform component
  2. const gameObject = new GameObject('empty', {
  3.   size: {width: 100, height: 100 }, // size
  4.   position: {x: 0, y: 0 }, // displacement
  5.   origin: {x: 0, y: 0 }, // the origin of the object (a point inside the object)
  6.   anchor: {x: 0, y: 0 }, // anchor point, a point relative to the ratio of the parent's width to height, the origin of the object will be displaced relative to this point
  7.   scale: {x: 1, y: 1 }, // zoom ratio
  8.   skew: {x: 0, y: 0 }, // skew radians
  9.   rotation: 0 // Rotate in radians
  10. })

Because the transform object is very commonly used, we can get the component through gameObject.transform, for example, modify the width and height of the game object

  1. gameObject.transform.size.width = 200
  2. gameObject.transform.size.height = 200

Origin and anchor can help us solve common positioning problems, such as game operation keys, which are a certain percentage of the distance from the lower right corner under various screen sizes. You can take a look at this Demo, the green dots are the anchor points of origin and anchor.

  1. const outter = new GameObject('out', {
  2.   size: {
  3.     width: 750,
  4.     height: 1000
  5.   }
  6. })
  8. const inner = new GameObject('inner', {
  9.   size: {
  10.     width: 100,
  11.     height: 100
  12.   },
  13.   anchor: {
  14.     // Set the anchor point to the position of 0.8 of the width and height of the parent element
  15.     x: 0.8,
  16.     y: 0.8
  17.   },
  18.   origin: {
  19.     // Set the origin to the lower right corner, so that the lower right corner of the object will be aligned with the position of the parent element (0.8, 0.8)
  20.     x: 1,
  21.     y: 1
  22.   }
  23. })