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,27 +10,40 @@ 10 10 |Rendered using Orthogonal Camera|[[image:NixieOrth.png]] 11 11 |Rendered using Perspective Camera|[[image:NixiePers.png]] 12 12 ))) 13 -* PhaserP5 not workingsomehowneedsinvestigate13 +* CDN and phaser is used 14 14 15 -{{html clean="false"}} 16 -<div id="canvasparent"> 17 - <canvas id="mycanvas" width="800" height="600"> 18 - </canvas> 19 -</div> 15 +{{html}} 16 +<div id = "phaser-parent"></div> 17 +<script src="//cdn.jsdelivr.net/npm/phaser@3.23.0/dist/phaser.min.js"></script> 20 20 <script> 21 -setTimeout( () => { 22 - let c = document.getElementById("mycanvas"); 23 - let ctx = c.getContext("2d"); 19 +class phScene extends Phaser.Scene { 20 + constructor () 21 + { 22 + super({ key: 'phscene' }); 23 + } 24 + preload () 25 + { 26 + } 24 24 25 - ctx.fillStyle = "red"; 26 - ctx.fillRect(20, 20, 75, 50); 28 + create () 29 + { 30 + } 31 +} 27 27 28 - //Turn transparency on 29 - ctx.globalAlpha = 0.2; 30 - ctx.fillStyle = "blue"; 31 - ctx.fillRect(50, 50, 75, 50); 32 - ctx.fillStyle = "green"; 33 - ctx.fillRect(80, 80, 75, 50); 34 -}, 1000 ); 33 +// Let's wait page to load before demo begin, one time so no need handle 34 +setTimeout(function(){ 35 + let ph_imageaddrbase = Window.location + "/WebHome/"; 36 + 37 +// phaser config 38 + let ph_game_config = { 39 + type: Phaser.AUTO, 40 + width: 800, 41 + height: 600, 42 + backgroundColor: '#000000', 43 + parent: 'phaser-parent', 44 + scene: phScene 45 + }; 46 + let ph_game = new Phaser.Game(ph_game_config ); 47 +}, 4000); 35 35 </script> 36 36 {{/html}}