Search the Community

Showing results for tags 'sprite2d'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 10 results

  1. Hi, I was wondering if someone had experienced slight differences in "offsets" using sprite2D texture and wether it might be related to caching. As an example I have a fairly small texture of 16*16 here in svg, but i tried also using png, same problem. That's the begining of the sprite texture zoomed in 4800% When using it in chrome with a code like this: const crossSheet = taskObject.cloneAssetIntoScene(R.get.crossSheet, scene) crossSheet.hasAlpha = false const cross = new BABYLON.Sprite2D(crossSheet, { parent: canvas, id: 'cross', marginAlignment: 'v: center, h: center', spriteSize: new BABYLON.Size(16, 16), spriteLocation: new BABYLON.Vector2(0, 0), }) cross.spriteFrame = R.get.cross_predict The texture is at the center of the screen here, in chrome the top misses 0.5px In Safari there is a difference in colors and width of strokes: If now I am using a 16,17 sprite size i get a correct sprite in chrome: But somehow it is seems worst in safari: Any clue ? Do you think it is related to the caching strategy ? @Nockawa Here is the link to the texture: Here is a playground, on the playground it is the BOTTOM 0.5px that get cutoff..
  2. There are two questions about sprite2d behaviour, again I don't know whether it's bug or intended properties (fun club of @Nockawa keeps working) 1. Origin property of primitive. (That can be a bug) From documentation: Origin: define the origin of the primitive, default being 0.5,0.5, which is the center of the primitive, 0.0,0.0 would be the bottom/left corner of the primitive. The origin play a role in the rotation/scaling of the primitive but not in its positioning. Here is PG with exploration of that "not in its positioning" thing in the context of Sprite2D: As we can see, the right origin formula has to be written as "...but not in its positioning, if the primitive is not Sprite2d. In later case, you wouldn't guess the algorithm that derives actual sprite position from it's position and origin properties. 2. Size and width + height (That is a question of usability). Simple - you can set size property, but you can't set height and width properties on sprite2d. I belive that is the intended behaviour, because there are no height and width in sprite2d constructor settings, nor in renderablePrim2d or prim2dBase. But, 1. using all shape2d-based primitives and group2d you can set size or height/width, 2. on all primitives (including sprited2d) you can set position or x/y so, that is one of those nasty little things that you have to just remember.
  3. There is a question on using Sprite2D primitive when sprite size is larger then texture size. The common usage scenario is filling some area with "pattern" texture. Logically, that behaviour can be achieved by setting wrapU and wrapV properties of underlying texture to Texture.WRAP_ADDRESSMODE. But Sprite2D doesn't support that usage scenario. In Sprite2D constructor: super(settings); this.texture = texture; this.texture.wrapU = Texture.CLAMP_ADDRESSMODE; this.texture.wrapV = Texture.CLAMP_ADDRESSMODE; so, Sprite2D overrides texture settings. That snippet will use CLAMP_ADDRESSMODE, ignoring texture settings. tx.wrapU = Texture.WRAP_ADDRESSMODE; tx.wrapV = Texture.WRAP_ADDRESSMODE; let sprite = new Sprite2D(tx, ...); But if you really want to have WRAP_ADDRESSMODE, you can do as following: let sprite = new Sprite2D(tx, ...); sprite.texture.wrapU = Texture.WRAP_ADDRESSMODE; sprite.texture.wrapV = Texture.WRAP_ADDRESSMODE; And the sprite will be filled with texture. The workaround is fairy simple, but I want to know the logic behind that solution - texture settings override in constructor. @Nockawa
  4. Is there any possibility to set custom color in Sprite2D? For now there is only opacity property.
  5. Rectangle2D.dispose() creates a WebGL error

    Hi, I have 4 sprite2D buttons in an array. They are the only visible sprites on a canvas, but not the only one (several with opacity 0). If I dispose of 3 among the 4 everything is fine. elements2D.levelButtons[0].dispose(); elements2D.levelButtons[1].dispose(); // elements2D.levelButtons[2].dispose(); elements2D.levelButtons[3].dispose(); But if I dispose of all of them webGL throws a warning on a couple of render() - i'd say around 100 engine.render(). During those render any call to add primitives is not taken into account, resulting in a slight delay. Then, without any reason the warnings stop and calls to render and modify sprite are taking into account and rendered. babylon.2.5.max.js:7685 WebGL: INVALID_OPERATION: drawElements: no buffer is bound to enabled attribute Engine.draw @ babylon.2.5.max.js:7685 Rectangle2DRenderCache.render @ babylon.2.5.canvas2d.max.js:8864 Group2D._renderTransparentData @ babylon.2.5.canvas2d.max.js:8415 Group2D._groupRender @ babylon.2.5.canvas2d.max.js:8287 Canvas2D._render @ babylon.2.5.canvas2d.max.js:13009 (anonymous) @ babylon.2.5.canvas2d.max.js:11954 Observable.notifyObservers @ babylon.2.5.max.js:3605 Scene.render @ babylon.2.5.max.js:18697 (anonymous) @ catch-the-wolf-mri.js:653 Engine._renderLoop @ babylon.2.5.max.js:7166 requestAnimationFrame (async) Tools.QueueNewFrame @ babylon.2.5.max.js:4878 Engine._renderLoop @ babylon.2.5.max.js:7173 requestAnimationFrame (async) Tools.QueueNewFrame @ babylon.2.5.max.js:4878 Engine._renderLoop @ babylon.2.5.max.js:7173 requestAnimationFrame (async) Tools.QueueNewFrame @ babylon.2.5.max.js:4878 Engine._renderLoop @ babylon.2.5.max.js:7173 requestAnimationFrame (async) Tools.QueueNewFrame @ babylon.2.5.max.js:4878 Engine._renderLoop @ babylon.2.5.max.js:7173 I have no idea where it is coming from. It is not due to the fact that they are in an array, if I add another unrelated button to the scene I can dispose of the four rect without warning. This is my function creating the button, but I am not sure it is coming from that, I sometime had the same behavior when using dispose() in other contexts. var addButton = function (stateManager = mandatory(), options = null) { return new Promise(function (resolve, reject) { if (typeof stateManager._parent.parentTaskObject === "undefined") { throw new Error("stateManager.addButton: stateManager._parent.parentTaskObject is undefined"); } var baseOptions = { id: "button" + stateManager.timeInMs, text: "text", x: 50, y: 50, width: 100, height: 50, fill: BABYLON.Canvas2D.GetSolidColorBrush(new BABYLON.Color4(0.8, 0.8, 0.8, 1)), clickEventData: null, fontName: "30pt Arial", baseOpacity: 0.8, hoverOpacity: 1 }; options = _.extend(baseOptions, options); var elements2D = stateManager.getGlobal("elements2D"); var canvas = elements2D.canvas; // create button and add to canvas var buttonRect = new BABYLON.Rectangle2D({ parent: canvas, id:, x: options.x, y: options.y, width: options.width, height: options.height, fill: options.fill, roundRadius: 0, children: [ new BABYLON.Text2D(options.text, { fontName: options.fontName, marginVAlignment: "v: center", marginHAlignment: 3 }) ] }); buttonRect.opacity = options.baseOpacity; // Add an observable for hovering buttonRect.pointerEventObservable.add(function (d, s) { buttonRect.opacity = options.hoverOpacity; }, BABYLON.PrimitivePointerInfo.PointerOver); buttonRect.pointerEventObservable.add(function (d, s) { buttonRect.opacity = options.baseOpacity; }, BABYLON.PrimitivePointerInfo.PointerOut); // Add an observable for clicking if ((options.clickEventData !== null) && (options.clickEventData.constructor === EventData)) { buttonRect.pointerEventObservable.add(function (d, s) { options.clickEventData.happenedAt = stateManager.timeInMs; = buttonRect; stateManager.addEvent(options.clickEventData); }, BABYLON.PrimitivePointerInfo.PointerUp); } resolve(buttonRect); }); }; Did that happen to someone else ? Any clue ? To circumvent the problem I create a 1*1 pixel button with opacity 0 at position 0,0 and that allows me to dispose() all the real buttons without error. Thanks !
  6. Hi all, I want to create a Sprite2D and it's image can make some effect like grayscale. So I consider using CustomProceduralTexture to implement it. My pseudo code is like below (the shader is just basic one not grayscale): let sampleTexture = new BABYLON.Texture("img/sample.png", scene, true, false, BABYLON.Texture.NEAREST_SAMPLINGMODE); BABYLON.Effect.ShadersStore["TestPixelShader"] = "precision highp float;\n" + "varying vec2 vUV;\n" + "uniform sampler2D sampleTexture;\n" + "void main(void) {\n" + "gl_FragColor = texture2D(sampleTexture, vUV);\n" + "}\n"; let procedualTexture = new BABYLON.CustomProceduralTexture("custom", "Test", 1024, scene); procedualTexture.setTexture("sampleTexture", sampleTexture); let sprite2d = new BABYLON.Sprite2D(procedualTexture, { options... }); Is my idea workable? Or do I need using another ways to implement it? Thanks!
  7. Hello everyone, I am newbie in BabylonJS. When I study the playground example of Sprite2D, I have a question about invertY setting at Texture and Sprite2D class. The texture constructor sets invertY to false at the line 5, and the Sprite2D constructor sets invertY to true at the line 11. Does it mean that player.png caches in texture like the below, so the Sprite2D constructor needs to set invertY to true? And why Texture invert a picture automatically? Thanks.
  8. Scaling Sprite2D

    Hey ! I was wondering (instead of sleeping) if the scaling behavior for sprite2D is working OK. I have this strange behavior: Scale 1 position(0,0) Scale 0.5 position (0,0) How to know the correct position on the screen after scaling ?? The code: var texture = taskObject.cloneAssetIntoScene(taskObject.assets.faceTexture, scene); var ts = texture.getSize(); var sprite = new BABYLON.Sprite2D(texture, { parent: canvass, id: "sprite1", x: 0, y: 0, invertY: false, spriteSize: ts, scale: 0.5, spriteLocation: new BABYLON.Vector2(0, 0) }); Thanks!
  9. Hey, I was wondering if actualSize was intended to give the size after scaling ? Is there a way to get the actualSize after scaling ? For now im using this : var spriteSize = new BABYLON.Vector2(sprite.size.width, sprite.size.height); var scaledSpriteSize = spriteSize.scaleInPlace(sprite.scale); It would be nice to have access to the original size, and the scaled size in separate properties... Also, I was wondering what you think about making vector2 and size function compatible, meaning Vector2.subtract(Size) would work... some kind of abstraction object that transforms every vector/size into a true vector of the same dimension but without the unit (x, width etc...). This would allow for a more fluid development, no @Deltakosh @Nockawa ?
  10. Sprite2D sets the size to (0,0) by default

    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 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 = {}; }, 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 =; if (SmartPropertyPrim._checkUnchanged(curVal, val)) { return; } // Cast the object we're working one var prim = this; // Change the value, 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 !