|
| 1 | +# Litecanvas |
| 2 | + |
| 3 | +> Litecanvas is a lightweight JavaScript HTML5 canvas engine suitable for small web games, prototypes, game jams, animations, creative programming and for learning game programming and game design. Litecanvas has no fancy interface, no visual helpers, no gui tools or editors... just coding. |
| 4 | + |
| 5 | +## Introduction |
| 6 | + |
| 7 | +### Basics |
| 8 | + |
| 9 | +```js |
| 10 | +litecanvas() |
| 11 | + |
| 12 | +function update(dt) { |
| 13 | + // this functions is called 60 times per second |
| 14 | + // your game logic goes here |
| 15 | +} |
| 16 | + |
| 17 | +function draw() { |
| 18 | + // this functions is called 60 times per second |
| 19 | + // your game rendering goes here |
| 20 | +} |
| 21 | +``` |
| 22 | + |
| 23 | +### Set the width and height of the game screen |
| 24 | + |
| 25 | +```js |
| 26 | +// example: a game screen size equal to 320x240 |
| 27 | +litecanvas({ |
| 28 | + width: 320, |
| 29 | + height: 240 |
| 30 | +}) |
| 31 | +``` |
| 32 | + |
| 33 | +### Colors |
| 34 | + |
| 35 | +Litecanvas has a default palette with 12 colors: |
| 36 | + |
| 37 | +| # | Color | |
| 38 | +| --- | --- | |
| 39 | +| 0 | Black | |
| 40 | +| 1 | Dark grey | |
| 41 | +| 2 | Light grey | |
| 42 | +| 3 | White | |
| 43 | +| 4 | Red | |
| 44 | +| 5 | Yellow | |
| 45 | +| 6 | Dark blue | |
| 46 | +| 7 | Light blue | |
| 47 | +| 8 | Dark green | |
| 48 | +| 9 | Light green | |
| 49 | +| 10 | Brown | |
| 50 | +| 11 | Beige | |
| 51 | + |
| 52 | +Each time a Litecanvas' function ask for a color, you should use an of theses colors by its index. |
| 53 | + |
| 54 | +```js |
| 55 | +// example: draw a white rectangle |
| 56 | +color = 3 |
| 57 | +rectfill(0, 0, 32, 32, color) |
| 58 | +``` |
| 59 | + |
| 60 | +### Hello World |
| 61 | + |
| 62 | +```js |
| 63 | +litecanvas() |
| 64 | + |
| 65 | +function draw() { |
| 66 | + // clear and fill the game screen with black color |
| 67 | + cls(0) |
| 68 | + |
| 69 | + // print a red "Hello World" text at x=0, y=0 |
| 70 | + text(0, 0, 'Hello World', 4) |
| 71 | +} |
| 72 | +``` |
| 73 | + |
| 74 | +### Click and Touch |
| 75 | + |
| 76 | +```js |
| 77 | +litecanvas() |
| 78 | + |
| 79 | +let x, y |
| 80 | + |
| 81 | +function tapped(tapX, tapY) { |
| 82 | + // this function is called when a short click or touch happens |
| 83 | + // tapX and tapY is where the tap happened |
| 84 | + x = tapX |
| 85 | + y = tapY |
| 86 | +} |
| 87 | + |
| 88 | +function draw() { |
| 89 | + cls(0) |
| 90 | + |
| 91 | + if (x !== undefined) { |
| 92 | + // draw a yellow circle |
| 93 | + circfill(x, y, 5) |
| 94 | + } |
| 95 | +} |
| 96 | +``` |
| 97 | + |
| 98 | +### Mouse cursor position |
| 99 | + |
| 100 | +Use `MX` and `MY` variables (automatically declared by Litecanvas) to track the position of the mouse cursor. |
| 101 | + |
| 102 | +### Keyboard |
| 103 | + |
| 104 | +```js |
| 105 | +litecanvas() |
| 106 | + |
| 107 | +function update() { |
| 108 | + if (iskeydown('space')) { |
| 109 | + // checks if the spacebar key is down |
| 110 | + } |
| 111 | + |
| 112 | + if (iskeypressed('a')) { |
| 113 | + // checks if the "a" key was pressed |
| 114 | + } |
| 115 | + |
| 116 | + // Returns the last key pressed in your keyboard. |
| 117 | + const key = lastkey() |
| 118 | + |
| 119 | + console.log(key) |
| 120 | +} |
| 121 | +``` |
| 122 | + |
| 123 | +> Note: you can call `iskeydown` or `iskeypressed` without an argument, to check for any key. |
| 124 | + |
| 125 | +### Functions for advanced drawings |
| 126 | + |
| 127 | +```js |
| 128 | +// save the current canvas drawing context state |
| 129 | +push() |
| 130 | + |
| 131 | +// restore the canvas drawing context state to the last saved state |
| 132 | +pop() |
| 133 | + |
| 134 | +// Adds a translation transformation to the current matrix |
| 135 | +translate(x, y) |
| 136 | + |
| 137 | +// Adds a scaling transformation to the canvas units |
| 138 | +// horizontally (x) and/or vertically (y) |
| 139 | +scale(sx, sy) |
| 140 | + |
| 141 | +// Adds a rotation to the transformation matrix |
| 142 | +rotate(radians) |
| 143 | + |
| 144 | +// Sets the alpha (opacity) value to apply when drawing new shapes and images |
| 145 | +// Use a value between 0 and 1 |
| 146 | +alpha(value) |
| 147 | +``` |
| 148 | + |
| 149 | +### Variables declared by Litecanvas |
| 150 | + |
| 151 | +Like `MX` and `MY`, Litecanvas also declares these other variables: |
| 152 | + |
| 153 | +- `W`: the width of the game canvas |
| 154 | +- `H`: the height of the game canvas |
| 155 | +- `T`: the amount of seconds since the game started |
| 156 | +- `PI`: approximately 3.14 radians (or 180 degrees) |
| 157 | +- `TWO_PI`: approximately 6.28 radians (or 360 degrees) |
| 158 | +- `HALF_PI`: approximately 1.57 radians (or 90 degrees) |
| 159 | + |
| 160 | +## Useful links |
| 161 | + |
| 162 | +- [Cheatsheet](https://litecanvas.js.org) |
| 163 | +- [Github](https://github.com/litecanvas/game-engine) |
0 commit comments