Load Atlas and Font images from paths

animation.lua

@@ -58,8 +58,7 @@ end
 ---@param y number The Y position to draw at.
 function Animation:draw(index, x, y)
   local frame = self.frames[index]
-  local mesh = frame.atlas.meshes[frame.sprite]
+  frame.atlas:draw(frame.sprite, x, y)
-  love.graphics.draw(mesh, x, y)
 end
 
 return Animation

atlas.lua

@@ -6,10 +6,14 @@ local Object = require "lib/classic"
 local Atlas = Object:extend()
 
 ---Creates a new atlas.
----@param image love.Image The source image for the atlas.
+---@param image_path string The path to the source image for the atlas.
 ---@param sw integer The width of each sprite.
 ---@param sh integer The height of each sprite.
-function Atlas:new(image, sw, sh)
+---@param ax integer? The anchor X coordinate of each sprite. Defaults to 0.
+---@param ay integer? The anchor Y coordinate of each sprite. Defaults to 0.
+function Atlas:new(image_path, sw, sh, ax, ay)
+  local image = love.graphics.newImage(image_path)
+
   ---The source image of the atlas.
   self.image = image
 
@@ -19,6 +23,12 @@ function Atlas:new(image, sw, sh)
   ---The height of each atlas's sprite.
   self.sh = sh
 
+  ---The anchor X coordinate of each sprite.
+  self.ax = ax or 0
+
+  ---The anchor Y coordinate of each sprite.
+  self.ay = ay or 0
+
   ---The width of the atlas in texels.
   self.iw = image:getPixelWidth()
 
@@ -61,4 +71,13 @@ function Atlas:new(image, sw, sh)
   end
 end
 
+---Draws a sprite at a given location.
+---@param sprite integer The index of the sprite to draw.
+---@param x integer The X coordinate to draw at.
+---@param y integer The Y coordinate to draw at.
+function Atlas:draw(sprite, x, y)
+  local mesh = self.meshes[sprite]
+  love.graphics.draw(mesh, x - self.ax, y - self.ay)
+end
+
 return Atlas

font.lua

@@ -5,12 +5,12 @@ local Atlas = require "atlas"
 local Font = Atlas:extend()
 
 ---Creates a new font.
----@param image love.Image The source image for the atlas.
+---@param image_path string The path to the source image for the atlas.
 ---@param sw integer The width of each sprite.
 ---@param sh integer The height of each sprite.
 ---@param characters string[] A list of characters with indices corresponding to each sprite.
-function Font:new(image, sw, sh, characters)
+function Font:new(image_path, sw, sh, characters)
-  Font.super.new(self, image, sw, sh)
+  Font.super.new(self, image_path, sw, sh)
 
   ---A map of characters to sprites.
   self.characters = {}
@@ -32,7 +32,7 @@ function Font:draw(text, x, y)
     local sprite = self.characters[c]
     if sprite then
       local x = (i - 1) * self.sw + x
-      love.graphics.draw(self.meshes[sprite], x, y)
+      self.super.draw(self, sprite, x, y)
     end
   end
 end

main.lua

@@ -1,4 +1,3 @@
-local Animation = require "animation"
 local Animator = require "animator"
 local Atlas = require "atlas"
 local Font = require "font"
@@ -18,8 +17,6 @@ local pushOpts = {
 push:setupScreen(gameWidth, gameHeight, windowWidth, windowHeight, pushOpts)
 
 function love.load()
-  local blockyFont = love.graphics.newImage("assets/small-blocky-font.png")
-
   local blockFontChars = {
     " ", "!", "\"", "#", "$", "%", "&", "'", "(", ")", "×", "+", ",", "-", ".", "/", --first line
     "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ":", ";", "<", "=", ">", "?",  --second line
@@ -29,9 +26,9 @@ function love.load()
     "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "{", "|", "}", "~",       --fourth line
   }
 
-  BlockyFont = Font(blockyFont, 8, 8, blockFontChars)
+  BlockyFont = Font("assets/small-blocky-font.png", 8, 8, blockFontChars)
 
-  local uiAtlas = Atlas(love.graphics.newImage("assets/flat-ui.png"), 32, 32)
+  local uiAtlas = Atlas("assets/flat-ui.png", 32, 32)
 
   Window = NineSlice(uiAtlas, {
     tl = 26,
@@ -59,25 +56,25 @@ function love.load()
 
     options[#options + 1] = {
       text = unit.name,
-      callback = function() StateMenu = MultiMenu(BlockyFont, state_menu) end,
+      callback = function()
+        StateMenu = MultiMenu(BlockyFont, state_menu, 32, 32, Window)
+      end,
     }
   end
 
-  UnitMenu = MultiMenu(BlockyFont, options)
+  UnitMenu = MultiMenu(BlockyFont, options, 16, 16, Window)
   ActiveUnit = Animator(Units[1].states, "idle")
 end
 
 function love.draw()
   push:start()
 
-  Window:draw(100, 100, 5, 5)
   BlockyFont:draw("Hello, world!")
-  ActiveUnit:draw()
+  ActiveUnit:draw(240, 180)
+  UnitMenu:draw()
 
   if StateMenu then
     StateMenu:draw()
-  else
-    UnitMenu:draw()
   end
 
   push:finish()

multimenu.lua

@@ -6,34 +6,55 @@ local MultiMenu = Object:extend()
 ---Creates a new multimenu.
 ---@param font Font
 ---@param options table
-function MultiMenu:new(font, options)
+function MultiMenu:new(font, options, x, y, bg)
   self.font = font
   self.options = options
   self.selected = 1
+  self.x = x
+  self.y = y
+  self.bg = bg
+  self.padding = 16
+
+  local inner_width = 0
+  local inner_height = #options * self.font.sh
+
+  for idx, option in ipairs(options) do
+    local text_width = string.len(option.text) * self.font.sw
+    inner_width = math.max(inner_width, text_width)
+  end
+
+  local bg_width = inner_width + self.padding * 2
+  local bg_height = inner_height + self.padding * 2
+
+  self.bg_width = math.ceil(bg_width / bg.atlas.sw)
+  self.bg_height = math.ceil(bg_height / bg.atlas.sh)
 end
 
 function MultiMenu:draw()
   -- option drawing constants
-  local x = 20
+  local x = self.x
-  local y_anchor = 50
+  local y = self.y
-  local spacing = 10
+  local spacing = self.font.sh
-  y_anchor = y_anchor - spacing
+  local padding = self.padding
+
+  --draw the background
+  self.bg:draw(x, y, self.bg_width, self.bg_height)
 
   -- draw all the options
   for idx, option in ipairs(self.options) do
-    local y = y_anchor + idx * spacing
+    local ty = y + (idx - 1) * spacing
-    self.font:draw(option.text, x, y)
+    self.font:draw(option.text, x + padding, ty + padding)
   end
 
   -- cursor metric constants
   local cursor_width = 4
   local cursor_depth = 8
-  local cursor_spacing = 8
+  local cursor_spacing = 4
   local cursor_offset = 4
 
   -- calculate the cursor's position
-  local cursor_x = x - cursor_spacing
+  local cursor_x = x - cursor_spacing + padding
-  local cursor_y = y_anchor + cursor_offset + spacing * self.selected
+  local cursor_y = y + cursor_offset + (self.selected - 1) * spacing + padding
 
   -- draw the cursor
   love.graphics.polygon("fill",

nine_slice.lua

@@ -16,7 +16,7 @@ function NineSlice:draw(x, y, width, height)
     local gy = y + ty * sh
 
     if sprite then
-      love.graphics.draw(atlas.meshes[sprite], gx, gy)
+      atlas:draw(sprite, gx, gy)
     else
       love.graphics.rectangle("fill", gx, gy, sw, sh)
     end

units.lua

@@ -11,8 +11,8 @@ local function rowState(atlas, row, len, on_finish, next)
   return spannedState(atlas, start, len, on_finish, next)
 end
 
-local leafRanger = Atlas(love.graphics.newImage("assets/leaf-ranger.png"), 288, 128)
+local leafRanger = Atlas("assets/leaf-ranger.png", 288, 128, 144, 128)
-local bringerOfDeath = Atlas(love.graphics.newImage("assets/bringer-of-death.png"), 140, 93)
+local bringerOfDeath = Atlas("assets/bringer-of-death.png", 140, 93, 105, 93)
 
 return {
   {