Skip to content

Commit 94de2b7

Browse files
ModerrekModerrek
authored
Merge pull request #3 from Moderrek/dev-1.0.2
Dev 1.0.2
2 parents 650352d + bf0516a commit 94de2b7

File tree

15 files changed

+214
-50
lines changed

15 files changed

+214
-50
lines changed

‎.npmignore‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
/demo
22
/todo
3-
/docs
3+
/docs
4+
.babelrc
5+
.gitattributes
6+
tsconfig.json
7+
webpack.config.js

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ Read @ [Documentation](https://jsglreference.pl/).
2525
## Installing
2626
### CDN
2727
```html
28-
<script src="https://unpkg.com/@moderrkowo/jsgl@1.0.1/dist/JSGL.js"></script>
28+
<script src="https://unpkg.com/@moderrkowo/jsgl@1.0.3/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.1/dist/JSGL.js"></script>
40+
<script src="https://unpkg.com/@moderrkowo/jsgl@1.0.3/dist/JSGL.js"></script>
4141
<script src="./js/game.js"></script>
4242
</body>
4343
...

‎demo/game.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,9 @@ class Enemy extends JSGL.Sprite{
2929
this.showHitbox = true;
3030
}
3131
Update(event){
32-
const rotationPerSec = 30;
33-
const rotationPerMillis = rotationPerSec / 1000;
34-
this.transform.rotate(rotationPerMillis * event.deltaTime);
32+
this.transform.rotate(30 * event.deltaTime);
3533
if(this.move)
36-
this.transform.move(new JSGL.Vector2(1/10000 * event.deltaTime, 1/10000 * event.deltaTime));
34+
this.transform.move(new JSGL.Vector2(1 * event.deltaTime, 1 * event.deltaTime));
3735
event.game.Update();
3836
}
3937
OnMouseClick(event){

‎demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>JSGL 1.0 Demo</title>
77
</head>
88
<body>
9-
<script src="../dist/JSGL.js"></script>
9+
<script src="./../dist/JSGL.js"></script>
1010
<script src="game.js"></script>
1111
</body>
1212
</html>

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
22
"name": "@moderrkowo/jsgl",
3-
"version": "1.0.1",
3+
"version": "1.0.3",
44
"description": "Client-side JavaScript library for creating web 2D games. Focusing at objective game.",
55
"main": "./dist/index.js",
66
"scripts": {
77
"build": "webpack --mode=production --node-env=production && tsc",
88
"build:dev": "webpack --mode=development",
9-
"build:prod": "webpack --mode=production --node-env=production",
9+
"build:prod": "webpack --mode=production --node-env=production && tsc",
1010
"watch": "webpack --watch",
1111
"docs": "typedoc src/index.ts --name \"JSGL\" --includeVersion --hideGenerator"
1212
},

‎src/Game.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ export enum ImageQuality {
2828
export interface GameSettings {
2929
canvas?: HTMLCanvasElement;
3030
grid?: Vector2;
31+
/**
32+
* Is canvas auto resized to parent element size?
33+
*/
3134
autoResize?: boolean;
3235
refreshWhenUnfocused?: boolean;
3336
canvasImageQuality?: ImageQuality;
@@ -52,6 +55,10 @@ export class Game{
5255
readonly gameSettings: GameSettings;
5356

5457
// Constructor
58+
/**
59+
* Constructs new Game instance with given settings.
60+
* @param gameSettings The settings
61+
*/
5562
constructor(gameSettings: GameSettings){
5663
this.gameSettings = { ...defaultGameSettings, ...gameSettings };
5764
if(this.gameSettings.canvas !== undefined){
@@ -98,7 +105,7 @@ export class Game{
98105
private _isPlaying: boolean = false;
99106
private _currentMillis: number = 0;
100107
private _deltaTime: number = 0;
101-
isNeedToUpdate: boolean = true;
108+
isNeedToUpdate: boolean = false;
102109

103110
private gameLoopUpdate(time: number){
104111
// Calculation deltaTime

‎src/Utils.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@ export function IsInRange(a: number, min: number, max: number): boolean{
44
export function Clamp(a: number, min: number, max: number): number{
55
return Math.min(max, Math.max(min, a));
66
}
7+
/**
8+
* Clamps `a` number to decimal midpoint (0-1)
9+
* @param a The number
10+
* @returns The clamped01 number
11+
*/
712
export function Clamp01(a: number): number{
813
return Clamp(a, 0, 1);
914
}

‎src/drawing/DrawSettings.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,39 @@
11
import { Shadow } from './Shadow';
22

33
export interface DrawSettings {
4+
/**
5+
* Should the shape have a fill?
6+
*/
47
fill?: boolean;
8+
/**
9+
* Shape fill color
10+
*/
511
color?: string|CanvasGradient|CanvasPattern;
612

13+
/**
14+
* Should the shape have a border?
15+
*/
716
border?: boolean;
17+
/**
18+
* Shape border color
19+
*/
820
borderColor?: string|CanvasGradient|CanvasPattern;
21+
/**
22+
* Shape border size
23+
*/
924
borderSize?: number;
1025

26+
/**
27+
* Rotation of shape in degrees
28+
*/
1129
angle?: number;
30+
/**
31+
* Shadow settings for shape
32+
*/
1233
shadow?: Shadow;
34+
/**
35+
* Alpha decimal midpoint
36+
*/
1337
alpha?: number;
1438
}
1539

‎src/drawing/Renderer.ts‎

Lines changed: 81 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Vector2 } from '../structs/Vector2';
55
import { DrawSettings, defaultDrawSettings } from './DrawSettings';
66

77
/**
8-
*
8+
* Class represents Game Renderer
99
*/
1010
export class Renderer {
1111
private readonly handler: Game;
@@ -64,24 +64,29 @@ export class Renderer {
6464
return new Vector2(this.canvasWidth, this.canvasHeight);
6565
}
6666

67+
/**
68+
* Scales number from client coordinate to grid coordinate
69+
* @param x The client coordinate
70+
* @returns The scaled number
71+
*/
6772
scale(x: number): number{
6873
return x * this.gridSize;
6974
}
7075

71-
radians(degrees: number): number{
76+
private radians(degrees: number): number{
7277
degrees %= 360;
7378
return degrees * Math.PI / 180;
7479
}
7580

76-
degrees(radians: number): number{
81+
private degrees(radians: number): number{
7782
return radians / Math.PI * 180;
7883
}
7984

80-
combineDrawSettings(drawSettings: DrawSettings | undefined): DrawSettings{
85+
private combineDrawSettings(drawSettings: DrawSettings | undefined): DrawSettings{
8186
return { ...defaultDrawSettings, ...drawSettings };
8287
}
8388

84-
setContextSettings(drawSettings: DrawSettings){
89+
private setContextSettings(drawSettings: DrawSettings){
8590
if(drawSettings.color !== undefined)
8691
this.ctx.fillStyle = drawSettings.color;
8792
if(drawSettings.borderColor !== undefined)
@@ -100,6 +105,14 @@ export class Renderer {
100105
this.ctx.shadowBlur = this.scale(drawSettings.shadow.blur);
101106
}
102107

108+
/**
109+
* Draws a rect.
110+
* @param x The X-coordinate
111+
* @param y The Y-coordinate
112+
* @param width The width
113+
* @param height The height
114+
* @param drawSettings The draw settings
115+
*/
103116
drawRectangle(x: number, y: number, width: number, height: number, drawSettings?: DrawSettings){
104117
drawSettings = this.combineDrawSettings(drawSettings);
105118
const dx = this.scale(x);
@@ -121,6 +134,13 @@ export class Renderer {
121134
this.ctx.restore();
122135
}
123136

137+
/**
138+
* Draws a circle.
139+
* @param x The X-coordinate
140+
* @param y The Y-coordinate
141+
* @param diameter The diameter
142+
* @param drawSettings The draw settings
143+
*/
124144
drawCircle(x: number, y: number, diameter: number, drawSettings?: DrawSettings){
125145
drawSettings = this.combineDrawSettings(drawSettings);
126146
const dx = this.scale(x);
@@ -137,24 +157,15 @@ export class Renderer {
137157
this.ctx.stroke();
138158
}
139159

140-
// drawTriangle(x: number, y: number, width: number, height: number, drawSettings: DrawSettings = undefined){
141-
// drawSettings = this.combineDrawSettings(drawSettings);
142-
// const dx = this.scale(x);
143-
// const dy = this.scale(y);
144-
// const dw = this.scale(width);
145-
// const dh = this.scale(height);
146-
// this.ctx.save();
147-
// this.ctx.translate(dx + dw / 2, dy + dh / 2);
148-
// this.ctx.rotate(this.radians(drawSettings.angle));
149-
// this.ctx.translate(- dx - dw / 2, - dy - dh / 2);
150-
// this.setContextSettings(drawSettings);
151-
// //
152-
153-
// //
154-
// this.ctx.restore();
155-
// }
156-
157-
drawLine(x1: number, y1: number, x2: number, y2: number, drawSettings: DrawSettings){
160+
/**
161+
* Draws line from position to another position.
162+
* @param x1 From X-coordinate
163+
* @param y1 From Y-coordinate
164+
* @param x2 To X-coordinate
165+
* @param y2 To Y-coordinate
166+
* @param drawSettings The draw settings
167+
*/
168+
drawLine(x1: number, y1: number, x2: number, y2: number, drawSettings?: DrawSettings){
158169
drawSettings = this.combineDrawSettings(drawSettings);
159170
this.setContextSettings(drawSettings);
160171
this.ctx.beginPath();
@@ -164,7 +175,15 @@ export class Renderer {
164175
this.ctx.stroke();
165176
}
166177

167-
drawArrow(x1: number, y1: number, x2: number, y2: number, drawSettings: DrawSettings) {
178+
/**
179+
* Draws arrow from position to another position.
180+
* @param x1 From X-coordinate
181+
* @param y1 From Y-coordinate
182+
* @param x2 To X-coordinate
183+
* @param y2 To Y-coordinate
184+
* @param drawSettings The draw settings
185+
*/
186+
drawArrow(x1: number, y1: number, x2: number, y2: number, drawSettings?: DrawSettings) {
168187
drawSettings = this.combineDrawSettings(drawSettings);
169188
// Scaling
170189
const size = this.gridSize / 16;
@@ -195,21 +214,41 @@ export class Renderer {
195214
this.ctx.restore();
196215
}
197216

217+
/**
218+
* Clears canvas
219+
*/
198220
clearFrame(){
199221
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
200222
}
201223

224+
/**
225+
* Fills canvas with color property from settings
226+
* @param drawSettings The settings
227+
*/
202228
fillFrame(drawSettings: DrawSettings){
203229
drawSettings = this.combineDrawSettings(drawSettings);
204230
this.setContextSettings(drawSettings);
205231
this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
206232
}
207233

234+
/**
235+
* Fills canvas with image.
236+
* @param image The image
237+
*/
208238
fillImageFrame(image: HTMLCanvasElement){
209239
this.ctx.drawImage(image, 0, 0, this.canvasWidth, this.canvasHeight);
210240
}
211241

212-
drawImage(image: HTMLImageElement, x: number, y: number, width: number, height: number, drawSettings: DrawSettings){
242+
/**
243+
* Draws image.
244+
* @param image The image
245+
* @param x The X-coordinate
246+
* @param y The Y-coordinate
247+
* @param width The width
248+
* @param height The height
249+
* @param drawSettings The draw settings
250+
*/
251+
drawImage(image: HTMLImageElement, x: number, y: number, width: number, height: number, drawSettings?: DrawSettings){
213252
drawSettings = this.combineDrawSettings(drawSettings);
214253
const dx = this.scale(x);
215254
const dy = this.scale(y);
@@ -224,10 +263,19 @@ export class Renderer {
224263
this.ctx.restore();
225264
}
226265

227-
drawSprite(sprite: Sprite){
228-
if(sprite.texture === undefined){
266+
/**
267+
* Draws sprite texture
268+
* @param sprite The sprite
269+
* @returns is success?
270+
*/
271+
drawSprite(sprite: Sprite): boolean{
272+
if(sprite.texture === undefined || sprite.texture === null){
229273
console.warn("The Sprite ", sprite, " has not assigned texture!");
230-
return;
274+
return false;
275+
}
276+
if(!(sprite.texture instanceof HTMLImageElement)){
277+
console.warn(`Texture ${sprite.name}[${sprite.id}] cannot be ${typeof sprite.texture}!`);
278+
return false;
231279
}
232280
this.drawImage(
233281
sprite.texture,
@@ -237,8 +285,13 @@ export class Renderer {
237285
sprite.transform.scale.y,
238286
{ angle: sprite.transform.rotation }
239287
);
288+
return true;
240289
}
241290

291+
/**
292+
* Draws hitbox to sprite
293+
* @param sprite The sprite
294+
*/
242295
drawSpriteHitBox(sprite: Sprite){
243296
const pos = sprite.transform.position;
244297
const center = sprite.transform.positionCenter;

‎src/drawing/Shadow.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
11
export interface Shadow {
2+
/**
3+
* Shadow color
4+
*/
25
color: string;
6+
/**
7+
* Offset X-coordinate
8+
*/
39
offsetX: number;
10+
/**
11+
* Offset Y-coordinate
12+
*/
413
offsetY: number;
14+
/**
15+
* Shadow blur strength
16+
*/
517
blur: number;
618
}

0 commit comments

Comments
 (0)