@jiant/canvable 0.0.3 → 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.
Files changed (2) hide show
  1. package/README.md +85 -85
  2. package/package.json +7 -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",
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
- "dev": "tsup --watch"
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
- "tsup": "^8.3.5"
25
+ "vite": "^7.3.1"
23
26
  },
24
27
  "keywords": [
25
28
  "canvas",
@@ -34,4 +37,4 @@
34
37
  "publishConfig": {
35
38
  "access": "public"
36
39
  }
37
- }
40
+ }