ressources and initial character

.gitignore

@@ -40,3 +40,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+*.bat

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^5.1.2",
     "@angular/platform-browser-dynamic": "^5.1.2",
     "@angular/router": "^5.1.2",
+    "babylonjs": "3.1.0",
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"

src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, AfterViewInit } from '@angular/core';
 import { IGameRenderer, GameRenderer } from './shared/engine';
 
-import { IBaseModel, Character } from './shared/engine/models';
+import { IBaseModel, Character } from './shared/engine/object';
 
 @Component({
   selector: 'app-root',
@@ -10,7 +10,7 @@ import { IBaseModel, Character } from './shared/engine/models';
 })
 export class AppComponent implements AfterViewInit {
   private _game: IGameRenderer
-  private _currentCharacter: IBaseModel;
+  private _currentCharacter: Character;
   ngAfterViewInit() {
     this._game = new GameRenderer('renderCanvas');
     this._game.createScene();
@@ -20,6 +20,9 @@ export class AppComponent implements AfterViewInit {
   }
 
   createTestGame() {
-    this._currentCharacter = new Character(this._game, 'currentCharacter', '/assets/Rabbit/', 'Rabbit.babylon');
+    this._currentCharacter = new Character(this._game);
+    this._currentCharacter.buildFromGallery('dude', () => {
+      this._game.getCamera().lockedTarget = this._currentCharacter.getModelHead();
+    });
   }
 }

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

@@ -9,6 +9,7 @@ export interface IGameRenderer {
   getCamera();
 
   getShadowGenerator();
+  getCharacterGallery();
 
   animate();
 

src/app/shared/engine/GameRenderer.ts

@@ -1,40 +1,51 @@
 import {
   Engine, Scene, FollowCamera, Light, DirectionalLight, IShadowLight,
-  Vector3, HemisphericLight, MeshBuilder, ShadowGenerator
+  Vector3, HemisphericLight, MeshBuilder, ShadowGenerator, ArcRotateCamera, StandardMaterial, Color3
 } from 'babylonjs';
 
 
 import { IGameRenderer } from './GameRenderer.interface';
+import { CharacterGalleryManager } from './gallery';
 
 
 export class GameRenderer implements IGameRenderer {
   private _canvas: HTMLCanvasElement;
   private _engine: Engine;
   private _scene: Scene;
-  private _camera: FollowCamera;
+  private _camera: ArcRotateCamera;
   private _light: IShadowLight;
   private _shadowGenerator: ShadowGenerator;
+  private _characterGallery: CharacterGalleryManager;
   constructor(canvasElement: string) {
     this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement);
     this._engine = new Engine(this._canvas, true);
+    this._engine.enableOfflineSupport = false;
+    this._characterGallery = new CharacterGalleryManager(this);
   }
 
   public createScene() {
     this._scene = new Scene(this._engine);
+    this._light = new DirectionalLight('light1', new Vector3(0, -0.5, -1.0), this._scene);
+    this._camera = new ArcRotateCamera('camera1', 0, 0, 10, new Vector3(0, 30, 0), this._scene);
 
-    this._camera = new FollowCamera('camera1', new Vector3(0, 5, -10), this._scene);
+    this._scene.ambientColor = new Color3(0.3, 0.3, 0.3);
+
+    this._light.position = new Vector3(20, 150, 70);
 
     this._camera.attachControl(this._canvas, true);
+    this._camera.setPosition(new BABYLON.Vector3(0, 40, 12));
+    this._camera.minZ = 10.0;
 
-    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);
+    const ground = MeshBuilder.CreateGround('ground1', { width: 6, height: 6, subdivisions: 2 }, this._scene);
+    const groundMaterial = new StandardMaterial('ground', this._scene);
+    groundMaterial.diffuseColor = new Color3(0.5, 0.5, 0.5);
+    groundMaterial.specularColor = new Color3(0, 0, 0);
+    ground.material = groundMaterial;
+    ground.receiveShadows = true;
 
-    sphere.position.y = 1;
+    this._shadowGenerator = new ShadowGenerator(2048, this._light);
 
-    const ground = MeshBuilder.CreateGround('ground1', { width: 6, height: 6, subdivisions: 2 }, this._scene);
   }
 
   public getScene(): Scene {
@@ -46,7 +57,11 @@ export class GameRenderer implements IGameRenderer {
   }
 
   public getShadowGenerator() {
+    return this._shadowGenerator;
+  }
 
+  public getCharacterGallery() {
+    return this._characterGallery;
   }
 
   public animate() {

src/app/shared/engine/gallery/CharacterGalleryManager.ts

@@ -0,0 +1,37 @@
+import { IGameRenderer } from '../';
+import { ICharacterGalleryItem, CharacterGalleryItem } from '../model/';
+
+export class CharacterGalleryManager {
+  private _gameRenderer: IGameRenderer;
+  private _models = {
+    rabbit: new CharacterGalleryItem(
+      'assets/models/Rabbit/',
+      'Rabbit.babylon',
+      'babylon',
+      {
+        stand: [0, 30],
+        run: [31, 54]
+      }
+    ),
+    dude: new CharacterGalleryItem(
+      'assets/models/Dude/',
+      'Dude.babylon',
+      'babylon',
+      {
+        stand: [0, 30],
+        run: [31, 54]
+      }
+    )
+  }
+  constructor(gameRenderer: IGameRenderer) {
+    this._gameRenderer = gameRenderer;
+  }
+
+  getModelByName(name: string): ICharacterGalleryItem {
+    if (this._models[name]) {
+      return this._models[name];
+    } else {
+      throw new Error(`Cannot find model ${name}!`);
+    }
+  }
+}

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

@@ -0,0 +1 @@
+export * from './CharacterGalleryManager';

src/app/shared/engine/model/CharacterGalleryItem.interface.ts

@@ -0,0 +1,6 @@
+export interface ICharacterGalleryItem {
+  modelPath: string;
+  modelFileName: string;
+  modelType: string;
+  animations: any;
+}

src/app/shared/engine/model/CharacterGalleryItem.ts

@@ -0,0 +1,15 @@
+import { ICharacterGalleryItem } from './CharacterGalleryItem.interface';
+
+export class CharacterGalleryItem implements ICharacterGalleryItem {
+  modelPath = '';
+  modelFileName = '';
+  modelType = 'babylon';
+  animations = {};
+
+  constructor(modelPath: string, modelFileName: string, modelType: string = 'babylon', animations = {}) {
+    this.modelPath = modelPath;
+    this.modelFileName = modelFileName;
+    this.modelType = modelType;
+    this.animations = animations;
+  }
+}

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

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

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

@@ -0,0 +1,9 @@
+export interface IBaseModel {
+  moveForward();
+  moveBackward();
+  rotateLeft(angle);
+  rotateRight(angle);
+  buildFromUrl(modelName: string, path: string, modelFileName: string, callback?: Function);
+  buildFromGallery(modelName, callback?: Function);
+  getModel();
+}

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

@@ -2,7 +2,6 @@ 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;
@@ -19,5 +18,15 @@ export class BaseModel implements IBaseModel {
   }
   rotateRight(angle) {
 
+  }
+  buildFromUrl(modelName: string, path: string, modelFileName: string, callback?: Function) {
+
+  }
+  buildFromGallery(modelName, callback?: Function) {
+
+  }
+
+  getModel() {
+
   }
 }

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

@@ -0,0 +1,85 @@
+import { Vector3, SceneLoader, MeshBuilder } from 'babylonjs';
+
+import { IGameRenderer } from '../';
+import { BaseModel } from './BaseModel';
+
+export class Character extends BaseModel {
+
+  protected _model = null;
+  protected _modelhead = null;
+  protected _animations = {};
+  protected _skeletons = [];
+
+  public animationSpeed = 0.8;
+
+  constructor(gameRenderer: IGameRenderer) {
+    super(gameRenderer);
+    this._gameRenderer = gameRenderer;
+    this._modelhead = MeshBuilder.CreateSphere('', { segments: 16, diameter: 0.01 }, this._gameRenderer.getScene());
+
+    this._modelhead.position.y = 6;
+
+
+  }
+
+  getModel() {
+    return this._model;
+  }
+
+  getModelHead() {
+    return this._modelhead;
+  }
+
+  public buildFromUrl(modelName: string, path: string, modelFileName: string, callback?: Function) {
+    const scene = this._gameRenderer.getScene();
+    SceneLoader.ImportMesh(modelName, path, modelFileName, scene,
+      (newMeshes, particleSystems, skeletons) => {
+        this.importMeshSuccess(newMeshes, particleSystems, skeletons);
+        if (callback) {
+          callback();
+        }
+      });
+  }
+
+  public buildFromGallery(modelName, callback?: Function) {
+    const model = this._gameRenderer.getCharacterGallery().getModelByName(modelName);
+    console.log(model);
+    if (model) {
+      this._animations = model.animations;
+      const scene = this._gameRenderer.getScene();
+      SceneLoader.ImportMesh('', model.modelPath, model.modelFileName, scene,
+        (newMeshes, particleSystems, skeletons) => {
+          this.importMeshSuccess(newMeshes, particleSystems, skeletons);
+          if (callback) {
+            callback();
+          }
+        });
+    }
+  }
+  switchToAnimation(animationName) {
+    if (this._animations[animationName]) {
+      this._gameRenderer.getScene().beginAnimation(
+        this._skeletons[0],
+        this._animations[animationName][0],
+        this._animations[animationName][1],
+        true,
+        this.animationSpeed
+      );
+    }
+  }
+
+  private importMeshSuccess(newMeshes, particleSystems, skeletons) {
+    try {
+      if (newMeshes.length > 0) {
+        const scene = this._gameRenderer.getScene();
+        this._skeletons = skeletons;
+        this._model = newMeshes[0];
+        this._model.scaling = new Vector3(0.1, 0.1, 0.1);
+        this._gameRenderer.getShadowGenerator().getShadowMap().renderList.push(this._model);
+        // scene.beginAnimation(skeletons[0], 0, 500, true, 0.8);
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }
+}