Nixie Spritesheet

• During the development of the GDice app ( the log will be posted soon ), I was experimenting ways to display numbers
• One particular way interested me that has the nostalgic feeling, called Nixie Tube
  • End up not using it, but it's a good test
  • Built using Autodesk Fusion 360
    • Solid modeling , will not be polygon efficient for game rendering
    • Rendered as spritesheet, as f360 has a pretty easy to tune rendering system that's almost photo realistic
  • Result put in : Nixie Tube Spritesheet
  • Packed using Texturepacker's free version

    Rendered using Orthogonal Camera
    Rendered using Perspective Camera

• Phaser P5 not working somehow needs investigate
• Somehow can only use raw API

let windowurl = Window.location.href;
setTimeout( () => {
  let c = document.getElementById("mycanvas");
  let ctx = c.getContext("2d");

  let imgurls = [windowurl + '/'];

  console.log( "Load image:", windowurl );
  console.log( "canvas size:",c.width, ",", c.height );
  let scrwidth = c.width;
  let scrheight = c.height;
  let borderwidth = 2;

  // Draw a border
  ctx.beginPath();
  ctx.lineWidth = ""+borderwidth;
  ctx.strokeStyle = "#ffffff";
  ctx.rect(borderwidth / 2, borderwidth / 2, scrwidth - borderwidth, scrheight - borderwidth);
  ctx.stroke();
}, 1000 );