Search the Community

Hi, I'm on Pixi current days. I was so amazed when I saw this animation : https://art4globalgoals.com/en So, I tried to clone the brush masking effect. I succeed to make a mask, make brush effect. The problem is that, I can't remove current brush sprite. I tried to console log my app, stage, renderer, but I can't find where my sprite is registered (sorry for the terminology, Im wondering im using right terminology).... Also, is there any way to trigger dragging event? , above the link, there seems to appear brush scratch effect automatically, but is there any idea about this? ```` import * as PIXI from 'pixi.js'; import { Point } from '@pixi/math'; const screenSize = { width: window.innerWidth, height: window.innerHeight }; let brushWidth = (window.innerHeight / window.innerWidth) * 150; let brushHeight = (window.innerHeight / window.innerWidth) * 200; const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: window.devicePixelRatio, autoDensity: true }); document.body.appendChild(app.view); app.loader .add('background', '/jpeg/mask.jpeg') .add('mask', '/png/effel-gray.png') .add('bristle1', '/png/brush6.png') .add('bristle2', '/png/bristle2.png') .load(() => { setup(); }); const setup = () => { const brushTexture = app.loader.resources.bristle1.texture; const brush = new PIXI.Sprite(brushTexture); brush.width = brushWidth; brush.height = brushHeight; brush.anchor.set(0.5,0.5); const backgroundTexture = app.loader.resources.background.texture; const maskTexture = app.loader.resources.mask.texture; const background = new PIXI.Sprite(backgroundTexture); background.x = app.renderer.screen.width / 2; background.y = app.renderer.screen.height / 2; background.anchor.x = 0.5; background.anchor.y = 0.5; background.width = window.innerWidth; background.height = window.innerHeight; const mask = new PIXI.Sprite(maskTexture); mask.width = app.renderer.screen.width; mask.height = app.renderer.screen.height; mask.x = app.renderer.screen.width / 2; mask.y = app.renderer.screen.height / 2; mask.anchor.x = 0.5; mask.anchor.y = 0.5; mask.width = window.innerWidth; mask.height = window.innerHeight; app.stage.addChild(mask); app.stage.addChild(background); const renderTexture = PIXI.RenderTexture.create(app.screen.width, app.screen.height); const renderTextureSprite = new PIXI.Sprite(renderTexture); app.stage.addChild(renderTextureSprite); background.mask = renderTextureSprite; app.stage.interactive = true; app.stage.on('pointerdown', pointerDown); app.stage.on('pointerup', pointerUp); app.stage.on('pointermove', pointerMove); let dragging = false; const originVector = new Point(1, 0); let vector; function pointerMove(event) { if (dragging) { brush.position.copyFrom(event.data.global); const originPos = { x : event.data.global.x - window.innerWidth / 2, y : -(event.data.global.y - window.innerHeight / 2) } const vx = originPos.x; const vy = originPos.y; vector = new Point(vx, vy); vector = normalizeVector(vector); const dotProd = (vector.x * originVector.x) + (vector.y * originVector.y); const angle = Math.acos(dotProd); const rotationMatrix = new PIXI.Matrix() rotationMatrix.rotate(angle); brush.rotation = angle; app.renderer.render( brush, { renderTexture, clear: false }, false, null, false ); } } function pointerDown(event) { dragging = true; pointerMove(event); } function pointerUp(event) { dragging = false; brush.width = brushWidth; console.dir(app.renderer) app.renderer.managedTextures[4].destroy(); } window.addEventListener('resize', () => { screenSize.width = window.innerWidth; screenSize.height = window.innerHeight; app.renderer.resize(window.innerWidth, window.innerHeight); app.renderer.stage.width = window.innerWidth; app.renderer.stage.height = window.innerHeight; }); }; const getMagnitude = (x , y) => { return Math.sqrt(x*x + y*y); } const normalizeVector = (vector) =>{ const magnitude = getMagnitude(vector.x , vector.y); vector.x /= magnitude; vector.y /= magnitude; return vector; } `````

I'm totally new to pixijs and to game development in general. I need a help in fixing this error in devices that use canvas if webGL is not available. Im using projection plugin and it is seems like the error is from projection.sprite2d. I am researching about the issue and found PIXI.CanvasRenderer.registerPlugin but don't know how to use it. please help I'm stuck with this issue. TIA

Hi All. Maybe it seems strangely but how I can before use scale9 for sprite2D, scale this sprite without scale9 and after that applying to this sprite scale9? Why I need this? For optimization! I have canvas size 1280x720, then I am make the size for this canvas 640x360 and scale = 2 and for all sprite2D objects on this canvas I set scale = 0.5 and in results we have few resolution for canvas and good quality for all sprite2D objects. But some sprites uses scale9 and if I set scale 0.5 for this sprites, then this sprites at once uses scale9 but I need use just scale 0.5 and after that apply scale9. This is what I get if scale of canvas = 1 and the button scaleX = 1.5, scaleY = 1 (uses scale9) But what I get if scale canvas = 2 and button scaleX = 0.75, scaleY = 0.5 (uses scale9) Need to apply scale 0.5 as original scale and then apply for a new size of sprite the scale9 grid. How I can to do this? Thanks!

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: https://drive.google.com/open?id=0BxggOFF8_iXkb3JRRjg0YkJtRzQ Here is a playground, on the playground it is the BOTTOM 0.5px that get cutoff.. http://babylonjs-playground.com/#20MSFF#64

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: http://babylonjs-playground.com/#1RJPAB 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.

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

Is there any possibility to set custom color in Sprite2D? For now there is only opacity property.

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: options.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; options.clickEventData.data.button = 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 !

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!

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.

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!

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 ?

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 !