littlejsengine 1.11.4 → 1.11.6
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 +4 -0
- package/dist/littlejs.esm.js +31 -10
- package/dist/littlejs.esm.min.js +1 -1
- package/dist/littlejs.js +31 -10
- package/dist/littlejs.min.js +1 -1
- package/dist/littlejs.release.js +30 -10
- package/examples/box2d/index.html +5 -5
- package/examples/breakout/game.js +1 -1
- package/examples/breakout/gameObjects.js +27 -28
- package/examples/breakout/index.html +4 -4
- package/examples/breakoutTutorial/README.md +1 -1
- package/examples/breakoutTutorial/game.js +1 -1
- package/examples/breakoutTutorial/index.html +2 -2
- package/examples/htmlMenu/index.html +2 -2
- package/examples/module/index.html +1 -1
- package/examples/particles/index.html +1 -1
- package/examples/platformer/index.html +8 -8
- package/examples/puzzle/game.js +1 -1
- package/examples/puzzle/index.html +2 -2
- package/examples/starter/game.js +2 -2
- package/examples/starter/index.html +13 -13
- package/examples/stress/index.html +1 -1
- package/examples/uiSystem/index.html +3 -3
- package/package.json +1 -1
- package/plugins/postProcess.js +8 -8
- package/shortExamples/base.html +39 -0
- package/shortExamples/code/animation.js +18 -0
- package/shortExamples/code/blending.js +16 -0
- package/shortExamples/code/clock.js +21 -0
- package/shortExamples/code/colors.js +25 -0
- package/shortExamples/code/helloWorld.js +8 -0
- package/shortExamples/code/particles.js +28 -0
- package/shortExamples/code/playSound.js +34 -0
- package/shortExamples/code/pong.js +40 -0
- package/shortExamples/code/shapes.js +24 -0
- package/shortExamples/code/spriteAtlas.js +34 -0
- package/shortExamples/code/systemFont.js +16 -0
- package/shortExamples/code/texture.js +12 -0
- package/shortExamples/code/tileLayer.js +50 -0
- package/shortExamples/code/timers.js +36 -0
- package/shortExamples/index.html +246 -0
- package/shortExamples/tiles.png +0 -0
- package/src/engine.js +13 -1
- package/src/engineBuild.js +2 -1
- package/src/engineDebug.js +1 -0
- package/src/engineDraw.js +4 -1
- package/src/engineObject.js +4 -4
- package/src/engineParticles.js +1 -1
- package/src/engineTileLayer.js +4 -0
- package/src/engineUtilities.js +2 -2
package/examples/starter/game.js
CHANGED
|
@@ -70,8 +70,8 @@ function gameInit()
|
|
|
70
70
|
tile(0, 16), // tileIndex, tileSize
|
|
71
71
|
hsl(1,1,1), hsl(0,0,0), // colorStartA, colorStartB
|
|
72
72
|
hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
|
|
73
|
-
2, .2, .2, .1, .05,
|
|
74
|
-
.99, 1, 1, PI,
|
|
73
|
+
2, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
|
|
74
|
+
.99, 1, 1, PI, // damping, angleDamping, gravityScale, cone
|
|
75
75
|
.05, .5, true, true // fadeRate, randomness, collide, additive
|
|
76
76
|
);
|
|
77
77
|
particleEmitter.elasticity = .3; // bounce when it collides
|
|
@@ -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?1116></script>
|
|
11
|
+
<script src=../../src/engineUtilities.js?1116></script>
|
|
12
|
+
<script src=../../src/engineSettings.js?1116></script>
|
|
13
|
+
<script src=../../src/engineObject.js?1116></script>
|
|
14
|
+
<script src=../../src/engineDraw.js?1116></script>
|
|
15
|
+
<script src=../../src/engineInput.js?1116></script>
|
|
16
|
+
<script src=../../src/engineAudio.js?1116></script>
|
|
17
|
+
<script src=../../src/engineTileLayer.js?1116></script>
|
|
18
|
+
<script src=../../src/engineParticles.js?1116></script>
|
|
19
|
+
<script src=../../src/engineMedals.js?1116></script>
|
|
20
|
+
<script src=../../src/engineWebGL.js?1116></script>
|
|
21
|
+
<script src=../../src/engine.js?1116></script>
|
|
22
22
|
|
|
23
23
|
<!-- Add your game scripts here -->
|
|
24
|
-
<script src=game.js?
|
|
24
|
+
<script src=game.js?1116></script>
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
</head><body>
|
|
8
8
|
|
|
9
9
|
<!-- LittleJS Engine -->
|
|
10
|
-
<script src=../../dist/littlejs.js?
|
|
10
|
+
<script src=../../dist/littlejs.js?1116></script>
|
|
11
11
|
|
|
12
12
|
<!-- Add your game scripts here -->
|
|
13
|
-
<script src=../../plugins/uiSystem.js?
|
|
14
|
-
<script src=game.js?
|
|
13
|
+
<script src=../../plugins/uiSystem.js?1116></script>
|
|
14
|
+
<script src=game.js?1116></script>
|
package/package.json
CHANGED
package/plugins/postProcess.js
CHANGED
|
@@ -76,26 +76,26 @@ function initPostProcess(shaderCode, includeOverlay=false)
|
|
|
76
76
|
|
|
77
77
|
// setup shader program to draw one triangle
|
|
78
78
|
glContext.useProgram(glPostShader);
|
|
79
|
-
glContext.bindBuffer(
|
|
80
|
-
glContext.pixelStorei(
|
|
81
|
-
glContext.disable(
|
|
79
|
+
glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
|
|
80
|
+
glContext.pixelStorei(glContext.UNPACK_FLIP_Y_WEBGL, 1);
|
|
81
|
+
glContext.disable(glContext.BLEND);
|
|
82
82
|
|
|
83
83
|
// set textures, pass in the 2d canvas and gl canvas in separate texture channels
|
|
84
|
-
glContext.activeTexture(
|
|
85
|
-
glContext.bindTexture(
|
|
86
|
-
glContext.texImage2D(
|
|
84
|
+
glContext.activeTexture(glContext.TEXTURE0);
|
|
85
|
+
glContext.bindTexture(glContext.TEXTURE_2D, glPostTexture);
|
|
86
|
+
glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, mainCanvas);
|
|
87
87
|
|
|
88
88
|
// set vertex position attribute
|
|
89
89
|
const vertexByteStride = 8;
|
|
90
90
|
const pLocation = glContext.getAttribLocation(glPostShader, 'p');
|
|
91
91
|
glContext.enableVertexAttribArray(pLocation);
|
|
92
|
-
glContext.vertexAttribPointer(pLocation, 2,
|
|
92
|
+
glContext.vertexAttribPointer(pLocation, 2, glContext.FLOAT, false, vertexByteStride, 0);
|
|
93
93
|
|
|
94
94
|
// set uniforms and draw
|
|
95
95
|
const uniformLocation = (name)=>glContext.getUniformLocation(glPostShader, name);
|
|
96
96
|
glContext.uniform1i(uniformLocation('iChannel0'), 0);
|
|
97
97
|
glContext.uniform1f(uniformLocation('iTime'), time);
|
|
98
98
|
glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
|
|
99
|
-
glContext.drawArrays(
|
|
99
|
+
glContext.drawArrays(glContext.TRIANGLE_STRIP, 0, 4);
|
|
100
100
|
}
|
|
101
101
|
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<!DOCTYPE html><head><meta charset=utf-8></head><body>
|
|
2
|
+
|
|
3
|
+
<!-- LittleJS Engine -->
|
|
4
|
+
<script src=../src/engineDebug.js?1116></script>
|
|
5
|
+
<script src=../src/engineUtilities.js?1116></script>
|
|
6
|
+
<script src=../src/engineSettings.js?1116></script>
|
|
7
|
+
<script src=../src/engineObject.js?1116></script>
|
|
8
|
+
<script src=../src/engineDraw.js?1116></script>
|
|
9
|
+
<script src=../src/engineInput.js?1116></script>
|
|
10
|
+
<script src=../src/engineAudio.js?1116></script>
|
|
11
|
+
<script src=../src/engineTileLayer.js?1116></script>
|
|
12
|
+
<script src=../src/engineParticles.js?1116></script>
|
|
13
|
+
<script src=../src/engineMedals.js?1116></script>
|
|
14
|
+
<script src=../src/engineWebGL.js?1116></script>
|
|
15
|
+
<script src=../src/engine.js?1116></script>
|
|
16
|
+
<script>
|
|
17
|
+
|
|
18
|
+
'use strict';
|
|
19
|
+
|
|
20
|
+
// use fixed size canvas for examples
|
|
21
|
+
canvasFixedSize = vec2(960, 540);
|
|
22
|
+
|
|
23
|
+
// fix bleeding from neighboring pixels
|
|
24
|
+
tileFixBleedScale = .5;
|
|
25
|
+
|
|
26
|
+
// allow improved scaling
|
|
27
|
+
canvasPixelated = false;
|
|
28
|
+
|
|
29
|
+
// disable watermark
|
|
30
|
+
showWatermark = false;
|
|
31
|
+
|
|
32
|
+
// these functions can be overridden for each example
|
|
33
|
+
function gameInit() {}
|
|
34
|
+
function gameUpdate() {}
|
|
35
|
+
function gameUpdatePost() {}
|
|
36
|
+
function gameRender() {}
|
|
37
|
+
function gameRenderPost() {}
|
|
38
|
+
|
|
39
|
+
</script>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
function gameRender()
|
|
2
|
+
{
|
|
3
|
+
drawRect(vec2(0,0), vec2(100), GRAY); // draw background
|
|
4
|
+
|
|
5
|
+
{
|
|
6
|
+
// animate using multiple frames
|
|
7
|
+
const pos = vec2(-5, 2*abs(Math.sin(time*2*PI)));
|
|
8
|
+
const frame = (time*4)%2|0;
|
|
9
|
+
drawTile(pos, vec2(7), tile(3).frame(frame), RED);
|
|
10
|
+
}
|
|
11
|
+
{
|
|
12
|
+
// animate with stretch and squash
|
|
13
|
+
const s = Math.sin(time*9)*.5;
|
|
14
|
+
const size = vec2(7-s,7+s);
|
|
15
|
+
const pos = vec2(5,size.y-7);
|
|
16
|
+
drawTile(pos, size, tile(5), GREEN);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
function gameRender()
|
|
2
|
+
{
|
|
3
|
+
const circleTile = tile(2, 128);
|
|
4
|
+
|
|
5
|
+
// additive blend
|
|
6
|
+
setBlendMode(1);
|
|
7
|
+
drawTile(vec2(-4,-2), vec2(7), circleTile, rgb(1,0,0));
|
|
8
|
+
drawTile(vec2(-6, 2), vec2(7), circleTile, rgb(0,1,0));
|
|
9
|
+
drawTile(vec2(-8,-2), vec2(7), circleTile, rgb(0,0,1));
|
|
10
|
+
|
|
11
|
+
// alpha blend
|
|
12
|
+
setBlendMode(0);
|
|
13
|
+
drawTile(vec2(4,-2), vec2(7), circleTile, rgb(1,0,0,.5));
|
|
14
|
+
drawTile(vec2(6, 2), vec2(7), circleTile, rgb(0,1,0,.5));
|
|
15
|
+
drawTile(vec2(8,-2), vec2(7), circleTile, rgb(0,0,1,.5));
|
|
16
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
function gameRender()
|
|
2
|
+
{
|
|
3
|
+
// draw background
|
|
4
|
+
for(let i=12; i--;)
|
|
5
|
+
{
|
|
6
|
+
const a = i/6*PI;
|
|
7
|
+
const pos = vec2(0,7).rotate(a);
|
|
8
|
+
drawRect(pos, vec2(.5,1), hsl(i/12,1,.5), a);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// get current time
|
|
12
|
+
const d = Date().slice(16,24);
|
|
13
|
+
const s = d.slice(6,8)|0;
|
|
14
|
+
const m = d.slice(3,5)|0;
|
|
15
|
+
const h = (d.slice(0,2)|0) + m/60;
|
|
16
|
+
|
|
17
|
+
// draw clock hands
|
|
18
|
+
drawLine(vec2(0,0), vec2(0,4).rotate(h/12*2*PI), 1);
|
|
19
|
+
drawLine(vec2(0,0), vec2(0,6).rotate(m/60*2*PI), .4);
|
|
20
|
+
drawLine(vec2(0,0), vec2(0,8).rotate(s/60*2*PI), .1);
|
|
21
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
function gameRender()
|
|
2
|
+
{
|
|
3
|
+
// color constants
|
|
4
|
+
drawRect(vec2(-8, 5), vec2(3), RED);
|
|
5
|
+
drawRect(vec2(-4, 5), vec2(3), YELLOW);
|
|
6
|
+
drawRect(vec2(-0, 5), vec2(3), GREEN);
|
|
7
|
+
drawRect(vec2( 4, 5), vec2(3), BLUE);
|
|
8
|
+
drawRect(vec2( 8, 5), vec2(3), WHITE);
|
|
9
|
+
|
|
10
|
+
// rgb and hsl color
|
|
11
|
+
drawRect(vec2(-8, 0), vec2(3), new Color(1,0,0));
|
|
12
|
+
drawRect(vec2(-4, 0), vec2(3), rgb(0,1,1));
|
|
13
|
+
drawRect(vec2(-0, 0), vec2(3), hsl(0,1,.5));
|
|
14
|
+
drawRect(vec2( 4, 0), vec2(3), hsl(.6,.5,.5));
|
|
15
|
+
drawRect(vec2( 8, 0), vec2(3), hsl(0,0,1));
|
|
16
|
+
|
|
17
|
+
// color lerpping
|
|
18
|
+
for(let i=5; i--;)
|
|
19
|
+
{
|
|
20
|
+
const color1 = RED;
|
|
21
|
+
const color2 = YELLOW;
|
|
22
|
+
const color = color1.lerp(color2, i/4);
|
|
23
|
+
drawRect(vec2(-8+i*4, -5), vec2(3), color);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
function gameInit()
|
|
2
|
+
{
|
|
3
|
+
gravity = -.01; // set default gravity
|
|
4
|
+
|
|
5
|
+
// fire
|
|
6
|
+
new ParticleEmitter(
|
|
7
|
+
vec2(-5,-2), 0, // pos, angle
|
|
8
|
+
2, 0, 200, PI, // emitSize, emitTime, emitRate, emitCone
|
|
9
|
+
tile(0), // tileInfo
|
|
10
|
+
rgb(1,.5,.1), rgb(1,.1,.1), // colorStartA, colorStartB
|
|
11
|
+
rgb(1,.5,.1,0), rgb(1,.1,.1,0), // colorEndA, colorEndB
|
|
12
|
+
.7, 2, 0, .2, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
|
|
13
|
+
.9, 1, -1, PI, .05, // damp, angleDamp, gravity, particleCone, fade
|
|
14
|
+
.5, 0, 1, 0, 1e9 // randomness, collide, additive, colorLinear, renderOrder
|
|
15
|
+
);
|
|
16
|
+
|
|
17
|
+
// smoke
|
|
18
|
+
new ParticleEmitter(
|
|
19
|
+
vec2(5,-2), 0, // pos, angle
|
|
20
|
+
3, 0, 100, PI, // emitSize, emitTime, emitRate, emitCone
|
|
21
|
+
tile(0), // tileInfo
|
|
22
|
+
hsl(0,0,0,.5), hsl(0,0,1,.5), // colorStartA, colorStartB
|
|
23
|
+
hsl(0,0,0,0), hsl(0,0,1,0), // colorEndA, colorEndB
|
|
24
|
+
1, 1, 5, .2, .01, // time, sizeStart, sizeEnd, speed, angleSpeed
|
|
25
|
+
.85, 1, -1, PI, .3, // damp, angleDamp, gravity, particleCone, fade
|
|
26
|
+
.5, 0, 0, 1, 1e8 // randomness, collide, additive, colorLinear, renderOrder
|
|
27
|
+
);
|
|
28
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
class SoundButton extends EngineObject
|
|
2
|
+
{
|
|
3
|
+
constructor(pos, icon, sound)
|
|
4
|
+
{
|
|
5
|
+
super(pos, vec2(5,4));
|
|
6
|
+
this.icon = icon;
|
|
7
|
+
this.sound = sound;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
update()
|
|
11
|
+
{
|
|
12
|
+
if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
|
|
13
|
+
this.sound.play(this.pos);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
render()
|
|
17
|
+
{
|
|
18
|
+
drawRect(this.pos, this.size, hsl(0,0,.8));
|
|
19
|
+
drawTextOverlay(this.icon, this.pos, 3);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function gameInit()
|
|
24
|
+
{
|
|
25
|
+
new SoundButton(vec2(-6, 5),'💰', new Sound([,,1675,,.06,.24,1,1.82,,,837,.06]));
|
|
26
|
+
new SoundButton(vec2( 0, 5),'🥊', new Sound([,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17]));
|
|
27
|
+
new SoundButton(vec2( 6, 5),'✨', new Sound([,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04]));
|
|
28
|
+
new SoundButton(vec2(-6, 0),'🐁', new Sound([,.2,1e3,.02,,.01,2,,18,,475,.01,.01]));
|
|
29
|
+
new SoundButton(vec2( 0, 0),'🎹', new Sound([1.5,.5,270,,.1,,1,1.5,,,,,,,,.1,.01]));
|
|
30
|
+
new SoundButton(vec2( 6, 0),'🏌️', new Sound([,,150,.05,,.05,,1.3,,,,,,3]));
|
|
31
|
+
new SoundButton(vec2(-6,-5),'🌊', new Sound([,.2,40,.5,,1.5,,11,,,,,,199]));
|
|
32
|
+
new SoundButton(vec2( 0,-5),'🛰️', new Sound([,.5,847,.02,.3,.9,1,1.67,,,-294,.04,.13,,,,.1]));
|
|
33
|
+
new SoundButton(vec2( 6,-5),'⚡', new Sound([,,471,,.09,.47,4,1.06,-6.7,,,,,.9,61,.1,,.82,.1]));
|
|
34
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
// globals objects
|
|
2
|
+
let paddle, ball;
|
|
3
|
+
|
|
4
|
+
class PhysicsObject extends EngineObject
|
|
5
|
+
{
|
|
6
|
+
constructor(pos, size)
|
|
7
|
+
{
|
|
8
|
+
super(pos, size); // set object position and size
|
|
9
|
+
this.setCollision(); // make object collide
|
|
10
|
+
this.mass = 0; // make object have static physics
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
function gameInit()
|
|
15
|
+
{
|
|
16
|
+
// setup level
|
|
17
|
+
const levelSize = vec2(38, 21); // size of play area
|
|
18
|
+
cameraPos = levelSize.scale(.5); // center camera in level
|
|
19
|
+
canvasFixedSize = vec2(1280, 720); // use a 720p fixed size canvas
|
|
20
|
+
|
|
21
|
+
// create objects
|
|
22
|
+
paddle = new PhysicsObject(vec2(0,1), vec2(6,1)); // create player's paddle
|
|
23
|
+
new PhysicsObject(vec2(-.5,levelSize.y/2), vec2(1,100)) // top wall
|
|
24
|
+
new PhysicsObject(vec2(levelSize.x+.5,levelSize.y/2), vec2(1,100)) // left wall
|
|
25
|
+
new PhysicsObject(vec2(levelSize.x/2,levelSize.y+.5), vec2(100,1)) // right wall
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function gameUpdate()
|
|
29
|
+
{
|
|
30
|
+
if (!ball || ball.pos.y < -1) // spawn ball
|
|
31
|
+
{
|
|
32
|
+
ball && ball.destroy(); // destroy old ball
|
|
33
|
+
ball = new PhysicsObject(cameraPos); // create a ball
|
|
34
|
+
ball.velocity = vec2(.2); // give ball some movement
|
|
35
|
+
ball.elasticity = 1; // make ball bounce
|
|
36
|
+
ball.mass = 1; // make ball have dynamic physics
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
paddle.pos.x = mousePos.x; // move paddle to mouse
|
|
40
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
function gameRender()
|
|
2
|
+
{
|
|
3
|
+
// polygon shapes
|
|
4
|
+
for(let j=3; j<7; ++j)
|
|
5
|
+
{
|
|
6
|
+
let points = [];
|
|
7
|
+
for(let i=0; i<j; ++i)
|
|
8
|
+
{
|
|
9
|
+
let angle = i * Math.PI * 2 / j;
|
|
10
|
+
points.push(vec2(j*4-18,0).add(vec2(Math.sin(angle), Math.cos(angle))));
|
|
11
|
+
}
|
|
12
|
+
drawPoly(points, hsl(j/4,1,.5)); // draw a star
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// circles and ellipses
|
|
16
|
+
drawCircle(vec2(0,5), 1, 0, hsl(.15,1,.5));
|
|
17
|
+
drawEllipse(vec2(-5,5), 2, 1, 0, hsl(0,1,.5));
|
|
18
|
+
drawEllipse(vec2(5,5), 1, .5, 0, hsl(.55,1,.5));
|
|
19
|
+
|
|
20
|
+
// rects and lines
|
|
21
|
+
drawRect(vec2(0,-5), vec2(13,2), hsl(.6,1,.5));
|
|
22
|
+
drawLine(vec2(-5,-7), vec2(5,-3), 1, hsl(0,0,1));
|
|
23
|
+
drawLine(vec2(-5,-3), vec2(5,-7), .2, hsl(1,1,.5));
|
|
24
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
let spriteAtlas;
|
|
2
|
+
|
|
3
|
+
function gameInit()
|
|
4
|
+
{
|
|
5
|
+
// create a table of all sprites
|
|
6
|
+
const gameTile = (i, size=16)=> tile(i, size);
|
|
7
|
+
spriteAtlas =
|
|
8
|
+
{
|
|
9
|
+
circle: gameTile(0),
|
|
10
|
+
crate: gameTile(1),
|
|
11
|
+
icon: gameTile(2),
|
|
12
|
+
circleBig: gameTile(2, 128),
|
|
13
|
+
iconBig: gameTile(3, 128),
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
function gameRender()
|
|
18
|
+
{
|
|
19
|
+
drawRect(vec2(0,0), vec2(100), GRAY); // draw background
|
|
20
|
+
|
|
21
|
+
// draw a sprite from the atlas
|
|
22
|
+
let pos = vec2(Math.sin(time)*5,-3);// world position to draw
|
|
23
|
+
let angle = 0; // world space angle to draw the tile
|
|
24
|
+
let size = vec2(9); // world size of the tile
|
|
25
|
+
let mirror = 0; // should tile be mirrored?
|
|
26
|
+
let color = hsl(0,0,1); // color to multiply the tile by
|
|
27
|
+
let additiveColor = hsl(0,0,0,0); // color to add to
|
|
28
|
+
drawTile(pos, size, spriteAtlas.iconBig, color, angle, mirror, additiveColor);
|
|
29
|
+
|
|
30
|
+
// draw more sprites from the atlas
|
|
31
|
+
drawTile(vec2(-7,4), vec2(5), spriteAtlas.crate);
|
|
32
|
+
drawTile(vec2( 0,4), vec2(5), spriteAtlas.circle);
|
|
33
|
+
drawTile(vec2( 7,4), vec2(5), spriteAtlas.circleBig);
|
|
34
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
function gameRender()
|
|
2
|
+
{
|
|
3
|
+
// draw text with built in font image system font
|
|
4
|
+
const font = new FontImage;
|
|
5
|
+
font.drawText('System Font Test', cameraPos.add(vec2(0,3)), .2, true);
|
|
6
|
+
|
|
7
|
+
// show every character in the system font
|
|
8
|
+
let s = '';
|
|
9
|
+
for(let i=32; i<128; ++i)
|
|
10
|
+
{
|
|
11
|
+
if (i%32 == 0)
|
|
12
|
+
s += '\n';
|
|
13
|
+
s += String.fromCharCode(i);
|
|
14
|
+
}
|
|
15
|
+
font.drawText(s, cameraPos, .1, true);
|
|
16
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
function gameRender()
|
|
2
|
+
{
|
|
3
|
+
// show the full texture
|
|
4
|
+
let pos = vec2(0,0); // world position to draw
|
|
5
|
+
let size = vec2(15); // world size of the tile
|
|
6
|
+
let color = hsl(0,0,1); // color to multiply the tile by
|
|
7
|
+
let tilePos = vec2(0,0); // top left corner of tile in pixels
|
|
8
|
+
let tileSize = vec2(256); // size of tile in pixels
|
|
9
|
+
let tileInfo = new TileInfo(tilePos, tileSize); // tile info
|
|
10
|
+
drawRect(pos, size, GRAY); // draw background
|
|
11
|
+
drawTile(pos, size, tileInfo, color);
|
|
12
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
function gameInit()
|
|
2
|
+
{
|
|
3
|
+
cameraPos = vec2(16); // setup camera
|
|
4
|
+
gravity = -.01; // enable gravity
|
|
5
|
+
|
|
6
|
+
// create tile collision and visible tile layer
|
|
7
|
+
initTileCollision(vec2(32));
|
|
8
|
+
const pos = vec2();
|
|
9
|
+
const tileLayer = new TileLayer(pos, tileCollisionSize);
|
|
10
|
+
|
|
11
|
+
// init the tile layer
|
|
12
|
+
for (pos.x = tileCollisionSize.x; pos.x--;)
|
|
13
|
+
for (pos.y = tileCollisionSize.y; pos.y--;)
|
|
14
|
+
{
|
|
15
|
+
// check if tile should be solid
|
|
16
|
+
if (rand() < .7)
|
|
17
|
+
continue;
|
|
18
|
+
|
|
19
|
+
// set tile data
|
|
20
|
+
const tileIndex = 1;
|
|
21
|
+
const direction = randInt(4)
|
|
22
|
+
const mirror = !randInt(2);
|
|
23
|
+
const color = randColor(WHITE, hsl(0,0,.2));
|
|
24
|
+
const data = new TileLayerData(tileIndex, direction, mirror, color);
|
|
25
|
+
tileLayer.setData(pos, data);
|
|
26
|
+
setTileCollisionData(pos, 1);
|
|
27
|
+
}
|
|
28
|
+
tileLayer.redraw(); // redraw tile layer with new data
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function gameUpdate()
|
|
32
|
+
{
|
|
33
|
+
if (mouseWasPressed(0))
|
|
34
|
+
{
|
|
35
|
+
// create particle emitter
|
|
36
|
+
const hue = rand();
|
|
37
|
+
const particleEmitter = new ParticleEmitter(
|
|
38
|
+
mousePos, 0, // emitPos, emitAngle
|
|
39
|
+
0, 0.1, 500, PI, // emitSize, emitTime, emitRate, emitCone
|
|
40
|
+
tile(0, 16), // tileIndex, tileSize
|
|
41
|
+
hsl(hue,1,.5), hsl(hue,1,1), // colorStartA, colorStartB
|
|
42
|
+
hsl(hue,1,.5,0), hsl(hue,1,1,0), // colorEndA, colorEndB
|
|
43
|
+
2, .2, .2, .2, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
|
|
44
|
+
.99, 1, 1, PI, // damping, angleDamping, gravityScale, cone
|
|
45
|
+
.05, .8, true, false // fadeRate, randomness, collide, additive
|
|
46
|
+
);
|
|
47
|
+
particleEmitter.elasticity = .5; // bounce when it collides
|
|
48
|
+
particleEmitter.trailScale = 2; // stretch in direction of motion
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
class TimerButton extends EngineObject
|
|
2
|
+
{
|
|
3
|
+
constructor(pos, time)
|
|
4
|
+
{
|
|
5
|
+
super(pos, vec2(5.5));
|
|
6
|
+
this.time = time;
|
|
7
|
+
this.timer = new Timer;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
update()
|
|
11
|
+
{
|
|
12
|
+
if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
|
|
13
|
+
this.timer.isSet() ? this.timer.unset() : this.timer.set(this.time);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
render()
|
|
17
|
+
{
|
|
18
|
+
this.color = this.timer.isSet() ? this.timer.active() ? BLUE : RED : GRAY;
|
|
19
|
+
drawRect(this.pos, this.size, this.color);
|
|
20
|
+
if (this.timer.isSet())
|
|
21
|
+
{
|
|
22
|
+
drawTextOverlay(this.timer.get().toFixed(1), this.pos.add(vec2(0,1)), 2);
|
|
23
|
+
const percent = this.timer.getPercent()*100|0;
|
|
24
|
+
drawTextOverlay(percent+'%', this.pos.add(vec2(0,-1)), 2);
|
|
25
|
+
}
|
|
26
|
+
else
|
|
27
|
+
drawTextOverlay('Click\nto set', this.pos, 2);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function gameInit()
|
|
32
|
+
{
|
|
33
|
+
new TimerButton(vec2(-7, 0), 3);
|
|
34
|
+
new TimerButton(vec2( 0, 0), 1);
|
|
35
|
+
new TimerButton(vec2( 7, 0), 0);
|
|
36
|
+
}
|