littlejsengine 1.13.4 → 1.14.2
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 +2 -1
- package/copyToGithub.bat +28 -0
- package/dist/littlejs.d.ts +346 -240
- package/dist/littlejs.esm.js +1370 -723
- package/dist/littlejs.esm.min.js +1 -1
- package/dist/littlejs.js +1350 -709
- package/dist/littlejs.min.js +1 -1
- package/dist/littlejs.release.js +1333 -692
- package/examples/box2d/game.js +1 -1
- package/examples/box2d/gameObjects.js +1 -1
- package/examples/breakout/game.js +30 -25
- package/examples/electron/index.html +2 -2
- package/examples/index.html +207 -96
- package/examples/platformer/gameEffects.js +19 -18
- package/examples/platformer/gameLevel.js +6 -1
- package/examples/shorts/base.html +1 -1
- package/examples/shorts/flappyGame.js +2 -1
- package/examples/shorts/helloWorld.js +1 -1
- package/examples/shorts/music.js +106 -0
- package/examples/shorts/parallax.js +71 -0
- package/examples/shorts/piano.js +7 -8
- package/examples/shorts/postProcess.js +25 -8
- package/examples/shorts/shapes.js +1 -9
- package/examples/shorts/song.mp3 +0 -0
- package/examples/shorts/uiSystem.js +15 -8
- package/examples/starter/index.html +2 -2
- package/examples/stress/index.html +8 -3
- package/examples/style.css +14 -4
- package/examples/uiSystem/game.js +11 -11
- package/package.json +1 -1
- package/plugins/box2d.js +10 -8
- package/plugins/drawUtilities.js +5 -5
- package/plugins/newgrounds.js +6 -6
- package/plugins/pluginExport.js +1 -1
- package/plugins/uiSystem.js +103 -79
- package/plugins/zzfxm.js +10 -10
- package/reference.md +90 -54
- package/src/engine.js +22 -22
- package/src/engineAudio.js +284 -109
- package/src/engineBuild.js +9 -9
- package/src/engineDebug.js +26 -26
- package/src/engineDraw.js +148 -97
- package/src/engineExport.js +22 -16
- package/src/engineInput.js +57 -67
- package/src/engineMedals.js +25 -25
- package/src/engineObject.js +25 -22
- package/src/engineParticles.js +59 -59
- package/src/engineRelease.js +1 -1
- package/src/engineSettings.js +20 -13
- package/src/engineTileLayer.js +34 -34
- package/src/engineUtilities.js +62 -55
- package/src/engineWebGL.js +447 -65
- /package/examples/shorts/{playSound.js → sound.js} +0 -0
package/src/engineParticles.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/**
|
|
2
2
|
* LittleJS Particle System
|
|
3
3
|
*/
|
|
4
4
|
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
* rgb(1,1,1,1), rgb(0,0,0,1), // colorStartA, colorStartB
|
|
18
18
|
* rgb(1,1,1,0), rgb(0,0,0,0), // colorEndA, colorEndB
|
|
19
19
|
* 2, .2, .2, .1, .05, // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
|
|
20
|
-
* .99, 1, 1, PI, .05, // damping, angleDamping, gravityScale, particleCone, fadeRate,
|
|
20
|
+
* .99, 1, 1, PI, .05, // damping, angleDamping, gravityScale, particleCone, fadeRate,
|
|
21
21
|
* .5, 1 // randomness, collide, additive, randomColorLinear, renderOrder
|
|
22
22
|
* );
|
|
23
23
|
*/
|
|
@@ -25,35 +25,35 @@ class ParticleEmitter extends EngineObject
|
|
|
25
25
|
{
|
|
26
26
|
/** Create a particle system with the given settings
|
|
27
27
|
* @param {Vector2} position - World space position of the emitter
|
|
28
|
-
* @param {
|
|
29
|
-
* @param {
|
|
30
|
-
* @param {
|
|
31
|
-
* @param {
|
|
32
|
-
* @param {
|
|
28
|
+
* @param {number} [angle] - Angle to emit the particles
|
|
29
|
+
* @param {number|Vector2} [emitSize] - World space size of the emitter (float for circle diameter, vec2 for rect)
|
|
30
|
+
* @param {number} [emitTime] - How long to stay alive (0 is forever)
|
|
31
|
+
* @param {number} [emitRate] - How many particles per second to spawn, does not emit if 0
|
|
32
|
+
* @param {number} [emitConeAngle=PI] - Local angle to apply velocity to particles from emitter
|
|
33
33
|
* @param {TileInfo} [tileInfo] - Tile info to render particles (undefined is untextured)
|
|
34
34
|
* @param {Color} [colorStartA=(1,1,1,1)] - Color at start of life 1, randomized between start colors
|
|
35
35
|
* @param {Color} [colorStartB=(1,1,1,1)] - Color at start of life 2, randomized between start colors
|
|
36
36
|
* @param {Color} [colorEndA=(1,1,1,0)] - Color at end of life 1, randomized between end colors
|
|
37
37
|
* @param {Color} [colorEndB=(1,1,1,0)] - Color at end of life 2, randomized between end colors
|
|
38
|
-
* @param {
|
|
39
|
-
* @param {
|
|
40
|
-
* @param {
|
|
41
|
-
* @param {
|
|
42
|
-
* @param {
|
|
43
|
-
* @param {
|
|
44
|
-
* @param {
|
|
45
|
-
* @param {
|
|
46
|
-
* @param {
|
|
47
|
-
* @param {
|
|
48
|
-
* @param {
|
|
38
|
+
* @param {number} [particleTime] - How long particles live
|
|
39
|
+
* @param {number} [sizeStart] - How big are particles at start
|
|
40
|
+
* @param {number} [sizeEnd] - How big are particles at end
|
|
41
|
+
* @param {number} [speed] - How fast are particles when spawned
|
|
42
|
+
* @param {number} [angleSpeed] - How fast are particles rotating
|
|
43
|
+
* @param {number} [damping] - How much to dampen particle speed
|
|
44
|
+
* @param {number} [angleDamping] - How much to dampen particle angular speed
|
|
45
|
+
* @param {number} [gravityScale] - How much gravity effect particles
|
|
46
|
+
* @param {number} [particleConeAngle] - Cone for start particle angle
|
|
47
|
+
* @param {number} [fadeRate] - How quick to fade particles at start/end in percent of life
|
|
48
|
+
* @param {number} [randomness] - Apply extra randomness percent
|
|
49
49
|
* @param {boolean} [collideTiles] - Do particles collide against tiles
|
|
50
50
|
* @param {boolean} [additive] - Should particles use additive blend
|
|
51
51
|
* @param {boolean} [randomColorLinear] - Should color be randomized linearly or across each component
|
|
52
|
-
* @param {
|
|
52
|
+
* @param {number} [renderOrder] - Render order for particles (additive is above other stuff by default)
|
|
53
53
|
* @param {boolean} [localSpace] - Should it be in local space of emitter (world space is default)
|
|
54
54
|
*/
|
|
55
55
|
constructor
|
|
56
|
-
(
|
|
56
|
+
(
|
|
57
57
|
position,
|
|
58
58
|
angle,
|
|
59
59
|
emitSize = 0,
|
|
@@ -75,7 +75,7 @@ class ParticleEmitter extends EngineObject
|
|
|
75
75
|
gravityScale = 0,
|
|
76
76
|
particleConeAngle = PI,
|
|
77
77
|
fadeRate = .1,
|
|
78
|
-
randomness = .2,
|
|
78
|
+
randomness = .2,
|
|
79
79
|
collideTiles = false,
|
|
80
80
|
additive = false,
|
|
81
81
|
randomColorLinear = true,
|
|
@@ -86,13 +86,13 @@ class ParticleEmitter extends EngineObject
|
|
|
86
86
|
super(position, vec2(), tileInfo, angle, undefined, renderOrder);
|
|
87
87
|
|
|
88
88
|
// emitter settings
|
|
89
|
-
/** @property {
|
|
89
|
+
/** @property {number|Vector2} - World space size of the emitter (float for circle diameter, vec2 for rect) */
|
|
90
90
|
this.emitSize = emitSize
|
|
91
|
-
/** @property {
|
|
91
|
+
/** @property {number} - How long to stay alive (0 is forever) */
|
|
92
92
|
this.emitTime = emitTime;
|
|
93
|
-
/** @property {
|
|
93
|
+
/** @property {number} - How many particles per second to spawn, does not emit if 0 */
|
|
94
94
|
this.emitRate = emitRate;
|
|
95
|
-
/** @property {
|
|
95
|
+
/** @property {number} - Local angle to apply velocity to particles from emitter */
|
|
96
96
|
this.emitConeAngle = emitConeAngle;
|
|
97
97
|
|
|
98
98
|
// color settings
|
|
@@ -108,27 +108,27 @@ class ParticleEmitter extends EngineObject
|
|
|
108
108
|
this.randomColorLinear = randomColorLinear;
|
|
109
109
|
|
|
110
110
|
// particle settings
|
|
111
|
-
/** @property {
|
|
111
|
+
/** @property {number} - How long particles live */
|
|
112
112
|
this.particleTime = particleTime;
|
|
113
|
-
/** @property {
|
|
113
|
+
/** @property {number} - How big are particles at start */
|
|
114
114
|
this.sizeStart = sizeStart;
|
|
115
|
-
/** @property {
|
|
115
|
+
/** @property {number} - How big are particles at end */
|
|
116
116
|
this.sizeEnd = sizeEnd;
|
|
117
|
-
/** @property {
|
|
117
|
+
/** @property {number} - How fast are particles when spawned */
|
|
118
118
|
this.speed = speed;
|
|
119
|
-
/** @property {
|
|
119
|
+
/** @property {number} - How fast are particles rotating */
|
|
120
120
|
this.angleSpeed = angleSpeed;
|
|
121
|
-
/** @property {
|
|
121
|
+
/** @property {number} - How much to dampen particle speed */
|
|
122
122
|
this.damping = damping;
|
|
123
|
-
/** @property {
|
|
123
|
+
/** @property {number} - How much to dampen particle angular speed */
|
|
124
124
|
this.angleDamping = angleDamping;
|
|
125
|
-
/** @property {
|
|
125
|
+
/** @property {number} - How much gravity affects particles */
|
|
126
126
|
this.gravityScale = gravityScale;
|
|
127
|
-
/** @property {
|
|
127
|
+
/** @property {number} - Cone for start particle angle */
|
|
128
128
|
this.particleConeAngle = particleConeAngle;
|
|
129
|
-
/** @property {
|
|
129
|
+
/** @property {number} - How quick to fade in particles at start/end in percent of life */
|
|
130
130
|
this.fadeRate = fadeRate;
|
|
131
|
-
/** @property {
|
|
131
|
+
/** @property {number} - Apply extra randomness percent */
|
|
132
132
|
this.randomness = randomness;
|
|
133
133
|
/** @property {boolean} - Do particles collide against tiles */
|
|
134
134
|
this.collideTiles = collideTiles;
|
|
@@ -136,16 +136,16 @@ class ParticleEmitter extends EngineObject
|
|
|
136
136
|
this.additive = additive;
|
|
137
137
|
/** @property {boolean} - Should it be in local space of emitter */
|
|
138
138
|
this.localSpace = localSpace;
|
|
139
|
-
/** @property {
|
|
139
|
+
/** @property {number} - If non zero the particle is drawn as a trail, stretched in the direction of velocity */
|
|
140
140
|
this.trailScale = 0;
|
|
141
141
|
/** @property {Function} - Callback when particle is destroyed */
|
|
142
142
|
this.particleDestroyCallback = undefined;
|
|
143
143
|
/** @property {Function} - Callback when particle is created */
|
|
144
144
|
this.particleCreateCallback = undefined;
|
|
145
|
-
/** @property {
|
|
145
|
+
/** @property {number} - Track particle emit time */
|
|
146
146
|
this.emitTimeBuffer = 0;
|
|
147
147
|
}
|
|
148
|
-
|
|
148
|
+
|
|
149
149
|
/** Update the emitter to spawn particles, called automatically by engine once each frame */
|
|
150
150
|
update()
|
|
151
151
|
{
|
|
@@ -169,7 +169,7 @@ class ParticleEmitter extends EngineObject
|
|
|
169
169
|
if (debugParticles)
|
|
170
170
|
{
|
|
171
171
|
// show emitter bounds
|
|
172
|
-
const emitSize = typeof this.emitSize
|
|
172
|
+
const emitSize = typeof this.emitSize === 'number' ? vec2(this.emitSize) : this.emitSize;
|
|
173
173
|
debugRect(this.pos, emitSize, '#0f0', 0, this.angle);
|
|
174
174
|
}
|
|
175
175
|
}
|
|
@@ -179,7 +179,7 @@ class ParticleEmitter extends EngineObject
|
|
|
179
179
|
emitParticle()
|
|
180
180
|
{
|
|
181
181
|
// spawn a particle
|
|
182
|
-
let pos = typeof this.emitSize
|
|
182
|
+
let pos = typeof this.emitSize === 'number' ? // check if number was used
|
|
183
183
|
randInCircle(this.emitSize/2) // circle emitter
|
|
184
184
|
: vec2(rand(-.5,.5), rand(-.5,.5)) // box emitter
|
|
185
185
|
.multiply(this.emitSize).rotate(this.angle)
|
|
@@ -204,7 +204,7 @@ class ParticleEmitter extends EngineObject
|
|
|
204
204
|
const colorStart = randColor(this.colorStartA, this.colorStartB, this.randomColorLinear);
|
|
205
205
|
const colorEnd = randColor(this.colorEndA, this.colorEndB, this.randomColorLinear);
|
|
206
206
|
const velocityAngle = this.localSpace ? coneAngle : this.angle + coneAngle;
|
|
207
|
-
|
|
207
|
+
|
|
208
208
|
// build particle
|
|
209
209
|
const particle = new Particle(pos, this.tileInfo, angle, colorStart, colorEnd, particleTime, sizeStart, sizeEnd, this.fadeRate, this.additive, this.trailScale, this.localSpace && this, this.particleDestroyCallback);
|
|
210
210
|
particle.velocity = vec2().setAngle(velocityAngle, speed);
|
|
@@ -249,38 +249,38 @@ class Particle extends EngineObject
|
|
|
249
249
|
* Typically this is created automatically by a ParticleEmitter
|
|
250
250
|
* @param {Vector2} position - World space position of the particle
|
|
251
251
|
* @param {TileInfo} tileInfo - Tile info to render particles
|
|
252
|
-
* @param {
|
|
252
|
+
* @param {number} angle - Angle to rotate the particle
|
|
253
253
|
* @param {Color} colorStart - Color at start of life
|
|
254
254
|
* @param {Color} colorEnd - Color at end of life
|
|
255
|
-
* @param {
|
|
256
|
-
* @param {
|
|
257
|
-
* @param {
|
|
258
|
-
* @param {
|
|
255
|
+
* @param {number} lifeTime - How long to live for
|
|
256
|
+
* @param {number} sizeStart - Size at start of life
|
|
257
|
+
* @param {number} sizeEnd - Size at end of life
|
|
258
|
+
* @param {number} fadeRate - How quick to fade in/out
|
|
259
259
|
* @param {boolean} additive - Does it use additive blend mode
|
|
260
|
-
* @param {
|
|
260
|
+
* @param {number} trailScale - If a trail, how long to make it
|
|
261
261
|
* @param {ParticleEmitter} [localSpaceEmitter] - Parent emitter if local space
|
|
262
262
|
* @param {Function} [destroyCallback] - Callback when particle dies
|
|
263
263
|
*/
|
|
264
264
|
constructor(position, tileInfo, angle, colorStart, colorEnd, lifeTime, sizeStart, sizeEnd, fadeRate, additive, trailScale, localSpaceEmitter, destroyCallback
|
|
265
265
|
)
|
|
266
|
-
{
|
|
267
|
-
super(position, vec2(), tileInfo, angle);
|
|
268
|
-
|
|
266
|
+
{
|
|
267
|
+
super(position, vec2(), tileInfo, angle);
|
|
268
|
+
|
|
269
269
|
/** @property {Color} - Color at start of life */
|
|
270
270
|
this.colorStart = colorStart;
|
|
271
271
|
/** @property {Color} - Calculated change in color */
|
|
272
272
|
this.colorEndDelta = colorEnd.subtract(colorStart);
|
|
273
|
-
/** @property {
|
|
273
|
+
/** @property {number} - How long to live for */
|
|
274
274
|
this.lifeTime = lifeTime;
|
|
275
|
-
/** @property {
|
|
275
|
+
/** @property {number} - Size at start of life */
|
|
276
276
|
this.sizeStart = sizeStart;
|
|
277
|
-
/** @property {
|
|
277
|
+
/** @property {number} - Calculated change in size */
|
|
278
278
|
this.sizeEndDelta = sizeEnd - sizeStart;
|
|
279
|
-
/** @property {
|
|
279
|
+
/** @property {number} - How quick to fade in/out */
|
|
280
280
|
this.fadeRate = fadeRate;
|
|
281
281
|
/** @property {boolean} - Is it additive */
|
|
282
282
|
this.additive = additive;
|
|
283
|
-
/** @property {
|
|
283
|
+
/** @property {number} - If a trail, how long to make it */
|
|
284
284
|
this.trailScale = trailScale;
|
|
285
285
|
/** @property {ParticleEmitter} - Parent emitter if local space */
|
|
286
286
|
this.localSpaceEmitter = localSpaceEmitter;
|
|
@@ -320,7 +320,7 @@ class Particle extends EngineObject
|
|
|
320
320
|
this.colorStart.r + p * this.colorEndDelta.r,
|
|
321
321
|
this.colorStart.g + p * this.colorEndDelta.g,
|
|
322
322
|
this.colorStart.b + p * this.colorEndDelta.b,
|
|
323
|
-
(this.colorStart.a + p * this.colorEndDelta.a) *
|
|
323
|
+
(this.colorStart.a + p * this.colorEndDelta.a) *
|
|
324
324
|
(p < fadeRate ? p/fadeRate : p > 1-fadeRate ? (1-p)/fadeRate : 1)); // fade alpha
|
|
325
325
|
|
|
326
326
|
// draw the particle
|
|
@@ -330,7 +330,7 @@ class Particle extends EngineObject
|
|
|
330
330
|
if (this.localSpaceEmitter)
|
|
331
331
|
{
|
|
332
332
|
// in local space of emitter
|
|
333
|
-
pos = this.localSpaceEmitter.pos.add(pos.rotate(-this.localSpaceEmitter.angle));
|
|
333
|
+
pos = this.localSpaceEmitter.pos.add(pos.rotate(-this.localSpaceEmitter.angle));
|
|
334
334
|
angle += this.localSpaceEmitter.angle;
|
|
335
335
|
}
|
|
336
336
|
if (this.trailScale)
|
|
@@ -354,7 +354,7 @@ class Particle extends EngineObject
|
|
|
354
354
|
this.additive && setBlendMode();
|
|
355
355
|
debugParticles && debugRect(pos, size, '#f005', 0, angle);
|
|
356
356
|
|
|
357
|
-
if (p
|
|
357
|
+
if (p === 1)
|
|
358
358
|
{
|
|
359
359
|
// destroy particle when it's time runs out
|
|
360
360
|
this.color = color;
|
package/src/engineRelease.js
CHANGED
package/src/engineSettings.js
CHANGED
|
@@ -31,7 +31,7 @@ let cameraScale = 32;
|
|
|
31
31
|
// Display settings
|
|
32
32
|
|
|
33
33
|
/** Enable applying color to tiles when using canvas2d
|
|
34
|
-
* - This is slower but should be the same as
|
|
34
|
+
* - This is slower but should be the same as WebGL rendering
|
|
35
35
|
* @type {boolean}
|
|
36
36
|
* @default
|
|
37
37
|
* @memberof Settings */
|
|
@@ -77,14 +77,13 @@ let tilesPixelated = true;
|
|
|
77
77
|
* @memberof Settings */
|
|
78
78
|
let fontDefault = 'arial';
|
|
79
79
|
|
|
80
|
-
/** Enable to show the LittleJS splash screen
|
|
80
|
+
/** Enable to show the LittleJS splash screen on startup
|
|
81
81
|
* @type {boolean}
|
|
82
82
|
* @default
|
|
83
83
|
* @memberof Settings */
|
|
84
84
|
let showSplashScreen = false;
|
|
85
85
|
|
|
86
86
|
/** Disables all rendering, audio, and input for servers
|
|
87
|
-
* - Must be set before startup to take effect
|
|
88
87
|
* @type {boolean}
|
|
89
88
|
* @default
|
|
90
89
|
* @memberof Settings */
|
|
@@ -93,13 +92,18 @@ let headlessMode = false;
|
|
|
93
92
|
///////////////////////////////////////////////////////////////////////////////
|
|
94
93
|
// WebGL settings
|
|
95
94
|
|
|
96
|
-
/** Enable
|
|
97
|
-
* - Must be set before startup to take effect
|
|
95
|
+
/** Enable WebGL accelerated rendering
|
|
98
96
|
* @type {boolean}
|
|
99
97
|
* @default
|
|
100
98
|
* @memberof Settings */
|
|
101
99
|
let glEnable = true;
|
|
102
100
|
|
|
101
|
+
/** How many sided poly to use when drawing circles and ellipses with WebGL
|
|
102
|
+
* @type {number}
|
|
103
|
+
* @default
|
|
104
|
+
* @memberof Settings */
|
|
105
|
+
let glCircleSides = 32;
|
|
106
|
+
|
|
103
107
|
///////////////////////////////////////////////////////////////////////////////
|
|
104
108
|
// Tile sheet settings
|
|
105
109
|
|
|
@@ -195,7 +199,6 @@ let inputWASDEmulateDirection = true;
|
|
|
195
199
|
|
|
196
200
|
/** True if touch input is enabled for mobile devices
|
|
197
201
|
* - Touch events will be routed to mouse events
|
|
198
|
-
* - Must be set before startup to take effect
|
|
199
202
|
* @type {boolean}
|
|
200
203
|
* @default
|
|
201
204
|
* @memberof Settings */
|
|
@@ -203,7 +206,6 @@ let touchInputEnable = true;
|
|
|
203
206
|
|
|
204
207
|
/** True if touch gamepad should appear on mobile devices
|
|
205
208
|
* - Supports left analog stick, 4 face buttons and start button (button 9)
|
|
206
|
-
* - Must be set before startup to take effect
|
|
207
209
|
* @type {boolean}
|
|
208
210
|
* @default
|
|
209
211
|
* @memberof Settings */
|
|
@@ -306,7 +308,7 @@ function setCameraAngle(angle) { cameraAngle = angle; }
|
|
|
306
308
|
function setCameraScale(scale) { cameraScale = scale; }
|
|
307
309
|
|
|
308
310
|
/** Set if tiles should be colorized when using canvas2d
|
|
309
|
-
* This can be slower but results should look nearly identical to
|
|
311
|
+
* This can be slower but results should look nearly identical to WebGL rendering
|
|
310
312
|
* It can be enabled/disabled at any time
|
|
311
313
|
* Optimized for performance, and will use faster method if color is white or untextured
|
|
312
314
|
* @param {boolean} colorTiles
|
|
@@ -342,8 +344,8 @@ function setCanvasPixelated(pixelated)
|
|
|
342
344
|
* @param {boolean} pixelated
|
|
343
345
|
* @memberof Settings */
|
|
344
346
|
function setOverlayCanvasPixelated(pixelated)
|
|
345
|
-
{
|
|
346
|
-
overlayCanvasPixelated = pixelated;
|
|
347
|
+
{
|
|
348
|
+
overlayCanvasPixelated = pixelated;
|
|
347
349
|
if (overlayCanvas)
|
|
348
350
|
overlayCanvas.style.imageRendering = pixelated ? 'pixelated' : '';
|
|
349
351
|
}
|
|
@@ -358,7 +360,7 @@ function setTilesPixelated(pixelated) { tilesPixelated = pixelated; }
|
|
|
358
360
|
* @memberof Settings */
|
|
359
361
|
function setFontDefault(font) { fontDefault = font; }
|
|
360
362
|
|
|
361
|
-
/** Set if the LittleJS splash screen be shown on startup
|
|
363
|
+
/** Set if the LittleJS splash screen should be shown on startup
|
|
362
364
|
* @param {boolean} show
|
|
363
365
|
* @memberof Settings */
|
|
364
366
|
function setShowSplashScreen(show) { showSplashScreen = show; }
|
|
@@ -368,16 +370,21 @@ function setShowSplashScreen(show) { showSplashScreen = show; }
|
|
|
368
370
|
* @memberof Settings */
|
|
369
371
|
function setHeadlessMode(headless) { headlessMode = headless; }
|
|
370
372
|
|
|
371
|
-
/** Set if
|
|
373
|
+
/** Set if WebGL rendering is enabled
|
|
372
374
|
* @param {boolean} enable
|
|
373
375
|
* @memberof Settings */
|
|
374
376
|
function setGLEnable(enable)
|
|
375
377
|
{
|
|
376
378
|
glEnable = enable;
|
|
377
|
-
if (glCanvas) // hide glCanvas if
|
|
379
|
+
if (glCanvas) // hide glCanvas if WebGL is disabled
|
|
378
380
|
glCanvas.style.visibility = enable ? 'visible' : 'hidden';
|
|
379
381
|
}
|
|
380
382
|
|
|
383
|
+
/** Set how many sided polygons to use when drawing circles and elipses with WebGL
|
|
384
|
+
* @param {number} sides
|
|
385
|
+
* @memberof Settings */
|
|
386
|
+
function setGLCircleSides(sides) { glCircleSides = sides; }
|
|
387
|
+
|
|
381
388
|
/** Set default size of tiles in pixels
|
|
382
389
|
* @param {Vector2} size
|
|
383
390
|
* @memberof Settings */
|
package/src/engineTileLayer.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/**
|
|
1
|
+
/**
|
|
2
2
|
* LittleJS Tile Layer System
|
|
3
3
|
* - Caches arrays of tiles to off screen canvas for fast rendering
|
|
4
4
|
* - Unlimited numbers of layers, allocates canvases as needed
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
// Tile Layer System
|
|
15
15
|
|
|
16
16
|
/** Keep track of all tile layers with collision
|
|
17
|
-
* @type {Array<TileCollisionLayer>}
|
|
17
|
+
* @type {Array<TileCollisionLayer>}
|
|
18
18
|
* @memberof TileCollision */
|
|
19
|
-
|
|
19
|
+
const tileCollisionLayers = [];
|
|
20
20
|
|
|
21
21
|
/** Get tile collision data for a given cell in the grid
|
|
22
22
|
* @param {Vector2} pos
|
|
@@ -70,7 +70,7 @@ function tileCollisionRaycast(posStart, posEnd, object, solidOnly=true)
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
///////////////////////////////////////////////////////////////////////////////
|
|
73
|
-
/**
|
|
73
|
+
/**
|
|
74
74
|
* Load tile layers from exported data
|
|
75
75
|
* @param {Object} tileMapData - Level data from exported data
|
|
76
76
|
* @param {TileInfo} [tileInfo] - Default tile info (used for size and texture)
|
|
@@ -103,13 +103,13 @@ function tileCollisionLoad(tileMapData, tileInfo=tile(), renderOrder=0, collisio
|
|
|
103
103
|
{
|
|
104
104
|
const dataLayer = tileMapData.layers[layerIndex];
|
|
105
105
|
ASSERT(dataLayer.data && dataLayer.data.length);
|
|
106
|
-
ASSERT(levelSize.area()
|
|
106
|
+
ASSERT(levelSize.area() === dataLayer.data.length);
|
|
107
107
|
|
|
108
108
|
const layerRenderOrder = renderOrder - (layerCount - 1 - layerIndex);
|
|
109
109
|
const tileLayer = new TileCollisionLayer(vec2(), levelSize, tileInfo, layerRenderOrder);
|
|
110
110
|
tileLayers[layerIndex] = tileLayer;
|
|
111
111
|
|
|
112
|
-
for (let x=levelSize.x; x--;)
|
|
112
|
+
for (let x=levelSize.x; x--;)
|
|
113
113
|
for (let y=levelSize.y; y--;)
|
|
114
114
|
{
|
|
115
115
|
const pos = vec2(x, levelSize.y-1-y);
|
|
@@ -168,7 +168,7 @@ class TileLayerData
|
|
|
168
168
|
/**
|
|
169
169
|
* Canvas Layer - cached off screen rendering system
|
|
170
170
|
* - Contains an offscreen canvas that can be rendered to
|
|
171
|
-
* -
|
|
171
|
+
* - WebGL rendering is optional, call useWebGL to enable
|
|
172
172
|
* @extends EngineObject
|
|
173
173
|
* @example
|
|
174
174
|
* const canvasLayer = new CanvasLayer(vec2(), vec2(200,100));
|
|
@@ -190,18 +190,18 @@ class CanvasLayer extends EngineObject
|
|
|
190
190
|
this.canvas = headlessMode ? undefined : new OffscreenCanvas(canvasSize.x, canvasSize.y);
|
|
191
191
|
/** @property {OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this layer */
|
|
192
192
|
this.context = headlessMode ? undefined : this.canvas.getContext('2d');
|
|
193
|
-
/** @property {WebGLTexture} - Texture if using
|
|
193
|
+
/** @property {WebGLTexture} - Texture if using WebGL for this layer, call useWebGL to enable */
|
|
194
194
|
this.glTexture = undefined;
|
|
195
195
|
this.gravityScale = 0; // disable gravity by default for canvas layers
|
|
196
196
|
}
|
|
197
|
-
|
|
197
|
+
|
|
198
198
|
/** Destroy this canvas layer */
|
|
199
199
|
destroy()
|
|
200
200
|
{
|
|
201
201
|
if (this.destroyed)
|
|
202
202
|
return;
|
|
203
203
|
|
|
204
|
-
// free up the
|
|
204
|
+
// free up the WebGL texture
|
|
205
205
|
if (this.glTexture)
|
|
206
206
|
glDeleteTexture(this.glTexture);
|
|
207
207
|
super.destroy();
|
|
@@ -226,12 +226,12 @@ class CanvasLayer extends EngineObject
|
|
|
226
226
|
draw(pos, size, angle=0, color=WHITE, mirror=false, additiveColor, screenSpace=false, context)
|
|
227
227
|
{
|
|
228
228
|
// draw the canvas layer as a single tile that uses the whole texture
|
|
229
|
-
const
|
|
229
|
+
const useWebGL = glEnable && this.glTexture !== undefined;
|
|
230
230
|
const tileInfo = new TileInfo().setFullImage(this.canvas, this.glTexture);
|
|
231
|
-
drawTile(pos, size, tileInfo, color, angle, mirror, additiveColor,
|
|
231
|
+
drawTile(pos, size, tileInfo, color, angle, mirror, additiveColor, useWebGL, screenSpace, context);
|
|
232
232
|
}
|
|
233
233
|
|
|
234
|
-
/** Draw onto the layer canvas in world space (bypass
|
|
234
|
+
/** Draw onto the layer canvas in world space (bypass WebGL)
|
|
235
235
|
* @param {Vector2} pos
|
|
236
236
|
* @param {Vector2} size
|
|
237
237
|
* @param {number} angle
|
|
@@ -265,8 +265,8 @@ class CanvasLayer extends EngineObject
|
|
|
265
265
|
if (textureInfo)
|
|
266
266
|
{
|
|
267
267
|
context.globalAlpha = color.a; // only alpha is supported
|
|
268
|
-
context.drawImage(textureInfo.image,
|
|
269
|
-
tileInfo.pos.x, tileInfo.pos.y,
|
|
268
|
+
context.drawImage(textureInfo.image,
|
|
269
|
+
tileInfo.pos.x, tileInfo.pos.y,
|
|
270
270
|
tileInfo.size.x, tileInfo.size.y, -.5, -.5, 1, 1);
|
|
271
271
|
context.globalAlpha = 1;
|
|
272
272
|
}
|
|
@@ -284,11 +284,11 @@ class CanvasLayer extends EngineObject
|
|
|
284
284
|
* @param {Vector2} [size=(1,1)]
|
|
285
285
|
* @param {Color} [color=(1,1,1,1)]
|
|
286
286
|
* @param {number} [angle=0] */
|
|
287
|
-
drawRect(pos, size, color, angle)
|
|
287
|
+
drawRect(pos, size, color, angle)
|
|
288
288
|
{ this.drawTile(pos, size, undefined, color, angle); }
|
|
289
289
|
|
|
290
|
-
/** Create or update the
|
|
291
|
-
* @param {boolean} [enable] - enable
|
|
290
|
+
/** Create or update the WebGL texture for this layer
|
|
291
|
+
* @param {boolean} [enable] - enable WebGL rendering and update the texture */
|
|
292
292
|
useWebGL(enable=true)
|
|
293
293
|
{
|
|
294
294
|
if (glEnable && enable)
|
|
@@ -334,7 +334,7 @@ class TileLayer extends CanvasLayer
|
|
|
334
334
|
this.canvas = new OffscreenCanvas(canvasSize.x, canvasSize.y);
|
|
335
335
|
/** @property {OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this tile layer */
|
|
336
336
|
this.context = this.canvas.getContext('2d');
|
|
337
|
-
/** @property {WebGLTexture} - Texture if using
|
|
337
|
+
/** @property {WebGLTexture} - Texture if using WebGL for this layer */
|
|
338
338
|
this.glTexture = useWebGL ? glCreateTexture(this.canvas) : undefined;
|
|
339
339
|
// set no friction by default, applied friction is max of both objects
|
|
340
340
|
this.friction = 0;
|
|
@@ -359,7 +359,7 @@ class TileLayer extends CanvasLayer
|
|
|
359
359
|
}
|
|
360
360
|
}
|
|
361
361
|
|
|
362
|
-
/** Set data at a given position in the array
|
|
362
|
+
/** Set data at a given position in the array
|
|
363
363
|
* @param {Vector2} layerPos - Local position in array
|
|
364
364
|
* @param {TileLayerData} data - Data to set
|
|
365
365
|
* @param {boolean} [redraw] - Force the tile to redraw if true */
|
|
@@ -371,26 +371,26 @@ class TileLayer extends CanvasLayer
|
|
|
371
371
|
redraw && this.drawTileData(layerPos);
|
|
372
372
|
}
|
|
373
373
|
}
|
|
374
|
-
|
|
375
|
-
/** Get data at a given position in the array
|
|
374
|
+
|
|
375
|
+
/** Get data at a given position in the array
|
|
376
376
|
* @param {Vector2} layerPos - Local position in array
|
|
377
377
|
* @return {TileLayerData} */
|
|
378
378
|
getData(layerPos)
|
|
379
379
|
{ return layerPos.arrayCheck(this.size) && this.data[(layerPos.y|0)*this.size.x+layerPos.x|0]; }
|
|
380
|
-
|
|
380
|
+
|
|
381
381
|
// Render the tile layer, called automatically by the engine
|
|
382
382
|
render()
|
|
383
383
|
{
|
|
384
|
-
ASSERT(drawContext
|
|
385
|
-
|
|
384
|
+
ASSERT(drawContext !== this.context, 'must call redrawEnd() after drawing tiles!');
|
|
385
|
+
|
|
386
386
|
// draw the tile layer as a single tile
|
|
387
387
|
const tileInfo = new TileInfo().setFullImage(this.canvas, this.glTexture);
|
|
388
388
|
const pos = this.pos.add(this.size.scale(.5));
|
|
389
|
-
const
|
|
390
|
-
drawTile(pos, this.size, tileInfo, WHITE, 0, false, CLEAR_BLACK,
|
|
389
|
+
const useWebGL = glEnable && this.glTexture !== undefined;
|
|
390
|
+
drawTile(pos, this.size, tileInfo, WHITE, 0, false, CLEAR_BLACK, useWebGL);
|
|
391
391
|
}
|
|
392
392
|
|
|
393
|
-
/** Draw all the tile data to an offscreen canvas
|
|
393
|
+
/** Draw all the tile data to an offscreen canvas
|
|
394
394
|
* - This may be slow in some browsers but only needs to be done once */
|
|
395
395
|
redraw()
|
|
396
396
|
{
|
|
@@ -400,7 +400,7 @@ class TileLayer extends CanvasLayer
|
|
|
400
400
|
this.drawTileData(vec2(x,y), false);
|
|
401
401
|
this.redrawEnd();
|
|
402
402
|
if (this.glTexture)
|
|
403
|
-
this.useWebGL(); // update
|
|
403
|
+
this.useWebGL(); // update WebGL texture
|
|
404
404
|
}
|
|
405
405
|
|
|
406
406
|
/** Call to start the redraw process
|
|
@@ -436,7 +436,7 @@ class TileLayer extends CanvasLayer
|
|
|
436
436
|
/** Call to end the redraw process */
|
|
437
437
|
redrawEnd()
|
|
438
438
|
{
|
|
439
|
-
ASSERT(drawContext
|
|
439
|
+
ASSERT(drawContext === this.context, 'must call redrawStart() before drawing tiles');
|
|
440
440
|
glCopyToContext(drawContext);
|
|
441
441
|
//debugSaveCanvas(this.canvas);
|
|
442
442
|
|
|
@@ -447,7 +447,7 @@ class TileLayer extends CanvasLayer
|
|
|
447
447
|
/** Draw the tile at a given position in the tile grid
|
|
448
448
|
* This can be used to clear out tiles when they are destroyed
|
|
449
449
|
* Tiles can also be redrawn if inside a redrawStart/End block
|
|
450
|
-
* @param {Vector2} layerPos
|
|
450
|
+
* @param {Vector2} layerPos
|
|
451
451
|
* @param {boolean} [clear] - should the old tile be cleared out
|
|
452
452
|
*/
|
|
453
453
|
drawTileData(layerPos, clear=true)
|
|
@@ -462,9 +462,9 @@ class TileLayer extends CanvasLayer
|
|
|
462
462
|
|
|
463
463
|
// draw the tile if it has layer data
|
|
464
464
|
const d = this.getData(layerPos);
|
|
465
|
-
if (d.tile
|
|
465
|
+
if (d.tile !== undefined)
|
|
466
466
|
{
|
|
467
|
-
ASSERT(drawContext
|
|
467
|
+
ASSERT(drawContext === this.context, 'must call redrawStart() before drawing tiles');
|
|
468
468
|
const pos = layerPos.add(vec2(.5));
|
|
469
469
|
const tileInfo = tile(d.tile, s, this.tileInfo.textureIndex, this.tileInfo.padding);
|
|
470
470
|
drawTile(pos, vec2(1), tileInfo, d.color, d.direction*PI/2, d.mirror);
|
|
@@ -477,7 +477,7 @@ class TileLayer extends CanvasLayer
|
|
|
477
477
|
* Tile Collision Layer - a tile layer with collision
|
|
478
478
|
* - adds collision data and functions to TileLayer
|
|
479
479
|
* - there can be multiple tile collision layers
|
|
480
|
-
* - tile
|
|
480
|
+
* - tile collision layers should not overlap each other
|
|
481
481
|
* @extends TileLayer
|
|
482
482
|
*/
|
|
483
483
|
class TileCollisionLayer extends TileLayer
|