Merge branch 'dev/0.4'

.github/workflows/nodejs.yml

@@ -1,6 +1,6 @@
 name: Node.js CI
 
-on: [push]
+on: [push, pull_request]
 
 jobs:
   build:
@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [12.x, 15.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -18,4 +18,8 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm install
-    - run: npm run ci
+    - run: npm run ci
+    - run: npm install codecov
+    - name: Upload coverage to Codecov
+      run: ./node_modules/.bin/codecov
+    - run: curl -s https://codecov.io/bash

CHANGELOG.md

@@ -49,7 +49,6 @@
 
 
 ### Bug Fixes
-
 * Wrong number of mipmap in `Texture`.([#136](https://github.com/oasis-engine/engine/pull/136))
 * Material blend mode bug. ([#127](https://github.com/oasis-engine/engine/pull/127))
 * Fix none-indices gltf modle load error. ([#107](https://github.com/oasis-engine/engine/pull/107)) (Thanks to @BugDongDong for providing clues)

README.md

@@ -18,33 +18,30 @@ Oasis is a **web-first** and **mobile-first** high-performance real-time develop
 ## Usage
 
 ```typescript
-// Create engine by passing in the HTMLCanvasElement id and get root entity.
+// Create engine by passing in the HTMLCanvasElement id and adjust canvas size.
 const engine = new WebGLEngine("canvas-id");
-const canvas = engine.canvas;
+engine.canvas.resizeByClientSize();
+
+// Create root entity.
 const rootEntity = engine.sceneManager.activeScene.createRootEntity("Root");
-canvas.width = window.innerWidth * SystemInfo.devicePixelRatio;
-canvas.height = window.innerHeight * SystemInfo.devicePixelRatio;
 
 // Create light.
 const lightEntity = rootEntity.createChild("Light");
-const ambient = lightEntity.addComponent(AmbientLight);
 const directLight = lightEntity.addComponent(DirectLight);
-ambient.color = new Color(0.5, 0.5, 0.5);
-directLight.color = new Color(0.3, 0.4, 0.4);
+lightEntity.transform.setRotation(-45, -45, 0);
+directLight.intensity = 0.4;
 
 // Create camera.
 const cameraEntity = rootEntity.createChild("Camera");
-cameraEntity.transform.setPosition(0, 6, 10);
-cameraEntity.transform.lookAt(new Vector3(0, 0, 0));
 cameraEntity.addComponent(Camera);
+cameraEntity.transform.setPosition(0, 0, 12);
 
-// Create cube.
-const cubeEntity = rootEntity.createChild("Cube");
-const cubeRenderer = cubeEntity.addComponent(MeshRenderer);
+// Create sphere.
+const meshEntity = rootEntity.createChild("Sphere");
+const meshRenderer = meshEntity.addComponent(MeshRenderer);
 const material = new BlinnPhongMaterial(engine);
-cubeEntity.transform.rotate(0, 60, 0);
-cubeRenderer.mesh = PrimitiveMesh.createCuboid(engine, 1, 1, 1);
-cubeRenderer.setMaterial(material);
+meshRenderer.setMaterial(material);
+meshRenderer.mesh = PrimitiveMesh.createSphere(engine, 1);
 
 // Run engine.
 engine.run();

package.json

@@ -6,19 +6,18 @@
     "packages/*"
   ],
   "scripts": {
-    "bootstrap": "npm i && lerna bootstrap --hoist",
+    "bootstrap": "npm i && lerna bootstrap",
     "test": "jest",
     "test-cov": "jest --coverage",
-    "ci": "lerna bootstrap && npm run build && npm run b:types && npm run test-cov",
+    "ci": "lerna bootstrap && npm run b:module && npm run b:types && npm run test-cov",
     "lint": "eslint packages/*/src --ext .ts",
     "watch": "cross-env NODE_ENV=development BUILD_TYPE=MODULE rollup -cw -m inline",
     "watch:umd": "cross-env NODE_ENV=development BUILD_TYPE=UMD rollup -cw -m inline",
     "b:types": "lerna run b:types",
-    "build": "cross-env BUILD_TYPE=MODULE rollup -c",
-    "build-all": "cross-env BUILD_TYPE=ALL rollup -c",
+    "b:module": "cross-env BUILD_TYPE=MODULE rollup -c",
     "b:umd": "cross-env BUILD_TYPE=UMD rollup -c",
     "b:miniprogram": "cross-env BUILD_TYPE=MINI rollup -c",
-    "b:all": "npm run b:types && npm run build-all",
+    "b:all": "npm run b:types && cross-env BUILD_TYPE=ALL rollup -c",
     "clean": "lerna exec -- rm -rf dist && lerna clean",
     "changelog": "node tools/gen-changelog.js"
   },
@@ -49,7 +48,7 @@
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-prettier": "^3.1.1",
     "husky": "^4.3.7",
-    "jest": "^26.6.3",
+    "jest": "~24",
     "jest-electron": "^0.1.11",
     "lerna": "^3.22.1",
     "lint-staged": "^10.5.3",

packages/controls/src/OrthoControl.ts

@@ -0,0 +1,127 @@
+import { Camera, Entity, Logger, Script, Vector2, Vector3 } from "oasis-engine";
+
+/**
+ * The camera's 2D controller, can zoom and pan.
+ */
+export class OrthoControl extends Script {
+  cameraEntity: Entity;
+  camera: Camera;
+
+  private _zoomSpeed: number = 1.0;
+  private _zoomScale: number = 1.0;
+  private _zoomScaleUnit: number = 25.0;
+  private _zoomMinSize: number = 0.0;
+  private _zoomMaxSize: number = Infinity;
+  private _isPanStart: boolean = false;
+  private _panStartPos: Vector3 = new Vector3();
+  private _panStart: Vector2 = new Vector2();
+  private _panEnd: Vector2 = new Vector2();
+  private _panDelta: Vector2 = new Vector2();
+
+  /**
+   * The zoom speed.
+   */
+  get zoomSpeed(): number {
+    return this._zoomSpeed;
+  }
+
+  set zoomSpeed(value: number) {
+    this._zoomSpeed = value;
+  }
+
+  constructor(entity: Entity) {
+    super(entity);
+
+    this.cameraEntity = entity;
+    this.camera = entity.getComponent(Camera);
+  }
+
+  onUpdate(dt: number): void {
+    if (this._zoomScale !== 1) {
+      const { camera } = this;
+      const sizeDiff = this._zoomScaleUnit * (this._zoomScale - 1);
+      const size = camera.orthographicSize + sizeDiff;
+      camera.orthographicSize = Math.max(this._zoomMinSize, Math.min(this._zoomMaxSize, size));
+      this._zoomScale = 1;
+    }
+
+    if (this._isPanStart) {
+      const { _panStart: panStart, _panEnd: panEnd } = this;
+      const panDelta = this._panDelta;
+      Vector2.subtract(panEnd, panStart, panDelta);
+      if (panDelta.x === 0 && panDelta.y === 0) {
+        return ;
+      }
+      this._handlePan();
+      panEnd.cloneTo(panStart);
+    }
+  }
+
+  /**
+   * Zoom in.
+   */
+  zoomIn(): void {
+    this._zoomScale *= this._getZoomScale();
+  }
+
+  /**
+   * Zoom out.
+   */
+  zoomOut(): void {
+    this._zoomScale /= this._getZoomScale();
+  }
+
+  /**
+   * Start pan.
+   * @param x - The x-axis coordinate (unit: pixel)
+   * @param y - The y-axis coordinate (unit: pixel)
+   */
+  panStart(x: number, y: number): void {
+    if (!this.enabled) return;
+
+    this.cameraEntity.transform.position.cloneTo(this._panStartPos);
+    this._panStart.setValue(x, y);
+    this._panEnd.setValue(x, y);
+    this._isPanStart = true;
+  }
+
+  /**
+   * Panning.
+   * @param x - The x-axis coordinate (unit: pixel)
+   * @param y - The y-axis coordinate (unit: pixel)
+   *
+   * @remarks Make sure to call panStart before calling panMove.
+   */
+  panMove(x: number, y: number): void {
+    if (!this.enabled) return;
+    if (!this._isPanStart) {
+      Logger.warn("Make sure to call panStart before calling panMove");
+    }
+    this._panEnd.setValue(x, y);
+  }
+
+  /**
+   * End pan.
+   */
+  panEnd(): void {
+    if (!this.enabled) return;
+    this._isPanStart = false;
+  }
+
+  private _getZoomScale(): number {
+    return Math.pow(0.95, this.zoomSpeed);
+  }
+
+  private _handlePan(): void {
+    const { width, height } = this.engine.canvas;
+    const { x, y } = this._panDelta;
+    const { camera } = this;
+    const doubleOrthographicSize = camera.orthographicSize * 4;
+    const width3D = doubleOrthographicSize * camera.aspectRatio;
+    const height3D = doubleOrthographicSize;
+    const pos = this._panStartPos;
+    pos.x -= (x * width3D) / width;
+    pos.y += (y * height3D) / height;
+    this.cameraEntity.transform.position = pos;
+  }
+}

packages/controls/src/index.ts

@@ -1,2 +1,3 @@
 export { FreeControl } from "./FreeControl";
 export { OrbitControl } from "./OrbitControl";
+export { OrthoControl } from "./OrthoControl";

packages/controls/tests/OrthoControl.test.ts

@@ -0,0 +1,39 @@
+import { Camera, Entity, WebGLEngine } from "oasis-engine";
+import { OrthoControl } from "../src/OrthoControl";
+
+const canvasDOM = document.createElement("canvas");
+canvasDOM.width = 1024;
+canvasDOM.height = 1024;
+
+describe(" Ortho Control", () => {
+  let entity: Entity;
+  let camera: Camera;
+  let cameraControl: OrthoControl;
+
+  beforeAll(() => {
+    const engine = new WebGLEngine(canvasDOM);
+    entity = engine.sceneManager.activeScene.createRootEntity();
+    camera = entity.addComponent(Camera);
+    cameraControl = entity.addComponent(OrthoControl);
+  });
+
+  it("test zoom", () => {
+    cameraControl.zoomIn();
+    cameraControl.onUpdate(0);
+    expect(camera.orthographicSize).toEqual(8.749999999999998);
+    cameraControl.zoomOut();
+    cameraControl.onUpdate(0);
+    expect(camera.orthographicSize).toEqual(10.065789473684207);
+  });
+
+  it("test pan", () => {
+    cameraControl.panStart(0, 0);
+    cameraControl.panMove(2, 0);
+    cameraControl.onUpdate(0);
+    cameraControl.panEnd();
+
+    const pos = entity.transform.position;
+    expect(pos.x).toEqual(-0.07863898026315787);
+    expect(pos.y).toEqual(0);
+  });
+});

packages/controls/tsconfig.json

@@ -7,6 +7,7 @@
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
     "declarationDir": "types",
+    "skipLibCheck": true,
     "emitDeclarationOnly": true,
     "sourceMap": true
   },

packages/core/package.json

@@ -5,6 +5,7 @@
   "main": "dist/main.js",
   "module": "dist/module.js",
   "types": "types/index.d.ts",
+  "debug": "src/index.ts",
   "scripts": {
     "b:types": "tsc"
   },

packages/core/src/2d/enums/SpriteMaskInteraction.ts

@@ -0,0 +1,11 @@
+/**
+ * Sprite mask interaction.
+ */
+export enum SpriteMaskInteraction {
+  /** The sprite will not interact with the masking system. */
+  None,
+  /** The sprite will be visible only in areas where a mask is present. */
+  VisibleInsideMask,
+  /** The sprite will be visible only in areas where no mask is present. */
+  VisibleOutsideMask
+}

packages/core/src/2d/enums/SpriteMaskLayer.ts

@@ -0,0 +1,71 @@
+/**
+ * Sprite mask layer.
+ */
+export enum SpriteMaskLayer {
+  /** Mask layer 0. */
+  Layer0 = 0x1,
+  /** Mask layer 1. */
+  Layer1 = 0x2,
+  /** Mask layer 2. */
+  Layer2 = 0x4,
+  /** Mask layer 3. */
+  Layer3 = 0x8,
+  /** Mask layer 4. */
+  Layer4 = 0x10,
+  /** Mask layer 5. */
+  Layer5 = 0x20,
+  /** Mask layer 6. */
+  Layer6 = 0x40,
+  /** Mask layer 7. */
+  Layer7 = 0x80,
+  /** Mask layer 8. */
+  Layer8 = 0x100,
+  /** Mask layer 9. */
+  Layer9 = 0x200,
+  /** Mask layer 10. */
+  Layer10 = 0x400,
+  /** Mask layer 11. */
+  Layer11 = 0x800,
+  /** Mask layer 12. */
+  Layer12 = 0x1000,
+  /** Mask layer 13. */
+  Layer13 = 0x2000,
+  /** Mask layer 14. */
+  Layer14 = 0x4000,
+  /** Mask layer 15. */
+  Layer15 = 0x8000,
+  /** Mask layer 16. */
+  Layer16 = 0x10000,
+  /** Mask layer 17. */
+  Layer17 = 0x20000,
+  /** Mask layer 18. */
+  Layer18 = 0x40000,
+  /** Mask layer 19. */
+  Layer19 = 0x80000,
+  /** Mask layer 20. */
+  Layer20 = 0x100000,
+  /** Mask layer 21. */
+  Layer21 = 0x200000,
+  /** Mask layer 22. */
+  Layer22 = 0x400000,
+  /** Mask layer 23. */
+  Layer23 = 0x800000,
+  /** Mask layer 24. */
+  Layer24 = 0x1000000,
+  /** Mask layer 25. */
+  Layer25 = 0x2000000,
+  /** Mask layer 26. */
+  Layer26 = 0x4000000,
+  /** Mask layer 27. */
+  Layer27 = 0x8000000,
+  /** Mask layer 28. */
+  Layer28 = 0x10000000,
+  /** Mask layer 29. */
+  Layer29 = 0x20000000,
+  /** Mask layer 30. */
+  Layer30 = 0x40000000,
+  /** Mask layer 31. */
+  Layer31 = 0x80000000,
+  /** All mask layers. */
+  Everything = 0xffffffff
+}

packages/core/src/2d/index.ts

@@ -1 +1,3 @@
+export { SpriteMaskInteraction } from "./enums/SpriteMaskInteraction";
+export { SpriteMaskLayer } from "./enums/SpriteMaskLayer";
 export * from "./sprite/index";