Resident Evil Inventory Style Help

Questions
1

I’m trying to replicate the resident evil style of inventory based on blocks and space management. I have some code i made, but is full of bugs and doesn’t support double sized blocks. Any help is appreciated.


--# Main
function setup()
    displayMode(FULLSCREEN)
   
    
    single = Brick(450,450,100,100,"*")
    single2 = Brick(550,550,100,100)
    s3 = Brick(550,450,100,100)
    s4 = Brick(450,550,100,100)
    
    double = Brick(600,600,200,100)
    
    GRID = {
    Grid(200,200),
    Grid(300,200),
    Grid(200,300),
    Grid(300,300),
    }
    
end

function draw()
    
    background(0, 0, 0, 255)
    
    stroke(255)
    strokeWidth(2)
    --rectMode(CENTER)
    
    single:draw()
    single2:draw()
    s3:draw()
    s4:draw()
    --double:draw()
    
    for pieces = 1,#GRID do
        GRID[pieces]:draw()
    end
    
end

function touched(t)

    single:touched(t)
    single2:touched(t)
    s3:touched(t)
    s4:touched(t)
    double:touched(t)
    
end

--# Brick
Brick = class()

function Brick:init(x,y,w,h,symbol,size)
    
    self.x = x
    self.y = y
    
    self.origin_x = self.x
    self.origin_y = y
    
    self.size = size or 1
    
    self.w = 100 *self.size
    self.h = h
    
    self.symbol = symbol or "&"
    
end

function Brick:draw()
    
    pushStyle()
    
    fill(127)
    
    rectMode(CORNER)
    rect(self.x,self.y,self.w,self.h)
    
    fill(0)
    text(self.symbol,self.x+self.w/2,self.y+self.h/2)
    
    self.canSnap = true
    
    popStyle()
    
    
end

function Brick:touched(t)
    
    if t.x >= self.x - self.w/2 and
    t.x <= self.x + self.w/2 and
    t.y >= self.y - self.h/2 and
    t.y <= self.y + self.h/2 and
    
    t.state == MOVING then
        
        self.x = CurrentTouch.x
        self.y = CurrentTouch.y
    
    end
    
    for pieces = 1,#GRID do
    
    if self.x + self.w/2 > GRID[pieces].x - GRID[pieces].w/2 and
    self.x - self.w/2 < GRID[pieces].x + GRID[pieces].w/2 and
    self.y + self.h/2 > GRID[pieces].y - GRID[pieces].h/2 and
    self.y - self.h/2 < GRID[pieces].y + GRID[pieces].h/2 and
    self.canSnap and
    GRID[pieces].full ~= true and
    t.state == ENDED then
        GRID[pieces].full = true
        self.x = GRID[pieces].x
        self.y = GRID[pieces].y
    else
        GRID[pieces].full = false
        --self.x = self.origin_x
        --self.y = self.origin_y
        end
        
        if self.w > GRID[pieces].w then
            self.canSnap = false
        end
    end
end

--# GRID
Grid = class()

function Grid:init(x,y)
    
    self.x = x
    self.y = y
    self.w = 100
    self.h = 100
    self.full = false
    
end

function Grid:draw()
    
    fill(0, 0, 0, 0)
    rectMode(CORNER)
    rect(self.x,self.y,self.w,self.h)
    
end

--[[ 
if you have the title of a longer work, 

--]]
2

@ShatteredWindow I don’t know what resident evil style of inventory is. Can you explain what you’re trying to do and the problems you’re having.

3

@ShatteredWindow Looking over your code, here’s some things to fix. Your double brick doesn’t work because of your code in Brick:init() . Your squares disappear if you drag them over another square because you don’t treat them as separate squares. See how to use Touch ID. You shouldn’t use CurrentTouch, just use the info for the touched function. Your squares get selected even when you’re not touching a square which means your code for touch isn’t correct.

4

This is what i am referrring to @dave1707

5

@ShatteredWindow OK. It looks like you’re close, you just need to fix what I pointed out in my above post.

6

Could you link me to some documentation on touch.id? The built-in reference is severely lacking @dave1707

7

@ShatteredWindow Try doing a forum search (area above New Discussion at top right) for touch.id or multi touch. There are plenty of examples. Let me know if you still need help.

8

Im having troubles figuring out where the touch.id comes into play @dave1707

9

@ShatteredWindow Here’s an example that uses Touch ID to keep track of multiple circles. Touch the screen with multiple fingers and move them around the screen. The color of the circle stays the same color it started as when moved over the other colors.

displayMode(FULLSCREEN)

function setup()
    tch={}   
end

function draw()
    background(40, 40, 50)
    noStroke()
    fill(255,0,0)
    rect(0,HEIGHT/2,WIDTH/2,HEIGHT/2)
    fill(0,255,0)
    rect(WIDTH/2,HEIGHT/2,WIDTH/2,HEIGHT/2)
    fill(0,0,255)
    rect(0,0,WIDTH/2,HEIGHT/2)
    fill(255,0,255)
    rect(WIDTH/2,0,WIDTH/2,HEIGHT/2)
    for a,b in pairs(tch) do
        fill(b.col)
        stroke(255)
        strokeWidth(3)
        ellipse(b.x,b.y,100)
    end
end

function touched(t)
    if t.state==BEGAN then
        if t.x<WIDTH/2 and t.y<HEIGHT/2 then
            tch[t.id]={x=t.x,y=t.y,col=color(0,0,255)}
        elseif t.x>WIDTH/2 and t.y<HEIGHT/2 then
            tch[t.id]={x=t.x,y=t.y,col=color(255,0,255)}
        elseif t.x<WIDTH/2 and t.y>HEIGHT/2 then
            tch[t.id]={x=t.x,y=t.y,col=color(255,0,0)}
        elseif t.x>WIDTH/2 and t.y>HEIGHT/2 then
            tch[t.id]={x=t.x,y=t.y,col=color(0,255,0)}
        end
    elseif t.state==MOVING then
        tch[t.id].x=t.x
        tch[t.id].y=t.y
    elseif t.state==ENDED then
        tch[t.id]=nil
    end
end
10

@ShatteredWindow I thru this together, it might be a better example. Tap the image and move them around. One at a time or all three at once.

displayMode(FULLSCREEN)

function setup()
    rectMode(CENTER)
    img1=readImage("Planet Cute:Character Boy")
    img2=readImage("Planet Cute:Character Horn Girl")
    img3=readImage("Planet Cute:Character Princess Girl")
    bTab={}
    table.insert(bTab,box(100,100,100,100,img1))
    table.insert(bTab,box(300,200,100,100,img2))
    table.insert(bTab,box(200,400,100,100,img3))
end

function draw()
    background(40, 40, 50)
    for a,b in pairs(bTab) do
        b:draw()
    end
end

function touched(t)
    for a,b in pairs(bTab) do
        b:touched(t)
    end
end

box=class()

function box:init(x,y,w,h,img)
    self.x=x
    self.y=y
    self.w=w
    self.h=h
    self.id=0
    self.img=img
end

function box:draw()
    fill(255)
    rect(self.x,self.y,self.w,self.h)
    sprite(self.img,self.x,self.y)
end

function box:touched(t)
    if t.state==BEGAN then
        if t.x>self.x-self.w/2 and t.x<self.x+self.w/2 and
                t.y>self.y-self.h/2 and t.y<self.y+self.h/2 then
            self.id=t.id
        end
    end
    if t.state==MOVING and t.id==self.id then
        self.x=t.x
        self.y=t.y
    end
    if t.state==ENDED and t.id==self.id then
        self.id=0
    end    
end
11

I have this, but i cant seem to stop the bricks overlapping


--# Brick
Brick = class()

function Brick:init(x,y,symbol,size)
    
    self.x = x
    self.y = y
    
    self.origin_x = self.x
    self.origin_y = y
    
    self.size = size or 1
    
    self.w = 100 *self.size
    self.h = 100
    
    self.id = 0
    
    self.symbol = symbol or "&"
    
end

function Brick:draw()
    
    pushStyle()
    
    fill(127)
    
    rectMode(CENTER)
    rect(self.x,self.y,self.w,self.h)
    
    fill(0)
    text(self.symbol,self.x,self.y)
    
    self.canSnap = true
    
    popStyle()
    
    
end

function Brick:touched(t)
    
    if t.x >= self.x - self.w/2 and
    t.x <= self.x + self.w/2 and
    t.y >= self.y - self.h/2 and
    t.y <= self.y + self.h/2 and
    t.state == BEGAN then
        
        self.id = t.id
        
    end
    
    if t.state == MOVING and self.id == t.id then
        
        self.x = t.x
        self.y = t.y
        
    end
    
    if t.state==ENDED and t.id==self.id then
        
        self.id = 0
       
    for k = 1,#GRID do 
    if self.x + self.w/2 > GRID[k].x - GRID[k].w/2 and
    self.x - self.w/2 < GRID[k].x + GRID[k].w/2 and
    self.y + self.h/2 > GRID[k].y - GRID[k].h/2 and
    self.y - self.h/2 < GRID[k].y + GRID[k].h/2 and
    self.canSnap and
    GRID[k].full ~= true then
    
        GRID[k].full = true
        self.x = GRID[k].x
        self.y = GRID[k].y
    else
                
        --self.x = self.origin_x
        --self.y = self.origin_y
        GRID[k].full = false
                
        end

        if self.w > GRID[k].w then
            self.canSnap = false
        end
        end
    end    
    
    --==--
    
    --==--
    
end

--# Main
function setup()
    
    Btab = {
    Brick(400,400,"H"),
    Brick(500,400,"I"),
    Brick(400,500,"J"),
    }
    
    
    GRID = {
    Grid(100,100),
    Grid(100,200),
    Grid(200,200),
    Grid(200,100)
    }
    
end

function draw()
    
    background(0)
    
    for k = 1,#GRID do
        GRID[k]:draw()
    end
    
    for B = 1,#Btab do
        Btab[B]:draw()
    end
    
end

function touched(t)
    
    for B = 1,#Btab do
        Btab[B]:touched(t)
    end
    
end

--# GRID
Grid = class()

function Grid:init(x,y)
    
    self.x = x
    self.y = y
    self.w = 100
    self.h = 100
    self.full = false
    
end

function Grid:draw()
    
    pushMatrix()
    translate(self.x,self.y)
    stroke(127, 127, 127, 193)
    lineCapMode(SQUARE)
    line(-self.w/2+1,-self.h/2+1,self.w/2-1,self.h/2-1)
    line(-self.w/2+1,self.h/2-1,self.w/2-1,-self.h/2+1)
    
    popMatrix()
    
    fill(0, 0, 0, 0)
    strokeWidth(3)
    stroke(255)
    rectMode(CENTER)
    rect(self.x,self.y,self.w,self.h)
    
    
end

--[[ 
if you have the title of a longer work, 

--]]
12

When the bricks occupy about the same spot, then you have to select only one of them. In the t.state==began code, you need to do something so that when the first brick gets selected, you don’t check the other ones.

13

Im confused as to what you mean, example?

14

Would a possible solution be to have a default position that the bricks are released and dont snap onto a slot, they zoom back to?

15

@ShatteredWindow Here’s a version that selects only one box and also moves it on top of the other boxes as it moves. This version doesn’t use touch.id, so only one box can move at a time.

displayMode(FULLSCREEN)

function setup()
    boxMov=false
    boxSel=0
    rectMode(CENTER)
    img1=readImage("Planet Cute:Character Boy")
    img2=readImage("Planet Cute:Character Horn Girl")
    img3=readImage("Planet Cute:Character Princess Girl")
    bTab={}
    table.insert(bTab,box(100,100,100,100,img1))
    table.insert(bTab,box(300,200,200,100,img2))
    table.insert(bTab,box(200,400,100,200,img3))
end

function draw()
    background(40, 40, 50)
    for a,b in pairs(bTab) do
        b:draw()
    end
    if boxMov then
        table.insert(bTab,bTab[boxSel])
        table.remove(bTab,boxSel)
        boxMov=false
        boxSel=#bTab
    end
end

function touched(t)
    for a,b in pairs(bTab) do
        b:touched(t,a)
    end
end

box=class()

function box:init(x,y,w,h,img)
    self.x=x
    self.y=y
    self.w=w
    self.h=h
    self.img=img
end

function box:draw(d)
    fill(255)
    rect(self.x,self.y,self.w,self.h)
    sprite(self.img,self.x,self.y)
end

function box:touched(t,a)
    if t.state==BEGAN then
        if t.x>self.x-self.w/2 and t.x<self.x+self.w/2 and
                t.y>self.y-self.h/2 and t.y<self.y+self.h/2 then
            boxSel=a 
            boxMov=true
        end
    end
    if t.state==MOVING and boxSel==a then
        self.x=t.x
        self.y=t.y
    end
    if t.state==ENDED then
        boxSel=0
    end    
end