few problems(bug) with layers
krumza August 19th, 2017

1 Bug(?) with wade.setLayerOpacity

Hello!

I experimented with different layers with aim to create clouds and ground system on pseudo-isometric (iso without wade iso plugin)

I need show clouds only when map is zoom-out (small ground) and hide clouds when zoom-in (large ground)

I separate cloud and ground on 2 layers and use wade.setLayerOpacity (layerId, opacity)  on zoom change

And i found problem

I save camera position to move behind scenes, and because i must set opacity in depend of saved camera position i use wade.setLayerOpacity(layerId, 0) on start map scene - but it not work!

To recreate this just create 2 layers 1 and 2 and write in console wade.setLayerOpacity(1 , 0) 

I dont understand why, but if change 0 to 0.00001 (any non-zero less number) - it start working

 

2 Q - How freeze layer transform in one side? 

I need show clouds only when zoom has large scale, and clouds need transforms too - wade.setLayerTransform (layerId, 0, translate) - no option for me

But i cant recreate logic of cloud layer with wade wade.setLayerTransform function

I need something like https://en.wikipedia.org/wiki/Angular_diameter - because i need create illusion walk over the clouds  - if camera.z = max - layer scale must be -10 (as example) 

I dont know how mariage angular diameter and scale layer 

Now in project i use 

wade.setLayerOpacity(14, Math.max(0,cameraPos.z*cameraPos.z-2.25));
wade.setLayerTransform(14, cameraPos.z*cameraPos.z - 6, 1);

Just fade clouds faster than they grow/small

or another less-smooth version:

var scale = (cameraPos.z>1.5) ? .99 : -.99;

And another problem i found - scale == -1 cause error:

 Warning: it isn't possible to render this frame

I think there a small bug in this functions with zero(ceil?) variables

And may be i found answer:)

3 Another one 

There is wade.mouseIn and mouseOut events but sometimes in not work properly if object is moving. It because js  no triggers when mouse dont move, but object is still move! 

Wade can make it work:

obj.onUpdate= function(){
if(!this.getSprite(0).containsScreenPoint(wade.getMousePosition())){
    if(this.hovered) {
        this.hovered=false;
        this.getSprite(1).fadeIn(0,null);
        
    }
} else if(this.getSprite(0).containsScreenPoint(wade.getMousePosition())){
    if(!this.hovered) {
        this.hovered=true;
        this.getSprite(1).fadeOut(0,null);
    }
}
}

But it seems so expensive! May be another way WADE-in-box exist?

4 Another thing

Please make more acessible editor.I speak about font size in code editor - may be it make a little bit larger? or custom for users?

 

All 3 Comments
Gio August 21st, 2017

Hi krumza

To answer your questions in order:

1. Yes that sounds definitely like a bug - we'll get it fixed for the next release. Thanks very much for pointing it out.

2. I'm not sure I understand why you would want a negative scale or translate factor? Shouldn't scale always be a positive number?

3. You are right, mouseIn and mouseOut events are only fired when the mouse moves. The way you are handling it looks correct. We could do this internally in wade, so mouseIn and mouseOut events can also be triggered by objects moving / resizing / rotating, however as you noted, this would be very, very expensive. I think it would be better to keep it as it is (which works in 99% of the cases and is fast) rather than doing it the other way around (works in 100% of the cases and is slow). Unfortunately this means that if you want it working with moving objects, you need to write some extra code (like you did above)

4. Very good point. We are rewriting the UI for version 4.0, we will keep this in mind. Thanks.

krumza August 27th, 2017

hi Gio1

2  To simulate height we need different scale to clouds

Gio August 31st, 2017

I see what you mean there.

I am not sure that setting a negative layer scale is the best way to achieve that though.

You probably want to have an onCameraMove function in your app, where you look at the current camera z value and set the layer scale accordingly, however always use a value greater than 0. Like

var scale = Math.abs(cameraPos.z - cloudHeight) / someFactor;
wade.setLayerTransform(layerId, scale, 1);

 

Post a reply
Add Attachment
Submit Reply
Login to Reply