Skip to content

Commit 93363b7

Browse files
ModerrekModerrek
authored
Merge pull request #1 from Moderrek/dev-1.0.0-pre2
Dev 1.0.0 pre2
2 parents e171a22 + 2f4488d commit 93363b7

28 files changed

Lines changed: 852 additions & 347 deletions

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
# IntelliJ
22
.idea/
33

4+
todo/
5+
46
# Logs
57
logs
68
*.log

‎README.md‎

Lines changed: 135 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,136 @@
1-
# JSGL
1+
<h1 align="center">⚡ JSGL</h1>
2+
3+
![License](https://img.shields.io/github/license/Moderrek/JSGL) [![CodeFactor](https://www.codefactor.io/repository/github/moderrek/jsgl/badge)](https://www.codefactor.io/repository/github/moderrek/jsgl) [![Latest Release](https://img.shields.io/github/v/release/Moderrek/JSGL?include_prereleases)](https://github.com/Moderrek/JSGL/releases/tag/v0.1.1-alpha) ![Downloads](https://img.shields.io/github/downloads/Moderrek/JSGL/total)
24
Client-side JavaScript library for creating web 2D games. Focusing at objective game.
3-
Use the JSGL to create 2D games.
5+
Use the JSGL to create 2D games.
6+
## Features
7+
* Creating 2D Games in HTML Canvas
8+
* Game Settings (autoCanvasResize...)
9+
* Creating OOP game objects
10+
* Easy events system
11+
* Resources loading system
12+
* Easy management objects with Transform and Vector2
13+
* No need to write HTML. The JSGL.ExampleHTML can render default game page.
14+
* Drawing text and UI (W.I.P)
15+
## Example init
16+
``index.html``
17+
```html
18+
...
19+
<body>
20+
<script src="JSGL.js"></script>
21+
<script>
22+
// This function creates game path with canvas (id = gameCanvas)
23+
JSGL.ExampleHTML.Render({
24+
backgroundColor: '#0F0F0F'
25+
}); // render html page with overrided backgroundColor setting
26+
// Creating game instance
27+
let game = new JSGL.Game({
28+
/* required */canvas: document.getElementById("gameCanvas"),
29+
/* required */grid: new JSGL.Vector2(8, 6), /* Vector2(x, y) */
30+
autoResize: true,
31+
refreshWhenUnfocused: true
32+
})
33+
// Optional
34+
game.LoadResource('image', 'example-img', './resources/images/point.png');
35+
36+
game.RescaleCanvasToParentElement(0.95); // Decimal mid point
37+
38+
// Creating own JSGL GameObject
39+
class ExampleGameObject extends JSGL.GameObject {
40+
// Properties
41+
/*
42+
readonly id: string;
43+
enabled: boolean;
44+
name: string;
45+
tag: string;
46+
sortingOrder: number;
47+
transform: Transform;
48+
*/
49+
// Executed at spawn
50+
OnStart(event){
51+
// event.game - game reference
52+
}
53+
// Executed at destroy
54+
OnDestroy(event){
55+
// event.game - game reference
56+
}
57+
// Executed at every frame (max frame is limited to monitor hz)
58+
Update(event){
59+
// event.deltaTime - frame time
60+
// event.game - game reference
61+
}
62+
// Executed at rendering (rendering is executed when need to update)
63+
// To tell the game that it need to be redrawed call game.Update();
64+
OnDraw(event){
65+
// event.renderer - renderer reference
66+
// event.game - game reference
67+
}
68+
// FixedUpdate is last update at every frame refresh
69+
FixedUpdate(event){
70+
// event.deltaTime - frame time
71+
// event.game - game reference
72+
}
73+
}
74+
75+
// Creating own JSGL Sprite game object
76+
class ExampleSprite extends JSGL.Sprite {
77+
// + properties from JSGL.GameObject
78+
/* Properties from JSGL.Sprite
79+
visible: boolean = true;
80+
texture: HTMLImageElement = undefined;
81+
showHitbox: boolean = false;
82+
*/
83+
84+
// Dont override this functions
85+
// * OnDraw
86+
87+
// Adds function
88+
OnStart(event){
89+
// event.game - game reference
90+
console.log("I have spawned!");
91+
this.texture = event.game.GetImage('example-img');
92+
// this.showHitbox = true;
93+
event.game.Update(); // to tell the game needs to redraw
94+
}
95+
OnMouseClick(event){
96+
// event.isMouseDown - false (click is registered after mouse button up)
97+
// event.mousePos - Vector2 of mouse position on game grid (Integer)
98+
// event.mousePrecisePos - Vector2 of mouse position on canvas (Scaled)
99+
// event.mouseClientPos - Vector2 of mouse position on canvas (Client Position)
100+
console.log("Clicked!");
101+
return true; // is handled? (boolean)
102+
// if returned true click go to game object under this
103+
}
104+
}
105+
106+
function gameInit(){
107+
game.on('draw', (event) => {
108+
// event.renderer - the renderer reference
109+
// event.game - the game reference
110+
event.renderer.fillFrame({
111+
color: '#F0F0F0'
112+
});
113+
})
114+
game.AddGameObject(new ExampleGameObject());
115+
game.AddGameObject(new ExampleSprite());
116+
console.log(game.gameObjects);
117+
}
118+
119+
// Starting the game
120+
121+
// Method 1
122+
// game.on('loadAllResources', () => {
123+
// game.Start();
124+
// gameInit();
125+
// });
126+
// game.LoadAllResources();
127+
128+
// Method 2
129+
game.LoadGameAndStart().then(() => {
130+
console.log("Game loaded!");
131+
gameInit();
132+
});
133+
</script>
134+
</body>
135+
...
136+
```

‎demo/game.js‎

Lines changed: 77 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1-
JSGL.ExampleHTML.Render(); // render with default settings
2-
// new JSGL.ExampleHTML().Render({
1+
JSGL.ExampleHTML.Render({
2+
backgroundColor: '#0F0F0F'
3+
}); // render with default settings
4+
// JSGL.ExampleHTML.Render({
35
// backgroundColor: 'red'
46
// }); // override default settings (sets the background color of body to red)
57

68
// Create Game Instance
79
let game = new JSGL.Game({
810
canvas: document.getElementById("gameCanvas"),
9-
grid: new JSGL.Vector2(8, 6)
11+
grid: new JSGL.Vector2(8, 6),
12+
autoResize: true,
13+
refreshWhenUnfocused: true
1014
});
1115
// Add resource to load
12-
game.LoadResource('image', 'points', './point.png');
16+
game.LoadResource('image', 'points', './resources/images/point.png');
1317
// game.LoadResource('image', 'player', './player.png');
1418
// game.LoadResource('image', 'enemy', './enemy.png');
1519

@@ -18,18 +22,22 @@ game.RescaleCanvasToParentElement(0.95);
1822

1923
// Creating own JSGL Sprite GameObject
2024
class Enemy extends JSGL.Sprite{
21-
OnStart(game){
22-
this.texture = game.GetImage('points');
25+
move = true;
26+
27+
OnStart(event){
28+
this.texture = event.game.GetImage('points');
2329
this.showHitbox = true;
2430
}
25-
Update(deltaTime, game){
26-
const rotationPerSec = 180;
31+
Update(event){
32+
const rotationPerSec = 30;
2733
const rotationPerMillis = rotationPerSec / 1000;
28-
this.transform.rotation += rotationPerMillis * deltaTime;
29-
game.Update();
34+
this.transform.rotate(rotationPerMillis * event.deltaTime);
35+
if(this.move)
36+
this.transform.move(new JSGL.Vector2(1/10000 * event.deltaTime, 1/10000 * event.deltaTime));
37+
event.game.Update();
3038
}
31-
OnMouseClick(mousePos, game){
32-
console.log("Clicked! @", this);
39+
OnMouseClick(event){
40+
console.log("Clicked! @", event);
3341
return true;
3442
}
3543
}
@@ -39,14 +47,59 @@ class Enemy extends JSGL.Sprite{
3947
// game.Start();
4048
// });
4149
// game.LoadAllResources();
50+
console.log("Waiting for load..");
4251
game.LoadGameAndStart().then(() => {
4352
console.log("Loaded");
44-
game.on('draw', () => {
45-
game.renderer.fillFrame('#F0F0F0');
46-
game.renderer.drawRectangle(0, 0, 1, 1);
47-
game.renderer.drawRectangle(2, 0, 1, 1, 'blue');
48-
game.renderer.drawRectangle(3, 0, 1, 1, 'yellow');
49-
game.renderer.drawRectangle(1, 0, 1, 1, 'red', 45);
53+
game.on('draw', (event) => {
54+
game.renderer.fillFrame({
55+
color: '#F0F0F0'
56+
});
57+
game.renderer.drawRectangle(0, 0, 1, 1, {
58+
shadow: {
59+
color: 'black',
60+
offsetX: 0.05,
61+
offsetY: 0.05,
62+
blur: 0.4
63+
}
64+
});
65+
game.renderer.drawTriangle(2, 0, 1, 1, {
66+
color: 'blue'
67+
});
68+
//
69+
game.renderer.drawRectangle(4.9, 0, 1.2, 3.1, {
70+
alpha: 0.2
71+
});
72+
game.renderer.drawCircle(5, 0, 1, {
73+
color: 'green',
74+
border: true,
75+
fill: true,
76+
alpha: 0.1
77+
});
78+
game.renderer.drawCircle(5, 1, 1, {
79+
color: 'yellow',
80+
border: true,
81+
fill: true,
82+
alpha: 0.1
83+
});
84+
game.renderer.drawCircle(5, 2, 1, {
85+
color: 'red',
86+
border: true,
87+
fill: true
88+
});
89+
//
90+
game.renderer.drawRectangle(1, 2, 1, 1, {
91+
color: 'magenta',
92+
angle: 45,
93+
border: true,
94+
borderColor: 'red',
95+
alpha: 0.1,
96+
shadow: {
97+
color: 'red',
98+
offsetX: 0.1,
99+
offsetY: 0.1,
100+
blur: 1
101+
}
102+
});
50103
});
51104
game.on('mouseUp', (event) => {
52105
console.log('Mouse up!');
@@ -58,6 +111,10 @@ game.LoadGameAndStart().then(() => {
58111
console.log(event.mousePos, event.mouseClientPos);
59112
});
60113
let enemy = new Enemy();
61-
enemy.transform.addX(3).addY(2);
62-
game.AddGameObject(enemy);
114+
enemy.transform.addX(3).addY(1);
115+
enemy.move = false;
116+
game.AddGameObject(enemy).showHitbox = false;
117+
game.AddGameObject(new Enemy()).showHitbox = false;
118+
game.AddGameObject(new Enemy()).transform.add(new JSGL.Vector2(3.5, 2.5));
119+
game.AddGameObject(new Enemy()).transform.add(new JSGL.Vector2(0, 3));
63120
});

demo/point.png renamed to demo/resources/images/point.png

File renamed without changes.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jsgl",
3-
"version": "1.0.0",
3+
"version": "1.0.0-pre2",
44
"description": "Client-side JavaScript library for creating web 2D games. Focusing at objective game.",
55
"main": "src/index.ts",
66
"scripts": {

0 commit comments

Comments
 (0)