https://github.com/ractive/pxt-spritewrapper
pxt-arcade extension to easily wrap a sprite in a class
https://github.com/ractive/pxt-spritewrapper
makecode makecode-arcade makecode-arcade-extensions makecode-extension
Last synced: 7 days ago
JSON representation
pxt-arcade extension to easily wrap a sprite in a class
- Host: GitHub
- URL: https://github.com/ractive/pxt-spritewrapper
- Owner: ractive
- Created: 2020-05-09T10:13:40.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-05-10T11:36:12.000Z (almost 6 years ago)
- Last Synced: 2023-03-12T00:21:38.486Z (about 3 years ago)
- Topics: makecode, makecode-arcade, makecode-arcade-extensions, makecode-extension
- Language: TypeScript
- Homepage: https://ractive.github.io/pxt-spritewrapper/
- Size: 806 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# pxt-spritewrapper 
This extension allows you to easily wrap a sprite in a class and get the corresponding class instance
when given a given sprite. Your class needs to extend the `SpriteWrapper.Support` base class.
Your object's `onDestroyed` method is set as a callback to the sprite's `onDestroyed` method.
Whenever the sprite gets destroyed, the `onDestroyed` method of your object is called, so that you can
do some clanup. To destroy an object yourself, call the `destroy` method of its
sprite or call the `destroy` method directly on the object.
Here's a very simple space shooter game that demonstrates how to use it:
```
class EnemySpaceShip extends SpriteWrapper.Support {
private static readonly image: Image = img`
5 5 5 5 5 5 d
. 5 5 5 5 d .
. . 5 5 d . .
. . . 5 . . .
`;
constructor(xPos: number) {
super(sprites.create(EnemySpaceShip.image, SpriteKind.Enemy));
this.sprite.setFlag(SpriteFlag.AutoDestroy, true);
this.sprite.y = 0;
this.sprite.x = xPos;
this.sprite.vy = 50;
}
public gotHit() {
info.changeScoreBy(10);
this.destroy();
}
}
class SpaceShip extends SpriteWrapper.Support {
private static readonly image: Image = img`
. . . d . . .
. . 1 1 d . .
. 1 1 1 1 d .
1 1 1 1 1 1 d
`;
constructor() {
super(sprites.create(SpaceShip.image, SpriteKind.Player));
this.sprite.setFlag(SpriteFlag.AutoDestroy, true);
this.sprite.y = scene.screenHeight() - 10;
this.sprite.setFlag(SpriteFlag.StayInScreen, true);
controller.left.onEvent(ControllerButtonEvent.Pressed, function () {
this.flyLeft();
});
controller.right.onEvent(ControllerButtonEvent.Pressed, function () {
this.flyRight();
});
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
this.shoot();
});
}
public onDestroyed() {
music.powerDown.play();
game.over(false);
}
public flyLeft() {
this.sprite.vy = 0;
this.sprite.vx = -50;
}
public flyRight() {
this.sprite.vy = 0;
this.sprite.vx = 50;
}
public shoot() {
sprites.createProjectileFromSprite(img`
1
`, this.sprite, 0, -70);
}
}
const player: SpaceShip = new SpaceShip();
game.onUpdateInterval(1000, () => {
new EnemySpaceShip(randint(0, scene.screenWidth()));
});
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, (playerSprite: Sprite, enemySprite: Sprite) => {
SpriteWrapper.fromSprite(playerSprite).destroy();
SpriteWrapper.fromSprite(enemySprite).destroy();
});
sprites.onOverlap(SpriteKind.Projectile, SpriteKind.Enemy, (projectileSprite: Sprite, enemySprite: Sprite) => {
(SpriteWrapper.fromSprite(enemySprite) as EnemySpaceShip).gotHit();
projectileSprite.destroy();
});
```
## Using it in your project
To use this extension in your project, choose "Advanced > Extensions..." and enter `https://github.com/ractive/pxt-spritewrapper` in the search box.
#### Metadata (used for search, rendering)
* for PXT/arcade
makeCodeRender("{{ site.makecode.home_url }}", "{{ site.github.owner_name }}/{{ site.github.repository_name }}");