Changes for page Nixie Spritesheet
Last modified by Victor Zhang on 00:34, 22/07/2020
Change comment: There is no comment for this version
Summary
-
Page properties (3 modified, 0 added, 0 removed)
Details
- Page properties
-
- Title
-
... ... @@ -1,0 +1,1 @@ 1 +Nixie Spritesheet - Parent
-
... ... @@ -1,0 +1,1 @@ 1 +Main.Past works.My Tests.WebHome - Content
-
... ... @@ -1,0 +1,39 @@ 1 +* During the development of the GDice app ( the log will be posted soon ), I was experimenting ways to display numbers 2 +* One particular way interested me that has the nostalgic feeling, called [[Nixie Tube>>https://en.wikipedia.org/wiki/Nixie_tube]] 3 +** End up not using it, but it's a good test 4 +** Built using [[Autodesk Fusion 360>>https://www.autodesk.com/products/fusion-360/students-teachers-educators]] 5 +*** Solid modeling , will not be polygon efficient for game rendering 6 +*** Rendered as spritesheet, as f360 has a pretty easy to tune rendering system that's almost photo realistic 7 +** Result put in : [[Nixie Tube Spritesheet>>https://opengameart.org/content/nixie-digits-spritesheet]] 8 +** Packed using [[Texturepacker's free version>>https://www.codeandweb.com/texturepacker]]((( 9 +(% border="1" class="table-bordered" %) 10 +|Rendered using Orthogonal Camera|[[image:NixieOrth.png]] 11 +|Rendered using Perspective Camera|[[image:NixiePers.png]] 12 +))) 13 +* Phaser P5 not working somehow needs investigate 14 +* Somehow can only use raw API 15 + 16 +{{html clean="false"}} 17 +<div id="canvasparent"> 18 + <canvas id="mycanvas" width="600" height="300"> 19 + </canvas> 20 +</div> 21 +<script> 22 +setTimeout( () => { 23 + let c = document.getElementById("mycanvas"); 24 + let ctx = c.getContext("2d"); 25 + 26 + console.log( "canvas size:",c.width, ",", c.height ); 27 + let scrwidth = c.width; 28 + let scrheight = c.height; 29 + let borderwidth = 2; 30 + 31 + // Draw a border 32 + ctx.beginPath(); 33 + ctx.lineWidth = ""+borderwidth; 34 + ctx.strokeStyle = "#ffffff"; 35 + ctx.rect(borderwidth / 2, borderwidth / 2, scrwidth - borderwidth / 2, scrheight - borderwidth / 2); 36 + ctx.stroke(); 37 +}, 1000 ); 38 +</script> 39 +{{/html}}