feat: add KAPLAY template

stackblitz · Sep 8, 2024 · 9be1e08 · 9be1e08
1 parent ed1c8a9
commit 9be1e08
Show file tree

Hide file tree

Showing 9 changed files with 195 additions and 0 deletions.
diff --git a/kaplay/.gitignore b/kaplay/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/kaplay/README.md b/kaplay/README.md
@@ -0,0 +1,58 @@
+# KAPLAY Starter
+
+👋 Welcome to KAPLAY!
+
+This README includes everything you need to start writing game quickly.
+
+## Project Structure
+
+```bash
+.
+├── src
+│   ├── ...
+│   ├── scenes
+│   │   └── starter.ts  # An Example Of A Simple Scene In KAPLAY
+│   └── components      # This Is Where Your Components Would Live To Be Accessed By Nodes
+├── public
+│   └── put images here
+├── ...
+├── theme.ts            # Customize the theme of the tutorial
+└── tsconfig.json       # Typescript Config
+```
+
+## Getting Started
+
+Make sure you have all dependencies installed and started the dev server:
+
+```bash
+pnpm install
+pnpm run dev
+```
+
+## UI Structure
+
+```markdown
+┌────────────────────────────────────────────────────────────────────────────────────────────────┐
+│ ● ● ●                                                                                          │
+├─────────────────────────────────────┬──────────────────────────────────────────────────────────┤
+│                                     │                                                          │
+│                                     │                                                          │
+│                                     │                                                          │
+│                                     │                                                          │
+│                                     │                                                          │
+│                                     │                                                          │
+│                                     │                                                          │
+│               Your Code             │                                                          │
+│                                     │                                                          │
+│                                     │                      Game Preview                        │
+│                                     │                                                          │
+│                                     │                                                          │
+│                                     │                                                          │
+│                                     │                                                          │
+│                                     │                                                          │
+├─────────────────────────────────────┤                                                          │
+│                                     │                                                          │
+│               Terminal              │                                                          │
+│                                     │                                                          │
+└─────────────────────────────────────┴──────────────────────────────────────────────────────────┘
+```
diff --git a/kaplay/index.html b/kaplay/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>KAPLAY Game</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
diff --git a/kaplay/package.json b/kaplay/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "kaplay-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.3",
+    "vite": "^5.4.2",
+    "kaplay": "3001.0.0-beta.1"
+  }
+}
diff --git a/kaplay/src/components/spin.ts b/kaplay/src/components/spin.ts
@@ -0,0 +1,11 @@
+export default function cmp_spin(){
+  let me: any
+  return {
+    add() {
+      me = this as any
+    },
+    update() {
+      me.angle -= 2.222222222
+    }
+  }
+}
diff --git a/kaplay/src/kaplay.ts b/kaplay/src/kaplay.ts
@@ -0,0 +1,10 @@
+import kaplay from 'kaplay';
+
+export const k = kaplay({
+  background: [0,0,0],
+  width: 1280,
+  height: 720,
+  letterbox: true,
+});
+
+export default k;
diff --git a/kaplay/src/main.ts b/kaplay/src/main.ts
@@ -0,0 +1,6 @@
+import k from "./kaplay";
+import scn_starter from "./scenes/starter";
+
+k.scene("starter", scn_starter);
+
+k.go("starter");
diff --git a/kaplay/src/scenes/starter.ts b/kaplay/src/scenes/starter.ts
@@ -0,0 +1,35 @@
+import cmp_spin from "../components/spin";
+import k from "../kaplay";
+
+export default function scn_starter(){
+
+  k.add([
+    k.rect(k.width(), k.height()),
+    k.color(k.WHITE),
+  ])
+
+  k.add([
+    k.pos(k.center()),
+    k.anchor("center"),
+    k.color(k.BLACK),
+    k.text("Hello, Kaplay!\nEdit The Files In The 'src' Folder To Get Started\nCheck Out https://kaplayjs.com For The Documentation", {
+      align: "center",
+    }),
+  ]);
+
+  k.loadBean()
+
+  let bean = k.add([
+    k.sprite("bean"),
+    k.pos(k.width() / 2, k.height() / 2 + 200),
+    k.anchor("center"),
+    k.rotate(0),
+    cmp_spin(),
+  ])
+
+  k.onFixedUpdate(() => {
+    bean.pos.x = Math.cos(k.time()) * 100 + k.width() / 2
+    bean.pos.y = Math.sin(k.time()) * 100 + k.height() / 2 + 200
+  })
+
+}
diff --git a/kaplay/tsconfig.json b/kaplay/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}