problems with animation transparency
krumza

HI!

I think that i try everything, but it no work as i planned.

In my case i have Object and some listeners: onMouseIn and on MouseOut I want that sprite be semi-semi-transparent on hover (.25) and then again non-transparent on mouseOut.(I greatly simplified, because in my example there is a tile on which there are objects that I want to make translucent when you hover the mouse on the tiles)

First i try:

            b.onMouseIn = function() {
                this.getSprite(0).setDrawModifiers([{type: 'alpha', alpha: .2}]);
            }
            b.onMouseOut = function() {
                this.getSprite(0).setDrawModifiers([{type: 'alpha', alpha: 1}]);                    
            }

also i try:

b.onMouseOut = function() {
                this.getSprite(0).setDrawModifiers([]);                    
            }

some problems with onMouse listeners if litle lags detected and this construct do sprite alpha = .2 but not 1 on mouseOut

Then i try:

b.onMouseIn = function() {                       this.getSprite().setDrawFunction(wade.drawFunctions.alpha_(1,this.getSprite().draw));
}
b.onMouseOut = function() {
this.getSprite().setDrawFunction(wade.drawFunctions.alpha_(1,this.getSprite().draw));
}

same effect - sprites set semi-transparent and not back to alpha=1 again

Then i try with Path:

            b.onMouseIn = function() {
                    this.setPath(wade.getPath('fade-out'),0,1);
            }
            b.onMouseOut = function() {
                   this.setPath(wade.getPath('fade-in'),0,1);
            }

But it call some laggy when i move mouse on my gamescreen...

Please help. It seems easy, but i broke my brain ;)

Comments 16 to 21 (21 total)
krumza

Several problems:

1: manipulation with coordinates in different layers such as^

wade.screenPositionToWorld(16, {x:0,y:-wade.getScreenHeight()/2}).y;

return not fixed values - it return as example: 1234,5678910 

Nothing serious - it treated by .toFixed():

var layerrightside = wade.screenPositionToWorld(16, {x:wade.getScreenWidth()/2+RowWidth/cameraPos.z,y:0}).x;
BorderRows.Right = +(layerrightside/256).toFixed();

but the nature of the effect is unclear

2. i use a watch plifyll for detect an change BorderRows.Right:

BorderRows.watch("Right", function (id, oldval, newval) {//function to insert new row}

There is a WADE method for watching at variables?

3. My "terminator" delete all objects on layer 16,(previous my post)

But my templates on 16 layer too! and terminator delete All my templates

How i can defend my template object?

I found but is so hard to read...^

terminator.minX = terminator.maxX = wade.screenPositionToWorld(16, {x:- wade.getScreenWidth()/2-RowWidth/cameraPos.z,y:0}).x;
terminator.minY = wade.screenPositionToWorld(16, {x:0,y:-wade.getScreenHeight()/2}).y;
terminator.maxY = wade.screenPositionToWorld(16, {x:0,y:wade.getScreenHeight()/2}).y;                            
var SpritesToTerminateOnLeft1 = wade.getSpritesInArea(terminator,16);                        
for(var j=0;j<SpritesToTerminateOnLeft1.length;j++){                                if(SpritesToTerminateOnLeft1[j].getSceneObject().containobj&&SpritesToTerminateOnLeft1[j].getSceneObject().containobj.length>0){
  for(var l=0;l<SpritesToTerminateOnLeft1[j].getSceneObject().containobj.length;l++) {                                         wade.removeSceneObject(SpritesToTerminateOnLeft1[j].getSceneObject().containobj[l]);
  }
}
if(!(SpritesToTerminateOnLeft1[j].getSceneObject().isTemplate())){                                    wade.removeSceneObject(SpritesToTerminateOnLeft1[j].getSceneObject())   
}
}

really it is impossible is easier?

Gio

Hi

Several questions, I'll try to cover all of them in order

> is it enough to just delete the object

If you use wade.removeSceneObject or, if using wade.iso (wade.iso.deleteObject) that should remove ALL the references that wade if keeping for that object. However this won't release any images / textures associated with that object. If you don't need an asset in memory anymore, there are a bunch of functions such as wade.unloadImage that might be useful to you.

> how to track change visible area

To get the current screen area in a layer's coordinate space:

var halfWidth = wade.getScreenWidth() / 2;
var halgHeight = wade.getScreenHeight() / 2;
var area = {minX: -halfWidth, minY: -halfHeight, maxX: halfWidth, maxY: halfHeight};
area = wade.screenBoxToWorld(layerId, area);

For version 3.6 (hopefully to be released this week) we are introducing an onCameraMove event that will fire every time the camera position or zoom level changes. You would just add an onCameraMove function in your App object to handle the logic.

Right now, as a workaround, you'd have to set a main loop with wade.setMainLoop() to monitor camera position changes.

> manipulation with coordinates return not fixed values

I am not sure why you need a fixed value?

> There is a WADE method for watching at variables

No, and I think this would be good to add in a future version. There is the JavaScript way that is fairly simple though, and supported pretty much everywhere.

> How i can defend my template object?

if (!mySceneObject.isTemplate())
{
    wade.removeSceneObject(mySceneObject);
}

 

krumza

I don't even know more to enjoy from the new version or be upset by the fact that almost everything made before its release :)

Thank you for answer!

krumza

Some question again

> manipulation with coordinates return not fixed values

wade.screenPositionToWorld(16, {x:wade.getScreenWidth()/2+RowWidth/cameraPos.z,y:0}).x;

sorry I didn't mean fixed and mean not whole numbers, but fractional numbers (I'm not sure what is normally translated into English)
I expect to see a coordinate of x=1234 but the function returns 1234,56789

- there's also the problem with deleting objects
I take a 2 line of height two screen on left and right  and another lines with width two screen on bottom and up and remove all objects which come across it.
At the same time, I've  rendering new objects when the player scroll to right.
And for some reason, not always the objects are removed and the farther we scrollin right the more is. I would like to understand why

Gio

I understand what you mean by non-fixed values / fractional numbers. However there is no reason why world coordinates should be integer numbers. Normally it makes sense for screen coordinates to be integers, because you have a finite number of pixels on your screen.

However, world units are, in principle, continuous coordinates. It's perfectly valid for something to be at position (0.5, 123.45) in the world for example. Depending on the camera position and zoom level, that will end up being at various positions on your screen.

> And for some reason, not always the objects are removed and the farther we scrollin right the more is. I would like to understand why

It's difficult to tell without looking at your code, but I suspect the objects are not being removed at the right time. Are you doing this in a main loop, i.e. using wade.setMainLoop() ?

 

krumza

Hi

 - about fixed values - i am understand, but it would be more convenient check coordinates as if(!(coords.x%tilewidth)){//got row}

 - about second: i think that is more expensive use getSpritesInArea on every update().

Now in my code trigger to delete - is mouseMove

but i recreating this mechanism to next way:

App = function() {
  var VISIBLEZONE = {
     Right:0,
     Left:0,
     Bottom:0,
     Top:0
  };
  //use watch.js to watch visible zone https://github.com/melanke/Watch.JS
  watch(VISIBLEZONE, ["Right","Left","Bottom","Top"], function(data){
     if (data=="right"){
       wade.app.onRightMove();
     }  
  });

  this.init = function() {
    //...
    wade.setMainLoop(wade.app.Update);
    //...
  }

  //...

  this.Update= function(){
    var layerrightside = wade.screenPositionToWorld(16,{x:wade.getScreenWidth()/2+RowWidth/wade.getCameraPosition().z,y:0}).x;
    var layerleftside = wade.screenPositionToWorld(16, {x:-wade.getScreenWidth()/2-RowWidth/wade.getCameraPosition().z,y:0}).x;
    var toprightpoint = wade.screenPositionToWorld(16, {x:0,y:-wade.getScreenHeight()/2-RowHeight/wade.getCameraPosition().z}).y;
    var bottomrightpoint = wade.screenPositionToWorld(16, {x:0,y:wade.getScreenHeight()/2+RowHeight/wade.getCameraPosition().z}).y;

    VISIBLEZONE.Right = +(layerrightside/256).toFixed();
    VISIBLEZONE.Left = +(layerleftside/256).toFixed();
    VISIBLEZONE.Top = +(toprightpoint/128).toFixed();
    VISIBLEZONE.Bottom = +(bottomrightpoint/128).toFixed();
   }
   
   this.onRightMove = function(){
     //create objects on right side
     //delete objects on left side
   }
}

had to use the library watch.js for the reason that I'm not getter/setter/OOP ninja

Post a reply
Add Attachment
Submit Reply
Login to Reply