Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,21 @@ The code is very clean and well documented with many examples to get you started

## How To Use LittleJS

To get started download the latest LittleJS package from GitHub or install via npm: ```npm install littlejsengine```

To get started download the latest LittleJS package from GitHub or install via npm:

```
npm install littlejsengine
```

or use `degit` for empty Vite tameplate

```
npx degit KilledByAPixel/LittleJS/examples/vite-js-starter my-little-game
```


## Tutorials

- [Making Awesome Games With LittleJS](https://youtu.be/_dXKU0WgAj8?si=ZDXLYAFDWp54hrGT) - A short talk about LittleJS with some tips on how to use it.
- [Tutorial: Breakout](https://github.com/KilledByAPixel/LittleJS/tree/main/examples/breakoutTutorial) - Learn how to make a simple game from scratch
Expand Down
24 changes: 24 additions & 0 deletions examples/vite-js-starter/.gitignore
Original file line number Diff line number Diff line change
@@ -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?
35 changes: 35 additions & 0 deletions examples/vite-js-starter/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# LittleJS + Vite

This tamplate provides a minimal setup to get LittleJs wokring in Vite.


# Vite features ⚡

```
npm run dev
```

- A dev server that serves your source files over [native ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), with [rich built-in features](https://vite.dev/guide/features.html) and fast [Hot Module Replacement (HMR)](https://vite.dev/guide/features.html#hot-module-replacement).

```
npm run build
```

- A [build command](https://vite.dev/guide/build.html) that bundles your code with [Rollup](https://rollupjs.org), pre-configured to output optimized static assets for production.


```
npm run preview
```

- [Preview command](https://vite.dev/config/preview-options) to test your build


In addition, Vite is highly extensible via its [Plugin API](https://vite.dev/guide/api-plugin.html) and [JavaScript API](https://vite.dev/guide/api-javascript.html) with full typing support.

[Read the Docs to Learn More](https://vite.dev).


# LittleJS

[Read the Docs to Learn More](https://github.com/KilledByAPixel/LittleJS)
6 changes: 6 additions & 0 deletions examples/vite-js-starter/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<!DOCTYPE html>
<head>
<title>LittleJS Vite starter</title>
</head>
<body>
<script src=./src/main.js type=module></script>
17 changes: 17 additions & 0 deletions examples/vite-js-starter/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"name": "littlejs-vite-example",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^7.3.1"
},
"dependencies": {
"littlejsengine": "^1.18.0"
}
}
29 changes: 29 additions & 0 deletions examples/vite-js-starter/src/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { engineInit, drawText, vec2 } from "littlejsengine";

function gameInit() {
// called once after the engine starts up
// setup the game
}

function gameUpdate() {
// called every frame at 60 frames per second
// handle input and update the game state
}

function gameUpdatePost() {
// called after physics and objects are updated
// setup camera and prepare for render
}

function gameRender() {
// called before objects are rendered
// draw any background effects that appear behind objects
}

function gameRenderPost() {
// called after objects are rendered
// draw effects or hud that appear above all objects
drawText('LittleJS Engine', vec2(0, 6), 3);
}

engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);