littlejsengine 1.10.4 → 1.10.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -78
- package/dist/littlejs.d.ts +31 -17
- package/dist/littlejs.esm.js +121 -55
- package/dist/littlejs.esm.min.js +1 -1
- package/dist/littlejs.js +121 -55
- package/dist/littlejs.min.js +1 -1
- package/dist/littlejs.release.js +121 -55
- package/examples/box2d/game.js +15 -4
- package/examples/box2d/gameObjects.js +10 -9
- package/examples/box2d/index.html +5 -5
- package/examples/box2d/scenes.js +4 -4
- package/examples/box2d/tiles.png +0 -0
- package/examples/breakout/index.html +3 -3
- package/examples/breakoutTutorial/index.html +2 -2
- package/examples/electron/game.js +3 -0
- package/examples/electron/index.html +2 -2
- package/examples/htmlMenu/index.html +3 -3
- package/examples/js13k/game.js +3 -0
- package/examples/js13k/index.html +13 -13
- package/examples/module/game.js +3 -0
- package/examples/module/index.html +1 -1
- package/examples/particles/index.html +4 -1
- package/examples/platformer/game.js +19 -15
- package/examples/platformer/gameCharacter.js +3 -3
- package/examples/platformer/gameLevel.js +1 -0
- package/examples/platformer/index.html +8 -8
- package/examples/platformer/tiles.png +0 -0
- package/examples/puzzle/index.html +2 -2
- package/examples/starter/game.js +3 -0
- package/examples/starter/index.html +13 -13
- package/examples/stress/index.html +1 -1
- package/examples/typescript/game.js +2 -0
- package/examples/typescript/game.ts +3 -0
- package/examples/typescript/index.html +1 -1
- package/examples/uiSystem/game.js +23 -16
- package/examples/uiSystem/index.html +3 -14
- package/package.json +1 -1
- package/plugins/postProcess.js +2 -9
- package/plugins/uiSystem.js +84 -24
- package/src/engine.js +11 -11
- package/src/engineAudio.js +7 -13
- package/src/engineDraw.js +1 -1
- package/src/engineInput.js +7 -3
- package/src/engineMedals.js +19 -5
- package/src/engineObject.js +8 -5
- package/src/engineTileLayer.js +8 -7
- package/src/engineUtilities.js +59 -10
- package/examples/js13k/build/index.html +0 -1
- package/examples/js13k/build/index.js +0 -1
- package/examples/js13k/build/tiles.png +0 -0
- package/examples/js13k/game - Copy.zip +0 -0
- package/examples/js13k/game.zip +0 -0
- package/examples/starter/build/index.html +0 -2
- package/examples/starter/build/index.js +0 -1
- package/examples/starter/build/tiles.png +0 -0
- package/examples/starter/game.zip +0 -0
- package/examples/typescript/build/build/littlejs.esm.js +0 -4327
- package/examples/typescript/build/dist/littlejs.esm.js +0 -4425
- package/examples/typescript/build/examples/typescript/build.js +0 -24
- package/examples/typescript/build/examples/typescript/game.js +0 -100
- package/examples/typescript/build/examples/typescript/test/build/littlejs.esm.js +0 -3934
- package/examples/typescript/build/examples/typescript/test/examples/typescript/build.js +0 -86
- package/examples/typescript/build/examples/typescript/test/examples/typescript/game.js +0 -92
package/README.md
CHANGED
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
|
|
15
15
|
## 🚂 All aboard!
|
|
16
16
|
|
|
17
|
-
LittleJS is a fast lightweight open source HTML5 game engine for
|
|
18
|
-
Its small footprint is packed with a comprehensive feature set including hybrid rendering, physics, particles, sound
|
|
19
|
-
The code is
|
|
17
|
+
LittleJS is a fast, lightweight, and fully open source HTML5 game engine designed for simplicity and performance.
|
|
18
|
+
Its small footprint is packed with a comprehensive feature set including hybrid rendering, physics, particles, sound, and input handling.
|
|
19
|
+
The code is clean and well documented with some fun examples to get you started right away. Choo-Choo!
|
|
20
20
|
|
|
21
21
|
### 🚀 Join the First Ever LittleJS Game Jam
|
|
22
22
|
|
|
@@ -30,7 +30,7 @@ The code is very clean and well documented with some fun examples to get you sta
|
|
|
30
30
|
|
|
31
31
|

|
|
32
32
|
|
|
33
|
-
## About LittleJS
|
|
33
|
+
## About LittleJS Engine
|
|
34
34
|
|
|
35
35
|
LittleJS is a small but powerful game engine with many features and no dependencies.
|
|
36
36
|
|
|
@@ -43,7 +43,7 @@ LittleJS is a small but powerful game engine with many features and no dependenc
|
|
|
43
43
|
|
|
44
44
|
### 🔊 Audio
|
|
45
45
|
|
|
46
|
-
- Positional sound effects with wave files or ZzFX
|
|
46
|
+
- Positional sound effects with wave files, mp3s, or ZzFX
|
|
47
47
|
- Use [ZzFX](https://killedbyapixel.github.io/ZzFX/) sound effect generator to play sounds without asset files
|
|
48
48
|
- Music with mp3, ogg, wave, or [ZzFXM](https://keithclark.github.io/ZzFXM/)
|
|
49
49
|
|
|
@@ -116,76 +116,6 @@ To rebuild the engine you must first run ```npm install``` to setup the necessar
|
|
|
116
116
|
|
|
117
117
|
The starter example project includes a node js file [build.js](https://github.com/KilledByAPixel/LittleJS/blob/main/examples/starter/build.js) that compresses everything into a tiny zip file using Google Closure, UglifyJS, and ECT Zip.
|
|
118
118
|
|
|
119
|
-
## LittleJS Setup
|
|
120
|
-
|
|
121
|
-
To start LittleJS, you need to create these 5 functions and pass them to engineInit.
|
|
122
|
-
|
|
123
|
-
```javascript
|
|
124
|
-
function gameInit()
|
|
125
|
-
{
|
|
126
|
-
// called once after the engine starts up
|
|
127
|
-
// setup the game
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
function gameUpdate()
|
|
131
|
-
{
|
|
132
|
-
// called every frame at 60 frames per second
|
|
133
|
-
// handle input and update the game state
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
function gameUpdatePost()
|
|
137
|
-
{
|
|
138
|
-
// called after physics and objects are updated
|
|
139
|
-
// setup camera and prepare for render
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
function gameRender()
|
|
143
|
-
{
|
|
144
|
-
// called before objects are rendered
|
|
145
|
-
// draw any background effects that appear behind objects
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
function gameRenderPost()
|
|
149
|
-
{
|
|
150
|
-
// called after objects are rendered
|
|
151
|
-
// draw effects or hud that appear above all objects
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
// Startup LittleJS Engine
|
|
155
|
-
engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
## LittleJS Objects
|
|
159
|
-
|
|
160
|
-
LittleJS can be used as an object oriented system by extending the base class [EngineObject](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineObject.js) with your own. This lightweight class provides many useful features including physics, collision, parent/child system, and sorted rendering. These objects are added to the global list of objects where they will automatically be updated and rendered until destroyed.
|
|
161
|
-
|
|
162
|
-
Here is a template you can use to make objects that behave however you want. See the examples for a complete demonstration.
|
|
163
|
-
|
|
164
|
-
```javascript
|
|
165
|
-
class MyObject extends EngineObject
|
|
166
|
-
{
|
|
167
|
-
constructor(pos, size, tileInfo, angle)
|
|
168
|
-
{
|
|
169
|
-
super(pos, size, tileInfo, angle);
|
|
170
|
-
// setup object
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
update()
|
|
174
|
-
{
|
|
175
|
-
// update object physics and position
|
|
176
|
-
super.update();
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
render()
|
|
180
|
-
{
|
|
181
|
-
// draw object as a sprite
|
|
182
|
-
super.render();
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
```
|
|
186
|
-
|
|
187
|
-
## Debugging
|
|
188
|
-
|
|
189
119
|
Debug builds of LittleJS have a special menu that can be opened by pressing the Esc key.
|
|
190
120
|
|
|
191
121
|
## Games Made With LittleJS
|
|
@@ -194,8 +124,10 @@ Here are a few of the amazing games people made using LittleJS...
|
|
|
194
124
|
|
|
195
125
|
- [Space Huggers](https://github.com/KilledByAPixel/SpaceHuggers) - Original js13k game with source code by [KilledByAPixel](https://frankforce.com/)
|
|
196
126
|
- [Undergrowth](https://undergrowth.squidband.uk/) - An interactive music videogame for the band Squid by [KilledByAPixel](https://frankforce.com/)
|
|
197
|
-
- [
|
|
127
|
+
- [The Way of the Dodo](https://js13kgames.com/2024/games/the-way-of-the-dodo) - Single button platformer by [repsej](https://github.com/repsej)
|
|
128
|
+
- [Wendol Village](https://js13kgames.com/2024/games/wendol-village) - Warcraft-like RTS game by [sanojian](https://github.com/sanojian)
|
|
198
129
|
- [Dead Again](https://js13kgames.com/entries/dead-again) - Top down survial horror by [sanojian & repsej](https://github.com/sanojian/js13k_2022)
|
|
130
|
+
- [Isletopia](https://store.steampowered.com/app/1861260/Isletopia) - Relaxing strategy game of greenifying barren islands by [Gamex Studio](https://x.com/gamesgamex)
|
|
199
131
|
- [Hel's Trial](https://js13kgames.com/entries/hels-trial) - Turn based RPG by [Sebastian Dorn](https://github.com/sebadorn/js13k-2022-death)
|
|
200
132
|
- [Bit Butcher](https://js13kgames.com/entries/bit-butcher) - Survival crafting game by [Deathray Games](https://github.com/deathraygames/bit-butcher)
|
|
201
133
|
- [Necrotic Commander](https://js13kgames.com/entries/necrotic-commander) - Tower defense game by [Daniel Jeffery](https://github.com/d-jeffery/NecroticCommander)
|
|
@@ -204,8 +136,6 @@ Here are a few of the amazing games people made using LittleJS...
|
|
|
204
136
|
- [brrr!](https://snowfrog.itch.io/brrr) - Base defense and shooting game by [Snowfrog](https://www.snowfrog.dev/)
|
|
205
137
|
- [Wands of Triskaidekai](https://js13kgames.com/2024/games/wands-of-triskaidekai) - Platformer with experimental gameplay by [gregwoodsfrontier](https://github.com/gregwoodsfrontier)
|
|
206
138
|
- [Data Warrior: 13kb limit](https://js13kgames.com/2024/games/data-warrior-13kb-limit) - Vampire Survivors-like game by [rndD](https://github.com/rndD)
|
|
207
|
-
- [The Way of the Dodo](https://js13kgames.com/2024/games/the-way-of-the-dodo) - Single button platformer by [repsej](https://github.com/repsej)
|
|
208
|
-
- [Wendol Village](https://js13kgames.com/2024/games/wendol-village) - Warcraft-like RTS game by [sanojian](https://github.com/sanojian)
|
|
209
139
|
- [Unblock](https://js13kgames.com/games/unblock) - Retro style space shooter by [Isaac Benitez](https://github.com/isacben)
|
|
210
140
|
|
|
211
141
|

|
package/dist/littlejs.d.ts
CHANGED
|
@@ -64,15 +64,15 @@ declare module "littlejsengine" {
|
|
|
64
64
|
* @memberof Engine */
|
|
65
65
|
export function setPaused(isPaused: boolean): void;
|
|
66
66
|
/** Startup LittleJS engine with your callback functions
|
|
67
|
-
* @param {Function} gameInit
|
|
68
|
-
* @param {Function} gameUpdate
|
|
69
|
-
* @param {Function} gameUpdatePost - Called after physics and objects are updated,
|
|
70
|
-
* @param {Function} gameRender
|
|
71
|
-
* @param {Function} gameRenderPost - Called after objects are rendered,
|
|
72
|
-
* @param {Array} [imageSources=[]] -
|
|
67
|
+
* @param {Function|function():Promise} gameInit - Called once after the engine starts up
|
|
68
|
+
* @param {Function} gameUpdate - Called every frame before objects are updated
|
|
69
|
+
* @param {Function} gameUpdatePost - Called after physics and objects are updated, even when paused
|
|
70
|
+
* @param {Function} gameRender - Called before objects are rendered, for drawing the background
|
|
71
|
+
* @param {Function} gameRenderPost - Called after objects are rendered, useful for drawing UI
|
|
72
|
+
* @param {Array} [imageSources=[]] - List of images to load
|
|
73
73
|
* @param {HTMLElement} [rootElement] - Root element to attach to, the document body by default
|
|
74
74
|
* @memberof Engine */
|
|
75
|
-
export function engineInit(gameInit: Function, gameUpdate: Function, gameUpdatePost: Function, gameRender: Function, gameRenderPost: Function, imageSources?: any[], rootElement?: HTMLElement): void;
|
|
75
|
+
export function engineInit(gameInit: Function | (() => Promise<any>), gameUpdate: Function, gameUpdatePost: Function, gameRender: Function, gameRenderPost: Function, imageSources?: any[], rootElement?: HTMLElement): void;
|
|
76
76
|
/** Update each engine object, remove destroyed objects, and update time
|
|
77
77
|
* @memberof Engine */
|
|
78
78
|
export function engineObjectsUpdate(): void;
|
|
@@ -700,7 +700,8 @@ declare module "littlejsengine" {
|
|
|
700
700
|
* @return {Number}
|
|
701
701
|
* @memberof Random */
|
|
702
702
|
export function rand(valueA?: number, valueB?: number): number;
|
|
703
|
-
/** Returns a floored random value the two values passed in
|
|
703
|
+
/** Returns a floored random value between the two values passed in
|
|
704
|
+
* The upper bound is exclusive. (If 2 is passed in, result will be 0 or 1)
|
|
704
705
|
* @param {Number} valueA
|
|
705
706
|
* @param {Number} [valueB]
|
|
706
707
|
* @return {Number}
|
|
@@ -875,6 +876,9 @@ declare module "littlejsengine" {
|
|
|
875
876
|
* @param {Number} digits - precision to display
|
|
876
877
|
* @return {String} */
|
|
877
878
|
toString(digits?: number): string;
|
|
879
|
+
/** Checks if this is a valid vector
|
|
880
|
+
* @return {Boolean} */
|
|
881
|
+
isValid(): boolean;
|
|
878
882
|
}
|
|
879
883
|
/**
|
|
880
884
|
* Color object (red, green, blue, alpha) with some helpful functions
|
|
@@ -965,6 +969,9 @@ declare module "littlejsengine" {
|
|
|
965
969
|
/** Returns this color expressed as 32 bit RGBA value
|
|
966
970
|
* @return {Number} */
|
|
967
971
|
rgbaInt(): number;
|
|
972
|
+
/** Checks if this is a valid color
|
|
973
|
+
* @return {Boolean} */
|
|
974
|
+
isValid(): boolean;
|
|
968
975
|
}
|
|
969
976
|
/**
|
|
970
977
|
* Timer object tracks how long has passed since it was set
|
|
@@ -1109,7 +1116,7 @@ declare module "littlejsengine" {
|
|
|
1109
1116
|
* tile(2) // a tile at index 2 using the default tile size of 16
|
|
1110
1117
|
* tile(5, 8) // a tile at index 5 using a tile size of 8
|
|
1111
1118
|
* tile(1, 16, 3) // a tile at index 1 of size 16 on texture 3
|
|
1112
|
-
* tile(vec2(4,8), vec2(30,10)) // a tile at
|
|
1119
|
+
* tile(vec2(4,8), vec2(30,10)) // a tile at index (4,8) with a size of (30,10)
|
|
1113
1120
|
* @memberof Draw
|
|
1114
1121
|
*/
|
|
1115
1122
|
export function tile(pos?: (number | Vector2), size?: (number | Vector2), textureIndex?: number, padding?: number): TileInfo;
|
|
@@ -1588,6 +1595,8 @@ declare module "littlejsengine" {
|
|
|
1588
1595
|
taper: number;
|
|
1589
1596
|
/** @property {Number} - How much to randomize frequency each time sound plays */
|
|
1590
1597
|
randomness: any;
|
|
1598
|
+
/** @property {GainNode} - Gain node for this sound */
|
|
1599
|
+
gainNode: GainNode;
|
|
1591
1600
|
sampleChannels: any[][];
|
|
1592
1601
|
sampleRate: number;
|
|
1593
1602
|
/** Play the sound
|
|
@@ -1599,7 +1608,6 @@ declare module "littlejsengine" {
|
|
|
1599
1608
|
* @return {AudioBufferSourceNode} - The audio source node
|
|
1600
1609
|
*/
|
|
1601
1610
|
play(pos?: Vector2, volume?: number, pitch?: number, randomnessScale?: number, loop?: boolean): AudioBufferSourceNode;
|
|
1602
|
-
gainNode: GainNode;
|
|
1603
1611
|
source: AudioBufferSourceNode;
|
|
1604
1612
|
/** Set the sound volume
|
|
1605
1613
|
* @param {Number} [volume] - How much to scale volume by
|
|
@@ -1914,24 +1922,24 @@ declare module "littlejsengine" {
|
|
|
1914
1922
|
* - Drawn directly to the main canvas without using WebGL
|
|
1915
1923
|
* @namespace TileCollision
|
|
1916
1924
|
*/
|
|
1917
|
-
/** The tile collision layer
|
|
1925
|
+
/** The tile collision layer grid, use setTileCollisionData and getTileCollisionData to access
|
|
1918
1926
|
* @type {Array}
|
|
1919
1927
|
* @memberof TileCollision */
|
|
1920
1928
|
export let tileCollision: any[];
|
|
1921
|
-
/** Size of the tile collision layer
|
|
1929
|
+
/** Size of the tile collision layer 2d grid
|
|
1922
1930
|
* @type {Vector2}
|
|
1923
1931
|
* @memberof TileCollision */
|
|
1924
1932
|
export let tileCollisionSize: Vector2;
|
|
1925
1933
|
/** Clear and initialize tile collision
|
|
1926
|
-
* @param {Vector2} size
|
|
1934
|
+
* @param {Vector2} size - width and height of tile collision 2d grid
|
|
1927
1935
|
* @memberof TileCollision */
|
|
1928
1936
|
export function initTileCollision(size: Vector2): void;
|
|
1929
|
-
/** Set tile collision data
|
|
1937
|
+
/** Set tile collision data for a given cell in the grid
|
|
1930
1938
|
* @param {Vector2} pos
|
|
1931
1939
|
* @param {Number} [data]
|
|
1932
1940
|
* @memberof TileCollision */
|
|
1933
1941
|
export function setTileCollisionData(pos: Vector2, data?: number): void;
|
|
1934
|
-
/** Get tile collision data
|
|
1942
|
+
/** Get tile collision data for a given cell in the grid
|
|
1935
1943
|
* @param {Vector2} pos
|
|
1936
1944
|
* @return {Number}
|
|
1937
1945
|
* @memberof TileCollision */
|
|
@@ -1943,7 +1951,8 @@ declare module "littlejsengine" {
|
|
|
1943
1951
|
* @return {Boolean}
|
|
1944
1952
|
* @memberof TileCollision */
|
|
1945
1953
|
export function tileCollisionTest(pos: Vector2, size?: Vector2, object?: EngineObject): boolean;
|
|
1946
|
-
/** Return the center of first tile hit
|
|
1954
|
+
/** Return the center of first tile hit, undefined if nothing was hit.
|
|
1955
|
+
* This does not return the exact intersection, but the center of the tile hit.
|
|
1947
1956
|
* @param {Vector2} posStart
|
|
1948
1957
|
* @param {Vector2} posEnd
|
|
1949
1958
|
* @param {EngineObject} [object]
|
|
@@ -2245,14 +2254,19 @@ declare module "littlejsengine" {
|
|
|
2245
2254
|
* @param {String} [src] - Image location for the medal
|
|
2246
2255
|
*/
|
|
2247
2256
|
constructor(id: number, name: string, description?: string, icon?: string, src?: string);
|
|
2257
|
+
/** @property {Number} - The unique identifier of the medal */
|
|
2248
2258
|
id: number;
|
|
2259
|
+
/** @property {String} - Name of the medal */
|
|
2249
2260
|
name: string;
|
|
2261
|
+
/** @property {String} - Description of the medal */
|
|
2250
2262
|
description: string;
|
|
2263
|
+
/** @property {String} - Icon for the medal */
|
|
2251
2264
|
icon: string;
|
|
2265
|
+
/** @property {Boolean} - Is the medal unlocked? */
|
|
2266
|
+
unlocked: boolean;
|
|
2252
2267
|
image: HTMLImageElement;
|
|
2253
2268
|
/** Unlocks a medal if not already unlocked */
|
|
2254
2269
|
unlock(): void;
|
|
2255
|
-
unlocked: number;
|
|
2256
2270
|
/** Render a medal
|
|
2257
2271
|
* @param {Number} [hidePercent] - How much to slide the medal off screen
|
|
2258
2272
|
*/
|