Nightly

dist/preview release/babylon.max.js

@@ -55463,7 +55463,7 @@ var BABYLON;
             this._fixedTimeStep = timeStep;
         };
         CannonJSPlugin.prototype.executeStep = function (delta, impostors) {
-            this.world.step(this._fixedTimeStep, this._useDeltaForWorldStep ? delta * 1000 : 0, 3);
+            this.world.step(this._fixedTimeStep, this._useDeltaForWorldStep ? delta : 0, 3);
         };
         CannonJSPlugin.prototype.applyImpulse = function (impostor, force, contactPoint) {
             var worldPoint = new CANNON.Vec3(contactPoint.x, contactPoint.y, contactPoint.z);
@@ -56827,6 +56827,7 @@ var BABYLON;
             };
             SkeletonViewer.prototype._getLinesForBonesWithLength = function (bones, meshMat) {
                 var len = bones.length;
+                var meshPos = this.mesh.position;
                 for (var i = 0; i < len; i++) {
                     var bone = bones[i];
                     var points = this._debugLines[i];
@@ -56836,11 +56837,14 @@ var BABYLON;
                     }
                     this._getBonePosition(points[0], bone, meshMat);
                     this._getBonePosition(points[1], bone, meshMat, 0, bone.length, 0);
+                    points[0].subtractInPlace(meshPos);
+                    points[1].subtractInPlace(meshPos);
                 }
             };
             SkeletonViewer.prototype._getLinesForBonesNoLength = function (bones, meshMat) {
                 var len = bones.length;
                 var boneNum = 0;
+                var meshPos = this.mesh.position;
                 for (var i = len - 1; i >= 0; i--) {
                     var childBone = bones[i];
                     var parentBone = childBone.getParent();
@@ -56854,6 +56858,8 @@ var BABYLON;
                     }
                     childBone.getAbsolutePositionToRef(this.mesh, points[0]);
                     parentBone.getAbsolutePositionToRef(this.mesh, points[1]);
+                    points[0].subtractInPlace(meshPos);
+                    points[1].subtractInPlace(meshPos);
                     boneNum++;
                 }
             };
@@ -56874,6 +56880,7 @@ var BABYLON;
                 else {
                     BABYLON.MeshBuilder.CreateLineSystem(null, { lines: this._debugLines, updatable: true, instance: this._debugMesh }, this._scene);
                 }
+                this._debugMesh.position.copyFrom(this.mesh.position);
                 this._debugMesh.color = this.color;
             };
             SkeletonViewer.prototype.dispose = function () {

dist/preview release/gui/babylon.gui.d.ts

@@ -183,6 +183,7 @@ declare module BABYLON.GUI {
 }
 
 /// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare var DOMImage: new (width?: number, height?: number) => HTMLImageElement;
 declare module BABYLON.GUI {
     class Image extends Control {
         name: string;
@@ -190,7 +191,15 @@ declare module BABYLON.GUI {
         private _imageWidth;
         private _imageHeight;
         private _loaded;
+        private _stretch;
+        stretch: number;
         constructor(name: string, url: string);
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        private static _STRETCH_NONE;
+        private static _STRETCH_FILL;
+        private static _STRETCH_UNIFORM;
+        static readonly STRETCH_NONE: number;
+        static readonly STRETCH_FILL: number;
+        static readonly STRETCH_UNIFORM: number;
     }
 }

dist/preview release/gui/babylon.gui.js

@@ -1046,6 +1046,7 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var DOMImage = Image;
 var BABYLON;
 (function (BABYLON) {
     var GUI;
@@ -1056,26 +1057,82 @@ var BABYLON;
                 var _this = _super.call(this, name) || this;
                 _this.name = name;
                 _this._loaded = false;
-                _this._domImage = new HTMLImageElement();
+                _this._stretch = Image.STRETCH_FILL;
+                _this._domImage = new DOMImage();
                 _this._domImage.onload = function () {
                     _this._imageWidth = _this._domImage.width;
                     _this._imageHeight = _this._domImage.height;
                     _this._loaded = true;
+                    _this._markAsDirty();
                 };
                 _this._domImage.src = url;
                 return _this;
             }
+            Object.defineProperty(Image.prototype, "stretch", {
+                get: function () {
+                    return this._stretch;
+                },
+                set: function (value) {
+                    if (this._stretch === value) {
+                        return;
+                    }
+                    this._stretch = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
             Image.prototype._draw = function (parentMeasure, context) {
                 context.save();
                 this.applyStates(context);
                 _super.prototype._processMeasures.call(this, parentMeasure, context);
                 if (this._loaded) {
-                    context.drawImage(this._domImage, 0, 0, this._imageWidth, this._imageHeight, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                    switch (this._stretch) {
+                        case Image.STRETCH_NONE:
+                            context.drawImage(this._domImage, this._currentMeasure.left, this._currentMeasure.top);
+                            break;
+                        case Image.STRETCH_FILL:
+                            context.drawImage(this._domImage, 0, 0, this._imageWidth, this._imageHeight, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                            break;
+                        case Image.STRETCH_UNIFORM:
+                            var hRatio = this._currentMeasure.width / this._imageWidth;
+                            var vRatio = this._currentMeasure.height / this._imageHeight;
+                            var ratio = Math.min(hRatio, vRatio);
+                            var centerX = (this._currentMeasure.width - this._imageWidth * ratio) / 2;
+                            var centerY = (this._currentMeasure.height - this._imageHeight * ratio) / 2;
+                            context.drawImage(this._domImage, 0, 0, this._imageWidth, this._imageHeight, this._currentMeasure.left + centerX, this._currentMeasure.top + centerY, this._imageWidth * ratio, this._imageHeight * ratio);
+                            break;
+                    }
                 }
                 context.restore();
             };
+            Object.defineProperty(Image, "STRETCH_NONE", {
+                get: function () {
+                    return Image._STRETCH_NONE;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Image, "STRETCH_FILL", {
+                get: function () {
+                    return Image._STRETCH_FILL;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Image, "STRETCH_UNIFORM", {
+                get: function () {
+                    return Image._STRETCH_UNIFORM;
+                },
+                enumerable: true,
+                configurable: true
+            });
             return Image;
         }(GUI.Control));
+        // Static
+        Image._STRETCH_NONE = 0;
+        Image._STRETCH_FILL = 1;
+        Image._STRETCH_UNIFORM = 2;
         GUI.Image = Image;
     })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
 })(BABYLON || (BABYLON = {}));

gui/readme.md

@@ -12,3 +12,9 @@ The Babylon.js GUI library is an extension you can use to generate interactive u
 * Proportional or pixel constant size modes
 * Text wrapping
 
+==> ideas
+* lines (with cap)
+* ellipse
+* rounded rect
+* button
+* interactions

gui/src/controls/control.ts

@@ -231,6 +231,14 @@ module BABYLON.GUI {
 
                 this._measure(parentMeasure, context);
                 this._computeAlignment(parentMeasure, context);
+
+                // Convert to int values
+                this._currentMeasure.left = this._currentMeasure.left | 0;
+                this._currentMeasure.top = this._currentMeasure.top | 0;
+                this._currentMeasure.width = this._currentMeasure.width | 0;
+                this._currentMeasure.height = this._currentMeasure.height | 0;
+
+                // Let children add more features
                 this._additionalProcessing(parentMeasure, context);
 
                 this._isDirty = false;

src/Physics/Plugins/babylon.cannonJSPlugin.ts

@@ -29,7 +29,7 @@
         }
 
         public executeStep(delta: number, impostors: Array<PhysicsImpostor>): void {
-            this.world.step(this._fixedTimeStep, this._useDeltaForWorldStep ? delta * 1000 : 0, 3);
+            this.world.step(this._fixedTimeStep, this._useDeltaForWorldStep ? delta : 0, 3);
         }
 
         public applyImpulse(impostor: PhysicsImpostor, force: Vector3, contactPoint: Vector3) {