@jiant/canvable 0.0.2 → 0.0.4
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 +85 -85
- package/package.json +11 -4
package/README.md
CHANGED
|
@@ -1,85 +1,85 @@
|
|
|
1
|
-
# Canvable
|
|
2
|
-
|
|
3
|
-
Canvable é uma biblioteca para criação de cenas em canvas com um sistema de nós, permitindo a construção de elementos e interações de forma intuitiva, similar a uma engine de jogos 2D. A biblioteca oferece suporte para objetos gráficos, entrada de usuário, câmera, e muito mais, permitindo criar experiências interativas de maneira modular e flexível.
|
|
4
|
-
|
|
5
|
-
## Instalação
|
|
6
|
-
|
|
7
|
-
### Usando NPM
|
|
8
|
-
|
|
9
|
-
Se você está utilizando o NPM, pode instalar a biblioteca com:
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
npm install @jiant/canvable
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
### Usando Yarn
|
|
16
|
-
|
|
17
|
-
Se você está utilizando o Yarn, pode instalar com:
|
|
18
|
-
|
|
19
|
-
```bash
|
|
20
|
-
yarn add @jiant/canvable
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
## Exemplos de Uso
|
|
24
|
-
|
|
25
|
-
### Criando uma Cena
|
|
26
|
-
|
|
27
|
-
A seguir está um exemplo básico de como criar uma cena e adicionar um objeto nela:
|
|
28
|
-
|
|
29
|
-
```typescript
|
|
30
|
-
import { Circle, getCanvas, Scene } from "@jiant/canvable";
|
|
31
|
-
import "./style.css";
|
|
32
|
-
|
|
33
|
-
// Obtendo o canvas
|
|
34
|
-
const canvas = getCanvas("app")!;
|
|
35
|
-
const ctx = canvas.getContext("2d")!;
|
|
36
|
-
|
|
37
|
-
// Criando a cena
|
|
38
|
-
const scene = new Scene(ctx);
|
|
39
|
-
|
|
40
|
-
// Criando um círculo
|
|
41
|
-
const circle = new Circle();
|
|
42
|
-
|
|
43
|
-
// Adicionando o círculo à cena
|
|
44
|
-
scene.addObject(circle);
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
### Loop de Jogo
|
|
48
|
-
|
|
49
|
-
Você pode adicionar um loop de jogo para atualizar e mover os objetos da cena:
|
|
50
|
-
|
|
51
|
-
```typescript
|
|
52
|
-
scene.gameLoop((deltaTime, total) => {
|
|
53
|
-
circle.pos.x = Math.sin(total) * 100 + 200;
|
|
54
|
-
});
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
---
|
|
58
|
-
|
|
59
|
-
## Funcionalidades
|
|
60
|
-
|
|
61
|
-
### Cenas e Objetos
|
|
62
|
-
|
|
63
|
-
- **Cena**: Contém e gerencia objetos, como círculos, retângulos, entre outros. Permite manipulação de câmera e desenhos.
|
|
64
|
-
- **Objetos**: Elementos gráficos que podem ser adicionados à cena, como `Circle`, `Rectangle`, etc.
|
|
65
|
-
|
|
66
|
-
### Funções de Entrada
|
|
67
|
-
|
|
68
|
-
- **isPressed**: Verifica se uma tecla ou botão está pressionado continuamente.
|
|
69
|
-
- **justPressed**: Detecta o momento exato em que uma tecla ou botão é pressionado pela primeira vez.
|
|
70
|
-
|
|
71
|
-
### Câmera
|
|
72
|
-
|
|
73
|
-
- Suporte para uma câmera 2D que pode ser movida e ampliada (zoom).
|
|
74
|
-
|
|
75
|
-
---
|
|
76
|
-
|
|
77
|
-
## Contribuições
|
|
78
|
-
|
|
79
|
-
Contribuições são bem-vindas! Se você deseja melhorar ou adicionar novos recursos à biblioteca, sinta-se à vontade para abrir um **Pull Request**.
|
|
80
|
-
|
|
81
|
-
---
|
|
82
|
-
|
|
83
|
-
## Licença
|
|
84
|
-
|
|
85
|
-
Este projeto está licenciado sob a [MIT License](LICENSE).
|
|
1
|
+
# Canvable
|
|
2
|
+
|
|
3
|
+
Canvable é uma biblioteca para criação de cenas em canvas com um sistema de nós, permitindo a construção de elementos e interações de forma intuitiva, similar a uma engine de jogos 2D. A biblioteca oferece suporte para objetos gráficos, entrada de usuário, câmera, e muito mais, permitindo criar experiências interativas de maneira modular e flexível.
|
|
4
|
+
|
|
5
|
+
## Instalação
|
|
6
|
+
|
|
7
|
+
### Usando NPM
|
|
8
|
+
|
|
9
|
+
Se você está utilizando o NPM, pode instalar a biblioteca com:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @jiant/canvable
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Usando Yarn
|
|
16
|
+
|
|
17
|
+
Se você está utilizando o Yarn, pode instalar com:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
yarn add @jiant/canvable
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Exemplos de Uso
|
|
24
|
+
|
|
25
|
+
### Criando uma Cena
|
|
26
|
+
|
|
27
|
+
A seguir está um exemplo básico de como criar uma cena e adicionar um objeto nela:
|
|
28
|
+
|
|
29
|
+
```typescript
|
|
30
|
+
import { Circle, getCanvas, Scene } from "@jiant/canvable";
|
|
31
|
+
import "./style.css";
|
|
32
|
+
|
|
33
|
+
// Obtendo o canvas
|
|
34
|
+
const canvas = getCanvas("app")!;
|
|
35
|
+
const ctx = canvas.getContext("2d")!;
|
|
36
|
+
|
|
37
|
+
// Criando a cena
|
|
38
|
+
const scene = new Scene(ctx);
|
|
39
|
+
|
|
40
|
+
// Criando um círculo
|
|
41
|
+
const circle = new Circle();
|
|
42
|
+
|
|
43
|
+
// Adicionando o círculo à cena
|
|
44
|
+
scene.addObject(circle);
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Loop de Jogo
|
|
48
|
+
|
|
49
|
+
Você pode adicionar um loop de jogo para atualizar e mover os objetos da cena:
|
|
50
|
+
|
|
51
|
+
```typescript
|
|
52
|
+
scene.gameLoop((deltaTime, total) => {
|
|
53
|
+
circle.pos.x = Math.sin(total) * 100 + 200;
|
|
54
|
+
});
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## Funcionalidades
|
|
60
|
+
|
|
61
|
+
### Cenas e Objetos
|
|
62
|
+
|
|
63
|
+
- **Cena**: Contém e gerencia objetos, como círculos, retângulos, entre outros. Permite manipulação de câmera e desenhos.
|
|
64
|
+
- **Objetos**: Elementos gráficos que podem ser adicionados à cena, como `Circle`, `Rectangle`, etc.
|
|
65
|
+
|
|
66
|
+
### Funções de Entrada
|
|
67
|
+
|
|
68
|
+
- **isPressed**: Verifica se uma tecla ou botão está pressionado continuamente.
|
|
69
|
+
- **justPressed**: Detecta o momento exato em que uma tecla ou botão é pressionado pela primeira vez.
|
|
70
|
+
|
|
71
|
+
### Câmera
|
|
72
|
+
|
|
73
|
+
- Suporte para uma câmera 2D que pode ser movida e ampliada (zoom).
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## Contribuições
|
|
78
|
+
|
|
79
|
+
Contribuições são bem-vindas! Se você deseja melhorar ou adicionar novos recursos à biblioteca, sinta-se à vontade para abrir um **Pull Request**.
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## Licença
|
|
84
|
+
|
|
85
|
+
Este projeto está licenciado sob a [MIT License](LICENSE).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jiant/canvable",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "A tool for building canvas apps",
|
|
5
5
|
"main": "./dist/main.js",
|
|
6
6
|
"module": "./dist/main.mjs",
|
|
@@ -12,14 +12,17 @@
|
|
|
12
12
|
],
|
|
13
13
|
"scripts": {
|
|
14
14
|
"build": "tsup",
|
|
15
|
-
"
|
|
15
|
+
"watch": "tsup --watch",
|
|
16
|
+
"dev": "vite"
|
|
16
17
|
},
|
|
17
18
|
"dependencies": {
|
|
18
19
|
"uuid": "^11.0.3"
|
|
19
20
|
},
|
|
20
21
|
"devDependencies": {
|
|
22
|
+
"@types/node": "^25.2.0",
|
|
23
|
+
"tsup": "^8.3.5",
|
|
21
24
|
"typescript": "^5.7.2",
|
|
22
|
-
"
|
|
25
|
+
"vite": "^7.3.1"
|
|
23
26
|
},
|
|
24
27
|
"keywords": [
|
|
25
28
|
"canvas",
|
|
@@ -27,7 +30,11 @@
|
|
|
27
30
|
"drawing",
|
|
28
31
|
"visualization"
|
|
29
32
|
],
|
|
33
|
+
"repository": {
|
|
34
|
+
"type": "git",
|
|
35
|
+
"url": "https://github.com/SrDouglax/Canvable.git"
|
|
36
|
+
},
|
|
30
37
|
"publishConfig": {
|
|
31
38
|
"access": "public"
|
|
32
39
|
}
|
|
33
|
-
}
|
|
40
|
+
}
|