Event Propagation, Scene Transistions & UI layout

Saola Animate
1

Maybe questions, bugs or feature requests - but just a few general items that have arisen whilst building our memory match game.

  1. I have customised the UI layout. resources, elements, scenes and functions have been moved to the left and split into two selections. For example the function pane is at the top (70%) and the scenes pane is below (30%).

For some reason, when I start Saola, the split becomes 50 / 50. Also, the scenes pane is set to display in grid mode and this reverts back to column.

  1. I was playing with scene transition effects and cannot make it do quite what I wanted. Imagine three scenes A, B, C. Using the push effect, when moving through the scenes A to B to C the scenes slide one way, but when going from C to B to A I wanted the scenes to slide the opposite way - but I can’t see how to achieve it.

  2. In the memory game, the overlay tiles are on top of the image tiles, I wanted to add a feature that would need using an event on both the layers, but clicks don’t appear to pass through.

Any help or pointers welcome.

Cheers

2

Hi,

Please find my answers below:

  1. Thank you for your report. It’s a bug and we’ll try to fix it.
  2. You can use the Jump to Scene action with a custom transition.
  3. You want both the layers handle the click event when the user click on them, right? If so, you can group the overlay tile and the image tile, add click event handler to the group element which calls the click handlers/functions of each tile.

Regards

3

Cheers.

Two was actually being called from showScene(). Can it be done from the code? If not, I’ve removed that line and added it as a separate action after the JS call. It’s used on the up arrow on the main game page. It all works now :smile:

The top and bottom layers are already in their own groups, so I’ll have to have a play and see how this works.

Thanks.

4

In fact, the showScene function has an optional parameter which can be used to set a custom transition, but it’s quite complicated so we don’t document it. For example:

doc.showScene('Scene_2', {
  transition: {
    type: 2, // 0 None, 1 Fade, 2 Push
    duration: 1000, // ms
    easing: 'outQuad', // linear, in/out/inOutQuad/Cubic...
    option: 1, // direction: 0 left, 1 top, 2 right, 3 bottom
  }
});

Regards

1 Like
5

Superb! The anime.js library works this way as well.

I tried item three but that’s not what I was trying to acheive.

The top layer has a function that passes ‘this’ to a variable. The bottom layer needs to do the same thing.

Because the names of the layers are co-ordinated IE image12div and overlay12div - it is possible to get the bottom layer using getElement and the top layer name in this instance.

For future projects, I was just wondering whether it would be possilbe to set or alter something that would allow events to pass through layered elements.

Cheers.