mum fixes; add mum.rectangle

docs/engine_tour/gui.md

@@ -1,6 +1,9 @@
 # GUI
-Game GUIs are written by registering an entity's *gui* property to a function.
+Game GUIs are written by registering an entity's `gui` property to a function, or its `hud` property.
 
-The GUI system which ships with Prosperon is called *MUM*. MUM is a declarative, immediate mode interface system. Immediate to eliminate the issue of data synchronization in the game.
+`gui` draws in window space, where the bottom left corner is `[0,0]`. `hud` draws in screen space. In either of these, you can call "render" functions directly.
 
-All GUI objects derive from MUM. MUM has a list of properties, used for rendering. Mum also has functions which cause drawing to appear on the screen.
+`draw` draws in world space, and mum functions can equally be used there.
+
+## MUM
+The GUI system which ships with Prosperon is called *MUM*. MUM is a declarative, immediate mode HUD system. While Imgui is designed to make it easy to make editor-like controls, mum is designed to be easy to make video game huds.

scripts/base.js

@@ -1331,6 +1331,11 @@ Object.defineProperty(Number.prototype, 'lerp', {
     return (to - this) * t + this;
   }
 });
+Object.defineProperty(Number.prototype, 'clamp', {
+  value: function(from,to) {
+    return Math.clamp(this,from,to);
+  }
+});
 
 Math.clamp = function (x, l, h) { return x > h ? h : x < l ? l : x; }
 
@@ -1447,6 +1452,15 @@ bbox.pointin = function(bb, p)
   return true;
 }
 
+bbox.zero = function(bb) {
+  var newbb = Object.assign({},bb);
+  newbb.r -= newbb.l;
+  newbb.t -= newbb.b;
+  newbb.b = 0;
+  newbb.l = 0;
+  return newbb;
+}
+
 bbox.move = function(bb, pos) {
   var newbb = Object.assign({}, bb);
   newbb.t += pos.y;
@@ -1456,6 +1470,11 @@ bbox.move = function(bb, pos) {
   return newbb;
 };
 
+bbox.moveto = function(bb, pos) {
+  bb = bbox.zero(bb);
+  return bbox.move(bb, pos);
+}
+
 bbox.expand = function(oldbb, x) {
   if (!oldbb || !x) return;
   var bb = {};

scripts/components.js

@@ -13,8 +13,11 @@ var make_point_obj = function(o, p)
   }
 }
 
+var fullrect = [0,0,1,1];
+
 var sprite = {
   loop: true,
+  rect: fullrect,
   anim:{},
   playing: 0,
   play(str = 0) {
@@ -63,7 +66,7 @@ var sprite = {
     this.texture = game.texture(p);
     
     this.diffuse = this.texture;
-    this.rect = [0,0,1,1];
+    this.rect = fullrect;
     
     var anim = SpriteAnim.make(p);
     if (!anim) return;

scripts/debug.js

@@ -1,5 +1,7 @@
 var debug = {};
 
+debug.build = function(fn) { fn(); }
+
 debug.fn_break = function(fn,obj = globalThis) {
   if (typeof fn !== 'function') return;
   
@@ -50,10 +52,8 @@ debug.draw = function() {
 
 function assert(op, str = `assertion failed [value '${op}']`)
 {
-  if (!op) {
-    console.error(str);
-    os.quit();
-  }
+  if (!op)
+    console.panic(str);
 }
 
 var Gizmos = {
@@ -236,6 +236,13 @@ debug.log.time = function(fn, name, avg=0)
   debug.log.time[name].push(profile.now()-start);
 }
 
+debug.kill = function()
+{
+  assert = function() {};
+  debug.build = function() {};
+  debug.fn_break = function() {};
+}
+
 return {
   debug,
   Gizmos,

scripts/engine.js

@@ -128,8 +128,10 @@ profile.report = function (start, msg = "[undefined report]") {
 };
 
 profile.addreport = function (cache, line, start) {
+  cache ??= profcache;
   cache[line] ??= [];
   cache[line].push(profile.now() - start);
+  return profile.now();
 };
 
 profile.printreport = function (cache, name) {
@@ -324,6 +326,14 @@ game.engine_start = function (s) {
 game.startengine = 0;
 var frames = [];
 
+prosperon.release_mode = function()
+{
+  prosperon.debug = false;
+  mum.debug = false;
+  debug.kill();
+}
+prosperon.debug = true;
+
 function process() {
   var startframe = profile.now();
   var dt = profile.secs(profile.now()) - frame_t;
@@ -571,7 +581,9 @@ Register.add_cb("update", true).doc = "Called once per frame.";
 Register.add_cb("physupdate", true);
 Register.add_cb("gui", true);
 Register.add_cb("hud", true);
-Register.add_cb("debug", true);
+Register.add_cb("draw_dbg", true);
+Register.add_cb("gui_dbg", true);
+Register.add_cb("hud_dbg", true);
 Register.add_cb("draw", true);
 
 var Event = {

scripts/input.js

@@ -40,6 +40,8 @@ function keycode(name) { return charCodeAt(name); }
 
 function keyname_extd(key)
 {
+  if (typeof key === 'string') return key;
+  
   if (key > 289 && key < 302) {
     var num = key-289;
     return `f${num}`;
@@ -56,7 +58,7 @@ function keyname_extd(key)
   return undefined;
 }
 
-prosperon.keys = [];
+var downkeys = {};
 
 function modstr()
 {
@@ -69,7 +71,7 @@ function modstr()
 
 prosperon.keydown = function(key, repeat)
 {
-  prosperon.keys[key] = true;
+  downkeys[key] = true;
   
   if (key == 341 || key == 345)
     mod.ctrl = 1;
@@ -91,7 +93,8 @@ prosperon.keydown = function(key, repeat)
 
 prosperon.keyup = function(key)
 {
-  prosperon.keys[key] = false;
+  delete downkeys[key];
+  
   if (key == 341 || key == 345)
     mod.ctrl = 0;
 
@@ -127,9 +130,11 @@ prosperon.mousescroll = function(dx){
 };
 prosperon.mousedown = function(b){
   player[0].raw_input(modstr() + input.mouse.button[b], "pressed");
+  downkeys[input.mouse.button[b]] = true;
 };
 prosperon.mouseup = function(b){
   player[0].raw_input(input.mouse.button[b], "released");
+  delete downkeys[input.mouse.button[b]];
 };
 
 input.mouse = {};
@@ -181,8 +186,8 @@ input.mouse.normal.doc = "Set the mouse to show again after hiding.";
 
 input.keyboard = {};
 input.keyboard.down = function(code) {
-  if (typeof code === 'number') return prosperon.keys[code];
-  if (typeof code === 'string') return (prosperon.keys[code.uc().charCodeAt()] || prosperon.keys[code.lc().charCodeAt()]);
+  if (typeof code === 'number') return downkeys[code];
+  if (typeof code === 'string') return (downkeys[code.uc().charCodeAt()] || downkeys[code.lc().charCodeAt()]);
   return undefined;
 }
 
@@ -210,10 +215,8 @@ input.print_pawn_kbm = function(pawn) {
 
 input.procdown = function()
 {
-    for (var k of prosperon.keys) {
-      if (!k) continue;
-      player[0].raw_input(keyname_extd(k), "down");
-    }
+  for (var k in downkeys)
+    player[0].raw_input(keyname_extd(k), "down");
 }
 
 input.print_md_kbm = function(pawn) {
@@ -330,7 +333,10 @@ var Player = {
       	  fn = pawn.inputs[cmd].released;
     	  break;
       	case 'down':
-    	  fn = pawn.inputs[cmd].down;
+	  if (typeof pawn.inputs[cmd].down === 'function')
+	    fn = pawn.inputs[cmd].down;
+	  else if (pawn.inputs[cmd].down)
+	    fn = pawn.inputs[cmd];
       }
 
       if (typeof fn === 'function') {

scripts/mum.js

@@ -1,107 +1,264 @@
 globalThis.mum = {};
+
 var panel;
 
+var selected = undefined;
+
+mum.inputs = {};
+mum.inputs.lm = function()
+{
+  if (!selected) return;
+  if (!selected.action) return;
+  selected.action();
+}
+
 mum.base = {
-  padding:[0,0], /* Each element inset with this padding on all sides */
-  offset:[0,0],
-  pos: [0,0],
+  pos: null, // If set, puts the cursor to this position before drawing the element
+  offset:[0,0], // Move x,y to the right and down before drawing
+  padding:[0,0], // Pad inwards after drawing, to prepare for the next element  
   font: "fonts/c64.ttf",
   selectable: false,
   selected: false,
   font_size: 16,
-  text_align: "left", /* left, center, right */
   scale: 1,
   angle: 0,
-  anchor: [0,1],
+  inset: null,
+  anchor: [0,1], // where to draw the item from, relative to the cursor. [0,1] is from the top left corner. [1,0] is from the bottom right
   background_image: null,
-  hovered: {},
+  slice: null,
+  hover: {
+    color: Color.red,
+  },
   text_shadow: {
     pos: [0,0],
     color: Color.white,
   },
-  text_outline: 1, /* outline in pixels */
+  border: 0, // Draw a border around the element. For text, an outline.
+  overflow: "wrap", // how to deal with overflow from parent element
+  wrap: -1,
+  text_align: "left", /* left, center, right */
+  shader: null, // Use this shader, instead of the engine provided one
   color: Color.white,
-  margin: [0,0], /* Distance between elements for things like columns */
-  width: null,
-  height: null,
+  opacity:1,
+  width:0,
+  height:0,
   max_width: Infinity,
   max_height: Infinity,
   image_repeat: false,
   image_repeat_offset: [0,0],
   debug: false, /* set to true to draw debug boxes */
   hide: false,
+  tooltip: null,
 }
 
+// data is passed into each function, and various stats are generated
+// drawpos: the point to start the drawing from
+// wh: an array of [width,height]
+// bound: a boundingbox around the drawn UI element
+// extent: a boundingbox around the total extents of the element (ie before padding)
+
+function show_debug() { return prosperon.debug && mum.debug; }
+
+mum.debug = false;
+
 var post = function() {};
 var posts = [];
 
-var context = mum.base;
-var contexts = [];
+mum.style = mum.base;
 
 var cursor = [0,0];
 
-var end = function()
-{
-  post();
-  context = contexts.pop();
-  if (!context) context = mum.base;
-}
-
-var listpost = function()
-{
-  var height = 0;
-  if (context.height) height += context.height;
-  else height += (context.bb.t - context.bb.b);
-  cursor.y -= height;
-  cursor.y -= context.padding.y; 
-}
-
 var pre = function(data)
 {
-  if (data.hide || context.hide) return true;
-  data.__proto__ = context;
-  contexts.push(context);
-  context = data;
+  if (data.hide) return true;
+  data.__proto__ = mum.style;
+  
+  if (data.pos) cursor = data.pos.slice();
+  data.drawpos = cursor.slice().add(data.offset);
+
+  if (data.opacity !== 1) {
+    data.color = data.color.slice();
+    data.color[3] = data.opacity;
+  }
+
+  data.wh = [data.width,data.height];
+}
+
+var anchor_calc = function(data)
+{
+  var aa = [0,1].sub(data.anchor);
+  data.drawpos = data.drawpos.add([data.width,data.height]).scale(aa);
+}
+
+var end = function(data)
+{
+  cursor = cursor.add(data.padding);
+  post(data);
 }
 
 mum.list = function(fn, data = {})
 {
   if (pre(data)) return;
-  
-  cursor = context.pos;
-  cursor = cursor.add(context.offset);
+  var aa = [0,1].sub(data.anchor);
+  cursor = cursor.add([data.width,data.height].scale(aa)).add(data.offset).add(data.padding);
+
   posts.push(post);
-  post = listpost;
+  post = mum.list.post.bind(data);
   
+  if (show_debug())
+    render.boundingbox({
+      t:cursor.y,
+      b:cursor.y-data.height,
+      l:cursor.x,
+      r:cursor.x+data.width
+    });
+    
+  //if (data.background_image) mum.image(null, Object.create(data)) 
+  if (data.background_image) {
+    var imgpos = data.pos.slice();
+    imgpos.y -= data.height/2;
+    imgpos.x -= data.width/2;
+    var imgscale = [data.width,data.height];
+    if (data.slice)
+      render.slice9(game.texture(data.background_image), imgpos, data.slice, imgscale);
+    else
+      render.image(game.texture(data.background_image), imgpos, [data.width,data.height]);
+  }
+    
   fn();
+  
+  data.bb.l -= data.padding.x;
+  data.bb.r += data.padding.x;
+  data.bb.t += data.padding.y;
+  data.bb.b -= data.padding.y;
+
+  if (show_debug())
+    render.boundingbox(data.bb);
+
   post = posts.pop();
-  end();
+  end(data);
 }
 
-mum.image = function(path, data = {})
+mum.list.post = function(e)
 {
-  if (pre(data)) return;
+  cursor.y -= (e.bb.t - e.bb.b);
+  cursor.y -= e.padding.y;
   
-  var tex = game.texture(path);
-  context.bb = render.image(tex, cursor, context.size);
-  
-  end();
-}
-
-mum.button = function(str, data = {padding:[4,4]})
-{
-  if (pre(data)) return;
-  var bb = render.text(str, cursor.add(context.padding), context.size, context.color);
-  render.rectangle([bb.l-context.padding.x, bb.b-context.padding.y], [bb.r+context.padding.y, bb.t+context.padding.y], Color.black);
-  context.bb = bb;
-  end();
+  if (this.bb)
+    this.bb = bbox.expand(this.bb,e.bb)
+  else
+    this.bb = e.bb;
 }
 
 mum.label = function(str, data = {})
 {
   if (pre(data)) return;
+
   render.set_font(data.font, data.font_size);
-  context.bb = render.text(str, cursor, context.size, context.color);
+ 
+  data.bb = render.text_bb(str, data.scale, -1, cursor);
+  data.wh = bbox.towh(data.bb);
   
-  end();
-}
+  var aa = [0,1].sub(data.anchor);  
+  
+  data.drawpos.y -= (data.bb.t-cursor.y);
+  data.drawpos = data.drawpos.add(data.wh.scale(aa)).add(data.offset);
+
+  data.bb = render.text_bb(str, data.scale, data.wrap, data.drawpos);
+
+  if (data.action && bbox.pointin(data.bb, input.mouse.screenpos())) {
+    if (data.hover) {
+      data.hover.__proto__ = data;
+      data = data.hover;
+      selected = data;
+    }
+  }
+
+  data.bb = render.text(str, data.drawpos, data.scale, data.color, data.wrap);
+    
+  if (show_debug())
+    render.boundingbox(data.bb);
+  
+  end(data);
+}
+
+mum.image = function(path, data = {})
+{
+  if (pre(data)) return;
+  path ??= data.background_image;
+  var tex = path;
+  if (typeof path === 'string')
+    tex = game.texture(path);
+
+  data.width ??= tex.width;
+  data.height ??= tex.height;
+
+  var aa = [0,0].sub(data.anchor);
+  data.drawpos = data.drawpos.add(aa.scale([data.width,data.height]));
+  
+  if (data.slice)
+    render.slice9(tex, data.drawpos, data.slice, [data.width,data.height]);
+  else {
+    cursor.y -= tex.height*data.scale;
+    data.bb = render.image(tex, data.drawpos, [data.scale*tex.width, data.scale*tex.height]);
+  }
+  
+  end(data);
+}
+
+mum.rectangle = function(data = {})
+{
+  if (pre(data)) return;
+  var aa = [0,0].sub(data.anchor);
+  data.drawpos = data.drawpos.add(aa.scale([data.width,data.height]));
+ 
+  render.rectangle(data.drawpos, data.drawpos.add([data.width,data.height]), data.color);
+
+  end(data);
+}
+
+var btnbb;
+var btnpost = function()
+{
+  btnbb = data.bb;
+}
+
+mum.button = function(str, data = {padding:[4,4], color:Color.black})
+{
+  if (pre(data)) return;
+  posts.push(post);
+  post = btnpost;
+  if (typeof str === 'string')
+    render.text(str, cursor.add(data.padding), data.scale, data.color);
+  else
+    str();
+
+  if (data.action && data.hover && bbox.pointin(btnbb, input.mouse.screenpos())) {
+    data.hover.__proto__ = data;
+    data = data.hover;
+  }
+  render.rectangle([btnbb.l-data.padding.x, btnbb.b-data.padding.y], [btnbb.r+data.padding.y, btnbb.t+data.padding.y], data.color);
+  data.bb = btnbb;
+
+  post = posts.pop();
+  end(data);
+}
+
+mum.window = function(fn, data = {})
+{
+  if (pre(data)) return;
+
+  render.rectangle(cursor, cursor.add(data.size), data.color);
+  cursor.y += data.height;
+  cursor = cursor.add(data.padding);
+  fn();
+  end(data);
+}
+
+mum.ex_hud = function()
+{
+  mum.label("TOP LEFT", {pos:[0,game.size.y], anchor:[0,1]});
+  mum.label("BOTTOM LEFT", {pos:[0,0], anchor:[0,0]});
+  mum.label("TOP RIGHT", {pos:game.size, anchor:[1,1]});
+  mum.label("BOTTOM RIGHT", {pos:[game.size.x, 0], anchor:[1,0]});
+}

scripts/render.js

@@ -4,6 +4,44 @@ render.doc = {
   wireframe: "Show only wireframes of models."
 };
 
+var cur = {};
+
+render.use_shader = function(shader)
+{
+  if (cur.shader === shader) return;
+  cur.shader = shader;
+  cur.globals = {};
+  cur.bind = undefined;
+  cur.mesh = undefined;
+  render.setpipeline(shader.pipe);
+}
+
+render.use_mat = function(mat)
+{
+  if (!cur.shader) return;
+  if (cur.mat === mat) return;
+
+  render.shader_apply_material(cur.shader, mat, cur.mat);
+  
+  cur.mat = mat;
+
+  cur.images = [];
+  if (!cur.shader.fs.images) return;
+  for (var img of cur.shader.fs.images)
+    if (mat[img.name])
+      cur.images.push(mat[img.name]);
+    else
+      cur.images.push(game.texture("icons/no_tex.gif"));
+}
+
+var models_array = [];
+
+render.set_model = function(t)
+{
+  if (cur.shader.vs.unimap.model)
+    render.setunim4(0, cur.shader.vs.unimap.model.slot, t);
+}
+
 var shaderlang = {
  macos: "metal_macos",
  windows: "hlsl5",
@@ -93,23 +131,37 @@ function shader_directive(shader, name, map)
 
 function global_uni(uni, stage)
 {
+  cur.globals[stage] ??= {};
+  if (cur.globals[stage][uni.name]) return true;
   switch(uni.name) {
     case "time":
+      cur.globals[stage][uni.name]
       render.setuniv(stage, uni.slot, profile.secs(profile.now()));
+      cur.globals[stage][uni.name] = true;
       return true;
     case "projection":
       render.setuniproj(stage, uni.slot);
+      cur.globals[stage][uni.name] = true;
       return true;
     case "view":
       render.setuniview(stage, uni.slot);
+      cur.globals[stage][uni.name] = true;
       return true;
     case "vp":
       render.setunivp(stage, uni.slot);
+      cur.globals[stage][uni.name] = true;
       return true;
   }
   
   return false;
 }
+
+var setcam = render.set_camera;
+render.set_camera = function(cam)
+{
+  delete cur.shader;
+  setcam(cam);
+}
  
 render.make_shader = function(shader)
 {
@@ -260,22 +312,26 @@ var shader_unisize = {
   16: render.setuniv4
 };
   
-render.shader_apply_material = function(shader, material = {})
+render.shader_apply_material = function(shader, material = {}, old = {})
 {
   for (var p in shader.vs.unimap) {
     if (global_uni(shader.vs.unimap[p], 0)) continue;
-    if (!(p in material)) continue;    
+    if (material[p] === old[p]) continue;
+    assert(p in material, `shader ${shader.name} has no uniform for ${p}`);
     var s = shader.vs.unimap[p];
     shader_unisize[s.size](0, s.slot, material[p]);
   }
   
   for (var p in shader.fs.unimap) {
     if (global_uni(shader.fs.unimap[p], 1)) continue;
-    if (!(p in material)) continue;    
+    if (material[p] === old[p]) continue;
+    assert(p in material, `shader ${shader.name} has no uniform for ${p}`);    
     var s = shader.fs.unimap[p];
     shader_unisize[s.size](1, s.slot, material[p]);
   }
+  
   if (!material.diffuse) return;
+  if (material.diffuse === old.diffuse) return;
   
   if ("diffuse_size" in shader.fs.unimap)
     render.setuniv2(1, shader.fs.unimap.diffuse_size.slot, [material.diffuse.width, material.diffuse.height]);
@@ -284,40 +340,48 @@ render.shader_apply_material = function(shader, material = {})
     render.setuniv2(0, shader.vs.unimap.diffuse_size.slot, [material.diffuse.width, material.diffuse.height]);
 }
 
-render.sg_bind = function(shader, mesh = {}, material = {}, ssbo)
+render.sg_bind = function(mesh, ssbo)
 {
+  if (cur.mesh === mesh && cur.bind) {
+    cur.bind.inst = 1;
+    cur.bind.images = cur.images;
+    render.setbind(cur.bind);
+    return cur.bind;
+  }
+  
+  cur.mesh = mesh;
+  
   var bind = {};
   bind.attrib = [];
-  if (shader.vs.inputs)
-  for (var a of shader.vs.inputs) {
+  if (cur.shader.vs.inputs)
+  for (var a of cur.shader.vs.inputs) {
     if (!(a.name in mesh)) {
       if (!(a.name.slice(2) in mesh)) {
-        console.error(`cannot draw shader ${shader.name}; there is no attrib ${a.name} in the given mesh.`);
+        console.error(`cannot draw shader ${cur.shader.name}; there is no attrib ${a.name} in the given mesh.`);
         return undefined;
       } else
       bind.attrib.push(mesh[a.name.slice(2)]);
     } else
     bind.attrib.push(mesh[a.name]);
   }
-  bind.images = [];
-  if (shader.fs.images)
-  for (var img of shader.fs.images) {
-    if (material[img.name])
-      bind.images.push(material[img.name]);
-    else
-      bind.images.push(game.texture("icons/no_tex.gif"));
-  }
   
-  if (shader.indexed) {
+  if (cur.shader.indexed) {
     bind.index = mesh.index;
     bind.count = mesh.count;
   } else
     bind.count = mesh.verts;
     
   bind.ssbo = [];
-  if (shader.vs.storage_buffers)
-  for (var b of shader.vs.storage_buffers)
+  if (cur.shader.vs.storage_buffers)
+  for (var b of cur.shader.vs.storage_buffers)
     bind.ssbo.push(ssbo);
+
+  bind.inst = 1;
+  bind.images = cur.images;
+
+  cur.bind = bind;
+
+  render.setbind(cur.bind);
   
   return bind;
 }
@@ -409,35 +473,29 @@ render.circle = function(pos, radius, color) {
     coord: pos,
     shade: color
   };
-  render.setpipeline(circleshader.pipe);
-  render.shader_apply_material(circleshader, mat);
-  var bind = render.sg_bind(circleshader, shape.quad, mat);
-  bind.inst = 1;
-  render.spdraw(bind);
+  render.use_shader(circleshader);
+  render.use_mat(mat);
+  render.draw(shape.quad);
 }
 
 render.poly = function(points, color, transform) {
   var buffer = render.poly_prim(points);
   var mat = { shade: color};
-  render.setpipeline(polyshader.pipe);
-  render.setunim4(0,polyshader.vs.unimap.model.slot, transform);
-  render.shader_apply_material(polyshader, mat);
-  var bind = render.sg_bind(polyshader, buffer, mat);
-  bind.inst = 1;
-  render.spdraw(bind);
+  render.use_shader(polyshader);
+  render.set_model(transform);
+  render.use_mat(mat);
+  render.draw(buffer);
 }
 
 render.line = function(points, color = Color.white, thickness = 1, transform) {
   var buffer = os.make_line_prim(points, thickness, 0, false);
-  render.setpipeline(polyshader.pipe);
+  render.use_shader(polyshader);
   var mat = {
     shade: color
   };
-  render.shader_apply_material(polyshader, mat);
-  render.setunim4(0,polyshader.vs.unimap.model.slot, transform);
-  var bind = render.sg_bind(polyshader, buffer, mat);
-  bind.inst = 1;
-  render.spdraw(bind);
+  render.use_mat(mat);
+  render.set_model(transform);
+  render.draw(buffer);
 }
 
 /* All draw in screen space */
@@ -479,7 +537,7 @@ render.coordinate = function(pos, size, color) {
 }
 
 render.boundingbox = function(bb, color = Color.white) {
-  render.poly(bbox.topoints(bb), color);
+  render.line(bbox.topoints(bb).wrapped(1), color);
 }
 
 render.rectangle = function(lowerleft, upperright, color) {
@@ -499,19 +557,22 @@ render.window = function(pos, wh, color) {
   render.box(p,wh,color);
 };
 
-render.text = function(str, pos, size = 1, color = Color.white, wrap = -1, anchor = [0,1], cursor = -1) {
-  
-  var bb = render.text_size(str, size, wrap);
+render.text_bb = function(str, size = 1, wrap = -1, pos = [0,0])
+{
+  var bb = render.text_size(str,size,wrap);
   var w = (bb.r - bb.l);
   var h = (bb.t - bb.b);
-  
-  //render.text draws with an anchor on top left corner
-  var p = pos.slice();
+
   bb.r += pos.x;
   bb.l += pos.x;
   bb.t += pos.y;
   bb.b += pos.y;
-  gui.text(str, p, size, color, wrap, cursor);
+  return bb;
+}
+
+render.text = function(str, pos, size = 1, color = Color.white, wrap = -1, anchor = [0,1], cursor = -1) {
+  var bb = render.text_bb(str, size, wrap, pos);
+  gui.text(str, pos, size, color, wrap, cursor);
   return bb;
   
   p.x -= w * anchor.x;
@@ -524,19 +585,19 @@ render.text = function(str, pos, size = 1, color = Color.white, wrap = -1, ancho
   return bb;
 };
 
-render.image = function(tex, pos, scale = 1, rotation = 0, color = Color.white, dimensions = [tex.width, tex.height]) {
+render.image = function(tex, pos, scale = [tex.width, tex.height], rotation = 0, color = Color.white) {
   var t = os.make_transform();
   t.pos = pos;
-  t.scale = [scale,scale,scale];
-  render.setpipeline(render.spriteshader.pipe);
-  render.setunim4(0, render.spriteshader.vs.unimap.model.slot, t);
-  render.shader_apply_material(render.spriteshader, {
+  t.scale = [scale.x/tex.width,scale.y/tex.height,1];
+  render.use_shader(render.spriteshader);
+  render.set_model(t);
+  render.use_mat({
     shade: color,
-    diffuse: tex
+    diffuse: tex,
+    rect:[0,0,1,1]
   });
-  var bind = render.sg_bind(render.spriteshader, shape.quad, {diffuse:tex});
-  bind.inst = 1;
-  render.spdraw(bind);
+  
+  render.draw(shape.quad);
   
   var bb = {};
   bb.b = pos.y;
@@ -546,19 +607,30 @@ render.image = function(tex, pos, scale = 1, rotation = 0, color = Color.white,
   return bb;
 }
 
-render.slice9 = function(tex, pos, bb, scale = 1, color = Color.white)
+
+// pos is the lower left corner, scale is the width and height
+render.slice9 = function(tex, pos, bb, scale = [tex.width,tex.height], color = Color.white)
 {
   var t = os.make_transform();
   t.pos = pos;
-  t.scale = [scale,scale,scale];
-  render.setpipeline(render.slice9.pipe);
-  render.setunim4(0, render.slice9.vs.unimap.model.slot, t);
-  render.shader_apply_material(render.slice9, {
-    shade: color
+  t.scale = [scale.x/tex.width,scale.y/tex.height,1];
+  var border;
+  if (typeof bb === 'number')
+    border = [bb/tex.width,bb/tex.height,bb/tex.width,bb/tex.height];
+  else
+    border = [bb.l/tex.width, bb.b/tex.height, bb.r/tex.width, bb.t/tex.height];
+
+  render.use_shader(slice9shader);
+  render.set_model(t);
+  render.use_mat({
+    shade: color,
+    diffuse:tex,
+    rect:[0,0,1,1],
+    border: border,
+    scale: [scale.x/tex.width,scale.y/tex.height]
   });
-  var bind = render.sg_bind(render.slice9, shape.quad, {diffuse:tex});
-  bind.inst = 1;
-  render.spdraw(bind);
+
+  render.draw(shape.quad);
 }
 
 var textssbo = render.text_ssbo();
@@ -566,11 +638,10 @@ var textssbo = render.text_ssbo();
 render.flush_text = function()
 {
   if (!render.textshader) return;
-  render.setpipeline(render.textshader.pipe);
-  render.shader_apply_material(render.textshader);
-  var textbind = render.sg_bind(render.textshader, shape.quad, {text:render.font.texture}, textssbo);
-  textbind.inst = render.flushtext();
-  render.spdraw(textbind);
+  render.use_shader(render.textshader);
+  render.use_mat({text:render.font.texture});
+
+  render.draw(shape.quad, textssbo, render.flushtext());
 }
 
 render.fontcache = {};
@@ -591,5 +662,10 @@ render.cross.doc = "Draw a cross centered at pos, with arm length size.";
 render.arrow.doc = "Draw an arrow from start to end, with wings of length wingspan at angle wingangle.";
 render.rectangle.doc = "Draw a rectangle, with its corners at lowerleft and upperright.";
 
+render.draw = function(mesh, ssbo, inst = 1)
+{
+  render.sg_bind(mesh, ssbo);
+  render.spdraw(cur.bind.count, inst);
+}
 
 return {render};

scripts/std.js

@@ -14,6 +14,7 @@ if (os.sys() === 'macos') {
   appy.inputs['S-g'] = os.gc;
 }
 
+appy.inputs.f12 = function() { mum.debug = !mum.debug; }
 appy.inputs.f11 = window.toggle_fullscreen;
 appy.inputs['M-f4'] = prosperon.quit;
 

shaders/9slice.cg

@@ -10,8 +10,10 @@ void vert()
 
 @block frag
 uniform vec4 border;
-// borders in pixels, x = left, y = bottom, z = right, w = top
-#define B vec4(10., 20., 30., 20.)
+uniform vec2 scale;
+uniform vec4 shade;
+
+// border given as [left,down,right,top], in scaled coordinates
 
 vec2 uv9slice(vec2 uv, vec2 s, vec4 b)
 {
@@ -21,21 +23,10 @@ vec2 uv9slice(vec2 uv, vec2 s, vec4 b)
 
 void frag()
 {
-  vec2 uv = fragCoord/iResolution.xy;
-  vec2 ts = vec2(textureSize(iChannel0, 0));
-  // scaling factor
-  // probably available as uniform irl
-  vec2 s = iResolution.xy / ts;
-
-  // border by texture size, shouldn't be > .5
-  // probably available as uniform irl
-  vec4 b = min(B / ts.xyxy, vec4(.499));
-  uv = uv9slice(uv, s, b);
-  
-  vec3 col = vec3(texture(iChannel0, uv).x);
-
-  fragColor = vec4(col,1.0);
+  vec2 ruv = uv9slice(uv, scale, border);
+  color = texture(sampler2D(diffuse,smp), ruv);
+  if (color.a < 0.1) discard;
 }
 @end
 
-#include <base.cg>
+#include <base.cg>

shaders/poly.cg

@@ -1,7 +1,7 @@
+#blend mix
 #depth off
 #primitive triangle
 #cull none
-#blend mix
 
 @vs vs
 in vec3 a_pos;

source/engine/jsffi.c

@@ -655,9 +655,8 @@ sg_bindings js2bind(JSValue v)
   }
   
   JSValue ssbo = js_getpropstr(v, "ssbo");
-  for (int i = 0; i < js_arrlen(ssbo); i++) {
+  for (int i = 0; i < js_arrlen(ssbo); i++)
     bind.vs.storage_buffers[i] = *js2sg_buffer(js_getpropidx(ssbo,i));
-  }
   
   return bind;
 }
@@ -948,12 +947,33 @@ JSC_CCALL(render_setunim4,
   sg_apply_uniforms(js2number(argv[0]), js2number(argv[1]), SG_RANGE_REF(m.e));
 );
 
-JSC_CCALL(render_spdraw,
+JSC_CCALL(render_setbind,
   sg_bindings bind = js2bind(argv[0]);
   sg_apply_bindings(&bind);
-  int p = js2number(js_getpropstr(argv[0], "count"));
-  int n = js2number(js_getpropstr(argv[0], "inst"));
-  sg_draw(0,p,n);
+)
+
+JSC_CCALL(render_make_t_ssbo,
+  JSValue array = argv[0];
+  HMM_Mat4 ms[js_arrlen(array)];
+  for (int i = 0; i < js_arrlen(array); i++)
+    ms[i] = transform2mat(*js2transform(js_getpropidx(array, i)));
+
+  sg_buffer *rr = malloc(sizeof(sg_buffer));
+  *rr = sg_make_buffer(&(sg_buffer_desc){
+    .data = {
+      .ptr = ms,
+      .size = sizeof(HMM_Mat4)*js_arrlen(array),
+    },
+    .type = SG_BUFFERTYPE_STORAGEBUFFER,
+    .usage = SG_USAGE_IMMUTABLE,
+    .label = "transform buffer"
+  });
+
+  return sg_buffer2js(rr);
+)
+
+JSC_CCALL(render_spdraw,
+  sg_draw(0,js2number(argv[0]),js2number(argv[1]));
 )
 
 JSC_CCALL(render_setpipeline,
@@ -988,7 +1008,8 @@ static const JSCFunctionListEntry js_render_funcs[] = {
   MIST_FUNC_DEF(render, pipeline, 1),
   MIST_FUNC_DEF(render, setuniv3, 2),
   MIST_FUNC_DEF(render, setuniv, 2),
-  MIST_FUNC_DEF(render, spdraw, 1),
+  MIST_FUNC_DEF(render, spdraw, 2),
+  MIST_FUNC_DEF(render, setbind, 1),
   MIST_FUNC_DEF(render, setuniproj, 2),
   MIST_FUNC_DEF(render, setuniview, 2),
   MIST_FUNC_DEF(render, setunivp, 2),
@@ -1001,6 +1022,7 @@ static const JSCFunctionListEntry js_render_funcs[] = {
   MIST_FUNC_DEF(render, gfx_gui, 0),
   MIST_FUNC_DEF(render, imgui_end, 0),
   MIST_FUNC_DEF(render, imgui_init, 0),
+  MIST_FUNC_DEF(render, make_t_ssbo, 1)
 };
 
 JSC_CCALL(gui_scissor, sg_apply_scissor_rect(js2number(argv[0]), js2number(argv[1]), js2number(argv[2]), js2number(argv[3]), 0))

source/engine/model.c

@@ -58,9 +58,9 @@ void mesh_add_material(primitive *prim, cgltf_material *mat)
       cgltf_buffer_view *buf = img->buffer_view;
       pmat->diffuse = texture_fromdata(buf->buffer->data, buf->size);
     } else {
-      char *path = makepath(dirname(cpath), img->uri);
-      pmat->diffuse = texture_from_file(path);
-      free(path);
+//      char *path = makepath(dirname(cpath), img->uri);
+//      pmat->diffuse = texture_from_file(path);
+//      free(path);
      }
    } else
      pmat->diffuse = texture_from_file("icons/moon.gif"); 

source/engine/resources.c

@@ -126,17 +126,6 @@ char *dirname(const char *path)
   return dir;
 }
 
-char *makepath(char *dir, char *file)
-{
-  int d = strlen(dir) + strlen(file) + 2;
-  char *path = malloc(d);
-  path[0] = 0;
-  strncat(path, dir, d);
-  strncat(path, "/", d);
-  strncat(path, file, d);
-  return path;
-}
-
 char *seprint(char *fmt, ...)
 {
   va_list args;

source/engine/resources.h

@@ -12,7 +12,6 @@ extern int LOADED_GAME;
 void resources_init();
 char *get_filename_from_path(char *path, int extension);
 char *dirname(const char *path);
-char *makepath(char *dir, char *file);
 char *str_replace_ext(const char *s, const char *newext);
 FILE *res_open(char *path, const char *tag);
 char **ls(const char *path);