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
    • 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 31 results

  1. Hi guys. Pinging @Nockawa for this one. I've been working him hard, lately, and I want to thank him for all the recent help. Today I am thinking about borders. Well, I HAVE been thinking about borders for quite some time, but those borders were international borders. Now, about Canvas2D primitives borders. Currently, I think there are only a few ways to make a Canvas2D based border. 1. Rectangle2D 2. Shape2D 3. Sprite2D. Each CAN be used to place a border around a Text2D, or just about anything else. But none of these bordering methods... automatically size-to-fit their contents, right? Perhaps that is reserved for a layer above the currently-completed "base" of Canvas2D. At what point do we "assemble" the FitBorderedText2D and FitBorderedGroup2D? In fact, for maximum-easy bordered tracked-node labeling, I could use a FitBorderedTrackingText2d. It seems strange and clumsy to need Group2D for node tracking, Rectangle2D for text border, and then Text2D... just for a single label. Anyway, I saw mention-of allowing trackNode for WorldSpaceCanvas itself (future feature). That is allowing trackNode on a "higher level" than Group2D. (WSC2D is higher level than a Group2D child of it.) What are the chances of allowing trackNode on LOWER level things... such as Text2D or Rectangle2D? What are the chances of allowing border on Text2D and Group2D? You see, a FitBorderedTrackingText2d... would have a border and trackNode... without needing any help from Rectangle2D or Groupd2D. Potential lines-of-code savings across 10 years of Canvas2D usage - 2 million metric tonnes. Am I de-primitiving the primitives? (i.e. FitBorderedTrackingText2d is a "combo" of primitives, and therefore would be offered on the next layer - the GUI Lib currently under dev?) Perhaps part of a Canvas2D Tools thing... programmer assistance? Of course, programmers can do this "combining" themselves in a little makeLabel() function. But still, I'm curious if Noxxy has any plans for "SuperText2D" features like this. Thoughts, anyone? Thx.
  2. Hello good people of the babylon.js community! Update #12 from January 11th, 2017 Few announcements: We can now use BMFont to render text with Text2D PG here the documentation of the Text2D was update to explain the different techniques you can use to render text (normal, Super Sample, Signed Distance Field, BMFont) and which one you should use. (Thanks @MasterK for the idea and help) There's a new page about how the Rendering is working, it will help people to understand how to get transparent sprites, for instance. (this page is currently only accessible by the link I gave before, because I've messed up the link in the Canvas2D Homepage, yeah, that's my special ability, DK loves it) Some new Playgrounds are available at the bottom of the Home Page I was ill during the release of the 2.5, so I couldn't update the doc and the what's new, so I've updated the what's new of the documentation web site, go take a look if you want. As a separate module, Canvas2D has its own section in the What's New. Update #11 from January 5th, 2017 Long time that I didn't develop new features but here we go: AtlasPicture is now supported, see the documentation about it. Scale9Sprite is a new feature of Sprite2D class.The Sprite2D documentation was also updated. You can play with the following PG: Scale9Sprite AtlasPicture Of course you can use Scale9Sprite for a Sprite generated from an AtlasPicture. Update #10 from October 21th, 2016 allow3DEventsBelowCanvas Until now, pointerEvent occurring above a ScreenSpaceCanvas were also sent to the 3D Scene, many people (rightfully) complained about this so I decided to add the feature, which is called "allow3DEventsBelowCanvas" (which is false by default). The PR is here for more info (preview files updated and PG not updated so far). You have to realize that this is a change in behavior, now by default events won't be sent to the 3D Scene if they occurred above the Canvas, but I figured it made more sens this way. If you want them to be sent anyway, just set the setting to true! Update #9 from October 19th, 2016 Stabilization The latest weeks were spent on keeping stabilizing the Canvas2D feature, fixing bugs and adding feature only when necessary. Overall bug fixes were concerning Positioning Engine (alignment), StackPanel Layout Enigne, pointerEvent observable (leave/out now works better), some dispose issues solved, you're supposed to have no more opacity/transparency issues (well, let's say, "less"). One new feature One new feature was developed recently, during the creation of a ScreenSpaceCanvas you can now specify the renderingPhase setting, allowing you specify for which camera and which renderingGroup the Canvas is supposed to be rendered to. Simpler version: you can now interleaved 3D layers (which are renderingGroup) with 2D layers (which are ScreenSpaceCanvas). Many people requested it ( @MasterK, @HenryPeng, @stormwarestudios) to render 3D content above UI for FX (particles) or simply some 3D preview (like a 3D character preview in a UI). This playground is a very raw demonstration of the feature. Modularization Oh, by the way, I nearly forgot to tell something pretty important: we have recently extracted the Canvas2D feature (and the forthcoming GUI Lib first code lines) from the main babylon.js file. This is the first step of what is going to be a modularization of babylon.js, Canvas2D/GUI being obvious (and easy) candidates. What is changes for you? Well, not that much, if you use C2D/GUI you now have to use the "babylon.canvas2d.d.ts", "babylon.canvas2d.max.js", "babylon.canvas2d.js" that are sitting next to the "babylon.js/d.ts/max.js" files in the "dist" directory of your choice (right now only the "preview release" directory contains the Canvas2D related files, for obvious reason. The module's name is still "BABYLON", which will ensure you'll compile without changing anything. On a repository point of view, the source code was moved from /src/Canvas2D to /canvas2d/src/. Our lovely boss made the move and the Gulp config to compile everything the same way babylon.js does so you don't be lost. La surprise du chef! And the "chef" is not me, but another core member @Temechon spent some very valuable time (and I can't thank him enough for that!) to work on a feature I desperately need for so long but that I'm unable to code (well, in the time frame it will took me) which is called: c2dinspector.js. Basically the c2dInspector is a HTML Pane that is added on the right side of your HTML pane and that displays all the Canvas2D instances in your Scene (well, Engine to be more accurate) and their content as a tree of Primitives. You can select a given Primitive to see its details on the Detail Plane below, you can even change some values (still work in progress). In the tree, for each item there're two icons at the very left, an "eye" to show/hide the prim, and a "double frame" which is used to show/hide the debugDisplayArea (more on this below). This feature will help you (and me!) debug and understand better what's going on and why! It's not released yet, but a beta will be very soon (tonight or tomorrow), it's still Work in Progress, but hey, it's better than nothing and it won't harm you. The debugDisplayArea (the only thing I coded, bugs are to expect!): as you may know a primitive has four area: layout, margin, padding and content, this feature will display them with a given color code (layout being light red, margin is yellow, padding is magenta, content is cyan). This screenshot below is the same UI as above but with the debugDisplayArea on the "GUI Visual Placeholder of MainWindow", which has a margin of 50, 50, 50, 50 (the yellow area shows it) and padding of 100, 100, 100, 100 (the magenta area show it). The content in blue is the Windows' background, in light grey, which is here covered by the blue area. GUI Library I've started the GUI Library, it's going on very well, but I just can't work as much as I wanted on it the last couple of weeks, so there's delay: that's life. There's a separated thread about the GUI here so don't expect me to say more in this post, got watch the other thread if you care about it. That's all folk, enjoy, as usual: feedback are welcomed, you can do it in this thread of course! I just don't want this thread to be a "bug tracker" one, if you have issue, keep creating a new post and don't forget to mention me as I don't look at the forum everyday to see if someone needs help (but DK does, happy him...) Update #8 from August 31, 2016 I pushed a new commit today that address many things around using Scale on the Canvas object directly. I'm lazy so I copy/paste the PR description: You can now set a Scale (or ScaleX/Y) to a Canvas2D object, it will render as expected, for every caching strategies. At creation time of a ScreenSpaceCanvas you can set a designSize which will be used to compute the Canvas' scale automatically in order for you to specify absolute coordinate in the frame of the designSize (MasterK request) Any Cached Renderable Group can have a new GroupCache Behavior: GROUPCACHEBEHAVIOR_NORESIZEONSCALE. When set the cached bitmap for the Group won't be resized when the scale of the group will change, improving performances over rendering quality Ellipse, Rectangle are now drawn with a prescale computation to ensure the best result when using high/low scaling Prim2DBase has not the actualScale and actualScaleX/Y property that return the accumulated scale of the primitive. At their creation, primitives can specify if they should not inherit from the scale of their parent through the dontInheritParentScale setting. I don't know if many of you will get the GROUPCACHEBEHAVIOR_NORESIZEONSCALE and find a usage, but I thought it was the time or never to do it, so I did. And it works pretty well. I think for mobile gaming it may help to improve the perf by setting/keeping a fixed resolution of what's being rendered into a Cached Renderable Group2D. The designSize mode was made upon a request from @MasterK and it's really a good idea, I can see the use case from a game UI point of view and I hope it will work the way it should be, otherwise I'll do bug fixing! If there's no more urgent thing I'll go back on my working list and the next thing (that was already started but paused) is supporting the Device Pixel Ratio, which is another big thing for mobile gaming I think. I will be a breaking change for people who are right now "compensating the lack of this feature", but well, I'm sorry, there's nothing I can do about it except I wished I knew more about HTML few months ago! I know most of you are still trying to understand how things work with the Canvas2D and don't have time to try and use different Caching Strategies (and then rely on the DONTCACHE mode). Truth is the other modes were pretty bugged, they are less bugged now, but I'm not sure it's working the same. To solve this matter I'm revamping my whole "Unit Test" project, which was a local thing and not as powerful as it should be. There are so many different combination to test a given Use Case against: the different Caching Strategies, the support of the Instanced Array and with different Device Pixel Ratio values. I have to find time to put a good Unit Test framework and publish the whole stuff once it's done, because I think it will help all of you to discover the many things you can do and how. When this will be done then I think I'll start the true "why I did this": a GUI Library based on Canvas2D, with the UI Controls you all are waiting for. The foundation of Canvas2D is getting more and more stable so I think it will be soon the right time to start it and it will be the perfect chance to fix dozen of bugs, I'm sure of it! Update #7 from August 13th, 2016 @ Legoland, Billund, Denmark The latest fix is a long ongoing one noticed by @FlashyGoblin concerning transparency of Sprite2d. To make a long story short: I mixed up the implementation of AlphaTest and AlphaBlend (aka Transparency), the result were...well ugly...and you couldn't do things like the one FlashyGloblin ran against. So here are the new ground rules about this: I try to behave the same way the 3D Engine StandartMaterial does, so people familiar with it will catch things up pretty quickly. One noticeable difference is that useAlphaFromTexture is true by default. There are three render modes: Opaque, Alpha Test and Transparency (Alpha Blend). If you don't use Alpha in a Brush or a Texture and the Opacity is 1, the primitive is rendered in Opaque mode If you use Alpha in a Brush, if you set BaseTexture.hasAlpha to true in a Texture your primitive uses or if the Opacity is not 1, then it will be either Alpha Test if useAlphaFromTexture is false or Transparency if it's true. Beware: until now you didn't have to set hasAlpha for a Sprite2d to deal automatically with transparency, this is no longer the case! With the latest version your Sprite2d will be rendered as Opaque if BaseTexture.hasAlpha is set to false (which is the default value no matter what your bitmap stores). To sum up Text2d is set as a Transparent primitive to ensure a proper blending. Shape2d based primitives will be either opaque or transparent based on Opacity and Alpha in their Brushes. Sprite2d can use the three modes, the default behavior being Opaque if the texture has hasAlpha to false or Transparent if it's set to true and you can use useAlphaFromTexture to switch to Alpha Test. Update #6 from 15 June 2016: babylon.js 2.4 is out! I took the time to finish the overview/tutorial documentation. I also updated the playground and use the BABYLON. prefix everywhere it was needed (which mean I removed the alias like "var Scene = BABYLON.Scene") in order for you the user to copy/paste more easily. The documentation entry point is: (with all the playgrounds at the bottom of the page). The architecture/design doc is: Please, I've also created a PRO for the Canvas2D feature in Slant, for those who think it's a great addition to babylon.js, please follow this link and upvote, this work is on my spare time so fame is my only reward! thanks! Update #5 from 13 June 2016: new features added and also a lot of little bug fixes This version is supposed to be the "first official release", there were breaking changes with the previous ones, most notably: You don't use the public static CreateXXX method to create a primitive, you can now use the constructor, the parent is an optional parameter in the settings object (see sample below). At construction you can use a settings object that contains many many properties that you can set as you wish, some are somewhat overlapping (e.g. there's size, width and height, you set either the first or the two latest). This was designed to bring you some flexibility. You won't certainly notice, but the location of a primitive will always be relative to its bottom/left corner, regardless of the origin you set. This change was necessary to bring something coherent and understandable when alignment/layout comes into play. You have to use the actualPosition and actualSize properties to get the "real" values. position/size properties are the value before layout/positioning takes place. New features: This new creation mode allows you to cascade the creation of objects (see below). You'll see that Brushes can now be initialized with a string to make the code more simple. The same is true for margin/padding/alignment. You will find example in some playgrounds, doc will come asap. Lines2D now fully support intersection/picking, as well as roundedRectangle. The size of a primitive is now optional, if omitted it will be sized to its content bounding box. (the same behavior as Group2D) Margin, Padding, Alignment is introduced, you can play here. Margin/Padding support units in pixels or percentage, the value can be inherited from its parent or simply be automatic (0) A LayoutEngine feature now allows to position/size the primitive, by default it's the CanvasLayoutEngine that is assigned to all primitives, unchanging the behavior you already know. But I've made in few minutes a StackPanel Layout that you can test here (don't forget to CTRL-F5 your web browser to fetch the latest .js file) By the way, there's a new playground for Transparency testing. Update #4 from 03 June 2016: new features added and also a lot of little bug fixes intersection works better on Lines2D, I now support every Cap types, it's also accurate on rounded Rectangle (if you click on the empty zone create by the rounding corner it won't generated a hit). interaction mode can now be enable in WorldSpace Canvas, you can take a look at this PG for an example: I've also added a alignToPixel property in Sprite2d to make sure the rendering of the sprite will be aligned to the render target device pixel, is ensure the best rendering quality, but in rare case of slow animation you would probably want to turn it off to ensure smooth animation. by default it's on. I won't detail it too much here because it need proper doc to be fully understood, but now you can give your own WorldSpaceNode to render a WorldSpace Canvas on something else that a simple Plane mesh. This mode is easy if you don't use Interaction, but if you do, you have to give a method that compute the world space intersection with your mesh and then compute the local position in the Canvas of the resulted intersection. This is not the simplest method to code but you have an example with the current implem for Plane World intersection to Canvas. Update #3 from 25 May 2016: new features added Breaking changes in the API: concerning the way to create Canvas and Primitives, now it's using the same signature than other object in babylons.js, with an options{} json object for optional parameters. There are default value each time it's possible. Including many bug fixes and little features improvements. We have two new primitives: Ellipse2D and Lines2D. I worked hard to dev a nice Lines2D primitive and I hope you will like it! A full Overview Documentation is now online, the main entry page is here:, from this page you'll be able to access to every others pages of the overview doc and also all the playgrounds I've made so far. The reference documentation is now online for the 2.4 you will find documentation for about 80% of the Classes/public methods. Update #2 from 19 May 2016: new features added Lots of little bug fixes, I hope everything will be ok with the origin property, nesting primitives, the text render is way much better now than before. Interaction is supported! There's an pointerEventObservable property in Prim2DBase for you to be notified about many things concerning interaction with a pointer (mouse, touch, pen). I've also added the support of the ActionManager, it's the same as Mesh and Sprite. I support all triggers exception Intersection and KeyUp/Down. Animation is supported too! You have the animations property in the base class of a Primitive for you to add animation the exact same way you would do for the scene objects. Update #1 from 16 May 2016: added link in the Documentation section to a new tutorial that explains how to write your own primitive types Original post I am very pleased to announce you a new feature I've been working on for weeks now! Well, to put things simply, Canvas2D is...a 100% WebGL 2D Engine! It may sound strange at first but I really thought it was missing to this lib, all started from the time I realized I couldn't efficiently display text in babylon.js. So I started to work on a new feature to do so and one thing led to another and I realized we could use of a real 2D Engine for many things! It's not related to the HTML Canvas Element at all, Canvas being a generic term (like Rectangle, for instance). I've called it Canvas2D because the main class controlling the feature is called Canvas2D and acts as its name suggest: you can draw 2D content inside. For performance reason the rendering is 100% WebGL your graphic card loves to do these kinds of things if you spend the right amount of time to create a good rendering engine. Developing such 2D Engine wasn't an easy task because I wanted to lay strong foundations to allow it grows decently through time. Future will tell if I did well or not! At last, for a better understanding this features serves the same purpose than Pixi.js, but the intent were slightly different: Pixi.js relies on two rendering engines (HTML Canvas or WebGL Canvas), but the Canvas2D relies only on WebGL, because it's made to be used along with a 3D Scene, which requires WebGL anyway. Primary focuses while designing the feature: fast, flexible and hopefully easy to contribute. Concerning the "fast" if your device support the WebGL Instanced Array extension, you should be really pleased with the result, the engine was designed to work with this extension (even though if it also works without). I think I overall did well although if there's still room for improvement. Basically, how does it work? You can create many Canvas2D instance on a given Scene, you have two kinds of Canvas: ScreenSpace: the canvas is displayed above the 3D Scene, in 2D space, like you would expect See this example. But there's another interesting mode: WorldSpace:the canvas is displayed in a 2D Rectangle as a part of the 3D Scene, you setup its position, rotation and scale, like a Mesh (well, it's in fact a Mesh of a Plane). See this example. When you want both Performance and Flexibility Things get a little technical! When you create a Canvas you have to choose a Caching Strategy. Why? Because depending on what you will do with it you may use different rendering strategies. CACHESTRATEGY_DONTCACHE: easy, nothing will be cached, all Group2D are called "logical" and the whole content is redrawn every render. If you have few things or if it always change, you may use this mode. It's also the most stable right now. CACHESTRATEGY_TOPLEVELGROUPS: my favorite! Only Group2D that are direct childs of the Canvas will be cached and considered as RenderableGroup, their children Group will be logical only. If you have some On Screen GUI to display at the different corners of your Viewport, this mode may be the best for you. CACHESTRATEGY_CANVAS: Well, the whole Canvas is put into a cache, you better avoid this if you create a Canvas with the size of the Viewport because a texture/depth buffer will be allocated with the size of the viewport. Note: this is actually the only mode that can be used with World Space Canvas. (the other at the exception of DONTCACHE will follow later). CACHESTRATEGY_ALLGROUPS: this is the most technical one, sound brute force at first, but its the opposite: the most complex one. Potentially every groups are Cached, but in reality for each Group you create you can set a CacheBehavior which states if: The Group follows the cache strategy (then be cached), It won't be cached (then rendered every time) or If it's cached in the nearest Cached group parent. This mode has been elaborate to allow the creation of GUI controls being part of a complex canvas with a lots of Depth and diversity. As for today, this is the least tested one, be indulgent. A canvas is made of Primitive: this is the base type, has many property like position, rotation (along the Z axis), scale (uniform), visibility, an origin, zBias (if you're not happy with the default behavior), and a list of children primitives. Group2D: to create a new reference of frame, but also if you wish to cache its content, to avoid redraw at every render. If you have primitives that are most of the time static (or changing sporadically, in response of an event for instance) it'll be well advised to cache them to speed up the canvas rendering. Renderable Primitive: as its name suggest, it's a base class for primitive that render to the canvas, so far: Text2D: to display text. Sprite2D: to display a sprite (a part of a texture if you will). Shape2D: another based class for a 2D Shape made of an optional Border and or Fill content. The Border and Fill Content are drawn using a specific type of Brush, for now SolidColorBrush2D and GradientBrush2D are supported. TileBrush2D (so based on a bitmap pattern) should make its way in the 2.5. So far only the Rectangle is implemented, but it does support roundRadius, which is nice. I think I can implement Ellipsis and Circle in no time, but well, I wanted to focus on the engine first. nPolygon, WireFrame should come later. Vectored based graphics (SVG support) should be a nice addition too. Documentation The tutorial can be found here. An overview of the feature architecture and capabilities can be found here. That's where you'll understand everything you can do and what you can expect in term of performance. A long tutorial to explain how to write your own primitive type can be found here. Few last things My mantra for this feature: by indulgent with the current state of the Canvas2D, but be fearless on the feedback side! I will try my best to fix things as much as possible, I've made already some testing, but nothing will replace the impartiality of the user! I also have some bugs already logged (like don't try to change the origin of a Text2D, the result will be rather funny...and unpleasant) and will fix them asap. Critical features are missing: Group2D and Text2d horiz/vert alignment, more shapes. As well as interaction support through an event system and a better support for animation. I will work on them right away. I don't make promise of what will be there for the 2.4 RTM but I expect everything except animation improvement, really hoping that interaction will make it (edit: also done). A big thanks to the core contributors of the lib for their help: @Deltakosh @RaananW @Temechon @jerome and @Sebavan! I'm waiting for your feedback!
  3. 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 !
  4. Hi everyone I'm wondering why font size and font rendering is so different when comparing `DynamicTexture` and `Canvas2D` side by side. Note: The huge but blurred text is `8px` while the small and crisp text is `32px` Dynamic texture returns the expected result while text rendered in canvas 2d seems to be way too big and blurry. Of course I could use a bigger font size (ie. 8 times the size needed) and then scale it down (`scale: 0.125`). But I'd like to understand what's going on… Any hint much appreciated! Anyone?
  5. Edit: The solution to get Sprite2D with transparent areas working is to set "hasAlpha" on the Texture to "true". --- Hi, I want to use sprites2d (in canvas2d) made from png files that have transparent areas. expected behavior: Transparent areas are rendered transparent actual behavior: transparent areas are rendered not transparent It gets super weird, if I set opacity on the sprite to 0.999 everything works fine. Working, with opacity 0.999 no longer working with opacity 1.0 (or opacity removed): I will use the 0.99 opacity workaround for now., but this seems buggy - I would like my sprite to be rendered according to the alpha channel, and it's weird that this only seems to happen if I set opacity to 0.99. Maybe I missed another property?
  6. Hello, this is my first post here. Firstly I want to say thanks to this community, because almost everything I was trying to work with in babylon, was already really well explained here. I would like to ask a question about making a 2D UI on babylon. At first I saw the bGUI, which was deprecated in favor of Canvas2D... but I cannot make it work. Here is a link to a playground actually working I tried to get the zip and run the same code on my browser and unfortunately it doesn't work. As I tried to figure out what was wrong, I found this in browser console TypeError: BABYLON.ScreenSpaceCanvas2D is not a constructor I think that maybe there is something wrong with the babylon.js version I'm using, but I can't figure it out. Looked as well in the Canvas2D documentation and I (hopefully) didn't miss anything. Thanks for any help
  7. Hi everyone, When I let a Canvas2D primitive to scaling and rotating at the same time, the result of primitive performing is unexpected for me. Like the below code ( let rectGreen = new BABYLON.Rectangle2D({ parent: canvas2d, id: "rectGreen", width: 100, height: 100, rotation: Math.PI * 1 / 4, marginAlignment: "h: center, v: center", fill: BABYLON.Canvas2D.GetSolidColorBrush(new BABYLON.Color4(0, 1, 0, 1)) }); let rectRed = new BABYLON.Rectangle2D({ parent: canvas2d, id: "rectRed", width: 200, height: 200, scale: 0.5, rotation: Math.PI * 1 / 4, marginAlignment: "h: center, v: center", fill: BABYLON.Canvas2D.GetSolidColorBrush(new BABYLON.Color4(1, 0, 0, 1)) }); I want rectRed to perform like rectGreen. What concept of computer graphics I am miss? Thanks.
  8. I have question regarding the tracking of nodes in a scene with canvas2d elements (using ScreenSpaceCanvas2D). It seems that when a node goes behind the camera, the 2d element will initially go out of view, but will eventually re-enter if you keep moving away from the node that it is attached to. An example playground below, which is a very slight modification of a playground from the documentation, demonstrates this. Just pan forward through the cubes (with ctrl + click), and the rectangle2ds initially go out a view, but then come back onto the screen. Is this the desired behaviour?
  9. 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!
  10. Hi folks, @Nockawa As well as making use of the fine Castor.js extension for html based UI, I am wanting to add some webgl UI elements using Canvas2d, specifically mesh labels. I have pretty much got to grips with the basics. However one thing I cannot get to work is changing the visibility of elements at run time. For example allowing the user to toggle labels on and off. I have created a silly demo based on the "labels" playground demo. The red sphere has a label. Hitting the 'Z' and 'X' keys moves the label along the viewport x-axis and this works fine. The ''L' key toggles the .isVisible property of the label but has no effect. Note that this property does work at 'create' time. If you change line 5 to default to 'false' then the label will not be displayed. However then hitting 'L' key does not display it. The key events write to the console log so it looks as though the events are triggering. Am I doing something wrong or is the isVisible not re-read once created? Thanks Richard
  11. hey i seems to have a problem of the tracknode. so i used to example from this playground and i used VRDeviceOrientationFreeCamera. however upon testing, the trackNode doesnt stay at the position of the mesh instead the position seems very off. any idea how to fix this?
  12. Hi I have spoken to @Nockawa already and he suggested I turn to the forums which I agreed with. When using a bundler such as Webpack, the developer imports the the BabylonJS library rather than including it in a script tag. The problem that arises is that Earcut has been defined in it's own namespace and is available only in the babylon.js file or globally when using script tags. However in Webpack each imported module is treated as an isolated scope and doesn't have access to other modules or global variables unless they have specifically been required/provided. Because Earcut is never exported and in it's own namespace it is literally unreachable for module bundlers: > babylon.js defines Earcut module > babylon.js defines and exports BABYLON module > Webpack provides the BABYLON module from babylon.js to all other libraries > babylon.canvas2d.js extends and exports BABYLON module x babylon.canvas2d.js uses BABYLON and Earcut (but Earcut is not provided nor in the same namespace) This leave 2 solutions as I see it: Add Earcut to the BABYLON namespace so that they get exported together and can both be provided by bundlers. Keep Earcut in it's own namespace and export it so that it can be imported by both babylon.js and babylon.canvas2d.js or provided using a bundler. Ping @Deltakosh, moving forward it might be worth looking into npm more. They offer the for example the option to add @next version tag for alphas/betas of packages. I am sure Babylon.JS would benefit from having more users testing/working with the preview build and finding issues. Kind Regards Swiftwork
  13. is it possible to ray pick a rectangle2d in a worldspacecanvas2D? any1 can enlighten me
  14. Nothing crazy, spend a little time on it, - it's art It crashes at some point, a remainder to take a break from coding.
  15. Hey guys, just wondering if there's a way to set the transparency of a Text2D object (or a ScreenSpaceCanvas2D object) after it has been created? I'm assuming this functionality is somewhere but I can't find it or figure it out.
  16. Hi, I am unsure if this is a bug or incompatible with my setup, but I run the latest nightly build of Babylon.js 2.5.0-beta commit 3fe3372 using a repository I set up that fetches the latest preview build and allows me to install it through npm as a package. I am then using Webpack together with Typescript to import the library. I understand that this might not be the standard workflow, but it has been running smoothly for me until the Canvas2D refactoring. So down to the issue: In a simple Javascript setup such as this using webpack for requires, CANVAS2D will fail to run due to the fact that BABYLON is undefined. const BABYLON = require('babylonjs'); const CANVAS2D = require('babylonjs/babylon.canvas2d'); new CANVAS2D.Rectangle2D({}) First I thought it was that my requires were messed up, which turned out to be half true. Webpack had to provide the CANVAS2D module with the BABYLON module, by making the BABYLON module globally available. new webpack.ProvidePlugin({ BABYLON: 'babylonjs', }), However this wasn't the entire issue, due to the fact that the CANVAS2D module is also defined as BABYLON and the first lines of the code overwrite the globally available BABYLON variable with it's own declaration of BABYLON. var BABYLON; (function (BABYLON) { // ... })(BABYLON || (BABYLON = {})); Removing all var BABYLON; in the compiled code fixed my issues, but maybe it might be worth giving Canvas2D its own CANVAS2D module/namespace, if they are now to be treated as separate modules in the repository. Regards Swiftwork
  17. Hey, My code is : var canvass = new BABYLON.ScreenSpaceCanvas2D(scene, { id: "ScreenCanvas", backgroundFill: "#C0C0C040", backgroundRoundRadius: 50 }); I was wondering if this resize behavior was normal, when the canvas is set up it fills the whole screen, i can resize it down with the window, but when the wondow gets bigger than the original size the canvas stop resizing : Begining : Smaller: Larger: The position of the sprite changes between the images, sorry if its confusing, its really the limits of the canvas as seen with rounded borders and color that matters. On the larger size, the rounded border disappear on the right: This happens if I resizes down before resizing up. How can I make it resize to the canvas size for larger sizes ?
  18. I need to show some particles on canvas2d, how could i do it?
  19. Hey, It seems using CACHESTRATEGY_CANVAS changes the background color of the canvas: without caching on the left:
  20. I'm trying to wrap my head around the Canvas2D functionality and StackPanel. I'm having trouble figuring out how the layouts work. I modified a playground based on the stack panel example to use a vertical stack panel, but I can't seem to re-position it the way I want. My goal is to get the entire stack panel to center horizontally, and move to the top of the viewport so that the children list downward from the top with the first child at the top (green rectangle). Is the marginAlignment the wrong property to use altogether? I'm sure it is something simple that i'm doing wrong.
  21. 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 ?
  22. Hey everyone I am not sure why but if I create two ScreenSpaceCanvas2D in two different scenes, one of the scenes being shown and not the other (stored in a parent object). The function Canvas2D.prototype._updatePointerInfo is called twice each time I move the mouse, once for the shown Canvas, and once for the canvas that is in the stored scene. Since I did not declare a camera in that stored scene the bit of code in babylon.max.js 44657 : Canvas2D.prototype._updatePointerInfo = function (eventData, localPosition) { ... var camera = this._scene.cameraToUseForPointers || this._scene.activeCamera; ... } return camera as undefined. And later on while the function tries to access camera.viewport it returns an error. This report is not really about solving the bug because if I declare a random camera for the stored scene (like a normal human being not trying to find bugs everywhere) i do not get the error. But I think it was not on purpose that events are captured on a canvas in a scene that is not currently rendered. All in all it is not a real problem for me but it might cause trouble for other people. To change between scenes I use this bit of code /* --- Start the render loop --- */ taskObject.engine.runRenderLoop(function () { taskObject.scenes[taskObject.currentScene].render(); }); This is the call stack for the error: Uncaught TypeError: Cannot read property 'viewport' of undefined @babylon.max.js:44665 Canvas2D._updatePointerInfo @ babylon.max.js:44665 Canvas2D._handlePointerEventForInteraction @ babylon.max.js:44628 (anonymous function) @ babylon.max.js:44549 Observable.notifyObservers @ babylon.max.js:3399 _onPointerMove @ babylon.max.js:15232 It seems the observables are set up at scene creation and down the callback chain there is no test to check wether the scene is currently being rendered (is that even possible?).
  23. Hi guys, I don't know if I'm doing it completely wrong. I'm trying to fade in a Rectangle2D on click, but it looks like the animations get mixed up. I made this simple playground: - If you click quickly on each box, you'll notice the animations go nuts, + the first one doesn't play at all. - If you click really slowly (wait for the duration of the supposed animation) on each box, no animation plays at all. Am I doing it wrong? Thanks
  24. Hi! First time posting. I ran in to an issue I've battled with for a several days. When calling the canvas2d.dispose the error: "Uncaught TypeError: Cannot read property 'modelKey' of null" sometimes occur. I did a fair bit of research but I don't see that I am calling anything incorrecly. While posting I realised that I can probably circumvent the problem by creating a "RepositionGUI" function but I would like to understand the problem. In the example the error occurs in chrome after the button is pressed. <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!--- link to the last version of babylon ---> <script src="babylon.2.5-alpha.js"></script> <style> html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #renderCanvas { width : 100%; height : 100%; touch-action: none; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <script> window.addEventListener('DOMContentLoaded', function() { // get the canvas DOM element var canvas = document.getElementById('renderCanvas'); // load the 3D engine var engine = new BABYLON.Engine(canvas, true); var scene; var canvas2d; var createScene = function() { scene = new BABYLON.Scene(engine); var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene); var cam = new BABYLON.ArcRotateCamera("ArcRotateCamera", Math.PI / 3, Math.PI / 3, 200, new BABYLON.Vector3(-10, 30, 10), scene); cam.attachControl(canvas); scene.executeWhenReady(createGUI); return scene; }; var createGUI = function() { canvas2d = new BABYLON.ScreenSpaceCanvas2D(scene, { id: "ScreenCanvas", enableInteraction: true }); //buttons var button1 = new BABYLON.Rectangle2D({ parent: canvas2d, id: "button1", x: canvas.width /2 - 150, y: canvas.height / 2 , width: 300, height: 80, fill: "#ffffffff", border: "#DADDDEFF", borderThickness: 8, children: [new BABYLON.Text2D("Button 1", { fontName: "32pt Arial", defaultFontColor: new BABYLON.Color4(0.2, 0.2, 0.2, 2), marginAlignment: "h: center, v: center", fontSuperSample: true })] }); var text1 = new BABYLON.Rectangle2D({ parent: canvas2d, id: "text1", x: canvas.width /2 - 125, y: canvas.height / 2 - 300, width: 250, height: 80, fill: "#e4e4e4ff", border: "#DADDDEFF", borderThickness: 8, children: [ new BABYLON.Text2D("Text 1", { fontName: "24pt Arial", defaultFontColor: new BABYLON.Color4(0.2, 0.2, 0.2, 2), marginAlignment: "h: center, v: center", fontSuperSample: true }) ] }); var text2 = new BABYLON.Rectangle2D({ parent: canvas2d, id: "text2", isVisible: false, x: canvas.width /2 - 125, y: canvas.height / 2 - 300, width: 250, height: 80, fill: "#e4e4e4ff", border: "#DADDDEFF", borderThickness: 8, children: [ new BABYLON.Text2D("TempText2", { fontName: "24pt Arial", defaultFontColor: new BABYLON.Color4(0.2, 0.2, 0.2, 2), marginAlignment: "h: center, v: center", fontSuperSample: true }) ] }); /*specific button function*/ button1.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger, text1, "levelVisible", false)); button1.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger, text2, "levelVisible", true)); }; // call the createScene function scene = createScene(); // run the render loop engine.runRenderLoop(function() { scene.render(); }); // the canvas/window resize event handler window.addEventListener('resize', function() { engine.resize(); canvas2d.dispose();//this is not working, some of the canvas is not disposed, textfield disapears bottommenu does not createGUI(); }); }); </script> </body> </html>
  25. I'm just starting out with getting to grips with Canvs2D. I'm using it to make a GUI I'm having a problem with my GUI buttons. I have meshes that you can interact with by clicking on and a GUI in front. If I try to click on one of my GUI buttons while a mesh is behind it the mesh is picked as well. Is there a built-in way to get around this?