├── .gitignore ├── Gruntfile.js ├── La 3D sur le web avec Babylon-vf.pptx ├── README.md ├── demo.jpg ├── dist ├── assets │ ├── music │ │ ├── ambient.wav │ │ └── psy.ogg │ ├── scene │ │ ├── Building texture.png │ │ ├── drakkar.jpg │ │ ├── enclos.jpg │ │ ├── farm_haybale_stump_shovel_wheelbarrow_rake_D.jpg │ │ ├── hutte.jpg │ │ ├── item1.jpg │ │ ├── item1.png │ │ ├── item2.jpg │ │ ├── item_texture.jpg │ │ ├── scene.babylon │ │ ├── shroom_color2.png │ │ ├── sky.jpg │ │ ├── sol_plage.jpg │ │ ├── sol_texture.jpg │ │ ├── sol_watah1_2.jpg │ │ ├── sol_watah2.jpg │ │ ├── sol_watah2_2.jpg │ │ ├── viking.jpg │ │ ├── well.jpg │ │ └── whale.jpg │ ├── textures │ │ ├── background2.jpg │ │ └── smoke.png │ └── viking │ │ ├── viking.babylon │ │ └── viking.jpg ├── css │ └── main.css ├── img │ ├── back.jpg │ └── logo2.png ├── index1.html ├── index2.html └── js │ ├── .baseDir.js │ ├── Controller.js │ ├── Game.js │ ├── Preloader.js │ ├── Timer.js │ ├── index1.js │ └── libs │ ├── babylon.js │ └── babylon.max.js ├── package.json ├── resources ├── 240794_1159592009_large.jpg ├── Julian │ └── JB │ │ └── drakkar.jpg ├── LIBRARIES │ ├── bursion │ │ └── resources │ │ │ └── sol_watah2.jpg │ └── ms-experiences16 │ │ └── resources │ │ ├── LIBRARIES │ │ ├── Dungeon │ │ │ └── assets │ │ │ │ └── shroom_color2.png │ │ └── bursion │ │ │ └── resources │ │ │ ├── enclos.jpg │ │ │ ├── item_texture.jpg │ │ │ ├── sol_plage.jpg │ │ │ ├── sol_texture.jpg │ │ │ ├── sol_watah1_2.jpg │ │ │ ├── sol_watah2.jpg │ │ │ └── whale.jpg │ │ ├── Users │ │ └── Julian │ │ │ └── Desktop │ │ │ ├── 25065_Eat_Sheep_Collection__Farm │ │ │ └── farm_haybale_stump_shovel_wheelbarrow_rake_D.jpg │ │ │ └── 73631_Low-poly_One_Texture_Village │ │ │ └── Building texture.png │ │ └── hutte.jpg ├── Program Files │ └── Autodesk │ │ └── 3ds Max Design 2015 │ │ └── Maps │ │ └── glare │ │ └── glare_streaks_star_camera_filter.tif ├── hutte.fbx ├── hutte.jpg ├── scene.max ├── scene_new.zip └── well.jpg ├── sass ├── _defines.scss ├── _loader.scss └── main.scss └── ts ├── .baseDir.ts ├── Controller.ts ├── Game.ts ├── Preloader.ts ├── Timer.ts ├── index1.ts ├── tsconfig.json └── typings └── babylon.d.ts /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | .tmp 4 | *.map 5 | .tscache 6 | .history -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | 3 | require('time-grunt')(grunt); 4 | 5 | // load all grunt tasks 6 | require('jit-grunt')(grunt); 7 | 8 | grunt.initConfig({ 9 | 10 | // Clean dist folder (all except lib folder) 11 | clean: { 12 | js: ["dist/css","dist/js/.baseDir*","dist/js/*", "!dist/js/libs/**"], 13 | dist: ["dist/js/*", "!dist/js/index.js", "!dist/js/libs/**"] 14 | }, 15 | 16 | // Compilation from TypeScript to ES5² 17 | ts: { 18 | dev: { 19 | src : ['ts/**/*.ts', 'ts/typings/**/*'], 20 | outDir: "dist/js", 21 | options:{ 22 | module: 'amd', 23 | target: 'es5', 24 | declaration: false, 25 | sourceMap:true, 26 | removeComments:false 27 | } 28 | }, 29 | dist: { 30 | src : ['ts/**/*.ts'], 31 | outDir: "dist/js", 32 | options:{ 33 | module: 'amd', 34 | target: 'es5', 35 | declaration: false, 36 | sourceMap:false, 37 | removeComments:true 38 | } 39 | } 40 | }, 41 | // Watches content related changes 42 | watch : { 43 | js : { 44 | files: ['ts/**/*.ts'], 45 | tasks: ['ts:dev'] 46 | }, 47 | sass : { 48 | files: ['sass/**/*.scss'], 49 | tasks: ['sass','postcss:debug'] 50 | }, 51 | html : { 52 | files: ['html/**/*.html'], 53 | tasks: ['bake'] 54 | } 55 | }, 56 | // Build dist version 57 | uglify : { 58 | dist: { 59 | options: { 60 | compress:true, 61 | beautify: false 62 | }, 63 | files: { 64 | 'dist/js/index.js': ['dist/js/**/*.js', '!dist/js/libs/**/*.js'] 65 | } 66 | } 67 | }, 68 | // Sass compilation. Produce an extended css file in css folder 69 | sass : { 70 | options: { 71 | sourcemap:'none', 72 | style: 'expanded' 73 | }, 74 | dist : { 75 | files: { 76 | 'dist/css/main.css': 'sass/main.scss' 77 | } 78 | } 79 | }, 80 | // Auto prefixer css 81 | postcss : { 82 | debug : { 83 | options: { 84 | processors: [ 85 | require('autoprefixer')({browsers: 'last 2 versions'}) 86 | ] 87 | }, 88 | src: 'dist/css/main.css' 89 | }, 90 | dist: { 91 | options: { 92 | processors: [ 93 | require('autoprefixer')({browsers: 'last 2 versions'}), 94 | require('cssnano')() 95 | ] 96 | }, 97 | src: 'dist/css/main.css' 98 | } 99 | }, 100 | //Server creation 101 | connect: { 102 | server: { 103 | options: { 104 | port: 3000, 105 | base: '.' 106 | } 107 | }, 108 | test: { 109 | options: { 110 | port: 3000, 111 | base: '.', 112 | keepalive:true 113 | } 114 | } 115 | }, 116 | // Open default browser 117 | open: { 118 | local: { 119 | path: 'http://localhost:3000/dist' 120 | } 121 | } 122 | }); 123 | 124 | grunt.registerTask('default', 'Compile and watch source files', [ 125 | 'dev', 126 | 'connect:server', 127 | 'open', 128 | 'watch' 129 | ]); 130 | 131 | grunt.registerTask('dev', 'build dev version', [ 132 | 'clean:js', 133 | 'ts:dev', 134 | 'sass', 135 | 'postcss:debug' 136 | ]); 137 | 138 | grunt.registerTask('dist', 'build dist version', [ 139 | 'clean:js', 140 | 'ts:dist', 141 | 'sass', 142 | 'postcss:dist', 143 | 'uglify', // compile js files in index.js 144 | 'clean:dist' // remove js file 145 | ]); 146 | 147 | }; 148 | 149 | 150 | -------------------------------------------------------------------------------- /La 3D sur le web avec Babylon-vf.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/La 3D sur le web avec Babylon-vf.pptx -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #La 3D sur le web avec Babylon.js 2 | 3 | ![](https://raw.githubusercontent.com/Temechon/ms-experiences16/master/demo.jpg) -------------------------------------------------------------------------------- /demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/demo.jpg -------------------------------------------------------------------------------- /dist/assets/music/ambient.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/music/ambient.wav -------------------------------------------------------------------------------- /dist/assets/music/psy.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/music/psy.ogg -------------------------------------------------------------------------------- /dist/assets/scene/Building texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/Building texture.png -------------------------------------------------------------------------------- /dist/assets/scene/drakkar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/drakkar.jpg -------------------------------------------------------------------------------- /dist/assets/scene/enclos.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/enclos.jpg -------------------------------------------------------------------------------- /dist/assets/scene/farm_haybale_stump_shovel_wheelbarrow_rake_D.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/farm_haybale_stump_shovel_wheelbarrow_rake_D.jpg -------------------------------------------------------------------------------- /dist/assets/scene/hutte.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/hutte.jpg -------------------------------------------------------------------------------- /dist/assets/scene/item1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/item1.jpg -------------------------------------------------------------------------------- /dist/assets/scene/item1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/item1.png -------------------------------------------------------------------------------- /dist/assets/scene/item2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/item2.jpg -------------------------------------------------------------------------------- /dist/assets/scene/item_texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/item_texture.jpg -------------------------------------------------------------------------------- /dist/assets/scene/shroom_color2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/shroom_color2.png -------------------------------------------------------------------------------- /dist/assets/scene/sky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/sky.jpg -------------------------------------------------------------------------------- /dist/assets/scene/sol_plage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/sol_plage.jpg -------------------------------------------------------------------------------- /dist/assets/scene/sol_texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/sol_texture.jpg -------------------------------------------------------------------------------- /dist/assets/scene/sol_watah1_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/sol_watah1_2.jpg -------------------------------------------------------------------------------- /dist/assets/scene/sol_watah2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/sol_watah2.jpg -------------------------------------------------------------------------------- /dist/assets/scene/sol_watah2_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/sol_watah2_2.jpg -------------------------------------------------------------------------------- /dist/assets/scene/viking.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/viking.jpg -------------------------------------------------------------------------------- /dist/assets/scene/well.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/well.jpg -------------------------------------------------------------------------------- /dist/assets/scene/whale.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/scene/whale.jpg -------------------------------------------------------------------------------- /dist/assets/textures/background2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/textures/background2.jpg -------------------------------------------------------------------------------- /dist/assets/textures/smoke.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/textures/smoke.png -------------------------------------------------------------------------------- /dist/assets/viking/viking.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/assets/viking/viking.jpg -------------------------------------------------------------------------------- /dist/css/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | width: 100%; 3 | height: 100%; 4 | margin: 0; 5 | padding: 0; 6 | overflow: hidden; 7 | font-family: sans-serif; } 8 | 9 | #game-canvas { 10 | width: 100%; 11 | height: 100%; } 12 | 13 | .splashscreen { 14 | margin: 0; 15 | padding: 0; 16 | width: 100%; 17 | height: 100%; 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | z-index: 3; 22 | display: -ms-flexbox; 23 | display: flex; 24 | -ms-flex-direction: column; 25 | flex-direction: column; 26 | -ms-flex-pack: center; 27 | justify-content: center; 28 | -ms-flex-align: center; 29 | align-items: center; 30 | background-image: url("../img/back.jpg"); 31 | pointer-events: none; 32 | -webkit-user-select: none; 33 | -moz-user-select: none; 34 | -ms-user-select: none; 35 | user-select: none; } 36 | .splashscreen .baseline { 37 | margin-top: 50px; 38 | font-family: 'Segoe UI', sans-serif; 39 | font-size: 1.5em; 40 | color: white; } 41 | .splashscreen img { 42 | max-height: 150px; 43 | height: 100%; } 44 | 45 | .hide { 46 | opacity: 0; 47 | transition: opacity 0.5s linear; } 48 | 49 | #preloader_3 { 50 | position: relative; 51 | margin: 50px 0 0 -50px; } 52 | 53 | #preloader_3:before { 54 | width: 20px; 55 | height: 20px; 56 | border-radius: 20px; 57 | content: ''; 58 | position: absolute; 59 | background: white; 60 | animation: preloader_3_before 1.5s infinite ease-in-out; } 61 | 62 | #preloader_3:after { 63 | width: 20px; 64 | height: 20px; 65 | border-radius: 20px; 66 | content: ''; 67 | position: absolute; 68 | background: white; 69 | left: 22px; 70 | animation: preloader_3_after 1.5s infinite ease-in-out; } 71 | 72 | @keyframes preloader_3_before { 73 | 0% { 74 | transform: translateX(0px) rotate(0deg); } 75 | 50% { 76 | transform: translateX(90px) scale(1.4) rotate(260deg); 77 | background: white; 78 | border-radius: 0px; } 79 | 100% { 80 | transform: translateX(0px) rotate(0deg); } } 81 | 82 | @keyframes preloader_3_after { 83 | 0% { 84 | transform: translateX(0px); } 85 | 50% { 86 | transform: translateX(-90px) scale(1.4) rotate(-260deg); 87 | background: white; 88 | border-radius: 0px; } 89 | 100% { 90 | transform: translateX(0px); } } 91 | -------------------------------------------------------------------------------- /dist/img/back.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/img/back.jpg -------------------------------------------------------------------------------- /dist/img/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/dist/img/logo2.png -------------------------------------------------------------------------------- /dist/index1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Starter 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /dist/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Starter 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 |
26 |
27 | 28 | 29 | 30 | 31 | 32 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /dist/js/.baseDir.js: -------------------------------------------------------------------------------- 1 | // Ignore this file. See https://github.com/grunt-ts/grunt-ts/issues/77 2 | //# sourceMappingURL=.baseDir.js.map -------------------------------------------------------------------------------- /dist/js/Controller.js: -------------------------------------------------------------------------------- 1 | var Controller = (function () { 2 | function Controller(minion) { 3 | var _this = this; 4 | // The character skeleton (if any). Can be null 5 | this.skeleton = null; 6 | // The array of animations (if the model has no skeleton) 7 | this._animations = {}; 8 | // The direction this character is heading to 9 | this._direction = new BABYLON.Vector3(0, 0, 0); 10 | // The destination this character is heading to 11 | this._destination = null; 12 | // The last distance computed between the minion position and its destination 13 | this._lastDistance = Number.POSITIVE_INFINITY; 14 | // A set of destination. The character will navigate through all these positions. 15 | this.destinations = []; 16 | // The character speed 17 | this.speed = 1; 18 | // All animations speeds will be multiplied by this factor 19 | this.animationSpeedMultiplier = 1; 20 | // True if the character is moving, false otherwise 21 | this.isMoving = false; 22 | this._minion = minion; 23 | this.findSkeleton(); 24 | // Add move function to the character 25 | this._minion.getScene().registerBeforeRender(function () { 26 | _this._move(); 27 | }); 28 | } 29 | /** 30 | * Add a destination to this character. 31 | * data is a parameter that can be link to a destination. It will be called 32 | * when the minion arrives at this destination. 33 | */ 34 | Controller.prototype.addDestination = function (value, data) { 35 | // Add this destination to the set of destination 36 | this.destinations.push({ position: value, data: data }); 37 | // Return this to chain destination if needed 38 | return this; 39 | }; 40 | /** 41 | * Move to the next character destination 42 | */ 43 | Controller.prototype._moveToNextDestination = function () { 44 | // Get the next destination 45 | this._destination = this.destinations.shift(); 46 | // reset distance check 47 | this._lastDistance = Number.POSITIVE_INFINITY; 48 | this.isMoving = true; 49 | // Compute direction 50 | this._direction = this._destination.position.subtract(this._minion.position); 51 | this._direction.normalize(); 52 | // Rotate 53 | this.lookAt(this._destination.position); 54 | }; 55 | /** 56 | * The character looks at the given position, but rotates only along Y-axis 57 | * */ 58 | Controller.prototype.lookAt = function (value) { 59 | var dv = value.subtract(this._minion.position); 60 | var yaw = -Math.atan2(dv.z, dv.x) - Math.PI / 2; 61 | this._minion.rotation.y = yaw; 62 | }; 63 | /** 64 | * Attach the given mesh to this controller, and found the character skeleton. 65 | * The skeleton used for the mesh animation (and the debug viewer) is the first found one. 66 | */ 67 | Controller.prototype.findSkeleton = function () { 68 | // Stop mesh animations 69 | this._minion.getScene().stopAnimation(this._minion); 70 | // Find skeleton if possible 71 | if (this._minion.skeleton) { 72 | this.skeleton = this._minion.skeleton; 73 | // Stop skeleton animations 74 | this._minion.getScene().stopAnimation(this.skeleton); 75 | // Activate animation blending 76 | this.skeleton.enableBlending(0.08); 77 | } 78 | }; 79 | /** 80 | * Run the animation between the character position and its first destination 81 | */ 82 | Controller.prototype.start = function () { 83 | // If at least one destination 84 | if (this.destinations.length >= 1) { 85 | // Animate the character 86 | this.playAnimation('walk', true, 1); 87 | // Move to the next destination 88 | this._moveToNextDestination(); 89 | } 90 | }; 91 | /** 92 | * Removes all destination of the minion 93 | */ 94 | Controller.prototype.stop = function () { 95 | this.destinations = []; 96 | this.pause(); 97 | }; 98 | /** 99 | * Pause the character movement 100 | */ 101 | Controller.prototype.pause = function () { 102 | this.isMoving = false; 103 | // Animate the character in idle animation 104 | this.playAnimation('idle', true, 1); 105 | }; 106 | /** 107 | * Resume the character movement 108 | */ 109 | Controller.prototype.resume = function () { 110 | this.isMoving = true; 111 | // Animate the character 112 | this.playAnimation('walk', true, 1); 113 | }; 114 | /** 115 | * Move the character to its destination. 116 | * The character y position is set according to the ground position (or 0 if no ground). 117 | * The attribute _canMove is reset to false when the destination is reached. 118 | */ 119 | Controller.prototype._move = function () { 120 | // If a destination has been set and the character has not been stopped 121 | if (this.isMoving && this._destination) { 122 | // Compute distance to destination 123 | var distance = BABYLON.Vector3.Distance(this._minion.position, this._destination.position); 124 | // Change destination if th distance is increasing (should not) 125 | if (distance < Controller.Epsilon || distance > this._lastDistance) { 126 | // Set the minion position to the curent destination 127 | this._minion.position.copyFrom(this._destination.position); 128 | if (this.atEachDestination) { 129 | this.atEachDestination(this._destination.data); 130 | } 131 | // Destination has been reached 132 | this.isMoving = false; 133 | if (this.destinations.length == 0) { 134 | // Animate the character in idle animation 135 | this.playAnimation('idle', true, 1); 136 | // Call function when final destination is reached 137 | if (this.atFinalDestination) { 138 | this.atFinalDestination(this._destination.data); 139 | } 140 | } 141 | else { 142 | this._moveToNextDestination(); 143 | } 144 | } 145 | else { 146 | this._lastDistance = distance; 147 | // Add direction to the position 148 | var delta = this._direction.scale(this._minion.getScene().getAnimationRatio() * this.speed); 149 | this._minion.position.addInPlace(delta); 150 | } 151 | } 152 | }; 153 | /** 154 | * Add an animation to this character 155 | */ 156 | Controller.prototype.addAnimation = function (name, from, to) { 157 | if (this.skeleton) { 158 | this.skeleton.createAnimationRange(name, from, to); 159 | } 160 | else { 161 | this._animations[name] = { from: from, to: to }; 162 | } 163 | }; 164 | /** 165 | * Play the given animation if skeleton found 166 | */ 167 | Controller.prototype.playAnimation = function (name, loop, speed) { 168 | if (speed === void 0) { speed = 1; } 169 | if (this.skeleton) { 170 | this.skeleton.beginAnimation(name, loop, speed * this.animationSpeedMultiplier); 171 | } 172 | else { 173 | var animation = this._animations[name]; 174 | this._minion.getScene().beginAnimation(this._minion, animation.from, animation.to, loop, speed * this.animationSpeedMultiplier); 175 | } 176 | }; 177 | Controller.Epsilon = 0.1; 178 | return Controller; 179 | }()); 180 | //# sourceMappingURL=Controller.js.map -------------------------------------------------------------------------------- /dist/js/Game.js: -------------------------------------------------------------------------------- 1 | var Game = (function () { 2 | function Game(canvasId) { 3 | var _this = this; 4 | var canvas = document.getElementById(canvasId); 5 | this.engine = new BABYLON.Engine(canvas, true); 6 | this.engine.enableOfflineSupport = false; 7 | this.assets = []; 8 | this.scene = null; 9 | window.addEventListener("resize", function () { 10 | _this.engine.resize(); 11 | }); 12 | this.initScene(); 13 | } 14 | Game.prototype.createAsset = function (name, mode) { 15 | if (mode === void 0) { mode = Game.SELF; } 16 | var res = []; 17 | for (var _i = 0, _a = this.assets[name]; _i < _a.length; _i++) { 18 | var mesh = _a[_i]; 19 | switch (mode) { 20 | case Game.SELF: 21 | mesh.setEnabled(true); 22 | res.push(mesh); 23 | break; 24 | case Game.CLONE: 25 | res.push(mesh.clone()); 26 | break; 27 | case Game.INSTANCE: 28 | res.push(mesh.createInstance()); 29 | break; 30 | } 31 | } 32 | return res; 33 | }; 34 | Game.prototype.initScene = function () { 35 | this.scene = new BABYLON.Scene(this.engine); 36 | var camera = new BABYLON.ArcRotateCamera('', 1.11, 1.18, 800, new BABYLON.Vector3(0, 0, 0), this.scene); 37 | camera.attachControl(this.engine.getRenderingCanvas()); 38 | camera.wheelPrecision *= 10; 39 | var light = new BABYLON.HemisphericLight('hemisphericLight', new BABYLON.Vector3(0, 1, 0), this.scene); 40 | light.intensity *= 1.5; 41 | // let globalLight = new BABYLON.HemisphericLight('globalHemisphericLight', new BABYLON.Vector3(-1, -1, 0), this.scene); 42 | // background 43 | new BABYLON.Layer('background', 'assets/textures/background2.jpg', this.scene, true); 44 | // Load assets 45 | var loader = new Preloader(this); 46 | loader.callback = this.run.bind(this); 47 | loader.loadAssets(); 48 | }; 49 | Game.prototype.run = function () { 50 | var _this = this; 51 | this.scene.executeWhenReady(function () { 52 | // Remove loader 53 | var loader = document.querySelector("#splashscreen"); 54 | loader.style.display = "none"; 55 | _this._init(); 56 | _this.engine.runRenderLoop(function () { 57 | _this.scene.render(); 58 | }); 59 | _this._runGame(); 60 | }); 61 | }; 62 | Game.prototype._init = function () { 63 | // this.scene.debugLayer.show(); 64 | var music = new BABYLON.Sound("ambient", "assets/music/ambient.wav", this.scene, null, { loop: true, autoplay: true }); 65 | this.createAsset('scene'); 66 | var viking = this.createAsset('viking')[0]; 67 | viking.position.y += 0.35; 68 | // add controller 69 | this._controller = new Controller(viking); 70 | this._controller.speed = 0.1; 71 | 9; 72 | this._controller.animationSpeedMultiplier = 2.9; 73 | this._controller.addAnimation('idle', 0, 320); 74 | this._controller.addAnimation('walk', 323, 364); 75 | this._controller.addAnimation('dance', 367, 738); 76 | this._controller.playAnimation('idle', true); 77 | this._initSmoke(); 78 | // Animate the camera at start 79 | var easing = new BABYLON.QuinticEase(); 80 | easing.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEOUT); 81 | var time = 60 * 3; 82 | BABYLON.Animation.CreateAndStartAnimation('camera.alpha', this.scene.activeCamera, 'alpha', 60, time, 1.11 * 2, -1, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT, easing); 83 | BABYLON.Animation.CreateAndStartAnimation('camera.beta', this.scene.activeCamera, 'beta', 60, time, 1.18 * 2, 1.20, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT, easing); 84 | BABYLON.Animation.CreateAndStartAnimation('camera.radius', this.scene.activeCamera, 'radius', 60, time, 800, 50, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT, easing); 85 | new BABYLON.Sound("psy", "assets/music/psy.ogg", this.scene, null, { loop: false, autoplay: false }); 86 | }; 87 | Game.prototype._runGame = function () { 88 | var _this = this; 89 | this.scene.onPointerDown = function (evt, pr) { 90 | if (pr.hit) { 91 | var destination = pr.pickedPoint.clone(); 92 | destination.y = 0; 93 | _this._controller.addDestination(destination); 94 | _this._controller.start(); 95 | } 96 | }; 97 | window.addEventListener('keydown', function (evt) { 98 | if (evt.keyCode == 32) { 99 | _this.scene.getSoundByName('psy').play(); 100 | _this._controller.playAnimation('dance', true); 101 | } 102 | }); 103 | }; 104 | Game.prototype._initSmoke = function () { 105 | // Init smoke 106 | var particleSystem = new BABYLON.ParticleSystem("psys", 2000, this.scene); 107 | //Texture of each particle 108 | particleSystem.particleTexture = new BABYLON.Texture("assets/textures/smoke.png", this.scene); 109 | // Where the particles come from 110 | particleSystem.emitter = this.scene.getMeshByName('smoke'); 111 | particleSystem.minEmitBox = new BABYLON.Vector3(1, 0.5, 1); 112 | particleSystem.maxEmitBox = new BABYLON.Vector3(-1, 0.5, -1); 113 | // Colors of all particles 114 | particleSystem.color1 = new BABYLON.Color4(0.8823529411764706, 0.8823529411764706, 0.8823529411764706, 0.5); 115 | particleSystem.color2 = new BABYLON.Color4(1, 0.9882352941176471, 0.9607843137254902, 0.6); 116 | particleSystem.colorDead = new BABYLON.Color4(0.9137254901960784, 0.9137254901960784, 0.9137254901960784, 0.1); 117 | // Mask applied on all particles 118 | particleSystem.textureMask = new BABYLON.Color4(1, 1, 1, 0.99); 119 | // Size of each particle (random between... 120 | particleSystem.minSize = 2; 121 | particleSystem.maxSize = 4; 122 | // Life time of each particle (random between... 123 | particleSystem.minLifeTime = 0.2; 124 | particleSystem.maxLifeTime = 0.3; 125 | // Emission rate 126 | particleSystem.emitRate = 100; 127 | // Blend mode : BLENDMODE_ONEONE (without alpha), or BLENDMODE_STANDARD (with alpha) 128 | particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_STANDARD; 129 | // Set the gravity of all particles 130 | particleSystem.gravity = new BABYLON.Vector3(40, -40, 0.5); 131 | // Direction of each particle after it has been emitted 132 | particleSystem.direction1 = new BABYLON.Vector3(0, 1, 0); 133 | particleSystem.direction2 = new BABYLON.Vector3(0, 10, 0); 134 | // Angular speed, in radians 135 | particleSystem.minAngularSpeed = -10; 136 | particleSystem.maxAngularSpeed = 10; 137 | // Speed 138 | particleSystem.minEmitPower = 5; 139 | particleSystem.maxEmitPower = 5; 140 | particleSystem.updateSpeed = 0.001; 141 | // Start the particle system 142 | particleSystem.start(); 143 | }; 144 | Game.SELF = 0; 145 | Game.CLONE = 1; 146 | Game.INSTANCE = 2; 147 | return Game; 148 | }()); 149 | //# sourceMappingURL=Game.js.map -------------------------------------------------------------------------------- /dist/js/Preloader.js: -------------------------------------------------------------------------------- 1 | var Preloader = (function () { 2 | function Preloader(game) { 3 | this._loader = null; 4 | this._game = game; 5 | this._scene = this._game.scene; 6 | this._loader = new BABYLON.AssetsManager(this._scene); 7 | this._loader.useDefaultLoadingScreen = false; 8 | this._loader.onFinish = this._onFinish.bind(this); 9 | } 10 | Preloader.prototype.loadAssets = function () { 11 | this._addMesh('scene'); 12 | this._addMesh('viking'); 13 | this._loader.load(); 14 | }; 15 | Preloader.prototype._onFinish = function () { 16 | this.callback(); 17 | }; 18 | Preloader.prototype._addMesh = function (folder, name) { 19 | if (name) { 20 | var task = this._loader.addMeshTask(name, '', "assets/" + folder + "/", name + ".babylon"); 21 | } 22 | else { 23 | var task = this._loader.addMeshTask(folder, '', "assets/" + folder + "/", folder + ".babylon"); 24 | } 25 | task.onSuccess = this._addMeshAssetToGame.bind(this); 26 | }; 27 | Preloader.prototype._addMeshAssetToGame = function (t) { 28 | this._game.assets[t.name] = []; 29 | console.group(); 30 | for (var _i = 0, _a = t.loadedMeshes; _i < _a.length; _i++) { 31 | var m = _a[_i]; 32 | m.setEnabled(false); 33 | m.isPickable = true; 34 | this._game.assets[t.name].push(m); 35 | console.log("%c Loaded : " + m.name, 'background: #333; color: #bada55'); 36 | } 37 | console.log("%c Finished : " + t.name, 'background: #333; color: #bada55'); 38 | console.groupEnd(); 39 | }; 40 | return Preloader; 41 | }()); 42 | //# sourceMappingURL=Preloader.js.map -------------------------------------------------------------------------------- /dist/js/Timer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Builds a new timer. A timer can delay an action, and repeat this action X times 3 | * @param time The time in milliseconds 4 | * @param scene The scene 5 | * @param callback The callback function called when the timer is finished 6 | * @param options.autostart If set to true, the timer will autostart. False by default. 7 | *@param options.autodestroy If set to true, the timer will autodestroy at the end of all callback functions. False by default 8 | *@param options.repeat If set, the callback action will be repeated the specified number of times. 1 by default. Set to -1 if repeat infinitely 9 | *@param options.immediate If set, the callback action will be called before waiting 'time' ms. false by default. 10 | */ 11 | var Timer = (function () { 12 | function Timer(time, scene, options) { 13 | if (options === void 0) { options = {}; } 14 | this.scene = scene; 15 | this.maxTime = this.currentTime = time; 16 | // True if the timer is finished, false otherwise 17 | this.isOver = false; 18 | // True if the timer is paused, false otherwise 19 | this.paused = false; 20 | // True if the timer has been started, false otherwise 21 | this.started = false; 22 | // Function to be repeated when the timer is finished 23 | this.callback = null; 24 | // Function to be called when the timer is finished (no more repeat counts) 25 | this.onFinish = null; 26 | //If set, the callback action will be repeated the specified number of times 27 | this.repeat = options.repeat || 1; 28 | this.repeatInit = this.repeat; 29 | // Should the timer start directly after its creation ? 30 | this.autostart = options.autostart || false; 31 | // Should the timer destroy itself after completion ? 32 | this.autodestroy = options.autodestroy || false; 33 | // Should the timer call 'callback function' immediately after starting ? 34 | this.immediate = options.immediate || false; 35 | this.registeredFunction = this._checkIfUpdate.bind(this); 36 | scene.registerBeforeRender(this.registeredFunction); 37 | // Start the timer is set to autostart 38 | if (this.autostart) { 39 | this.start(); 40 | } 41 | } 42 | /** 43 | * Check if this timer can be updated 44 | */ 45 | Timer.prototype._checkIfUpdate = function () { 46 | if (this.started && !this.isOver && !this.paused) { 47 | this._update(); 48 | } 49 | }; 50 | /** 51 | * Reset the timer. Do not reset its options! 52 | */ 53 | Timer.prototype.reset = function () { 54 | this.currentTime = this.maxTime; 55 | this.isOver = false; 56 | this.started = false; 57 | this.paused = false; 58 | }; 59 | /** 60 | * Reset the timer and its repeat number 61 | */ 62 | Timer.prototype.hardReset = function () { 63 | this.reset(); 64 | this.repeat = this.repeatInit; 65 | }; 66 | /** 67 | * Start the timer 68 | */ 69 | Timer.prototype.start = function () { 70 | this.started = true; 71 | }; 72 | /** 73 | * Pause the timer 74 | */ 75 | Timer.prototype.pause = function () { 76 | this.paused = true; 77 | }; 78 | /** 79 | * Stop the timer, and reset it. 80 | * @param destroy If set to true, the timer is deleted. 81 | */ 82 | Timer.prototype.stop = function (destroy) { 83 | this.started = false; 84 | this.reset(); 85 | if (this.autodestroy || destroy) { 86 | this.destroy(); 87 | } 88 | }; 89 | /** 90 | * Destory the timer 91 | * @private 92 | */ 93 | Timer.prototype.destroy = function () { 94 | // Unregister update function 95 | this.scene.unregisterBeforeRender(this.registeredFunction); 96 | }; 97 | /** 98 | * Unpause the timer 99 | */ 100 | Timer.prototype.resume = function () { 101 | this.paused = false; 102 | }; 103 | /** 104 | * The update function 105 | * @private 106 | */ 107 | Timer.prototype._update = function () { 108 | this.currentTime -= this.scene.getEngine().getDeltaTime(); 109 | if (this.currentTime <= 0 || this.immediate) { 110 | // reset immediate 111 | this.immediate = false; 112 | // The delay is finished, run the callback 113 | this.isOver = true; 114 | if (this.repeat != -1) { 115 | this.repeat--; 116 | } 117 | if (this.callback) { 118 | this.callback(); 119 | } 120 | if (this.repeat > 0 || this.repeat == -1) { 121 | this.reset(); 122 | this.start(); 123 | } 124 | else { 125 | // Call the onFinish action 126 | if (this.onFinish) { 127 | this.onFinish(); 128 | } 129 | // Autodestroy 130 | if (this.autodestroy) { 131 | this.destroy(); 132 | } 133 | } 134 | } 135 | }; 136 | return Timer; 137 | }()); 138 | //# sourceMappingURL=Timer.js.map -------------------------------------------------------------------------------- /dist/js/index1.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('DOMContentLoaded', function () { 2 | var canvas = document.getElementById(('game-canvas')); 3 | var engine = new BABYLON.Engine(canvas, true); 4 | var scene = new BABYLON.Scene(engine); 5 | var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 3, BABYLON.Vector3.Zero(), scene); 6 | var light = new BABYLON.HemisphericLight("Omni", new BABYLON.Vector3(0, 1, 0), scene); 7 | var box = BABYLON.Mesh.CreateBox("box", 1, scene); 8 | camera.attachControl(engine.getRenderingCanvas()); 9 | engine.runRenderLoop(function () { scene.render(); }); 10 | var mat = new BABYLON.StandardMaterial('red', scene); 11 | mat.diffuseColor = BABYLON.Color3.Red(); 12 | box.material = mat; 13 | }); 14 | //# sourceMappingURL=index1.js.map -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "starter", 3 | "version": "1.0.0", 4 | "devDependencies": { 5 | "autoprefixer": "^6.1.2", 6 | "cssnano": "^3.4.0", 7 | "grunt": "latest", 8 | "grunt-contrib-clean": "^0.7.0", 9 | "grunt-contrib-connect": "^0.11.2", 10 | "grunt-contrib-watch": "latest", 11 | "grunt-newer": "latest", 12 | "grunt-open": "^0.2.3", 13 | "grunt-postcss": "^0.7.1", 14 | "grunt-sass": "latest", 15 | "grunt-ts": "5.5.1", 16 | "jit-grunt": "latest", 17 | "time-grunt": "latest" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /resources/240794_1159592009_large.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/240794_1159592009_large.jpg -------------------------------------------------------------------------------- /resources/Julian/JB/drakkar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/Julian/JB/drakkar.jpg -------------------------------------------------------------------------------- /resources/LIBRARIES/bursion/resources/sol_watah2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/LIBRARIES/bursion/resources/sol_watah2.jpg -------------------------------------------------------------------------------- /resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/Dungeon/assets/shroom_color2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/Dungeon/assets/shroom_color2.png -------------------------------------------------------------------------------- /resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/bursion/resources/enclos.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/bursion/resources/enclos.jpg -------------------------------------------------------------------------------- /resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/bursion/resources/item_texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/bursion/resources/item_texture.jpg -------------------------------------------------------------------------------- /resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/bursion/resources/sol_plage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/bursion/resources/sol_plage.jpg -------------------------------------------------------------------------------- /resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/bursion/resources/sol_texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/bursion/resources/sol_texture.jpg -------------------------------------------------------------------------------- /resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/bursion/resources/sol_watah1_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/bursion/resources/sol_watah1_2.jpg -------------------------------------------------------------------------------- /resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/bursion/resources/sol_watah2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/bursion/resources/sol_watah2.jpg -------------------------------------------------------------------------------- /resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/bursion/resources/whale.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/LIBRARIES/ms-experiences16/resources/LIBRARIES/bursion/resources/whale.jpg -------------------------------------------------------------------------------- /resources/LIBRARIES/ms-experiences16/resources/Users/Julian/Desktop/25065_Eat_Sheep_Collection__Farm/farm_haybale_stump_shovel_wheelbarrow_rake_D.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/LIBRARIES/ms-experiences16/resources/Users/Julian/Desktop/25065_Eat_Sheep_Collection__Farm/farm_haybale_stump_shovel_wheelbarrow_rake_D.jpg -------------------------------------------------------------------------------- /resources/LIBRARIES/ms-experiences16/resources/Users/Julian/Desktop/73631_Low-poly_One_Texture_Village/Building texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/LIBRARIES/ms-experiences16/resources/Users/Julian/Desktop/73631_Low-poly_One_Texture_Village/Building texture.png -------------------------------------------------------------------------------- /resources/LIBRARIES/ms-experiences16/resources/hutte.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/LIBRARIES/ms-experiences16/resources/hutte.jpg -------------------------------------------------------------------------------- /resources/Program Files/Autodesk/3ds Max Design 2015/Maps/glare/glare_streaks_star_camera_filter.tif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/Program Files/Autodesk/3ds Max Design 2015/Maps/glare/glare_streaks_star_camera_filter.tif -------------------------------------------------------------------------------- /resources/hutte.fbx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/hutte.fbx -------------------------------------------------------------------------------- /resources/hutte.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/hutte.jpg -------------------------------------------------------------------------------- /resources/scene.max: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/scene.max -------------------------------------------------------------------------------- /resources/scene_new.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/scene_new.zip -------------------------------------------------------------------------------- /resources/well.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kimoen/ms-experiences16/f61392dbab8a407a12b83a90ac4cb264e69bcc8a/resources/well.jpg -------------------------------------------------------------------------------- /sass/_defines.scss: -------------------------------------------------------------------------------- 1 | // Color palet 2 | // TBD 3 | 4 | 5 | // Add the given attribute rgba(), with the given color and given alpha 6 | @mixin to-rgba($attribute, $color, $alpha) { 7 | #{$attribute}: rgba(red($color), green($color), blue($color), $alpha); 8 | } 9 | 10 | // Font family 11 | $font: sans-serif; 12 | 13 | // Add font-family and font-weight 14 | @mixin apply-font($weight:400) { 15 | font-family : $font; 16 | font-weight : $weight; 17 | } 18 | -------------------------------------------------------------------------------- /sass/_loader.scss: -------------------------------------------------------------------------------- 1 | .splashscreen { 2 | 3 | margin:0; 4 | padding:0; 5 | width:100%; 6 | height:100%; 7 | 8 | position:absolute; 9 | top:0; 10 | left:0; 11 | z-index:3; 12 | 13 | display:flex; 14 | flex-direction: column; 15 | justify-content:center; 16 | align-items : center; 17 | 18 | background-image: url('../img/back.jpg'); 19 | 20 | // misc 21 | pointer-events: none; 22 | user-select: none; 23 | 24 | .baseline { 25 | margin-top:50px; 26 | font-family: 'Segoe UI', sans-serif; 27 | font-size:1.5em; 28 | color:white; 29 | } 30 | 31 | img { 32 | max-height: 150px; 33 | height: 100%; 34 | } 35 | 36 | } 37 | 38 | .hide { 39 | opacity: 0; 40 | transition: opacity 0.5s linear; 41 | } 42 | 43 | #preloader_3{ 44 | position:relative; 45 | margin : 50px 0 0 -50px; 46 | } 47 | #preloader_3:before{ 48 | width:20px; 49 | height:20px; 50 | border-radius:20px; 51 | content:''; 52 | position:absolute; 53 | background:white; 54 | animation: preloader_3_before 1.5s infinite ease-in-out; 55 | } 56 | 57 | #preloader_3:after{ 58 | width:20px; 59 | height:20px; 60 | border-radius:20px; 61 | content:''; 62 | position:absolute; 63 | background:white; 64 | left:22px; 65 | animation: preloader_3_after 1.5s infinite ease-in-out; 66 | } 67 | 68 | @keyframes preloader_3_before { 69 | 0% {transform: translateX(0px) rotate(0deg)} 70 | 50% {transform: translateX(90px) scale(1.4) rotate(260deg); background:white;border-radius:0px;} 71 | 100% {transform: translateX(0px) rotate(0deg)} 72 | } 73 | @keyframes preloader_3_after { 74 | 0% {transform: translateX(0px)} 75 | 50% {transform: translateX(-90px) scale(1.4) rotate(-260deg);background:white;border-radius:0px;} 76 | 100% {transform: translateX(0px)} 77 | } 78 | -------------------------------------------------------------------------------- /sass/main.scss: -------------------------------------------------------------------------------- 1 | @import "defines"; 2 | 3 | html, body { 4 | width: 100%; 5 | height:100%; 6 | margin:0; 7 | padding:0; 8 | overflow:hidden; 9 | font-family : sans-serif; 10 | } 11 | 12 | #game-canvas { 13 | width:100%; 14 | height:100%; 15 | } 16 | 17 | @import "loader"; -------------------------------------------------------------------------------- /ts/.baseDir.ts: -------------------------------------------------------------------------------- 1 | // Ignore this file. See https://github.com/grunt-ts/grunt-ts/issues/77 -------------------------------------------------------------------------------- /ts/Controller.ts: -------------------------------------------------------------------------------- 1 | interface IAnimation { 2 | [name: string]: {from:number, to:number}; 3 | } 4 | 5 | class Controller { 6 | 7 | static Epsilon : number = 0.1; 8 | 9 | // The minion attached this controller 10 | private _minion : BABYLON.AbstractMesh; 11 | 12 | // The character skeleton (if any). Can be null 13 | public skeleton : BABYLON.Skeleton = null; 14 | 15 | // The array of animations (if the model has no skeleton) 16 | public _animations : IAnimation = {}; 17 | 18 | // The direction this character is heading to 19 | private _direction : BABYLON.Vector3 = new BABYLON.Vector3(0,0,0); 20 | 21 | // The destination this character is heading to 22 | private _destination : {position:BABYLON.Vector3, data:any} = null; 23 | 24 | // The last distance computed between the minion position and its destination 25 | private _lastDistance : number = Number.POSITIVE_INFINITY; 26 | 27 | // A set of destination. The character will navigate through all these positions. 28 | public destinations : Array<{position:BABYLON.Vector3, data:any}> = []; 29 | 30 | // Function called at each destination if defined 31 | public atEachDestination : (data:any) => void; 32 | 33 | // Function called (if defined) when the final destination is reached 34 | public atFinalDestination : (data:any) => void; 35 | 36 | // The character speed 37 | public speed : number = 1; 38 | 39 | // All animations speeds will be multiplied by this factor 40 | public animationSpeedMultiplier : number = 1; 41 | 42 | // True if the character is moving, false otherwise 43 | public isMoving : boolean = false; 44 | 45 | 46 | constructor(minion : BABYLON.AbstractMesh) { 47 | this._minion = minion; 48 | 49 | this.findSkeleton(); 50 | 51 | // Add move function to the character 52 | this._minion.getScene().registerBeforeRender(() => { 53 | this._move(); 54 | }); 55 | } 56 | 57 | /** 58 | * Add a destination to this character. 59 | * data is a parameter that can be link to a destination. It will be called 60 | * when the minion arrives at this destination. 61 | */ 62 | public addDestination(value:BABYLON.Vector3, data?: any) { 63 | // Add this destination to the set of destination 64 | this.destinations.push({position:value, data:data}); 65 | 66 | // Return this to chain destination if needed 67 | return this; 68 | } 69 | 70 | /** 71 | * Move to the next character destination 72 | */ 73 | private _moveToNextDestination() { 74 | // Get the next destination 75 | this._destination = this.destinations.shift(); 76 | 77 | // reset distance check 78 | this._lastDistance= Number.POSITIVE_INFINITY; 79 | this.isMoving = true; 80 | 81 | // Compute direction 82 | this._direction = this._destination.position.subtract(this._minion.position); 83 | this._direction.normalize(); 84 | 85 | // Rotate 86 | this.lookAt(this._destination.position); 87 | } 88 | 89 | /** 90 | * The character looks at the given position, but rotates only along Y-axis 91 | * */ 92 | private lookAt(value:BABYLON.Vector3){ 93 | var dv = value.subtract(this._minion.position); 94 | var yaw = -Math.atan2(dv.z, dv.x) - Math.PI / 2; 95 | this._minion.rotation.y = yaw ; 96 | } 97 | 98 | /** 99 | * Attach the given mesh to this controller, and found the character skeleton. 100 | * The skeleton used for the mesh animation (and the debug viewer) is the first found one. 101 | */ 102 | public findSkeleton() { 103 | // Stop mesh animations 104 | this._minion.getScene().stopAnimation(this._minion); 105 | 106 | // Find skeleton if possible 107 | if (this._minion.skeleton) { 108 | this.skeleton = this._minion.skeleton; 109 | // Stop skeleton animations 110 | this._minion.getScene().stopAnimation(this.skeleton); 111 | // Activate animation blending 112 | this.skeleton.enableBlending(0.08); 113 | } 114 | } 115 | 116 | /** 117 | * Run the animation between the character position and its first destination 118 | */ 119 | public start() { 120 | // If at least one destination 121 | if (this.destinations.length >= 1) { 122 | // Animate the character 123 | this.playAnimation('walk', true, 1); 124 | // Move to the next destination 125 | this._moveToNextDestination(); 126 | } 127 | } 128 | 129 | 130 | /** 131 | * Removes all destination of the minion 132 | */ 133 | public stop() { 134 | this.destinations = []; 135 | this.pause(); 136 | } 137 | 138 | /** 139 | * Pause the character movement 140 | */ 141 | public pause() { 142 | this.isMoving = false; 143 | // Animate the character in idle animation 144 | this.playAnimation('idle', true, 1); 145 | } 146 | 147 | /** 148 | * Resume the character movement 149 | */ 150 | public resume() { 151 | this.isMoving = true; 152 | // Animate the character 153 | this.playAnimation('walk', true, 1); 154 | } 155 | 156 | /** 157 | * Move the character to its destination. 158 | * The character y position is set according to the ground position (or 0 if no ground). 159 | * The attribute _canMove is reset to false when the destination is reached. 160 | */ 161 | private _move() { 162 | // If a destination has been set and the character has not been stopped 163 | if (this.isMoving && this._destination) { 164 | // Compute distance to destination 165 | let distance = BABYLON.Vector3.Distance(this._minion.position, this._destination.position); 166 | // Change destination if th distance is increasing (should not) 167 | if (distance < Controller.Epsilon || distance > this._lastDistance) { 168 | // Set the minion position to the curent destination 169 | this._minion.position.copyFrom(this._destination.position); 170 | 171 | if (this.atEachDestination) { 172 | this.atEachDestination(this._destination.data); 173 | } 174 | 175 | // Destination has been reached 176 | this.isMoving = false; 177 | 178 | if (this.destinations.length == 0) { 179 | // Animate the character in idle animation 180 | this.playAnimation('idle', true, 1); 181 | // Call function when final destination is reached 182 | if (this.atFinalDestination) { 183 | this.atFinalDestination(this._destination.data); 184 | } 185 | } else { 186 | this._moveToNextDestination(); 187 | } 188 | 189 | } else { 190 | this._lastDistance = distance; 191 | // Add direction to the position 192 | let delta = this._direction.scale(this._minion.getScene().getAnimationRatio()*this.speed); 193 | this._minion.position.addInPlace(delta); 194 | } 195 | } 196 | } 197 | 198 | /** 199 | * Add an animation to this character 200 | */ 201 | public addAnimation(name:string, from:number, to:number) { 202 | if (this.skeleton) { 203 | this.skeleton.createAnimationRange(name, from, to); 204 | }else { 205 | this._animations[name] = {from:from, to:to}; 206 | } 207 | } 208 | 209 | /** 210 | * Play the given animation if skeleton found 211 | */ 212 | public playAnimation(name:string, loop:boolean, speed:number = 1) { 213 | if (this.skeleton){ 214 | this.skeleton.beginAnimation(name, loop, speed*this.animationSpeedMultiplier); 215 | } else { 216 | let animation = this._animations[name]; 217 | this._minion.getScene().beginAnimation(this._minion, animation.from, animation.to, loop, speed*this.animationSpeedMultiplier); 218 | } 219 | } 220 | } -------------------------------------------------------------------------------- /ts/Game.ts: -------------------------------------------------------------------------------- 1 | class Game { 2 | 3 | private engine: BABYLON.Engine; 4 | public assets: Array; 5 | public scene: BABYLON.Scene; 6 | 7 | // The viking controller 8 | private _controller : Controller; 9 | 10 | constructor(canvasId: string) { 11 | 12 | let canvas: HTMLCanvasElement = document.getElementById(canvasId); 13 | this.engine = new BABYLON.Engine(canvas, true); 14 | this.engine.enableOfflineSupport = false; 15 | 16 | this.assets = []; 17 | this.scene = null; 18 | 19 | window.addEventListener("resize", () => { 20 | this.engine.resize(); 21 | }); 22 | 23 | this.initScene(); 24 | 25 | } 26 | 27 | public static SELF : number = 0; 28 | public static CLONE : number = 1; 29 | public static INSTANCE : number = 2; 30 | 31 | public createAsset(name:string, mode:number=Game.SELF) : Array { 32 | let res : Array = []; 33 | for (let mesh of this.assets[name]) { 34 | switch (mode) { 35 | case Game.SELF: 36 | mesh.setEnabled(true); 37 | res.push(mesh); 38 | break; 39 | case Game.CLONE: 40 | res.push(mesh.clone()); 41 | break; 42 | 43 | case Game.INSTANCE: 44 | res.push(mesh.createInstance()); 45 | break; 46 | } 47 | } 48 | return res; 49 | } 50 | 51 | private initScene() { 52 | 53 | this.scene = new BABYLON.Scene(this.engine); 54 | 55 | let camera = new BABYLON.ArcRotateCamera('', 1.11, 1.18, 800, new BABYLON.Vector3(0, 0, 0), this.scene); 56 | camera.attachControl(this.engine.getRenderingCanvas()); 57 | camera.wheelPrecision *= 10; 58 | let light = new BABYLON.HemisphericLight('hemisphericLight', new BABYLON.Vector3(0, 1, 0), this.scene); 59 | light.intensity *= 1.5; 60 | // let globalLight = new BABYLON.HemisphericLight('globalHemisphericLight', new BABYLON.Vector3(-1, -1, 0), this.scene); 61 | 62 | // background 63 | new BABYLON.Layer('background', 'assets/textures/background2.jpg', this.scene, true); 64 | // Load assets 65 | let loader = new Preloader(this); 66 | loader.callback = this.run.bind(this); 67 | 68 | loader.loadAssets(); 69 | } 70 | 71 | private run() { 72 | 73 | this.scene.executeWhenReady(() => { 74 | 75 | // Remove loader 76 | var loader = document.querySelector("#splashscreen"); 77 | loader.style.display = "none"; 78 | 79 | this._init(); 80 | 81 | this.engine.runRenderLoop(() => { 82 | this.scene.render(); 83 | }); 84 | 85 | this._runGame(); 86 | }); 87 | } 88 | 89 | 90 | private _init () { 91 | // this.scene.debugLayer.show(); 92 | 93 | var music = new BABYLON.Sound("ambient", "assets/music/ambient.wav", this.scene, null, { loop: true, autoplay: true }); 94 | 95 | this.createAsset('scene'); 96 | 97 | let viking = this.createAsset('viking')[0]; 98 | viking.position.y += 0.35; 99 | 100 | // add controller 101 | this._controller = new Controller(viking); 102 | this._controller.speed = 0.1;9 103 | this._controller.animationSpeedMultiplier = 2.9; 104 | this._controller.addAnimation('idle', 0, 320); 105 | this._controller.addAnimation('walk', 323, 364); 106 | this._controller.addAnimation('dance', 367, 738); 107 | this._controller.playAnimation('idle', true); 108 | 109 | this._initSmoke(); 110 | 111 | // Animate the camera at start 112 | var easing = new BABYLON.QuinticEase(); 113 | easing.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEOUT); 114 | 115 | let time = 60*3; 116 | BABYLON.Animation.CreateAndStartAnimation( 117 | 'camera.alpha', 118 | this.scene.activeCamera, 119 | 'alpha', 120 | 60, 121 | time, 122 | 1.11*2, 123 | -1, 124 | BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT, 125 | easing); 126 | BABYLON.Animation.CreateAndStartAnimation( 127 | 'camera.beta', 128 | this.scene.activeCamera, 129 | 'beta', 130 | 60, 131 | time, 132 | 1.18*2, 133 | 1.20, 134 | BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT, 135 | easing); 136 | BABYLON.Animation.CreateAndStartAnimation( 137 | 'camera.radius', 138 | this.scene.activeCamera, 139 | 'radius', 140 | 60, 141 | time, 142 | 800, 143 | 50, 144 | BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT, 145 | easing); 146 | 147 | 148 | new BABYLON.Sound("psy", "assets/music/psy.ogg", this.scene, null, { loop: false, autoplay: false }); 149 | } 150 | 151 | private _runGame() { 152 | 153 | this.scene.onPointerDown = (evt, pr) => { 154 | if (pr.hit) { 155 | let destination = pr.pickedPoint.clone(); 156 | destination.y = 0; 157 | this._controller.addDestination(destination); 158 | this._controller.start(); 159 | } 160 | }; 161 | 162 | window.addEventListener('keydown', (evt) => { 163 | if (evt.keyCode == 32) { 164 | this.scene.getSoundByName('psy').play(); 165 | this._controller.playAnimation('dance', true); 166 | } 167 | }) 168 | } 169 | 170 | private _initSmoke () { 171 | 172 | // Init smoke 173 | var particleSystem = new BABYLON.ParticleSystem("psys", 2000, this.scene); 174 | 175 | //Texture of each particle 176 | particleSystem.particleTexture = new BABYLON.Texture("assets/textures/smoke.png", this.scene); 177 | 178 | // Where the particles come from 179 | particleSystem.emitter = this.scene.getMeshByName('smoke'); 180 | particleSystem.minEmitBox = new BABYLON.Vector3(1, 0.5, 1); 181 | particleSystem.maxEmitBox = new BABYLON.Vector3(-1, 0.5, -1); 182 | 183 | // Colors of all particles 184 | particleSystem.color1 = new BABYLON.Color4(0.8823529411764706, 0.8823529411764706, 0.8823529411764706, 0.5); 185 | particleSystem.color2 = new BABYLON.Color4(1, 0.9882352941176471, 0.9607843137254902, 0.6); 186 | particleSystem.colorDead = new BABYLON.Color4(0.9137254901960784, 0.9137254901960784, 0.9137254901960784, 0.1); 187 | 188 | // Mask applied on all particles 189 | particleSystem.textureMask = new BABYLON.Color4(1, 1, 1, 0.99); 190 | 191 | // Size of each particle (random between... 192 | particleSystem.minSize = 2; 193 | particleSystem.maxSize = 4; 194 | 195 | // Life time of each particle (random between... 196 | particleSystem.minLifeTime = 0.2; 197 | particleSystem.maxLifeTime = 0.3; 198 | 199 | // Emission rate 200 | particleSystem.emitRate = 100; 201 | 202 | // Blend mode : BLENDMODE_ONEONE (without alpha), or BLENDMODE_STANDARD (with alpha) 203 | particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_STANDARD; 204 | 205 | // Set the gravity of all particles 206 | particleSystem.gravity = new BABYLON.Vector3(40, -40, 0.5); 207 | 208 | // Direction of each particle after it has been emitted 209 | particleSystem.direction1 = new BABYLON.Vector3(0, 1, 0); 210 | particleSystem.direction2 = new BABYLON.Vector3(0, 10, 0); 211 | 212 | // Angular speed, in radians 213 | particleSystem.minAngularSpeed = -10; 214 | particleSystem.maxAngularSpeed = 10; 215 | 216 | // Speed 217 | particleSystem.minEmitPower = 5; 218 | particleSystem.maxEmitPower = 5; 219 | particleSystem.updateSpeed = 0.001; 220 | 221 | // Start the particle system 222 | particleSystem.start(); 223 | } 224 | } 225 | -------------------------------------------------------------------------------- /ts/Preloader.ts: -------------------------------------------------------------------------------- 1 | class Preloader { 2 | 3 | private _game : Game; 4 | private _scene : BABYLON.Scene; 5 | private _loader : BABYLON.AssetsManager = null; 6 | 7 | // Function called when the loader is over 8 | public callback : () => void; 9 | 10 | constructor(game:Game) { 11 | this._game = game; 12 | this._scene = this._game.scene; 13 | 14 | this._loader = new BABYLON.AssetsManager(this._scene); 15 | this._loader.useDefaultLoadingScreen = false; 16 | this._loader.onFinish = this._onFinish.bind(this); 17 | 18 | } 19 | 20 | public loadAssets() { 21 | 22 | this._addMesh('scene'); 23 | this._addMesh('viking'); 24 | this._loader.load(); 25 | } 26 | 27 | private _onFinish() { 28 | this.callback(); 29 | } 30 | 31 | private _addMesh(folder :string, name?:string ) { 32 | if (name) { 33 | var task = this._loader.addMeshTask(name, '', `assets/${folder}/`, `${name}.babylon`); 34 | } else { 35 | var task = this._loader.addMeshTask(folder, '', `assets/${folder}/`, `${folder}.babylon`); 36 | } 37 | task.onSuccess = this._addMeshAssetToGame.bind(this); 38 | } 39 | 40 | private _addMeshAssetToGame(t: BABYLON.MeshAssetTask) { 41 | 42 | this._game.assets[t.name] = []; 43 | console.group(); 44 | for (let m of t.loadedMeshes) { 45 | m.setEnabled(false); 46 | m.isPickable = true; 47 | this._game.assets[t.name].push(m); 48 | console.log(`%c Loaded : ${m.name}`, 'background: #333; color: #bada55'); 49 | } 50 | console.log(`%c Finished : ${t.name}`, 'background: #333; color: #bada55'); 51 | 52 | console.groupEnd(); 53 | 54 | } 55 | 56 | 57 | } -------------------------------------------------------------------------------- /ts/Timer.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Builds a new timer. A timer can delay an action, and repeat this action X times 3 | * @param time The time in milliseconds 4 | * @param scene The scene 5 | * @param callback The callback function called when the timer is finished 6 | * @param options.autostart If set to true, the timer will autostart. False by default. 7 | *@param options.autodestroy If set to true, the timer will autodestroy at the end of all callback functions. False by default 8 | *@param options.repeat If set, the callback action will be repeated the specified number of times. 1 by default. Set to -1 if repeat infinitely 9 | *@param options.immediate If set, the callback action will be called before waiting 'time' ms. false by default. 10 | */ 11 | class Timer { 12 | 13 | private scene : BABYLON.Scene; 14 | private registeredFunction : () => void; 15 | 16 | /** The timer max time (in ms) */ 17 | public maxTime : number; 18 | /** The timer current time */ 19 | public currentTime : number; 20 | /** True if the timer is finished, false otherwise */ 21 | public isOver : boolean; 22 | /** True if the timer is paused, false otherwise */ 23 | public paused : boolean; 24 | /** True if the timer has been started, false otherwise */ 25 | public started : boolean; 26 | /** Function to be repeated when the timer is finished */ 27 | public callback: () => void; 28 | /** Function to be called when the timer is finished (no more repeat counts) */ 29 | public onFinish: () => void; 30 | /**If set, the callback action will be repeated the specified number of times */ 31 | public repeat : number; 32 | private repeatInit : number; 33 | /** Should the timer start directly after its creation ? */ 34 | public autostart : boolean; 35 | /** Should the timer call 'callback function' immediately after starting ? */ 36 | public immediate : boolean; 37 | /** Should the timer destroy itself after completion ? */ 38 | public autodestroy : boolean; 39 | 40 | 41 | constructor(time: number, scene:BABYLON.Scene, options:{repeat?:number, autostart?:boolean, autodestroy?:boolean, immediate?:boolean} = {}) { 42 | 43 | this.scene = scene; 44 | 45 | this.maxTime = this.currentTime = time; 46 | 47 | // True if the timer is finished, false otherwise 48 | this.isOver = false; 49 | 50 | // True if the timer is paused, false otherwise 51 | this.paused = false; 52 | 53 | // True if the timer has been started, false otherwise 54 | this.started = false; 55 | 56 | // Function to be repeated when the timer is finished 57 | this.callback = null; 58 | 59 | // Function to be called when the timer is finished (no more repeat counts) 60 | this.onFinish = null; 61 | 62 | //If set, the callback action will be repeated the specified number of times 63 | this.repeat = options.repeat || 1; 64 | this.repeatInit = this.repeat; 65 | 66 | // Should the timer start directly after its creation ? 67 | this.autostart = options.autostart || false; 68 | 69 | // Should the timer destroy itself after completion ? 70 | this.autodestroy = options.autodestroy || false; 71 | 72 | // Should the timer call 'callback function' immediately after starting ? 73 | this.immediate = options.immediate || false; 74 | 75 | this.registeredFunction = this._checkIfUpdate.bind(this); 76 | scene.registerBeforeRender(this.registeredFunction); 77 | 78 | // Start the timer is set to autostart 79 | if (this.autostart) { 80 | this.start(); 81 | } 82 | } 83 | 84 | /** 85 | * Check if this timer can be updated 86 | */ 87 | private _checkIfUpdate () : void { 88 | if (this.started && !this.isOver && !this.paused) { 89 | this._update(); 90 | } 91 | } 92 | 93 | /** 94 | * Reset the timer. Do not reset its options! 95 | */ 96 | public reset() { 97 | this.currentTime = this.maxTime; 98 | this.isOver = false; 99 | this.started = false; 100 | this.paused = false; 101 | } 102 | 103 | /** 104 | * Reset the timer and its repeat number 105 | */ 106 | public hardReset() { 107 | this.reset(); 108 | this.repeat = this.repeatInit; 109 | } 110 | 111 | /** 112 | * Start the timer 113 | */ 114 | public start() { 115 | this.started = true; 116 | } 117 | 118 | /** 119 | * Pause the timer 120 | */ 121 | public pause() { 122 | this.paused = true; 123 | } 124 | 125 | /** 126 | * Stop the timer, and reset it. 127 | * @param destroy If set to true, the timer is deleted. 128 | */ 129 | public stop(destroy : boolean) { 130 | this.started = false; 131 | this.reset(); 132 | if (this.autodestroy || destroy) { 133 | this.destroy(); 134 | } 135 | } 136 | 137 | /** 138 | * Destory the timer 139 | * @private 140 | */ 141 | private destroy() { 142 | // Unregister update function 143 | this.scene.unregisterBeforeRender(this.registeredFunction); 144 | } 145 | 146 | /** 147 | * Unpause the timer 148 | */ 149 | public resume() { 150 | this.paused = false; 151 | } 152 | 153 | /** 154 | * The update function 155 | * @private 156 | */ 157 | private _update() { 158 | 159 | this.currentTime -= this.scene.getEngine().getDeltaTime(); 160 | 161 | if (this.currentTime <= 0 || this.immediate) { 162 | // reset immediate 163 | this.immediate = false; 164 | 165 | // The delay is finished, run the callback 166 | this.isOver = true; 167 | if (this.repeat != -1) { 168 | this.repeat--; 169 | } 170 | if (this.callback) { 171 | this.callback(); 172 | } 173 | 174 | if (this.repeat > 0 || this.repeat == -1) { 175 | this.reset(); 176 | this.start(); 177 | } else { 178 | // Call the onFinish action 179 | if (this.onFinish) { 180 | this.onFinish(); 181 | } 182 | // Autodestroy 183 | if (this.autodestroy) { 184 | this.destroy(); 185 | } 186 | } 187 | } 188 | } 189 | } -------------------------------------------------------------------------------- /ts/index1.ts: -------------------------------------------------------------------------------- 1 | 2 | window.addEventListener('DOMContentLoaded', () => { 3 | let canvas: HTMLCanvasElement = document.getElementById(('game-canvas')); 4 | let engine = new BABYLON.Engine(canvas, true); 5 | let scene = new BABYLON.Scene(engine); 6 | let camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 3, BABYLON.Vector3.Zero(), scene); 7 | let light = new BABYLON.HemisphericLight("Omni", new BABYLON.Vector3(0, 1, 0), scene); 8 | let box = BABYLON.Mesh.CreateBox("box", 1, scene); 9 | 10 | camera.attachControl(engine.getRenderingCanvas()); 11 | 12 | engine.runRenderLoop(() => { scene.render(); }); 13 | 14 | var mat = new BABYLON.StandardMaterial('red', scene); 15 | mat.diffuseColor = BABYLON.Color3.Red(); 16 | box.material=mat; 17 | 18 | 19 | }); -------------------------------------------------------------------------------- /ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5" 4 | }, 5 | "files": [ 6 | "typings/babylon.d.ts", 7 | "Timer.ts", 8 | "Game.ts", 9 | "Controller.ts", 10 | "Preloader.ts", 11 | "index1.ts" 12 | ] 13 | } --------------------------------------------------------------------------------