Canvas2D Main Post

GameMonetize · July 1, 2016

Yep I'm aware of this one. We will use the Canvas2D to display debug info

Wingnut · 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

Wingnut · 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.

FlashyGoblin · 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.

FlashyGoblin · 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!!

jerome · July 7, 2016

wait for some days please, I know that nockawa is currently moving and has no internet connection for now

FlashyGoblin · 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!

Nockawa · 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.

Nockawa · 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 · 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.

Nockawa · 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.

adam · July 7, 2016

2 hours ago, FlashyGoblin said:

but the Playground doesn't allow loading cross domain files.

https://crossorigin.me/

GameMonetize · 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

Wingnut · 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.

Nockawa · 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.

adam · 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.

Nockawa · 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?

adam · 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.

Nockawa · 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!

Nockawa · 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)

Nabroski · 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.

adam · 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

FlashyGoblin · 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!!

Nabroski · 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

Ner · 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 ?

Canvas2D Main Post

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Nockawa

Nockawa

Nockawa

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members