Problem with button and composer

Getting Started Newbie Questions
#1

I have problem with button and composer. See gif

It’s normal behavior? Why the background of button not fading ?

Here is sample code nothing fancy:

[lua]

function onButtonRelease(event)
  local button = event.target;

  if button.id == “playGame” then
    composer.gotoScene(“game”, {
    effect = “fade”,
    time = 800,
  })
  elseif button.id == “bestScore” then
    composer.gotoScene(“best”, {
    effect = “fade”,
    time = 800,
  })
  end
end

function scene:create( event )
  local sceneGroup = self.view

  local background = display.newRect(display.contentCenterX, display.contentCenterY, display.contentWidth, display.contentHeight)
  background:setFillColor(0.682, 0.835, 0.505)
  sceneGroup:insert(background)

  local buttonsGroup = display.newGroup()
  buttonsGroup.anchorChildren = true
  buttonsGroup.anchorX = 0.5
  buttonsGroup.anchorY = 0.5
  buttonsGroup.x = display.contentCenterX
  buttonsGroup.y = display.contentCenterY
  sceneGroup:insert(buttonsGroup)

  playButton = widget.newButton
  {
    id = “playGame”,
    label = “Play Game”,
    shape = “rect”,
    height = 150,
    width = 600,
    x = 0,
    y = 0,
    fillColor = {default={0.682, 0.835, 0.505}, over={0.545, 0.764, 0.290}},
    labelColor = {default={ 1, 1, 1 }, over={ 1, 1, 1} },
    fontSize = 72,
    onRelease = onButtonRelease
  }
  buttonsGroup:insert(playButton)

  bestButton = widget.newButton
  {
    id = “bestScore”,
    label = “Best Score”,
    shape = “rect”,
    height = 150,
    width = 600,
    x = 0,
    y = 200,
    fillColor = {default={0.682, 0.835, 0.505}, over={0.545, 0.764, 0.290, 1}},
    labelColor = {default={ 1, 1, 1}, over={ 1, 1, 1 } },
    fontSize = 72,
    onRelease = onButtonRelease
  }

  sceneGroup:insert(bestButton)
  buttonsGroup:insert(bestButton)

end

[/lua]

#2

Hi @shopl,

Thanks for the detailed (animated) example. I actually don’t see anything odd about this, however. All of the objects, including the buttons, are fading out when you change scenes. Can you describe in more detail what should be happening within your design intention?

If I had to venture a guess, do you mean that the objects don’t seem to fade out “as one”? Meaning, the background seems to fade out slightly out-of-sync with the buttons? If so, this is likely just a visual illusion based on the alpha fade of the objects and how they’re layered. I can give you a better description of what I mean, but first let me know if this is even the issue you’re speaking about. :slight_smile:

Thanks,

Brent

#3

Thanks for reply. Yes this is exactly what I talking about. In have background and button with same color why they fade out of sync?

#4

Hi @shopl,

The easiest way to visualize it is to understand how alpha fade works with propagation through a display group’s children in Corona. For example, you have the entire “scene” which is effectively a display group, and in that scene is your background and buttons. Both the background and buttons begin at full opacity (.alpha=1). When the scene begins to fade out, the transition of the alpha gets applied to each of the display group’s children (propagated). So, half of the way through your fade, the alpha is 0.5, meaning that the background alpha is 0.5 and the buttons’ alpha is also 0.5. But since those two objects overlap, the pixels in the region where they overlap will not be strictly 0.5 because those pixels are combined in alpha, and the “effective alpha” will be around 0.75.

Hope this makes sense… not sure how else to describe it. :slight_smile:

Brent

#5

OK thanks for explanation. Is there a way to disable or change this behavior. I only want that background and button fade in sync

#6

Hi @shopl,

Yes, there are ways to do this. The idea would be to place the background and buttons into a snapshot. This is similar to taking a series of layers or groups in an image editing program like Photoshop and doing “flatten” to convert them all into one unified layer. That object can then be manipulated as if it was one object, so the layered alpha fade you’re seeing won’t happen. Here are some resources… note that snapshots are pretty easy to work with, but they might seem a little odd in the beginning.

http://docs.coronalabs.com/guide/graphics/snapshot.html

Alternatively, you could just do a display.capture() on the entire screen, which would probably be easier, and for your purposes it would accomplish basically the same thing.

Take care,

Brent

#7

Hi @shopl,

Thanks for the detailed (animated) example. I actually don’t see anything odd about this, however. All of the objects, including the buttons, are fading out when you change scenes. Can you describe in more detail what should be happening within your design intention?

If I had to venture a guess, do you mean that the objects don’t seem to fade out “as one”? Meaning, the background seems to fade out slightly out-of-sync with the buttons? If so, this is likely just a visual illusion based on the alpha fade of the objects and how they’re layered. I can give you a better description of what I mean, but first let me know if this is even the issue you’re speaking about. :slight_smile:

Thanks,

Brent

#8

Thanks for reply. Yes this is exactly what I talking about. In have background and button with same color why they fade out of sync?

#9

Hi @shopl,

The easiest way to visualize it is to understand how alpha fade works with propagation through a display group’s children in Corona. For example, you have the entire “scene” which is effectively a display group, and in that scene is your background and buttons. Both the background and buttons begin at full opacity (.alpha=1). When the scene begins to fade out, the transition of the alpha gets applied to each of the display group’s children (propagated). So, half of the way through your fade, the alpha is 0.5, meaning that the background alpha is 0.5 and the buttons’ alpha is also 0.5. But since those two objects overlap, the pixels in the region where they overlap will not be strictly 0.5 because those pixels are combined in alpha, and the “effective alpha” will be around 0.75.

Hope this makes sense… not sure how else to describe it. :slight_smile:

Brent

#10

OK thanks for explanation. Is there a way to disable or change this behavior. I only want that background and button fade in sync

#11

Hi @shopl,

Yes, there are ways to do this. The idea would be to place the background and buttons into a snapshot. This is similar to taking a series of layers or groups in an image editing program like Photoshop and doing “flatten” to convert them all into one unified layer. That object can then be manipulated as if it was one object, so the layered alpha fade you’re seeing won’t happen. Here are some resources… note that snapshots are pretty easy to work with, but they might seem a little odd in the beginning.

http://docs.coronalabs.com/guide/graphics/snapshot.html

Alternatively, you could just do a display.capture() on the entire screen, which would probably be easier, and for your purposes it would accomplish basically the same thing.

Take care,

Brent