littlejsengine 1.8.6 → 1.8.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.
- package/README.md +9 -3
- package/build/littlejs.d.ts +9 -0
- package/build/littlejs.esm.js +216 -27
- package/build/littlejs.esm.min.js +1 -1
- package/build/littlejs.js +214 -27
- package/build/littlejs.min.js +1 -1
- package/build/littlejs.release.js +214 -27
- package/examples/breakout/game.js +3 -0
- package/examples/breakout/index.html +3 -3
- package/examples/breakoutTutorial/index.html +2 -2
- package/examples/electron/game.js +3 -0
- package/examples/electron/index.html +2 -2
- package/examples/js13k/index.html +13 -13
- package/examples/logo.png +0 -0
- package/examples/module/game.js +3 -0
- package/examples/module/index.html +1 -1
- package/examples/particles/index.html +1 -1
- package/examples/platformer/game.js +3 -0
- package/examples/platformer/index.html +6 -6
- package/examples/puzzle/game.js +3 -0
- package/examples/puzzle/index.html +2 -2
- package/examples/starter/game.js +3 -0
- package/examples/starter/index.html +13 -13
- package/examples/stress/index.html +3 -1
- package/examples/typescript/game.js +2 -0
- package/examples/typescript/game.ts +3 -0
- package/examples/typescript/index.html +1 -1
- package/package.json +1 -1
- package/src/engine.js +186 -9
- package/src/engineDraw.js +1 -1
- package/src/engineExport.js +2 -0
- package/src/engineSettings.js +11 -0
- package/src/engineUtilities.js +4 -5
- package/src/engineWebGL.js +12 -12
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<head><title>LittleJS JS13K Project</title></head><body>
|
|
2
2
|
|
|
3
3
|
<!-- LittleJS Engine -->
|
|
4
|
-
<script src=../../src/engineDebug.js?
|
|
5
|
-
<script src=../../src/engineUtilities.js?
|
|
6
|
-
<script src=../../src/engineSettings.js?
|
|
7
|
-
<script src=../../src/engineObject.js?
|
|
8
|
-
<script src=../../src/engineDraw.js?
|
|
9
|
-
<script src=../../src/engineInput.js?
|
|
10
|
-
<script src=../../src/engineAudio.js?
|
|
11
|
-
<script src=../../src/engineTileLayer.js?
|
|
12
|
-
<script src=../../src/engineParticles.js?
|
|
13
|
-
<script src=../../src/engineMedals.js?
|
|
14
|
-
<script src=../../src/engineWebGL.js?
|
|
15
|
-
<script src=../../src/engine.js?
|
|
4
|
+
<script src=../../src/engineDebug.js?188></script>
|
|
5
|
+
<script src=../../src/engineUtilities.js?188></script>
|
|
6
|
+
<script src=../../src/engineSettings.js?188></script>
|
|
7
|
+
<script src=../../src/engineObject.js?188></script>
|
|
8
|
+
<script src=../../src/engineDraw.js?188></script>
|
|
9
|
+
<script src=../../src/engineInput.js?188></script>
|
|
10
|
+
<script src=../../src/engineAudio.js?188></script>
|
|
11
|
+
<script src=../../src/engineTileLayer.js?188></script>
|
|
12
|
+
<script src=../../src/engineParticles.js?188></script>
|
|
13
|
+
<script src=../../src/engineMedals.js?188></script>
|
|
14
|
+
<script src=../../src/engineWebGL.js?188></script>
|
|
15
|
+
<script src=../../src/engine.js?188></script>
|
|
16
16
|
|
|
17
17
|
<!-- Add your game scripts here -->
|
|
18
|
-
<script src=game.js?
|
|
18
|
+
<script src=game.js?188></script>
|
|
Binary file
|
package/examples/module/game.js
CHANGED
|
@@ -10,6 +10,9 @@
|
|
|
10
10
|
import * as LittleJS from '../../build/littlejs.esm.js';
|
|
11
11
|
const {Vector2, Color, Timer, vec2, tile} = LittleJS;
|
|
12
12
|
|
|
13
|
+
// show the LittleJS splash screen
|
|
14
|
+
LittleJS.setShowSplashScreen(1);
|
|
15
|
+
|
|
13
16
|
// sound effects
|
|
14
17
|
const sound_click = new LittleJS.Sound([1,.5]);
|
|
15
18
|
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
<link rel=icon type=image/png href=../favicon.png>
|
|
7
7
|
</head><body>
|
|
8
8
|
|
|
9
|
-
<script src=../../build/littlejs.js?
|
|
10
|
-
<script src=gameObjects.js?
|
|
11
|
-
<script src=gamePlayer.js?
|
|
12
|
-
<script src=gameEffects.js?
|
|
13
|
-
<script src=gameLevel.js?
|
|
14
|
-
<script src=game.js?
|
|
9
|
+
<script src=../../build/littlejs.js?188></script>
|
|
10
|
+
<script src=gameObjects.js?188></script>
|
|
11
|
+
<script src=gamePlayer.js?188></script>
|
|
12
|
+
<script src=gameEffects.js?188></script>
|
|
13
|
+
<script src=gameLevel.js?188></script>
|
|
14
|
+
<script src=game.js?188></script>
|
package/examples/puzzle/game.js
CHANGED
package/examples/starter/game.js
CHANGED
|
@@ -6,18 +6,18 @@
|
|
|
6
6
|
</head><body>
|
|
7
7
|
|
|
8
8
|
<!-- LittleJS Engine -->
|
|
9
|
-
<script src=../../src/engineDebug.js?
|
|
10
|
-
<script src=../../src/engineUtilities.js?
|
|
11
|
-
<script src=../../src/engineSettings.js?
|
|
12
|
-
<script src=../../src/engineObject.js?
|
|
13
|
-
<script src=../../src/engineDraw.js?
|
|
14
|
-
<script src=../../src/engineInput.js?
|
|
15
|
-
<script src=../../src/engineAudio.js?
|
|
16
|
-
<script src=../../src/engineTileLayer.js?
|
|
17
|
-
<script src=../../src/engineParticles.js?
|
|
18
|
-
<script src=../../src/engineMedals.js?
|
|
19
|
-
<script src=../../src/engineWebGL.js?
|
|
20
|
-
<script src=../../src/engine.js?
|
|
9
|
+
<script src=../../src/engineDebug.js?188></script>
|
|
10
|
+
<script src=../../src/engineUtilities.js?188></script>
|
|
11
|
+
<script src=../../src/engineSettings.js?188></script>
|
|
12
|
+
<script src=../../src/engineObject.js?188></script>
|
|
13
|
+
<script src=../../src/engineDraw.js?188></script>
|
|
14
|
+
<script src=../../src/engineInput.js?188></script>
|
|
15
|
+
<script src=../../src/engineAudio.js?188></script>
|
|
16
|
+
<script src=../../src/engineTileLayer.js?188></script>
|
|
17
|
+
<script src=../../src/engineParticles.js?188></script>
|
|
18
|
+
<script src=../../src/engineMedals.js?188></script>
|
|
19
|
+
<script src=../../src/engineWebGL.js?188></script>
|
|
20
|
+
<script src=../../src/engine.js?188></script>
|
|
21
21
|
|
|
22
22
|
<!-- Add your game scripts here -->
|
|
23
|
-
<script src=game.js?
|
|
23
|
+
<script src=game.js?188></script>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
</head><body>
|
|
7
7
|
|
|
8
8
|
<!-- LittleJS Engine -->
|
|
9
|
-
<script src=../../build/littlejs.min.js?
|
|
9
|
+
<script src=../../build/littlejs.min.js?188></script>
|
|
10
10
|
<script>
|
|
11
11
|
|
|
12
12
|
/*
|
|
@@ -36,6 +36,8 @@ class TestObject extends EngineObject
|
|
|
36
36
|
///////////////////////////////////////////////////////////////////////////////
|
|
37
37
|
function gameInit()
|
|
38
38
|
{
|
|
39
|
+
canvasFixedSize = vec2(800, 600); // 720p
|
|
40
|
+
|
|
39
41
|
// create tile collision
|
|
40
42
|
initTileCollision(vec2(80,50));
|
|
41
43
|
for (let x = tileCollisionSize.x; x--;)
|
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
// import module
|
|
8
8
|
import * as LittleJS from '../../build/littlejs.esm.js';
|
|
9
9
|
const { Vector2, Color, Timer, vec2, tile } = LittleJS;
|
|
10
|
+
// show the LittleJS splash screen
|
|
11
|
+
LittleJS.setShowSplashScreen(true);
|
|
10
12
|
// sound effects
|
|
11
13
|
const sound_click = new LittleJS.Sound([1, .5]);
|
|
12
14
|
// medals
|
|
@@ -10,6 +10,9 @@
|
|
|
10
10
|
import * as LittleJS from '../../build/littlejs.esm.js';
|
|
11
11
|
const {Vector2, Color, Timer, vec2, tile} = LittleJS;
|
|
12
12
|
|
|
13
|
+
// show the LittleJS splash screen
|
|
14
|
+
LittleJS.setShowSplashScreen(true);
|
|
15
|
+
|
|
13
16
|
// sound effects
|
|
14
17
|
const sound_click = new LittleJS.Sound([1,.5]);
|
|
15
18
|
|
package/package.json
CHANGED
package/src/engine.js
CHANGED
|
@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
|
|
|
30
30
|
* @type {String}
|
|
31
31
|
* @default
|
|
32
32
|
* @memberof Engine */
|
|
33
|
-
const engineVersion = '1.8.
|
|
33
|
+
const engineVersion = '1.8.8';
|
|
34
34
|
|
|
35
35
|
/** Frames per second to update objects
|
|
36
36
|
* @type {Number}
|
|
@@ -213,7 +213,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
|
|
|
213
213
|
}
|
|
214
214
|
|
|
215
215
|
// setup html
|
|
216
|
-
|
|
216
|
+
const styleBody =
|
|
217
217
|
'margin:0;overflow:hidden;' + // fill the window
|
|
218
218
|
'background:#000;' + // set background color
|
|
219
219
|
'touch-action:none;' + // prevent mobile pinch to resize
|
|
@@ -234,14 +234,13 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
|
|
|
234
234
|
|
|
235
235
|
// set canvas style
|
|
236
236
|
const styleCanvas =
|
|
237
|
-
'position:absolute;' +
|
|
238
|
-
'top:50%;left:50%;transform:translate(-50%,-50%);
|
|
239
|
-
(canvasPixelated?'image-rendering:pixelated':''); // pixelated rendering
|
|
237
|
+
'position:absolute;' + // position
|
|
238
|
+
'top:50%;left:50%;transform:translate(-50%,-50%)'; // center
|
|
240
239
|
(glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
|
|
241
240
|
|
|
242
|
-
//
|
|
243
|
-
|
|
244
|
-
new Promise(
|
|
241
|
+
// create promises for loading images
|
|
242
|
+
const promises = imageSources.map((src, textureIndex)=>
|
|
243
|
+
new Promise(resolve =>
|
|
245
244
|
{
|
|
246
245
|
const image = new Image;
|
|
247
246
|
image.onerror = image.onload = ()=>
|
|
@@ -251,7 +250,24 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
|
|
|
251
250
|
}
|
|
252
251
|
image.src = src;
|
|
253
252
|
})
|
|
254
|
-
)
|
|
253
|
+
)
|
|
254
|
+
|
|
255
|
+
// draw splash screen
|
|
256
|
+
showSplashScreen && promises.push(new Promise(resolve =>
|
|
257
|
+
{
|
|
258
|
+
let t = 0;
|
|
259
|
+
console.log(`LittleJS Engine v${engineVersion}`);
|
|
260
|
+
updateSplash();
|
|
261
|
+
function updateSplash()
|
|
262
|
+
{
|
|
263
|
+
clearInput();
|
|
264
|
+
drawEngineSplashScreen(t+=.01);
|
|
265
|
+
t>1 ? resolve() : setTimeout(updateSplash,16);
|
|
266
|
+
}
|
|
267
|
+
}));
|
|
268
|
+
|
|
269
|
+
// load all of the images
|
|
270
|
+
Promise.all(promises).then(()=>
|
|
255
271
|
{
|
|
256
272
|
// start the engine
|
|
257
273
|
gameInit();
|
|
@@ -329,4 +345,165 @@ function engineObjectsCallback(pos, size, callbackFunction, objects=engineObject
|
|
|
329
345
|
for (const o of objects)
|
|
330
346
|
pos.distanceSquared(o.pos) < sizeSquared && callbackFunction(o);
|
|
331
347
|
}
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
///////////////////////////////////////////////////////////////////////////////
|
|
351
|
+
// LittleJS splash screen and logo
|
|
352
|
+
|
|
353
|
+
function drawEngineSplashScreen(t)
|
|
354
|
+
{
|
|
355
|
+
// background
|
|
356
|
+
const grayscale = 0;
|
|
357
|
+
const x = mainContext;
|
|
358
|
+
const w = mainCanvas.width = innerWidth;
|
|
359
|
+
const h = mainCanvas.height = innerHeight;
|
|
360
|
+
const p3 = percent(t, 1, .8);
|
|
361
|
+
const p4 = percent(t, 0, .5);
|
|
362
|
+
const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,Math.hypot(w,h)*.7);
|
|
363
|
+
g.addColorStop(0,hsl(0,0,lerp(p4,0,p3/2),p3));
|
|
364
|
+
g.addColorStop(1,hsl(0,0,0,p3));
|
|
365
|
+
x.save();
|
|
366
|
+
x.fillStyle = g;
|
|
367
|
+
x.fillRect(0,0,w,h);
|
|
368
|
+
|
|
369
|
+
// logo - fade in and out
|
|
370
|
+
const rect = (X, Y, W, H, C)=>
|
|
371
|
+
{
|
|
372
|
+
x.beginPath();
|
|
373
|
+
x.rect(X,Y,W,C?H*p:H);
|
|
374
|
+
x.fillStyle = C;
|
|
375
|
+
C ? x.fill() : x.stroke();
|
|
376
|
+
};
|
|
377
|
+
const line = (X, Y, Z, W)=>
|
|
378
|
+
{
|
|
379
|
+
x.beginPath();
|
|
380
|
+
x.lineTo(X,Y);
|
|
381
|
+
x.lineTo(Z,W);
|
|
382
|
+
x.stroke();
|
|
383
|
+
};
|
|
384
|
+
const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
|
|
385
|
+
{
|
|
386
|
+
const D = (A+B)/2, E = p*(B-A)/2;
|
|
387
|
+
x.beginPath();
|
|
388
|
+
F && x.lineTo(X,Y);
|
|
389
|
+
x.arc(X,Y,R,D-E,D+E);
|
|
390
|
+
x.fillStyle = C;
|
|
391
|
+
C ? x.fill() : x.stroke();
|
|
392
|
+
};
|
|
393
|
+
const color = (c=0, l=0) =>
|
|
394
|
+
hsl([.98,.3,.57,.14][c%4]-10,grayscale?0:.8,[0,.3,.5,.8,.9][l]);
|
|
395
|
+
const alpha = wave(1,1,t);
|
|
396
|
+
const p = percent(alpha, .1, .5);
|
|
397
|
+
|
|
398
|
+
// setup
|
|
399
|
+
x.translate(w/2,h/2);
|
|
400
|
+
const size = min(6, min(w,h)/99); // fit to screen
|
|
401
|
+
x.scale(size,size);
|
|
402
|
+
x.translate(-40,-35);
|
|
403
|
+
x.lineJoin = x.lineCap = 'round';
|
|
404
|
+
x.lineWidth = 1+p;
|
|
405
|
+
|
|
406
|
+
// drawing effect
|
|
407
|
+
const p2 = percent(alpha,.1,1);
|
|
408
|
+
x.setLineDash([99*p2,99]);
|
|
409
|
+
|
|
410
|
+
// cab top
|
|
411
|
+
rect(7,17,18,-8,color(2,2));
|
|
412
|
+
rect(7,9,18,4,color(2,3));
|
|
413
|
+
rect(25,9,8,8,color(2,1));
|
|
414
|
+
rect(25,9,-18,8);
|
|
415
|
+
rect(25,9,8,8);
|
|
416
|
+
|
|
417
|
+
// cab
|
|
418
|
+
rect(25,17,7,22,color());
|
|
419
|
+
rect(11,40,14,-23,color(1,1));
|
|
420
|
+
rect(11,17,14,17,color(1,2));
|
|
421
|
+
rect(11,17,14,9,color(1,3));
|
|
422
|
+
rect(15,31,6,-9,color(2,2));
|
|
423
|
+
circle(15,23,5,0,PI/2,color(2,4),1);
|
|
424
|
+
rect(25,17,-14,23);
|
|
425
|
+
rect(21,22,-6,9);
|
|
426
|
+
|
|
427
|
+
// little stack
|
|
428
|
+
rect(37,14,9,6,color(3,2));
|
|
429
|
+
rect(37,14,4,6,color(3,3));
|
|
430
|
+
rect(37,14,9,6);
|
|
431
|
+
|
|
432
|
+
// big stack
|
|
433
|
+
rect(50,20,10,-10,color(0,1));
|
|
434
|
+
rect(50,20,6,-10,color(0,2));
|
|
435
|
+
rect(50,20,3,-10,color(0,3));
|
|
436
|
+
rect(50,10,10,10);
|
|
437
|
+
circle(55,2,11,.5,PI-.5,color(3,3));
|
|
438
|
+
circle(55,2,11,.5,PI/2,color(3,2),1);
|
|
439
|
+
circle(55,2,11,.5,PI-.5);
|
|
440
|
+
rect(45,7,20,-7,color(0,2));
|
|
441
|
+
rect(45,0,20,3,color(0,3));
|
|
442
|
+
rect(45,0,20,7);
|
|
443
|
+
|
|
444
|
+
// engine
|
|
445
|
+
for (let i=5; i--;)
|
|
446
|
+
{
|
|
447
|
+
// stagger radius to fix slight seam
|
|
448
|
+
circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
|
|
449
|
+
circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
|
|
450
|
+
circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
// engine outline
|
|
454
|
+
circle(36,30,10,PI/2,PI*3/2);
|
|
455
|
+
circle(47,30,10,PI/2,PI*3/2);
|
|
456
|
+
circle(60,30,10);
|
|
457
|
+
line(36,20,60,20);
|
|
458
|
+
|
|
459
|
+
// engine front light
|
|
460
|
+
circle(60,30,4,PI,3*PI,color(3,2));
|
|
461
|
+
circle(60,30,4,PI,2*PI,color(3,3));
|
|
462
|
+
circle(60,30,4,PI,3*PI);
|
|
463
|
+
|
|
464
|
+
// front brush
|
|
465
|
+
for (let i=6; i--;)
|
|
466
|
+
{
|
|
467
|
+
x.beginPath();
|
|
468
|
+
x.lineTo(53,54);
|
|
469
|
+
x.lineTo(53,40);
|
|
470
|
+
x.lineTo(53+(1+i*2.9)*p,40);
|
|
471
|
+
x.lineTo(53+(4+i*3.5)*p,54);
|
|
472
|
+
x.fillStyle = color(0,i%2+2);
|
|
473
|
+
x.fill() || i%2 && x.stroke();
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
// wheels
|
|
477
|
+
rect(5,40,9,6,color());
|
|
478
|
+
rect(15,54,38,-14,color())
|
|
479
|
+
for (let i=3; i--;)
|
|
480
|
+
for (let j=2; j--;)
|
|
481
|
+
{
|
|
482
|
+
circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
|
|
483
|
+
x.stroke();
|
|
484
|
+
circle(15*i+15,47,j?7:1,0,PI,color(i,2));
|
|
485
|
+
x.stroke();
|
|
486
|
+
}
|
|
487
|
+
line(6,40,68,40) // center
|
|
488
|
+
line(77,54,4,54) // bottom
|
|
489
|
+
|
|
490
|
+
// text
|
|
491
|
+
const s = engineName;
|
|
492
|
+
x.font = '900 16px arial';
|
|
493
|
+
x.textAlign = 'center';
|
|
494
|
+
x.textBaseline = 'top';
|
|
495
|
+
x.lineWidth = 1+p*3
|
|
496
|
+
let w2 = 0;
|
|
497
|
+
for (let i=0; i<s.length; ++i)
|
|
498
|
+
w2 += x.measureText(s[i]).width;
|
|
499
|
+
for (let j=2; j--;)
|
|
500
|
+
for (let i=0, X=41-w2/2; i<s.length; ++i)
|
|
501
|
+
{
|
|
502
|
+
x.fillStyle = color(i,grayscale?3:2);
|
|
503
|
+
const w = x.measureText(s[i]).width;
|
|
504
|
+
x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
|
|
505
|
+
X += w;
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
x.restore();
|
|
332
509
|
}
|
package/src/engineDraw.js
CHANGED
|
@@ -52,7 +52,7 @@ let mainCanvasSize = vec2();
|
|
|
52
52
|
* @memberof Draw */
|
|
53
53
|
let textureInfos = [];
|
|
54
54
|
|
|
55
|
-
//
|
|
55
|
+
// Keep track of how many draw calls there were each frame for debugging
|
|
56
56
|
let drawCount;
|
|
57
57
|
|
|
58
58
|
///////////////////////////////////////////////////////////////////////////////
|
package/src/engineExport.js
CHANGED
|
@@ -43,6 +43,7 @@ export {
|
|
|
43
43
|
canvasFixedSize,
|
|
44
44
|
canvasPixelated,
|
|
45
45
|
fontDefault,
|
|
46
|
+
showSplashScreen,
|
|
46
47
|
tileSizeDefault,
|
|
47
48
|
tileFixBleedScale,
|
|
48
49
|
enablePhysicsSolver,
|
|
@@ -80,6 +81,7 @@ export {
|
|
|
80
81
|
setCanvasFixedSize,
|
|
81
82
|
setCanvasPixelated,
|
|
82
83
|
setFontDefault,
|
|
84
|
+
setShowSplashScreen,
|
|
83
85
|
setGlEnable,
|
|
84
86
|
setGlOverlay,
|
|
85
87
|
setTileSizeDefault,
|
package/src/engineSettings.js
CHANGED
|
@@ -49,6 +49,12 @@ let canvasPixelated = 1;
|
|
|
49
49
|
* @memberof Settings */
|
|
50
50
|
let fontDefault = 'arial';
|
|
51
51
|
|
|
52
|
+
/** Enable to show the LittleJS splash screen be shown on startup
|
|
53
|
+
* @type {Boolean}
|
|
54
|
+
* @default
|
|
55
|
+
* @memberof Settings */
|
|
56
|
+
let showSplashScreen = 0;
|
|
57
|
+
|
|
52
58
|
///////////////////////////////////////////////////////////////////////////////
|
|
53
59
|
// WebGL settings
|
|
54
60
|
|
|
@@ -282,6 +288,11 @@ function setCanvasPixelated(pixelated) { canvasPixelated = pixelated; }
|
|
|
282
288
|
* @memberof Settings */
|
|
283
289
|
function setFontDefault(font) { fontDefault = font; }
|
|
284
290
|
|
|
291
|
+
/** Set if the LittleJS splash screen be shown on startup
|
|
292
|
+
* @param {Boolean} show
|
|
293
|
+
* @memberof Settings */
|
|
294
|
+
function setShowSplashScreen(show) { showSplashScreen = show; }
|
|
295
|
+
|
|
285
296
|
/** Set if webgl rendering is enabled
|
|
286
297
|
* @param {Boolean} enable
|
|
287
298
|
* @memberof Settings */
|
package/src/engineUtilities.js
CHANGED
|
@@ -596,11 +596,10 @@ class Color
|
|
|
596
596
|
* @return {Number} */
|
|
597
597
|
rgbaInt()
|
|
598
598
|
{
|
|
599
|
-
const
|
|
600
|
-
const
|
|
601
|
-
const
|
|
602
|
-
const
|
|
603
|
-
const a = toByte(this.a)<<24;
|
|
599
|
+
const r = clamp(this.r)*255|0;
|
|
600
|
+
const g = clamp(this.g)*255<<8;
|
|
601
|
+
const b = clamp(this.b)*255<<16;
|
|
602
|
+
const a = clamp(this.a)*255<<24;
|
|
604
603
|
return r + g + b + a;
|
|
605
604
|
}
|
|
606
605
|
}
|
package/src/engineWebGL.js
CHANGED
|
@@ -23,7 +23,7 @@ let glCanvas;
|
|
|
23
23
|
let glContext;
|
|
24
24
|
|
|
25
25
|
// WebGL internal variables not exposed to documentation
|
|
26
|
-
let glActiveTexture, glShader, glArrayBuffer, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
|
|
26
|
+
let glActiveTexture, glShader, glArrayBuffer, glVertexData, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
|
|
27
27
|
|
|
28
28
|
///////////////////////////////////////////////////////////////////////////////
|
|
29
29
|
|
|
@@ -60,10 +60,10 @@ function glInit()
|
|
|
60
60
|
);
|
|
61
61
|
|
|
62
62
|
// init buffers
|
|
63
|
-
|
|
63
|
+
glVertexData = new ArrayBuffer(gl_VERTEX_BUFFER_SIZE);
|
|
64
|
+
glPositionData = new Float32Array(glVertexData);
|
|
65
|
+
glColorData = new Uint32Array(glVertexData);
|
|
64
66
|
glArrayBuffer = glContext.createBuffer();
|
|
65
|
-
glPositionData = new Float32Array(vertexData);
|
|
66
|
-
glColorData = new Uint32Array(vertexData);
|
|
67
67
|
glBatchCount = 0;
|
|
68
68
|
}
|
|
69
69
|
|
|
@@ -91,7 +91,7 @@ function glPreRender()
|
|
|
91
91
|
glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
|
|
92
92
|
offset += size*typeSize;
|
|
93
93
|
}
|
|
94
|
-
initVertexAttribArray('p', gl_FLOAT, 4, 4); // position & texture
|
|
94
|
+
initVertexAttribArray('p', gl_FLOAT, 4, 4); // position & texture
|
|
95
95
|
initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
|
|
96
96
|
initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
|
|
97
97
|
|
|
@@ -179,6 +179,7 @@ function glCreateTexture(image)
|
|
|
179
179
|
glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, filter);
|
|
180
180
|
glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_S, gl_CLAMP_TO_EDGE);
|
|
181
181
|
glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_T, gl_CLAMP_TO_EDGE);
|
|
182
|
+
|
|
182
183
|
return texture;
|
|
183
184
|
}
|
|
184
185
|
|
|
@@ -193,8 +194,7 @@ function glFlush()
|
|
|
193
194
|
glContext.enable(gl_BLEND);
|
|
194
195
|
|
|
195
196
|
// draw all the sprites in the batch and reset the buffer
|
|
196
|
-
glContext.bufferSubData(gl_ARRAY_BUFFER, 0,
|
|
197
|
-
glPositionData.subarray(0, glBatchCount * gl_INDICIES_PER_VERT));
|
|
197
|
+
glContext.bufferSubData(gl_ARRAY_BUFFER, 0, glVertexData);
|
|
198
198
|
glContext.drawArrays(gl_TRIANGLE_STRIP, 0, glBatchCount);
|
|
199
199
|
glBatchCount = 0;
|
|
200
200
|
glBatchAdditive = glAdditive;
|
|
@@ -249,11 +249,11 @@ function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdd
|
|
|
249
249
|
// setup 2 triangle strip quad
|
|
250
250
|
for(let i = vertCount, offset = glBatchCount * gl_INDICIES_PER_VERT; i--;)
|
|
251
251
|
{
|
|
252
|
-
|
|
253
|
-
glPositionData[offset++] = positionData[j
|
|
254
|
-
glPositionData[offset++] = positionData[j
|
|
255
|
-
glPositionData[offset++] = positionData[j
|
|
256
|
-
glPositionData[offset++] = positionData[j
|
|
252
|
+
const j = clamp(i-1, 0, 3)*4; // degenerate tri at ends
|
|
253
|
+
glPositionData[offset++] = positionData[j+0];
|
|
254
|
+
glPositionData[offset++] = positionData[j+1];
|
|
255
|
+
glPositionData[offset++] = positionData[j+2];
|
|
256
|
+
glPositionData[offset++] = positionData[j+3];
|
|
257
257
|
glColorData[offset++] = rgba;
|
|
258
258
|
glColorData[offset++] = rgbaAdditive;
|
|
259
259
|
}
|