littlejsengine 1.8.1 → 1.8.3
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 +3 -2
- package/build/littlejs.d.ts +509 -509
- package/build/littlejs.esm.js +140 -127
- package/build/littlejs.esm.min.js +1 -1
- package/build/littlejs.js +57 -44
- package/build/littlejs.min.js +1 -1
- package/build/littlejs.release.js +57 -44
- package/examples/breakout/index.html +3 -3
- package/examples/breakoutTutorial/README.md +1 -1
- package/examples/breakoutTutorial/index.html +2 -2
- package/examples/electron/index.html +2 -2
- package/examples/js13k/index.html +13 -13
- package/examples/module/game.js +1 -1
- package/examples/module/index.html +1 -1
- package/examples/particles/index.html +1 -1
- package/examples/platformer/index.html +6 -6
- package/examples/puzzle/index.html +2 -2
- package/examples/starter/index.html +13 -13
- package/examples/stress/index.html +3 -3
- package/examples/typescript/game.ts +1 -1
- package/examples/typescript/index.html +1 -1
- package/package.json +2 -1
- package/src/engine.js +2 -2
- package/src/engineAudio.js +2 -1
- package/src/engineDraw.js +35 -18
- package/src/engineExport.js +83 -83
- package/src/engineObject.js +1 -0
- package/src/engineWebGL.js +17 -23
|
@@ -7,18 +7,18 @@
|
|
|
7
7
|
</head><body>
|
|
8
8
|
|
|
9
9
|
<!-- LittleJS Engine -->
|
|
10
|
-
<script src=../../src/engineDebug.js?
|
|
11
|
-
<script src=../../src/engineUtilities.js?
|
|
12
|
-
<script src=../../src/engineSettings.js?
|
|
13
|
-
<script src=../../src/engineObject.js?
|
|
14
|
-
<script src=../../src/engineDraw.js?
|
|
15
|
-
<script src=../../src/engineInput.js?
|
|
16
|
-
<script src=../../src/engineAudio.js?
|
|
17
|
-
<script src=../../src/engineTileLayer.js?
|
|
18
|
-
<script src=../../src/engineParticles.js?
|
|
19
|
-
<script src=../../src/engineMedals.js?
|
|
20
|
-
<script src=../../src/engineWebGL.js?
|
|
21
|
-
<script src=../../src/engine.js?
|
|
10
|
+
<script src=../../src/engineDebug.js?183></script>
|
|
11
|
+
<script src=../../src/engineUtilities.js?183></script>
|
|
12
|
+
<script src=../../src/engineSettings.js?183></script>
|
|
13
|
+
<script src=../../src/engineObject.js?183></script>
|
|
14
|
+
<script src=../../src/engineDraw.js?183></script>
|
|
15
|
+
<script src=../../src/engineInput.js?183></script>
|
|
16
|
+
<script src=../../src/engineAudio.js?183></script>
|
|
17
|
+
<script src=../../src/engineTileLayer.js?183></script>
|
|
18
|
+
<script src=../../src/engineParticles.js?183></script>
|
|
19
|
+
<script src=../../src/engineMedals.js?183></script>
|
|
20
|
+
<script src=../../src/engineWebGL.js?183></script>
|
|
21
|
+
<script src=../../src/engine.js?183></script>
|
|
22
22
|
|
|
23
23
|
<!-- Add your game scripts here -->
|
|
24
|
-
<script src=game.js?
|
|
24
|
+
<script src=game.js?183></script>
|
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
<link rel=icon type=image/png href=../favicon.png>
|
|
7
7
|
</head><body>
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
<!-- LittleJS Engine -->
|
|
10
|
+
<script src=../../build/littlejs.min.js?183></script>
|
|
10
11
|
<script>
|
|
11
12
|
|
|
12
13
|
/*
|
|
@@ -27,8 +28,7 @@ class TestObject extends EngineObject
|
|
|
27
28
|
{
|
|
28
29
|
constructor(pos)
|
|
29
30
|
{
|
|
30
|
-
super(pos, vec2(1), 0
|
|
31
|
-
|
|
31
|
+
super(pos, vec2(1), tile(0), 0, spriteColor);
|
|
32
32
|
this.additiveColor = spriteAdditiveColor;
|
|
33
33
|
this.setCollision();
|
|
34
34
|
}
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "littlejsengine",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.3",
|
|
4
4
|
"description": "LittleJS - Tiny and Fast HTML5 Game Engine",
|
|
5
5
|
"main": "build/littlejs.esm.js",
|
|
6
|
+
"types": "build/littlejs.esm.js",
|
|
6
7
|
"repository": {
|
|
7
8
|
"type": "git",
|
|
8
9
|
"url": "git+https://github.com/KilledByAPixel/LittleJS.git"
|
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.3';
|
|
34
34
|
|
|
35
35
|
/** Frames per second to update objects
|
|
36
36
|
* @type {Number}
|
|
@@ -91,7 +91,7 @@ let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
|
|
|
91
91
|
* @param {Function} gameUpdatePost - Called after physics and objects are updated, setup camera and prepare for render
|
|
92
92
|
* @param {Function} gameRender - Called before objects are rendered, draw any background effects that appear behind objects
|
|
93
93
|
* @param {Function} gameRenderPost - Called after objects are rendered, draw effects or hud that appear above all objects
|
|
94
|
-
* @param {
|
|
94
|
+
* @param {Array} [imageSources=['tiles.png']] - Image to load
|
|
95
95
|
* @memberof Engine */
|
|
96
96
|
function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=['tiles.png'])
|
|
97
97
|
{
|
package/src/engineAudio.js
CHANGED
|
@@ -45,7 +45,8 @@ class Sound
|
|
|
45
45
|
if (zzfxSound)
|
|
46
46
|
{
|
|
47
47
|
// generate zzfx sound now for fast playback
|
|
48
|
-
this.randomness = zzfxSound[1]
|
|
48
|
+
this.randomness = zzfxSound[1];
|
|
49
|
+
zzfxSound[1] = 0; // generate without randomness
|
|
49
50
|
this.sampleChannels = [zzfxG(...zzfxSound)];
|
|
50
51
|
this.sampleRate = zzfxR;
|
|
51
52
|
}
|
package/src/engineDraw.js
CHANGED
|
@@ -188,16 +188,18 @@ function worldToScreen(worldPos)
|
|
|
188
188
|
* @param {Color} [additiveColor=Color(0,0,0,0)] - Additive color to be applied
|
|
189
189
|
* @param {Boolean} [useWebGL=glEnable] - Use accelerated WebGL rendering
|
|
190
190
|
* @param {Boolean} [screenSpace=0] - If true the pos and size are in screen space
|
|
191
|
+
* @param {CanvasRenderingContext2D} [context] - Canvas 2D context to draw to
|
|
191
192
|
* @memberof Draw */
|
|
192
193
|
function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
|
|
193
|
-
angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace)
|
|
194
|
+
angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace, context)
|
|
194
195
|
{
|
|
196
|
+
ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
|
|
195
197
|
ASSERT(typeof tileInfo !== 'number' || !tileInfo); // prevent old style calls
|
|
196
198
|
// to fix old calls, replace with tile(tileIndex, tileSize)
|
|
197
199
|
|
|
198
200
|
showWatermark && ++drawCount;
|
|
199
201
|
const textureInfo = tileInfo && tileInfo.getTextureInfo();
|
|
200
|
-
if (
|
|
202
|
+
if (useWebGL)
|
|
201
203
|
{
|
|
202
204
|
if (screenSpace)
|
|
203
205
|
{
|
|
@@ -248,7 +250,7 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
|
|
|
248
250
|
context.fillStyle = color;
|
|
249
251
|
context.fillRect(-.5, -.5, 1, 1);
|
|
250
252
|
}
|
|
251
|
-
},
|
|
253
|
+
}, screenSpace, context);
|
|
252
254
|
}
|
|
253
255
|
}
|
|
254
256
|
|
|
@@ -259,28 +261,36 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
|
|
|
259
261
|
* @param {Number} [angle=0]
|
|
260
262
|
* @param {Boolean} [useWebGL=glEnable]
|
|
261
263
|
* @param {Boolean} [screenSpace=0]
|
|
264
|
+
* @param {CanvasRenderingContext2D} [context]
|
|
262
265
|
* @memberof Draw */
|
|
263
|
-
function drawRect(pos, size, color, angle, useWebGL, screenSpace)
|
|
264
|
-
{
|
|
266
|
+
function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
|
|
267
|
+
{
|
|
268
|
+
drawTile(pos, size, undefined, color, angle, 0, undefined, useWebGL, screenSpace, context);
|
|
269
|
+
}
|
|
265
270
|
|
|
266
271
|
/** Draw colored polygon using passed in points
|
|
267
272
|
* @param {Array} points - Array of Vector2 points
|
|
268
273
|
* @param {Color} [color=Color()]
|
|
269
274
|
* @param {Boolean} [useWebGL=glEnable]
|
|
270
275
|
* @param {Boolean} [screenSpace=0]
|
|
276
|
+
* @param {CanvasRenderingContext2D} [context]
|
|
271
277
|
* @memberof Draw */
|
|
272
|
-
function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace)
|
|
278
|
+
function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace, context)
|
|
273
279
|
{
|
|
280
|
+
ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
|
|
281
|
+
|
|
274
282
|
if (useWebGL)
|
|
275
283
|
glDrawPoints(screenSpace ? points.map(screenToWorld) : points, color.rgbaInt());
|
|
276
284
|
else
|
|
277
285
|
{
|
|
278
286
|
// draw using canvas
|
|
279
|
-
|
|
280
|
-
|
|
287
|
+
if (!context)
|
|
288
|
+
context = mainContext;
|
|
289
|
+
context.fillStyle = color;
|
|
290
|
+
context.beginPath();
|
|
281
291
|
for (const point of screenSpace ? points : points.map(worldToScreen))
|
|
282
|
-
|
|
283
|
-
|
|
292
|
+
context.lineTo(point.x, point.y);
|
|
293
|
+
context.fill();
|
|
284
294
|
}
|
|
285
295
|
}
|
|
286
296
|
|
|
@@ -291,12 +301,13 @@ function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace)
|
|
|
291
301
|
* @param {Color} [color=Color()]
|
|
292
302
|
* @param {Boolean} [useWebGL=glEnable]
|
|
293
303
|
* @param {Boolean} [screenSpace=0]
|
|
304
|
+
* @param {CanvasRenderingContext2D} [context]
|
|
294
305
|
* @memberof Draw */
|
|
295
|
-
function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace)
|
|
306
|
+
function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, context)
|
|
296
307
|
{
|
|
297
308
|
const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
|
|
298
309
|
const size = vec2(thickness, halfDelta.length()*2);
|
|
299
|
-
drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace);
|
|
310
|
+
drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace, context);
|
|
300
311
|
}
|
|
301
312
|
|
|
302
313
|
/** Draw directly to a 2d canvas context in world space
|
|
@@ -305,10 +316,10 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace)
|
|
|
305
316
|
* @param {Number} angle
|
|
306
317
|
* @param {Boolean} mirror
|
|
307
318
|
* @param {Function} drawFunction
|
|
308
|
-
* @param {CanvasRenderingContext2D} [context=mainContext]
|
|
309
319
|
* @param {Boolean} [screenSpace=0]
|
|
320
|
+
* @param {CanvasRenderingContext2D} [context=mainContext]
|
|
310
321
|
* @memberof Draw */
|
|
311
|
-
function drawCanvas2D(pos, size, angle, mirror, drawFunction, context
|
|
322
|
+
function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, context=mainContext)
|
|
312
323
|
{
|
|
313
324
|
if (!screenSpace)
|
|
314
325
|
{
|
|
@@ -327,13 +338,19 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
|
|
|
327
338
|
/** Enable normal or additive blend mode
|
|
328
339
|
* @param {Boolean} [additive=0]
|
|
329
340
|
* @param {Boolean} [useWebGL=glEnable]
|
|
341
|
+
* @param {CanvasRenderingContext2D} [context=mainContext]
|
|
330
342
|
* @memberof Draw */
|
|
331
|
-
function setBlendMode(additive, useWebGL=glEnable)
|
|
343
|
+
function setBlendMode(additive, useWebGL=glEnable, context)
|
|
332
344
|
{
|
|
333
|
-
|
|
334
|
-
|
|
345
|
+
ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
|
|
346
|
+
if (useWebGL)
|
|
347
|
+
glAdditive = additive;
|
|
335
348
|
else
|
|
336
|
-
|
|
349
|
+
{
|
|
350
|
+
if (!context)
|
|
351
|
+
context = mainContext;
|
|
352
|
+
context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
|
|
353
|
+
}
|
|
337
354
|
}
|
|
338
355
|
|
|
339
356
|
/** Draw text on overlay canvas in world space
|
package/src/engineExport.js
CHANGED
|
@@ -1,10 +1,79 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* LittleJS Module Export
|
|
3
|
-
* - Export engine as a module
|
|
3
|
+
* - Export engine as a module
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export {
|
|
7
|
-
|
|
7
|
+
|
|
8
|
+
// Engine
|
|
9
|
+
engineName,
|
|
10
|
+
engineVersion,
|
|
11
|
+
frameRate,
|
|
12
|
+
timeDelta,
|
|
13
|
+
engineObjects,
|
|
14
|
+
frame,
|
|
15
|
+
time,
|
|
16
|
+
timeReal,
|
|
17
|
+
paused,
|
|
18
|
+
setPaused,
|
|
19
|
+
engineInit,
|
|
20
|
+
engineObjectsUpdate,
|
|
21
|
+
engineObjectsDestroy,
|
|
22
|
+
engineObjectsCallback,
|
|
23
|
+
|
|
24
|
+
// Globals
|
|
25
|
+
debug,
|
|
26
|
+
showWatermark,
|
|
27
|
+
|
|
28
|
+
// Debug
|
|
29
|
+
ASSERT,
|
|
30
|
+
debugRect,
|
|
31
|
+
debugCircle,
|
|
32
|
+
debugPoint,
|
|
33
|
+
debugLine,
|
|
34
|
+
debugAABB,
|
|
35
|
+
debugText,
|
|
36
|
+
debugClear,
|
|
37
|
+
debugSaveCanvas,
|
|
38
|
+
|
|
39
|
+
// Settings
|
|
40
|
+
cameraPos,
|
|
41
|
+
cameraScale,
|
|
42
|
+
canvasMaxSize,
|
|
43
|
+
canvasFixedSize,
|
|
44
|
+
canvasPixelated,
|
|
45
|
+
fontDefault,
|
|
46
|
+
tileSizeDefault,
|
|
47
|
+
tileFixBleedScale,
|
|
48
|
+
enablePhysicsSolver,
|
|
49
|
+
objectDefaultMass,
|
|
50
|
+
objectDefaultDamping,
|
|
51
|
+
objectDefaultAngleDamping,
|
|
52
|
+
objectDefaultElasticity,
|
|
53
|
+
objectDefaultFriction,
|
|
54
|
+
objectMaxSpeed,
|
|
55
|
+
gravity,
|
|
56
|
+
particleEmitRateScale,
|
|
57
|
+
glEnable,
|
|
58
|
+
glOverlay,
|
|
59
|
+
gamepadsEnable,
|
|
60
|
+
gamepadDirectionEmulateStick,
|
|
61
|
+
inputWASDEmulateDirection,
|
|
62
|
+
touchGamepadEnable,
|
|
63
|
+
touchGamepadAnalog,
|
|
64
|
+
touchGamepadSize,
|
|
65
|
+
touchGamepadAlpha,
|
|
66
|
+
vibrateEnable,
|
|
67
|
+
soundEnable,
|
|
68
|
+
soundVolume,
|
|
69
|
+
soundDefaultRange,
|
|
70
|
+
soundDefaultTaper,
|
|
71
|
+
medalDisplayTime,
|
|
72
|
+
medalDisplaySlideTime,
|
|
73
|
+
medalDisplaySize,
|
|
74
|
+
medalDisplayIconSize,
|
|
75
|
+
|
|
76
|
+
// Setters for globals
|
|
8
77
|
setCameraPos,
|
|
9
78
|
setCameraScale,
|
|
10
79
|
setCanvasMaxSize,
|
|
@@ -44,58 +113,6 @@ export {
|
|
|
44
113
|
setShowWatermark,
|
|
45
114
|
setDebugKey,
|
|
46
115
|
|
|
47
|
-
// Settings
|
|
48
|
-
canvasMaxSize,
|
|
49
|
-
canvasFixedSize,
|
|
50
|
-
canvasPixelated,
|
|
51
|
-
fontDefault,
|
|
52
|
-
tileSizeDefault,
|
|
53
|
-
tileFixBleedScale,
|
|
54
|
-
enablePhysicsSolver,
|
|
55
|
-
objectDefaultMass,
|
|
56
|
-
objectDefaultDamping,
|
|
57
|
-
objectDefaultAngleDamping,
|
|
58
|
-
objectDefaultElasticity,
|
|
59
|
-
objectDefaultFriction,
|
|
60
|
-
objectMaxSpeed,
|
|
61
|
-
gravity,
|
|
62
|
-
particleEmitRateScale,
|
|
63
|
-
cameraPos,
|
|
64
|
-
cameraScale,
|
|
65
|
-
glEnable,
|
|
66
|
-
glOverlay,
|
|
67
|
-
gamepadsEnable,
|
|
68
|
-
gamepadDirectionEmulateStick,
|
|
69
|
-
inputWASDEmulateDirection,
|
|
70
|
-
touchGamepadEnable,
|
|
71
|
-
touchGamepadAnalog,
|
|
72
|
-
touchGamepadSize,
|
|
73
|
-
touchGamepadAlpha,
|
|
74
|
-
vibrateEnable,
|
|
75
|
-
soundEnable,
|
|
76
|
-
soundVolume,
|
|
77
|
-
soundDefaultRange,
|
|
78
|
-
soundDefaultTaper,
|
|
79
|
-
medalDisplayTime,
|
|
80
|
-
medalDisplaySlideTime,
|
|
81
|
-
medalDisplaySize,
|
|
82
|
-
medalDisplayIconSize,
|
|
83
|
-
|
|
84
|
-
// Globals
|
|
85
|
-
debug,
|
|
86
|
-
showWatermark,
|
|
87
|
-
|
|
88
|
-
// Debug
|
|
89
|
-
ASSERT,
|
|
90
|
-
debugRect,
|
|
91
|
-
debugCircle,
|
|
92
|
-
debugPoint,
|
|
93
|
-
debugLine,
|
|
94
|
-
debugAABB,
|
|
95
|
-
debugText,
|
|
96
|
-
debugClear,
|
|
97
|
-
debugSaveCanvas,
|
|
98
|
-
|
|
99
116
|
// Utilities
|
|
100
117
|
PI,
|
|
101
118
|
abs,
|
|
@@ -133,9 +150,6 @@ export {
|
|
|
133
150
|
rgb,
|
|
134
151
|
hsl,
|
|
135
152
|
|
|
136
|
-
// Base
|
|
137
|
-
EngineObject,
|
|
138
|
-
|
|
139
153
|
// Draw
|
|
140
154
|
textureInfos,
|
|
141
155
|
tile,
|
|
@@ -160,6 +174,15 @@ export {
|
|
|
160
174
|
isFullscreen,
|
|
161
175
|
toggleFullscreen,
|
|
162
176
|
|
|
177
|
+
// WebGL
|
|
178
|
+
glCanvas,
|
|
179
|
+
glContext,
|
|
180
|
+
glSetTexture,
|
|
181
|
+
glCompileShader,
|
|
182
|
+
glCreateProgram,
|
|
183
|
+
glCreateTexture,
|
|
184
|
+
glInitPostProcess,
|
|
185
|
+
|
|
163
186
|
// Input
|
|
164
187
|
keyIsDown,
|
|
165
188
|
keyWasPressed,
|
|
@@ -194,6 +217,9 @@ export {
|
|
|
194
217
|
playSamples,
|
|
195
218
|
zzfx,
|
|
196
219
|
|
|
220
|
+
// Base Object
|
|
221
|
+
EngineObject,
|
|
222
|
+
|
|
197
223
|
// Tiles
|
|
198
224
|
tileCollision,
|
|
199
225
|
tileCollisionSize,
|
|
@@ -216,30 +242,4 @@ export {
|
|
|
216
242
|
newgroundsInit,
|
|
217
243
|
Medal,
|
|
218
244
|
Newgrounds,
|
|
219
|
-
|
|
220
|
-
// WebGL
|
|
221
|
-
glCanvas,
|
|
222
|
-
glContext,
|
|
223
|
-
glSetBlendMode,
|
|
224
|
-
glSetTexture,
|
|
225
|
-
glCompileShader,
|
|
226
|
-
glCreateProgram,
|
|
227
|
-
glCreateTexture,
|
|
228
|
-
glInitPostProcess,
|
|
229
|
-
|
|
230
|
-
// Engine
|
|
231
|
-
engineName,
|
|
232
|
-
engineVersion,
|
|
233
|
-
frameRate,
|
|
234
|
-
timeDelta,
|
|
235
|
-
engineObjects,
|
|
236
|
-
frame,
|
|
237
|
-
time,
|
|
238
|
-
timeReal,
|
|
239
|
-
paused,
|
|
240
|
-
setPaused,
|
|
241
|
-
engineInit,
|
|
242
|
-
engineObjectsUpdate,
|
|
243
|
-
engineObjectsDestroy,
|
|
244
|
-
engineObjectsCallback,
|
|
245
245
|
};
|
package/src/engineObject.js
CHANGED
|
@@ -44,6 +44,7 @@ class EngineObject
|
|
|
44
44
|
// set passed in params
|
|
45
45
|
ASSERT(isVector2(pos) && isVector2(size)); // ensure pos and size are vec2s
|
|
46
46
|
ASSERT(typeof tileInfo !== 'number' || !tileInfo); // prevent old style calls
|
|
47
|
+
ASSERT(!(renderOrder instanceof Color)); // prevent old style calls
|
|
47
48
|
// to fix old calls, replace with tile(tileIndex, tileSize)
|
|
48
49
|
|
|
49
50
|
/** @property {Vector2} - World space position of the object */
|
package/src/engineWebGL.js
CHANGED
|
@@ -42,21 +42,20 @@ function glInit()
|
|
|
42
42
|
'#version 300 es\n' + // specify GLSL ES version
|
|
43
43
|
'precision highp float;'+ // use highp for better accuracy
|
|
44
44
|
'uniform mat4 m;'+ // transform matrix
|
|
45
|
-
'in
|
|
46
|
-
'in vec4 c,a;'+ // color, additiveColor
|
|
45
|
+
'in vec4 p,c,a;'+ // position, uv, color, additiveColor
|
|
47
46
|
'out vec4 v,d,e;'+ // return uv, color, additiveColor
|
|
48
47
|
'void main(){'+ // shader entry point
|
|
49
|
-
'gl_Position=m*vec4(p,1,1);'+ // transform position
|
|
50
|
-
'v=
|
|
48
|
+
'gl_Position=m*vec4(p.xy,1,1);'+ // transform position
|
|
49
|
+
'v=p;d=c;e=a;'+ // pass stuff to fragment shader
|
|
51
50
|
'}' // end of shader
|
|
52
51
|
,
|
|
53
52
|
'#version 300 es\n' + // specify GLSL ES version
|
|
54
53
|
'precision highp float;'+ // use highp for better accuracy
|
|
55
|
-
'in vec4 v,d,e;'+ // uv, color, additiveColor
|
|
54
|
+
'in vec4 v,d,e;'+ // position, uv, color, additiveColor
|
|
56
55
|
'uniform sampler2D s;'+ // texture
|
|
57
56
|
'out vec4 c;'+ // out color
|
|
58
57
|
'void main(){'+ // shader entry point
|
|
59
|
-
'c=texture(s,v.
|
|
58
|
+
'c=texture(s,v.zw)*d+e;'+ // modulate texture by color plus additive
|
|
60
59
|
'}' // end of shader
|
|
61
60
|
);
|
|
62
61
|
|
|
@@ -81,7 +80,7 @@ function glPreRender()
|
|
|
81
80
|
glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = textureInfos[0].glTexture);
|
|
82
81
|
glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
|
|
83
82
|
glContext.bufferData(gl_ARRAY_BUFFER, gl_VERTEX_BUFFER_SIZE, gl_DYNAMIC_DRAW);
|
|
84
|
-
|
|
83
|
+
glAdditive = 0;
|
|
85
84
|
|
|
86
85
|
// set vertex attributes
|
|
87
86
|
let offset = 0;
|
|
@@ -92,33 +91,25 @@ function glPreRender()
|
|
|
92
91
|
glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
|
|
93
92
|
offset += size*typeSize;
|
|
94
93
|
}
|
|
95
|
-
initVertexAttribArray('p', gl_FLOAT, 4,
|
|
96
|
-
initVertexAttribArray('t', gl_FLOAT, 4, 2); // texture coords
|
|
94
|
+
initVertexAttribArray('p', gl_FLOAT, 4, 4); // position & texture coords
|
|
97
95
|
initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
|
|
98
96
|
initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
|
|
99
97
|
|
|
100
98
|
// build the transform matrix
|
|
101
99
|
const sx = 2 * cameraScale / mainCanvas.width;
|
|
102
100
|
const sy = 2 * cameraScale / mainCanvas.height;
|
|
101
|
+
const cx = -1 - sx*cameraPos.x;
|
|
102
|
+
const cy = -1 - sy*cameraPos.y;
|
|
103
103
|
glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), 0,
|
|
104
104
|
new Float32Array([
|
|
105
|
-
sx,
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
105
|
+
sx, 0, 0, 0,
|
|
106
|
+
0, sy, 0, 0,
|
|
107
|
+
1, 1, -1, 1,
|
|
108
|
+
cx, cy, 0, 0
|
|
109
109
|
])
|
|
110
110
|
);
|
|
111
111
|
}
|
|
112
112
|
|
|
113
|
-
/** Set the WebGl blend mode, normally you should call setBlendMode instead
|
|
114
|
-
* @param {Boolean} [additive=0]
|
|
115
|
-
* @memberof WebGL */
|
|
116
|
-
function glSetBlendMode(additive=0)
|
|
117
|
-
{
|
|
118
|
-
// setup blending
|
|
119
|
-
glAdditive = additive;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
113
|
/** Set the WebGl texture, called automatically if using multiple textures
|
|
123
114
|
* - This may also flush the gl buffer resulting in more draw calls and worse performance
|
|
124
115
|
* @param {WebGLTexture} texture
|
|
@@ -354,8 +345,11 @@ function glRenderPostProcess()
|
|
|
354
345
|
glFlush(); // clear out the buffer
|
|
355
346
|
mainContext.drawImage(glCanvas, 0, 0); // copy to the main canvas
|
|
356
347
|
}
|
|
357
|
-
else
|
|
348
|
+
else
|
|
349
|
+
{
|
|
350
|
+
// set the viewport
|
|
358
351
|
glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
|
|
352
|
+
}
|
|
359
353
|
|
|
360
354
|
if (glPostIncludeOverlay)
|
|
361
355
|
{
|