Drawing simple frame

Deseteral · Jun 30, 2023 · a806842 · a806842
1 parent 1ffdaa5
commit a806842
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 166 deletions.
diff --git a/Source/main.lua b/Source/main.lua
@@ -2829,30 +2829,6 @@ Engine.secondaryColor = playdate.graphics.kColorWhite
 Engine.ticks = 0
 Engine.shouldCountTicks = true
 ____exports.Engine = Engine
-return ____exports
- end,
-["engine.input"] = function(...) 
---[[ Generated with https://github.com/TypeScriptToLua/TypeScriptToLua ]]
-local ____exports = {}
-local keyMap = {
-    up = playdate.kButtonUp,
-    down = playdate.kButtonDown,
-    left = playdate.kButtonLeft,
-    right = playdate.kButtonRight,
-    a = playdate.kButtonA,
-    b = playdate.kButtonB
-}
-class("Input").extends(Object)
-Input.init = function(self)
-    Input.super.init(self)
-end
-function Input.getKey(self, key)
-    return playdate.buttonIsPressed(keyMap[key])
-end
-function Input.getKeyDown(self, key)
-    return playdate.buttonJustPressed(keyMap[key])
-end
-____exports.Input = Input
 return ____exports
  end,
 ["engine.textures"] = function(...) 
@@ -2928,13 +2904,58 @@ function Textures.load(self, name)
     return {normal = normal, inverted = inverted}
 end
 ____exports.Textures = Textures
+return ____exports
+ end,
+["engine.frame"] = function(...) 
+--[[ Generated with https://github.com/TypeScriptToLua/TypeScriptToLua ]]
+local ____exports = {}
+import("CoreLibs/nineslice")
+local function drawFrame(self, x, y, w, h, clippingRegion)
+    local patchSize = 9
+    local slice = playdate.graphics.nineSlice.new(
+        "images/frame",
+        patchSize,
+        patchSize,
+        patchSize,
+        patchSize
+    )
+    slice:drawInRect(x, y, w, h)
+    clippingRegion(nil)
+end
+____exports.drawFrame = drawFrame
+return ____exports
+ end,
+["engine.input"] = function(...) 
+--[[ Generated with https://github.com/TypeScriptToLua/TypeScriptToLua ]]
+local ____exports = {}
+local keyMap = {
+    up = playdate.kButtonUp,
+    down = playdate.kButtonDown,
+    left = playdate.kButtonLeft,
+    right = playdate.kButtonRight,
+    a = playdate.kButtonA,
+    b = playdate.kButtonB
+}
+class("Input").extends(Object)
+Input.init = function(self)
+    Input.super.init(self)
+end
+function Input.getKey(self, key)
+    return playdate.buttonIsPressed(keyMap[key])
+end
+function Input.getKeyDown(self, key)
+    return playdate.buttonJustPressed(keyMap[key])
+end
+____exports.Input = Input
 return ____exports
  end,
 ["main-menu-stage"] = function(...) 
 --[[ Generated with https://github.com/TypeScriptToLua/TypeScriptToLua ]]
 local ____exports = {}
 local ____engine = require("engine.engine")
 local Engine = ____engine.Engine
+local ____frame = require("engine.frame")
+local drawFrame = ____frame.drawFrame
 local ____input = require("engine.input")
 local Input = ____input.Input
 local ____stage = require("engine.stage")
@@ -2976,6 +2997,17 @@ function MainMenuStage.render(self)
     local h = 82
     local x = (Engine.width - w) / 2
     local y = 90
+    drawFrame(
+        nil,
+        x,
+        y,
+        w,
+        h,
+        function()
+            local mx = x + 16 + 2
+            Textures.listPointerRightTexture.normal:draw(x, y + 2 + 30 * self.cursor)
+        end
+    )
 end
 function MainMenuStage.onDestroy(self)
 end

diff --git a/src-web/engine/frame.ts b/src-web/engine/frame.ts
diff --git a/src/engine/frame.ts b/src/engine/frame.ts
@@ -0,0 +1,20 @@
+require('CoreLibs/nineslice');
+
+import { Textures } from 'src/engine/textures';
+
+function drawFrame(x: number, y: number, w: number, h: number, clippingRegion: () => void): void {
+  const patchSize = 9;
+
+  const slice = playdate.graphics.nineSlice.new('images/frame', patchSize, patchSize, patchSize, patchSize);
+  slice.drawInRect(x, y, w, h);
+
+  // Clipping content inside
+  // ctx.save();
+  // ctx.beginPath();
+  // ctx.rect(x, y, w, h);
+  // ctx.clip();
+  clippingRegion();
+  // ctx.restore();
+}
+
+export { drawFrame };
diff --git a/src/main-menu-stage.ts b/src/main-menu-stage.ts
@@ -2,7 +2,7 @@ require('CoreLibs/object');
 
 import { Engine } from 'src/engine/engine';
 // import { Font } from 'src/engine/font';
-// import { drawFrame } from 'src/engine/frame';
+import { drawFrame } from 'src/engine/frame';
 import { Input } from 'src/engine/input';
 // import { playSound, Sound } from 'src/engine/sounds';
 import { Stage } from 'src/engine/stage';
@@ -56,20 +56,20 @@ class MainMenuStage extends Stage {
     const x = (Engine.width - w) / 2;
     const y = 90;
 
-    // drawFrame(x, y, w, h, ctx, () => {
-    //   const mx = x + 16 + 2;
+    drawFrame(x, y, w, h, () => {
+      const mx = x + 16 + 2;
 
-    //   ctx.drawImage(Textures.listPointerRightTexture.normal, x, y + 2 + (30 * this.cursor));
+      Textures.listPointerRightTexture.normal.draw(x, y + 2 + (30 * this.cursor));
 
-    //   Font.draw('New game', mx, y, ctx);
+      // Font.draw('New game', mx, y, ctx);
 
-    //   if (this.hasSaveData) {
-    //     Font.draw('Continue', mx, y + 30, ctx);
-    //     Font.draw('How to play', mx, y + 30 * 2, ctx);
-    //   } else {
-    //     Font.draw('How to play', mx, y + 30, ctx);
-    //   }
-    // });
+      // if (this.hasSaveData) {
+      //   Font.draw('Continue', mx, y + 30, ctx);
+      //   Font.draw('How to play', mx, y + 30 * 2, ctx);
+      // } else {
+      //   Font.draw('How to play', mx, y + 30, ctx);
+      // }
+    });
   }
 
   onDestroy(): void {