Sprite Sheet help

Jarc

I was forum digging and I discovered two ways to use sprite sheets that work but not with every sprite sheet.

https://www.gamefromscratch.com/post/2014/10/26/Guide-to-Creating-a-Game-on-an-iPad-Our-First-Project-Adding-Spritesheet-support-to-Codea.aspx

https://codea.io/talk/discussion/comment/13909#Comment_13909

I can get the caveman sprite sheet to work both ways but not the Wizard.

Just wondering what I’m doing wrong.
The wizard image is 2000x200
Each frame is 200x200
10 frames in total

For Main

function setup()
   local img = readImage(asset.documents.Dropbox["Photo Apr 09, 7 51 25 PM.png"])
    wizard = Spritesheet(img,WIDTH,HEIGHT/2,10,1,200,200,0,10)
end

function draw() 
   background(40, 40, 50)
    wizard:draw()
end

function touched(touch)
    wizard:touched(touch)
end

Spritesheet class

Spritesheet = class()

function Spritesheet:init(img,x,y,rows,cols,frameWidth,frameHeight,frame,totalFrames)
   self.x = x
   self.y = y
   self.frame = frame
   self.totalFrames=totalFrames

   self.frameWidth = frameWidth
   self.frameHeight = frameHeight
   self.frameRows = rows
   self.frameCols = cols
   self.frameSize = vec2(self.frameWidth,self.frameHeight)

   self.counter = 0

   self.mesh = mesh()
   --self.texture = img
   self.mesh.texture = img -- self.texture
   self.mesh:addRect(0,0,self.frameWidth,self.frameHeight)
end

function Spritesheet:draw()

   self.counter = self.counter + DeltaTime
   if self.counter > 1/30 then

   self.frame = self.frame + 1 
   if self.frame > self.totalFrames then
       self.frame=0
   end

   self.x = self.x -1


   colUnit = 1/self.frameCols
   rowUnit = 1/self.frameRows

   row = math.floor(self.frame / self.frameRows)
   col = math.floor(self.frame % self.frameCols)

   self.mesh:setRectTex(1,
   col * colUnit,
  ( 1-rowUnit) - row * rowUnit,
   colUnit,
rowUnit)

       self.mesh:setRect(1,self.x,self.y,self.frameWidth,self.frameHeight)

    self.counter = 0
    end

   self.mesh:draw()
end

function Spritesheet:touched(touch)

end

Jarc

Here is way 2 working with caveman but I can’t get to work with wizard.
Caveman download above

function setup()

--load up the sprite sheet into a mesh
-- in this case the sprite sheet contains 5 by 5 sprites, each 32 by 32 pixels
-- the file is available from
--http://db.tt/eMJa1tsS
zombie=mesh()
-- you may need to change this to the location where you save the file
img=readImage(asset.documents.Dropbox["Photo Apr 09, 2 42 26 PM.jpg"])
zombie.texture=img
rows=4 --number of rows in the sprite sheet
cols=4 -- number of columns in the sprite sheet
sizex=32 -- width of the sprite image to display on screen - note this does not need to be the original pixel size
sizey=32 -- height of the sprite image
--set up some constants
walkleft=0
walkright=1
turnlefttoright=2
turnrighttoleft=3

--set up some arrays to hold the animations
animdelay=0
animdelaymax=3
animx={}
animy={}
movex={}
movey={}
--define the animation frames
--starting from bottom left as 0,0, enter the column (animx) and row (animy) of the frame you want
--walking left
animx[0]={0,1,2,3,4,0,1,2} 
animy[0]={4,4,4,4,4,3,3,3}
movex[0]={-1,-1,-1,-1,-1,-1,-1,-1}
movey[0]={0,0,0,0,0,0,0,0}
--walking right
animx[1]={0,1,2,3,4,0,1,2}
animy[1]={2,2,2,2,2,1,1,1}
movex[1]={1,1,1,1,1,1,1,1}
movey[1]={0,0,0,0,0,0,0,0}
--turning left to right
animx[2]={3,4,3}
animy[2]={3,3,1}
movex[2]={0,0,0}
movey[2]={0,0,0}
--turning right to left
animx[3]={3,4,3}
animy[3]={1,3,3}
movex[3]={0,0,0}
movey[3]={0,0,0}

x=150  --initial  x coordinate of the sprite
y=HEIGHT/2  -- initial y coordinate of the sprite
state=walkleft -- initial state of the sprite
curFrame=1 -- the initial frame of the animation in terms of the position in the animx and animy arrays
speed=3 -- a factor by which to speed up the movement (alternatively change the values in movex but this provides greater flexibilty
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)
    --clear the mesh
    zombie:clear()


--cycle through the animation
--add a delay to solw the animation down
animdelay = animdelay + 1
if animdelay>animdelaymax then
    --move to the next frame in the animation
    curFrame = curFrame + 1
    --check to see if this frame is past the end of the animation array for the current state and if so, reset
    if curFrame>#animx[state] and state==turnlefttoright then
        state=walkright
        curFrame=1
    elseif curFrame>#animx[state] and state==turnrighttoleft then
        state=walkleft
        curFrame=1
    elseif curFrame>#animx[state] then
        curFrame=1
    end

    --reset the animation delay counter
    animdelay=0
end
    --adjust the position according to the values in the movement arrays
    x = x + movex[state][curFrame]*speed
    y = y + movey[state][curFrame]*speed -- not needed in this demo as there is no vertical movement
--check to see if the edges of the screen have been met
if x>WIDTH-100 and state~=turnrighttoleft then
    state=turnrighttoleft
    curFrame=1 -- reset the animation
elseif x<100 and state~=turnlefttoright then
    state=turnlefttoright
    curFrame=1
end
    -- Do your drawing here
     local idx=zombie:addRect(x,y,sizex,sizey)
    zombie:setRectTex(idx,(animx[state][curFrame])/cols,(animy[state][curFrame])/rows,1/cols,1/rows)   

    --draw the mesh
    zombie:draw()
end

dave1707

@Jarc Here’s a version that works with both. Enter the number of images wide and high (4,4 for caveman and 10,1 for wizzard) then press extract. You can slide the scale to increase or decrease the size and slide your finger on the screen to move the image around.

displayMode(STANDARD)

function setup()
    tab={}
    delay=0
    i=1
    img=readImage(asset.documents.Dropbox.wizzard)
    iw=img.width
    ih=img.height
    dx,dy=0,HEIGHT/2
    sizeX=iw
    sizeY=ih    
    spriteMode(CORNER)
    parameter.text("wide")
    parameter.text("high")
    parameter.action("extract",extract)
    parameter.integer("scale",1,500,ih)
    img1=image(iw,ih)    
    setContext(img1)
    background(255)
    sprite(img,0,0)
    setContext()    
    w=img1.width
    h=img1.height
end

function extract()
    tab={}
    dx,dy=WIDTH/2,HEIGHT/2
    if wide=="" or high=="" then
        return
    end
    stepX=iw//wide
    stepY=ih//high
    for y=1,sizeY,stepY do
        for x=1,sizeX,stepX do
            table.insert(tab,img1:copy(x,y,stepX,stepY))
        end
    end
end

function draw()
    background(255)
    delay=delay+1    
    if #tab>0 then
        if delay>10 then
            delay=1
            i=i+1
        end
        if i>#tab then
            i=1
        end
        sprite(tab[i],dx,dy,scale)
    else
        sprite(img1,dx,dy,400)
    end
end

function touched(t)
    if t.state==MOVING then
        dx=dx+t.deltaX
        dy=dy+t.deltaY 
    end   
end

Jarc

@dave1707 Your version works the best and I’ve been digging through the forums all day. Thanks!

dave1707

@Jarc It only works if the sprite sheet is created right and not every sprite sheet is.

Jarc

@dave1707 is it possible to change animation by touching a specific point on the screen. Meaning if I have a on-screen D-Pad or joystick if I touch Down the code will run sprite sheet row 2, 1-8.
Example sprite-sheet attached.

Jarc

Maybe a better example with a visual. Basically I’m trying to link the sprite sheet rows to each direction of the joystick or Dpad controller.

displayMode(FULLSCREEN)

function setup()
    pic=readImage(asset.documents.Dropbox["Photo Apr 10, 8 33 09 PM.png"])
    cx,cy=0,0
    sx,sy=WIDTH/2,HEIGHT/2
    dx,dy=0,0

    tab={}
    delay=0
    i=1
    img=readImage(asset.documents.Dropbox["Photo Apr 10, 8 33 09 PM.png"])
    iw=img.width
    ih=img.height
    dx,dy=0,HEIGHT/2
    sizeX=iw
    sizeY=ih    
    spriteMode(CORNER)
    parameter.text("wide")
    parameter.text("high")
    parameter.action("extract",extract)
    parameter.integer("scale",1,500,ih)
    img1=image(iw,ih)    
    setContext(img1)
    background(255)
    sprite(img,0,0)
    setContext()    
    w=img1.width
    h=img1.height

end

function extract()
    tab={}
    dx,dy=WIDTH/2,HEIGHT/2
    if wide=="" or high=="" then
        return
    end
    stepX=iw//wide
    stepY=ih//high
    for y=1,sizeY,stepY do
        for x=1,sizeX,stepX do
            table.insert(tab,img1:copy(x,y,stepX,stepY))
        end
    end
end


function draw()
    background(40, 40, 50)
    if cx>0 and cy>0 then
        drawCirc()
    end
    sx=sx+dx
    sy=sy+dy
    sprite(pic,sx,sy)

    delay=delay+1    
    if #tab>0 then
        if delay>10 then
            delay=1
            i=i+1
        end
        if i>#tab then
            i=1
        end
        sprite(tab[i],dx,dy,scale)
    else
        sprite(img1,dx,dy,400)
    end

end

function touched(t)

        if t.state==MOVING then
        dx=dx+t.deltaX
        dy=dy+t.deltaY 
    end   

    if t.state==BEGAN then
        cx,cy=t.x,t.y      
    end
    if t.state==MOVING then
        if insideCircle(t.x,t.y) then
            dx=(t.x-cx)/10
            dy=(t.y-cy)/10
        else
            cx,cy=0,0
            dx,dy=0,0
        end
    end
    if t.state==ENDED then
        cc,cy=0,0
        dx,dy=0,0
    end
end

function insideCircle(x,y)
    -- check if touch is inside of circle or ellipse
    a,b=100,100 -- radius of circle or a,b of ellipse
    if (x-cx)^2/a^2+(y-cy)^2/b^2 <= 1 then 
        return true
    end
    return false
end

function drawCirc()
    fill(255, 255, 255, 50)
    ellipse(cx,cy,8) -- draw circle center
    fontSize(15)
    fill(233, 80, 133)
    text("Up",cx,cy+80)
    text("Down",cx,cy-80)
    text("Right",cx+80,cy)
    text("Left",cx-80,cy)
    fontSize(10)
    text("DTL",cx-60,cy+60)
    text("DTR",cx+60,cy+60)
    text("DBL",cx-60,cy-60)
    text("DBR",cx+60,cy-60)
    noFill()
    stroke(255,255,255,50)
    strokeWidth(4)
    ellipse(cx,cy,200) -- draw outer circle     
end

dave1707

The function extract creates a table of each image. You just need to loop thru each section of the table corresponding on the direction your going. For example, if your going down, loop thru table positions 9 thru16, if up then 49 thru 56.

Jarc

@dave1707 So loop through the table with a if-then statement in touch function?

dave1707

It’s not going to be as easy as it sounds. The circle might show the eight directions, but the joystick does every direction, so an if statement in touch isn’t going to do it. I’ll look into it more tomorrow.

dave1707

@Jarc Here’s a hacked up version. Change the img name to the name you have for the person sprite sheet. The joystick is now eight squares that you touch to change direction. Changes can be made from this hacked code.

displayMode(FULLSCREEN)

function setup()
    img=readImage(asset.documents.Dropbox.rty)

    rectMode(CENTER)
    x=WIDTH/2
    y=100
    dir=1
    i=1
    bTab={}
    table.insert(bTab,button(x-50,y+50,17))
    table.insert(bTab,button(x,y+50,9))
    table.insert(bTab,button(x+50,y+50,1))
    table.insert(bTab,button(x-50,y,33))
    table.insert(bTab,button(x+50,y,25))
    table.insert(bTab,button(x-50,y-50,57))
    table.insert(bTab,button(x,y-50,49))
    table.insert(bTab,button(x+50,y-50,41))
    delay=0
    iw=img.width
    ih=img.height
    sizeX=iw
    sizeY=ih    
    spriteMode(CORNER)
    img1=image(iw,ih)    
    setContext(img1)
    background(255)
    sprite(img,0,0)
    setContext()   
    wide=8
    high=8 
    extract()
end

function extract()
    tab={}
    dx,dy=WIDTH/2,HEIGHT/2
    stepX=iw//wide
    stepY=ih//high
    sizeY=stepY*high
    sizeX=stepX*wide
    for y=1,sizeY,stepY do
        for x=1,sizeX,stepX do
            table.insert(tab,img1:copy(x,y,stepX,stepY))
        end
    end
end

function draw()
    background(255)
    for a,b in pairs(bTab) do
        b:draw()
    end
    if #tab>0 then
        delay=delay+1   
        if delay>15 then
            delay=1
            i=i+1
            if i>dir+7 then
                i=dir
            end
        end
        sprite(tab[i],dx-50,dy,100)
    end
end

function touched(t)
    if t.state==BEGAN then
        for a,b in pairs(bTab) do
            b:touched(t)
        end
    end
end

button=class()

function button:init(x,y,d)
    self.x=x
    self.y=y
    self.dir=d
end

function button:draw()
    rect(self.x,self.y,50,50)
end

function button:touched(t)
    if t.x>self.x-25 and t.x<self.x+25 and t.y>self.y-25 and t.y<self.y+25 then
        dir=self.dir
        i=dir
    end
end

Jarc

@dave1707 Awesome, thanks. Great code to start with. I’ll be making changes and working on this tonight.

Jarc

@dave1707 I got the Up,Down,Left and Right to work but I need help with the diagonals.

displayMode(FULLSCREEN)

function setup()
    img=readImage(asset.documents.Dropbox["Photo Apr 10, 8 33 09 PM.png"])

    rectMode(CENTER)
    x=WIDTH/2
    y=100
    dir=1
    i=1
    bTab={}
    table.insert(bTab,button(x-50,y+50,17))
    table.insert(bTab,button(x,y+50,9))
    table.insert(bTab,button(x+50,y+50,1))
    table.insert(bTab,button(x-50,y,33))
    table.insert(bTab,button(x+50,y,25))
    table.insert(bTab,button(x-50,y-50,57))
    table.insert(bTab,button(x,y-50,49))
    table.insert(bTab,button(x+50,y-50,41))
    delay=0
    iw=img.width
    ih=img.height
    sizeX=iw
    sizeY=ih    
    spriteMode(CORNER)
    img1=image(iw,ih)    
    setContext(img1)
    background(255)
    sprite(img,0,0)
    setContext()   
    wide=8
    high=8 
    extract()
    xs=0
    xs2=0
    b1=vec4(WIDTH/2-50,100,50,50)
    b2=vec4(WIDTH/2+50,100,50,50)
    b3=vec4(WIDTH/2,150,50,50)
    b4=vec4(WIDTH/2,50,50,50)

end

function extract()
    tab={}
    dx,dy=WIDTH/2,HEIGHT/2
    stepX=iw//wide
    stepY=ih//high
    sizeY=stepY*high
    sizeX=stepX*wide
    for y=1,sizeY,stepY do
        for x=1,sizeX,stepX do
            table.insert(tab,img1:copy(x,y,stepX,stepY))
        end
    end
end

function draw()
    background(255)
    for a,b in pairs(bTab) do
        b:draw()
    end
    if #tab>0 then
        delay=delay+1   
        if delay>15 then
            delay=1
            i=i+1
            if i>dir+7 then
                i=dir
            end
        end

         --sprite position and scale size
        sprite(tab[i],dx-50,dy,100)
        dx=dx+xs
        dy=dy+xs2

    pushStyle()   
    fill(255, 0, 0)
    rect(b1.x,b1.y,b1.z,b1.w)   -- button 1 left
    rect(b2.x,b2.y,b2.z,b2.w)   -- button 2 right
    rect(b3.x,b3.y,b3.z,b3.w)   -- button 3 top
    rect(b4.x,b4.y,b4.z,b4.w)   -- button 4 bottom
    popStyle()    

    pushStyle()
    fill(248)
    fontSize(15)
    text("Left",b1.x,b1.y)
    text("Right",b2.x,b2.y)
    text("Top",b3.x,b3.y)
    text("Bottom",b4.x,b4.y)   
    popStyle()    
    end
end

--touch controls,directions
function touched(t)
    if t.state==BEGAN or t.state==MOVING then
        xs=0
        if t.x>b1.x-b1.z/2 and t.x<b1.x+b1.z/2 and
            t.y>b1.y-b1.w/2 and t.y<b1.y+b1.z/2 then
                xs=-2.2
        end
     if t.x>b2.x-b2.z/2 and t.x<b2.x+b2.z/2 and
            t.y>b2.y-b2.w/2 and t.y<b2.y+b1.z/2 then
                xs=2.2
        end
        if t.x>b3.x-b3.z/2 and t.x<b3.x+b3.z/2 and
            t.y>b3.y-b3.w/2 and t.y<b3.y+b1.z/2 then
                xs2=2.2
        end
        if t.x>b4.x-b4.z/2 and t.x<b4.x+b4.z/2 and
            t.y>b4.y-b4.w/2 and t.y<b4.y+b1.z/2 then
                xs2=-2.2
        end

        for a,b in pairs(bTab) do
            b:touched(t)
        end
    end
    if t.state==ENDED then
        xs=0
        xs2=0
    end
end

--class for dpad
button=class()

function button:init(x,y,d)
    self.x=x
    self.y=y
    self.dir=d
end

--drawing pad
function button:draw()
    rect(self.x,self.y,50,50)
end

--touch for dpad
function button:touched(t)
    if t.x>self.x-25 and t.x<self.x+25 and t.y>self.y-25 and t.y<self.y+25 then
        dir=self.dir
        i=dir
    end
    end

dave1707

@Jarc Here’s another version to work from.

Code removed and updated below

Jarc

@dave1707 Amazing! As always, thank you for the help.

dave1707

@Jarc Here’s a new version. I stripped all the unnecessary code out and created separate functions for routines. This might be easier to modify.

displayMode(FULLSCREEN)

function setup()
    img=readImage(asset.documents.Dropbox.rty)
    rectMode(CENTER)
    dir,i=1,1
    delay,xs,ys=0,0,0
    dx,dy=WIDTH/2,HEIGHT/2
    createButtons()
    extractSprites()
end    

function createButtons()
    x,y=WIDTH/2,100
    bTab={}
    table.insert(bTab,button(x-50,y+50,17,-1,1,"u-l"))
    table.insert(bTab,button(x,y+50,9,0,1,"up"))
    table.insert(bTab,button(x+50,y+50,1,1,1,"u-r"))
    table.insert(bTab,button(x-50,y,33,-1,0,"left"))
    table.insert(bTab,button(x+50,y,25,1,0,"right"))
    table.insert(bTab,button(x-50,y-50,57,-1,-1,"d-l"))
    table.insert(bTab,button(x,y-50,49,0,-1,"down"))
    table.insert(bTab,button(x+50,y-50,41,1,-1,"d-r"))
end

function extractSprites()   
    tab={}
    stepX=img.width//8
    stepY=img.height//8
    sizeX=stepX*8
    sizeY=stepY*8
    for y=1,sizeY,stepY do
        for x=1,sizeX,stepX do
            table.insert(tab,img:copy(x,y,stepX,stepY))
        end
    end
end

function draw()
    background(255)
    drawGround()
    checkButtons()   
    drawPerson()
end

function drawGround()
    dx=dx+xs
    dy=dy+ys
    for x=-20,20 do
        for y=-20,20 do
            sprite(asset.builtin.Blocks.Gravel_Stone,x*128-dx,y*128-dy)
        end
    end   
end

function checkButtons()
    for a,b in pairs(bTab) do
        b:draw()
    end
end

function drawPerson()    
    delay=delay+1   
    if delay>15 then
        delay=1
        if xs~=0 or ys~=0 then
            i=i+1
            if i>dir+7 then
                i=dir
            end
        end
    end
    sprite(tab[i],WIDTH/2,HEIGHT/2,100)
end

function touched(t)
    if t.state==BEGAN or t.state==MOVING then
        for a,b in pairs(bTab) do
            b:touched(t)
        end
    elseif t.state==ENDED then
        xs=0
        ys=0
    end
end

button=class()

function button:init(x,y,d,xs,ys,n)
    self.x=x    -- x position   
    self.y=y    -- y position
    self.dir=d  -- person direction
    self.xs=xs  -- person speed x
    self.ys=ys  -- person speed y
    self.name=n -- button name
end

function button:draw()
    fill(255,0,0)
    rect(self.x,self.y,50,50)
    fill(255)
    text(self.name,self.x,self.y)
end

function button:touched(t)
    if t.x>self.x-25 and t.x<self.x+25 and t.y>self.y-25 and t.y<self.y+25 then
        dir=self.dir
        i=dir
        xs=self.xs
        ys=self.ys
    end
end

Jarc

@dave1707 This is how I’m modifying to fit specific backgrounds and how I’m increasing character speed. Is this the easiest way with this code?
Background example attached.

On a side note, anyway to go diagonal using vec4? I used it to go Up, Down, Left and Right but can’t figure out diagonals that way.

displayMode(FULLSCREEN)

function setup()
    img=readImage(asset.documents.Dropbox["Photo Apr 10, 8 24 31 PM.png"])
    rectMode(CENTER)
    dir,i=1,1
    delay,xs,ys=0,0,0
    dx,dy=WIDTH/2,HEIGHT/2
    createButtons()
    extractSprites()
end    

function createButtons()
    x,y=WIDTH/2,100
    bTab={}
    table.insert(bTab,button(x-50,y+50,17,-1,1,"u-l"))
    table.insert(bTab,button(x,y+50,9,0,1,"up"))
    table.insert(bTab,button(x+50,y+50,1,1,1,"u-r"))
    table.insert(bTab,button(x-50,y,33,-1,0,"left"))
    table.insert(bTab,button(x+50,y,25,1,0,"right"))
    table.insert(bTab,button(x-50,y-50,57,-1,-1,"d-l"))
    table.insert(bTab,button(x,y-50,49,0,-1,"down"))
    table.insert(bTab,button(x+50,y-50,41,1,-1,"d-r"))
end

function extractSprites()   
    tab={}
    stepX=img.width//8
    stepY=img.height//8
    sizeX=stepX*8
    sizeY=stepY*8
    for y=1,sizeY,stepY do
        for x=1,sizeX,stepX do
            table.insert(tab,img:copy(x,y,stepX,stepY))
        end
    end
end

function draw()
    background(255)
    drawGround()
    checkButtons()   
    drawPerson()
end

function drawGround()
    dx=dx+xs*4
    dy=dy+ys*4
    for x=-20,20 do
        for y=-20,20 do
            sprite(asset.documents.Dropbox["Photo Apr 09, 7 31 15 PM.png"],x*64-dx,y*64-dy)
        end
    end   
end

function checkButtons()
    for a,b in pairs(bTab) do
        b:draw()
    end
end

function drawPerson()    
    delay=delay+1   
    if delay>15 then
        delay=1
        if xs~=0 or ys~=0 then
            i=i+1
            if i>dir+7 then
                i=dir
            end
        end
    end
    sprite(tab[i],WIDTH/2,HEIGHT/2,100)
end

function touched(t)
    if t.state==BEGAN or t.state==MOVING then
        for a,b in pairs(bTab) do
            b:touched(t)
        end
    elseif t.state==ENDED then
        xs=0
        ys=0
    end
end

button=class()

function button:init(x,y,d,xs,ys,n)
    self.x=x    -- x position   
    self.y=y    -- y position
    self.dir=d  -- person direction
    self.xs=xs  -- person speed x
    self.ys=ys  -- person speed y
    self.name=n -- button name
end

function button:draw()
    fill(255,0,0)
    rect(self.x,self.y,50,50)
    fill(255)
    text(self.name,self.x,self.y)
end

function button:touched(t)
    if t.x>self.x-25 and t.x<self.x+25 and t.y>self.y-25 and t.y<self.y+25 then
        dir=self.dir
        i=dir
        xs=self.xs
        ys=self.ys
    end
end

Jarc

@dave1707 in the code above I only made changes here.

function drawGround()
    dx=dx+xs*4
    dy=dy+ys*4
    for x=-20,20 do
        for y=-20,20 do
            sprite(asset.documents.Dropbox["Photo Apr 09, 7 31 15 PM.png"],x*64-dx,y*64-dy)
        end
    end   
end

dave1707

@Jarc You can add whatever background you want. You can add a table that has different values in it and depending on the table value you can insert different sections in the ground. You can then avoid them as the person walks around.

Why do you want to add a vec4 for movement. The movement is working in all directions now.

dave1707

@Jarc Here’s an example of a background I have in some other program I created. The player can collect the stars by running into them. They can’t go up on a black area, but they can fall thru a black area. They also can’t go thru a brick area.

Jarc

@dave1707 I wanted to add a vec4 for movement just for the sake of learning and because I couldn’t figure it out. I’m going to use your way though, especially now since I know how to add backgrounds with the table. The visual helped me comprehend. Thanks!

Jarc

@dave1707 I thought I knew what you meant but after a couple of hours of trail and error I realized I don’t. Can I get a example in code of inserting different sections in the ground or a link to help me understand. All I’m getting is the background image in all directions endlessly.

dave1707

Slide your finger to move the ground around.

displayMode(FULLSCREEN)

function setup()
    tab={   asset.builtin.Blocks.Grass_Top,     -- 1 thru 6
            asset.builtin.Blocks.Stone_Coal_Alt,    -- 7
            asset.builtin.Blocks.Sand,              -- 8
            asset.builtin.Blocks.Stone_Diamond_Alt, -- 9
            asset.builtin.Blocks.Mushroom_Red,      -- 10
            asset.builtin.Blocks.Wheat_Stage4,      -- 11
            asset.builtin.Blocks.Fence_Stone,       -- 12
            asset.builtin.Blocks.Water }            -- 13
    bTab={}
    for x=-20,20 do
        for y=-20,20 do
            table.insert(bTab,{x=x,y=y,v=math.random(13)})
        end       
    end
    dx,dy=WIDTH/2,HEIGHT/2
end

function draw()
    background(0)
    s=130
    for a,b in pairs(bTab) do
        if b.v<7 then
            sprite(tab[1],b.x*s+dx,b.y*s+dy)        -- 1 thru 6
        else
            sprite(tab[b.v-5],b.x*s+dx,b.y*s+dy)    -- 7 thru 13
        end
    end
end

function touched(t)
    if t.state==MOVING then
        dx=dx+t.deltaX
        dy=dy+t.deltaY
    end
end

Jarc

@dave1707 Thanks btw I figured out how to move all directions using vec4.
Correct if I’m wrong but to my understanding your way moves the ground corresponding to the sprite sheet image.
I believe this way moves the spritesheet image via x y coordinates.

displayMode(FULLSCREEN)

function setup()
    img=readImage(asset.documents.Dropbox["Photo Apr 10, 8 24 31 PM.png"])

    rectMode(CENTER)
    x=WIDTH/2
    y=100
    dir=1
    i=1
    bTab={}
    table.insert(bTab,button(x-50,y+50,17))
    table.insert(bTab,button(x,y+50,9))
    table.insert(bTab,button(x+50,y+50,1))
    table.insert(bTab,button(x-50,y,33))
    table.insert(bTab,button(x+50,y,25))
    table.insert(bTab,button(x-50,y-50,57))
    table.insert(bTab,button(x,y-50,49))
    table.insert(bTab,button(x+50,y-50,41))
    delay=0
    iw=img.width
    ih=img.height
    sizeX=iw
    sizeY=ih    
    spriteMode(CORNER)
    img1=image(iw,ih)    
    setContext(img1)
    background(255)
    sprite(img,0,0)
    setContext()   
    wide=8
    high=8 
    extract()
    xs=0
    ys=0
    b1=vec4(WIDTH/2-50,100,50,50) --left
    b2=vec4(WIDTH/2+50,100,50,50) --right
    b3=vec4(WIDTH/2,150,50,50) --top
    b4=vec4(WIDTH/2,50,50,50) -- bottom
    b5=vec4(WIDTH/2-50,150,50,50) --top left
    b6=vec4(WIDTH/2+50,150,50,50) -- top right
    b7=vec4(WIDTH/2-50,50,50,50) -- bottom left
    b8=vec4(WIDTH/2+50,50,50,50) -- bottom right

end

function extract()
    tab={}
    dx,dy=WIDTH/2,HEIGHT/2
    stepX=iw//wide
    stepY=ih//high
    sizeY=stepY*high
    sizeX=stepX*wide
    for y=1,sizeY,stepY do
    for x=1,sizeX,stepX do
            table.insert(tab,img1:copy(x,y,stepX,stepY))
        end
    end
end

function draw()
    background(255)
    for a,b in pairs(bTab) do
        b:draw()
    end
    if #tab>0 then
        delay=delay+1   
        if delay>15 then
            delay=1
            i=i+1
            if i>dir+7 then
                i=dir
            end
        end

         --sprite position and scale size
        sprite(tab[i],dx-50,dy,100)
        dx=dx+xs
        dy=dy+ys

    pushStyle()   
    fill(255, 0, 0)
    rect(b1.x,b1.y,b1.z,b1.w)   -- button 1 left
    rect(b2.x,b2.y,b2.z,b2.w)   -- button 2 right
    rect(b3.x,b3.y,b3.z,b3.w)   -- button 3 top
    rect(b4.x,b4.y,b4.z,b4.w)   -- button 4 bottom
    rect(b5.x,b5.y,b5.z,b5.w)
    rect(b6.x,b6.y,b6.z,b6.w)
    rect(b7.x,b7.y,b7.z,b7.w)
    rect(b8.x,b8.y,b8.z,b8.w)   
    popStyle()    

    pushStyle()
    fill(248)
    fontSize(15)
    text("Left",b1.x,b1.y)
    text("Right",b2.x,b2.y)
    text("Top",b3.x,b3.y)
    text("Bottom",b4.x,b4.y)
    text("TL",b5.x,b5.y)
    text("TR",b6.x,b6.y)
    text("BL",b7.x,b7.y)
    text("BR",b8.x,b8.y)
    popStyle()       
    end
end

--touch controls,directions
function touched(t)
    if t.state==BEGAN or t.state==MOVING then
        xs=0
    if t.x>b1.x-b1.z/2 and t.x<b1.x+b1.z/2 and
            t.y>b1.y-b1.w/2 and t.y<b1.y+b1.z/2 then
                xs=-2.2
        end
    if t.x>b2.x-b2.z/2 and t.x<b2.x+b2.z/2 and
            t.y>b2.y-b2.w/2 and t.y<b2.y+b1.z/2 then
                xs=2.2
        end
    if t.x>b3.x-b3.z/2 and t.x<b3.x+b3.z/2 and
            t.y>b3.y-b3.w/2 and t.y<b3.y+b1.z/2 then
                ys=2.2
        end
    if t.x>b4.x-b4.z/2 and t.x<b4.x+b4.z/2 and
            t.y>b4.y-b4.w/2 and t.y<b4.y+b1.z/2 then
                ys=-2.2
        end
        if t.x>b5.x-b5.z/2 and t.x<b5.x+b5.z/2 and
            t.y>b5.y-b5.w/2 and t.y<b5.y+b1.z/2 then
                ys=2.2
                xs=-2.2
        end
    if t.x>b6.x-b6.z/2 and t.x<b6.x+b6.z/2 and
            t.y>b6.y-b6.w/2 and t.y<b6.y+b1.z/2 then
                ys=2.2
                xs=2.2
            end
    if t.x>b7.x-b7.z/2 and t.x<b7.x+b7.z/2 and
            t.y>b7.y-b7.w/2 and t.y<b7.y+b1.z/2 then
                ys=-2.2
                xs=-2.2
            end
    if t.x>b8.x-b8.z/2 and t.x<b8.x+b8.z/2 and
            t.y>b8.y-b8.w/2 and t.y<b8.y+b1.z/2 then
                ys=-2.2
                xs=2.2
            end

    for a,b in pairs(bTab) do
            b:touched(t)
        end
    end
    if t.state==ENDED then
        xs=0
        ys=0
    end
end

--class for dpad
button=class()

function button:init(x,y,d)
    self.x=x
    self.y=y
    self.dir=d
end

--drawing pad
function button:draw()
    rect(self.x,self.y,50,50)
end

--touch for dpad
function button:touched(t)
    if t.x>self.x-25 and t.x<self.x+25 and t.y>self.y-25 and t.y<self.y+25 then
        dir=self.dir
        i=dir
    end
    end

dave1707

@Jarc What are you going to do when the sprite person walks off the edge of the screen. Your vec4 works, but look at the size of your touched routine. The purpose of a class is to cut down on the code for multiple items. Using a class, you make changes to the code for 1 button (which is all buttons), in your code you’ll have to make changes for 8 buttons. As you code more and use classes, you see the advantages of using them. It took me a long time before I understood how classes worked and why they should be used.

PS. By moving the ground, the ground can be a lot larger than the screen size. In the background example above, as you scroll the background around, you’ll see that it’s a lot larger than the screen.

Jarc

@dave1707 Way to shoot me down Dave, just kidding I see your point. Thanks for the insight you’re right.

dave1707

@Jarc I didn’t mean anything by what I said, just trying to point out things. By moving the character, you’re kind of limited by the screen size unless you add a lot of code when the character reaches the screen edge. By keeping the character in the middle and moving the background, the background can be any size. You can constantly create more background off screen as the character moves. As for vec4’s, it’s good to learn and try new things. One thing you’ll find that you use a lot are tables and classes. You can skip using them, but you’ll be writing a lot more code and it will be more complicated. Like I said above, it took me a long time before I understood classes. I didn’t know why they were used and I didn’t have anyone to explain well enough their use. Or maybe I was told enough, but I just didn’t understand. Just keep trying new things and asking questions.

Jarc

@dave1707 how do I tie a dynamic collider to the sprite animation so whenever I move any direction it stays on him.

2nd question, how do I set up a static collider so he can’t walk through walls and can interact with objects.

displayMode(FULLSCREEN)

function setup()
    img=readImage(asset.documents.Dropbox["Photo Apr 10, 8 24 31 PM.png"])
    rectMode(CENTER)
    dir,i=1,1
    delay,xs,ys=0,0,0
    dx,dy=WIDTH/2,HEIGHT/2
    createButtons()
    extractSprites()
end    

function createButtons()
    x,y=WIDTH/2,100
    bTab={}
    table.insert(bTab,button(x-50,y+50,17,-1,1,"u-l"))
    table.insert(bTab,button(x,y+50,9,0,1,"up"))
    table.insert(bTab,button(x+50,y+50,1,1,1,"u-r"))
    table.insert(bTab,button(x-50,y,33,-1,0,"left"))
    table.insert(bTab,button(x+50,y,25,1,0,"right"))
    table.insert(bTab,button(x-50,y-50,57,-1,-1,"d-l"))
    table.insert(bTab,button(x,y-50,49,0,-1,"down"))
    table.insert(bTab,button(x+50,y-50,41,1,-1,"d-r"))
end

function extractSprites()   
    tab={}
    stepX=img.width//8
    stepY=img.height//8
    sizeX=stepX*8
    sizeY=stepY*8
    for y=1,sizeY,stepY do
        for x=1,sizeX,stepX do
            table.insert(tab,img:copy(x,y,stepX,stepY))
        end
    end
end

function draw()
    background(255)
    drawGround()
    checkButtons()   
    drawPerson()
end

function drawGround()
    dx=dx+xs
    dy=dy+ys
    for x=-20,20 do
        for y=-20,20 do
            sprite(asset.builtin.Blocks.Gravel_Stone,x*128-dx,y*128-dy)
        end
    end   
end

function checkButtons()
    for a,b in pairs(bTab) do
        b:draw()
    end
end

function drawPerson()    
    delay=delay+1   
    if delay>15 then
        delay=1
        if xs~=0 or ys~=0 then
            i=i+1
            if i>dir+7 then
                i=dir
            end
        end
    end
    sprite(tab[i],WIDTH/2,HEIGHT/2,100)
end

function touched(t)
    if t.state==BEGAN or t.state==MOVING then
        for a,b in pairs(bTab) do
            b:touched(t)
        end
    elseif t.state==ENDED then
        xs=0
        ys=0
    end
end

button=class()

function button:init(x,y,d,xs,ys,n)
    self.x=x    -- x position   
    self.y=y    -- y position
    self.dir=d  -- person direction
    self.xs=xs*2  -- person speed x
    self.ys=ys*2 -- person speed y
    self.name=n -- button name
end

function button:draw()
    fill(255,0,0)
    rect(self.x,self.y,50,50)
    fill(255)
    text(self.name,self.x,self.y)
end

function button:touched(t)
    if t.x>self.x-25 and t.x<self.x+25 and t.y>self.y-25 and t.y<self.y+25 then
        dir=self.dir
        i=dir
        xs=self.xs
        ys=self.ys
    end
end

dave1707

@Jarc You know the x,y position of your sprite walker. To prevent the walker from going thru a wall, just make sure the walker won’t have the same x,y position plus or minus some value as the wall.

Jarc

@dave1707 Why is the other ellipse moving relative to me? I want to be able to walk up to it, is it a problem with background? Also when I give the sprite collider coordinates

 self.x=x 
 self.y=y

it doesn’t work.

Here’s what I have so far.

displayMode(FULLSCREEN)

function setup()
    img=readImage(asset.documents.Dropbox["Photo Apr 10, 8 24 31 PM.png"])
    rectMode(CENTER)
    dir,i=1,1
    delay,xs,ys=0,0,0
    dx,dy=WIDTH/2,HEIGHT/2
    createButtons()
    extractSprites()

    --Collider

    c1 = physics.body(CIRCLE,100)    -- sprite collision circle
    c1.type=STATIC
    c1.x=WIDTH/2
    c1.y=360

    c2 = physics.body(CIRCLE,50)    -- ellipse 
    c2.type=STATIC
    c2.x=400
    c2.y=750

end    

function createButtons()
    x,y=WIDTH/2,100
    bTab={}
    table.insert(bTab,button(x-50,y+50,17,-1,1,"u-l"))
    table.insert(bTab,button(x,y+50,9,0,1,"up"))
    table.insert(bTab,button(x+50,y+50,1,1,1,"u-r"))
    table.insert(bTab,button(x-50,y,33,-1,0,"left"))
    table.insert(bTab,button(x+50,y,25,1,0,"right"))
    table.insert(bTab,button(x-50,y-50,57,-1,-1,"d-l"))
    table.insert(bTab,button(x,y-50,49,0,-1,"down"))
    table.insert(bTab,button(x+50,y-50,41,1,-1,"d-r"))
end

function extractSprites()   
    tab={}
    stepX=img.width//8
    stepY=img.height//8
    sizeX=stepX*8
    sizeY=stepY*8
    for y=1,sizeY,stepY do
        for x=1,sizeX,stepX do
            table.insert(tab,img:copy(x,y,stepX,stepY))
        end
    end
end

function draw()
    background(255)
    drawGround()
    checkButtons()   
    drawPerson()
end

function drawGround()
    dx=dx+xs
    dy=dy+ys
    for x=-20,20 do
        for y=-20,20 do
            sprite(asset.builtin.Blocks.Gravel_Stone,x*128-dx,y*128-dy)
        end
    end   

    --collider
    popStyle()
    stroke(255)
    strokeWidth(1)
    noFill()
    ellipse(c1.x,c1.y,100,140)    -- collider on sprite
    ellipse(c2.x,c2.y,100,100)    -- ellipse collider
    pushStyle()

end

function checkButtons()
    for a,b in pairs(bTab) do
        b:draw()
    end
end

function drawPerson()    
    delay=delay+1   
    if delay>15 then
        delay=1
        if xs~=0 or ys~=0 then
            i=i+1
            if i>dir+7 then
                i=dir
            end
        end
    end
    sprite(tab[i],WIDTH/2,HEIGHT/2,100)
end

function touched(t)
    if t.state==BEGAN or t.state==MOVING then
        for a,b in pairs(bTab) do
            b:touched(t)
        end
    elseif t.state==ENDED then
        xs=0
        ys=0
    end
end

button=class()

function button:init(x,y,d,xs,ys,n)
    self.x=x    -- x position   
    self.y=y    -- y position
    self.dir=d  -- person direction
    self.xs=xs*2  -- person speed x
    self.ys=ys*2 -- person speed y
    self.name=n -- button name
end

function button:draw()
    fill(255,0,0)
    rect(self.x,self.y,50,50)
    fill(255)
    text(self.name,self.x,self.y)
end

function button:touched(t)
    if t.x>self.x-25 and t.x<self.x+25 and t.y>self.y-25 and t.y<self.y+25 then
        dir=self.dir
        i=dir
        xs=self.xs
        ys=self.ys
    end
end


function collide(c)  -- this gets called when a collision occurs
    if c.state==BEGAN then
        print("\ncollision")
        print("radius of body A ",c.bodyA.radius)
        print("radius of body B ",c.bodyB.radius)
    end  
end

Jarc

@dave1707 I made this change but the other ellipse still moves relative to me.

  c1.x=dx
  c1.y=dy

dave1707

Both of your collider ellipses need to be relative to the ground, dx,dy.

    --Collider

    c1 = physics.body(CIRCLE,100)    -- sprite collision circle
    c1.type=STATIC
    c1.x=WIDTH/2*2
    c1.y=360+dy

    c2 = physics.body(CIRCLE,50)    -- ellipse 
    c2.type=STATIC
    c2.x=400+dx
    c2.y=750+dy

    --collider
    popStyle()
    stroke(255)
    strokeWidth(1)
    noFill()
    ellipse(c1.x-dx,c1.y-dy,100,140)    -- collider on sprite
    ellipse(c2.x-dx,c2.y-dy,100,100)    -- ellipse collider
    pushStyle()

Jarc

@dave1707 but the collider isn’t tied to him anymore.

Jarc

@dave1707 The one with the comment “sprite collision circle” and “Collider on sprite” beside it

dave1707

Is this ok.

    c1 = physics.body(CIRCLE,100)    -- sprite collision circle
    c1.type=STATIC
    c1.x=WIDTH/2
    c1.y=HEIGHT/2

    c2 = physics.body(CIRCLE,50)    -- ellipse 
    c2.type=STATIC
    c2.x=400+dx
    c2.y=750+dy

    --collider
    popStyle()
    stroke(255)
    strokeWidth(1)
    noFill()
    ellipse(c1.x,c1.y,100,140)    -- collider on sprite
    ellipse(c2.x-dx,c2.y-dy,100,100)    -- ellipse collider
    pushStyle()

Jarc

@dave1707 This way ties it to him and I can walk to other ellipse but collision stops working.

    c1 = physics.body(CIRCLE,100)    -- sprite collision circle
    c1.type=STATIC
    c1.x=WIDTH/2
    c1.y=360


    c2 = physics.body(CIRCLE,50)    -- ellipse 
    c2.type=STATIC
    c2.x=400+dx
    c2.y=750+dy

   --collider
    popStyle()
    stroke(255)
    strokeWidth(1)
    noFill()
    ellipse(c1.x,c1.y,100,140)    -- collider on sprite   -- ellipse collider
    ellipse(c2.x-dx,c2.y-dy,100,100)    -- ellipse collider
    pushStyle()

Jarc

@dave1707 same problem with what I sent. It ties it to him and I can walk to other ellipse but collision isn’t working now.

Jarc

.

Jarc

.

dave1707

Collisions don’t work right if you try to override it. If the objects aren’t free to move on their own, you’ll get a collision detected but it won’t stop a manually moving object.

Jarc

@dave1707 So for my question at 11:00am I would have rather you said “it can’t be done on Codea” then having me go down a rabbit hole.

dave1707

@Jarc The collision still happens, but since you’re controlling the person, you’ll have to code for the collision. If a collision is detected, then don’t allow any motion in the current direction.

Jarc

@dave1707 Sorry to bring this up again but I’m having a hard time understanding what you’re saying. I think the physics engine in Codea needs tweaking. The collision isn’t happening because my collision detector function would tell me. Here is a more simple example(project below). The sprite I don’t have the Dpad linked to collision works on everything but as soon as I link the Joystick to a sprite or collision body the collision only works on falling objects. I got this method from box2D physics simulator engine so not sure why it isn’t working here when physics principles are the same. The sprite I’m controlling shouldn’t be able to walk through the edge line.

displayMode(FULLSCREEN)

function setup()
    pic=readImage("Planet Cute:Character Boy")
    cx,cy=0,0
    sx,sy=WIDTH/2,HEIGHT/2
    dx,dy=0,0

    --Collider
    c1 = physics.body(CIRCLE,100,50)    -- sprite collision circle
    c1.type=KINEMATIC
    c1.x=dx
    c1.y=dy

    c2 = physics.body(CIRCLE,50)  -- falling circle
    c2.type=DYNAMIC
    c2.x=WIDTH/2
    c2.y=600
    c2.restitution=1

    c3 = physics.body (EDGE, vec2(200,200),vec2(400,400))
    c3.x1=200
    c3.y1=200
    c3.x2=400
    c3.y2=400 

end

function draw()
    background(40, 40, 50)

    sprite(asset.builtin.Tyrian_Remastered.Boss_D,c2.x,c2.y)

    --collider
    popStyle()
    stroke(255)
    strokeWidth(1)
    noFill()
    ellipse(c2.x,c2.y,100,100) 
    line(c3.x1,c3.y1,c3.x2,c3.y2)
    pushStyle() 

    if cx>0 and cy>0 then
        drawCirc()
    end
    sx=sx+dx
    sy=sy+dy

    c1.x=sx 
    c1.y=sy 

    sprite(pic,sx,sy)
    sprite(pic,c1.x,c1.y)
end

function touched(t)
    if t.state==BEGAN then
        cx,cy=t.x,t.y      
    end
    if t.state==MOVING then
        if insideCircle(t.x,t.y) then
            dx=(t.x-cx)/10
            dy=(t.y-cy)/10
        else
            cx,cy=0,0
            dx,dy=0,0
        end
    end
    if t.state==ENDED then
        cc,cy=0,0
        dx,dy=0,0
    end
end

function insideCircle(x,y)
    -- check if touch is inside of circle or ellipse
    a,b=100,100 -- radius of circle or a,b of ellipse
    if (x-cx)^2/a^2+(y-cy)^2/b^2 <= 1 then 
        return true
    end
    return false
end

function drawCirc()
    fill(255, 255, 255, 50)
    ellipse(cx,cy,50) -- draw circle center
    fontSize(15)
    fill(233, 80, 133)
    text("Up",cx,cy+80)
    text("Down",cx,cy-80)
    text("Right",cx+80,cy)
    text("Left",cx-80,cy)
    fontSize(10)
    text("DTL",cx-60,cy+60)
    text("DTR",cx+60,cy+60)
    text("DBL",cx-60,cy-60)
    text("DBR",cx+60,cy-60)
    noFill()
    stroke(255,255,255,50)
    strokeWidth(4)
    ellipse(cx,cy,200) -- draw outer circle     
end

function collide(c)  -- this gets called when a collision occurs
    if c.state==BEGAN then
        print("\ncollision")
        print("radius of body A ",c.bodyA.radius)
        print("radius of body B ",c.bodyB.radius)
    end  
end