litecanvas 0.98.1 → 0.98.2

package/README.md

@@ -28,74 +28,205 @@ Litecanvas is a lightweight HTML5 canvas 2D engine suitable for small web games,
 - **Extensible**: Use or create [plugins](https://www.npmjs.com/search?q=keywords:litecanvas) to add functionalities or change the engine.
 - **Playground**: Access or install the [playground](https://litecanvas.js.org/) webapp to code and share games (even offline).
 
-[Learn more in the cheatsheet...](https://litecanvas.js.org/about.html)
-
 ## Getting Started
 
-You can try our [online playground](https://litecanvas.github.io) or install the NPM package:
+### Installation
+
+You can get started using our [online playground](https://litecanvas.github.io).
+
+Or installing our package via NPM:
 
 ```sh
 npm i litecanvas
 ```
 
-or just use add a `<script>` tag with our CDN link:
+Or just create a HTML file and add a `<script>` tag with our CDN link:
 
 ```html
 <script src="https://unpkg.com/litecanvas"></script>
 ```
 
-### Show me the code!
+### Basic game structure
 
 ```js
-// import the package if you installed via NPM
-import litecanvas from 'litecanvas'
+litecanvas()
+
+function init() {
+    // this functions is called one time only
+    // before the game starts
+}
+
+function update(dt) {
+    // this functions is called 60 times per second
+    // your game logic goes here
+}
 
-// Start and setup the engine
-// learn more: https://litecanvas.js.org/about.html#settings
+function draw() {
+    // this functions is called 60 times per second
+    // your game rendering goes here
+}
+```
+
+> **Note**: if you installed via NPM you need to import the package first: <br/>
+> `import litecanvas from "litecanvas"`
+
+### Set the width and height of the game screen
+
+```js
+// example: a game screen size equal to 480x360
 litecanvas({
-    loop: { init, update, draw, tapped },
+    width: 480,
+    height: 360,
 })
+```
 
-// this function runs once at the beginning
-function init() {
-    bg = 0 // the color #0 (black)
-    color = 3 // the color #3 (white)
-    radius = W / 10 // the canvas Width/10
-    posx = W / 2 // center X (or canvas Width/2)
-    posy = H / 2 // center Y (or canvas Height/2)
+### Colors
+
+Litecanvas has a default palette with 12 colors:
+
+| #   | Color      | #   | Color       |
+| --- | ---------- | --- | ----------- |
+| 0   | Black      | 6   | Dark blue   |
+| 1   | Dark grey  | 7   | Light blue  |
+| 2   | Light grey | 8   | Dark green  |
+| 3   | White      | 9   | Light green |
+| 4   | Red        | 10  | Brown       |
+| 5   | Yellow     | 11  | Beige       |
+
+![The litecanvas color palette](.github/_assets/palette.png)
+
+Each time a Litecanvas' function ask for a color, you should use an of theses colors by its index.
+
+```js
+// example: draw a white rectangle
+color = 3
+rectfill(0, 0, 32, 32, color)
+```
+
+### Printing messages
+
+```js
+litecanvas()
+
+function draw() {
+    // clear and fill the game screen with color #0 (black)
+    cls(0)
+
+    // print a red "Hello" text at x=0, y=0
+    text(0, 0, 'Hello', 4)
+}
+```
+
+### Drawing shapes
+
+You can use the following functions to draw shapes:
+
+- `rect(x, y, width, height, color)` draw a rectangle outline
+- `rectfill(x, y, width, height, color)` draw a color-filled rectangle
+- `circ(x, y, radius, color)` draw a circle outline
+- `circfill(x, y, radius, color)` draw a color-filled circle
+- `oval(x, y, rx, ry, color)` draw a ellipse outline
+- `ovalfill(x, y, rx, ry, color)` draw a color-filled ellipse
+
+```js
+litecanvas()
+
+function draw() {
+    cls(0)
+
+    // draw a color filled rectangle at x=0 and y=0
+    // with width=32 and height=32
+    // and color=3 (white)
+    rectfill(0, 0, 32, 32, 3)
+
+    // draw a circle outline at x=64 and y=32
+    // with radius=40
+    // and color=5 (yellow)
+    circ(64, 32, 40, 5)
 }
+```
+
+### Keyboard
+
+```js
+litecanvas()
+
+function update() {
+    if (iskeydown('space')) {
+        // checks if the spacebar key is down
+    }
+
+    if (iskeypressed('a')) {
+        // checks if the "a" key was pressed
+    }
 
-// this function detect clicks/touches
-function tapped(x, y) {
-    // changes the circle position
-    // based on the position of the tap
-    posx = x
-    posy = y
+    // Returns the last key pressed in your keyboard.
+    const key = lastkey()
+
+    console.log(key)
 }
+```
 
-// put the game logic in this function
-function update(dt) {
-    // make the circle falls 200 pixels per second
-    posy += 200 * dt
+> Note: you can call `iskeydown()` or `iskeypressed()` (without arguments) to check for any key.
+
+### Clicks and Touches
+
+```js
+litecanvas()
+
+let x, y
+
+function tapped(tapX, tapY) {
+    // this function is called when a click or a touch happens
+    // tapX and tapY is where the tap happened
+    x = tapX
+    y = tapY
 }
 
-// put the game rendering in this function
 function draw() {
-    cls(bg) // clear the screen
-    circfill(posx, posy, radius, color) // draw a circle
-    text(10, 10, 'Tap anywhere') // draw a text
+    cls(0)
+
+    if (x != null) {
+        // Draw a red circle wherever you tap
+        circfill(x, y, 32, 4)
+    }
+}
+```
+
+### Mouse cursor
+
+Use `MX` and `MY` variables (automatically declared by Litecanvas) to track the position of the mouse cursor.
+
+```js
+litecanvas()
+
+function draw() {
+    cls(0)
+
+    // draw a red circle in the mouse cursor's position
+    circfill(MX, MY, 32, 4)
 }
 ```
 
-[Play with this code in the playground](https://litecanvas.js.org?c=eJx9U8tu2zAQvOsrBsghcitYtnMz4HvvLdD2SJFriTVNEuSqthH430tSduQEQQUI0GNmdnZ22bb4ziIwhFWIxKMHDwSyvbZUtS0MiWBxdIG2GJh93Lat0UxS2L8iLv%2FEpQt9Kzo38nLgo3lKIqxtH6sZVb9WSJdxzm%2FxCm01Nxi9EkwNVBCnBiy8J4VrU10XVa7Lg47Yj1aydhZhtBHOSoLgYrCjZNCmOtUbJsvWC0y1uh47rFCECNIZF%2FC0Qt0ZIQ%2BLApk%2B7vDyAfWC%2BjQk7xMqCKXHmGA%2F0WI9K5bGcNKKh3a9KlDv4vkG3GScJMsU8At1kn1H2CzuhEsifPtA%2BP0p4fpJLIpSxAxptDzElt0oB4pzIlOo9bnB5Z5LrjII21Oc2tBBGspGdGbcIZ2IaRhZYZh%2Fwu3Le1J9bPf82MrlZtOP05h6caQ0917LNJ735meb0ybUih9MHsWBHh3uhTEx5b%2BC12dKjz4FFUk6q%2Bb6X3fYJMQXKP7MRyCrKKSd%2BY%2BXvI1vSyRNrLt%2BUULL56BIRRmIpqSyt702ps5RNMVDc1uYZtqmws2aELdOCpHpzPV61SDfzz%2BET8fvchoo0PMjI8Oq6z8yIyTy)
+### Litecanvas' variables
+
+Like `MX` and `MY`, Litecanvas also declares these other variables:
+
+- `W`: the width of the game canvas
+- `H`: the height of the game canvas
+- `T`: the amount of seconds since the game started
+- `PI`: approximately 3.14 radians (or 180 degrees)
+- `TWO_PI`: approximately 6.28 radians (or 360 degrees)
+- `HALF_PI`: approximately 1.57 radians (or 90 degrees)
 
-https://github.com/user-attachments/assets/854ac6bd-724f-4da8-bb3c-bc04dba5d8c8
+### And much more!
+
+You can find a complete list of everything litecanvas has to offer on our [cheatsheet](https://litecanvas.js.org/about.html).
 
 ## Demos
 
 Try some demos in the playground:
 
-- [Pong](https://litecanvas.js.org?c=eJy1VV1y00gQftcpmidJWJYl2U5IIKFMyiEPgKk4YMLW1paQxvYUiqSSxiT8hCtwgn3bQ3AeLsAV6J7RzyjEKV42rozdPT39%2B803CROQh%2FECDsAPPMcA%2FEP5hORxI74h0Wu3z1EeDSs5ZqUgA7JTmndhkmg%2Fz9ufc%2F6Jaa5JNUlXCelqb7yQ0RrpvJXKnLEYxaBOpYyyQjub8CUrURwqUbArQQErWxEWQh5fhknJDCPhgkVh%2BiEsrc%2FS4pLHYr0Pw7oPa8ZXa7EPoweouLYNYzCAo00psgt4%2B%2Bn4DZTZJo1LWGYFiDUvYRVeMLLJCyYEZ0Wfr1LMz4iytBTwZPbqxdEUw%2F%2FlgAM%2BG9KX6w1pCVDhQEAaB%2FZGXrVRf1zccXeU%2Fc7fD7fHmJ9NTs8ohOeOHewKjLFT8tgIl6EeZbzrVZHlUgXyRne5fzJ59uyf2fHx%2FOh0On1BcXx36MtyxhjAcz2KSnFw2ZXRpNTfc%2Fdw3aGVPp7r%2B%2FWvQJ6T60iuPlVoLDdpJHiWAk%2B5sGz43AIL4y4GQYsulE8GAfThBAYw6kyeTFHpB8a15lKEec5i68qBj7VjvgTrXoWQWtcFjSg2rFUvryzZa7tRYcM2RSrF6861%2BPrVusLk5CUbQGB3UtnkcSiYFYvbE1FOAQciuMBbUkYFY%2BnjxrIC%2FAHeAN2YgAjZB1Y8NqQpqi5QRJQyyiNOmH6xE1bklry8Kmc1SLs5GmepKdBKaOdRDCuHKqcmJen0EeVTuffkFsMr1%2B73VDsOYdGYLaoeGY0nNdxeyxuHcKLPpgaDv%2BN1dASI3VZVk4L67oPfmWIX0nY1v7p0NR7pFfKs5DQzDYi9A0VX9ytmug%2Bx0HCpts%2B724qosJnvkD0inY%2BqmEqvYiJCbrS3Cqw3ZQFfvlQJPWr0eqNUjgfQb0tvgze4vm5npNLf6kwy8p2ummKiNYveq1qiLEl4SaC%2F5GKt45BC4m7BIqHqc6pno0lA%2F6WQSo%2BQXBdIM%2FYtCWrFqleiR0%2FYH2QtG6B2bQURSdzdexsX4WXDSlFSWp59J48QIYUJkqllRiwVrDAdMC84tcC0O1YlFmnV%2FNXdspD2HOI6PHs2eQlnM0X46Gto35yhgvshXcQ2DWrxkieJ9XsT6dFv%2FMiqeBFJ220jqSliS%2Ba31S47Q6Wvw3TF09WN2i0f3yT6N3%2F8%2B9%2FP79%2FAdAuWs1CoamwHRrf7ZWl8h1eiltqzZZp4eyQibBdrnlNGFr6tnn2zi%2F%2FX9DCbAN9J8%2Bnk%2BRRmr6enZqfvv7lB3vDcB%2BNt3nqqY%2FOj2el0n4r7oxIRzb8ATsCfrQ%3D%3D)
 - [Bouncing Ball](https://litecanvas.js.org?c=eJxtkkFugzAQRfecYpaGOMFJW6lVQhddcQPWlm0iSy4gY0hRkrt3ADc4SRdI9nzm%2FzcMRjlo6lY7XVeQQa8E2TJG8YlpBHg3tdBuGM9Hy3t%2FtFzqrsX3X9%2BjyGinBK963pI4isquEpOZrrQjMZwDFx9QJDuap7t4v5h6hdEcq9fApWskd4pINzv9oW5%2BYJXdfPGWgHShPtzpw6wHKLOBT1%2F6g45AXtrTFL5qZFNQlyUoeVQtVnUJZCFb%2Ba%2FzCQVcLgHy2gsHYPM0dzhJBuvt%2Fp8q23y8TeVg%2BAyE4d9NkEr9UigUPifGpusjHc4FN778CWOYMJ4TxwXl3neyDXckLT%2F5TQvTEjYtVmgrSm1MiLjYUQ%2F78rDu8SfAUYbZzSrX2QrOYwUjfwF7%2FdPj)
 - [Scroller](https://litecanvas.js.org?c=eJxVUM1SgzAQvvMU68FpAhFDLVpH%2BxbOcOj0ECGUzATSIYsyOn13NwXRHpJNvv1%2BkrUGdam6D%2BUZj6J66Eo0rgPTGQTG4TsCaLX36qhhB6tC29K1GtCBXYQ3KyKN1C6onpSl034jcvEonsRWPItMiiw7ROd%2F9sOpUqiBVThFePMV%2FIv7OSu1ujtiQ52G4FxeAu528CAlxFDhHNiqkY0C1pJfuVe9%2Bvx9fGk9ozZA7XpgViMYEsoXKq9wnUZYkkwqgMBEYr4lTKZZbPiC0kLdh%2FRZ7Yd3jz0zArI%2FVumsCySax762zvUM4%2FyWbnMYP1yoqEcMn2dh4wvExsTEAYpluhXQJGuZeNORx4bHjZjfIKaUIDvTAH4AEIGEgw%3D%3D)
 - [3D projection](https://litecanvas.js.org?c=eJyNVcuS2jAQvPsrJofUykE8wykJySlVyRckuy4fZGwWgZEpWQSWFP%2BeGUlgizVLqgyyprul1mgkl9IUc6H%2BiJrFUbTYqbmRlQKppGEx%2FI0AanksYAa%2F4Cv8gG%2F4G8IUPmEfW4S3uloVTjSDBAMAyZjDCJ%2BUuy6%2Bj8MuRWw3pREqqUzdqPs0I4d2k3IYDiE5cHjhcEwdr4vWRjqA%2Fj2kRQgHuwm8jvc7gbTJVZHTYikg1HNJyR1Fp1byd9tcmILlxm2AI%2FWQNRiNIwwsKg2sLAxIkn7G5otP4qAs1LNZYqjXc2KAeaVqgzhl2LImG2G0PLDBYOBUiUxjS6UxdWWEc4i0za5kNoC2fjNrJOY0luPf5D5euJ5yh%2F%2FUzb%2FkCx02oqbiAvopyGGuxd4X8Lys2SimxG139ZIRt5Sq2MvcLNmEukYLVZeUc6rqCbdFbpGuVE%2Bv06vQDZMcmIQejGN4D1PeeI9DGlIQZS1u7EK3BBxkB%2BFkD84WV9Ne9VkkOGTc14QzSitmfrtFmozoOTMoMA4C2TUjuzA%2BhjP6PaEJfbZtuYl5VVLBCdT4omwwXe0tdg1kXpR1iDIvys4AInIBzE30bjZzjBjMElvA7YXvWleaPfzEy62UObiqL%2BoHWwpuVF3U56PYtdPWabDbKHC1mLhL6KJaOdUKVXYZ%2BNqo3Mmqdxt71F3kolw75Zrmc8p1WwlW16NUyjRZp%2FAB87NOk1XqCSffOmsYx%2FFQEp2xEy1XF2anFXGC3WvOtha5xEPg5vXsm7f5vKovAns1qla3TQyRUDby12KXn8e3%2FFwNE85y45tz7TE084aTp%2F93cisP95Pw6qPYdhLc2f4LGJpJDngukxf6O6Yk%2FgdWEko3)
@@ -103,6 +234,19 @@ Try some demos in the playground:
 
 > _See other demos in [samples](/samples) folder_
 
+## Contributing
+
+1. Fork this repository and clone it.
+1. Install the dependencies: `npm i`
+1. Create a new branch and make your changes.
+1. Format the code: `npm run format`
+1. Create new tests in `tests` directory, if necessary.
+1. Test with `npm run test`
+1. Create your pull request.
+1. Done!
+
+> Note: You'll need Node.JS installed in your machine.
+
 ## Inspirations
 
 - [floppy](https://github.com/lpagg/floppy): a micro game engine for beginners.

package/dist/dist.dev.js

@@ -32,7 +32,7 @@
   };
 
   // src/version.js
-  var version = "0.98.1";
+  var version = "0.98.2";
 
   // src/index.js
   function litecanvas(settings = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.98.1",
+    "version": "0.98.2",
     "description": "Lightweight HTML5 canvas 2D game engine suitable for small projects and creative coding. Inspired by PICO-8 and p5.js/Processing.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",

package/src/version.js

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '0.98.1'
+export const version = '0.98.2'