sprite2D of canvas2D display not stable

[MasterK]

http://babylonjs-playground.com/#272WI1#15

line 30

the sprite2d display sometime and not display other times... 

It's not stable... why...

[MasterK]

this case too:

http://babylonjs-playground.com/#20MSFF#32

the sprite2d is not displayed until changing its property.

[GameMonetize]

Pinging @Nockawa

[MasterK]

@Nockawa

after sprite texture is ready, should set this dirty.

_this._setFlags(BABYLON.SmartPropertyPrim.flagModelDirty);

[Nockawa]

8 hours ago, MasterK said:

@Nockawa

after sprite texture is ready, should set this dirty.

_this._setFlags(BABYLON.SmartPropertyPrim.flagModelDirty);

Sorry, but I don't work on it right now, but we' do accept Pull Request as your answer is correct!

I'll hope things will be quieter for me next Wednesday, right now, this is busy time...

 

[Nockawa]

Hello @MasterK I've run your playground multiple times with FF, Chrome, IE with simple or hard refresh and it's always working...

Do you still have the issue?

Edit: the second PG is failing all the time, so I start working on this one... Strange because it's an old bug I thought I solved...

[Nockawa]

@MasterK I believe both issues are fixed, please confirm. Thanks!

[MasterK]

@Nockawa

nice, i'll get from github.

Another problem, dont know if you soloved.

create Sprite2D A first and sprite2d B later and cover A

And set A zOdrer = 0.1

set B zOrder = 0.2  (0.1 in front of 0.2.... the document http://doc.babylonjs.com/overviews/Canvas2D_ZOrder is not right...)

then A should cover B. But display is also B cover A.

 

 

[MasterK]

and i suggest change scale to scaleX & scaleY in prim2dBase.

i think that's more useful.

and if you don't change it, i should change it myself and it add troubles when i update babylon.js.

concern about it~~ or scale (BABYLON.Size).

 

[MasterK]

13 hours ago, Nockawa said:

Hello @MasterK I've run your playground multiple times with FF, Chrome, IE with simple or hard refresh and it's always working...

Do you still have the issue?

Edit: the second PG is failing all the time, so I start working on this one... Strange because it's an old bug I thought I solved...

 

http://babylonjs-playground.com/#272WI1#15

I use chrome, still this playground... sprite displays maybe first open.

then click "RUN" in page. more times.

sprite2D not display.

It's still not right..

and i update code and try it local, it's the same.

 

[Nockawa]

5 hours ago, MasterK said:

@Nockawa

nice, i'll get from github.

Another problem, dont know if you soloved.

create Sprite2D A first and sprite2d B later and cover A

And set A zOdrer = 0.1

set B zOrder = 0.2  (0.1 in front of 0.2.... the document http://doc.babylonjs.com/overviews/Canvas2D_ZOrder is not right...)

then A should cover B. But display is also B cover A.

 

 

Yeah, I remember that I may have inverted how the order should behave in the documentation. Because of a stupid mistake (as usual). I have to check that up, I've created a Trello Card to remind me.
Thanks!

[Nockawa]

4 hours ago, MasterK said:

and i suggest change scale to scaleX & scaleY in prim2dBase.

i think that's more useful.

and if you don't change it, i should change it myself and it add troubles when i update babylon.js.

concern about it~~ or scale (BABYLON.Size).

 

Yes, I can add scaleX and scaleY being mere wrappers of scale.x and scale.y like x and y with position.x/y. This one will be added quickly, it's real easy to do. Here's the Trello Card.

[Nockawa]

4 hours ago, MasterK said:

 

http://babylonjs-playground.com/#272WI1#15

I use chrome, still this playground... sprite displays maybe first open.

then click "RUN" in page. more times.

sprite2D not display.

It's still not right..

and i update code and try it local, it's the same.

 

Ok, you got me, it's always working on FireFox, Edge, IE, but indeed Chrome is not behaving the same way. @Sebavan is quite busy lately but I hope he'll be able to lend me a hand, because I'm no good to deal with these kind of things...The joys of the web...

[MasterK]

@Nockawa

Another suggest. I modified prim2dBase in my own version.

in this:

Prim2DBase.prototype._updateLocalTransform = function () {

I change

//BABYLON.Matrix.TranslationToRef((as.width * this._origin.x) + pos.x, (as.height * this._origin.y) + pos.y, 0, Prim2DBase._t2);

to

BABYLON.Matrix.TranslationToRef(pos.x, pos.y, 0, Prim2DBase._t2);

 

example:

parent A size 100,100

node B size 10, origin(0.5, 0.5)

when i add B to A and set B position (x,y)

I want B's origin point in the (x,y), not B's leftBottom point.

I think current mode is very weird... and i don't think pad/margin is any useful... cause we need accurate position...(to handle resize event is a better way to improve...) It's myself opinion. 

Hit me.

[Nockawa]

23 minutes ago, MasterK said:

@Nockawa

Another suggest. I modified prim2dBase in my own version.

in this:

Prim2DBase.prototype._updateLocalTransform = function () {

I change

//BABYLON.Matrix.TranslationToRef((as.width * this._origin.x) + pos.x, (as.height * this._origin.y) + pos.y, 0, Prim2DBase._t2);

to

BABYLON.Matrix.TranslationToRef(pos.x, pos.y, 0, Prim2DBase._t2);

 

example:

parent A size 100,100

node B size 10, origin(0.5, 0.5)

when i add B to A and set B position (x,y)

I want B's origin point in the (x,y), not B's leftBottom point.

I think current mode is very weird... and i don't think pad/margin is any useful... cause we need accurate position...(to handle resize event is a better way to improve...) It's myself opinion. 

Hit me.

You don't have the idea of how many hours/days I spent on this f***ing origin, maring/padding, etc... it was a pure nightmare in itself.

What it is to be understood is that margin/padding/positioning are all optional features! These are made for GUI based stuff and is REALLY useful! But for other intents like a 2D Engine, you don't want to use that and simple rely on everything given absolute. Which will be the case if you set the position (or x/y) member, and size (or width/height) members, without setting any alignment, padding/maring, etc. The actualPosition/Size will always be what you specified.

I guarantee you that both mode are needed and should cohabit without issues, if you have issues it's : 1) a bug from me, 2) a misunderstand from you or 3) a mix of 1 & 2!

Have you check the documentation in overview about this topic?

 

 

[MasterK]

OK. It's REALLY useful... And i know it must very hard work....... 

This is my question:

when i set B pos to (x,y),

I want B's origin point in the (x,y), not B's leftBottom point.

It's incomprehensible。。。

[Nockawa]

11 minutes ago, MasterK said:

OK. It's REALLY useful... And i know it must very hard work....... 

This is my question:

when i set B pos to (x,y),

I want B's origin point in the (x,y), not B's leftBottom point.

It's incomprehensible。。。

What you describe is what I've spent countless days to implements and that was the first version: origin would affect the position of the object. It was also natural for me to think this way, so I did the same way you're saying right now.

Later on I realized it couldn't be done this way for few very good reason my brain didn't record (certainly due to the traumatized event to wipe everything and restart). Bottom line: origin is only for rotation/scale and the different 2D/UI libraries I looked after confirmed this by doing the same thing. I'm aware that this statement is more true when we're talking about GUI than pure 2D Engine. But after a long discussion with the Core Team we concluded that keeping things simple was the best way to go.

And the current mode is simple, once you understand it.

[MasterK]

Suprise at last sentence... hahaha...I'm ready to update... Dont forget the easy scale.X/Y

 

That sounds some right... You persuaded me.

[Nockawa]

4 minutes ago, MasterK said:

Suprise at last sentence... hahaha...I'm ready to update... Dont forget the easy scale.X/Y

 

That sounds some right... You persuaded me.

Lol, I was just going to code the scale thing and I just realize that scale is uniform! it's a number, not a Size/Vector. The scale can only be the same for both X and Y. Is it an issue for you ? Non uniform scale is a pain for everybody...

[MasterK]

I dont know.

I added scaleX, scaleY , remove scale in prim2dbase, and it works... what's uniform mean...

 

continue last question:

A size (10,10)    B size (20,20)

if origin as position, i can easily set A pos (0,0) and B pos (10,0) to set them in horizontal line.

But use leftBottom as position. It's terrible......

 

[MasterK]

Another problem.

the worldSpaceCanvas can't use pointEvent in ORTHOGRAPHIC_CAMERA

[Nockawa]

15 minutes ago, MasterK said:

I dont know.

I added scaleX, scaleY , remove scale in prim2dbase, and it works... what's uniform mean...

I wonder how you could have a scaleX of 2 and scaleY of 3 and having an accurate display/transformation

 

Quote

continue last question:

A size (10,10)    B size (20,20)

if origin as position, i can easily set A pos (0,0) and B pos (10,0) to set them in horizontal line.

But use leftBottom as position. It's terrible......

That's when you have to rely on positioning/alignment... It's not easy to first understand how it works but it's powerful and will adapt to any kind of resize from the viewport.

Again what you're saying is the very first thing I did, but the current state is better, alignment and positioning are made for that.

[Nockawa]

1 minute ago, MasterK said:

Another problem.

the worldSpaceCanvas can't use pointEvent in ORTHOGRAPHIC_CAMERA

please create a dedicated thread in the forum and give a PG, this way we can avoid triple unrelated conversations in the same topic! otherwise I'll be lost.

it's cool that you're using many things! I've never played with Ortho Cam in bjs, I'm not surprised it needs a little extra work...

[MasterK]

12 hours ago, Nockawa said:

I wonder how you could have a scaleX of 2 and scaleY of 3 and having an accurate display/transformation

 

That's when you have to rely on positioning/alignment... It's not easy to first understand how it works but it's powerful and will adapt to any kind of resize from the viewport.

Again what you're saying is the very first thing I did, but the current state is better, alignment and positioning are made for that.

           this.scale = (settings.scale == null) ? 1 : settings.scale;

this.scaleX = (settings.scaleX == null) ? 1 : settings.scaleX;
            this.scaleY = (settings.scaleY == null) ? 1 : settings.scaleY;

Object.defineProperty(Prim2DBase.prototype, "scale", {

Object.defineProperty(Prim2DBase.prototype, "scaleX", {

 Object.defineProperty(Prim2DBase.prototype, "scaleY", {

 var tflags = Prim2DBase.actualPositionProperty.flagId | Prim2DBase.rotationProperty.flagId | Prim2DBase.scaleProperty.flagId | Prim2DBase.originProperty.flagId;
var tflags = Prim2DBase.actualPositionProperty.flagId | Prim2DBase.rotationProperty.flagId | Prim2DBase.originProperty.flagId
                    | Prim2DBase.scaleXProperty.flagId | Prim2DBase.scaleYProperty.flagId;
          local = BABYLON.Matrix.Compose(new BABYLON.Vector3(this._scale, this._scale, 1), rot, new BABYLON.Vector3(pos.x, pos.y, 0));

local = BABYLON.Matrix.Compose(new BABYLON.Vector3(this._scaleX, this._scaleY, 1), rot, new BABYLON.Vector3(pos.x, pos.y, 0));

BABYLON.Matrix.ScalingToRef(this._scale, this._scale, 1, Prim2DBase._t0);

BABYLON.Matrix.ScalingToRef(this._scaleX, this._scaleY, 1, Prim2DBase._t0);

            BABYLON.instanceLevelProperty(5, function (pi) { return Prim2DBase.scaleProperty = pi; }, false, true)
        ], Prim2DBase.prototype, "scale", null);
        __decorate([

        __decorate([
            BABYLON.instanceLevelProperty(14, function (pi) { return Prim2DBase.scaleXProperty = pi; }, false, true)
        ], Prim2DBase.prototype, "scaleX", null);
        __decorate([
            BABYLON.instanceLevelProperty(15, function (pi) { return Prim2DBase.scaleYProperty = pi; }, false, true)
        ], Prim2DBase.prototype, "scaleY", null);

[MasterK]

13 hours ago, Nockawa said:

please create a dedicated thread in the forum and give a PG, this way we can avoid triple unrelated conversations in the same topic! otherwise I'll be lost.

it's cool that you're using many things! I've never played with Ortho Cam in bjs, I'm not surprised it needs a little extra work...

And i think maybe screenCanvas can related to camera. So that i can use two screenCavas, one below 3d scene, one in front of 3d scene.

Beasuse  ORTHOGRAPHIC_CAMERA  worldSpaceCanvas texture is very blur...