Initial dev

.angular-cli.json

@@ -3,39 +3,37 @@
   "project": {
     "name": "bomberman3d"
   },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "styles.css"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
+  "apps": [{
+    "root": "src",
+    "outDir": "dist",
+    "assets": [
+      "assets",
+      "favicon.ico"
+    ],
+    "index": "index.html",
+    "main": "main.ts",
+    "polyfills": "polyfills.ts",
+    "test": "test.ts",
+    "tsconfig": "tsconfig.app.json",
+    "testTsconfig": "tsconfig.spec.json",
+    "prefix": "app",
+    "styles": [
+      "../node_modules/normalize.css/normalize.css",
+      "styles.css"
+    ],
+    "scripts": [],
+    "environmentSource": "environments/environment.ts",
+    "environments": {
+      "dev": "environments/environment.ts",
+      "prod": "environments/environment.prod.ts"
     }
-  ],
+  }],
   "e2e": {
     "protractor": {
       "config": "./protractor.conf.js"
     }
   },
-  "lint": [
-    {
+  "lint": [{
       "project": "src/tsconfig.app.json"
     },
     {
@@ -53,5 +51,8 @@
   "defaults": {
     "styleExt": "css",
     "component": {}
+  },
+  "warnings": {
+    "typescriptMismatch": false
   }
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.tabSize": 2,
+}

package.json

@@ -12,35 +12,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.0.0",
-    "@angular/http": "^4.0.0",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/router": "^4.0.0",
+    "@angular/common": "^5.1.2",
+    "@angular/compiler": "^5.1.2",
+    "@angular/core": "^5.1.2",
+    "@angular/forms": "^5.1.2",
+    "@angular/http": "^5.1.2",
+    "@angular/platform-browser": "^5.1.2",
+    "@angular/platform-browser-dynamic": "^5.1.2",
+    "@angular/router": "^5.1.2",
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.1",
-    "@angular/compiler-cli": "^4.0.0",
-    "@types/jasmine": "2.5.38",
-    "@types/node": "~6.0.60",
-    "codelyzer": "~2.0.0",
-    "jasmine-core": "~2.5.2",
-    "jasmine-spec-reporter": "~3.2.0",
-    "karma": "~1.4.1",
-    "karma-chrome-launcher": "~2.0.0",
+    "@angular/cli": "1.6.2",
+    "@angular/compiler-cli": "^5.1.2",
+    "@types/jasmine": "2.8.2",
+    "@types/node": "~8.5.2",
+    "codelyzer": "~4.0.2",
+    "jasmine-core": "~2.8.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
     "karma-cli": "~1.0.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
-    "protractor": "~5.1.0",
-    "ts-node": "~2.0.0",
-    "tslint": "~4.5.0",
-    "typescript": "~2.2.0"
+    "karma-coverage-istanbul-reporter": "^1.3.0",
+    "protractor": "~5.2.2",
+    "ts-node": "~4.0.2",
+    "tslint": "~5.8.0",
+    "typescript": "~2.6.2"
   }
 }

src/app/app.component.css

@@ -0,0 +1,17 @@
+html,
+body {
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+#renderCanvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  touch-action: none;
+}

src/app/app.component.html

@@ -1,3 +1 @@
-<h1>
-  {{title}}
-</h1>
+<canvas id="renderCanvas"></canvas>

src/app/app.component.ts

@@ -1,10 +1,25 @@
-import { Component } from '@angular/core';
+import { Component, AfterViewInit } from '@angular/core';
+import { IGameRenderer, GameRenderer } from './shared/engine';
+
+import { IBaseModel, Character } from './shared/engine/models';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'app works!';
+export class AppComponent implements AfterViewInit {
+  private _game: IGameRenderer
+  private _currentCharacter: IBaseModel;
+  ngAfterViewInit() {
+    this._game = new GameRenderer('renderCanvas');
+    this._game.createScene();
+
+    this._game.animate();
+    this.createTestGame();
+  }
+
+  createTestGame() {
+    this._currentCharacter = new Character(this._game, 'currentCharacter', '/assets/Rabbit/', 'Rabbit.babylon');
+  }
 }

src/app/shared/engine/GameRenderer.interface.ts

@@ -0,0 +1,15 @@
+import {
+  Engine, Scene, FollowCamera, Light,
+  Vector3, HemisphericLight, MeshBuilder
+} from 'babylonjs';
+
+export interface IGameRenderer {
+  createScene();
+  getScene(): Scene;
+  getCamera();
+
+  getShadowGenerator();
+
+  animate();
+
+}

src/app/shared/engine/GameRenderer.ts

@@ -0,0 +1,63 @@
+import {
+  Engine, Scene, FollowCamera, Light, DirectionalLight, IShadowLight,
+  Vector3, HemisphericLight, MeshBuilder, ShadowGenerator
+} from 'babylonjs';
+
+
+import { IGameRenderer } from './GameRenderer.interface';
+
+
+export class GameRenderer implements IGameRenderer {
+  private _canvas: HTMLCanvasElement;
+  private _engine: Engine;
+  private _scene: Scene;
+  private _camera: FollowCamera;
+  private _light: IShadowLight;
+  private _shadowGenerator: ShadowGenerator;
+  constructor(canvasElement: string) {
+    this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement);
+    this._engine = new Engine(this._canvas, true);
+  }
+
+  public createScene() {
+    this._scene = new Scene(this._engine);
+
+    this._camera = new FollowCamera('camera1', new Vector3(0, 5, -10), this._scene);
+
+    this._camera.attachControl(this._canvas, true);
+
+    this._light = new DirectionalLight('light1', new Vector3(0, 1, 0), this._scene);
+
+    const sphere = MeshBuilder.CreateSphere('sphere1', { segments: 16, diameter: 2 }, this._scene);
+    this._camera.lockedTarget = sphere;
+    this._shadowGenerator = new BABYLON.ShadowGenerator(1024, this._light);
+
+    sphere.position.y = 1;
+
+    const ground = MeshBuilder.CreateGround('ground1', { width: 6, height: 6, subdivisions: 2 }, this._scene);
+  }
+
+  public getScene(): Scene {
+    return this._scene;
+  }
+
+  public getCamera() {
+    return this._camera;
+  }
+
+  public getShadowGenerator() {
+
+  }
+
+  public animate() {
+    // run the render loop
+    this._engine.runRenderLoop(() => {
+      this._scene.render();
+    });
+
+    // the canvas/window resize event handler
+    window.addEventListener('resize', () => {
+      this._engine.resize();
+    });
+  }
+}

src/app/shared/engine/index.ts

@@ -0,0 +1,2 @@
+export * from './GameRenderer.interface';
+export * from './GameRenderer';

src/app/shared/engine/models/BaseModel.interface.ts

@@ -0,0 +1,6 @@
+export interface IBaseModel {
+  moveForward();
+  moveBackward();
+  rotateLeft(angle);
+  rotateRight(angle);
+}

src/app/shared/engine/models/BaseModel.ts

@@ -0,0 +1,23 @@
+import { IBaseModel } from './BaseModel.interface';
+import { IGameRenderer } from '../';
+
+export class BaseModel implements IBaseModel {
+  private _model = null;
+  protected _gameRenderer = null;
+  constructor(gameRenderer: IGameRenderer) {
+    this._gameRenderer = gameRenderer;
+  }
+
+  moveForward() {
+
+  }
+  moveBackward() {
+
+  }
+  rotateLeft(angle) {
+
+  }
+  rotateRight(angle) {
+
+  }
+}

src/app/shared/engine/models/Character.ts

@@ -0,0 +1,19 @@
+import { IGameRenderer } from '../';
+import { BaseModel } from './BaseModel';
+
+export class Character extends BaseModel {
+  constructor(gameRenderer: IGameRenderer, modelName: string, path: string, modelFileName: string) {
+    super(gameRenderer);
+    this._gameRenderer = gameRenderer;
+    const scene = gameRenderer.getScene();
+    BABYLON.SceneLoader.ImportMesh(modelName, path, modelFileName, scene,
+      function (newMeshes, particleSystems, skeletons) {
+        this._model = newMeshes[1];
+
+        this._model.scaling = new BABYLON.Vector3(0.4, 0.4, 0.4);
+        gameRenderer.getShadowGenerator().getShadowMap().renderList.push(this._model);
+
+        scene.beginAnimation(skeletons[0], 0, 100, true, 0.8);
+      });
+  }
+}

src/app/shared/engine/models/index.ts

@@ -0,0 +1,3 @@
+export * from './BaseModel.interface';
+export * from './BaseModel';
+export * from './Character';