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 (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -10,39 +10,34 @@ 10 10 |Rendered using Orthogonal Camera|[[image:NixieOrth.png]] 11 11 |Rendered using Perspective Camera|[[image:NixiePers.png]] 12 12 ))) 13 -* CDN and phaser is used 13 +* Phaser P5 not working somehow needs investigate 14 +* Somehow can only use raw API 14 14 15 -{{html}} 16 -<script src="//cdn.jsdelivr.net/npm/phaser@3.23.0/dist/phaser.min.js"></script> 17 -<div id = "phaser-parent"></div> 16 +{{html clean="false"}} 17 +<div id="canvasparent"> 18 + <canvas id="mycanvas" width="600" height="300"> 19 + </canvas> 20 +</div> 18 18 <script> 19 -let ph_imageaddrbase = Window.location + "/WebHome/"; 22 +let windowurl = Window.location.url; 23 +setTimeout( () => { 24 + let c = document.getElementById("mycanvas"); 25 + let ctx = c.getContext("2d"); 20 20 21 -// phaser config 22 -let ph_game_config = { 23 - type: Phaser.AUTO, 24 - width: 800, 25 - height: 600, 26 - backgroundColor: '#000000', 27 - parent: 'phaser-parent', 28 - scene: phScene 29 -}; 27 + let imgurls = [windowurl + '/']; 30 30 31 -class phScene extends Phaser.Scene { 32 - constructor () 33 - { 34 - super({ key: 'phscene' }); 35 - } 36 - preload () 37 - { 38 - } 29 + console.log( "Load image:", windowurl ); 30 + console.log( "canvas size:",c.width, ",", c.height ); 31 + let scrwidth = c.width; 32 + let scrheight = c.height; 33 + let borderwidth = 2; 39 39 40 - create()41 - {42 - }43 - }44 - 45 - //Let'swaitpage to load before demobegin, one time so no need handle46 - setTimeout(function(){ let ph_game = new Phaser.Game(ph_game_config );}, 1000);35 + // Draw a border 36 + ctx.beginPath(); 37 + ctx.lineWidth = ""+borderwidth; 38 + ctx.strokeStyle = "#ffffff"; 39 + ctx.rect(borderwidth / 2, borderwidth / 2, scrwidth - borderwidth, scrheight - borderwidth); 40 + ctx.stroke(); 41 +}, 1000 ); 47 47 </script> 48 48 {{/html}}