Replacing an Image

Games
1

Hi guys,

I’m trying to change an image when it is dragged, but so far doesn’t seem to be working.

Here’s what I have

  
local image1 = display.newImage("image1.png")  
image1.x = 50; image.y = 50  
local function startDrag( event )  
 local t = event.target  
 t.x = event.x  
 t.y = event.y  
 replaceImage()  
end  
local function replaceImage()  
 if (event.target == image1) then  
 image1 = "image2.png"  
 end  
end  
image1:addEventListener( "touch", startDrag )

Anyone know what I’m doing wrong? I’ve tried all sorts of other options too but none seem to work. [import]uid: 40538 topic_id: 8731 reply_id: 308731[/import]

2

try this:

[lua]-- define your images before hand to improve performance

local image1 = display.newImage(“image1.png”)
image1.x = 50
image1.y = 50
image1.isVisible = true – this is important for later usage

local image2 = display.newImage(“image2.png”)
image2.x = image1.x
image2.y = image1.y
image2.isVisible = false

local drag = function (event)
if event.phase == “began” then
image1.isVisible = false
image2.isVisible = true

elseif event.phase == “moved” then
image2.x = event.x
image2.y = event.y
image1.x = event.x
image1.y = event.y

elseif event.phase == “ended” or event.phase == “cancelled” then
image2.isVisible = false
image1.isVisible = true
end
end

image1:addEventListener(“touch”, drag)
– i haven’t test this yet, but it should give you an idea. [import]uid: 12455 topic_id: 8731 reply_id: 31907[/import]

3

I’ve tried the above method but it doesn’t work unfortunately :frowning:

I think sprites might be an easier option so I’ll try that.
Thanks both for your help! [import]uid: 40538 topic_id: 8731 reply_id: 32331[/import]

4

@w.baig84,

this code should work, I tested.

[lua]local image1
local image2

image1 = display.newCircle(0,0,50)
image1.x = 160
image1.y = 100
image1:setFillColor(140,140,0,255)
image1.objectName = “image1”
image1.isVisible = true
image1.isHitTestable = true

image2 = display.newRect(0,0,50,40)
image2.x = 160
image2.y = 340
image2:setFillColor(0,255,255,255)
image2.objectName = “image2”
image2.isVisible = false
image2.isHitTestable = true

local drag = function (event)
if event.phase == “began” then
image1.isVisible = false
image2.isVisible = true
image2.x = image1.x
image2.y = image1.y

elseif event.phase == “moved” then
image1.x = event.x
image1.y = event.y
image2.x = image1.x
image2.y = image1.y

elseif event.phase == “ended” or event.phase == “cancelled” then
image2.isVisible = false
image1.isVisible = true

end
end

image1:addEventListener(“touch”, drag)

– good luck :slight_smile: [import]uid: 12455 topic_id: 8731 reply_id: 32366[/import]

5

w.baig84
You can’t change the image of an object returned by display.newImage.

You may follow teex84’s good method.

Another workaround is to use Sprite. A sprite can load a long image which is composed of concatenated images. You can switch to any of these images after creation of a sprite. Hope it helps.

– Advanced UI + Graph for Corona® | Website | Forum (https) | See: [import]uid: 11385 topic_id: 8731 reply_id: 32058[/import]