HTUR UI/UX Design notes.

This is basically how its done. The left and right panels become the controls on touch devices.  Top shows state in game and bottom will show items. Its psychologically reinforced yo. From the outset.

Current Projects

Check out the new Game and 3d pages!

Also I'm workin on music for an art game by Cislunar. It's beginning to look a lot like a creative season!

GoodByeLove2d

New REBEL> Goodbye Love2d

function love.load()

-- GM Stuff 
 mode = "title" -- other modes game, map, store, end 

-- handcar stuff
 hcar = love.graphics.newImage("handcar.png")
 car = love.graphics.newImage("handcar.png")
 hcarB = love.graphics.newImage("handcarB.png")
 
 x = 100  
 y = 288
 speed = 7 
 drag = 20 -- the amount we slow down every second. 
 
 isMoving = false;
 
 rhit = false
 lhit = false
 
 canL = false
 canR = true
 
 sql = love.audio.newSource("squeak.ogg", "static")
 sqr = love.audio.newSource("squeak2.ogg", "static") 
 brake = love.audio.newSource("break.ogg", "static") 
 
 sql:setVolume(0.2)
 sqr:setVolume(0.2)
 brake:setVolume(0.5)
-- slavecar stuff 
 sico = love.graphics.newImage("coin.png")
 scar = love.graphics.newImage("scar.png")
 numSlaves = 5
 
-- enemy Stuff 
 enemy = love.graphics.newImage("tyrant.png")
 take = love.audio.newSource("take.ogg", "static") 
 ex = -225
 ey = 100
 eRate = 25
 
-- background stuff 
 bg = love.graphics.newImage("bg.png");
 bgx= 0
 bgy= 0
 -- tile background
 bg2x = 746
 
 
-- UI stuff
 score = 0
 vPos = 46
 vMax = 714
 trackLength = 15
 slaves = 1
 levelComplete = false
 gameOver = false
 
-- Map Stuff
 map = love.graphics.newImage("map.jpg")
 tarOff = love.graphics.newImage("markOff.png")
 tarOn = love.graphics.newImage("markOn.png")
 nBtn = love.graphics.newImage("headNorth.png")
 canStart = false
 
 cities =  { 
     { name = "San Antonio", dist = 40, cap = 2, x = 250, y = 420},
     { name = "Vicksburg", dist = 36, cap = 4, x = 385, y = 379},
     { name = "New Orleans", dist = 27, cap = 6, x = 415, y = 437},
     { name = "Atlanta", dist = 22, cap = 4, x = 511, y = 340},
     { name = "Savannah", dist = 19, cap = 3, x = 590, y = 378},
     { name = "Pittsburgs Landing", dist = 14, cap = 2, x = 433, y = 313},
     { name = "Petersburg", dist = 10, cap = 1, x = 628, y = 241}
    }
    
 location = "*****"
 capacity = "*****"
 distance = "*****"
 
 -- yea! The ol curtain. 
 curtAlpha = 255

end

function love.keypressed(k)
   if k == 'escape' then
      love.event.quit()
   end
   
   if mode == "game" then 
    -- managed to get some control in here let's gate it up! 
    if levelComplete == false then 
     if k == 'right' then 
    rhit = true;
    love.audio.play(sqr)
     if lhit == false and canR then 
     
      x = x+speed
      isMoving = true
      canR = false
      canL = true
     
     end
     end
     
     if k == 'left' then 
    lhit = true;
    love.audio.play(sql)
     if rhit == false and canL then 
     
      x = x+speed
      canL = false
      canR = true
     
     end
    
     end
    end
   end
   
end

function love.keyreleased(k)
 
 if mode == "game" then
    if levelComplete == false then 
   if k == 'right' then 
    car = hcar;
    rhit = false;
    
     end
     
     if k == 'left' then 
    car = hcarB;
    lhit = false;
    
     end
  end
 end
end

function keepTiling()

 if bgx < -750 then 
  bgx = 747
 end
 if bg2x < -750 then 
  bg2x = 750
 end 

end

function updateEnemy()

 -- let's find some good enemy logic. The player should be able
 -- to outrun the enemy. plus we have to fake some kind of collision behavior
 if not levelComplete then 
  if vPos > 100 then 
  
   ex = ex + eRate*love.timer.getDelta()%rate
   
   if ex + enemy:getWidth()*1.5-50 > x then 
   
    numSlaves = numSlaves -1;
    ex = ex - enemy:getWidth()-100;
    love.audio.play(take)
   end
   
  
  elseif vPos == vMax then
  
   ex = ex - eRate*love.timer.getDelta() 
  
  end 
 else 
  -- move away if on screen at end of level. 
  ex = ex - eRate*love.timer.getDelta()*7

 end 
end

function love.update(dt)


-- let's start separating these game modes. 
 if mode == "game" then 
  updateGame()
 
 elseif mode == "title" then 
  updateTitle()
  
 elseif mode == "map" then 
  updateMap()
 end


end

function fadeOut(nextScene)
 -- change the game mode and then fade to the scene 

 if curtAlpha < 255 then 
  curtAlpha = curtAlpha + 15
 elseif curtAlpha >= 255 then 
  if nextScene == "map" then 
   resetGame()
  end
  mode = nextScene
  curtAlpha = 255
 end
 

end

function fadeIn()
 
 if curtAlpha > 0 then 
  curtAlpha = curtAlpha - 15
 elseif curtAlpha < 0 then 
  curtAlpha = 0
 end
 
end

function resetGame()
 score = 0
 location = "*****"
 capacity = "*****"
 distance = "*****"
 canStart = false
 vPos = 46
 levelComplete = false
 gameOver = false
 ex = -225
 x = 100 
end 

function updateMap()
 -- we have to reset the game .. kinda .. aintwe~?
 if love.mouse.isDown('r','l') then 
  --fadeOut('game')
 elseif curtAlpha > 0 then 
  fadeIn()
 end

end

function updateTitle()

 if love.mouse.isDown('r','l') then 
  fadeOut('map')
 elseif curtAlpha > 0 then 
  fadeIn()
 end
 
end 

function updateGame()

 if curtAlpha > 1 and gameOver == false then
  fadeIn()
 end
 
 rate = x-100 -- player position from resting place. 
 if rate < 0 then 
  rate = 0
 end
 dt = love.timer.getDelta()
 keepTiling()
 updateEnemy()
  if isMoving then 
  -- move BG and player 
   x = x-drag*dt
   bgx = bgx-(drag*dt)*rate;
  -- bg2x = bg2x-drag*love.timer.getDelta()*rate;

  -- keep handcar on screen ( CLAMP )
   if x <= 100 then 
    isMoving = false
   end
   
   if x > 600 then 
    x = 600
    ex = ex-50*dt
   end
   
  -- move tracker and keep track on level progress. 
   vPos = vPos + rate/trackLength*dt
   if vPos >= vMax then 
    isMoving = false
    vPos = vMax
    levelComplete = true
   end
   
  -- scoring
   score = score + math.ceil(rate)
   
  end
  
  if levelComplete then 
   -- bells and whistles don't update vpos
   if x > 100 then
    x = x-drag*3*dt
    bgx = bgx-(drag*dt)*rate;
    love.audio.play(brake)
    
   else 
    love.audio.stop(brake)
    
    -- we win if we free at least one slave. 
    if numSlaves > 0 then
    
     gameOver = true
     
    end 
    
   end 
   
   
  end
 if gameOver then 
  fadeOut("map") -- should go to some review scene. or something.
 end
end 

function drawSlaveIcons()

 for i=1, numSlaves, 1 do 
 
  love.graphics.draw(sico, (x-128)+(i*10), y+15)
 
 end

end

function drawMapIcons()

 for i=1, #cities, 1 do 
 
  love.graphics.draw( tarOff, cities[i].x, cities[i].y )
  
  if love.mouse.getX() >  cities[i].x 
   and love.mouse.getX() < cities[i].x + 40
   and love.mouse.getY() > cities[i].y
   and love.mouse.getY() < cities[i].y + 40 
   and love.mouse.isDown('r','l') then
    
    canStart = true
    love.graphics.draw( tarOn, cities[i].x, cities[i].y )
    -- and display the information in the info box. 
    capacity = cities[i].cap
    numSlaves = cities[i].cap
    -- speed adjustment for slaveload. 
    speed = 10 - cities[i].cap
    
    distance = cities[i].dist
    trackLength = cities[i].dist
    location = cities[i].name
    -- maybe will change the art one day. 
   end
 
 end
 
  love.graphics.draw(nBtn,450,100); 
  
  if love.mouse.getX() >  450
   and love.mouse.getX() < 450+nBtn:getWidth()
   and love.mouse.getY() > 100
   and love.mouse.getY() < 100+nBtn:getHeight()
   and love.mouse.isDown('r','l') 
   and canStart then
   
    fadeOut("game")
 
  end 

end

function love.draw()
 -- if mode is inGame , menu, map , shop 
 if mode == "game" then
  love.graphics.setBackgroundColor( 128,128,255 )
  love.graphics.setColor(255,255,255)
  love.graphics.draw(bg,bgx,bgy) 
  love.graphics.draw(car,x,y);
  love.graphics.draw(scar,x-128,y);
  drawSlaveIcons()
  love.graphics.draw(enemy,ex,ey)
  -- UI stuff 
  love.graphics.setColor(0,0,0)
  love.graphics.rectangle( "fill", 0, 0, 768, 100 )
  love.graphics.rectangle( "fill", 0, 412, 768, 100 )
  love.graphics.setColor(255,255,255)
  love.graphics.print( love.timer.getFPS()..":fps",x+47,y+80)  -- show fps !!! 
  love.graphics.setLineWidth(3)
  love.graphics.line(50,50,718,50)
  love.graphics.print("S",30,40)
  love.graphics.print("E",730,40)
  love.graphics.print("V",vPos,35)
  --love.graphics.print(rate,25,25)
  love.graphics.print("LEVEL : "..location, 25, 425)
  love.graphics.print("SCORE : "..score, 25,450); 
  love.graphics.print("SLAVES : "..numSlaves, 25,475);
 -- perhaps we draw the transition over everything. That'll be fun. 
 elseif mode == "title" then 
 
  love.graphics.print("Harriet Tubmans Underground Railroad",250,250)
  love.graphics.setBackgroundColor(0,0,0)
  
 elseif mode == "map" then 
  
  love.graphics.draw(map,0,0)
  love.graphics.setColor(0,0,0,150)
  love.graphics.rectangle("fill",0,0,400,275)
  love.graphics.setColor(255,255,255)
  -- info corner for stage selection 
  love.graphics.print( "STAGE SELECT: ",50,25)
  love.graphics.print( "Choose a starting point in slaver territory >>",50,50)
  love.graphics.print( "Target: "..location,50,75)
  love.graphics.print( "Capacity: "..capacity,50,100)
  love.graphics.print( "Distance: "..distance,50,125)
  love.graphics.print( "Alternate pressing the Left and Right Arrow Keys \nto push the cart Northward. \n\nIf all of your slaves get captured you lose!\n\nHold HEAD NORTH To Begin.", 50, 150)
  -- drawing the map targets. 
  drawMapIcons()
 
 end 
  love.graphics.setColor(0,0,0,curtAlpha)
  love.graphics.rectangle("fill",0,0,768,512)
  love.graphics.setColor(255,255,255)
  
 
end