littlejsengine 1.7.13 → 1.8.1

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 (58) hide show
  1. package/README.md +27 -55
  2. package/build/littlejs.d.ts +253 -76
  3. package/build/littlejs.esm.js +644 -523
  4. package/build/littlejs.esm.min.js +1 -1
  5. package/build/littlejs.js +640 -332
  6. package/build/littlejs.min.js +1 -1
  7. package/build/littlejs.release.js +640 -332
  8. package/examples/breakout/game.js +17 -14
  9. package/examples/breakout/gameObjects.js +29 -8
  10. package/examples/breakout/index.html +3 -3
  11. package/examples/breakoutTutorial/README.md +2 -2
  12. package/examples/breakoutTutorial/game.js +4 -4
  13. package/examples/breakoutTutorial/index.html +2 -2
  14. package/examples/electron/build.js +2 -0
  15. package/examples/electron/game.js +3 -2
  16. package/examples/electron/index.html +2 -2
  17. package/examples/empty/game.js +1 -1
  18. package/examples/favicon.png +0 -0
  19. package/examples/js13k/build.js +2 -0
  20. package/examples/js13k/game.js +20 -15
  21. package/examples/js13k/index.html +14 -14
  22. package/examples/module/game.js +4 -3
  23. package/examples/module/index.html +1 -1
  24. package/examples/particles/index.html +19 -22
  25. package/examples/platformer/game.js +3 -3
  26. package/examples/platformer/gameEffects.js +21 -19
  27. package/examples/platformer/gameLevel.js +6 -6
  28. package/examples/platformer/gameObjects.js +18 -18
  29. package/examples/platformer/gamePlayer.js +4 -3
  30. package/examples/platformer/index.html +6 -6
  31. package/examples/platformer/tiles.png +0 -0
  32. package/examples/platformer/tilesLevel.png +0 -0
  33. package/examples/puzzle/game.js +10 -8
  34. package/examples/puzzle/index.html +2 -2
  35. package/examples/screenshot.jpg +0 -0
  36. package/examples/starter/build.js +2 -0
  37. package/examples/starter/game.js +32 -21
  38. package/examples/starter/index.html +13 -13
  39. package/examples/starter/tiles.png +0 -0
  40. package/examples/stress/index.html +2 -2
  41. package/examples/typescript/build.js +2 -0
  42. package/examples/typescript/game.js +4 -3
  43. package/examples/typescript/game.ts +4 -3
  44. package/examples/typescript/index.html +1 -1
  45. package/package.json +1 -1
  46. package/src/engine.js +59 -49
  47. package/src/engineAudio.js +67 -41
  48. package/src/engineBuild.js +23 -7
  49. package/src/engineDraw.js +139 -40
  50. package/src/engineExport.js +4 -191
  51. package/src/engineInput.js +22 -10
  52. package/src/engineMedals.js +13 -45
  53. package/src/engineObject.js +12 -13
  54. package/src/engineParticles.js +17 -17
  55. package/src/engineSettings.js +195 -2
  56. package/src/engineTileLayer.js +23 -22
  57. package/src/engineUtilities.js +6 -6
  58. package/src/engineWebGL.js +73 -74
package/README.md CHANGED
@@ -10,11 +10,11 @@
10
10
 
11
11
  LittleJS is a lightweight open source HTML5 game engine designed for modern web development.
12
12
  It's small footprint is packed with a comprehensive feature set, including hybrid rendering, physics, particles, sound effects, music, input handling, and debug tools.
13
- The code is very clean and well documented with a several examples to get you started. Choo-Choo! 🚂
13
+ The code is very clean and well documented with some fun examples to get you started. Choo-Choo! 🚂
14
14
 
15
15
  <div align="center">
16
16
 
17
- ## [Demo](https://killedbyapixel.github.io/LittleJS/examples/starter/) | [Docs](https://killedbyapixel.github.io/LittleJS/docs) | [Trailer](https://youtu.be/chuBzGjv7Ms) | [Discord](https://discord.gg/zb7hcGkyZe) | [Tutorial](https://github.com/KilledByAPixel/LittleJS/tree/main/examples/breakoutTutorial)
17
+ ## [Demo](https://killedbyapixel.github.io/LittleJS/examples/starter/) | [Docs](https://killedbyapixel.github.io/LittleJS/docs) | [Trailer](https://youtu.be/chuBzGjv7Ms) | [Discord](https://discord.gg/zb7hcGkyZe) | [Tutorial](https://github.com/KilledByAPixel/LittleJS/blob/main/examples/breakoutTutorial/README.md)
18
18
 
19
19
  </div>
20
20
 
@@ -22,36 +22,36 @@ The code is very clean and well documented with a several examples to get you st
22
22
 
23
23
  ## About LittleJS
24
24
 
25
- LittleJS is a small but powerful game engine with many features and no depenencies.
25
+ LittleJS is a small but powerful game engine with many features and no dependencies.
26
26
 
27
27
  ### ✨ Graphics
28
28
 
29
29
  - Super fast sprite and tile map rendering engine with WebGL
30
- - Update and render 10,000+ objects at 60fps, often many times more
31
- - Particle effect system and [design tool](https://killedbyapixel.github.io/LittleJS/examples/particles/)
30
+ - Update and render over 10,000 objects at a solid 60fps
32
31
  - Apply [Shadertoy](https://www.shadertoy.com) compatible shaders for post processinge effects
32
+ - Robust particle effect system and [effect design tool](https://killedbyapixel.github.io/LittleJS/examples/particles/)
33
33
 
34
34
  ### 🔊 Audio
35
35
 
36
- - Positional sound effects with wav or [ZzFX](https://killedbyapixel.github.io/ZzFX/) sound effect generator
36
+ - Positional sound effects with wave or [ZzFX](https://killedbyapixel.github.io/ZzFX/)
37
37
  - Music with mp3, ogg, wave, or [ZzFXM](https://keithclark.github.io/ZzFXM/)
38
38
 
39
39
  ### 🎮 Input
40
40
 
41
- - Input processing system for keyboard, mouse, gamepad, and touch
42
- - On screen touch gamepad for mobile devices
41
+ - Comprehensive system for keyboard, mouse, gamepad, and touch
42
+ - On screen touch gamepad designed for mobile devices
43
43
 
44
44
  ### 💥 Physics
45
45
 
46
46
  - 2D physics engine with collision handling for axis aligned boxes
47
- - Very fast collision handling and raycasting for tile maps
47
+ - Very fast collision and raycasting for tile maps
48
48
 
49
49
  ### 🚀 Flexability
50
50
 
51
- - Designed to work with all modern web bowsers and mobile devices
52
- - Compatible with TypeScript and Modules with example projects for both
53
- - For size coding competitions like [js13kGames](https://js13kgames.com/), [a special example project builds to a 7KB zip file](https://killedbyapixel.github.io/LittleJS/examples/js13k)
54
- - Builds to a Windows executable with [Electron](https://www.electronjs.org/) for distribution on PC platforms like Steam
51
+ - Compatible with all modern web bowsers and on mobile devices
52
+ - Support for TypeScript and Modules with example projects for both
53
+ - Ideal for size coding competitions like [js13kGames](https://js13kgames.com/), [starter project builds to a 7KB zip](https://killedbyapixel.github.io/LittleJS/examples/js13k)
54
+ - Builds to an executable with [Electron](https://www.electronjs.org/) for distribution on Windows, macOS, and Linux
55
55
  - Open Source with the [MIT license](https://github.com/KilledByAPixel/LittleJS/blob/main/LICENSE) so it can be used for anything you want forever
56
56
 
57
57
  ### 🛠️ And more...
@@ -66,65 +66,37 @@ LittleJS is a small but powerful game engine with many features and no depenenci
66
66
  ## Demos
67
67
 
68
68
  ### [Starter Project](https://killedbyapixel.github.io/LittleJS/examples/starter/) - Clean example with only a few things to get you started
69
+ ### [Breakout](https://killedbyapixel.github.io/LittleJS/examples/breakout/) - Breakout game with post processing effect
69
70
  ### [Puzzle Game](https://killedbyapixel.github.io/LittleJS/examples/puzzle/) - Match 3 puzzle game with HD rendering and high score tracking
70
71
  ### [Platformer](https://killedbyapixel.github.io/LittleJS/examples/platformer/) - Platformer/shooter with procedural generation and destruction
71
- ### [Breakout](https://killedbyapixel.github.io/LittleJS/examples/breakout/) - Breakout game with post processing effect
72
72
  ### [Stress Test](https://killedbyapixel.github.io/LittleJS/examples/stress/) - Max sprite/object test and music system demo
73
73
  ### [Particle System Designer](https://killedbyapixel.github.io/LittleJS/examples/particles/) - Particle system editor and visualizer
74
74
 
75
75
  ## How to use LittleJS
76
76
 
77
- To use LittleJS download the latest package from GitHub or call ```npm install littlejsengine```. This package contains the engine and several small examples.
78
-
79
- [You can use the empty example template as a starting point.](https://github.com/KilledByAPixel/LittleJS/blob/main/examples/empty/game.js) This file contains just the minimal setup to start the engine. You can also download and include [littlejs.js](https://github.com/KilledByAPixel/LittleJS/blob/main/build/littlejs.js) or [littlejs.min.js](https://github.com/KilledByAPixel/LittleJS/blob/main/build/littlejs.min.js).
77
+ To use LittleJS download the latest package from GitHub or call ```npm install littlejsengine```.
80
78
 
81
- If your game loads any files like images you will need to run a local web server. Some editors can do this automatically like [Visual Studio Code](https://code.visualstudio.com/) with the [Live Server plugin](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). You can also use [http-server](https://www.npmjs.com/package/http-server) via npm.
79
+ [The Breakout Tutorial](https://github.com/KilledByAPixel/LittleJS/tree/main/examples/breakoutTutorial) demonstrates how to make a simple game from scratch. [The tutorial is also available on YouTube.](https://youtu.be/tSwDx-NWTXE?si=bkjMa8-7AN2Wg5MO)
82
80
 
83
- [The Breakout Tutorial](https://github.com/KilledByAPixel/LittleJS/blob/main/examples/breakoutTutorial) is provided to demonstrate how to make a simple game from scratch. [The tutorial is also available on YouTube.](https://youtu.be/tSwDx-NWTXE?si=bkjMa8-7AN2Wg5MO)
81
+ [This GitNation talk explains how LittleJS works with some tips on how to use it.](https://youtu.be/_dXKU0WgAj8?si=ZDXLYAFDWp54hrGT)
84
82
 
85
83
  ## Builds
86
84
 
87
- To easily include LittleJS in your game, you can use one of the 3 pre-built js files. These are also built automatically by the build scripts.
85
+ To easily include LittleJS in your game, you can use one of the pre-built js files.
88
86
 
89
87
  - [littlejs.js](https://github.com/KilledByAPixel/LittleJS/blob/main/build/littlejs.js) - The full game engine with debug mode available
90
88
  - [littlejs.release.js](https://github.com/KilledByAPixel/LittleJS/blob/main/build/littlejs.release.js) - The engine optimized for release builds
91
89
  - [littlejs.min.js](https://github.com/KilledByAPixel/LittleJS/blob/main/build/littlejs.min.js) - The engine in release mode and minified
92
-
93
- LittleJS can also be imported as a module. There are two module flavors that are automatically built.
94
-
95
90
  - [littlejs.esm.js](https://github.com/KilledByAPixel/LittleJS/blob/main/build/littlejs.esm.js) - The engine exported as a module with debug mode available
96
91
  - [littlejs.esm.min.js](https://github.com/KilledByAPixel/LittleJS/blob/main/build/littlejs.esm.min.js) - The engine exported as a minified module in release mode
97
92
 
98
93
  To rebuild the engine you must first run ```npm install``` to setup the necessary npm dependencies. Then call ```npm run build``` to build the engine.
99
94
 
100
- The starter example project also 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.
101
-
102
- ## Engine Source Code
103
-
104
- This engine is made with simplicity in mind using clean easy to read code.
105
- There are only a few core files used by the entire engine.
106
-
107
- - [engine.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engine.js) - Top level engine init, update, and render
108
- - [engineSettings.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineSettings.js) - Global engine settings
109
- - [engineObject.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineObject.js) - Base object class and physics
110
- - [engineDraw.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineDraw.js) - Code for canvas drawing and text
111
- - [engineAudio.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineAudio.js) - Spacial sound effects, and zzfx sound generator
112
- - [engineInput.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineInput.js) - Input for keyboard, mouse, touch, and gamepad
113
- - [engineUtilities.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineUtilities.js) - Vector2, Color, and Timer clases and math functions
114
-
115
- Optional Components, these components are built to synergize with the rest of the engine but are not required.
116
-
117
- - [engineTileLayer.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineTileLayer.js) - Tile layer rendering and collision
118
- - [engineParticles.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineParticles.js) - Particle system with fast rendering and collision
119
- - [engineWebGL.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineWebGL.js) - Super fast rendering with WebGL and post processing
120
- - [engineMedals.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineMedals.js) - Achievement tracker with Newgrounds integration
121
- - [engineDebug.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineDebug.js) - Debug rendering system and information overlay
122
- - [engineExport.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineExport.js) - Included when exporting engine as a module
123
- - [engineBuild.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineBuild.js) - Node script used to build the engine
95
+ 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.
124
96
 
125
97
  ## LittleJS Setup
126
98
 
127
- To start LittleJS, you must create 5 functions and pass them to engineInit. A canvas will automatically be created and added to the document.
99
+ To start LittleJS, you need to create these 5 functions and pass them to engineInit.
128
100
 
129
101
  ```javascript
130
102
  function gameInit()
@@ -158,21 +130,22 @@ function gameRenderPost()
158
130
  }
159
131
 
160
132
  // Startup LittleJS Engine
161
- engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
133
+ engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
162
134
  ```
163
135
 
164
136
  ## LittleJS Objects
165
137
 
166
- Though not required, LittleJS is intended to 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. Engine objects are automatically added to the global list of objects where they will be updated and rendered until destroyed.
138
+ 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.
167
139
 
168
140
  Here is a template you can use to make objects that behave however you want. See the examples for a complete demonstration.
169
141
 
170
142
  ```javascript
171
143
  class MyObject extends EngineObject
172
144
  {
173
- constructor(pos, size, tileIndex, tileSize, angle)
145
+ constructor(pos, size, tileInfo, angle)
174
146
  {
175
- super(pos, size, tileIndex, tileSize, angle);
147
+ super(pos, size, tileInfo, angle);
148
+ // setup object
176
149
  }
177
150
 
178
151
  update()
@@ -202,7 +175,7 @@ Debug builds of LittleJS have a special menu that can be opened by pressing the
202
175
 
203
176
  ## Games Made With LittleJS
204
177
 
205
- Here are a few of the amazing games people are making with LittleJS.
178
+ Here are a few of the amazing games people are making with LittleJS...
206
179
 
207
180
  - [Space Huggers](https://www.newgrounds.com/portal/view/819609) - Run and gun platformer with procedural levels
208
181
  - [Undergrowth](https://undergrowth.squidband.uk/) - An interactive music videogame for the band Squid
@@ -214,13 +187,12 @@ Here are a few of the amazing games people are making with LittleJS.
214
187
  - [Necrotic Commander](https://js13kgames.com/entries/necrotic-commander) - Tower defense game by [Daniel Jeffery](https://github.com/d-jeffery/NecroticCommander)
215
188
  - [Boxing up Bamboo](https://patrickgh3.itch.io/boxing-up-bamboo) - A challenging puzzle game by [Patrick Traynor](https://cwpat.me/about)
216
189
  - [Samurai Sam](https://dev.js13kgames.com/2023/games/samurai-sam) - A Fruit Ninja inspired game by [John Edvard](https://reitgames.com)
217
- - Send me your games!
218
190
 
219
191
  ![LittleJS Logo](examples/favicon.png)
220
192
 
221
193
  [npm]: https://img.shields.io/npm/v/littlejsengine
222
194
  [npm-url]: https://www.npmjs.com/package/littlejsengine
223
- [build-size]: https://badgen.net/bundlephobia/minzip/littlejsengine?1
195
+ [build-size]: https://img.shields.io/bundlephobia/minzip/littlejsengine
224
196
  [build-size-url]: https://bundlephobia.com/result?p=littlejsengine
225
197
  [npm-downloads]: https://img.shields.io/npm/dw/littlejsengine
226
198
  [npmtrends-url]: https://www.npmtrends.com/littlejsengine