littlejsengine 1.18.4 → 1.18.8

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 (176) hide show
  1. package/COPYRIGHT.txt +38 -0
  2. package/FAQ.md +633 -0
  3. package/README.md +19 -1
  4. package/dist/littlejs.d.ts +354 -55
  5. package/dist/littlejs.esm.js +1531 -489
  6. package/dist/littlejs.esm.min.js +1 -1
  7. package/dist/littlejs.js +1499 -476
  8. package/dist/littlejs.min.js +1 -1
  9. package/dist/littlejs.release.js +1493 -470
  10. package/package.json +8 -1
  11. package/plugins/box2d.js +32 -7
  12. package/{src/engineMedals.js → plugins/medalSystem.js} +248 -196
  13. package/plugins/pathFinder.js +758 -0
  14. package/plugins/pluginExport.js +19 -0
  15. package/plugins/{tween.js → tweenSystem.js} +7 -7
  16. package/plugins/uiSystem.js +186 -25
  17. package/src/engine.js +2 -141
  18. package/src/engineAudio.js +3 -3
  19. package/src/engineBuild.mjs +4 -2
  20. package/src/engineDebug.js +7 -7
  21. package/src/engineDraw.js +26 -8
  22. package/src/engineExport.js +13 -13
  23. package/src/engineInput.js +8 -8
  24. package/src/engineLogo.js +146 -0
  25. package/src/engineMath.js +15 -6
  26. package/src/engineObject.js +11 -5
  27. package/src/engineParticles.js +6 -3
  28. package/src/engineRelease.js +1 -1
  29. package/src/engineSettings.js +0 -47
  30. package/src/engineUtilities.js +13 -8
  31. package/src/engineWebGL.js +34 -7
  32. package/src/jsconfig.json +3 -1
  33. package/.github/workflows/test.yml +0 -17
  34. package/AI.md +0 -173
  35. package/CLAUDE.md +0 -1
  36. package/examples/box2d/game.js +0 -192
  37. package/examples/box2d/gameObjects.js +0 -564
  38. package/examples/box2d/index.html +0 -9
  39. package/examples/box2d/scenes.js +0 -194
  40. package/examples/box2d/tiles.png +0 -0
  41. package/examples/breakout/game.js +0 -175
  42. package/examples/breakout/gameObjects.js +0 -147
  43. package/examples/breakout/index.html +0 -8
  44. package/examples/breakout/tiles.png +0 -0
  45. package/examples/breakoutTutorial/README.md +0 -521
  46. package/examples/breakoutTutorial/game.js +0 -191
  47. package/examples/breakoutTutorial/images/1.png +0 -0
  48. package/examples/breakoutTutorial/images/10.png +0 -0
  49. package/examples/breakoutTutorial/images/11.png +0 -0
  50. package/examples/breakoutTutorial/images/2.png +0 -0
  51. package/examples/breakoutTutorial/images/3.png +0 -0
  52. package/examples/breakoutTutorial/images/4.png +0 -0
  53. package/examples/breakoutTutorial/images/5.png +0 -0
  54. package/examples/breakoutTutorial/images/6.png +0 -0
  55. package/examples/breakoutTutorial/images/7.png +0 -0
  56. package/examples/breakoutTutorial/images/8.png +0 -0
  57. package/examples/breakoutTutorial/images/9.png +0 -0
  58. package/examples/breakoutTutorial/index.html +0 -8
  59. package/examples/electron/build.mjs +0 -127
  60. package/examples/electron/electron.js +0 -35
  61. package/examples/electron/game.js +0 -54
  62. package/examples/electron/index.html +0 -13
  63. package/examples/electron/package.json +0 -5
  64. package/examples/electron/tiles.png +0 -0
  65. package/examples/empty/game.js +0 -51
  66. package/examples/empty/index.html +0 -5
  67. package/examples/empty/tiles.png +0 -0
  68. package/examples/favicon.png +0 -0
  69. package/examples/games.jpg +0 -0
  70. package/examples/htmlMenu/game.js +0 -82
  71. package/examples/htmlMenu/index.html +0 -45
  72. package/examples/htmlMenu/tiles.png +0 -0
  73. package/examples/index.html +0 -62
  74. package/examples/logo.png +0 -0
  75. package/examples/logo2.png +0 -0
  76. package/examples/module/build.mjs +0 -124
  77. package/examples/module/game.js +0 -132
  78. package/examples/module/index.html +0 -10
  79. package/examples/module/tiles.png +0 -0
  80. package/examples/particles/index.html +0 -426
  81. package/examples/particles/tiles.png +0 -0
  82. package/examples/platformer/data/gameLevelData.tmx +0 -143
  83. package/examples/platformer/data/gameLevelData.tsx +0 -4
  84. package/examples/platformer/game.js +0 -147
  85. package/examples/platformer/gameCharacter.js +0 -309
  86. package/examples/platformer/gameEffects.js +0 -278
  87. package/examples/platformer/gameLevel.js +0 -205
  88. package/examples/platformer/gameLevelData.json +0 -171
  89. package/examples/platformer/gameObjects.js +0 -378
  90. package/examples/platformer/gamePlayer.js +0 -35
  91. package/examples/platformer/index.html +0 -9
  92. package/examples/platformer/tiles.png +0 -0
  93. package/examples/platformer/tilesLevel.png +0 -0
  94. package/examples/puzzle/game.js +0 -331
  95. package/examples/puzzle/index.html +0 -8
  96. package/examples/puzzle/tiles.png +0 -0
  97. package/examples/screenshot.jpg +0 -0
  98. package/examples/shorts/animation.js +0 -18
  99. package/examples/shorts/base.html +0 -54
  100. package/examples/shorts/blending.js +0 -14
  101. package/examples/shorts/box2d.js +0 -51
  102. package/examples/shorts/box2dCar.js +0 -59
  103. package/examples/shorts/box2dPool.js +0 -107
  104. package/examples/shorts/box2dTileLayer.js +0 -48
  105. package/examples/shorts/cameraDrag.js +0 -22
  106. package/examples/shorts/clock.js +0 -21
  107. package/examples/shorts/colors.js +0 -25
  108. package/examples/shorts/debugDraw.js +0 -37
  109. package/examples/shorts/empty.js +0 -30
  110. package/examples/shorts/flappyGame.js +0 -55
  111. package/examples/shorts/fontImage.js +0 -17
  112. package/examples/shorts/fps.js +0 -90
  113. package/examples/shorts/helloWorld.js +0 -11
  114. package/examples/shorts/hillGlideGame.js +0 -63
  115. package/examples/shorts/input.js +0 -64
  116. package/examples/shorts/landerGame.js +0 -57
  117. package/examples/shorts/maze.js +0 -48
  118. package/examples/shorts/medals.js +0 -51
  119. package/examples/shorts/music.js +0 -78
  120. package/examples/shorts/musicPlayer.js +0 -137
  121. package/examples/shorts/nineSlice.js +0 -40
  122. package/examples/shorts/parallax.js +0 -72
  123. package/examples/shorts/particles.js +0 -28
  124. package/examples/shorts/piano.js +0 -44
  125. package/examples/shorts/platformer.js +0 -45
  126. package/examples/shorts/pongGame.js +0 -41
  127. package/examples/shorts/postProcess.js +0 -62
  128. package/examples/shorts/sequencer.js +0 -124
  129. package/examples/shorts/shader.js +0 -29
  130. package/examples/shorts/shapes.js +0 -21
  131. package/examples/shorts/slidingPuzzle.js +0 -52
  132. package/examples/shorts/song.mp3 +0 -0
  133. package/examples/shorts/sound.js +0 -36
  134. package/examples/shorts/spaceGame.js +0 -58
  135. package/examples/shorts/spriteAtlas.js +0 -31
  136. package/examples/shorts/starfield.js +0 -15
  137. package/examples/shorts/texture.js +0 -16
  138. package/examples/shorts/textureWrapped.js +0 -12
  139. package/examples/shorts/tileLayer.js +0 -48
  140. package/examples/shorts/tileRaycast.js +0 -39
  141. package/examples/shorts/tiles.png +0 -0
  142. package/examples/shorts/tiltedView.js +0 -63
  143. package/examples/shorts/timers.js +0 -53
  144. package/examples/shorts/topDown.js +0 -38
  145. package/examples/shorts/tween.js +0 -24
  146. package/examples/shorts/uiSystem.js +0 -61
  147. package/examples/shorts/video.webm +0 -0
  148. package/examples/shorts/videoPlayer.js +0 -34
  149. package/examples/shorts.js +0 -743
  150. package/examples/starter/build.bat +0 -7
  151. package/examples/starter/build.mjs +0 -126
  152. package/examples/starter/game.js +0 -137
  153. package/examples/starter/index.html +0 -35
  154. package/examples/starter/tiles.png +0 -0
  155. package/examples/stress/index.html +0 -173
  156. package/examples/style.css +0 -150
  157. package/examples/tweenSystem/game.js +0 -171
  158. package/examples/tweenSystem/index.html +0 -10
  159. package/examples/tweenSystem/tiles.png +0 -0
  160. package/examples/typescript/build.mjs +0 -60
  161. package/examples/typescript/game.js +0 -100
  162. package/examples/typescript/game.ts +0 -132
  163. package/examples/typescript/index.html +0 -10
  164. package/examples/typescript/tiles.png +0 -0
  165. package/examples/typescript/tsconfig.json +0 -17
  166. package/examples/uiSystem/game.js +0 -139
  167. package/examples/uiSystem/index.html +0 -10
  168. package/examples/uiSystem/tiles.png +0 -0
  169. package/jsconfig.json +0 -12
  170. package/plugins/desktop.ini +0 -2
  171. package/reference.md +0 -448
  172. package/test/math.test.mjs +0 -774
  173. package/test/setup.mjs +0 -22
  174. package/test/smoke.test.mjs +0 -274
  175. package/test/tween.test.mjs +0 -576
  176. package/test/util.test.mjs +0 -80
package/jsconfig.json DELETED
@@ -1,12 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- },
4
- "include": [
5
- "./src/*.js",
6
- "./plugins/*.js",
7
- "./examples/**/*.js",
8
- "./shortExamples/**/*.js",
9
- ],
10
- "exclude": [
11
- ]
12
- }
@@ -1,2 +0,0 @@
1
- [LocalizedFileNames]
2
- tweens (1).js=@tweens (1).js,0
package/reference.md DELETED
@@ -1,448 +0,0 @@
1
- # LittleJS Engine Quick Reference Sheet
2
-
3
- ## This cheat sheet contains all LittleJS essentials.
4
- - [LittleJS on GitHub](https://github.com/KilledByAPixel/LittleJS) - Official LittleJS website with more info
5
- - [LittleJS Documentation](https://killedbyapixel.github.io/LittleJS/docs) - LittleJS documentation browser
6
- - [Particle System Designer](https://killedbyapixel.github.io/LittleJS/examples/particles) - Editor for LittleJS Particle Systems
7
- - [Sound Effect Designer](https://killedbyapixel.github.io/ZzFX) - Tool for creating ZzFX sound effects
8
- - [Starter Project](https://killedbyapixel.github.io/LittleJS/examples/starter) - Simple LittleJS demo to start with
9
-
10
- ## LittleJS Setup
11
-
12
- To start LittleJS, you need to create a few functions and pass them to engineInit.
13
-
14
- ```javascript
15
- // Start up LittleJS engine with your callback functions
16
- engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
17
- ```
18
-
19
- ## LittleJS Utilities Classes and Functions
20
- - General purpose math library
21
- - Vector2 - Fast, simple, easy 2D vector class
22
- - Color - Holds a rgba color with some math functions
23
- - Timer - Tracks time automatically
24
- - RandomGenerator - Seeded random number generator
25
-
26
- ```javascript
27
-
28
- // Object Constructors
29
- vec2(x=0, y=x) // Create a 2D vector with Vector or floats
30
- rgb(r=1, g=1, b=1, a=1) // Create a color object with RGBA values
31
- hsl(h=0, s=0, l=1, a=1) // Create a color object with HSLA values
32
- tile(pos, size=(16,16), texture=0, padding=0) // Create a tile info object
33
-
34
- // Helper functions
35
- abs(value) // Get absolute value
36
- min(...values) // Get lowest of values
37
- max(...values) // Get highest of values
38
- sign(value) // Get the sign of value
39
- mod(dividend, divisor=1) // Get remainder of division
40
- clamp(value, min=0, max=1) // Clamps between values
41
- percent(value, valueA, valueB) // Get percentage between values
42
- lerp(valueA, valueB, percent) // Linearly interpolates between values
43
- percentLerp(value, percentA, percentB, lerpA, lerpB) // Lerp that remaps the percent
44
- distanceWrap(valueA, valueB, wrapSize=1) // Signed wrapped distance between values
45
- lerpWrap(valueA, valueB, percent, wrapSize=1) // Linearly interpolates with wrapping
46
- distanceAngle(angleA, angleB) // Signed wrapped distance between angles
47
- lerpAngle(angleA, angleB, percent) // Linearly interpolates with wrapping
48
- smoothStep(percent) // Applies smoothstep function
49
- nearestPowerOfTwo(value) // Returns the nearest power of two
50
- isOverlapping(pointA, sizeA, pointB, sizeB) // Checks if bounding boxes overlap
51
- isIntersecting(start, end, pos, size) // Checks if ray intersects box
52
- formatTime(t) // Formats seconds for display
53
-
54
- // Random functions
55
- rand(valueA=1, valueB=0) // Random float between values
56
- randInt(valueA, valueB=0) // Random integer between values
57
- randBool(chance=.5) // Random boolean with given chance (0 to 1)
58
- randSign() // Randomly either -1 or 1
59
- randVec2(length=1) // Random Vector2 with the passed in length
60
- randInCircle(radius=1, minRadius=0) // Random Vector2 within a circle
61
- randColor(colorA, colorB, linear) // Random color between values
62
-
63
- // 2D vector math
64
- Vector2(x=0, y=0) // Create a 2D vector
65
- Vector2.copy() // Copy this vector
66
- Vector2.add(v) // Add a vector
67
- Vector2.subtract(v) // Subtract a vector
68
- Vector2.multiply(v) // Multiply by a vector
69
- Vector2.divide(v) // Divide by a vector
70
- Vector2.scale(s) // Scale by a float
71
- Vector2.length() // Get length
72
- Vector2.lengthSquared() // Get length squared
73
- Vector2.distance(v) // Get distance to vector
74
- Vector2.distanceSquared(v) // Get distance to vector squared
75
- Vector2.normalize(length=1) // Normalize this vector to length
76
- Vector2.clampLength(length=1) // Clamp this vector to length
77
- Vector2.dot(v) // Dot product with vector
78
- Vector2.cross(v) // Cross product with vector
79
- Vector2.floor() // Floor this vector
80
- Vector2.area() // Get area covered by this vector as a rectangle
81
- Vector2.lerp(v, percent) // Interpolate between vectors
82
- Vector2.arrayCheck(arraySize) // Check if in bounds of array size
83
- Vector2.angle() // Angle of this vector, up is 0
84
- Vector2.setAngle(angle=0, length=1) // Set angle and length
85
- Vector2.rotate(angle) // Rotate by angle
86
- Vector2.setDirection(direction, length=1) // Set integer direction (0-3) and length
87
- Vector2.direction() // Get integer direction (0-3)
88
- Vector2.toString(digits=3) // Get string representation
89
-
90
- // RGBA color object
91
- Color(r=1, g=1, b=1, a=1) // Create an RGBA color
92
- Color.copy() // Copy this color
93
- Color.add(c) // Add a color
94
- Color.subtract(c) // Subtract a color
95
- Color.multiply(c) // Multiply by a color
96
- Color.divide(c) // Divide by a color
97
- Color.scale(scale, alphaScale=scale) // Scale by a float
98
- Color.clamp() // Clamp this color
99
- Color.lerp(c, percent) // Interpolate between colors
100
- Color.setHSLA(h=0, s=0, l=1, a=1) // Set the color from HSLA values
101
- Color.HSLA() // Get the color in HSLA format
102
- Color.mutate(amount=.05, alphaAmount=0) // Randomly diverge from this color
103
- Color.setHex(hex) // Set this color from a hex code
104
- Color.rgbaInt() // Get this color as 32 bit RGBA value
105
- Color.toString(useAlpha=true) // Get hex color code as a string
106
-
107
- // Seeded random number generator
108
- RandomGenerator(seed) // Create a random number generator
109
- RandomGenerator.float(valueA=1, valueB=0) // Random float between values
110
- RandomGenerator.int(valueA, valueB=0) // Random integer between values
111
- RandomGenerator.sign() // Randomly either -1 or 1
112
-
113
- // Time tracking system
114
- Timer(timeLeft) // Create a timer object
115
- Timer.set(timeLeft=0) // Set the timer with seconds passed in
116
- Timer.unset() // Unset the timer
117
- Timer.isSet() // Returns true if set
118
- Timer.active() // Returns true if set and has not elapsed
119
- Timer.elapsed() // Returns true if set and elapsed
120
- Timer.get() // Get how long since elapsed, 0 if not set
121
- Timer.getPercent() // Get percent elapsed, 0 if not set
122
- Timer.toString() // Get this timer expressed as a string
123
- Timer.valueOf() // Get how long since elapsed, 0 if not set
124
- ```
125
-
126
- ## LittleJS Drawing System
127
- - Hybrid system with both Canvas2D and WebGL available
128
- - Super fast tile sheet rendering with WebGL
129
- - Can apply rotation, mirror, color and additive color
130
- - Text and font rendering system with built in engine font
131
-
132
- ```javascript
133
- // Drawing functions
134
- drawTile(pos, size, tileInfo, color=WHITE, angle=0, mirror, additiveColor)
135
- drawRect(pos, size, color=WHITE, angle=0)
136
- drawRectGradient(pos, size, colorTop=WHITE, colorBottom=BLACK, angle=0)
137
- drawTextureWrapped(pos, size, wrapCount, texture=0, color=WHITE, angle=0, additiveColor)
138
- drawLine(posA, posB, width=.1, color=WHITE, pos=(0,0), angle=0)
139
- drawLineList(points, width=.1, color, wrap=false, pos=(0,0), angle=0)
140
- drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos, angle=0)
141
- drawRegularPoly(pos, size=(1,1), sides=3, color=WHITE, lineWidth=0, lineColor=BLACK, angle=0)
142
- drawEllipse(pos, size=(1,1), color=WHITE, angle=0, lineWidth=0, lineColor=BLACK)
143
- drawCircle(pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK)
144
- drawCanvas2D(pos, size, angle=0, mirror, drawFunction, screenSpace, context)
145
-
146
- // Text functions
147
- drawText(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK)
148
- drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK)
149
-
150
- // Utility drawing functions
151
- setBlendMode(additive)
152
- isFullscreen()
153
- toggleFullscreen()
154
-
155
- // Tile Info Object
156
- TileInfo(pos, size, textureIndex=0, padding=0) // Create a tile info object
157
- TileInfo.pos // Top left corner of tile in pixels
158
- TileInfo.size // Size of tile in pixels
159
- TileInfo.textureIndex // Texture index to use
160
- TileInfo.padding // How many pixels padding around tiles
161
- TileInfo.offset(offset) // Offset this tile by a certain amount in pixels
162
- TileInfo.frame(frame) // Offset this tile by a number of animation frames
163
- TileInfo.textureInfo // The texture info for this tile
164
-
165
- // Texture Info Object
166
- TextureInfo(image) // Created automatically for each image
167
- TextureInfo.image // Image source
168
- TextureInfo.size // Size of the image
169
- TextureInfo.glTexture // WebGL texture
170
-
171
- // Font Image Object draws text using characters in an image
172
- FontImage(image, tileSize=(8,8), paddingSize=(0,1)) // Create an image font
173
- FontImage.drawText(text, pos, scale, center) // Draw text in world space
174
- FontImage.drawTextScreen(text, pos, scale, center) // Draw text in screen space
175
-
176
- // Camera settings
177
- cameraPos = (0,0) // Position of camera in world space
178
- cameraScale = 32 // Scale of camera in world space
179
- screenToWorld(screenPos) // Convert from screen to world space coordinates
180
- worldToScreen(worldPos) // Convert from world to screen space coordinates
181
- getCameraSize() // Get the camera's visible area in world space
182
-
183
- // Display settings
184
- canvasMaxSize = (1920, 1200) // The max size of the canvas
185
- canvasFixedSize = (0, 0) // Fixed size of the canvas
186
- canvasClearColor = BLACK // Color used to clear the canvas at start of frame
187
- fontDefault = 'arial' // Default font used for text rendering
188
- canvasPixelated = true // Use nearest neighbor canvas scaling for more pixelated look
189
- tilesPixelated = true // Disable filtering for crisper pixel art
190
- showSplashScreen = false // Show the LittleJS splash screen on startup
191
- glEnable = true // Enable fast WebGL rendering
192
-
193
- // Tile sheet settings
194
- tileDefaultSize = (16,16) // Default size of tiles in pixels
195
- tileDefaultBleed = .3 // How much smaller to draw tiles to prevent bleeding
196
- ```
197
-
198
- ## LittleJS Audio System
199
- - Caches sounds and music for fast playback with frame-spread loading
200
- - Individual sound instance control with pause/resume capabilities
201
- - Can attenuate and apply stereo panning to sounds
202
- - Ability to play mp3, ogg, and wave files with loading progress tracking
203
- - [ZzFX Sound Effect Generator](https://killedbyapixel.github.io/ZzFX)
204
- - [ZzFXM Music System](https://keithclark.github.io/ZzFXM)
205
-
206
- ```javascript
207
- // Sound Object
208
- Sound(zzfxSound, randomness, range, taper) // Create a zzfx sound
209
- Sound(filename, randomness, range, taper) // Load a wave, mp3, or ogg
210
- Sound.play(pos, volume=1, pitch=1, randomness=1, loop) // Play a sound, returns SoundInstance
211
- Sound.playMusic(volume=1, loop=true) // Play as music with looping
212
- Sound.playNote(semitoneOffset, pos, volume=1) // Play as note with a semitone offset
213
- Sound.getDuration() // Get length of sound in seconds
214
- Sound.isLoaded() // Check if sound is currently loading
215
- Sound.loadedPercent // Get loading progress (0 to 1)
216
-
217
- // SoundInstance
218
- SoundInstance.start() // Start playing the sound
219
- SoundInstance.setVolume(volume) // Change volume during playback
220
- SoundInstance.stop(fadeTime=0) // Stop with optional fade out
221
- SoundInstance.pause() // Pause the sound
222
- SoundInstance.unpause() // Resume paused sound
223
- SoundInstance.isPlaying() // Check if currently playing
224
- SoundInstance.isPaused() // Check if paused
225
- SoundInstance.isStopped() // Check if stopped
226
- SoundInstance.getCurrentTime() // Get current playback position
227
- SoundInstance.getDuration() // Get total duration
228
- SoundInstance.getSource() // Get AudioBufferSourceNode
229
-
230
- // ZzFXM - Tiny music playing system
231
- Music(..zzfxMusic) // Create a zzfx music object
232
- Music.playMusic(volume=1, loop=true) // Play the music
233
-
234
- // Audio functions
235
- speak(text, language='', volume=1, rate=1, pitch=1) // Speak text line
236
- speakStop() // Stop all queued speech
237
- getNoteFrequency(semitoneOffset, rootFrequency=220) // Get frequency for musical notes
238
-
239
- // Audio settings
240
- soundEnable = true // Should sound be enabled?
241
- soundVolume = .5 // Volume scale to apply to all sound
242
- soundDefaultRange = 40 // Default range where sound no longer plays
243
- soundDefaultTaper = .7 // Default range percent to taper off sound (0-1)
244
- ```
245
-
246
- ## LittleJS Input System
247
- - Tracks keyboard down, pressed, and released
248
- - Tracks mouse buttons, position, and wheel
249
- - Tracks multiple analog gamepads
250
- - Routes touch input to mouse
251
- - Virtual gamepad for touch devices
252
-
253
- ```javascript
254
- // Keyboard
255
- keyIsDown(key) // Is key down?
256
- keyWasPressed(key) // Was key pressed this frame?
257
- keyWasReleased(key) // Was key released this frame?
258
- keyDirection(up, down, left, right) // Get input vector from arrow keys or wasd
259
-
260
- // Mouse / Touch
261
- mousePos // World space mouse position
262
- mousePosScreen // Screen space mouse position
263
- mouseDelta // World space mouse movement delta
264
- mouseDeltaScreen // Screen space mouse movement delta
265
- mouseWheel // Delta mouse wheel this frame
266
- mouseIsDown(button) // Is mouse button down?
267
- mouseWasPressed(button) // Was mouse button pressed this frame?
268
- mouseWasReleased(button) // Was mouse button released this frame?
269
-
270
- // Gamepad
271
- isUsingGamepad // Is user currently using gamepad?
272
- gamepadIsDown(button, gamepad=0) // Is gamepad button down?
273
- gamepadWasPressed(button, gamepad=0) // Was gamepad button pressed this frame?
274
- gamepadWasReleased(button, gamepad=0) // Was gamepad button released this frame?
275
- gamepadStick(stickIndex, gamepad=0) // Get gamepad analog stick value
276
-
277
- // Touch Gamepad
278
- touchGamepadEnabled // Is on screen touch gamepad enabled?
279
- touchGamepadAnalog // Is touch gamepad analog or 8 way dpad?
280
- touchGamepadSize // Size of touch gamepad
281
- touchGamepadAlpha // Alpha of touch gamepad
282
-
283
- // Vibration
284
- vibrate(pattern=100) // Pulse the vibration hardware if it exists
285
- vibrateStop() // Stop all vibration
286
-
287
- // Input settings
288
- gamepadsEnable = true // Should gamepads be allowed?
289
- gamepadDirectionEmulateStick = true // Should dpad be routed to the left analog stick?
290
- inputWASDEmulateDirection = true // Should WASD keys be routed to the direction keys?
291
- vibrateEnable = true // Allow vibration hardware if it exists?
292
- touchGamepadEnable = false // Should touch gamepad appear on mobile devices?
293
- touchGamepadAnalog = true // Should touch gamepad be analog or 8 way dpad?
294
- touchGamepadSize = 99 // Size of virtual gamepad for touch devices
295
- touchGamepadAlpha = .3 // Transparency of touch gamepad overlay
296
- ```
297
-
298
- ## LittleJS Object System
299
- - Top level object class used by the engine
300
- - Automatically adds self to object list
301
- - Will be updated and rendered each frame
302
- - Renders as a sprite from a tile sheet by default
303
- - Can have color and addtive color applied
304
- - 2D Physics and collision system
305
- - Sorted by renderOrder before drawing
306
- - Objects can have children in local space
307
- - Parents are updated before children
308
- - Call destroy() to get rid of objects
309
-
310
- ```javascript
311
- // Engine Object
312
- EngineObject(pos, size=(1,1), tileInfo, angle=0, color, renderOrder=0)
313
- EngineObject.update() // Update object, called automatically
314
- EngineObject.render() // Render object, called automatically
315
- EngineObject.destroy() // Destroy this object and children
316
- EngineObject.collideWithTile(tileData, pos) // Tile collision resolve check
317
- EngineObject.collideWithObject(object) // Object collision resolve check
318
- EngineObject.getAliveTime() // How long since object was created
319
- EngineObject.applyAcceleration(acceleration) // Apply acceleration
320
- EngineObject.applyForce(force) // Apply force
321
- EngineObject.getMirrorSign() // Get mirror direction (1 or -1)
322
- EngineObject.addChild(child, localPos, localAngle) // Attach a child
323
- EngineObject.removeChild(child) // Remove a child
324
- EngineObject.setCollision(solids, isSolid, tiles) // Set collision
325
-
326
- // Engine Object Members
327
- EngineObject.pos // World space position
328
- EngineObject.size // World space width and height
329
- EngineObject.drawSize // Size of object used for drawing if set
330
- EngineObject.tileInfo // Tile info to render object
331
- EngineObject.angle // Rotation angle for rendering
332
- EngineObject.color // Color to apply when rendered
333
- EngineObject.additiveColor // Additive color to apply when rendered
334
- EngineObject.mirror // Should it flip along y axis when rendered
335
- EngineObject.mass // Weight of object, static if 0
336
- EngineObject.damping // How much to slow velocity each frame (0-1)
337
- EngineObject.angleDamping // How much to slow rotation each frame (0-1)
338
- EngineObject.restitution // How bouncy is it when colliding (0-1)
339
- EngineObject.friction // How much friction when sliding (0-1)
340
- EngineObject.gravityScale // How much to scale gravity by
341
- EngineObject.renderOrder // Objects are sorted by render order
342
- EngineObject.velocity // Velocity of the object
343
- EngineObject.angleVelocity // Angular velocity of the object
344
-
345
- // Engine Object settings
346
- enablePhysicsSolver = true // Enable collisions between objects?
347
- objectDefaultMass = 1 // Default object mass for collisions
348
- objectDefaultDamping = 1 // How much to slow velocity by each frame (0-1)
349
- objectDefaultAngleDamping = 1 // How much to slow angular velocity each frame (0-1)
350
- objectDefaultRestitution = 0 // How much to bounce when a collision occurs (0-1)
351
- objectDefaultFriction = .8 // How much to slow when touching (0-1)
352
- objectMaxSpeed = 1 // Clamp max speed to avoid fast objects missing collisions
353
- gravity = (0,0) // How much gravity to apply to objects
354
-
355
- // Engine Object functions
356
- engineObjectsCollect(pos, size, objects=engineObjects)
357
- engineObjectsCallback(pos, size, callbackFunction, objects=engineObjects)
358
- engineObjectsRaycast(start, end, objects=engineObjects)
359
- engineObjectsDestroy()
360
- ```
361
-
362
- ## LittleJS Tile Layer System
363
- - Caches arrays of tiles to off screen canvas for fast rendering
364
- - Unlimited numbers of layers, allocates canvases as needed
365
- - Interfaces with EngineObject for collision
366
- - Collision layer is separate from visible layers
367
- - It is recommended to have a visible layer that matches the collision
368
- - Tile layers can be drawn to using their context with Canvas2d
369
- - Drawn directly to the main canvas without using WebGL
370
-
371
- ```javascript
372
-
373
- // Canvas Layer
374
- CanvasLayer(pos, size) // Create a canvas layer object
375
- CanvasLayer.canvas // The canvas used by this layer
376
- CanvasLayer.context // The 2D context of the canvas
377
- CanvasLayer.getImageData() // Get image data from canvas
378
- CanvasLayer.updateWebGL() // Creates or updates WebGL texture
379
-
380
- // LittleJS Layer System
381
- TileLayer(pos, size, tileInfo, scale) // Create a tile layer object
382
- TileLayer.setData(layerPos, data, redraw) // Set data at position
383
- TileLayer.clearData(layerPos, redraw) // Clear data at position
384
- TileLayer.getData(layerPos) // Get data at position
385
- TileLayer.redraw() // Draw to an offscreen canvas
386
- TileLayer.drawTileData(layerPos, clear=true) // Draw the tile
387
- TileLayer.drawRect(pos, size, color, angle) // Draw a rectangle to 2D canvas
388
- TileLayer.drawTile(pos, size=(1,1), tileInfo, color, angle, mirror) // Draw tile
389
- TileLayer.drawCanvas2D(pos, size, angle, mirror, drawFunction) // Draw to 2D canvas
390
-
391
- // Tile Layer Data Object
392
- TileLayerData(tile, direction=0, mirror=false, color=WHITE) // Create tile data object
393
- TileLayerData.clear() // Clear this tile data
394
-
395
- // Tile Collision Layer
396
- TileCollisionLayer(pos, size, tileInfo=tile()) // Create a tile collision layer object
397
- TileCollisionLayer.setCollisionData(pos, data=1) // Set tile collision data at pos
398
- tileCollisionGetData(pos) // Get tile collision data at pos
399
- tileCollisionTest(pos, size=(0,0), object) // Check if collision should occur
400
- tileCollisionRaycast(posStart, posEnd, object) // Return the center of tile if hit
401
- tileLayersLoad(tileMapData, tileInfo) // Load tile layers from exported data
402
-
403
- ```
404
-
405
- ## LittleJS Particle System
406
- - Simple kinematic particle system with many parameters
407
- - [Particle Effect Designer](https://killedbyapixel.github.io/LittleJS/examples/particles) - Editor for creating LittleJS Particle Systems
408
-
409
- ```javascript
410
- // Particle Emitter Object
411
- ParticleEmitter(pos, angle, ...settings) // Create a particle system
412
- ParticleEmitter.emitParticle() // Spawn one particle
413
-
414
- // Particle Settings
415
- particleEmitRateScale = 1 // Scales particles emit rate
416
- ```
417
-
418
- ## LittleJS Debugging System
419
- - Press Escape key to toggle debug overlay
420
- - Number keys toggle debug functions
421
- - +/- keys apply time scale to update
422
- - Debug primitive rendering system
423
- - Debug functions are only active in debug builds
424
-
425
- ```javascript
426
- ASSERT(assert, output) // Asserts if the expression is false
427
- debugRect(pos, size, color='#fff', time=0, angle=0, fill) // Draw debug rectangle
428
- debugCircle(pos, size, color='#fff', time=0, fill) // Draw debug circle
429
- debugPoint(pos, color, time, angle) // Draw debug point
430
- debugLine(posA, posB, color, width=.1, time) // Draw debug line
431
- debugText(text, pos, size=1, color='#fff', time=0, angle=0) // Draw debug text
432
- debugAABB(pA, sA, pB, sB, color) // Draw a debug axis aligned box
433
- debugClear() // Clear all debug primitives
434
- saveCanvas(canvas, filename) // Save canvas to a file
435
- saveText(text, filename) // Save text to a file
436
- saveDataURL(dataURL, filename) // Save url to a file
437
-
438
- // Debug settings
439
- debug // Is debug enabled?
440
- debugPointSize = .5 // Size to render debug points by default
441
- debugKey = 'Escape' // Key code used to toggle debug mode
442
- debugOverlay // Is the debug overlay is active?
443
- debugWatermark // Should watermark with FPS appear in debug mode?
444
- ```
445
-
446
- [LittleJS Engine](https://github.com/KilledByAPixel/LittleJS) Copyright 2021 Frank Force
447
-
448
- ![LittleJS Logo](examples/favicon.png)