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.
Files changed (63) hide show
  1. package/README.md +8 -78
  2. package/dist/littlejs.d.ts +31 -17
  3. package/dist/littlejs.esm.js +121 -55
  4. package/dist/littlejs.esm.min.js +1 -1
  5. package/dist/littlejs.js +121 -55
  6. package/dist/littlejs.min.js +1 -1
  7. package/dist/littlejs.release.js +121 -55
  8. package/examples/box2d/game.js +15 -4
  9. package/examples/box2d/gameObjects.js +10 -9
  10. package/examples/box2d/index.html +5 -5
  11. package/examples/box2d/scenes.js +4 -4
  12. package/examples/box2d/tiles.png +0 -0
  13. package/examples/breakout/index.html +3 -3
  14. package/examples/breakoutTutorial/index.html +2 -2
  15. package/examples/electron/game.js +3 -0
  16. package/examples/electron/index.html +2 -2
  17. package/examples/htmlMenu/index.html +3 -3
  18. package/examples/js13k/game.js +3 -0
  19. package/examples/js13k/index.html +13 -13
  20. package/examples/module/game.js +3 -0
  21. package/examples/module/index.html +1 -1
  22. package/examples/particles/index.html +4 -1
  23. package/examples/platformer/game.js +19 -15
  24. package/examples/platformer/gameCharacter.js +3 -3
  25. package/examples/platformer/gameLevel.js +1 -0
  26. package/examples/platformer/index.html +8 -8
  27. package/examples/platformer/tiles.png +0 -0
  28. package/examples/puzzle/index.html +2 -2
  29. package/examples/starter/game.js +3 -0
  30. package/examples/starter/index.html +13 -13
  31. package/examples/stress/index.html +1 -1
  32. package/examples/typescript/game.js +2 -0
  33. package/examples/typescript/game.ts +3 -0
  34. package/examples/typescript/index.html +1 -1
  35. package/examples/uiSystem/game.js +23 -16
  36. package/examples/uiSystem/index.html +3 -14
  37. package/package.json +1 -1
  38. package/plugins/postProcess.js +2 -9
  39. package/plugins/uiSystem.js +84 -24
  40. package/src/engine.js +11 -11
  41. package/src/engineAudio.js +7 -13
  42. package/src/engineDraw.js +1 -1
  43. package/src/engineInput.js +7 -3
  44. package/src/engineMedals.js +19 -5
  45. package/src/engineObject.js +8 -5
  46. package/src/engineTileLayer.js +8 -7
  47. package/src/engineUtilities.js +59 -10
  48. package/examples/js13k/build/index.html +0 -1
  49. package/examples/js13k/build/index.js +0 -1
  50. package/examples/js13k/build/tiles.png +0 -0
  51. package/examples/js13k/game - Copy.zip +0 -0
  52. package/examples/js13k/game.zip +0 -0
  53. package/examples/starter/build/index.html +0 -2
  54. package/examples/starter/build/index.js +0 -1
  55. package/examples/starter/build/tiles.png +0 -0
  56. package/examples/starter/game.zip +0 -0
  57. package/examples/typescript/build/build/littlejs.esm.js +0 -4327
  58. package/examples/typescript/build/dist/littlejs.esm.js +0 -4425
  59. package/examples/typescript/build/examples/typescript/build.js +0 -24
  60. package/examples/typescript/build/examples/typescript/game.js +0 -100
  61. package/examples/typescript/build/examples/typescript/test/build/littlejs.esm.js +0 -3934
  62. package/examples/typescript/build/examples/typescript/test/examples/typescript/build.js +0 -86
  63. 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 modern web development.
18
- Its small footprint is packed with a comprehensive feature set including hybrid rendering, physics, particles, sound effects, music, and input handling.
19
- The code is very clean and well documented with some fun examples to get you started. Choo-Choo!
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
  ![LittleJS Screenshot](examples/screenshot.jpg)
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
- - [Isletopia](https://store.steampowered.com/app/1861260/Isletopia) - Relaxing strategy game of greenifying barren islands by [Gamex Studio](https://x.com/gamesgamex)
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
  ![LittleJS Logo](examples/favicon.png)
@@ -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 - Called once after the engine starts up, setup the game
68
- * @param {Function} gameUpdate - Called every frame at 60 frames per second, handle input and update the game state
69
- * @param {Function} gameUpdatePost - Called after physics and objects are updated, setup camera and prepare for render
70
- * @param {Function} gameRender - Called before objects are rendered, draw any background effects that appear behind objects
71
- * @param {Function} gameRenderPost - Called after objects are rendered, draw effects or hud that appear above all objects
72
- * @param {Array} [imageSources=[]] - Image to load
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 pixel location (4,8) with a size of (30,10)
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 array, use setTileCollisionData and getTileCollisionData to access
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 (does not return the exact intersection)
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
  */