update engine

Author: luizbills

public/about.html

@@ -371,10 +371,7 @@ <h2><a id="settings">Game Configuration</a></h2>
 
       <h2><a id="globals">Global Variables</a></h2>
 
-      <pre><code class="language-typescript">// the game canvas
-CANVAS: HTMLCanvasElement
-
-// the amount of time since the game started
+      <pre><code class="language-typescript">// the amount of time since the game started
 T: number
 
 // the game screen width
@@ -383,12 +380,6 @@ <h2><a id="globals">Global Variables</a></h2>
 // the game screen height
 H: number
 
-// the center X of game screen
-CX: number
-
-// the center Y of game screen
-CY: number
-
 // the current mouse's X-position
 // or -1 (if the mouse was not used or detected)
 MX: number
@@ -665,7 +656,10 @@ <h2><a id="engine-api">Engine API</a></h2>
 
       <p>The following functions are most used internally, but also very useful when creating plugins.</p>
 
-      <pre><code class="language-typescript">// Loads a plugin.
+      <pre><code class="language-typescript">// gets the canvas
+canvas(): HTMLCanvasElement
+
+// Loads a plugin.
 // see: https://github.com/litecanvas/game-engine/blob/main/samples/plugin-basics/plugin-basics.js
 use(callback): void
 

public/app.js

@@ -94,7 +94,7 @@
           const instance = _litecanvas(settings);
           instance.use(pluginMigrate);
           instance.use(pluginFrameRateMeter, {
-            hidden: true,
+            hidden: false,
           });
           instance.listen("before:init", () => {
             instance.use(pluginAssetLoader);

public/litecanvas.js

@@ -1,5 +1,5 @@
 const cacheName = "luizbills.litecanvas-editor-v1";
-const version = "2025.06.20.2";
+const version = "2025.06.22.0";
 
 const precacheResources = [
   "/",

public/preview.html

@@ -6,24 +6,13 @@ export default function customCompletions(context) {
     from: word.from,
     options: [
       // global constants
-      { label: "CANVAS", type: "constant", info: "game canvas HTML element" },
       { label: "W", type: "variable", info: "width of the game screen" },
       { label: "H", type: "variable", info: "height of the game screen" },
       {
         label: "T",
         type: "variable",
         info: "seconds since the game started",
       },
-      {
-        label: "CX",
-        type: "variable",
-        info: "middle X of the game screen",
-      },
-      {
-        label: "CY",
-        type: "variable",
-        info: "middle Y of the game screen",
-      },
       {
         label: "MX",
         type: "variable",
@@ -405,6 +394,12 @@ export default function customCompletions(context) {
         detail: "(value)",
         info: "Sets the scale of the game's delta time (dt)",
       },
+      {
+        label: "canvas",
+        type: "function",
+        apply: "canvas()",
+        info: "returns the canvas",
+      },
       {
         label: "use",
         type: "function",

public/sw.js

@@ -14,9 +14,9 @@ let bg, color, radius, posx, posy
 function init() {
     bg = 0 // the color #0 (black)
     color = 3 // the color #3 (white)
-    radius = W / 10 // the canvas width/10
-    posx = CX // center X (or canvas width/2)
-    posy = CY // center Y (or canvas width/2)
+    radius = W / 10 // canvas.width / 10
+    posx = W / 2 // center X or canvas.width / 2
+    posy = H / 2 // center Y or canvas.height / 2
 }
 
 // this function detect clicks/touches
@@ -29,7 +29,7 @@ function tapped(x, y) {
 
 // put the game logic in this function
 function update(dt) {
-    // make the circle falls 100 pixels per second
+    // make the circle falls 200 pixels per second
     posy += 200 * dt
 }