Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Resident Evil Inventory Style Help

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, --]]

Comments

  • dave1707dave1707 Mod
    Posts: 7,472

    @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.

  • dave1707dave1707 Mod
    Posts: 7,472

    @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.

  • This is what i am referrring to @dave1707

    IMG_1175.JPG 32.8K
  • dave1707dave1707 Mod
    Posts: 7,472

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

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

  • dave1707dave1707 Mod
    Posts: 7,472

    @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.

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

  • dave1707dave1707 Mod
    Posts: 7,472

    @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
    
  • dave1707dave1707 Mod
    Posts: 7,472

    @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
    
  • 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, --]]
  • dave1707dave1707 Mod
    Posts: 7,472

    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.

  • Im confused as to what you mean, example?

  • 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?

  • dave1707dave1707 Mod
    edited January 2017 Posts: 7,472

    @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
    
Sign In or Register to comment.