procedural item info panel, hand cursor

client.lua

@@ -24,7 +24,6 @@ function client.connect(ip, port)
             gameState = 'menu'
             menu.state = 'main'
             client.close()
-            love.mouse.setVisible(true)
             love.mouse.setGrabbed(false)
         end,
         add = function(self, data)
@@ -133,7 +132,6 @@ function client.startGame(data)
     p.name = data.name
     p:setState(data)
     gameState = 'playing'
-    love.mouse.setVisible(false)
     if menu.cursorLockBtn.active then love.mouse.setGrabbed(true) end
 end
 

cursor.lua

@@ -0,0 +1,21 @@
+
+cursor = {}
+
+cursor.main = {
+    img = gfx.cursors.main,
+    ox = 0, oy = 0
+}
+cursor.hand = {
+    img = gfx.cursors.hand,
+    ox = 2, oy = 0
+}
+
+cursor.cursor = cursor.main
+
+function cursor.draw()
+    local mx, my = window2game(love.mouse.getPosition())
+    mx, my = lume.round(mx), lume.round(my)
+
+    love.graphics.setColor(1, 1, 1)
+    love.graphics.draw(cursor.cursor.img, mx, my, 0, 1, 1, cursor.cursor.ox, cursor.cursor.oy)
+end

hud.lua

@@ -117,6 +117,7 @@ function hud.load()
                 love.graphics.setColor(c, c, 1)
             end
             if mx > self.x and mx < self.x + self.img:getWidth() and my > self.y and my < self.y + self.img:getHeight() then
+                cursor.cursor = cursor.hand
                 local r, g, b = love.graphics.getColor()
                 love.graphics.setColor(r*0.8, g*0.8, b*0.8)
             end
@@ -253,6 +254,8 @@ function hud.keypressed(k, scancode, isrepeat)
 end
 
 function hud.draw()
+    local _shader = love.graphics.getShader()
+
     local mx, my = window2game(love.mouse.getPosition())
     mx, my = lume.round(mx), lume.round(my)
 
@@ -273,6 +276,7 @@ function hud.draw()
         else
             love.graphics.setColor(1, 1, 1)
             if mx > v.x and mx < v.x + v.img:getWidth() and my > v.y and my < v.y + v.img:getHeight() then
+                cursor.cursor = cursor.hand
                 love.graphics.setColor(0.8, 0.8, 0.8)
             end
             love.graphics.draw(v.img, lume.round(v.x), lume.round(v.y))
@@ -321,13 +325,19 @@ function hud.draw()
 
     -- inventory items
     love.graphics.push()
+    local bag = playerController.player.inventory
     local panel = hud.inventoryPanel
     love.graphics.translate(panel.x, panel.y)
     local pmx = mx - lume.round(panel.x)
     local pmy = my - lume.round(panel.y)
     for slotId, slot in ipairs(hud.inventorySlots) do
+        local item = bag.items[slotId]
         if pmx >= slot.x and pmx <= slot.x + slot.w
         and pmy >= slot.y and pmy <= slot.y + slot.h and panel.open then
+            if item then
+                cursor.cursor = cursor.hand
+                lootBags.client.hoveredItem = item
+            end
             love.graphics.setColor(1, 1, 1, 0.4)
             love.graphics.rectangle('fill', slot.x, slot.y, slot.w, slot.h)
         end
@@ -342,6 +352,20 @@ function hud.draw()
     end
     love.graphics.pop()
 
+    -- item info
+    if lootBags.client.hoveredItem then
+        love.graphics.setColor(1, 1, 1)
+        love.graphics.setShader(shaders.panel)
+        local w = 104
+        local h = 91
+        local x = lume.clamp(mx - w, 0, gsx - w)
+        local y = lume.clamp(my - h, 0, gsy - h)
+        shaders.panel:send('box', {x, y, w, h})
+        love.graphics.rectangle('fill', x, y, w, h)
+        love.graphics.setShader(_shader)
+        love.graphics.draw(gfx.ui.itemInfo, x, y)
+    end
+
     -- held item
     local heldItem = lootBags.client.heldItem
     if heldItem.bagId then
@@ -352,6 +376,7 @@ function hud.draw()
         if bag then
             local item = bag.items[heldItem.slotId]
             if item then
+                cursor.cursor = cursor.hand
                 love.graphics.setColor(1, 1, 1)
                 love.graphics.draw(gfx.items[item], mx + heldItem.offset.x, my + heldItem.offset.y)
             end

loadassets.lua

@@ -18,7 +18,8 @@ canvases = {
 
 gfx = {
     cursors = {
-        main = love.graphics.newImage('gfx/ui/cursors/cursor.png')
+        main = love.graphics.newImage('gfx/ui/cursors/cursor.png'),
+        hand = love.graphics.newImage('gfx/ui/cursors/hand.png')
     },
     logo = love.graphics.newImage('gfx/logo.png'),
     logoAnim = love.graphics.newImage('gfx/logo_anim.png'),
@@ -29,7 +30,8 @@ gfx = {
             left = love.graphics.newImage('gfx/ui/buttons/left.png'),
             right = love.graphics.newImage('gfx/ui/buttons/right.png')
         },
-        bag = love.graphics.newImage('gfx/ui/bagui.png')
+        bag = love.graphics.newImage('gfx/ui/bagui.png'),
+        itemInfo = love.graphics.newImage('gfx/ui/item_info.png')
     },
     hud = {
         frame = love.graphics.newImage('gfx/ui/hud/frame.png'),
@@ -138,7 +140,8 @@ shaders = {
     outline = love.graphics.newShader('shaders/outline.glsl'),
     hpBar = love.graphics.newShader('shaders/hpBar.glsl'),
     mapGen = love.graphics.newShader('shaders/mapGen.glsl'),
-    mapRender = love.graphics.newShader('shaders/mapRender.glsl')
+    mapRender = love.graphics.newShader('shaders/mapRender.glsl'),
+    panel = love.graphics.newShader('shaders/panel.glsl')
 }
 
 local tileCanv = love.graphics.newCanvas(15, 15)

lootBags.lua

@@ -6,6 +6,7 @@ lootBags = {
     client = {
         openRange = 30,
         closest = {id=nil, dist=nil, open=false},
+        hoveredItem = nil,
         heldItem = {bagId=nil, slotId=nil, offset={x=0, y=0}}
     }
 }
@@ -94,6 +95,7 @@ function lootBags.client.update(dt)
         heldItem.bagId = nil
         heldItem.slotId = nil
     end
+    lootBags.client.hoveredItem = nil
 end
 
 function lootBags.client.mousepressed(x, y, btn)
@@ -208,14 +210,18 @@ function lootBags.client.draw()
                     local bmx = wmx - (lume.round(bag.x) - lume.round(img:getWidth()/2))
                     local bmy = wmy - (lume.round(bag.y) - img:getHeight() - 20)
                     for slotId, slot in ipairs(lootBags.client.slots) do
+                        local item = bag.items[slotId]
                         if bmx >= slot.x and bmx <= slot.x + slot.w
                         and bmy >= slot.y and bmy <= slot.y + slot.h then
+                            if item then
+                                cursor.cursor = cursor.hand
+                                lootBags.client.hoveredItem = item
+                            end
                             love.graphics.setColor(1, 1, 1, 0.4)
                             love.graphics.rectangle('fill', slot.x, slot.y, slot.w, slot.h)
                         end
                         local heldItem = lootBags.client.heldItem
                         if not (heldItem.bagId == bag.id and heldItem.slotId == slotId) then
-                            local item = bag.items[slotId]
                             if item then
                                 love.graphics.setColor(1, 1, 1)
                                 love.graphics.draw(gfx.items[item], slot.x, slot.y)

main.lua

@@ -7,9 +7,10 @@ Camera = require 'lib.camera'
 
 require 'utils'
 require 'loadassets'
-require 'text'
 require 'server'
 require 'client'
+require 'cursor'
+require 'text'
 require 'menu'
 require 'hud'
 require 'physics'
@@ -32,6 +33,7 @@ function love.load()
     drawDebug = false
     menu.load()
     hud.load()
+    love.mouse.setVisible(false)
 end
 
 gameScale = math.min(ssx/gsx, ssy/gsy)
@@ -72,6 +74,7 @@ end
 function love.update(dt)
     time = time + dt
     love.window.setTitle('Tier (' .. love.timer.getFPS() .. ' FPS)')
+    cursor.cursor = cursor.main
     if server.running then
         server.update(dt)
     end
@@ -81,7 +84,7 @@ function love.update(dt)
     menu.update(dt)
     gcTimer = gcTimer - dt
     if gcTimer < 0 then
-        collectgarbage()
+        --collectgarbage('collect')
         gcTimer = 10
     end
 end
@@ -146,7 +149,6 @@ function love.keypressed(k, scancode, isrepeat)
                 if client.connected then
                     client.close()
                 end
-                love.mouse.setVisible(true)
                 love.mouse.setGrabbed(false)
             elseif k == 'f1' then
                 drawDebug = not drawDebug
@@ -197,12 +199,10 @@ function love.draw()
 
         hud.draw()
         chat.draw()
-
-        love.graphics.setColor(1, 1, 1)
-        love.graphics.draw(gfx.cursors.main, mx, my, 0, 1, 1, 0, 0) -- hotspot 0, 0
     end
 
     menu.draw()
+    cursor.draw()
 
     -- draw game on game2x
     setGameCanvas2x()

menu.lua

@@ -191,6 +191,7 @@ function menu.load()
         end
     end, draw=function(v, mx, my)
         if mx > v.bx and mx < v.bx + v.bw and my > v.by and my < v.by + v.bh then
+            cursor.cursor = cursor.hand
             love.graphics.setColor(0.3, 0.3, 0.3)
         else
             love.graphics.setColor(0.4, 0.4, 0.4)
@@ -372,6 +373,7 @@ function menu.draw()
                 v.draw(v, mx, my)
             else
                 if mx > v.bx and mx < v.bx + v.bw and my > v.by and my < v.by + v.bh then
+                    cursor.cursor = cursor.hand
                     love.graphics.setColor(0.3, 0.3, 0.3)
                 else
                     if v.type == 'toggle' and v.active then
@@ -396,9 +398,11 @@ function menu.draw()
             if v.draw then
                 v.draw(v, mx, my)
             else
-                if mx > v.bx and mx < v.bx + v.bw and my > v.by and my < v.by + v.bh
-                and (menu.activeInput == v or menu.activeInput == nil) or menu.activeInput == v then
-                    love.graphics.setColor(0.3, 0.3, 0.3)
+                if mx > v.bx and mx < v.bx + v.bw and my > v.by and my < v.by + v.bh then
+                    cursor.cursor = cursor.hand
+                    if (menu.activeInput == v or menu.activeInput == nil) or menu.activeInput == v then
+                        love.graphics.setColor(0.3, 0.3, 0.3)
+                    end
                 else
                     love.graphics.setColor(0.6, 0.6, 0.6)
                 end

shaders/outline.glsl

@@ -1,6 +1,6 @@
 
-extern vec2 stepSize;
-extern vec4 outlineColor;
+uniform vec2 stepSize;
+uniform vec4 outlineColor;
 
 vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 screen_coords)
 {

shaders/panel.glsl

@@ -0,0 +1,50 @@
+
+uniform vec4 box;
+
+vec4 c1 = vec4(vec3(0.0), 1.0);
+vec4 c2 = vec4(vec3(38.0/255.0), 1.0);
+vec4 c3 = vec4(vec3(51.0/255.0), 1.0);
+vec4 c4 = vec4(vec3(63.0/255.0), 1.0);
+
+int curve_x[7] = int[](6, 4, 3, 2, 2, 1, 1);
+int curve_y[6] = int[](7, 5, 3, 2, 1, 1);
+
+vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 screen_coords)
+{
+	vec2 uv = screen_coords;
+    uv -= box.xy;
+    vec2 border_dist = vec2(min(uv.x, box.z-uv.x), min(uv.y, box.w-uv.y));
+    int bdx = int(border_dist.x);
+    int bdy = int(border_dist.y);
+    vec4 pixel = vec4(0.0);
+    bool inner = true;
+    if (bdx < 7) {
+        if (bdy == curve_x[bdx]) {
+            pixel = c1;
+        }
+        if (bdy <= curve_x[bdx]) {
+            inner = false;
+        }
+    }
+    if (bdy < 6) {
+        if (bdx == curve_y[bdy]) {
+            pixel = c1;
+        }
+        if (bdx <= curve_y[bdy]) {
+            inner = false;
+        }
+    }
+    if (inner) {
+        pixel = c2;
+    }
+    if (bdx == 0 && bdy > 6 || bdy == 0 && bdx > 7) {
+        pixel = c1;
+    }
+    if (bdx > 3 && bdy > 4 && !(bdx == 4 && bdy == 5)) {
+        pixel = c3;
+        if (int(mod(uv.x + uv.y, 9.0)) == 1) {
+            pixel = c4;
+        }
+    }
+	return pixel*color;
+}