Changes for page Nixie Spritesheet
Last modified by Victor Zhang on 00:34, 22/07/2020
Change comment: Uploaded new attachment "NixiePers.png", version {1}
Summary
-
Page properties (3 modified, 0 added, 0 removed)
Details
- Page properties
-
- Title
-
... ... @@ -1,1 +1,0 @@ 1 -Nixie Spritesheet - Parent
-
... ... @@ -1,1 +1,0 @@ 1 -Main.Past works.My Tests.WebHome - Content
-
... ... @@ -1,39 +1,0 @@ 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}}