Nockawa

Canvas2D Main Post

291 posts in this topic

Ok, some update about Scale9Sprite

It can be used with SpriteAtlas/Sheet, whatever the name you use to describe a single texture containing many sprites to display.

For a picture like this one: 

H40VVlM.png

 (please note the red frame is just a representation of the Scale9's box area described by the scale9 setting in the Sprite2d constructor below, it doesn't not appear on the actual picture)

With the following code:

var sprite = new BABYLON.Sprite2D(texture, {
    parent: canvas, id: "sprite1", x: 100, y: 100, invertY: true,
    //scaleX: 2.0,
    //scaleY: 1.5,
    size: new BABYLON.Size(500, 200),
    scale9: new BABYLON.Vector4(122, 18, 169, 39),
    origin: BABYLON.Vector2.Zero(),
});

To enable the scale9 you have to set the scale9 setting which defines the left/bottom right/top corners of the box that will scale.

You can either use size or scaleX/Y to specify the size of your sprite in the Canvas. If it's scaleX/Y the final size will be based from the initial sprite's bitmap size.
In this case the initial sprite is 184x127 but I want it to be 500x200 in the Canvas.

For the code above, you have this result:

OJ9aG9K.png

A Scale9Sprite is rendered with two triangles, the computing of the texture's UV is made in the Fragment Shader to take into consideration of the Scale9 setting, so it's fast, there's not 18 tri and of course if you use a TextureAtlas and render many sprites using this texture, it will be done in one Draw Call if Instanced Array is supported on your web browser.

I will commit this shortly and work on TexturePacker right after, using the JSONArray DataFormat.

If you have comments/feedback about this feature, they're welcomed.

Wingnut and adam like this

Share this post


Link to post
Share on other sites
scale9: new BABYLON.Vector4(122, 18, 169, 39),

i think (0-1) is better. normal situation (0.5, 0.5, 0.5, 0.5) is ok.  estimate is enough.

 otherwise i should check picture size, very trouble.

Share this post


Link to post
Share on other sites
33 minutes ago, MasterK said:

scale9: new BABYLON.Vector4(122, 18, 169, 39),

i think (0-1) is better. normal situation (0.5, 0.5, 0.5, 0.5) is ok.  estimate is enough.

 otherwise i should check picture size, very trouble.

Disagree here; pixel art is created with pixel-integer resolution, then converted to real numbers on rendering in GL. It seems unorthodox to have to convert from pixel to real numbers for artwork, but accuracy should be more desirable.

Share this post


Link to post
Share on other sites

Hi People,

Long time that I didn't develop new features but here we go:

You can play with the following PG:

Of course you can use Scale9Sprite for a Sprite generated from an AtlasPicture.

So @grayger @BitOfGold @jpdev and @MasterK you should be interested about these.

If anybody have question/feedback about these feature, please create dedicated forum topic and mention me, thanks.

Share this post


Link to post
Share on other sites

Hi Nockawa,

This looks great, I'm anxious to apply this to my own game! :-)

I am deep in back-end country, so I will try to check these out as soon as I get past my current task!

All the best,

- Peter

Share this post


Link to post
Share on other sites

Hey guys, 

 

I recently got back to coding using Babylon, and updated the version using NPM. But the canvas2d file is not there, would it be possible to add it to the npm ?

 

Thanks !

Share this post


Link to post
Share on other sites
46 minutes ago, AlbertTJames said:

Hey guys, 

 

I recently got back to coding using Babylon, and updated the version using NPM. But the canvas2d file is not there, would it be possible to add it to the npm ?

 

Thanks !

A PR was submitted and merged to include it, but I don't think we rebuilt a package since. Maybe @Deltakosh or @RaananW can help about this.

AlbertTJames likes this

Share this post


Link to post
Share on other sites

Hello people,

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.

So what now? Well, I try to recover from illness and not going back sick again, so I'm starting to code again, slowly... But I'll do the following things (in order, I guess)

  1. WorldSpaceCanvas with node tracking and billboard ability, for mister @royibernthal
  2. Primitives Intersection Manager for @ller the goal will be to provides at each render a list with for each entry two primitives that intersect. This manager will serve as the foundation for intersection, we will discuss/design/develop more handy stuff on the top of it. If you have idea/feedback/requirement, you can start a topic and mention me! :)
  3. I will try (but I should succeed) to develop a feature to clip the content of a Group2D, apparently it won't be harder to use a Shape as the Clipping geometry (if no shape then the whole rectangle surface will be used) to get more fancy stuff. But @MasterK and other, you will finally be able to develop scroll-view without relying on hacking! I was reluctant to develop this feature not because of its complexity (it's not a walk in the park anyway), but because if it's overused the performances may drop. But well, it has to be done and maybe the perf won't be that bad. For those who are familiar with the Canvas2D Architecture a Group2D that will Clip its content will be turned into a Renderable Group2D and basically I will draw the clipping geometry to the stencil buffer, then I'll draw the Group2D's content with a stencil check to clip away the pixels that are out of the geometry. So in theory: not hard to code...But there are so many cases, rendering types, that well...Future will tell!
  4. I will resume the work on the GUI Lib, I'm motivated as ever to make a good one!

Cheers!

Share this post


Link to post
Share on other sites

nice...

and you didn't say shadow and stroke of text2d... that's common too~~

and multiple color in text... and word-break...

then all hacking will be covered by your official code~~

Share this post


Link to post
Share on other sites

Thanks for the feature. I didn't find any PG for it at the bottom of the home page, is there one anywhere? If not, are there some docs? If not, a small explanation on how to use it please? :)

Share this post


Link to post
Share on other sites
15 hours ago, MasterK said:

nice...

and you didn't say shadow and stroke of text2d... that's common too~~

and multiple color in text... and word-break...

then all hacking will be covered by your official code~~

I'm accepting PR from people, specially the ones I've spent countless hours to dev/fix bugs for them ;)

Share this post


Link to post
Share on other sites
7 hours ago, Nockawa said:

I'm accepting PR from people, specially the ones I've spent countless hours to dev/fix bugs for them ;)

I can say nothing...:ph34r:

But i know that's your joke~ you'll do them yourself right? hahaha....

Share this post


Link to post
Share on other sites
10 hours ago, MasterK said:

I can say nothing...:ph34r:

But i know that's your joke~ you'll do them yourself right? hahaha....

If you have hacks that work, It might not be that difficult for you to clean your code up and integrate them to the framework.  When you submit a PR they can give you comments and suggestions.  

Share this post


Link to post
Share on other sites
On 2017/1/13 at 8:03 PM, adam said:

If you have hacks that work, It might not be that difficult for you to clean your code up and integrate them to the framework.  When you submit a PR they can give you comments and suggestions.  

i use pure js. not ts. so it'll be some difficult to do these.

and @Nockawa will code better than me and it won't take him much time to do these. i have gave him all my code, if he need read.

i told that he was joking.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.