diff --git a/README.md b/README.md index 986b7700..80d884a0 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/examples/vite-js-starter/.gitignore b/examples/vite-js-starter/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/vite-js-starter/.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/examples/vite-js-starter/README.md b/examples/vite-js-starter/README.md new file mode 100644 index 00000000..2d466c06 --- /dev/null +++ b/examples/vite-js-starter/README.md @@ -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) \ No newline at end of file diff --git a/examples/vite-js-starter/index.html b/examples/vite-js-starter/index.html new file mode 100644 index 00000000..0ed7085a --- /dev/null +++ b/examples/vite-js-starter/index.html @@ -0,0 +1,6 @@ + + + LittleJS Vite starter + + + \ No newline at end of file diff --git a/examples/vite-js-starter/package.json b/examples/vite-js-starter/package.json new file mode 100644 index 00000000..3aff4889 --- /dev/null +++ b/examples/vite-js-starter/package.json @@ -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" + } +} diff --git a/examples/vite-js-starter/src/main.js b/examples/vite-js-starter/src/main.js new file mode 100644 index 00000000..2987c968 --- /dev/null +++ b/examples/vite-js-starter/src/main.js @@ -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); \ No newline at end of file