Search the Community

Hey everyone, So I have been fighting Sprite2D for hours. I am developping a 2D version of my project and I simply wanted to draw a single sprite2D on my canvas but couldn't, the sprite was not showing. The texture was loading for sure because I could use it on 3D meshes. Another post talked about a similar issue and although the post says the problem was solved, it does not say how or what was really causing it : I am not showing all my experimenting because it would be meaningless, but I kept getting this warning: (index):1 [.Offscreen-For-WebGL-0x7f84b30bdc00]RENDER WARNING: there is no texture bound to the unit 0 and all the posts on the web about those kind of errors were very foggy... hours passed, thought it was the server, the loading, the transparency... without having any kind of improvement, so I started to cut everything from my code util I was only creating an engine and basically copied paste the babylon example http://babylonjs-playground.com/#20MSFF#16. By th way I got also this very benign warning caused by the BABYLON.Texture.NEAREST_SAMPLINGMODE : [.Offscreen-For-WebGL-0x7f84b30bdc00]RENDER WARNING: there is no texture bound to the unit 0 babylon.max.js:7027 'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead. this warning comes from this line _this._workingContext.webkitImageSmoothingEnabled = false; on 7027 babylon.max.js. But this warning has nothing to do with the sprite2D not showing. To cut a very long story short : When settings = {} passed to new BABYLON.Sprite2D do not contain a spriteSize property, the sprite.size SHOULD be set to the actual texture size, but it is in fact set to size(0,0) and hence the sprite is not displayed. This behavior does not seem to be on purpose because the docs clearly state the sprite would take the size of the texture. The code also point in that direction (42630 babylon.max.js): function Sprite2D(texture, settings) { if (!settings) { settings = {}; } _super.call(this, settings); this.texture = texture; this.texture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; this.texture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE; this.size = settings.spriteSize || null; // LOOK HERE ! this.spriteLocation = settings.spriteLocation || new BABYLON.Vector2(0, 0); this.spriteFrame = 0; this.invertY = (settings.invertY == null) ? false : settings.invertY; this.alignToPixel = (settings.alignToPixel == null) ? true : settings.alignToPixel; this._isTransparent = true; if (!this.size) { /// AND HERE !! var s = texture.getSize(); this.size = new BABYLON.Size(s.width, s.height); } } So I tried to understand why this.size was not set to the texture size... So first of all, when the super is called the size is set to (0,0). Then it SHOULD be set to null if spriteSize is not set. But there is an interaction between getters and setters. Since size is a SmartPropertyPrim... the GETTER is called everytime you call the setter on 36968: SmartPropertyPrim._hookProperty = function (propId, piStore, typeLevelCompare, dirtyBoundingInfo, kind) { return function (target, propName, descriptor) { var propInfo = SmartPropertyPrim._createPropInfo(target, propName, propId, dirtyBoundingInfo, typeLevelCompare, kind); if (piStore) { piStore(propInfo); } var getter = descriptor.get, setter = descriptor.set; // Overload the property setter implementation to add our own logic descriptor.set = function (val) { // check for disposed first, do nothing if (this.isDisposed) { return; } var curVal = getter.call(this); if (SmartPropertyPrim._checkUnchanged(curVal, val)) { return; } // Cast the object we're working one var prim = this; // Change the value setter.call(this, val); // Notify change, dirty flags update prim._handlePropChanged(curVal, val, propName, propInfo, typeLevelCompare); }; }; }; The getter is : Object.defineProperty(Prim2DBase.prototype, "size", { /** * Size of the primitive or its bounding area * BEWARE: if you change only size.width or height it won't trigger a property change and you won't have the expected behavior. * Use this property to set a new Size object, otherwise to change only the width/height use Prim2DBase.width or height properties. */ get: function () { if (!this._size || this._size.width == null || this._size.height == null) { if (Prim2DBase.boundinbBoxReentrency) { return Prim2DBase.nullSize; } if (this._boundingSize) { return this._boundingSize; } Prim2DBase.boundinbBoxReentrency = true; var b = this.boundingInfo; Prim2DBase.boundinbBoxReentrency = false; return this._boundingSize; } return this._size; }, ... So basically a size (0,0) is returned if size is null sooo this: if (!this.size) { /// AND HERE !! Will never be true. I think. Hope it helps - time to sleep !