Docs — TME — Time Mini Engine

เริ่มต้นใช้งาน

TME (Time Mini Engine) คือ game engine ขนาดเล็กสำหรับสร้างเกม 2D ใช้ WebGPU สำหรับ render และมี build system ที่เรียบง่าย

การติดตั้ง

git clone https://github.com/TimeAndTimeStudio/TME.git
cd TME

สร้างโปรเจกต์ใหม่

npx tme init my-game
cd my-game

Build

npx tme build

รันเกม

เปิด index.html ในเบราว์เซอร์

Getting Started

TME (Time Mini Engine) is a small game engine for creating 2D games. Uses WebGPU for rendering and has a simple build system.

Installation

git clone https://github.com/TimeAndTimeStudio/TME.git
cd TME

Create New Project

npx tme init my-game
cd my-game

Build

npx tme build

Run Game

Open index.html in browser

Project Structure

โครงสร้างโปรเจกต์

my-game/
├── game.tsl          # Game source code
├── index.html        # HTML page with canvas
├── style.css         # User CSS
├── assets/           # User assets (images, audio)
└── dist/             # Build output

ไฟล์ที่จำเป็น

game.tsl — Game source code
index.html — ต้องมี <canvas id="game">
style.css — User CSS (optional)

Project Structure

Project Layout

my-game/
├── game.tsl          # Game source code
├── index.html        # HTML page with canvas
├── style.css         # User CSS
├── assets/           # User assets (images, audio)
└── dist/             # Build output

Required Files

game.tsl — Game source code
index.html — Must contain <canvas id="game">
style.css — User CSS (optional)

Render

TME ใช้ WebGPU สำหรับ rendering — ไม่มี Canvas2D/WebGL fallback

rect()

วาดสี่เหลี่ยม

rect(x, y, width, height, color, rotation?, scale?, alpha?)

Parameter	Type	Default
x, y	number	—
width, height	number	—
color	string	—
rotation	number	0 (radians)
scale	number	1 (รองรับทศนิยม)
alpha	number	1

image()

วาดรูปภาพ

image(src, x, y, width, height, rotation?, scale?, alpha?)

Image โหลดแบบ on-demand — โหลดเมื่อใช้เท่านั้น

Render

TME uses WebGPU for rendering — no Canvas2D/WebGL fallback.

rect()

Draw a rectangle.

rect(x, y, width, height, color, rotation?, scale?, alpha?)

Parameter	Type	Default
x, y	number	—
width, height	number	—
color	string	—
rotation	number	0 (radians)
scale	number	1 (supports decimals)
alpha	number	1

image()

Draw an image.

image(src, x, y, width, height, rotation?, scale?, alpha?)

Images load on-demand — only loaded when used.

Input

รองรับ keyboard, mouse, touch

Keyboard

if input.keyboard.is_down("space"):
  print("Space pressed")

Mouse

if input.mouse.is_down(0):
  print(f"Mouse at {input.mouse.x}, {input.mouse.y}")

Touch

if input.pointer.is_touch:
  print(f"Touch at {input.pointer.x}, {input.pointer.y}")

Input

Supports keyboard, mouse, touch.

Keyboard

if input.keyboard.is_down("space"):
  print("Space pressed")

Mouse

if input.mouse.is_down(0):
  print(f"Mouse at {input.mouse.x}, {input.mouse.y}")

Touch

if input.pointer.is_touch:
  print(f"Touch at {input.pointer.x}, {input.pointer.y}")

Audio

ใช้ audio object เดียวสำหรับ SFX และ BGM

Sound Effects

audio.play("sfx_jump")

Background Music

audio.play("bgm_main", true) # loop

Control

audio.volume = 0.5
audio.pause()
audio.resume()

Audio

Uses one unified audio object for SFX and BGM.

Sound Effects

audio.play("sfx_jump")

Background Music

audio.play("bgm_main", true) # loop

Control

audio.volume = 0.5
audio.pause()
audio.resume()

Game Loop

TEMF runtime จัดการ game loop — คุณแค่เขียน update และ draw

โครงสร้าง

function update(dt):
  # Game logic — เรียกทุก frame

function draw():
  # Render — เรียกหลัง update

start()  # เริ่ม game loop

Fixed Timestep

update(dt) ใช้ fixed timestep — dt มีค่าคงที่ทุก frame

ปรับ FPS

ใช้ fps() เพื่อปรับ framerate

fps(30)  # 30 FPS
fps(60)  # 60 FPS (default)

Game Loop

TEMF runtime manages the game loop — you just write update and draw.

Structure

function update(dt):
  # Game logic — called every frame

function draw():
  # Render — called after update

start()  # Start game loop

Fixed Timestep

update(dt) uses fixed timestep — dt is constant every frame.

Set FPS

Use fps() to adjust framerate

fps(30)  # 30 FPS
fps(60)  # 60 FPS (default)

Build

Build Program orchestrate การ build ทั้งหมด

คำสั่ง

npx tme init [project]  # สร้างโปรเจกต์ใหม่
npx tme build           # build โปรเจกต์

Output

dist/
├── index.html
├── game.js
├── engine.js
├── style.css
└── assets/

กฎสำคัญ

WebGPU เท่านั้น — ไม่มี fallback
index.html ต้องมี canvas#game
style.css เป็น user-owned — build ไม่ทับ
TSL เป็น external read-only — build ไม่แก้

Build

Build Program orchestrates the entire build process.

Commands

npx tme init [project]  # Create new project
npx tme build           # Build project

Output

dist/
├── index.html
├── game.js
├── engine.js
├── style.css
└── assets/

Important Rules

WebGPU only — no fallback
index.html must have canvas#game
style.css is user-owned — build never overwrites
TSL is external read-only — build never modifies