• Content Count

  • Joined

  • Last visited

About Nodragem

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Do you know how to upload files (I need a texture and JSON file) on the PG?
  2. No, it does not work either 😕 but good try!
  3. Yep, maybe it is not exported... just to clarify, it does exist according to the doc:
  4. Hello, I am trying to make an helper to load my shaders using a json file (linking to the fx files and textures). For now, I am using this interface to read my json: interface TextureDefinition { refName:string, path:string, wrapU:string, wrapV:string } interface ShaderDefiniton { refName:string, path:string, attributes:string[], uniforms:string[], textures: TextureDefinition[] } But I just realised that the attributes, uniforms and many other options are already part of IShaderMaterialOptions . Hence I could take into account all shader options by using this interface: interface TextureDefinition { refName:string, path:string, wrapU:string, wrapV:string } interface ShaderDefiniton { refName:string, path:string, options:BABYLON.IShaderMaterialOptions, textures: TextureDefinition[] } However, I get the following error: Am I not accessing IShaderMaterialOptions from the right place? I tried BABYLON.Material without any more success...
  5. Hello, @Deltakosh and I opened an issue on Github to discuss how we could implement NinePatch support for the GUI: This will allow us to have resizeable 2D textures for containers, rectangle, button as demonstrable here (using However we could not agree on how the NinePatch texture creation should be handled by BabylonJS; hence we decided to bring the discussion here. @Deltakosh wants to provide the data to set-up where the image is stretchable/fixed through code, while I promote the idea of using Android and libGDX methods where the data is stored directly in the image. Set the stretchable parts of the NinePatch in code The code would look like that: BABYLON.GUI.createNinePatch("./img/mytexture.png", SliceLeft, SliceRight, SliceTop, SliceBottom) While the image look like that: Set the stretchable parts of the NinePatch directly in the texture (as in Android's NinePatch): The code would look like that: BABYLON.GUI.createNinePatch("./img/mytexture.9.png") While the image looks like that (note the black pixels which encode where the image is stretchable): The left column and the top row of pixels encode where the image is stretchable while the right column and the bottom row of pixels encode the padding for the content (e.g. text). Disagreement I believe that the last solution is elegant as it keeps data separated from code logic, and allows easy editing in a simple image editing app (MS Paint!), however @Deltakosh believes that this is a hacky solution and does not like it very much . My suggested solution I start to think that both methods should be implemented as well as a third method Let me explain. My thinking is that libGDX is a great game engine and they faced the same issues we will face when they implemented NinePatch. And I believe that to copy their solution will be a good place to start. See: As I undertstand it from the link above, LibGDX provides three ways to create a NinePatch: Method 1: Set the stretchable part of the NinePatch in code Method 2: Set the stretchable parts of the NinePatch directly in the texture Method 3: Set the stretchable parts of the NinePatch from a TexturePack As we also would like to implement a TexturePack (Texture Atlas + JSON) support (see, it is worth checking how libGDX dealt with NinePatch support in their Texture Packer. Basically, if I understand well, the NinePatch support in TexturePack is dealt with this way in libGDX: the user defines NinePatch directly in the texture using Method 2 when the NinePatch texture is packed in a TexturePack, the rows/columns that encode stretching/padding information are removed and the information is placed in the JSON file of the TexturePack when the NinePatch texture is imported from the TexturePack, Method 1 is used to apply the stretching/padding information contained in the JSON at runtime Hence, I think that both methods (Method 1 and Method 2) could be supported by BabylonJS for now. What do you think?
  6. Nodragem

    Can we customize the look of BabylonJS.GUI?

    Thank you very much! can't wait to use it! I'm happy to try to do a PR on that.
  7. Using babylonjs 3.3.0-rc.5 and babylonjs-gui 3.3.0-rc.4, CreateAndStartAnimation() expects a Node so that a GUI.Button throws a typescript error: But I am not sure if I am using the function correctly 😕
  8. I don't know if that helps, but I freshly installed the extension on a friend's computer and everything works fine when changing the Camera's tag to MainCamera. However, I did not find time to check if to update typescript would make the extension work on my machine. I let you know if I find some time.
  9. Nodragem

    Slime Quest (mmo demo)

    The close button does not work on Android
  10. Hello, I played around with the CreateAndStartAnimation, and it seems that it only works with Mesh: Here a playground where I show how my TweenHelper could be used: Basically, it helps at creating and playing a group of animation. There is a lot of features that could be added (e.g. apply the same tween to several objects at once, etc...). Note: we could rename it AnimationHelper if needed, but TweenHelper is a good name for two reasons: gamedevs will look for the word Tween (it is a famous name) tweens are animations that only have a start frame, an end frame, and an animation curve; which is what the helper is about.
  11. Nodragem

    Can we customize the look of BabylonJS.GUI?

    Thank you for the tips! Concerning Maybe simpler for the user to have the helpers similar to as: - button.getTextBox(), or button.textBox - button.getImage(), or button.image - button.getShape(), or button.shape (I wanted to say button.getRectangle(), but it might not be a rectangle ... maybe button.getFrame()?) It seems that the button actually work. I start to think that there is something catching the mouse input over my button. the following seems to work: this.button.pointerEnterAnimation = () => {this.button.alpha=1} this.button.pointerOutAnimation = () => {this.button.alpha=0.7} However, it seems that I need to keep a reference of `button` in `this` for it to work. I would have preferred being able to create an actual BABYLON.Animation. I meant changing the font, as in using a different font, such as one downloaded from there: Something like control.fixedRatio = 16/9? with the following API doc: fixedRatio is defined as Horizontal/Vertical, e.g. 16/9, 4/3, etc. A control.fixedRatio = 0 would free the ratio. When width and height are defined, the last to be defined win. Maybe control.forcedRatio is a better name? I don't know.
  12. Nodragem

    Changing the colors of an eye

    I think you can use the PBR material. I am going to do a very wild guess, but maybe this would work: material.albedoTexture = new BABYLON.Texture("assets/2D/grayscale_eyes_texture.jpg", scene); material.albedoColor = new BABYLON.Color3(1, 0, 0); (Basically, replace "diffuse" with "albedo")
  13. True!! But still ... some project do it at each major release; and it is worth observing why and how they do it. I will try to add a pull request. That is amazing! Thank you, can't wait to add it to my menu! ho! I am so bad, I thought it was returning nothing! 😕 I am so sorry to get confused so often. I am going to check if my TweenHelper is still useful then .
  14. Nodragem

    Can we customize the look of BabylonJS.GUI?

    Yes, I think we could add something similar to the following in the API doc: a "height MUST BE 1 when vertical stack" and a "width MUST BE 1 when horizontal stack" so it appears in VS Code when the user is writing StackPanel.height/width. Here my progress with my menu (Left BabylonJS / Right Unity): I have some questions: - Button created with CreateImageWithCenterTextButton(): Can we move the text for precise positioning? (useful for RT/LT) - Button created with CreateImageOnlyButton: no reaction to hover and click? why? - Button: how to change the color for hover / click events - Button: how to change the image for hover / click events - Font: how do change the font? - General: I would like to never use "px" to size my button (B, A, Y, etc). Using proportion is much better as everything resizes based on the device screen size. However, for the button Y, for isntance, if I do "button.height=0.2; button.width=0.2", the button is elliptic, squashed on Y-axis, because the container (the white rectangle) had a width greater than its height. Would it be possible to have an option "controller.fixedRatio = true", so that when I change "button.height=0.2", the width is computed automatically so that the button keeps its original ratio? that would be awesome! - Image: around the same idea as above, can we force a ratio? - Populating a menu: is there a quick way to open a json file without using the AssetManager? I used "import menuData from ""./data/menuData.json" for now. - Clipped by Parent: for people who wondered what I meant previously, I think we can see why I would like to be able to disable the clipped by parent here ! the (play) (A) and (back) (B) buttons, for instance, are attached to the main panel (i.e. there are children of the main panel); and they get cut. Note that it does make sense to attach them to the main panel, in order to align them to the bottom. In any case, I had a lot of fun playing around with BabylonJS so thanks again for this great engine!
  15. Nodragem

    Can we customize the look of BabylonJS.GUI?

    Yes, you are right! I understood how it work now; I did need to divide the size of my items by the number of items.