angry-pixel 2.3.5 → 2.3.7
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 +31 -10
- package/lib/index.cjs.js +1 -1
- package/lib/index.cjs.js.map +1 -1
- package/lib/index.d.ts +53 -29
- package/lib/index.esm.js +1 -1
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,7 +24,7 @@ Main features:
|
|
|
24
24
|
|
|
25
25
|
## Getting Started
|
|
26
26
|
|
|
27
|
-
Let's create a scene where the Angry Pixel
|
|
27
|
+
Let's create a scene where the Angry Pixel sprite bounces off the edges of the screen in a DVD screensaver fashion.
|
|
28
28
|
|
|
29
29
|
### Installation
|
|
30
30
|
|
|
@@ -38,6 +38,27 @@ or
|
|
|
38
38
|
yarn add angry-pixel
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
+
### Load from the CDN
|
|
42
|
+
|
|
43
|
+
The builds are also published to `https://cdn.angrypixel.gg/engine/`, under the version number of each release and under `latest`.
|
|
44
|
+
|
|
45
|
+
UMD build, exposed as the global `angry-pixel`:
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<script src="https://cdn.angrypixel.gg/engine/latest/index.js"></script>
|
|
49
|
+
<script>
|
|
50
|
+
const { Game, Scene } = window["angry-pixel"];
|
|
51
|
+
</script>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
ES module build:
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<script type="module">
|
|
58
|
+
import { Game, Scene } from "https://cdn.angrypixel.gg/engine/latest/index.esm.js";
|
|
59
|
+
</script>
|
|
60
|
+
```
|
|
61
|
+
|
|
41
62
|
### Initialize
|
|
42
63
|
|
|
43
64
|
First we create an instance of the `Game` class:
|
|
@@ -71,7 +92,7 @@ import { Scene } from "angry-pixel";
|
|
|
71
92
|
class MainScene extends Scene {
|
|
72
93
|
// within this method we load the assets
|
|
73
94
|
loadAssets(): void {
|
|
74
|
-
this.assetManager.loadImage("
|
|
95
|
+
this.assetManager.loadImage("sprite.png");
|
|
75
96
|
}
|
|
76
97
|
}
|
|
77
98
|
```
|
|
@@ -132,7 +153,7 @@ import { Scene } from "angry-pixel";
|
|
|
132
153
|
|
|
133
154
|
class MainScene extends Scene {
|
|
134
155
|
loadAssets(): void {
|
|
135
|
-
this.assetManager.loadImage("
|
|
156
|
+
this.assetManager.loadImage("sprite.png");
|
|
136
157
|
}
|
|
137
158
|
|
|
138
159
|
// within this method we register the systems of the scene
|
|
@@ -144,14 +165,14 @@ class MainScene extends Scene {
|
|
|
144
165
|
|
|
145
166
|
### Create the entities
|
|
146
167
|
|
|
147
|
-
Finally, we need to create two entities, one that represents our
|
|
168
|
+
Finally, we need to create two entities, one that represents our sprite, to which we want to apply the behavior of moving and bouncing, and another one that represents the camera of our game. For this we will use the `EntityManager`, specifically the `createEntity` method. This method accepts an array of components, the components can be concrete instances (this is useful when it is necessary to pass parameters by constructor) or classes (if it is not necessary to pass parameters by constructor, we can pass only the class).
|
|
148
169
|
|
|
149
170
|
```typescript
|
|
150
171
|
import { Camera, Scene, SpriteRenderer, Transform } from "angry-pixel";
|
|
151
172
|
|
|
152
173
|
class MainScene extends Scene {
|
|
153
174
|
loadAssets(): void {
|
|
154
|
-
this.assetManager.loadImage("
|
|
175
|
+
this.assetManager.loadImage("sprite.png");
|
|
155
176
|
}
|
|
156
177
|
|
|
157
178
|
registerSystems(): void {
|
|
@@ -161,15 +182,15 @@ class MainScene extends Scene {
|
|
|
161
182
|
// within this method we create the entities
|
|
162
183
|
createEntities(): void {
|
|
163
184
|
// camera
|
|
164
|
-
this.entityManager.createEntity([new Transform(), new Camera({ layers: ["
|
|
185
|
+
this.entityManager.createEntity([new Transform(), new Camera({ layers: ["Sprite"] })]);
|
|
165
186
|
|
|
166
|
-
//
|
|
187
|
+
// sprite
|
|
167
188
|
this.entityManager.createEntity([
|
|
168
189
|
new Transform(),
|
|
169
190
|
new MoveAndBounce(),
|
|
170
191
|
new SpriteRenderer({
|
|
171
|
-
layer: "
|
|
172
|
-
image: this.assetManager.getImage("
|
|
192
|
+
layer: "Sprite",
|
|
193
|
+
image: this.assetManager.getImage("sprite.png"),
|
|
173
194
|
}),
|
|
174
195
|
]);
|
|
175
196
|
}
|
|
@@ -181,7 +202,7 @@ class MainScene extends Scene {
|
|
|
181
202
|
Now we can start the game:
|
|
182
203
|
|
|
183
204
|
```typescript
|
|
184
|
-
game.
|
|
205
|
+
game.start();
|
|
185
206
|
```
|
|
186
207
|
|
|
187
208
|
### Check this example live
|