GameMonetize Posted July 1, 2016 Share Posted July 1, 2016 Yep I'm aware of this one. We will use the Canvas2D to display debug info Dal 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted July 3, 2016 Share Posted July 3, 2016 Ok, back to talking about me me me. hehe http://babylonjs-playground.com/#DIF54#5 Ok, here, I did what I mentioned earlier. I figured that IF I want a gold border around "bottom"... I need to put IT... into a rectangle2D of its own (insideRect). In this demo, we can see that it works perfectly... except... BROWSER CRASHER (For ME, anyway.) IE or FF... just RUN that playground again, and it crashes the browser! COOOOL! I'm SO proud when I get-to crash browsers. Update: Ok, the problem was in line 15. The parent parameter needed to be 'rect' and not 'canvas'. http://babylonjs-playground.com/#DIF54#6 Now she's workin' real nice. Yay! You can actually REMOVE the parent parameter from that sub-rectangle2D, too: http://babylonjs-playground.com/#DIF54#7 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted July 3, 2016 Share Posted July 3, 2016 For fun, I decided to try a WorldSpaceCanvas2D instead. (line 2) It requires slightly different parameters, so I adjusted those, and then I backed-out the camera, and there it was, but viewed on-edge. I needed to pan the camera to see it. I set auto-rotate for camera alpha-orbit axis (Y)... some kind of delay happening... not sure why. Still learning. Fun, though. http://babylonjs-playground.com/#DIF54#8 There will be a short delay... before the WorldSpaceCanvas2D "comes-around" to our way of thinking. It seems we have to wait... AS IF the plane-like panel... were a box. The delay... is a wait for our camera-panning to pass an invisible side of the "box" (which we thought was a plane). Interesting! In theory, and likely in actuality, the panel is invisible exactly 50% of the time. Notice how the primitives don't respect the line 4 rounded corners? They render themselves out to the full corners. That's cuzzzz... it's a rounded-corner FILL, painted into a square container. errr... something... illusion! Fun eyeball foolery. From what I can see, so far, Nockawa's magic machine will SURELY become the defacto standard for most webGL JS frameworks. It is THAT good. SO many things have been taken into consideration... it's just amazing. Canvas2D has nothing but open skies and clear sailing ahead... and we should be honored to have it for our use. Thanks Nockawa... amazing work. Really. Did you see the new forum thread that asked about putting shader material into a rectangle2D? *nod* I was too scared to try a reply. Quote Link to comment Share on other sites More sharing options...
FlashyGoblin Posted July 6, 2016 Share Posted July 6, 2016 @Nockawa It looks like the Playground isn't rendering any Canvas2D examples. Here is the PG link for the Animated Sprite2D example from the Canvas2D homepage:http://babylonjs-playground.com/#20MSFF#16 The console shows the following: loader.js:4Duplicate definition of module 'vs/languages/javascript/javascript' babylon.js:3 BJS - [18:43:02]: Babylon.js engine (v2.5-alpha) launched babylon.js:25 ERROR: Couldn't detect the size of the Property topLeftUV from type object. Property is ignored. babylon.js:25 ERROR: Couldn't detect the size of the Property sizeUV from type object. Property is ignored. babylon.js:25 ERROR: Couldn't detect the size of the Property textureSize from type object. Property is ignored. babylon.js:25 ERROR: Couldn't detect the size of the Property properties from type object. Property is ignored. babylon.js:4 'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead. Quote Link to comment Share on other sites More sharing options...
FlashyGoblin Posted July 6, 2016 Share Posted July 6, 2016 @Nockawa Regarding the transparency. When I load a Sprite2D into a WorldSpaceCanvas2D, any transparency in the image gets darkened. This is the image I'm loading into a Sprite2D: This is what it looks like when the canvas.backgroundFill is set to white: This is what it looks like when the no canvas backgroundFill is set (transparent). Shows other elements in my scene: You'll notice that on the no backgroundFill image, that the transparency on the white is darkened. I hope that makes sense. Any thoughts on how transparent images render? Thanks so much!! Quote Link to comment Share on other sites More sharing options...
jerome Posted July 7, 2016 Share Posted July 7, 2016 wait for some days please, I know that nockawa is currently moving and has no internet connection for now Quote Link to comment Share on other sites More sharing options...
FlashyGoblin Posted July 7, 2016 Share Posted July 7, 2016 8 hours ago, jerome said: wait for some days please, I know that nockawa is currently moving and has no internet connection for now Thanks for the heads up! Quote Link to comment Share on other sites More sharing options...
Nockawa Posted July 7, 2016 Author Share Posted July 7, 2016 18 hours ago, FlashyGoblin said: @Nockawa It looks like the Playground isn't rendering any Canvas2D examples. Here is the PG link for the Animated Sprite2D example from the Canvas2D homepage:http://babylonjs-playground.com/#20MSFF#16 The console shows the following: loader.js:4Duplicate definition of module 'vs/languages/javascript/javascript' babylon.js:3 BJS - [18:43:02]: Babylon.js engine (v2.5-alpha) launched babylon.js:25 ERROR: Couldn't detect the size of the Property topLeftUV from type object. Property is ignored. babylon.js:25 ERROR: Couldn't detect the size of the Property sizeUV from type object. Property is ignored. babylon.js:25 ERROR: Couldn't detect the size of the Property textureSize from type object. Property is ignored. babylon.js:25 ERROR: Couldn't detect the size of the Property properties from type object. Property is ignored. babylon.js:4 'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead. Hi, thank you for reporting, I know what's going on I'll fix it right away. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted July 7, 2016 Author Share Posted July 7, 2016 19 hours ago, FlashyGoblin said: @Nockawa It looks like the Playground isn't rendering any Canvas2D examples. Here is the PG link for the Animated Sprite2D example from the Canvas2D homepage:http://babylonjs-playground.com/#20MSFF#16 The console shows the following: loader.js:4Duplicate definition of module 'vs/languages/javascript/javascript' babylon.js:3 BJS - [18:43:02]: Babylon.js engine (v2.5-alpha) launched babylon.js:25 ERROR: Couldn't detect the size of the Property topLeftUV from type object. Property is ignored. babylon.js:25 ERROR: Couldn't detect the size of the Property sizeUV from type object. Property is ignored. babylon.js:25 ERROR: Couldn't detect the size of the Property textureSize from type object. Property is ignored. babylon.js:25 ERROR: Couldn't detect the size of the Property properties from type object. Property is ignored. babylon.js:4 'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead. Looks like it's fixed FlashyGoblin 1 Quote Link to comment Share on other sites More sharing options...
FlashyGoblin Posted July 7, 2016 Share Posted July 7, 2016 20 hours ago, FlashyGoblin said: Regarding the transparency. When I load a Sprite2D into a WorldSpaceCanvas2D, any transparency in the image gets darkened... @Nockawa I have more insight on this issue to help locate the bug. It seems that all alpha rendering, even on other meshes (outside of the Canvas2D) can be effected. I have a plane with a loaded texture and the following settings so that it supports alpha and is self illuminating ... var reticle = new BABYLON.Mesh.CreatePlane("outterReticle", 1, scene); reticle.renderingGroupId = 3; // always render on top var reticleMat = new BABYLON.StandardMaterial("reticleMat", scene); reticleMat.diffuseTexture = new BABYLON.Texture("reticle-outter.png", scene); reticleMat.emissiveTexture = reticleMat.diffuseTexture; reticleMat.opacityTexture = reticleMat.emissiveTexture; reticleMat.diffuseTexture.hasAlpha = true; reticleMat.specularColor = new BABYLON.Color3(0, 0, 0); // disables the specularity reticleMat.emissiveColor = new BABYLON.Color3(1, 1, 1); // force material to be self illuminating reticle.material = reticleMat; Then when I add a Text2D primitive to the Canvas2D, the plane's alpha gets darkened like the previous examples from my earlier post. var textLabel = new BABYLON.Text2D("Test", { parent: canvas, id:"textLabel", fontName: "32pt Rajdhani-Semibold", scale:.8, defaultFontColor:new BABYLON.Color4(1,1,1,1), marginAlignment: "h: center, v: center", alignToPixel: true }); I wish I could create a Playground so I can demonstrate, but the Playground doesn't allow loading cross domain files. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted July 7, 2016 Author Share Posted July 7, 2016 1 hour ago, FlashyGoblin said: @Nockawa I have more insight on this issue to help locate the bug. It seems that all alpha rendering, even on other meshes (outside of the Canvas2D) can be effected. I have a plane with a loaded texture and the following settings so that it supports alpha and is self illuminating ... var reticle = new BABYLON.Mesh.CreatePlane("outterReticle", 1, scene); reticle.renderingGroupId = 3; // always render on top var reticleMat = new BABYLON.StandardMaterial("reticleMat", scene); reticleMat.diffuseTexture = new BABYLON.Texture("reticle-outter.png", scene); reticleMat.emissiveTexture = reticleMat.diffuseTexture; reticleMat.opacityTexture = reticleMat.emissiveTexture; reticleMat.diffuseTexture.hasAlpha = true; reticleMat.specularColor = new BABYLON.Color3(0, 0, 0); // disables the specularity reticleMat.emissiveColor = new BABYLON.Color3(1, 1, 1); // force material to be self illuminating reticle.material = reticleMat; Then when I add a Text2D primitive to the Canvas2D, the plane's alpha gets darkened like the previous examples from my earlier post. var textLabel = new BABYLON.Text2D("Test", { parent: canvas, id:"textLabel", fontName: "32pt Rajdhani-Semibold", scale:.8, defaultFontColor:new BABYLON.Color4(1,1,1,1), marginAlignment: "h: center, v: center", alignToPixel: true }); I wish I could create a Playground so I can demonstrate, but the Playground doesn't allow loading cross domain files. Weird, because I save/restore all the settings... What kind of texture do you need to make the test? maybe you can post the file and @Deltakosh could upload it on the webserver. Quote Link to comment Share on other sites More sharing options...
adam Posted July 7, 2016 Share Posted July 7, 2016 2 hours ago, FlashyGoblin said: but the Playground doesn't allow loading cross domain files. https://crossorigin.me/ Temechon 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted July 8, 2016 Share Posted July 8, 2016 Quote Playground doesn't allow loading cross domain files. this is not playground limitation but server side limitation. We cannot do anything on client side Quote Link to comment Share on other sites More sharing options...
Wingnut Posted July 9, 2016 Share Posted July 9, 2016 Hi guys... sorry to interrupt flow. @Nockawa, at this page, the link to Layout and Positioning dedicated doc, is 404. The .md exists, but not the .html, and I think it is because "Canvas2D_Prim_Positioning" is not seen in statics.json. I know you're pretty busy right now, and I DID think about adjusting statics.json FOR you, but... I decided to pass-it-on, instead. Later, I'll give all your C2D docs a thorough proofread, if you want. I'm a little behind in my docs duties, currently. Maybe this belongs in PM and not in announcements thread. Direct me, as wanted. Hope you're well. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted July 9, 2016 Author Share Posted July 9, 2016 2 hours ago, Wingnut said: Hi guys... sorry to interrupt flow. @Nockawa, at this page, the link to Layout and Positioning dedicated doc, is 404. The .md exists, but not the .html, and I think it is because "Canvas2D_Prim_Positioning" is not seen in statics.json. I know you're pretty busy right now, and I DID think about adjusting statics.json FOR you, but... I decided to pass-it-on, instead. Later, I'll give all your C2D docs a thorough proofread, if you want. I'm a little behind in my docs duties, currently. Maybe this belongs in PM and not in announcements thread. Direct me, as wanted. Hope you're well. Many thanks for reporting this. I've made the changed and submit the PR. Wingnut 1 Quote Link to comment Share on other sites More sharing options...
adam Posted July 9, 2016 Share Posted July 9, 2016 I think I found a bug with padding: http://babylonjs-playground.com/#DIF54#9 I'm unable to add padding to the top or right of the canvas. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted July 10, 2016 Author Share Posted July 10, 2016 8 hours ago, adam said: I think I found a bug with padding: http://babylonjs-playground.com/#DIF54#9 I'm unable to add padding to the top or right of the canvas. @adam in the example you provide you can see the background rect is offseted of 50 pix from the bottom/left corner of the viewport, which is the default behavior because bottom/left is the origin. What is not expected is the background rect which should have all its edges 50 pixels from the viewport's edge. Is this what you were expecting/trying to achieve? Quote Link to comment Share on other sites More sharing options...
adam Posted July 10, 2016 Share Posted July 10, 2016 5 hours ago, Nockawa said: Is this what you were expecting/trying to achieve? Yes. This is not urgent though. I was just playing around with the example and noticed that it wasn't working as I expected. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted July 10, 2016 Author Share Posted July 10, 2016 25 minutes ago, adam said: Yes. This is not urgent though. I was just playing around with the example and noticed that it wasn't working as I expected. Ok, I filled a bug to make sure I remember to fix it, thanks for reporting! Quote Link to comment Share on other sites More sharing options...
Nockawa Posted July 10, 2016 Author Share Posted July 10, 2016 @FlashyGoblin I didn't forget about your issue, but I think it's not an easy one and I don't have time right now to concentrate on important issues. I've filled a bug to make sure I remember it. Try to post the texture you use in this thread it will be very useful because I need to repro the issue locally to debug/fix. Thank you! (my moving back to my house is about 60% complete right now, lol, I think I could take a break at 80% and I'll be able to code a bit) Quote Link to comment Share on other sites More sharing options...
Nabroski Posted July 11, 2016 Share Posted July 11, 2016 @adam just a note. crossorgin.me is to slow to load .babylonfiles. i need to to tweak the playground to get it to work. Quote Link to comment Share on other sites More sharing options...
adam Posted July 11, 2016 Share Posted July 11, 2016 If your .babylon file isn't huge, you can copy it into the PG like this: http://www.babylonjs-playground.com/#OCCLB#9 Nabroski 1 Quote Link to comment Share on other sites More sharing options...
FlashyGoblin Posted July 12, 2016 Share Posted July 12, 2016 On 7/10/2016 at 9:26 AM, Nockawa said: @FlashyGoblin I didn't forget about your issue, but I think it's not an easy one and I don't have time right now to concentrate on important issues. I've filled a bug to make sure I remember it. Try to post the texture you use in this thread it will be very useful because I need to repro the issue locally to debug/fix. Thank you! (my moving back to my house is about 60% complete right now, lol, I think I could take a break at 80% and I'll be able to code a bit) @Nockawa I posted the texture I used in comment above ( http://www.html5gamedevs.com/topic/22552-canvas2d-is-coming-to-town-well-24-beta-at-least/?do=findComment&comment=135210 ) . Thanks!! Good luck with your move!! Quote Link to comment Share on other sites More sharing options...
Nabroski Posted July 13, 2016 Share Posted July 13, 2016 @FlashyGoblin can you share a playground ?http://www.babylonjs-playground.com/#1LXS2T#1 texture:http://www.babylonjs-playground.com/textures/palm.png Quote Link to comment Share on other sites More sharing options...
Ner Posted July 26, 2016 Share Posted July 26, 2016 @Nockawa When I use BABYLON.Sprite2D , zOrder doesn't work,,but it works in BABYLON.Text2D & BABYLON.Rectangle2D. How can I fix it ? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.