Skip to main content
Version: 7.3.2

Sprite View

Sprite View is make sprite animations with Smartface Native Framework.

scripts/pages/pageSample.ts
import PageSampleDesign from "generated/pages/pageSample";
import Image from "@smartface/native/ui/image";
import { withDismissAndBackButton } from "@smartface/mixins";
import { Router, Route } from "@smartface/router";
import SpriteView from "@smartface/native/ui/spriteview";
import { ImageFillType } from "@smartface/native/ui/imageview/imageview";

export default class PgSpriteView extends withDismissAndBackButton(
PageSampleDesign
) {
spriteView: SpriteView;
constructor(private router?: Router, private route?: Route) {
super({});
}
initSpriteView() {
this.spriteView = new SpriteView({
width: 100,
height: 125,
imageFillType: ImageFillType.ASPECTFIT,
});
const sheet = Image.createFromFile("assets://braid.png");

this.spriteView.setSprite({
sheet: sheet, // Image for the frame
frameX: 7, // Distinct image count on X axis
frameY: 4, // Distinct image count on Y axis
frameCount: 27, // Frame count of the image
});
this.layout.addChild(this.spriteView);
}

onShow() {
super.onShow();
this.initBackButton(this.router);
this.spriteView.play(1000);
}

onLoad() {
super.onLoad();
this.initSpriteView();
}
}

You can use this image to create example sprite animation.