Search the Community

Showing results for tags 'canvas2d'.

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 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 60 results

  1. Hello, I am struggling with a memory leak which migth be related to Canvas2D fillText function. There is already a bug report available: However I wonder if anyone of you also experienced this bug and might have a workaround for this? Thanks in advance. Best, benny!
  2. I can write texts on "billboard style" mashes in any combination of text and background colors. However, I cannot figure out how to do it when wrapping text. For text wrapping I've used a code I've seen on this forum and on Stackoverflow and it works fine. However, it uses direct functions of WebGL and that apparently collides with the usage of BABYLON.JS objects (not surprising as it goes underneath the Babylon layer). So, I can draw text In white, but not in black. I'm sure it can be done, but I'm fighting it the whole morning without succes, Please have a look into this playground example (I've isolated it from the rest of my application). To see the meshes, double click on the canvas. Thanks very much in advance.
  3. Hi guys, I'm trying to make 2D-shapes / 2D-sprites in my Canvas2D (ScreenSpaceCanvas) follow some sprites which are placed in my 3d world. For this, I'm using the BABYLON.Vector3.Project function as followed: However, this is the result: I've checked each of the arguments and they all contain valid values at the time of being called. I've also stumbled across this topic, which uses another 4th argument in the call, but I've had no luck trying it with that one either. Any ideas? Thanks in advance!
  4. Is there any ways to draw outline for them? I know I can have multiple Text2D beneath it and act like "border". I'm just wondering if there's any better way of doing that.
  5. I downloaded the new version from, and I checked all of the components. However, when I tried to then use the BABYLON.WorldSpaceCanvas2D constructor, I received an error. In fact, the whole Canvas2D system has disappeared. Apparently, the Canvas2D feature was moved to the extensions. Please: 1) Provide a download link for the Canvas2D extension 2) Return the documentation for the extension to the docs. Thank you!
  6. Hi guys, I'm creating an UI for my babylon game via the Canvas2D, precisely the ScreenSpaceCanvas2D. Now I want to know if it's possible to update the text dynamically without recreating/overwriting the text2d child every time the score variable (which is used for displaying) is updated. Playground link for simplified case: Thanks in advance!
  7. I want to draw a texture on the line that user draws on the screen. Like a mouse trail, so I follow this tutorial. . The only thing that doesn't answer me is sending the custom uv to the shaders. I vaguely remember that in C++, I can create struct or something and the shader will know how to handle it. It seems that is not the case here. I can't even figure out how does "index" property in vertex shader gets there. Even so, I can't use the "index" approach as the line won't be full rectangle as in the example. Right now, I copied & pasted the entire lines2d classes and try to customize to be able to draw texture on there, but I don't know how to send the custom uv that I've calculated to the shader. Anyone can explain that to me? Or am I looking at this a wrong way?
  8. Simple question: How do I update a primitive property which is part of a canvas2d instance? (Specifically isVisible, haven't checked other properties yet). Open up console, try setting child.isVisible to false, note it's always true. I dug around in the codebase, but couldn't figure out: 1. if this is a bug 2. if I'm doing something wrong that is causing the property to be frozen (pretty sure not the case anymore since I was able to reproduce what I was seeing in my project in playground above). 3. if there is a way to clear the cached property, what is the appropriate public method to do so with, and can I run a dirty check on the entire thing or do I need to flush each specific property I want changed? @Nockawa
  9. Hello, Trying out Canvas2D, getting: 'BABYLON.Text2D is not a constructor' Using alpha version ('babylon/babylon.3.0.0-alpha.max.js'). Did anything change, or is extension needed? Thanks!
  10. Hi, So... my problem is a bit specific. I will try to reproduce it in the playgroud but I am not sure I will be able to. So I have a Rectangle2d that holds 4 rectangle2d children, the green background is the parent square and the children square are the 4 grey rectangles. I am using the centering and margin system: I used to dispose of those rectangle children and recreate them at certain points in time, storing the newly created children in the same array replacing the hold ones. The problem is that when I resize the window there is a call to Prim2DBase._updatePositioning that returns (NaN, NaN) as the _actualPosition (in the if (hasMargin) ... which they do). And it cause the parent and all its children to disappear from the screen. That's why i though it was linked to the bug @Wingnut mentionned yesterday. There are several variables that are NaN, one of them is Prim2d._size3... but i do not know why, nor do I see where it is define (I only see one definition that sets it to zero... I will look tonight into the typescript source to see if it is there...). This does not happen if I do not dispose of the children prim2d... I had problems with Prim2d.dispose() before, and looking at it, I do not see where the prim2d is actually set to null. Maybe that is the problem? Some kind of persistant reference that interferes with the computation of the rectangles. I will look more into it, but if it is something people have encountered I am interested to know their thoughts. @Nockawa <3 For now I am not disposing of the prims anymore
  11. Slow FPS remains even after prim.dispose()

    Hi, Just to report that on the example given in the documentation: Increasing the number of primitive slows down the fps, but when reducing that number fps stays low even after dispose(). I don't know it if was reported before, and I did not remember this behavior last time I checked this example... @Nockawa
  12. Hello everyone, I'm trying to get a label system which could work like I'm using the 3ds max exporter to export the meshes and I wanted to use the pivot point as a base to place the label. Maybe there is a better way to do it. When I create my Group2D (containing a line, rectangle and text) and set the trackNode property to use the mesh, I can see that the pivot point is not used. It looks like it might not event been exported (I attached the file) since the pivotMatrix is null. Maybe I'm missing something ? Infos.babylon
  13. I am struggling with a similar problem like in this thread, but the solution provided here seems not so ideal... I have many modules in my game, and if I use Babylon.js in any of those, I import it using: import Babylon from 'babylonjs' So there isn't any good way to include Canvas2D similarly? I understand it is somehow baked to Babylon.js, but how do I use it? I'm downloading all the dependencies from the npm, including Babylon.js. Then I bundle everything using Webpack. Ideally, I would like to use Canvas2D (for example) like this: import Babylon from 'babylonjs' import Canvas2D from 'babylonjs' Please help, I've been scratching my head for hours now...
  14. Group2D trackNode error

    Then it goes bad. Duplicate labels end up everywhere,Here is an image when I rotate the camera ! var ui = new BABYLON.ScreenSpaceCanvas2D(scene); var radioUi=[] for(var i=0;i<meshes.length;i++){ radioUi[i] = new BABYLON.Group2D({ parent: ui, trackNode: meshes[i], children: [ new BABYLON.Rectangle2D({ id: "mainRect", x: -5, y: -5, width: 10, height: 10, fill: "#abe2ffFF", border: "#0090ffFF", borderThickness: 3, roundRadius: 5, }) ] }); }
  15. babylon.2.5.canvas2d.js problem

    Hello everyone and thank you all for babylonjs according to this console : there is a bug both library are the same version 2.5 Can it explain blank canvas from visual studio? The NuggetManager only provide 2.3... babylonjs but canvas2D at all Kind regards, But I may be wrong of course
  16. Hello every one, I try to reproduce some feature from and here I am I cannot get my canvas2D to have some kind of billboardmode As you can see, I ended copy pasting most of the first playground properties into the second one with no result so far It seems that trackNodeBillboard expect a boolean according to babylonjs github but I may be wrong parenting the canvas2d to sphereM (biggerbox) does not follow the move, I don't know what I'm doing wrong Thanks to all of you
  17. This post might interest @royibernthal @MasterK @TMTH and @adam I think. Most of you have reported issues with using scale/origin and the positioning engine, I've looked to these issues and then to my code and I finally ended up wondering if what I'm currently doing is the right way and also if there's a right way to do things. Ok, let's be a bit clearer, for now, here's how things work: You create a Prim, set its margin, marginAlignment, origin, scale, rotation During the pre rendering phase I compute the position/size of this prim based on the margin and marginAlignment properties Then, I compute the globalTransformation matrix using the position computed by the positioning engine, the rotation, the scale (both considering the origin). The thing is the rotation/scale/origin are processed after the positioning engine. So let's take some example to illustrate the consequences of that If you set a scale of 0.5 and align center the prim the result will be as expected if the prim's origin is 0.5,0.5, because the scale shrink the prim at its center so the align center is still good because there's the same amount of pixel shrunk to the left and right (let's just consider the X axis, the same apply to the Y). If the origin is 0,0, then the Prim shrink related to its bottom/left corner, so all the pixels that are shrunk will be on the right of the prim, hence resulting to a bad align center. If you set the scale to 0.5 and align left, then the result will be good if you set an origin of 0,0 and it will be bad for other values (0.5,0.5, 1,0, etc.), if you think about it a bit, you will understand why and realize it makes sense considering the current implementation of things. Now I could solve this issue by changing my code with the following: applying the scale to the prim before doing the positioning, the positioning engine would center the prim with its actualSize: after the scale was applied. I first thought it would be the right solution: apply scale and rotation (in respect of origin as always) before the positioning engine, but now consider this: You create a prim with origin 0,0, align it at left and then make it spin by increment its rotation each frame. The result is a prim that rotates around its left/bottom corner (imagine the motion, the prim doesn't rotate around its center, but rotation forming a large circle with its right/top corner). How will the align left behave in this situation? I mean I can code it, it's easy, but the result would be weird, don't you think? At least I do, I don't think it as a solution... So what is the solution? That's my question for you guys and I need your input/feedback/thoughts, anything. Would the solution be applying the scale before the positioning and the rotation after, would it make more sense? I already have two scales internally: one you know about and a "post" scale I had to introduce to fix a bug reported by @TMTH where a Sprite with a SpriteSize of 64 and a Size (display size) of 100 was not positioned correctly, because I was changing the scale to 1.5 (roughly) for the sprite to be 100 on screen and it was bad because scale was considering origin and I needed a scale that wasn't, so I've introduced a postScale, computed at the very end. Anyway, I could introduce a third scale, (a second for the user), which would be a preScale and that would be applied before everything, I think it would solve @royibernthal issues. But I don't know if it's clever to expose to the user more than one scale property. So basically, I need to know what you guys want when positioning is used with primitive rotation/scale, because now that's what is missing: a behavior, a model that fits any needs. So please take the time to think about it as much as needed, give me Use Cases, propose solution if you can, anything! Thanks
  18. Character width calculation is wrong for not mono-spaced fonts. Error is here (BMFontLoaderTxt._buildCharInfo): if (xadv) { width = xadv; } Character width is not always equal to xadv. Try to export Arial from BMFont and look to number characters (48-57) When rendering, wrong part of texture is taken for character. @Nockawa
  19. Sprite2D expects that underlying texture may not be loaded on sprite2d creation. It waits for texture to load, and everything is working fine. But the same problem can arise with Text2D, when using custom font, embedded into css/html. When Text2D object is created, it tries to create font texture, using supplied font parameter. But that font has to be loaded, and that is the process that takes time. So there is no font to use. In Firefox it leads to rendering Text2D objects without any text at all, soft page refresh fixes it. In Chrome one of the system fonts is used instead of required font. Soft page refresh doesn't not fix it, you have to recreate Text2D object. @Nockawa, is there any work around for this? UPD: One can use Bitmap font, that do know about loading time, and waits for underlying texture to load. But is that the only way to deal with the problem?
  20. Using Canvas2D with npm

    Hello. I am using babylonjs with npm for build my application. But npm distribution does not contains packages for canvas2d extension. It there some way to use canvas2d extension with npm? Thanks.
  21. Here is PG. When using designSize on canvas alignment properties are unusable. There are two different use cases: 1. I manually position primitive on some point. I expect it's position to be uniformly scaled from design size to real rendering size. That one is working. 2. I do not position primitive, but I set primitive alignment. Let it be marginHAlignment = BABYLON.PrimitiveAlignment.AlignRight. In that case I expect this primitive to be stuck on the right side of the rendered canvas. That case is not working. So, building real UI I have a problem. I can build UI panels using absolute positioning, and it will be OK, but how can I position those panels? Suppose I want one panel to be on left side of the canvas, and one on the right side - not so complex high level layout. Left one will be positioned fine, but with positioning right one I will have a problem. Big one. @Nockawa, is there any work around for this?
  22. 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
  23. Canvas2D npm package missing

    If I look at and inside the provided babylonjs-2.5.0 npm package, I observe that I have no way to access the Canvas2D project’s API. I think the babylonjs npm user should publish a Canvas2D package so that we can use it in webpack projects and I think this should be published by the official babylonjs npm user. Thanks!
  24. Here is PG: case 1. I have primitive with default fill that is not null. When I try to change that fill (on click), everything is OK. case2. I have primitive with default fill that is null. When I try to change that fill (on click): case 2.1 if I use "BABYLON.Canvas2D.GetBrushFromString" to produce IBrush object nothing happens case 2.2 if I use "new BABYLON.SolidColorBrush2D" to produce IBrush object nothing happens, but second click will change the color. Is it a bug or designed feature? (@Nockawa)