Skip to content

Commit ca70d27

Browse files
ModerrekModerrek
authored
JSGL 1.0.6 - Simplify Update
JSGL 1.0.6 - Simplify Update
2 parents 34c0b23 + 0c7b51c commit ca70d27

File tree

25 files changed

+340
-250
lines changed

25 files changed

+340
-250
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
todo/
55
docs/
6+
dev/
67

78
# Logs
89
logs

‎.npmignore‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
/demo
2-
/todo
31
/docs
2+
/dev
3+
/examples
4+
/.github
45
.babelrc
56
.gitattributes
7+
.gitignore
68
tsconfig.json
79
webpack.config.js

‎README.md‎

Lines changed: 6 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,19 @@ Client-side JavaScript library for creating web 2D games. Focusing at objective
1313
Use the JSGL to create 2D games.
1414
## Features
1515
* Creating 2D Games in HTML Canvas
16+
* Auto canvas scaling to size
1617
* Game Settings (autoCanvasResize...)
1718
* Creating OOP game objects
1819
* Easy events system
1920
* Resources loading system
2021
* Easy management objects with Transform and Vector2
21-
* No need to write HTML. The JSGL.ExampleHTML can render default game page.
22-
* Drawing text and UI (W.I.P)
22+
* No need to write HTML. The JSGL.ExampleHTML/JSGL.DefaultGame can render default game page.
2323
## Documentation
2424
Read @ [Documentation](https://jsglreference.pl/).
2525
## Installing
2626
### CDN
2727
```html
28-
<script src="https://unpkg.com/@moderrkowo/jsgl@1.0.5/dist/JSGL.js"></script>
28+
<script src="https://unpkg.com/@moderrkowo/jsgl/dist/JSGL.js"></script>
2929
```
3030
### npm
3131
```
@@ -37,7 +37,7 @@ To include JSGL in browser add script tag to body element. Like below.
3737
```html
3838
...
3939
<body>
40-
<script src="https://unpkg.com/@moderrkowo/jsgl@1.0.5/dist/JSGL.js"></script>
40+
<script src="https://unpkg.com/@moderrkowo/jsgl/dist/JSGL.js"></script>
4141
<script src="./js/game.js"></script>
4242
</body>
4343
...
@@ -54,125 +54,5 @@ const exampleVector2 = new Vector2(5, 10);
5454
console.log(exampleVector2);
5555
// Vector2 { x: 5, y: 10 }
5656
```
57-
## Example init
58-
``index.html``
59-
```html
60-
...
61-
<body>
62-
<script src="JSGL.js"></script>
63-
<script>
64-
// This function creates game path with canvas (id = gameCanvas)
65-
JSGL.ExampleHTML.Render({
66-
backgroundColor: '#0F0F0F'
67-
}); // render html page with overrided backgroundColor setting
68-
// Creating game instance
69-
let game = new JSGL.Game({
70-
/* required */canvas: document.getElementById("gameCanvas"),
71-
/* required */grid: new JSGL.Vector2(8, 6), /* Vector2(x, y) */
72-
autoResize: true,
73-
refreshWhenUnfocused: true
74-
})
75-
// Optional
76-
game.LoadResource('image', 'example-img', './resources/images/point.png');
77-
78-
game.RescaleCanvasToParentElement(0.95); // Decimal mid point
79-
80-
// Creating own JSGL GameObject
81-
class ExampleGameObject extends JSGL.GameObject {
82-
// Properties
83-
/*
84-
readonly id: string;
85-
enabled: boolean;
86-
name: string;
87-
tag: string;
88-
sortingOrder: number;
89-
transform: Transform;
90-
*/
91-
// Executed at spawn
92-
OnStart(event){
93-
// event.game - game reference
94-
}
95-
// Executed at destroy
96-
OnDestroy(event){
97-
// event.game - game reference
98-
}
99-
// Executed at every frame (max frame is limited to monitor hz)
100-
Update(event){
101-
// event.deltaTime - frame time
102-
// event.game - game reference
103-
}
104-
// Executed at rendering (rendering is executed when need to update)
105-
// To tell the game that it need to be redrawed call game.Update();
106-
OnDraw(event){
107-
// event.renderer - renderer reference
108-
// event.game - game reference
109-
}
110-
// FixedUpdate is last update at every frame refresh
111-
FixedUpdate(event){
112-
// event.deltaTime - frame time
113-
// event.game - game reference
114-
}
115-
}
116-
117-
// Creating own JSGL Sprite game object
118-
class ExampleSprite extends JSGL.Sprite {
119-
// + properties from JSGL.GameObject
120-
/* Properties from JSGL.Sprite
121-
visible: boolean = true;
122-
texture: HTMLImageElement = undefined;
123-
showHitbox: boolean = false;
124-
*/
125-
126-
// Dont override this functions
127-
// * OnDraw
128-
129-
// Adds function
130-
OnStart(event){
131-
// event.game - game reference
132-
console.log("I have spawned!");
133-
this.texture = event.game.GetImage('example-img');
134-
// this.showHitbox = true;
135-
event.game.Update(); // to tell the game needs to redraw
136-
}
137-
OnMouseClick(event){
138-
// event.isMouseDown - false (click is registered after mouse button up)
139-
// event.mousePos - Vector2 of mouse position on game grid (Integer)
140-
// event.mousePrecisePos - Vector2 of mouse position on canvas (Scaled)
141-
// event.mouseClientPos - Vector2 of mouse position on canvas (Client Position)
142-
console.log("Clicked!");
143-
return true; // is handled? (boolean)
144-
// if returned true click go to game object under this
145-
}
146-
}
147-
148-
function gameInit(){
149-
game.on('draw', (event) => {
150-
// event.renderer - the renderer reference
151-
// event.game - the game reference
152-
event.renderer.fillFrame({
153-
color: '#F0F0F0'
154-
});
155-
})
156-
game.AddGameObject(new ExampleGameObject());
157-
game.AddGameObject(new ExampleSprite());
158-
console.log(game.gameObjects);
159-
}
160-
161-
// Starting the game
162-
163-
// Method 1
164-
// game.on('loadAllResources', () => {
165-
// game.Start();
166-
// gameInit();
167-
// });
168-
// game.LoadAllResources();
169-
170-
// Method 2
171-
game.LoadGameAndStart().then(() => {
172-
console.log("Game loaded!");
173-
gameInit();
174-
});
175-
</script>
176-
</body>
177-
...
178-
```
57+
## Checks examples
58+
[Examples](https://github.com/Moderrek/JSGL/tree/release/examples/);

‎demo/game.js‎

Lines changed: 0 additions & 116 deletions
This file was deleted.

‎demo/resources/images/point.png‎

-9.52 KB
Binary file not shown.

‎examples/boucing_rect/game.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const game = JSGL.DefaultGame.Create({ grid: new JSGL.Vector2(25, 25)}, { backgroundColor: 'black' });
2+
3+
game.on('draw', (event) => {
4+
event.renderer.fillFrame({ color: 'white' });
5+
});
6+
7+
class BouncingRect extends JSGL.Shape {
8+
OnStart(event){
9+
console.log("Spawned");
10+
this.transform.goTo(game.GetRandomPosition());
11+
this.showHitbox = true;
12+
this.properties.color = 'black';
13+
this.transform.rotate(360 * Math.random());
14+
event.game.Update();
15+
}
16+
Update(event){
17+
const deltaTime = event.deltaTime;
18+
this.transform.rotate(45 * deltaTime);
19+
this.transform.move(new JSGL.Vector2(5 * deltaTime, 5 * deltaTime));
20+
this.transform.ifOnEdgeBounce(myGrid);
21+
event.game.Update();
22+
}
23+
}
24+
25+
game.LoadGameAndStart().then(() => {
26+
// Delayed for
27+
const delay = 1000;
28+
const count = 5;
29+
//
30+
let i = 0;
31+
let taskId = setInterval(() => {
32+
if(++i === count)
33+
clearInterval(taskId);
34+
game.AddGameObject(new BouncingRect());
35+
}, delay);
36+
});

‎examples/boucing_rect/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>JSGL - Bouncing Rect</title>
8+
</head>
9+
<body>
10+
<script src="https://unpkg.com/@moderrkowo/jsgl@1.0.6/dist/JSGL.js"></script>
11+
<script src="game.js"></script>
12+
</body>
13+
</html>

‎examples/default_game/game.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// JSGL.ExampleHTML.Render({ backgroundColor: 'black'});
2+
// const grid = new JSGL.Vector2(10, 10);
3+
// const game = new JSGL.Game({
4+
// canvas: document.getElementById("gameCanvas"),
5+
// grid: grid,
6+
// });
7+
// game.RescaleCanvasToParentElement(1);
8+
9+
// This do this same!
10+
const game = JSGL.DefaultGame.Create({ grid: new JSGL.Vector2(10, 10)}, { backgroundColor: 'black' }, 1);

‎examples/default_game/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>JSGL - Default Game</title>
8+
</head>
9+
<body>
10+
<script src="https://unpkg.com/@moderrkowo/jsgl@1.0.6/dist/JSGL.js"></script>
11+
<script src="game.js"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)