Touch and drag

General
21

@jamesfootlight Look at my code above. Create another table of images that you want them to change into. Then when they enter the ellipse, select an image from that table.

22

@jamesfootlight - put three ~ before and after your code, to format it nicely. I fixed yours above.

23

Thanks guys, is it possible to get the code to change background image on ipad rotation? ie replace with a landscape bg instead of portrait depending on ipad rotation?

24

want to keep the background in one direction?

25

ps @dave1707 would my second table be tab2={} and follow benath tab1={} contents
?

26

well I have created 2 bg images to accomodate the screen size depending on ipad rotation view (landscape/portarait) but how do you tell codea to replace bg when ipad is rotated?

27

displayMode(FULLSCREEN)

supportedOrientations(PORTRAIT_ANY)

28

@jamesfootlight You can name the table anything you like. I just use tab, tab1, etc because I don’t feel like thinking up a name for examples. As for the background image, in setup(), set a variable w=WIDTH. Then at the start of draw(), add


function draw()
     if w~=WIDTH then
          w=WIDTH
          ----- change you background to what you want
     end
29

Is the below how I would begin with my second table?

How would i then code them cto change to a corresponding sprite? ie “Planet Cute:Character Boy” to “Planet Cute:Character Boy1” etc?

displayMode(FULLSCREEN)

supportedOrientations(PORTRAIT_ANY)

function setup()
selected=0
ex=390 – ellipse x
ey=410 – ellipse y
ea=200 – ellipse a radius
eb=100 – ellipse y radius
rx=70
ry=120
rw=630
rh=580
tab={}
for z=1,5 do – create 5 objects
table.insert(tab,vec2(math.random(70,700),math.random(120,700)))
end

tab1={}    -- table of sprites
table.insert(tab1,readImage("Planet Cute:Character Boy"))
table.insert(tab1,readImage("Planet Cute:Character Horn Girl"))
table.insert(tab1,readImage("Planet Cute:Character Cat Girl"))
table.insert(tab1,readImage("Planet Cute:Character Pink Girl"))
table.insert(tab1,readImage("Planet Cute:Character Princess Girl"))

end

tab2={}    -- table of sprites
table.insert(tab2,readImage("Planet Cute:Character Boy1"))
table.insert(tab2,readImage("Planet Cute:Character Horn Girl1"))
table.insert(tab2,readImage("Planet Cute:Character Cat Girl1"))
table.insert(tab2,readImage("Planet Cute:Character Pink Girl1"))
table.insert(tab2,readImage("Planet Cute:Character Princess Girl1"))

end

function draw()
background(40, 40, 50)
noFill()
stroke(255)
strokeWidth(2)
rect(rx,ry,rw,rh)
ellipse(ex,ey,ea2,eb2) – draw ellipse
for a,b in pairs(tab) do – draw each objects
if checkEllipse(b.x,b.y) then
sprite(“Planet Cute:Heart”,b.x,b.y)
else
sprite(tab1[a],b.x,b.y)
end
end
end

function checkRect(x,y)
if x>rx and x<rx+rw and y>ry and y<ry+rh then
return true
end
return false
end

function checkEllipse(x,y)
– determine if touched value is inside ellipse
if (x-ex)^2/ea^2+(y-ey)^2/eb^2 <= 1 then
return true
end
return false
end

function touched(t)
if t.state==BEGAN then – check which object is selected
v1=vec2(t.x,t.y)
for a,b in pairs(tab) do
if v1:dist(vec2(b.x,b.y))<50 then
selected=a
break
end
end
end
if t.state==MOVING and selected>0 then – move selected object
if checkRect(t.x,t.y) then
tab[selected].x=t.x
tab[selected].y=t.y
end
end
if t.state==ENDED then – done moving
selected=0
end
end

30

make a small example for you. is what you need?
change the image according to the movement or direction of the ipad

31

here:

--Main
supportedOrientations(LANDSCAPE_ANY, PORTRAIT)

displayMode(FULLSCREEN)

function setup()
  WIDTH = WIDTH
  HEIGHT = HEIGHT

  States = {}
  -------------------
  --> ORIGINAL STATE
  -------------------
  state = "CorrectOr" 
  States["CorrectOr"] = CorrectOrientation
  States["imagen2"] = imagen2

  Orientation = {}
  Orientation["imagen2"] = ANY
end

function draw()
 background(0, 0, 0, 255)

 if States[state].draw ~= nil then
     -------------------
     --> DRAW THE STATE
     -------------------
    States[state]:draw()
   end 
end

imagen2 = class()

 function imagen2:draw()
  background(255, 255, 255, 255)
  sprite("Cargo Bot:Starry Background",WIDTH/2,HEIGHT/2,WIDTH,HEIGHT)
  fontSize(40)
  text("MOVE TO ORIGINAL WAY AND UPDATE",WIDTH/2,HEIGHT/2)
end
 
 --------------------
 --> ORIGINAL STATE 
 --> ORIGINAL IMAGE
 --------------------
 CorrectOrientation = class()

function CorrectOrientation:draw()
  background(0)
  sprite("Cargo Bot:Game Area",WIDTH/2,HEIGHT/2,WIDTH,HEIGHT)
  fill(255)
  fontSize(50)
  text("MOVE THAT WAY",WIDTH/2,HEIGHT/2)
  sprite("Cargo Bot:Command Left",WIDTH/2,HEIGHT/2-100)

 if CurrentOrientation == supportedOrientations() then
    -----------------------------
    --> MOVE THE SCRREN 
    --> TO DISPLAY THE NEW IMAGE
    -----------------------------
   state = "imagen2"
  end
end
32

@jamesfootlight - please put three ~ in a row on the line before your code, and again on the line after your code. Otherwise it is just a mess and you are likely to get less help if people can’t read it.

33

@jamesfootlight Just make a change in draw(). See where I added the comment for table 2.


function draw() 
    background(40, 40, 50) 
    noFill() 
    stroke(255) 
    strokeWidth(2) 
    rect(rx,ry,rw,rh) 
    ellipse(ex,ey,ea*2,eb*2) -- draw ellipse 
    for a,b in pairs(tab) do -- draw each objects
        if checkEllipse(b.x,b.y) then 
            sprite(tab2[a],b.x,b.y) -- table 2
        else 
            sprite(tab1[a],b.x,b.y) -- table 1
        end 
    end 
end
34

Sorry Ignats, will do, apologies. dave1707, thanks!

35

Luismi, great stuff, will try and incorporate into my code!

36

I’m getting a ' expected near ‘end’ error after the end after my second table? can anyone help?

37

It’s ok, i worked it out! I had an ‘end’ between my two tables, i removed it and it wokrs like a dream!