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;
let attachurl = windowurl.substring(0, 41) + 'download' + windowurl.substring(45);
setTimeout( () => {
  let c = document.getElementById("mycanvas");
  let ctx = c.getContext("2d");

  let imgurls = [attachurl+'WebHome/NixieOrth.png', attachurl+'WebHome/NixiePers.png'];

  // console.log( "Load image:", JSON.stringify(imgurls) );
  // 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();

  // create images
  imgloads = [];
  imgurls.forEach( (item, ids) => {
    let thisimg = document.createElement("img");
    thisimg.src = item;
    imgloads.push( thisimg );
  });
  // console.log( imgloads );

  var currentidx = 0;
  setInterval( () => {
    // redraw static
    ctx.clearRect(0, 0, scrwidth , scrheight);
    // Draw a border
    ctx.beginPath();
    ctx.lineWidth = ""+borderwidth;
    ctx.strokeStyle = "#ffffff";
    ctx.rect(borderwidth / 2, borderwidth / 2, scrwidth - borderwidth, scrheight - borderwidth);
    ctx.stroke();

    // console.log( "Drawing frame:" + currentidx );
    ctx.drawImage(imgloads[0], 76 * currentidx, 0, 76, 157, 112, 72, 76, 157);
    ctx.drawImage(imgloads[1], 76 * currentidx, 0, 76, 162, 412, 69, 76, 162);
    currentidx++;
    currentidx %= 10;
  } , 500 );
}, 1000 );