• Content Count

  • Joined

  • Last visited

  1. Ok, I get now where the blacks are coming from. I think I will start a new topic with a broader question of how to approach my goal, thanks so far :))
  2. The Canvas is transparent by default (https://stackoverflow.com/questions/4815166/how-do-i-make-a-transparent-canvas-in-html5), I confirmed this by right click saving and I got a transparent png. So I still don't understand where this extra color information comes from (my guess would be from the code that creates the texture from the Canvas). The way I see it, the canvas has alpha and color info and I want both of those values, so I'm not sure what you mean by 'you need to use only the alpha info without the color'. Maybe that is the solution though. Create a canvas, save it to a image element, and then use that to create a texture. quite messy, but it just might work.
  3. I am finding more reasons to figure out a way to do this, can anyone help? Summary of what I want: - draw to Canvas context, text and shapes of varying colors - use texture in such a way that both color info and partial alpha values are preserved - without having leftover color values that don't belong (like black values in above example) - without using multiple Planes (this is how I do it now, but if you stack them too close strange things happen) Thank you so much for helping.
  4. that is clear, thank you. useAlphaFromDiffuseTexture works well to create nice half alpha pixels, I definitely missed that. I am still wondering where these part-black pixels are coming from then, now that the alpha is working. updated example with useAlphaFromDiffuseTexture: https://playground.babylonjs.com/#O4OXG#26 (orange square is just there to make the black pixels more clear) how I would like it to look, but without using opacityTexture (if this is possible of course!): https://playground.babylonjs.com/#O4OXG#25 I'm seriously loving Babylon so far and thanks for the quick responses.
  5. I still think it's strange that you can't directly use the alpha values, at least not without also taking the black background pixels that have no business being there :). I think you now need a texture layer for each color you want to draw on the canvas (at least if you want anti aliasing, which seems wise if you want any image quality). Edit: Am I correct that hasAlpha doesn't work as expected? it seems to round alpha values to 1 or 0, that is why my original example looks so weird. Can someone explain why that is? That would also make it hard to display regular non-square sprites.
  6. Nice one. With your help I figured it out: https://playground.babylonjs.com/#O4OXG#25 we paint the diffuse texture completely text color, which gets rid of the left over black pixels in your version. I don't think you can get the orange rectangle in there without making more textures, but I think that is fine. Thanks mate!
  7. Hi! I am very new to Babylon. I am hoping to switch to Babylon for a game that's already well underway after trying two other engines. I am really liking it so far! For now my game is a lot of 2D and one of my requirements is nice text rendering (which I haven't found in the other engines). https://playground.babylonjs.com/#O4OXG#16 I want to render text on Planes like that, with dynamic backgrounds. This is how for I got with what I want (my camera will be straight facing and stationary) but as you can see if you zoom in, the canvas text's alpha values are mixed with black. The orange part is how I want it to look, but of course that is not a dynamic background. How can I preserve those alpha values coming from the Canvas? Thanks a lot!
  8. Yeah, I figured that might be the case. That at least explains why it would be slower in this case. I still don't see why performance would need to go down though. Are we keeping all cached sprites around forever by default? What would be the reason for keeping old ones around at all? Maybe if we switch between a couple of same texts, but at that point I would just swap visibility on multiple instances which could be way faster anyway. I am mostly just curious at this point
  9. I would say you could use alpha = 0 to get clickable areas. Rearranging layers seems like a strange way to hide things. Right now I'm working around it by setting x and y outside the screen, at least then I don't have to remember previous order which can become very complicated if you have many layers. I just have to remember previous x/y which is not relative.
  10. I'm sorry that was confusing! I should have made an example: this is for the invisible issue (issue posted in title i hope to get around to as well): game.module( 'game.main' ) .body(() => { game.createScene('Main', { init: function() { var container = new game.Container(); container.addTo(this.stage); var graphics = new game.Graphics(); graphics.drawRect(100, 100, 100, 100); graphics.interactive = true; graphics.buttonMode = true; graphics.addTo(container); container.visible = false; } });
  11. Also I think invisible Views can itself still get the hand icon, which looks really strange Let me know if you like these kinds of posts, or maybe you want me to post them elsewhere? I hope I can help you to make improvements.
  12. perormance of this example goes to zero asymtotically but runs very smooth when cache=false: same thing if you create new Text every update. var text: any; game.module( 'game.main' ) .body(() => { game.addAsset('font.fnt'); game.Debug.enabled = true; game.createScene('Main', { init: function() { text = new game.Text('', { font: 'font', cache: true }); }, update: () => { text.setText(Date.now()); } });
  13. Thanks for the pointer Wolfsbane. At least it might help enpu. For me, I have already worked around it in my own code for the most part, I ported from a Pixi project, so I already had to abstract away lot of the game engine at that point. That said, it would be nice if I could remove that work around code at some point
  14. it's the same issue, Text extends Container, so if you give Text a positive x/y value, x and y get added to the width and height of the Text.
  15. Hi enpu, I'm struggling a lot with container dimensions, also the dimensions of Text instances is wildly unpredictable making it hard to center anything. It also makes any mouse interaction problematic. Do you already have an idea where this bug is? I took a look at the _getBounds function of Container, but it doesn't seem to be directly on the surface. Anyway, can you let me know when you found it, even if it's not in a release yet? Thanks, mise