Replace image on newImageRect

Hi, 

I create newImageRect, however I want to replace the picture in exact same location and listener.

I try to create exactly with same code instead I put different file, but it just work for 1 time only, after it replace, I try to replace with other image again, and the image didn’t change.

I just wondering if anyone have idea how to solve this problem ?

Thanks,

Using display.newImageRect() you have to basically create two objects stacked on top of each other and they can share the same listener.  There are two ways to think about this.  Lets say you want to have an On/Off switch.  You can load two graphics of the same size, draw one on top of the other.  Make one of them hidden.  Add the toggleImage touch event to both items.  Only the visible one will actually fire.  Inside the handler function, hide the visible one, show the hidden one and do whatever you need to do to change states as needed.

The other one is like flipping a card.  One you show the card back, then on touch you show the card front.  In that case you probably would create the card back and put your touch handler on it.  When it’s touched, you would draw the face up card over top of the card back, add a touch handler as needed then call the cardBack’s:removeSelf() function to get rid of the back if it’s never going to be used again.

The other options is to use imageSheets and sprites to have two frames in memory that you can flip back and forth with.

Using display.newImageRect() you have to basically create two objects stacked on top of each other and they can share the same listener.  There are two ways to think about this.  Lets say you want to have an On/Off switch.  You can load two graphics of the same size, draw one on top of the other.  Make one of them hidden.  Add the toggleImage touch event to both items.  Only the visible one will actually fire.  Inside the handler function, hide the visible one, show the hidden one and do whatever you need to do to change states as needed.

The other one is like flipping a card.  One you show the card back, then on touch you show the card front.  In that case you probably would create the card back and put your touch handler on it.  When it’s touched, you would draw the face up card over top of the card back, add a touch handler as needed then call the cardBack’s:removeSelf() function to get rid of the back if it’s never going to be used again.

The other options is to use imageSheets and sprites to have two frames in memory that you can flip back and forth with.

hello Rob,

i have a similar problem except that the replaced image can be anything dragged onto the original picture. to be precise, that’s a grid where you can drag and drop the neighbouring pix onto the target.

similar to candy crush.

So I want grid(row,col) to now be grid(row,col+1) and vice-versa.

I have a touch listener that figure out which neighbour is dragged onto.

i have removed both objects, set to nil, removed the listeners on both these objects and recreated them with the new image.

it works.

… except … if I try to move the same object again, the listener DOESNT GO THROUGH the began phase of the listener.

which makes my which_neighbour calculation wrong.

(I did put a return true at the end of my listener.)

Note, the first time around, it goes thru the began, moved,ended phases of the listener.

the second time it goes straight to moved and ended phases !

even if in between i did another move onto different things on the grid

so … my question … is that a simple way to change the picture associated with and object. is removing the object the right way to do it ?

also, having removed completely the listener, why is that still active ?

thank you very much

This sounds like a use for sprites.  Sadly, I’ve not played Candy Crush, but it looks like a grid of images that each cell can change.  So lets say there are four possible images that can be in each cell.  You would create an imageSheet of the different tiles, and then generate each object as a sprite from the imageSheet.  Then you simply change the cell to the image you want by picking which ever frame of the sprite you need to show at the moment.

No need to create/recreate things over and over.

Rob

If you have a Pro License you can use object.fill to fill the object with your graphic, either from file or image sheet.   The best way for a basic license is to use sprites:

  1. Setup your image sheet:

ImageData = { width=48, height=48, numFrames=34, sheetContentWidth=384, sheetContentHeight=384 }
Image = graphics.newImageSheet( “player_tiles_48.png”, playerImageData )

  1. Create Sequence Data

local sequenceData =
{
    {name=“all”,    start=1, count = 34 }
}

  1. Draw your sprite

local object = display.newSprite( Image, sequenceData )
object:setSequence( “all” )
object:setFrame ( imagenumber )

and then to swap:

object:setFrame ( anotherimagenumber )

That’s the way I finally did my image swapping.

thank you both.

I have a pro license … but I will switch to sprites because it does make sense to me.

However I really really (really) want to understand what can cause the listener to skip the began phase the second time around.

Never ever give up !

I will post my findings

wish me luck

oh yeah, oh yeah, oh yeah,

the problem was that when dragging over target cell (T) to neighbour cell (N) to get a nice visual effect (transition) I need to swap the images half way

to do this I change the X/Y positions of both T and N.

When I release my finger from the screen, i need to swap them back to their original position. Indeed their place in the grid has to stay the same. THEN I can change their images.

and for this I needed to delete the cells and recreate them. And that was the buggy part, the cell wasn’t deleted  just another created on top of the old one …

and this seems to make the runtime go funny whereas event if it had gone through the ended phase, somehow the event wasn’t reset.

and next time i was trying to move the N cell, i didn’t go through the began phase again … 

phfffeeeww now I feel better, may even have an ice-cream to celebrate… hmmm or shall I have a Corona instead … 

and now I will also switch to sprites that would indeed be more efficient…

cheers

hello Rob,

i have a similar problem except that the replaced image can be anything dragged onto the original picture. to be precise, that’s a grid where you can drag and drop the neighbouring pix onto the target.

similar to candy crush.

So I want grid(row,col) to now be grid(row,col+1) and vice-versa.

I have a touch listener that figure out which neighbour is dragged onto.

i have removed both objects, set to nil, removed the listeners on both these objects and recreated them with the new image.

it works.

… except … if I try to move the same object again, the listener DOESNT GO THROUGH the began phase of the listener.

which makes my which_neighbour calculation wrong.

(I did put a return true at the end of my listener.)

Note, the first time around, it goes thru the began, moved,ended phases of the listener.

the second time it goes straight to moved and ended phases !

even if in between i did another move onto different things on the grid

so … my question … is that a simple way to change the picture associated with and object. is removing the object the right way to do it ?

also, having removed completely the listener, why is that still active ?

thank you very much

This sounds like a use for sprites.  Sadly, I’ve not played Candy Crush, but it looks like a grid of images that each cell can change.  So lets say there are four possible images that can be in each cell.  You would create an imageSheet of the different tiles, and then generate each object as a sprite from the imageSheet.  Then you simply change the cell to the image you want by picking which ever frame of the sprite you need to show at the moment.

No need to create/recreate things over and over.

Rob

If you have a Pro License you can use object.fill to fill the object with your graphic, either from file or image sheet.   The best way for a basic license is to use sprites:

  1. Setup your image sheet:

ImageData = { width=48, height=48, numFrames=34, sheetContentWidth=384, sheetContentHeight=384 }
Image = graphics.newImageSheet( “player_tiles_48.png”, playerImageData )

  1. Create Sequence Data

local sequenceData =
{
    {name=“all”,    start=1, count = 34 }
}

  1. Draw your sprite

local object = display.newSprite( Image, sequenceData )
object:setSequence( “all” )
object:setFrame ( imagenumber )

and then to swap:

object:setFrame ( anotherimagenumber )

That’s the way I finally did my image swapping.

thank you both.

I have a pro license … but I will switch to sprites because it does make sense to me.

However I really really (really) want to understand what can cause the listener to skip the began phase the second time around.

Never ever give up !

I will post my findings

wish me luck

oh yeah, oh yeah, oh yeah,

the problem was that when dragging over target cell (T) to neighbour cell (N) to get a nice visual effect (transition) I need to swap the images half way

to do this I change the X/Y positions of both T and N.

When I release my finger from the screen, i need to swap them back to their original position. Indeed their place in the grid has to stay the same. THEN I can change their images.

and for this I needed to delete the cells and recreate them. And that was the buggy part, the cell wasn’t deleted  just another created on top of the old one …

and this seems to make the runtime go funny whereas event if it had gone through the ended phase, somehow the event wasn’t reset.

and next time i was trying to move the N cell, i didn’t go through the began phase again … 

phfffeeeww now I feel better, may even have an ice-cream to celebrate… hmmm or shall I have a Corona instead … 

and now I will also switch to sprites that would indeed be more efficient…

cheers